feat: add functionality to support custom tokens

rango-exchange · Aug 17, 2024 · a1aa0af · a1aa0af
1 parent bf95e72
commit a1aa0af
Show file tree

Hide file tree

Showing 57 changed files with 2,181 additions and 156 deletions.
diff --git a/widget/embedded/src/components/AppRoutes.tsx b/widget/embedded/src/components/AppRoutes.tsx
@@ -4,7 +4,9 @@ import { useRoutes } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
 import { useSyncUrlAndStore } from '../hooks/useSyncUrlAndStore';
+import { AddCustomTokenPage } from '../pages/AddCustomTokenPage';
 import { ConfirmSwapPage } from '../pages/ConfirmSwapPage';
+import { CustomTokensPage } from '../pages/CustomTokensPage';
 import { HistoryPage } from '../pages/HistoryPage';
 import { Home } from '../pages/Home';
 import { LanguagePage } from '../pages/LanguagePage';
@@ -80,8 +82,36 @@ export function AppRoutes() {
           path: navigationRoutes.bridges,
           element: <LiquiditySourcePage sourceType="Bridges" />,
         },
+        {
+          path: navigationRoutes.customTokens,
+          children: [
+            {
+              index: true,
+              element: <CustomTokensPage />,
+            },
+            {
+              path: navigationRoutes.addCustomTokens,
+              children: [
+                {
+                  index: true,
+                  element: <AddCustomTokenPage />,
+                },
+                {
+                  path: navigationRoutes.blockchains,
+                  element: (
+                    <SelectBlockchainPage
+                      hideCategory={true}
+                      type="custom-token"
+                    />
+                  ),
+                },
+              ],
+            },
+          ],
+        },
       ],
     },
+
     {
       path: navigationRoutes.swaps,
       children: [

diff --git a/widget/embedded/src/components/BlockchainList/BlockchainList.styles.ts b/widget/embedded/src/components/BlockchainList/BlockchainList.styles.ts
@@ -2,10 +2,12 @@ import { ImageContainer, styled } from '@rango-dev/ui';
 
 import { ScrollableArea } from '../Layout';
 
-export const Container = styled('div', {
+export const BlockchainListContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
+  height: '100%',
+  justifyContent: 'center',
 });
 
 export const List = styled(ScrollableArea, {

diff --git a/widget/embedded/src/components/BlockchainList/BlockchainList.tsx b/widget/embedded/src/components/BlockchainList/BlockchainList.tsx
@@ -14,11 +14,17 @@ import React, { useEffect, useState } from 'react';
 import { useAppStore } from '../../store/AppStore';
 
 import { filterBlockchains } from './BlockchainList.helpers';
-import { Container, List } from './BlockchainList.styles';
+import { BlockchainListContainer, List } from './BlockchainList.styles';
 import { LoadingBlockchainList } from './LoadingBlockchainList';
 
 export function BlockchainList(props: PropTypes) {
-  const { list, searchedFor, onChange, blockchainCategory } = props;
+  const {
+    list,
+    searchedFor,
+    onChange,
+    blockchainCategory,
+    showTitle = true,
+  } = props;
   const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
   const { fetchStatus } = useAppStore();
 
@@ -31,13 +37,10 @@ export function BlockchainList(props: PropTypes) {
   const renderList = () => {
     if (!blockchains.length && !!searchedFor) {
       return (
-        <>
-          <Divider size={32} />
-          <NotFound
-            title={i18n.t('No results found')}
-            description={i18n.t('Try using different keywords')}
-          />
-        </>
+        <NotFound
+          title={i18n.t('No results found')}
+          description={i18n.t('Try using different keywords')}
+        />
       );
     }
     return (
@@ -61,13 +64,19 @@ export function BlockchainList(props: PropTypes) {
   };
 
   return (
-    <Container>
-      <Typography variant="label" size="large">
-        {i18n.t('Select Blockchain')}
-      </Typography>
-      <Divider size={4} />
-      {fetchStatus === 'loading' && <LoadingBlockchainList />}
-      {fetchStatus === 'success' && renderList()}
-    </Container>
+    <>
+      {showTitle && (
+        <>
+          <Typography variant="label" size="large">
+            {i18n.t('Select Blockchain')}
+          </Typography>
+          <Divider size={4} />
+        </>
+      )}
+      <BlockchainListContainer>
+        {fetchStatus === 'loading' && <LoadingBlockchainList />}
+        {fetchStatus === 'success' && renderList()}
+      </BlockchainListContainer>
+    </>
   );
 }
diff --git a/widget/embedded/src/components/BlockchainList/BlockchainList.types.ts b/widget/embedded/src/components/BlockchainList/BlockchainList.types.ts
@@ -5,4 +5,5 @@ export interface PropTypes {
   searchedFor: string;
   blockchainCategory: string;
   onChange: (blockchain: BlockchainMeta) => void;
+  showTitle?: boolean;
 }
diff --git a/widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.styles.ts b/widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.styles.ts
@@ -0,0 +1,49 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const InputContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: '$40',
+  padding: '$4 $10',
+  borderRadius: '$sm',
+  cursor: 'pointer',
+  alignItems: 'center',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral500',
+    },
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'default',
+        '&:hover': {
+          borderColor: '$neutral300',
+          '& svg': {
+            color: '$neutral700',
+          },
+        },
+      },
+    },
+  },
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  '.title_typography': {
+    textTransform: 'capitalize',
+  },
+});
+
+export const FlexContainer = styled('div', {
+  display: 'flex',
+});
diff --git a/widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.tsx b/widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.tsx
@@ -0,0 +1,47 @@
+import type { PropTypes } from './BlockchainSelectorButton.types';
+
+import { ChevronRightIcon, Divider, Image, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  Container,
+  FlexContainer,
+  InputContainer,
+} from './BlockchainSelectorButton.styles';
+
+export function BlockchainSelectorButton(props: PropTypes) {
+  const { onClick, value, title, hasLogo, placeholder, disabled } = props;
+
+  return (
+    <Container>
+      <Typography size="large" variant="label">
+        {title}
+      </Typography>
+      <Divider size={10} />
+      <InputContainer
+        onClick={disabled ? undefined : onClick}
+        disabled={disabled}>
+        <FlexContainer>
+          {hasLogo && (
+            <>
+              <Image
+                src={value?.logo}
+                size={16}
+                useAsPlaceholder={!value?.logo}
+                type="circular"
+              />
+              <Divider size={4} direction="horizontal" />
+            </>
+          )}
+          <Typography
+            className="title_typography"
+            size="medium"
+            variant="label">
+            {value?.name || placeholder}
+          </Typography>
+        </FlexContainer>
+        <ChevronRightIcon size={12} color="black" />
+      </InputContainer>
+    </Container>
+  );
+}
diff --git a/widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.types.ts b/widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.types.ts
@@ -0,0 +1,11 @@
+export interface PropTypes {
+  onClick: () => void;
+  value?: {
+    name: string;
+    logo: string;
+  };
+  title: string;
+  placeholder: string;
+  hasLogo?: boolean;
+  disabled?: boolean;
+}
diff --git a/widget/embedded/src/components/BlockchainSelectorButton/index.ts b/widget/embedded/src/components/BlockchainSelectorButton/index.ts
@@ -0,0 +1 @@
+export { BlockchainSelectorButton } from './BlockchainSelectorButton';
diff --git a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts b/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts
diff --git a/widget/embedded/src/components/CustomDestination/CustomDestination.tsx b/widget/embedded/src/components/CustomDestination/CustomDestination.tsx
@@ -16,8 +16,10 @@ import React, { useEffect, useRef } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { getBlockchainDisplayNameFor } from '../../utils/meta';
-import { isValidAddress } from '../ConfirmWalletsModal/ConfirmWallets.helpers';
+import {
+  getBlockchainDisplayNameFor,
+  isValidTokenAddress,
+} from '../../utils/meta';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -44,7 +46,7 @@ export function CustomDestination(props: PropTypes) {
   const isFirefox = navigator?.userAgent.includes('Firefox');
   const isAddressChecked = open && !!customDestination && blockchain;
   const isAddressInvalid =
-    isAddressChecked && !isValidAddress(blockchain, customDestination);
+    isAddressChecked && !isValidTokenAddress(blockchain, customDestination);
   const handleClear = () => {
     setCustomDestination('');
   };

diff --git a/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.helpers.ts b/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.helpers.ts
@@ -0,0 +1,19 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export function generateExplorerLink(
+  address: string | null,
+  blockchain: BlockchainMeta
+): string {
+  // We don't have Cosmos explorer url in API.
+  if (blockchain.type === 'COSMOS') {
+    return '';
+  }
+
+  const explorerLinkPattern = blockchain.info?.addressUrl;
+
+  if (!explorerLinkPattern || !address) {
+    return '';
+  }
+
+  return explorerLinkPattern.replace('{wallet}', address);
+}
diff --git a/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.styles.ts b/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.styles.ts
@@ -0,0 +1,57 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const StyledLink = styled('a', {
+  textDecoration: 'none',
+  color: '$colors$neutral700',
+  [`.${darkTheme} &`]: {
+    color: '$colors$neutral900',
+  },
+
+  '& svg': {
+    marginLeft: '$4',
+    color: '$colors$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral900',
+    },
+  },
+
+  variants: {
+    hasHover: {
+      true: {
+        '&:hover': {
+          color: '$colors$secondary550',
+          [`.${darkTheme} &`]: {
+            color: '$colors$secondary500',
+          },
+          '& svg': {
+            color: '$colors$secondary550',
+            [`.${darkTheme} &`]: {
+              color: '$colors$secondary500',
+            },
+          },
+        },
+      },
+      false: {},
+    },
+  },
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+  '& ._blockchain-name, & ._coin-source': {
+    color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral800',
+    },
+  },
+  '& ._coin-source-name, & ._custom-token-description': {
+    color: '$colors$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral900',
+    },
+  },
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { BlockchainSelectorButton } from './BlockchainSelectorButton';