@rango-dev/ui 0.15.1-next.16 → 0.15.1-next.18

package/src/components/RouteCost/RouteCost.tsx

@@ -1,5 +1,6 @@
 import type { PropTypes } from './RouteCost.types';
 
+import { i18n } from '@lingui/core';
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
@@ -26,7 +27,11 @@ export function RouteCost(props: PropTypes) {
           <TimeIcon size={12} color="gray" />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">
-          {`${time} min`}
+          {i18n.t({
+            id: 'timeMin',
+            message: '{time} min',
+            values: { time },
+          })}
         </Typography>
       </div>
       <Separator />

package/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts

@@ -0,0 +1,35 @@
+import { type BlockchainMeta, TransactionType } from 'rango-sdk';
+
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
+  switch (type) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchain.type === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchain.type !== TransactionType.TRANSFER &&
+        blockchain.type !== TransactionType.COSMOS &&
+        blockchain.type !== TransactionType.EVM
+      );
+    default:
+      return blockchain.type === type;
+  }
+};
+
+const blockchainslogo = {
+  [BlockchainCategories.EVM]: ['ETH', 'BSC', 'POLYGON'],
+  [BlockchainCategories.COSMOS]: ['COSMOS', 'OSMOSIS', 'JUNO'],
+  [BlockchainCategories.UTXO]: ['BTC', 'LTC', 'BCH'],
+  [BlockchainCategories.OTHER]: ['STARKNET', 'TRON', 'SOLANA'],
+};
+
+export const generateBlockchainsLogo = (
+  list: BlockchainMeta[],
+  type: Exclude<BlockchainCategories, 'ALL'>
+) =>
+  list
+    .filter((item) => filterByType(item, type))
+    .filter((item) => blockchainslogo[type].includes(item.name));

package/src/components/SelectableCategoryList/SelectableCategoryList.styles.ts

@@ -0,0 +1,21 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr',
+});
+
+export const ImageContent = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: '$10',
+});
+export const FirstImage = styled('img', {
+  position: 'absolute',
+  top: -2,
+  width: 15,
+  height: 15,
+});

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './SelectableCategoryList.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Divider, Image, Skeleton, Typography } from '..';
+import { BlockchainsChip } from '../BlockchainsChip';
+
+import { generateBlockchainsLogo } from './SelectableCategoryList.helpers';
+import {
+  Container,
+  FirstImage,
+  ImageContent,
+} from './SelectableCategoryList.styles';
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+export function SelectableCategoryList(props: PropTypes) {
+  const { setCategory, category, blockchains, isLoading } = props;
+  const categories = Object.keys(
+    BlockchainCategories
+  ) as BlockchainCategories[];
+  return (
+    <Container>
+      {isLoading &&
+        Array.from(Array(5), (_, index) => (
+          <Skeleton
+            key={index}
+            variant="rounded"
+            height={70}
+            width={index === 0 ? 45 : 65}
+          />
+        ))}
+      {!isLoading &&
+        categories.map((blockchainCategory) => (
+          <BlockchainsChip
+            selected={category === blockchainCategory}
+            key={blockchainCategory}
+            onClick={() => setCategory(blockchainCategory)}>
+            {blockchainCategory !== BlockchainCategories.ALL && (
+              <>
+                <ImageContent>
+                  {generateBlockchainsLogo(blockchains, blockchainCategory).map(
+                    (blockchain, index) =>
+                      index === 0 ? (
+                        <FirstImage
+                          key={`image-${blockchain.name}-${blockchain.chainId}`}
+                          src={blockchain.logo}
+                        />
+                      ) : (
+                        <Image
+                          key={`image-${blockchain.name}-${blockchain.chainId}`}
+                          src={blockchain.logo}
+                          size={15}
+                        />
+                      )
+                  )}
+                </ImageContent>
+                <Divider size={12} />
+              </>
+            )}
+            <Typography
+              size="xsmall"
+              variant="body"
+              color={
+                blockchainCategory === BlockchainCategories.ALL
+                  ? 'secondary500'
+                  : undefined
+              }>
+              {i18n.t(BlockchainCategories[blockchainCategory])}
+            </Typography>
+          </BlockchainsChip>
+        ))}
+    </Container>
+  );
+}

package/src/components/SelectableCategoryList/SelectableCategoryList.types.ts

@@ -0,0 +1,16 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PropTypes {
+  setCategory: (type: string) => void;
+  category: string;
+  blockchains: BlockchainMeta[];
+  isLoading?: boolean;
+}
+
+export enum BlockchainCategories {
+  ALL = 'ALL',
+  EVM = 'EVM',
+  COSMOS = 'COSMOS',
+  UTXO = 'UTXO',
+  OTHER = 'OTHER',
+}

package/src/components/SelectableCategoryList/index.ts

@@ -0,0 +1,2 @@
+export { SelectableCategoryList } from './SelectableCategoryList';
+export { BlockchainCategories } from './SelectableCategoryList.types';

package/src/components/StepDetails/StepDetails.tsx

@@ -1,5 +1,6 @@
 import type { StepDetailsProps } from './StepDetails.types';
 
+import { i18n } from '@lingui/core';
 import React, { forwardRef, memo, useEffect, useRef } from 'react';
 
 import { ChainToken } from '../../components/ChainToken/ChainToken';
@@ -49,7 +50,16 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
             className="swapper__description"
             ml={8}
             size="small"
-            variant="body">{`Swap on ${step.from.chain.displayName} via ${step.swapper.displayName}`}</Typography>
+            variant="body">
+            {i18n.t({
+              id: 'swapperDescription',
+              message: 'Swap on {fromChain} via {swapper}',
+              values: {
+                fromChain: step.from.chain.displayName,
+                swapper: step.swapper.displayName,
+              },
+            })}
+          </Typography>
         </div>
         <div className="step-info">
           <DashedLine invisible={!hasSeparator || type === 'route-progress'} />

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

@@ -1,5 +1,7 @@
 import type { Info } from './Wallet.types';
 
+import { i18n } from '@lingui/core';
+
 import { WalletState } from './Wallet.types';
 
 export function makeInfo(state: WalletState): Info {
@@ -7,28 +9,28 @@ export function makeInfo(state: WalletState): Info {
     case WalletState.CONNECTED:
       return {
         color: 'success500',
-        description: 'Connected',
-        tooltipText: 'Disconnect',
+        description: i18n.t('Connected'),
+        tooltipText: i18n.t('Disconnect'),
       };
     case WalletState.NOT_INSTALLED:
       return {
         color: 'info500',
-        description: 'Install',
-        tooltipText: 'Install',
+        description: i18n.t('Install'),
+        tooltipText: i18n.t('Install'),
       };
     case WalletState.CONNECTING:
       return {
         color: 'neutral800',
-        description: 'Connecting...',
-        tooltipText: 'Connecting',
+        description: i18n.t('Connecting...'),
+        tooltipText: i18n.t('Connecting'),
       };
     case WalletState.DISCONNECTED:
       return {
         color: 'neutral800',
-        description: 'Disconnected',
-        tooltipText: 'Connect',
+        description: i18n.t('Disconnected'),
+        tooltipText: i18n.t('Connect'),
       };
     default:
-      throw new Error('you need to pass a correct state to Wallet.');
+      throw new Error(i18n.t('you need to pass a correct state to Wallet.'));
   }
 }

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './I18nManager';
 export * from './Alert';
 export * from './BestRoute';
+export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
 export * from './IconButton';
@@ -21,6 +22,7 @@ export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Wallet';
+export * from './SelectableCategoryList';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';

package/src/containers/SwapInput/SwapInput.stories.tsx

@@ -32,6 +32,7 @@ export const SwapTo = (args: SwapInputProps) => (
   <SwapInput
     {...args}
     label="To"
+    mode="To"
     price={{ value: '2.5', usdValue: '610' }}
     percentageChange="6.4"
     warningLevel="high"

package/src/containers/SwapInput/SwapInput.tsx

@@ -1,5 +1,6 @@
 import type { SwapInputProps } from './SwapInput.types';
 
+import { i18n } from '@lingui/core';
 import React from 'react';
 
 import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
@@ -22,14 +23,14 @@ export function SwapInput(props: SwapInputProps) {
                 mr={4}
                 variant="body"
                 size="xsmall">
-                Balance: {props.balance}
+                {i18n.t('Balance')}: {props.balance}
               </Typography>
               <MaxButton
                 variant="default"
                 size="xsmall"
                 onClick={props.onSelectMaxBalance}>
                 <Typography variant="body" size="xsmall" color="secondary500">
-                  Max
+                  {i18n.t('Max')}
                 </Typography>
               </MaxButton>
             </div>
@@ -61,7 +62,7 @@ export function SwapInput(props: SwapInputProps) {
           ) : (
             <>
               <InputAmount
-                disabled={props.disabled || props.label === 'To'}
+                disabled={props.disabled || props.mode === 'To'}
                 style={{ padding: 0 }}
                 value={props.price.value}
                 type={'onInputChange' in props ? 'number' : 'text'}

package/src/containers/SwapInput/SwapInput.types.ts

@@ -17,25 +17,22 @@ export type BaseProps = {
   loading?: boolean;
   error?: boolean;
   disabled?: boolean;
+  label: string;
   sharpBottomStyle?: boolean;
   onClickToken: () => void;
 };
 
 type FromProps = {
-  label: 'From';
+  mode: 'From';
   balance?: string;
   onSelectMaxBalance: () => void;
   onInputChange: (inputAmount: string) => void;
 };
 
 type ToProps = {
-  label: 'To';
+  mode: 'To';
   percentageChange: string | null;
   warningLevel: PriceImpactWarningLevel;
 };
 
-type Common = {
-  label: string;
-};
-
-export type SwapInputProps = BaseProps & (FromProps | ToProps | Common);
+export type SwapInputProps = BaseProps & (FromProps | ToProps);