@rango-dev/ui 0.17.1-next.8 → 0.18.0

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -111,7 +111,7 @@ export function LiquiditySourceList(props: PropTypes) {
           <Typography variant="title" size="xmedium">
             {i18n.t('Bridges')}
           </Typography>
-          <Typography variant="body" size="medium" color="neutral800">
+          <Typography variant="body" size="medium" color="neutral600">
             {totalSelectedBridges === totalBridges
               ? totalBridges
               : `${totalSelectedBridges} / ${totalBridges}`}
@@ -150,7 +150,7 @@ export function LiquiditySourceList(props: PropTypes) {
           <Typography variant="title" size="xmedium">
             {i18n.t('Exchanges')}
           </Typography>
-          <Typography variant="body" size="medium" color="neutral800">
+          <Typography variant="body" size="medium" color="neutral600">
             {totalSelectedExchanges === totalExchanges
               ? totalExchanges
               : `${totalSelectedExchanges} / ${totalExchanges}`}

package/src/components/ListItem/ListItem.tsx

@@ -16,7 +16,7 @@ function ListItem(props: ListItemProps) {
       <div className="item-text-container">
         {title && <div className="item-text-title">{title}</div>}
         {description && (
-          <Typography variant="body" size="small" color="neutral800">
+          <Typography variant="body" size="small" color="neutral600">
             {description}
           </Typography>
         )}

package/src/components/MessageBox/DefaultMessageBox.tsx

@@ -27,7 +27,7 @@ export function MessageBox(props: PropsWithChildren<PropTypes>) {
       <Divider size={16} />
       <Description>
         {typeof description === 'string' ? (
-          <Typography color="neutral900" variant="body" size="medium">
+          <Typography color="neutral700" variant="body" size="medium">
             {description}
           </Typography>
         ) : (

package/src/components/NotFound/NotFound.tsx

@@ -16,7 +16,7 @@ export function NotFound(props: PropTypes) {
       <Typography variant="title" size="medium">
         {props.title}
       </Typography>
-      <Typography variant="body" size="medium" color="neutral900">
+      <Typography variant="body" size="medium" color="neutral700">
         {props.description}
       </Typography>
     </Container>

package/src/components/PriceImpact/PriceImpact.tsx

@@ -9,7 +9,7 @@ import { Container } from './PriceImpact.styles';
 export function PriceImpact(props: PriceImpactProps) {
   const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
 
-  let percentageChangeColor = '$neutral900';
+  let percentageChangeColor = '$neutral700';
   if (!outputUsdValue || warningLevel === 'low') {
     percentageChangeColor = '$warning500';
   } else if (warningLevel === 'high') {
@@ -22,7 +22,7 @@ export function PriceImpact(props: PriceImpactProps) {
         <Typography
           size={size === 'small' ? 'small' : 'medium'}
           variant="body"
-          color={size !== 'small' ? '$neutral800' : '$neutral900'}>
+          color={size !== 'small' ? '$neutral600' : '$neutral700'}>
           {`~$${outputUsdValue}`}
         </Typography>
       )}

package/src/components/Radio/Radio.styles.tsx

@@ -9,7 +9,7 @@ export const StyledItem = styled(Radio.Item, {
   borderRadius: '100%',
   cursor: 'pointer',
   backgroundColor: 'transparent',
-  border: '1px solid $neutral800',
+  border: '1px solid $neutral600',
 
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',

package/src/components/RoutesOverview/RoutesOverview.tsx

@@ -13,7 +13,7 @@ export const Container = styled('div', {
   padding: '$8',
   borderRadius: '$xs',
   backgroundColor: '$background',
-  color: '$neutral800',
+  color: '$neutral600',
   fontSize: '$12',
 
   '.routes': {

package/src/components/StepDetail/StepDetail.tsx

@@ -1,4 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
 import { styled } from '../../theme';
 import { Typography } from '../Typography';
 
@@ -74,7 +77,7 @@ const Detail = styled('div', {
   },
 });
 const SubTitle = styled(Typography, {
-  color: '$neutral600',
+  color: '$neutral800',
   display: 'block',
   paddingLeft: '$8',
 });
@@ -122,7 +125,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
             noWrap
             variant={direction === 'vertical' ? 'body' : 'title'}
             size="medium"
-            color={'$neutral600'}>
+            color={'$neutral800'}>
             {estimatedAmount}
           </Typography>
         )}
@@ -133,7 +136,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
           noWrap>
           {symbol}
         </Typography>
-        <SubTitle noWrap variant="body" size="xsmall" color="$neutral800">
+        <SubTitle noWrap variant="body" size="xsmall" color="$neutral600">
           on {blockchain}
         </SubTitle>
       </Detail>

package/src/components/StepDetails/StepDetails.tsx

@@ -52,8 +52,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
             size="small"
             variant="body">
             {i18n.t({
-              id: 'swapperDescription',
-              message: 'Swap on {fromChain} via {swapper}',
+              id: 'Swap on {fromChain} via {swapper}',
               values: {
                 fromChain: step.from.chain.displayName,
                 swapper: step.swapper.displayName,
@@ -74,7 +73,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 ml={4}
                 mr={4}
                 size="small"
-                color="$neutral900"
+                color="$neutral700"
                 variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
               <NextIcon color="gray" />
               <Divider size={4} direction="horizontal" />
@@ -86,7 +85,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
               <Typography
                 ml={4}
                 size="small"
-                color="$neutral900"
+                color="$neutral700"
                 variant="body">{`${isCompleted ? '' : '~'}${
                 step.to.price.value
               } ${step.to.token.displayName}`}</Typography>

package/src/components/SvgIcon/SvgIcon.style.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '../../theme';
+import { styled } from '../../theme';
 
 export const SvgWithColor = styled('svg', {
   variants: {
@@ -28,11 +28,7 @@ export const SvgWithColor = styled('svg', {
         color: '$info500',
       },
       gray: {
-        $$color: '$colors$neutral900',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$neutral800',
-        },
-        color: '$$color',
+        color: '$neutral600',
       },
     },
   },

package/src/components/SwapDetailsPlaceholder/SwapDetailsPlaceholder.tsx

@@ -36,11 +36,10 @@ export function SwapDetailsPlaceholder(props: PropTypes) {
         ) : (
           <Alert
             type="error"
-            title={i18n.t(
-              'swapNotFound',
-              { requestId },
-              { message: 'Swap with request ID = ${requestId} not found.' }
-            )}
+            title={i18n.t({
+              id: 'Swap with request ID = {requestId} not found.',
+              values: { requestId },
+            })}
           />
         )}
       </PlaceholderContainer>

package/src/components/SwapListItem/SwapListItem.tsx

@@ -46,7 +46,7 @@ export function SwapListItem(props: PropsWithChildren<PropTypes>) {
       <Container>
         <Header>
           <Date>
-            <Typography variant="label" size="medium" color="neutral800">
+            <Typography variant="label" size="medium" color="neutral600">
               {formattedDateAndTime(creationTime, onlyShowTime)}
             </Typography>
           </Date>

package/src/components/SwapListItem/SwapToken.tsx

@@ -114,7 +114,7 @@ export function SwapToken(props: PropTypes) {
               {toToken.displayName}
             </Typography>
           </TopSection>
-          <Typography size="small" variant="body" color="neutral900">
+          <Typography size="small" variant="body" color="neutral700">
             {i18n.t('Waiting for bridge transaction')}
           </Typography>
         </Layout>
@@ -125,7 +125,7 @@ export function SwapToken(props: PropTypes) {
               {fromToken.displayName}
             </Typography>
             {!!fromAmount && (
-              <Typography size="small" variant="body" color="neutral900">
+              <Typography size="small" variant="body" color="neutral700">
                 {fromAmount}
               </Typography>
             )}
@@ -138,7 +138,7 @@ export function SwapToken(props: PropTypes) {
               {toToken.displayName}
             </Typography>
 
-            <Typography size="small" variant="body" color="neutral900">
+            <Typography size="small" variant="body" color="neutral700">
               {toAmount || estimatedAmount}
             </Typography>
           </TokenInfo>

package/src/components/Switch/Switch.styles.tsx

@@ -8,8 +8,8 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '24px',
   height: '16px',
-  backgroundColor: '$neutral800',
-  borderColor: '$neutral800',
+  backgroundColor: '$neutral600',
+  borderColor: '$neutral600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',

package/src/components/TextField/TextField.styles.ts

@@ -111,7 +111,7 @@ export const Input = styled('input', {
   },
 
   '&::placeholder, &::-webkit-input-placeholder': {
-    color: '$neutral900',
+    color: '$neutral700',
   },
   '&:focus-visible': {
     outline: 'none',

package/src/components/TokenAmount/TokenAmount.tsx

@@ -19,7 +19,7 @@ export function TokenAmount(props: PropTypes) {
         />
         <div>
           {props.label && (
-            <Typography ml={4} size="xsmall" variant="body" color="$neutral900">
+            <Typography ml={4} size="xsmall" variant="body" color="$neutral700">
               {props.label}
             </Typography>
           )}
@@ -43,7 +43,7 @@ export function TokenAmount(props: PropTypes) {
       </div>
       <div className="usd-value">
         {props.type === 'input' && (
-          <Typography mr={4} size="small" variant="body" color="$neutral900">
+          <Typography mr={4} size="small" variant="body" color="$neutral700">
             {`~$${props.price.usdValue}`}
           </Typography>
         )}

package/src/components/TokenList/TokenItem.tsx

@@ -70,7 +70,7 @@ export function TokenItem(props: PropTypes) {
           <Typography variant="body" size="medium">
             {token.symbol}
           </Typography>
-          <Typography variant="body" size="xsmall" color="neutral600">
+          <Typography variant="body" size="xsmall" color="neutral800">
             {token.name}
           </Typography>
         </TokenNameContainer>

package/src/components/TokenPreview/TokenPreview.tsx

@@ -117,7 +117,7 @@ export function TokenPreview(props: PropTypes) {
     <Box>
       <Container type={'outlined'}>
         <div className="head">
-          <Typography variant="body" size="small" color="neutral800">
+          <Typography variant="body" size="small" color="neutral600">
             {props.label}
           </Typography>
           <div>
@@ -126,7 +126,7 @@ export function TokenPreview(props: PropTypes) {
               <Typography
                 variant="body"
                 size="xsmall"
-                color="neutral600"
+                color="neutral800"
                 className="usd-value">{`$${props.usdValue}`}</Typography>
             )}
           </div>

package/src/components/Wallet/Content.tsx

@@ -1,12 +1,14 @@
+import type { ContentProps } from './Wallet.types';
+
 import React from 'react';
 
-import { ContentProps } from './Wallet.types';
-import { Typography } from '../Typography';
 import { Image } from '../common';
+import { Typography } from '../Typography';
+
 import { Text, WalletImageContainer } from './Wallet.styles';
 
 function Content(props: ContentProps) {
-  const { image, title, description, descriptionColor = 'neutral600' } = props;
+  const { image, title, description, descriptionColor = 'neutral800' } = props;
   return (
     <>
       <WalletImageContainer>

package/src/components/Wallet/SelectableWallet.tsx

@@ -40,7 +40,7 @@ export function SelectableWallet(props: SelectablePropTypes) {
           variant="body"
           size="xsmall"
           noWrap={false}
-          color={state === WalletState.CONNECTED ? 'neutral900' : info.color}>
+          color={state === WalletState.CONNECTED ? 'neutral700' : info.color}>
           {description || info.description}
         </Typography>
       </Text>

package/src/components/Wallet/Wallet.helpers.ts

@@ -20,13 +20,13 @@ export function makeInfo(state: WalletState): Info {
       };
     case WalletState.CONNECTING:
       return {
-        color: 'neutral800',
+        color: 'neutral600',
         description: i18n.t('Connecting...'),
         tooltipText: i18n.t('Connecting'),
       };
     case WalletState.DISCONNECTED:
       return {
-        color: 'neutral800',
+        color: 'neutral600',
         description: i18n.t('Disconnected'),
         tooltipText: i18n.t('Connect'),
       };

package/src/components/index.ts

@@ -49,3 +49,4 @@ export * from './RouteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
+export * from './Flags';

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -66,7 +66,7 @@ export const ErrorMsg = styled(Typography, {
 
 export const FeeContainer = styled('div', {
   paddingLeft: '$16',
-  color: '$neutral800',
+  color: '$neutral600',
 });
 
 export const Fee = styled('div', {
@@ -150,12 +150,12 @@ const Row = styled('div', {
   padding: '$8 0',
 
   '.name': {
-    color: '$neutral600',
+    color: '$neutral800',
   },
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutral800',
+    color: '$neutral600',
     justifyContent: 'flex-end',
   },
   '.status': {
@@ -182,7 +182,7 @@ const RequestId = styled('div', {
 
 const ExtraDetails = styled('div', {
   padding: '0',
-  color: '$neutral600',
+  color: '$neutral800',
   fontSize: '$10',
 });
 

package/src/containers/SwapInput/SwapInput.tsx

@@ -13,13 +13,13 @@ export function SwapInput(props: SwapInputProps) {
     <Container sharpBottomStyle={props.sharpBottomStyle}>
       <div className="label__container">
         <div className="label">
-          <Typography variant="body" size="small" color="$neutral800">
+          <Typography variant="body" size="small" color="$neutral600">
             {props.label}
           </Typography>
           {'balance' in props && !props.loading && (
             <div className="balance">
               <Typography
-                color="$neutral800"
+                color="$neutral600"
                 mr={4}
                 variant="body"
                 size="xsmall">
@@ -87,7 +87,7 @@ export function SwapInput(props: SwapInputProps) {
                 <Typography
                   variant="body"
                   size="medium"
-                  color={!props.price.error ? '$neutral800' : '$warning500'}
+                  color={!props.price.error ? '$neutral600' : '$warning500'}
                   style={{
                     width: 140,
                     textAlign: 'right',

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -3,9 +3,9 @@ import { darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {
   backgroundColor: 'transparent',
-  color: '$neutral900',
+  color: '$neutral700',
   '&:disabled': {
-    color: '$neutral800',
+    color: '$neutral600',
   },
   '&:focus-visible': {
     $$color: '$colors$info100',

package/src/containers/SwapInput/TokenSection.tsx

@@ -41,7 +41,7 @@ export function TokenSection(props: TokenSectionProps) {
                   ? i18n.t('Token')
                   : tokenSymbol}
               </Typography>
-              <Typography variant="body" size="medium" color="$neutral800">
+              <Typography variant="body" size="medium" color="$neutral600">
                 {error || (!loading && !chain) ? i18n.t('Chain') : chain}
               </Typography>
             </>

package/src/containers/TokenInfo/TokenInfo.tsx

@@ -174,7 +174,7 @@ export function TokenInfo(props: PropTypes) {
     <Box>
       <Container type={type === 'From' ? 'filled' : 'outlined'}>
         <div className="head">
-          <Typography variant="body" size="small" color="neutral800">
+          <Typography variant="body" size="small" color="neutral600">
             {type === 'From' ? (
               <Trans id="swap from" message="From" />
             ) : (
@@ -190,7 +190,7 @@ export function TokenInfo(props: PropTypes) {
                     setInputAmount(tokenBalanceReal.split(',').join(''));
                   }
                 }}>
-                <Typography variant="body" size="small" color="neutral600">
+                <Typography variant="body" size="small" color="neutral800">
                   {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''}
                 </Typography>
                 <Divider size={4} />
@@ -209,7 +209,7 @@ export function TokenInfo(props: PropTypes) {
                 <Typography
                   variant="body"
                   size="xsmall"
-                  color="neutral600">{`$${props.outputUsdValue}`}</Typography>
+                  color="neutral800">{`$${props.outputUsdValue}`}</Typography>
               </div>
             </div>
           )}
@@ -280,7 +280,7 @@ export function TokenInfo(props: PropTypes) {
                     <Typography
                       variant="body"
                       size="xsmall"
-                      color="neutral800">{`$${inputUsdValue}`}</Typography>
+                      color="neutral600">{`$${inputUsdValue}`}</Typography>
                   </span>
                 }
                 value={inputAmount || ''}

package/src/containers/Warnings/BalanceErrors.tsx

@@ -28,7 +28,7 @@ export function BalanceErrors({ messages }: PropTypes) {
           const key = index + warning;
           return (
             <ListItem key={key}>
-              <Message variant="body" size="medium" color="$neutral900">
+              <Message variant="body" size="medium" color="$neutral700">
                 {warning}
               </Message>
             </ListItem>

package/src/containers/Warnings/HighSlippageWarning.tsx

@@ -1,7 +1,8 @@
-import { Alert } from '../../components/Alert';
+import { i18n } from '@lingui/core';
 import React from 'react';
+
+import { Alert } from '../../components/Alert';
 import { ChangeSlippageButton } from '../../components/ChangeSlippageButton';
-import { i18n } from '@lingui/core';
 
 interface PropTypes {
   selectedSlippage: number;
@@ -18,14 +19,10 @@ export function HighSlippageWarning(props: PropTypes) {
         <Alert
           type="warning"
           footer={<ChangeSlippageButton onClick={changeSlippage} />}>
-          {i18n.t(
-            'highSlippage',
-            { selectedSlippage },
-            {
-              message:
-                ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
-            }
-          )}
+          {i18n.t({
+            id: ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
+            values: { selectedSlippage },
+          })}
         </Alert>
       )}
     </>

package/src/containers/Warnings/MinRequiredSlippage.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { i18n } from '@lingui/core';
-import { Divider, Typography, ChangeSlippageButton } from '../../components';
+import React from 'react';
+
+import { ChangeSlippageButton, Divider, Typography } from '../../components';
 import { styled } from '../../theme';
 
 interface PropTypes {
@@ -18,14 +19,10 @@ export function MinRequiredSlippage({
 }: PropTypes) {
   return (
     <StyledMessage variant="body" size="small">
-      {i18n.t(
-        'increaseSlippage',
-        { minRequiredSlippage },
-        {
-          message:
-            'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
-        }
-      )}
+      {i18n.t({
+        id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+        values: { minRequiredSlippage },
+      })}
       <Divider size={8} />
       <ChangeSlippageButton onClick={changeSlippage} />
     </StyledMessage>

package/src/theme.ts

@@ -30,10 +30,10 @@ export const theme = {
     neutral300: '#F2F2F2',
     neutral400: '#EEEEEE',
     neutral500: '#E6E6E6',
-    neutral600: '#1B1B1B',
-    neutral700: '#121212',
-    neutral800: '#A2A2A2',
-    neutral900: '#727272',
+    neutral600: '#A2A2A2',
+    neutral700: '#727272',
+    neutral800: '#1B1B1B',
+    neutral900: '#121212',
 
     error100: '#FDF3F3',
     error300: '#FFD7D7',
@@ -185,10 +185,10 @@ export const darkColors = {
   secondary600: '#2B3462',
 
   neutral: '#222222',
-  neutral900: '#E9E9E9',
-  neutral800: '#B8B8B8',
-  neutral700: '#F2F2F2',
-  neutral600: '#EEEEEE',
+  neutral900: '#F2F2F2',
+  neutral800: '#EEEEEE',
+  neutral700: '#E9E9E9',
+  neutral600: '#B8B8B8',
   neutral500: '#222222',
   neutral400: '#1B1B1B',
   neutral300: '#121212',

package/dist/translations/jp.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"jp.d.ts","sourceRoot":"","sources":["../../../../translations/jp.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAkvV,CAAC"}