From a1aa0afed98f164488a3caffaaff2fd060ab8b3d Mon Sep 17 00:00:00 2001
From: mikasackermn <mikasa@rango.exchange>
Date: Sat, 17 Aug 2024 06:34:57 +0000
Subject: [PATCH] feat: add functionality to support custom tokens

---
 widget/embedded/src/components/AppRoutes.tsx  |  30 ++
 .../BlockchainList/BlockchainList.styles.ts   |   4 +-
 .../BlockchainList/BlockchainList.tsx         |  43 +-
 .../BlockchainList/BlockchainList.types.ts    |   1 +
 .../BlockchainSelectorButton.styles.ts        |  49 +++
 .../BlockchainSelectorButton.tsx              |  47 ++
 .../BlockchainSelectorButton.types.ts         |  11 +
 .../BlockchainSelectorButton/index.ts         |   1 +
 .../ConfirmWallets.helpers.ts                 |  10 -
 .../CustomDestination/CustomDestination.tsx   |   8 +-
 .../CustomTokenModal.helpers.ts               |  19 +
 .../CustomTokenModal.styles.ts                |  57 +++
 .../CustomTokenModal/CustomTokenModal.tsx     |  92 ++++
 .../CustomTokenModal.types.ts                 |   9 +
 .../src/components/CustomTokenModal/index.ts  |   1 +
 .../components/TokenList/TokenList.styles.ts  |   1 +
 .../src/components/TokenList/TokenList.tsx    | 127 +++---
 .../components/TokenList/TokenList.types.ts   |   7 +-
 widget/embedded/src/constants/customTokens.ts |   6 +
 .../src/constants/navigationRoutes.ts         |   2 +
 widget/embedded/src/constants/searchParams.ts |   3 +
 .../src/containers/Settings/Lists.tsx         |  26 +-
 .../embedded/src/hooks/useFetchCustomToken.ts | 114 +++++
 widget/embedded/src/hooks/useSwapInput.ts     |  11 +-
 .../useSyncUrlAndStore/useSyncUrlAndStore.ts  |   7 +-
 widget/embedded/src/hooks/useTheme.ts         |   6 +-
 .../embedded/src/pages/AddCustomTokenPage.tsx | 210 +++++++++
 .../embedded/src/pages/CustomTokensPage.tsx   | 184 ++++++++
 widget/embedded/src/pages/HistoryPage.tsx     |   4 +-
 .../src/pages/LiquiditySourcePage.tsx         |   4 +-
 .../src/pages/SelectBlockchainPage.tsx        |  23 +-
 .../src/pages/SelectSwapItemsPage.tsx         |   2 +-
 widget/embedded/src/store/app.ts              |   1 +
 widget/embedded/src/store/quote.ts            |  14 +-
 widget/embedded/src/store/slices/data.ts      |  69 ++-
 widget/embedded/src/store/slices/settings.ts  |  37 +-
 widget/embedded/src/store/utils/data.ts       |  27 +-
 widget/embedded/src/types/config.ts           |   5 +-
 widget/embedded/src/utils/meta.ts             |  13 +-
 widget/embedded/src/utils/quote.ts            |  19 +-
 widget/embedded/src/utils/settings.ts         |  14 +-
 widget/embedded/src/utils/swap.ts             |  14 +-
 .../src/components/Button/Button.styles.tsx   |   6 +-
 .../src/components/Divider/Divider.styles.ts  |  15 +
 .../components/NotFound/NotFound.styles.ts    |   8 +-
 .../ui/src/components/NotFound/NotFound.tsx   |   9 +-
 .../src/components/NotFound/NotFound.types.ts |   5 +-
 .../components/TextField/TextField.styles.ts  |   3 +
 .../ui/src/containers/SwapInput/SwapInput.tsx |  38 +-
 widget/ui/src/icons/CustomTokensZeroState.tsx | 262 +++++++++++
 .../src/icons/CustomTokensZeroStateDark.tsx   | 415 ++++++++++++++++++
 widget/ui/src/icons/Target.tsx                |  24 +
 widget/ui/src/icons/index.ts                  |   5 +-
 widget/ui/src/theme.ts                        |   1 +
 .../resources/fill/CustomTokensZeroState.svg  |  97 ++++
 .../fill/CustomTokensZeroStateDark.svg        | 112 +++++
 widget/ui/svgs/resources/fill/Target.svg      |   5 +
 57 files changed, 2181 insertions(+), 156 deletions(-)
 create mode 100644 widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.styles.ts
 create mode 100644 widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.tsx
 create mode 100644 widget/embedded/src/components/BlockchainSelectorButton/BlockchainSelectorButton.types.ts
 create mode 100644 widget/embedded/src/components/BlockchainSelectorButton/index.ts
 delete mode 100644 widget/embedded/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts
 create mode 100644 widget/embedded/src/components/CustomTokenModal/CustomTokenModal.helpers.ts
 create mode 100644 widget/embedded/src/components/CustomTokenModal/CustomTokenModal.styles.ts
 create mode 100644 widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx
 create mode 100644 widget/embedded/src/components/CustomTokenModal/CustomTokenModal.types.ts
 create mode 100644 widget/embedded/src/components/CustomTokenModal/index.ts
 create mode 100644 widget/embedded/src/constants/customTokens.ts
 create mode 100644 widget/embedded/src/hooks/useFetchCustomToken.ts
 create mode 100644 widget/embedded/src/pages/AddCustomTokenPage.tsx
 create mode 100644 widget/embedded/src/pages/CustomTokensPage.tsx
 create mode 100644 widget/ui/src/icons/CustomTokensZeroState.tsx
 create mode 100644 widget/ui/src/icons/CustomTokensZeroStateDark.tsx
 create mode 100644 widget/ui/src/icons/Target.tsx
 create mode 100644 widget/ui/svgs/resources/fill/CustomTokensZeroState.svg
 create mode 100644 widget/ui/svgs/resources/fill/CustomTokensZeroStateDark.svg
 create mode 100644 widget/ui/svgs/resources/fill/Target.svg

diff --git a/widget/embedded/src/components/AppRoutes.tsx b/widget/embedded/src/components/AppRoutes.tsx
index d3b6e98b5f..9d9c92356b 100644
--- 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
index be3cbfeb05..de825faa8e 100644
--- 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
index cc8b17b1fe..a8453d3a4a 100644
--- 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
index f06942805c..e5cb8562e8 100644
--- 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
new file mode 100644
index 0000000000..132b871aec
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..ddd68e056b
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..380802a4dc
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..4e3c4b7013
--- /dev/null
+++ 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
deleted file mode 100644
index d2dd141edd..0000000000
--- a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { BlockchainMeta } from 'rango-sdk';
-
-export function isValidAddress(
-  chain: BlockchainMeta,
-  address: string
-): boolean {
-  const regex = chain.addressPatterns;
-  const valid = regex.filter((r) => new RegExp(r).test(address)).length > 0;
-  return valid;
-}
diff --git a/widget/embedded/src/components/CustomDestination/CustomDestination.tsx b/widget/embedded/src/components/CustomDestination/CustomDestination.tsx
index d88835b31b..7b2f1df3a5 100644
--- 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
new file mode 100644
index 0000000000..1d7a4cba3e
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..d8bc040646
--- /dev/null
+++ 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',
+    },
+  },
+});
diff --git a/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx b/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx
new file mode 100644
index 0000000000..6419b662fc
--- /dev/null
+++ b/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx
@@ -0,0 +1,92 @@
+import type { PropTypes } from './CustomTokenModal.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  ExternalLinkIcon,
+  Image,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { generateExplorerLink } from './CustomTokenModal.helpers';
+import { Container, StyledLink } from './CustomTokenModal.styles';
+
+export function CustomTokenModal(props: PropTypes) {
+  const { open, onClose, token, onSubmitClick, blockchain } = props;
+
+  const explorerLink = generateExplorerLink(token.address, blockchain);
+
+  return (
+    <WatermarkedModal
+      open={open}
+      dismissible
+      onClose={onClose}
+      container={getContainer()}>
+      <Container>
+        <Image src={token.image} size={45} type="circular" />
+        <Typography variant="title" size="medium">
+          {token.name}
+        </Typography>
+        <Typography variant="body" size="small" className="_blockchain-name">
+          {blockchain.displayName}
+        </Typography>
+        <Divider size={4} />
+
+        <Typography variant="body" size="medium">
+          {!!explorerLink ? (
+            <StyledLink
+              hasHover
+              href={explorerLink}
+              target="_blank"
+              rel="nofollow noreferrer">
+              {token.address}
+              <ExternalLinkIcon size={12} color="gray" />
+            </StyledLink>
+          ) : (
+            <StyledLink>{token.address}</StyledLink>
+          )}
+        </Typography>
+
+        <Divider size={4} />
+
+        {token.coinSource && (
+          <Typography className="_coin-source" variant="body" size="xsmall">
+            {i18n.t('via')}{' '}
+            <Typography
+              className="_coin-source-name"
+              variant="body"
+              size="xsmall">
+              {token.coinSource}
+            </Typography>
+          </Typography>
+        )}
+        <Divider size={'32'} />
+
+        <Typography
+          size="medium"
+          variant="body"
+          className="_custom-token-description">
+          {i18n.t(
+            `This token doesn't appear on the active token list(s). Make sure this is the token that you want to trade.`
+          )}
+        </Typography>
+      </Container>
+      <Divider size={40} />
+      <Divider size={10} />
+
+      <Button
+        variant="contained"
+        size="large"
+        type="primary"
+        fullWidth
+        onClick={onSubmitClick}>
+        {i18n.t('Import')}
+      </Button>
+    </WatermarkedModal>
+  );
+}
diff --git a/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.types.ts b/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.types.ts
new file mode 100644
index 0000000000..a7f58d9666
--- /dev/null
+++ b/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.types.ts
@@ -0,0 +1,9 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+export type PropTypes = {
+  open: boolean;
+  onClose: () => void;
+  onSubmitClick: () => void;
+  token: Token;
+  blockchain: BlockchainMeta;
+};
diff --git a/widget/embedded/src/components/CustomTokenModal/index.ts b/widget/embedded/src/components/CustomTokenModal/index.ts
new file mode 100644
index 0000000000..742d179c15
--- /dev/null
+++ b/widget/embedded/src/components/CustomTokenModal/index.ts
@@ -0,0 +1 @@
+export { CustomTokenModal } from './CustomTokenModal';
diff --git a/widget/embedded/src/components/TokenList/TokenList.styles.ts b/widget/embedded/src/components/TokenList/TokenList.styles.ts
index 330a40446f..05fb1576ae 100644
--- a/widget/embedded/src/components/TokenList/TokenList.styles.ts
+++ b/widget/embedded/src/components/TokenList/TokenList.styles.ts
@@ -53,6 +53,7 @@ export const Container = styled('div', {
   flexDirection: 'column',
   flexGrow: 1,
   overflow: 'hidden',
+  justifyContent: 'center',
 });
 
 export const Title = styled('div', {
diff --git a/widget/embedded/src/components/TokenList/TokenList.tsx b/widget/embedded/src/components/TokenList/TokenList.tsx
index 1c55b9643d..dae2e4ce77 100644
--- a/widget/embedded/src/components/TokenList/TokenList.tsx
+++ b/widget/embedded/src/components/TokenList/TokenList.tsx
@@ -92,7 +92,14 @@ const renderDesc = (props: RenderDescProps) => {
 };
 
 export function TokenList(props: PropTypes) {
-  const { list, searchedFor = '', onChange, selectedBlockchain } = props;
+  const {
+    list,
+    searchedFor = '',
+    onChange,
+    selectedBlockchain,
+    showTitle = true,
+    action,
+  } = props;
 
   const [tokens, setTokens] = useState<Token[]>(list);
   const fetchStatus = useAppStore().fetchStatus;
@@ -118,24 +125,48 @@ export function TokenList(props: PropTypes) {
     setTokens(list.slice(0, PAGE_SIZE));
   }, [list.length, selectedBlockchain, balanceKey]);
 
-  const renderList = () => {
-    if (!tokens.length && !!searchedFor) {
+  const endRenderer = (token: Token) => {
+    const tokenBalance = formatBalance(getBalanceFor(token));
+
+    if (action) {
+      return action(token);
+    }
+    if (loadingWallet) {
       return (
-        <>
-          <Divider size={32} />
-          <NotFound
-            title={i18n.t('No results found')}
-            description={i18n.t('Try using different keywords')}
-          />
-        </>
+        <End>
+          <Skeleton variant="text" size="large" width={70} />
+          <Divider size={4} />
+          <Skeleton variant="text" size="medium" width={50} />
+        </End>
       );
     }
+
+    return (
+      tokenBalance && (
+        <BalanceContainer>
+          <TokenBalance variant="title" size="small">
+            {tokenBalance.amount}
+          </TokenBalance>
+          <div />
+          {tokenBalance.usdValue && (
+            <Typography
+              variant="body"
+              className={usdValueStyles()}
+              size="xsmall">
+              {`$${tokenBalance.usdValue}`}
+            </Typography>
+          )}
+        </BalanceContainer>
+      )
+    );
+  };
+
+  const renderList = () => {
     return (
       <VirtualizedList
         endReached={hasNextPage ? loadNextPage : undefined}
         itemContent={(index) => {
           const token = tokens[index];
-          const tokenBalance = formatBalance(getBalanceFor(token));
           const address = token.address || '';
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
@@ -172,15 +203,16 @@ export function TokenList(props: PropTypes) {
                 key={`${token.symbol}${token.address}`}
                 id={`${token.symbol}${token.address}`}
                 hasDivider
-                onClick={() => onChange(tokens[index])}
+                onClick={() => onChange && onChange(tokens[index])}
                 start={
                   <ImageSection>
                     <Image src={token.image} size={30} />
-                    {isTokenPinned(token, props.type) && (
-                      <Pin>
-                        <PinIcon size={12} color="gray" />
-                      </Pin>
-                    )}
+                    {props.type !== 'custom-token' &&
+                      isTokenPinned(token, props.type) && (
+                        <Pin>
+                          <PinIcon size={12} color="gray" />
+                        </Pin>
+                      )}
                   </ImageSection>
                 }
                 title={
@@ -219,32 +251,7 @@ export function TokenList(props: PropTypes) {
                       })
                     : token.name || undefined
                 }
-                end={
-                  loadingWallet ? (
-                    <End>
-                      <Skeleton variant="text" size="large" width={70} />
-                      <Divider size={4} />
-                      <Skeleton variant="text" size="medium" width={50} />
-                    </End>
-                  ) : (
-                    tokenBalance && (
-                      <BalanceContainer>
-                        <TokenBalance variant="title" size="small">
-                          {tokenBalance.amount}
-                        </TokenBalance>
-                        <div />
-                        {tokenBalance.usdValue && (
-                          <Typography
-                            variant="body"
-                            className={usdValueStyles()}
-                            size="xsmall">
-                            {`$${tokenBalance.usdValue}`}
-                          </Typography>
-                        )}
-                      </BalanceContainer>
-                    )
-                  )
-                }
+                end={endRenderer(token)}
               />
             </div>
           );
@@ -256,13 +263,31 @@ export function TokenList(props: PropTypes) {
   };
 
   return (
-    <Container>
-      <Typography variant="label" size="large">
-        {i18n.t('Select Token')}
-      </Typography>
-      <Divider size={4} />
-      {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {fetchStatus === 'success' && <List as="ul">{renderList()}</List>}
-    </Container>
+    <>
+      {showTitle && (
+        <>
+          <Typography variant="label" size="large">
+            {i18n.t('Select Token')}
+          </Typography>
+          <Divider size={4} />
+        </>
+      )}
+
+      <Container>
+        <Divider size={4} />
+        {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
+        {fetchStatus === 'success' &&
+          (tokens.length ? (
+            <List as="ul">{renderList()}</List>
+          ) : (
+            !!searchedFor && (
+              <NotFound
+                title={i18n.t('No results found')}
+                description={i18n.t('Try using different keywords')}
+              />
+            )
+          ))}
+      </Container>
+    </>
   );
 }
diff --git a/widget/embedded/src/components/TokenList/TokenList.types.ts b/widget/embedded/src/components/TokenList/TokenList.types.ts
index 8694f34887..6c623c4569 100644
--- a/widget/embedded/src/components/TokenList/TokenList.types.ts
+++ b/widget/embedded/src/components/TokenList/TokenList.types.ts
@@ -1,11 +1,14 @@
 import type { Token } from 'rango-sdk';
+import type { ReactElement } from 'react';
 
 export interface PropTypes {
   list: Token[];
   searchedFor?: string;
-  onChange: (token: Token) => void;
+  onChange?: (token: Token) => void;
   selectedBlockchain?: string;
-  type: 'source' | 'destination';
+  type: 'source' | 'destination' | 'custom-token';
+  action?: (token: Token) => ReactElement;
+  showTitle?: boolean;
 }
 
 export interface LoadingTokenListProps {
diff --git a/widget/embedded/src/constants/customTokens.ts b/widget/embedded/src/constants/customTokens.ts
new file mode 100644
index 0000000000..d560a8af38
--- /dev/null
+++ b/widget/embedded/src/constants/customTokens.ts
@@ -0,0 +1,6 @@
+import { TransactionType } from 'rango-types';
+
+export const ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS: string[] = [
+  TransactionType.EVM,
+  TransactionType.SOLANA,
+];
diff --git a/widget/embedded/src/constants/navigationRoutes.ts b/widget/embedded/src/constants/navigationRoutes.ts
index 0647c0fe9f..8ae33b60d9 100644
--- a/widget/embedded/src/constants/navigationRoutes.ts
+++ b/widget/embedded/src/constants/navigationRoutes.ts
@@ -4,6 +4,8 @@ export const navigationRoutes = {
   toSwap: 'to-swap',
   blockchains: 'blockchains',
   settings: 'settings',
+  customTokens: 'custom-tokens',
+  addCustomTokens: 'add-custom-tokens',
   liquiditySources: 'liquidity-sources',
   bridges: 'bridges',
   exchanges: 'exchanges',
diff --git a/widget/embedded/src/constants/searchParams.ts b/widget/embedded/src/constants/searchParams.ts
index 44aca06d71..ae8328fe7c 100644
--- a/widget/embedded/src/constants/searchParams.ts
+++ b/widget/embedded/src/constants/searchParams.ts
@@ -5,6 +5,9 @@ export enum SearchParams {
   TO_TOKEN = 'toToken',
   FROM_AMOUNT = 'fromAmount',
   AUTO_CONNECT = 'autoConnect',
+
+  // This is for custom tokens
+  BLOCKCHAIN = 'blockchain',
   /*
    * dApps can transmit liquidity sources as a search parameter,
    * and these take precedence over widget configurations
diff --git a/widget/embedded/src/containers/Settings/Lists.tsx b/widget/embedded/src/containers/Settings/Lists.tsx
index 7a67dccc46..29a33ea46d 100644
--- a/widget/embedded/src/containers/Settings/Lists.tsx
+++ b/widget/embedded/src/containers/Settings/Lists.tsx
@@ -20,6 +20,7 @@ import {
   styled,
   Switch,
   Tabs,
+  TargetIcon,
   Tooltip,
   Typography,
 } from '@rango-dev/ui';
@@ -97,9 +98,11 @@ export function SettingsLists() {
   const {
     config: { features },
   } = useAppStore();
+  const customTokens = useAppStore().customTokens();
   const isThemeHidden = isFeatureHidden('theme', features);
   const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
   const isLanguageHidden = isFeatureHidden('language', features);
+  const isCustomTokensHidden = isFeatureHidden('customTokens', features);
 
   const infiniteApprove = useAppStore().infiniteApprove;
   const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
@@ -185,6 +188,25 @@ export function SettingsLists() {
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
+  const customTokensItem = {
+    id: 'custom-tokens-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Custom Tokens')}
+      </Typography>
+    ),
+    end: (
+      <>
+        <Typography variant="body" size="medium">
+          {`${customTokens.length}`}
+        </Typography>
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    start: <TargetIcon color="gray" size={16} />,
+    onClick: () => navigate(navigationRoutes.customTokens),
+  };
   const languageItem = {
     id: 'language-item',
     title: (
@@ -261,7 +283,9 @@ export function SettingsLists() {
   const settingItems: ListPropTypes['items'] = isLiquidityHidden
     ? []
     : [bridgeItem, exchangeItem];
-
+  if (!isCustomTokensHidden) {
+    settingItems.push(customTokensItem);
+  }
   if (!isLanguageHidden) {
     settingItems.push(languageItem);
   }
diff --git a/widget/embedded/src/hooks/useFetchCustomToken.ts b/widget/embedded/src/hooks/useFetchCustomToken.ts
new file mode 100644
index 0000000000..70858ed0e2
--- /dev/null
+++ b/widget/embedded/src/hooks/useFetchCustomToken.ts
@@ -0,0 +1,114 @@
+import type { Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { useState } from 'react';
+
+import { useAppStore } from '../store/AppStore';
+import { getConfig } from '../utils/configs';
+
+type ErrorType = {
+  title: string;
+  message: string;
+};
+
+interface UseFetchCustomToken {
+  fetchCustomToken: ({
+    blockchain,
+    tokenAddress,
+  }: {
+    blockchain: string;
+    tokenAddress: string;
+  }) => Promise<Token>;
+  loading: boolean;
+  error?: ErrorType;
+}
+
+export function useFetchCustomToken(): UseFetchCustomToken {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<undefined | ErrorType>(undefined);
+  const { findToken } = useAppStore();
+  const customTokens = useAppStore().customTokens();
+
+  function produceErrorMessage(
+    type: 'duplicated' | 'not-found' | 'token-exist',
+    blockchain?: string
+  ) {
+    switch (type) {
+      case 'duplicated':
+        return {
+          title: i18n.t('Duplicate Token'),
+          message: i18n.t(
+            'The address you entered is duplicate, please enter a new address.'
+          ),
+        };
+      case 'token-exist':
+        return {
+          title: i18n.t('Token Already Exists'),
+          message: i18n.t(
+            `There's no need to add this token again because it already exists and is supported by us.`
+          ),
+        };
+      case 'not-found':
+        return {
+          title: i18n.t('Token Not Found'),
+          message: i18n.t(
+            `Sorry, no token was found on ${blockchain} blockchain with the provided address. please make sure you have entered the right token address.`
+          ),
+        };
+    }
+  }
+
+  const fetchCustomToken: UseFetchCustomToken['fetchCustomToken'] = async ({
+    blockchain,
+    tokenAddress,
+  }) => {
+    setLoading(true);
+    try {
+      // Check for duplicate token in customTokens
+      const isDuplicate = customTokens.some(
+        (token) => token.address?.toLowerCase() === tokenAddress.toLowerCase()
+      );
+      if (isDuplicate) {
+        const errorMessage = produceErrorMessage('duplicated');
+        setError(errorMessage);
+        return undefined;
+      }
+
+      const res = await fetch(
+        `${getConfig('BASE_URL')}/meta/token?apiKey=${getConfig(
+          'API_KEY'
+        )}&blockchain=${blockchain}&address=${tokenAddress}`
+      );
+      const contentType = res.headers.get('content-type');
+      const response =
+        contentType &&
+        contentType.includes('application/json') &&
+        (await res.json());
+      if (!response || response.error) {
+        const errorMessage = produceErrorMessage('not-found', blockchain);
+        setError(errorMessage);
+        return undefined;
+      }
+
+      // Check if token is already in the system
+      const isTokenFound = findToken({
+        blockchain: response.blockchain,
+        address: response.address,
+        symbol: response.symbol,
+      });
+      if (isTokenFound) {
+        const errorMessage = produceErrorMessage('token-exist');
+        setError(errorMessage);
+        return undefined;
+      }
+
+      return response;
+    } catch (error: any) {
+      setError(undefined);
+      throw new Error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return { fetchCustomToken, loading, error };
+}
diff --git a/widget/embedded/src/hooks/useSwapInput.ts b/widget/embedded/src/hooks/useSwapInput.ts
index 52bab2276d..5bca482537 100644
--- a/widget/embedded/src/hooks/useSwapInput.ts
+++ b/widget/embedded/src/hooks/useSwapInput.ts
@@ -11,6 +11,8 @@ import { isPositiveNumber } from '../utils/numbers';
 import {
   generateQuoteWarnings,
   getDefaultQuote,
+  getQuoteFromTokenUsdPrice,
+  getQuoteToTokenUsdPrice,
   sortQuotesBy,
 } from '../utils/quote';
 import { isFeatureEnabled } from '../utils/settings';
@@ -146,12 +148,15 @@ export function useSwapInput({
             requestId: quote?.requestId || '',
             swaps: quote?.swaps,
           });
-
+          const outputUsdValue =
+            getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice;
+          const inputUsdValue =
+            getQuoteFromTokenUsdPrice(quote) || fromToken?.usdPrice;
           const quoteWarning =
             quote &&
             generateQuoteWarnings(quote, {
-              fromToken,
-              toToken,
+              fromToken: { ...fromToken, usdPrice: inputUsdValue },
+              toToken: { ...toToken, usdPrice: outputUsdValue },
               userSlippage,
               findToken,
             });
diff --git a/widget/embedded/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts b/widget/embedded/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts
index de14e153dc..a41193dd7c 100644
--- a/widget/embedded/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts
+++ b/widget/embedded/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts
@@ -54,6 +54,8 @@ export function useSyncUrlAndStore() {
     const clientUrl = searchParams.get(SearchParams.CLIENT_URL);
     const liquiditySources = searchParams.get(SearchParams.LIQUIDITY_SOURCES);
 
+    const blockchain = searchParams.get(SearchParams.BLOCKCHAIN);
+
     return {
       fromAmount,
       fromBlockchain,
@@ -64,6 +66,7 @@ export function useSyncUrlAndStore() {
       clientUrl,
       liquiditySources,
       utmQueryParams,
+      blockchain,
     };
   };
 
@@ -79,7 +82,8 @@ export function useSyncUrlAndStore() {
   };
 
   useEffect(() => {
-    const { autoConnect, clientUrl, utmQueryParams } = getUrlSearchParams();
+    const { autoConnect, clientUrl, utmQueryParams, blockchain } =
+      getUrlSearchParams();
     if (isInRouterContext && fetchMetaStatus === 'success') {
       updateUrlSearchParams({
         [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
@@ -89,6 +93,7 @@ export function useSyncUrlAndStore() {
         [SearchParams.FROM_AMOUNT]: inputAmount,
         [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
         [SearchParams.CLIENT_URL]: clientUrl ?? undefined,
+        [SearchParams.BLOCKCHAIN]: blockchain ?? undefined,
         [SearchParams.LIQUIDITY_SOURCES]: campaignMode
           ? liquiditySourcesParamsRef.current
           : undefined,
diff --git a/widget/embedded/src/hooks/useTheme.ts b/widget/embedded/src/hooks/useTheme.ts
index bb26afbbb1..cbe5a73e4d 100644
--- a/widget/embedded/src/hooks/useTheme.ts
+++ b/widget/embedded/src/hooks/useTheme.ts
@@ -93,8 +93,12 @@ export function useTheme(props: WidgetTheme) {
     if (theme === 'auto') {
       return OSTheme === 'dark' ? darkClassNames : lightClassNames;
     }
+
     return theme === 'dark' ? darkClassNames : lightClassNames;
   };
 
-  return { activeTheme: getActiveTheme };
+  return {
+    activeTheme: getActiveTheme,
+    mode: theme === 'auto' ? OSTheme : theme,
+  };
 }
diff --git a/widget/embedded/src/pages/AddCustomTokenPage.tsx b/widget/embedded/src/pages/AddCustomTokenPage.tsx
new file mode 100644
index 0000000000..516608b95d
--- /dev/null
+++ b/widget/embedded/src/pages/AddCustomTokenPage.tsx
@@ -0,0 +1,210 @@
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Button,
+  darkTheme,
+  Divider,
+  DoneIcon,
+  MessageBox,
+  styled,
+  TextField,
+  Typography,
+} from '@rango-dev/ui';
+import { type Token } from 'rango-sdk';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import { BlockchainSelectorButton } from '../components/BlockchainSelectorButton';
+import { WatermarkedModal } from '../components/common/WatermarkedModal';
+import { CustomTokenModal } from '../components/CustomTokenModal';
+import { Layout, PageContainer } from '../components/Layout';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { SearchParams } from '../constants/searchParams';
+import { useFetchCustomToken } from '../hooks/useFetchCustomToken';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useAppStore } from '../store/AppStore';
+import { getContainer } from '../utils/common';
+import { findBlockchain, isValidTokenAddress } from '../utils/meta';
+
+const Content = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  flex: 1,
+  '& ._text-field': {
+    padding: '$4 $10',
+    backgroundColor: '$neutral300',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+    borderRadius: '$sm',
+    height: '$40',
+  },
+});
+const CUSTOM_TOKEN_REFRESH_DELAY = 1000;
+
+export function AddCustomTokenPage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const navigateBack = useNavigateBack();
+  const { setCustomToken } = useAppStore();
+  const blockchains = useAppStore().blockchains();
+
+  const blockchainName = searchParams.get(SearchParams.BLOCKCHAIN) || '';
+  const blockchain = findBlockchain(blockchainName, blockchains);
+  const [address, setAddress] = useState('');
+  const [isOpenErrorModal, setIsOpenErrorModal] = useState<boolean>(false);
+  const [token, setToken] = useState<Token>();
+  const { fetchCustomToken, loading, error } = useFetchCustomToken();
+  const [networkError, setNetworkError] = useState('');
+  const isValidAddress =
+    !!blockchain && isValidTokenAddress(blockchain, address);
+  const isImportDisabled = !blockchain || !address || !isValidAddress;
+
+  const getCustomToken = async () => {
+    if (blockchain) {
+      try {
+        const res = await fetchCustomToken({
+          blockchain: blockchainName,
+          tokenAddress: address,
+        });
+        setNetworkError('');
+        if (!!res) {
+          setToken(res);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
+        if (error.message === 'Failed to fetch') {
+          setNetworkError(i18n.t('Network Error'));
+          setIsOpenErrorModal(true);
+        }
+      }
+    }
+  };
+
+  const closeErrorModal = () => {
+    if (!!error) {
+      setAddress('');
+    }
+    setIsOpenErrorModal(false);
+  };
+
+  const handleErrorModalButtonClick = async () => {
+    if (!!networkError) {
+      setTimeout(async () => {
+        await getCustomToken();
+      }, CUSTOM_TOKEN_REFRESH_DELAY);
+    }
+    closeErrorModal();
+  };
+
+  useEffect(() => {
+    if (!!error) {
+      setIsOpenErrorModal(true);
+    }
+  }, [error]);
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Add Custom Token'),
+      }}>
+      <PageContainer>
+        <Content>
+          <div>
+            <BlockchainSelectorButton
+              onClick={() =>
+                navigate(navigationRoutes.blockchains, { replace: true })
+              }
+              hasLogo={!!blockchain?.logo}
+              value={
+                !!blockchain
+                  ? {
+                      name: blockchain.displayName,
+                      logo: blockchain.logo,
+                    }
+                  : undefined
+              }
+              title={i18n.t('Select chain')}
+              placeholder={i18n.t('Select chain')}
+            />
+            <Divider size={'24'} />
+            <Typography size="large" variant="label">
+              {i18n.t('Enter Address')}
+            </Typography>
+            <Divider size={10} />
+            <TextField
+              fullWidth
+              disabled={!blockchain}
+              variant="contained"
+              placeholder={i18n.t('Enter token address')}
+              size="large"
+              value={address}
+              suffix={
+                !!address &&
+                isValidAddress && <DoneIcon color="success" size={12} />
+              }
+              onChange={(e) => setAddress(e.target.value)}
+            />
+            {!isValidAddress && !!address && (
+              <>
+                <Divider size={4} />
+                <Alert type="error" variant="alarm" title="Invalid Address" />
+              </>
+            )}
+          </div>
+
+          <Button
+            disabled={isImportDisabled}
+            type="primary"
+            variant="contained"
+            loading={loading}
+            size="large"
+            onClick={getCustomToken}>
+            {i18n.t('Import')}
+          </Button>
+        </Content>
+        <WatermarkedModal
+          open={isOpenErrorModal}
+          dismissible
+          onClose={closeErrorModal}
+          container={getContainer()}>
+          <MessageBox
+            title={error?.title || networkError}
+            type="error"
+            description={
+              error?.message || i18n.t('Failed Network, Please retry.')
+            }>
+            <Divider size={40} />
+            <Divider size={10} />
+
+            <Button
+              variant="contained"
+              size="large"
+              type="primary"
+              fullWidth
+              onClick={handleErrorModalButtonClick}>
+              {networkError
+                ? i18n.t('Retry')
+                : i18n.t('Add another custom token')}
+            </Button>
+          </MessageBox>
+        </WatermarkedModal>
+        {blockchain && token && (
+          <CustomTokenModal
+            blockchain={blockchain}
+            token={token}
+            onSubmitClick={() => {
+              if (token) {
+                setCustomToken(token);
+                setToken(undefined);
+                navigateBack();
+              }
+            }}
+            onClose={() => setToken(undefined)}
+            open={!!blockchain && !!token}
+          />
+        )}
+      </PageContainer>
+    </Layout>
+  );
+}
diff --git a/widget/embedded/src/pages/CustomTokensPage.tsx b/widget/embedded/src/pages/CustomTokensPage.tsx
new file mode 100644
index 0000000000..7e166116fc
--- /dev/null
+++ b/widget/embedded/src/pages/CustomTokensPage.tsx
@@ -0,0 +1,184 @@
+import type { Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  CustomTokensZeroStateDarkIcon,
+  CustomTokensZeroStateIcon,
+  DeleteIcon,
+  Divider,
+  IconButton,
+  MessageBox,
+  NotFound,
+  styled,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { WatermarkedModal } from '../components/common/WatermarkedModal';
+import { Layout, PageContainer } from '../components/Layout';
+import { SearchInput } from '../components/SearchInput';
+import { TokenList } from '../components/TokenList';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useTheme } from '../hooks/useTheme';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
+import { containsText, getContainer } from '../utils/common';
+import { createTokenHash } from '../utils/meta';
+
+const Content = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  flex: 1,
+});
+const NotFoundContent = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0.75',
+});
+const DeleteIconButton = styled(IconButton, {
+  '&:hover': {
+    '& svg': {
+      color: '$secondary550',
+    },
+  },
+});
+export function CustomTokensPage() {
+  const [searchedFor, setSearchedFor] = useState<string>('');
+  const { deleteCustomToken } = useAppStore();
+  const customTokens = useAppStore().customTokens();
+  const { fromToken, toToken, setFromToken, setToToken } = useQuoteStore();
+  const { mode } = useTheme({});
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
+  const [selectedToken, setSelectedToken] = useState<Token>();
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchedFor(value);
+  };
+  const isDarkTheme = mode === 'dark';
+
+  const customTokensResults = customTokens.filter(
+    (token) =>
+      containsText(token.symbol, searchedFor) ||
+      containsText(token.address || '', searchedFor) ||
+      containsText(token.name || '', searchedFor)
+  );
+
+  const handleDeleteCustomToken = () => {
+    if (selectedToken) {
+      const toTokenHash = toToken ? createTokenHash(toToken) : null;
+      const fromTokenHash = fromToken ? createTokenHash(fromToken) : null;
+      const selectedTokenHash = createTokenHash(selectedToken);
+
+      if (toTokenHash === selectedTokenHash) {
+        setToToken({ token: null });
+      } else if (fromTokenHash === selectedTokenHash) {
+        setFromToken({ token: null });
+      }
+      deleteCustomToken(selectedToken);
+    }
+    setIsDeleteModalOpen(false);
+  };
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Custom Tokens'),
+      }}>
+      <PageContainer>
+        <Content>
+          {!!customTokens.length ? (
+            <>
+              <SearchInput
+                value={searchedFor}
+                setValue={setSearchedFor}
+                fullWidth
+                color="light"
+                variant="contained"
+                placeholder={i18n.t('Search Token')}
+                onChange={handleSearch}
+              />
+              <Divider size={16} />
+              <TokenList
+                list={customTokensResults}
+                type="custom-token"
+                searchedFor={searchedFor}
+                showTitle={false}
+                action={(token) => (
+                  <DeleteIconButton
+                    variant="ghost"
+                    onClick={() => {
+                      setIsDeleteModalOpen(true);
+                      setSelectedToken(token);
+                    }}>
+                    <DeleteIcon size={12} color="gray" />
+                  </DeleteIconButton>
+                )}
+              />
+            </>
+          ) : (
+            <NotFoundContent>
+              <NotFound
+                icon={
+                  isDarkTheme ? (
+                    <CustomTokensZeroStateDarkIcon size={200} />
+                  ) : (
+                    <CustomTokensZeroStateIcon size={200} />
+                  )
+                }
+                title={i18n.t('No custom tokens')}
+                description={i18n.t(
+                  'press the button to add your custom token'
+                )}
+              />
+            </NotFoundContent>
+          )}
+          <Divider size={20} />
+
+          <Button
+            type="primary"
+            variant="contained"
+            size="large"
+            onClick={() => navigate(navigationRoutes.addCustomTokens)}>
+            {i18n.t('Add Custom Token')}
+          </Button>
+        </Content>
+        <WatermarkedModal
+          open={isDeleteModalOpen}
+          dismissible
+          onClose={() => setIsDeleteModalOpen(false)}
+          container={getContainer()}>
+          <MessageBox
+            title={i18n.t('Delete Custom Token')}
+            type="error"
+            description={i18n.t('Are you sure you want to Delete this Token?')}>
+            <Divider size={40} />
+            <Divider size={10} />
+
+            <Button
+              fullWidth
+              variant="contained"
+              type="primary"
+              size="large"
+              onClick={handleDeleteCustomToken}>
+              {i18n.t('Yes, Delete it')}
+            </Button>
+            <Divider size={12} />
+            <Button
+              fullWidth
+              variant="outlined"
+              type="primary"
+              size="large"
+              onClick={() => setIsDeleteModalOpen(false)}>
+              {i18n.t('No, Continue')}
+            </Button>
+          </MessageBox>
+        </WatermarkedModal>
+      </PageContainer>
+    </Layout>
+  );
+}
diff --git a/widget/embedded/src/pages/HistoryPage.tsx b/widget/embedded/src/pages/HistoryPage.tsx
index 4b1e610093..60a262be68 100644
--- a/widget/embedded/src/pages/HistoryPage.tsx
+++ b/widget/embedded/src/pages/HistoryPage.tsx
@@ -87,7 +87,7 @@ export function HistoryPage() {
   const loading = !state.loadedFromPersistor;
   const [filterBy, setFilterBy] = useState('');
   const [openClearModal, setOpenClearModal] = useState(false);
-  const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchedFor(value);
   };
@@ -159,7 +159,7 @@ export function HistoryPage() {
             variant="contained"
             placeholder={i18n.t('Search Transaction')}
             autoFocus
-            onChange={searchHandler}
+            onChange={handleSearch}
             style={{ height: 36 }}
             value={searchedFor}
           />
diff --git a/widget/embedded/src/pages/LiquiditySourcePage.tsx b/widget/embedded/src/pages/LiquiditySourcePage.tsx
index 4e4753b896..4002cad684 100644
--- a/widget/embedded/src/pages/LiquiditySourcePage.tsx
+++ b/widget/embedded/src/pages/LiquiditySourcePage.tsx
@@ -86,7 +86,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
     };
   });
 
-  const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchedFor(value);
   };
@@ -120,7 +120,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           placeholder={i18n.t('Search {sourceType}', {
             sourceType: types[sourceType],
           })}
-          onChange={searchHandler}
+          onChange={handleSearch}
         />
         {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
 
diff --git a/widget/embedded/src/pages/SelectBlockchainPage.tsx b/widget/embedded/src/pages/SelectBlockchainPage.tsx
index 7ed2a77ed5..35c2751b6c 100644
--- a/widget/embedded/src/pages/SelectBlockchainPage.tsx
+++ b/widget/embedded/src/pages/SelectBlockchainPage.tsx
@@ -5,6 +5,7 @@ import {
   SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { BlockchainList } from '../components/BlockchainList';
 import { Layout, PageContainer } from '../components/Layout';
@@ -14,7 +15,8 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 
 interface PropTypes {
-  type: 'source' | 'destination';
+  type: 'source' | 'destination' | 'custom-token';
+  hideCategory?: boolean;
 }
 
 export function SelectBlockchainPage(props: PropTypes) {
@@ -24,15 +26,15 @@ export function SelectBlockchainPage(props: PropTypes) {
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const setToBlockchain = useQuoteStore.use.setToBlockchain();
   const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const fetchStatus = useAppStore().fetchStatus;
+  const { fetchStatus } = useAppStore();
+  const navigate = useNavigate();
 
   const blockchains = useAppStore().blockchains({
     type,
   });
-
   const activeCategoriesCount = getCategoriesCount(blockchains);
 
-  const showCategory = activeCategoriesCount !== 1;
+  const showCategory = !props.hideCategory && activeCategoriesCount !== 1;
 
   return (
     <Layout
@@ -66,15 +68,20 @@ export function SelectBlockchainPage(props: PropTypes) {
 
         <BlockchainList
           list={blockchains}
+          showTitle={type !== 'custom-token'}
           searchedFor={searchedFor}
           blockchainCategory={blockchainCategory}
           onChange={(blockchain) => {
-            if (type === 'source') {
-              setFromBlockchain(blockchain);
+            if (type === 'custom-token') {
+              navigate(`..?blockchain=${blockchain.name}`, { replace: true });
             } else {
-              setToBlockchain(blockchain);
+              if (type === 'source') {
+                setFromBlockchain(blockchain);
+              } else {
+                setToBlockchain(blockchain);
+              }
+              navigateBack();
             }
-            navigateBack();
           }}
         />
       </PageContainer>
diff --git a/widget/embedded/src/pages/SelectSwapItemsPage.tsx b/widget/embedded/src/pages/SelectSwapItemsPage.tsx
index 75362f833a..2355662fa1 100644
--- a/widget/embedded/src/pages/SelectSwapItemsPage.tsx
+++ b/widget/embedded/src/pages/SelectSwapItemsPage.tsx
@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { BlockchainsSection } from '../components/BlockchainsSection';
 import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
-import { TokenList } from '../components/TokenList/TokenList';
+import { TokenList } from '../components/TokenList';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
diff --git a/widget/embedded/src/store/app.ts b/widget/embedded/src/store/app.ts
index cfadfb096c..e2a94f4804 100644
--- a/widget/embedded/src/store/app.ts
+++ b/widget/embedded/src/store/app.ts
@@ -35,6 +35,7 @@ export function createAppStore(initialData?: WidgetConfig) {
         skipHydration: true,
         partialize: (state) => {
           return {
+            _customTokens: state._customTokens,
             theme: state.theme,
             language: state.language,
             affiliatePercent: state.affiliatePercent,
diff --git a/widget/embedded/src/store/quote.ts b/widget/embedded/src/store/quote.ts
index 4f94552f9f..e97ac1a6e9 100644
--- a/widget/embedded/src/store/quote.ts
+++ b/widget/embedded/src/store/quote.ts
@@ -21,7 +21,10 @@ import {
   WidgetEvents,
 } from '../types';
 import { isPositiveNumber } from '../utils/numbers';
-import { getQuoteToTokenUsdPrice } from '../utils/quote';
+import {
+  getQuoteFromTokenUsdPrice,
+  getQuoteToTokenUsdPrice,
+} from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
 
 import createSelectors from './selectors';
@@ -125,6 +128,8 @@ export const useQuoteStore = createSelectors(
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
+
+          let inputUsdValue = state.inputUsdValue;
           if (!isPositiveNumber(state.inputAmount)) {
             return {};
           }
@@ -132,8 +137,12 @@ export const useQuoteStore = createSelectors(
             outputAmount = !!quote?.outputAmount
               ? new BigNumber(quote?.outputAmount)
               : null;
+            inputUsdValue = calcOutputUsdValue(
+              state.inputAmount,
+              getQuoteFromTokenUsdPrice(quote) || state.fromToken?.usdPrice
+            );
             outputUsdValue = calcOutputUsdValue(
-              quote?.outputAmount,
+              quote.outputAmount,
               getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
             );
           }
@@ -142,6 +151,7 @@ export const useQuoteStore = createSelectors(
             ...(!!quote && {
               outputAmount,
               outputUsdValue,
+              inputUsdValue,
             }),
           };
         }),
diff --git a/widget/embedded/src/store/slices/data.ts b/widget/embedded/src/store/slices/data.ts
index 7c6a3cb3ce..f8de9fd821 100644
--- a/widget/embedded/src/store/slices/data.ts
+++ b/widget/embedded/src/store/slices/data.ts
@@ -1,21 +1,35 @@
 // We keep all the received data from server in this slice
 
 import type { ConfigSlice } from './config';
+import type { SettingsSlice } from './settings';
 import type { CachedEntries } from '../../services/cacheService';
 import type { Balance, Blockchain, TokenHash } from '../../types';
-import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 import type { StateCreator } from 'zustand';
 
+import {
+  type Asset,
+  type BlockchainMeta,
+  type SwapperMeta,
+  type Token,
+} from 'rango-sdk';
+
+import { ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS } from '../../constants/customTokens';
 import { cacheService } from '../../services/cacheService';
 import { httpService as sdk } from '../../services/httpService';
 import { compareWithSearchFor, containsText } from '../../utils/common';
 import { createTokenHash, isTokenNative } from '../../utils/meta';
-import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
+import {
+  addCustomTokensToSupportedTokens,
+  sortLiquiditySourcesByGroupTitle,
+} from '../../utils/settings';
 import { areTokensEqual, compareTokenBalance } from '../../utils/wallets';
-import { matchTokensFromConfigWithMeta } from '../utils';
+import {
+  getSupportedBlockchainsFromConfig,
+  matchTokensFromConfigWithMeta,
+} from '../utils';
 
 type BlockchainOptions = {
-  type?: 'source' | 'destination';
+  type?: 'source' | 'destination' | 'custom-token';
 };
 
 type TokenOptions = {
@@ -45,7 +59,7 @@ export interface DataSlice {
 }
 
 export const createDataSlice: StateCreator<
-  DataSlice & ConfigSlice,
+  DataSlice & ConfigSlice & SettingsSlice,
   [],
   [],
   DataSlice
@@ -67,8 +81,30 @@ export const createDataSlice: StateCreator<
     if (!options || !options?.type) {
       return blockchainsFromState;
     }
-
     const config = get().config;
+
+    if (options.type === 'custom-token') {
+      const supportedBlockchainsFromConfig = getSupportedBlockchainsFromConfig({
+        config,
+      });
+
+      let supportedBlockchains: BlockchainMeta[] = blockchainsFromState;
+
+      /*
+       * Supported blockchains can be configured and be limited.
+       * In this case, we only keep those active blockchains which exist in config.
+       */
+      if (supportedBlockchainsFromConfig.length > 0) {
+        supportedBlockchains = supportedBlockchains.filter((blockchain) =>
+          supportedBlockchainsFromConfig.includes(blockchain.name)
+        );
+      }
+
+      return supportedBlockchains.filter((blockchain) =>
+        ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS.includes(blockchain.type)
+      );
+    }
+
     const supportedBlockchainsFromConfig =
       (options.type === 'source'
         ? config.from?.blockchains
@@ -88,7 +124,12 @@ export const createDataSlice: StateCreator<
     return list;
   },
   tokens: (options) => {
-    const { _tokensMapByTokenHash, _tokensMapByBlockchainName, config } = get();
+    const {
+      _tokensMapByTokenHash,
+      _tokensMapByBlockchainName,
+      config,
+      _customTokens,
+    } = get();
     const tokensFromState = Array.from(_tokensMapByTokenHash.values());
     const blockchainsMapByName = get()._blockchainsMapByName;
     if (!options || !options.type) {
@@ -117,6 +158,12 @@ export const createDataSlice: StateCreator<
       cacheService.set(cacheKey, supportedTokens);
     }
 
+    supportedTokens = addCustomTokensToSupportedTokens(
+      supportedTokens,
+      _customTokens,
+      config.features
+    );
+
     const blockchains = get().blockchains({
       type: options.type,
     });
@@ -217,8 +264,14 @@ export const createDataSlice: StateCreator<
   },
   findToken: (asset) => {
     const tokensMapByHashToken = get()._tokensMapByTokenHash;
+    const customTokens = get().customTokens();
     const tokenHash = createTokenHash(asset);
-    const token = tokensMapByHashToken.get(tokenHash);
+    let token = tokensMapByHashToken.get(tokenHash);
+    if (!token) {
+      token = customTokens.find(
+        (customToken) => createTokenHash(customToken) === tokenHash
+      );
+    }
     return token;
   },
   isTokenPinned: (token, type) => {
diff --git a/widget/embedded/src/store/slices/settings.ts b/widget/embedded/src/store/slices/settings.ts
index aa32e59824..1ca54b3754 100644
--- a/widget/embedded/src/store/slices/settings.ts
+++ b/widget/embedded/src/store/slices/settings.ts
@@ -1,6 +1,7 @@
 import type { ConfigSlice } from './config';
+import type { DataSlice } from './data';
 import type { WidgetConfig } from '../../types';
-import type { SwapperMeta } from 'rango-sdk';
+import type { SwapperMeta, Token } from 'rango-sdk';
 import type { StateCreator } from 'zustand';
 
 import { type Language } from '@rango-dev/ui';
@@ -10,6 +11,7 @@ import { DEFAULT_LANGUAGE } from '../../constants/languages';
 import { DEFAULT_SLIPPAGE } from '../../constants/swapSettings';
 import { removeDuplicateFrom } from '../../utils/common';
 import { isFeatureHidden } from '../../utils/settings';
+import { getSupportedBlockchainsFromConfig } from '../utils';
 
 export type ThemeMode = 'auto' | 'dark' | 'light';
 
@@ -25,6 +27,7 @@ export interface SettingsSlice {
   affiliateRef: string | null;
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
+  _customTokens: Token[];
 
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
@@ -43,10 +46,13 @@ export interface SettingsSlice {
   ) => void;
   addPreferredBlockchain: (blockchain: string) => void;
   updateSettings: (config: WidgetConfig) => void;
+  setCustomToken: (token: Token) => void;
+  deleteCustomToken: (token: Token) => void;
+  customTokens: () => Token[];
 }
 
 export const createSettingsSlice: StateCreator<
-  SettingsSlice & ConfigSlice,
+  SettingsSlice & DataSlice & ConfigSlice,
   [],
   [],
   SettingsSlice
@@ -61,6 +67,7 @@ export const createSettingsSlice: StateCreator<
   affiliateRef: null,
   affiliatePercent: null,
   affiliateWallets: null,
+  _customTokens: [],
 
   addPreferredBlockchain: (blockchain) => {
     const currentPreferredBlockchains = get().preferredBlockchains;
@@ -93,6 +100,7 @@ export const createSettingsSlice: StateCreator<
     set(() => ({
       slippage: slippage,
     })),
+
   setCustomSlippage: (customSlippage) =>
     set(() => ({
       customSlippage: customSlippage,
@@ -131,6 +139,7 @@ export const createSettingsSlice: StateCreator<
     set((state) => ({
       infiniteApprove: !state.infiniteApprove,
     })),
+
   toggleLiquiditySource: (name) =>
     set((state) => {
       if (state.disabledLiquiditySources.includes(name)) {
@@ -177,4 +186,28 @@ export const createSettingsSlice: StateCreator<
       }),
     });
   },
+  setCustomToken: (token) =>
+    set((state) => ({
+      _customTokens: [token, ...state._customTokens],
+    })),
+  deleteCustomToken: (token) =>
+    set((state) => ({
+      _customTokens: state._customTokens.filter(
+        (customToken) => customToken.address !== token.address
+      ),
+    })),
+  customTokens: () => {
+    const config = get().config;
+
+    const customTokens = get()._customTokens;
+    const supportedBlockchainsFromConfig = getSupportedBlockchainsFromConfig({
+      config,
+    });
+
+    return !supportedBlockchainsFromConfig.length
+      ? customTokens
+      : customTokens.filter((token) =>
+          supportedBlockchainsFromConfig.includes(token.blockchain)
+        );
+  },
 });
diff --git a/widget/embedded/src/store/utils/data.ts b/widget/embedded/src/store/utils/data.ts
index 85a71ad264..943f20776f 100644
--- a/widget/embedded/src/store/utils/data.ts
+++ b/widget/embedded/src/store/utils/data.ts
@@ -1,4 +1,8 @@
-import type { BlockchainAndTokenConfig, TokenHash } from '../../types';
+import type {
+  BlockchainAndTokenConfig,
+  TokenHash,
+  WidgetConfig,
+} from '../../types';
 import type { DataSlice } from '../slices/data';
 import type { Asset, Token } from 'rango-sdk';
 
@@ -115,3 +119,24 @@ export function matchTokensFromConfigWithMeta(params: {
 
   return Object.values(result);
 }
+
+export function getSupportedBlockchainsFromConfig(params: {
+  config: WidgetConfig;
+}): string[] {
+  const { config } = params;
+  const configFromBlockchains = config.from?.blockchains || [];
+  const configToBlockchains = config.to?.blockchains || [];
+
+  /*
+   * Empty array means all blockchains. So if any of to or from has an empty array,
+   * it means all blockchains is available to use and there is no limitation from config.
+   */
+  if (!configFromBlockchains.length || !configToBlockchains.length) {
+    return [];
+  }
+  const blockchains = [...configFromBlockchains, ...configToBlockchains];
+
+  const supportedBlockchains = new Set(blockchains);
+
+  return Array.from(supportedBlockchains);
+}
diff --git a/widget/embedded/src/types/config.ts b/widget/embedded/src/types/config.ts
index 202e9b83f3..e6cfe9ed04 100644
--- a/widget/embedded/src/types/config.ts
+++ b/widget/embedded/src/types/config.ts
@@ -139,7 +139,8 @@ export type Features = Partial<
     | 'language'
     | 'connectWalletButton'
     | 'notification'
-    | 'liquiditySource',
+    | 'liquiditySource'
+    | 'customTokens',
     'visible' | 'hidden'
   >
 > &
@@ -198,7 +199,9 @@ export type TrezorManifest = {
  *   - 'liquiditySource': Visibility state for liquidity source.
  *   - 'connectWalletButton': Visibility state for the wallet connect icon.
  *   - 'language': Visibility state for the language.
+ *   - 'customTokens': Visibility state for the custom tokens.
  *   - 'experimentalRoute': Enablement state for the experimental route.
+ *
  * @property {WidgetVariant} variant
  *   If it is expanded, multiple routes will show up on the home page;
  *   If it is full-expanded, multiple routes will show up on the home page with full routes;
diff --git a/widget/embedded/src/utils/meta.ts b/widget/embedded/src/utils/meta.ts
index e66396743b..170b06114d 100644
--- a/widget/embedded/src/utils/meta.ts
+++ b/widget/embedded/src/utils/meta.ts
@@ -57,5 +57,16 @@ export function isTokenNative(
 }
 
 export function createTokenHash(asset: Asset): TokenHash {
-  return `${asset.blockchain}-${asset.symbol}-${asset.address ?? ''}`;
+  return `${asset.blockchain.toLowerCase()}-${asset.symbol.toLowerCase()}-${(
+    asset.address ?? ''
+  ).toLowerCase()}`;
+}
+
+export function isValidTokenAddress(
+  chain: BlockchainMeta,
+  address: string
+): boolean {
+  const regex = chain.addressPatterns;
+  const valid = regex.filter((r) => new RegExp(r).test(address)).length > 0;
+  return valid;
 }
diff --git a/widget/embedded/src/utils/quote.ts b/widget/embedded/src/utils/quote.ts
index 0a581fa745..0555ad0107 100644
--- a/widget/embedded/src/utils/quote.ts
+++ b/widget/embedded/src/utils/quote.ts
@@ -25,12 +25,12 @@ import BigNumber from 'bignumber.js';
 import { HIGH_PRIORITY_TAGS } from '../constants/quote';
 import { HIGHT_PRICE_IMPACT, LOW_PRICE_IMPACT } from '../constants/routing';
 import { HIGH_SLIPPAGE } from '../constants/swapSettings';
-import { getUsdValue } from '../store/quote';
 import { QuoteWarningType } from '../types';
 
 import { areEqual } from './common';
 import { createTokenHash, findBlockchain } from './meta';
 import {
+  calcOutputUsdValue,
   checkSlippageWarnings,
   getMinRequiredSlippage,
   getPercentageChange,
@@ -46,6 +46,13 @@ export function getQuoteToTokenUsdPrice(
   return swaps[swaps.length - 1].to.usdPrice;
 }
 
+export function getQuoteFromTokenUsdPrice(
+  quote: SelectedQuote | null
+): number | null | undefined {
+  const swaps = quote?.swaps || [];
+  return swaps[0].from.usdPrice;
+}
+
 export function isNumberOfSwapsChanged(
   quoteA: SelectedQuote,
   quoteB: SelectedQuote
@@ -198,8 +205,14 @@ export function generateQuoteWarnings(
   }
 ): QuoteWarning | null {
   const { fromToken, toToken, findToken, userSlippage } = params;
-  const inputUsdValue = getUsdValue(fromToken, quote.requestAmount);
-  const outputUsdValue = getUsdValue(toToken, quote?.outputAmount ?? '');
+  const inputUsdValue = calcOutputUsdValue(
+    quote.requestAmount,
+    getQuoteFromTokenUsdPrice(quote) || fromToken?.usdPrice
+  );
+  const outputUsdValue = calcOutputUsdValue(
+    quote.outputAmount,
+    getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice
+  );
 
   if (!!quote && inputUsdValue && outputUsdValue) {
     const priceImpact = getPriceImpact(
diff --git a/widget/embedded/src/utils/settings.ts b/widget/embedded/src/utils/settings.ts
index 8dd6f5cd00..8cc8ab3ca8 100644
--- a/widget/embedded/src/utils/settings.ts
+++ b/widget/embedded/src/utils/settings.ts
@@ -1,5 +1,5 @@
 import type { Features } from '../types';
-import type { SwapperMeta, SwapperType } from 'rango-sdk';
+import type { SwapperMeta, SwapperType, Token } from 'rango-sdk';
 
 import { removeDuplicateFrom } from './common';
 
@@ -75,3 +75,15 @@ export function isFeatureHidden(feature: keyof Features, features?: Features) {
 export function isFeatureEnabled(feature: keyof Features, features?: Features) {
   return features?.[feature] === 'enabled';
 }
+
+export const addCustomTokensToSupportedTokens = (
+  supportedTokens: Token[],
+  customTokens: Token[],
+  features?: Features
+) => {
+  const isCustomTokensHidden = isFeatureHidden('customTokens', features);
+
+  return isCustomTokensHidden
+    ? supportedTokens
+    : supportedTokens.concat(customTokens);
+};
diff --git a/widget/embedded/src/utils/swap.ts b/widget/embedded/src/utils/swap.ts
index 8709e9f50b..94f1577ad7 100644
--- a/widget/embedded/src/utils/swap.ts
+++ b/widget/embedded/src/utils/swap.ts
@@ -31,7 +31,6 @@ import {
 import BigNumber from 'bignumber.js';
 import { PendingSwapNetworkStatus } from 'rango-types';
 
-import { isValidAddress } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { errorMessages } from '../constants/errors';
 import { swapButtonTitles } from '../constants/messages';
 import { ZERO } from '../constants/numbers';
@@ -42,7 +41,7 @@ import {
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../constants/routing';
 
-import { getBlockchainShortNameFor } from './meta';
+import { getBlockchainShortNameFor, isValidTokenAddress } from './meta';
 import { numberToString } from './numbers';
 import { getPriceImpact, getRequiredBalanceOfWallet } from './quote';
 import { getQuoteWallets } from './wallets';
@@ -250,13 +249,14 @@ export function canComputePriceImpact(
   inputAmount: string,
   usdValue: BigNumber | null
 ) {
+  const inputAmountNumber = parseFloat(inputAmount || '0');
+
   return !(
+    quote &&
     (!usdValue || usdValue.lte(ZERO)) &&
-    !!quote &&
-    !!inputAmount &&
+    inputAmount &&
     inputAmount !== '0' &&
-    parseFloat(inputAmount || '0') !== 0 &&
-    !!quote
+    inputAmountNumber !== 0
   );
 }
 
@@ -748,7 +748,7 @@ export function isConfirmSwapDisabled(
 
   const customDestinationIsValid =
     customDestination && lastStepToBlockchain
-      ? isValidAddress(lastStepToBlockchain, customDestination)
+      ? isValidTokenAddress(lastStepToBlockchain, customDestination)
       : false;
 
   return (
diff --git a/widget/ui/src/components/Button/Button.styles.tsx b/widget/ui/src/components/Button/Button.styles.tsx
index 58211f5ab1..c0db515aad 100644
--- a/widget/ui/src/components/Button/Button.styles.tsx
+++ b/widget/ui/src/components/Button/Button.styles.tsx
@@ -57,11 +57,12 @@ export const ButtonBase = styled('button', {
           outline: 0,
         },
         '&:disabled': {
+          backgroundColor: '$neutral600',
           $$color: '$colors$background',
           [`.${darkTheme} &`]: {
             $$color: '$colors$foreground',
+            backgroundColor: '$neutral700',
           },
-          backgroundColor: '$neutral600',
           color: '$$color',
           pointerEvents: 'none',
         },
@@ -137,10 +138,11 @@ export const ButtonBase = styled('button', {
         },
         '&:disabled': {
           $$color: '$colors$background',
+          background: '$neutral600',
           [`.${darkTheme} &`]: {
             $$color: '$colors$foreground',
+            backgroundColor: '$neutral700',
           },
-          background: '$neutral600',
           color: '$$color',
           pointerEvents: 'none',
         },
diff --git a/widget/ui/src/components/Divider/Divider.styles.ts b/widget/ui/src/components/Divider/Divider.styles.ts
index 2cd3d1c1de..e9d3f02e2a 100644
--- a/widget/ui/src/components/Divider/Divider.styles.ts
+++ b/widget/ui/src/components/Divider/Divider.styles.ts
@@ -15,6 +15,7 @@ export const DividerContainer = styled('div', {
       24: {},
       30: {},
       32: {},
+      36: {},
       40: {},
     },
     direction: {
@@ -170,6 +171,20 @@ export const DividerContainer = styled('div', {
         width: '$32',
       },
     },
+    {
+      size: 36,
+      direction: 'vertical',
+      css: {
+        height: '$36',
+      },
+    },
+    {
+      size: 36,
+      direction: 'horizontal',
+      css: {
+        width: '$36',
+      },
+    },
     {
       size: 32,
       direction: 'vertical',
diff --git a/widget/ui/src/components/NotFound/NotFound.styles.ts b/widget/ui/src/components/NotFound/NotFound.styles.ts
index fe88fd4a09..8a5a7c651d 100644
--- a/widget/ui/src/components/NotFound/NotFound.styles.ts
+++ b/widget/ui/src/components/NotFound/NotFound.styles.ts
@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -6,4 +6,10 @@ export const Container = styled('div', {
   alignItems: 'center',
   flexDirection: 'column',
   textAlign: 'center',
+  '& .not-found-description': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
+  },
 });
diff --git a/widget/ui/src/components/NotFound/NotFound.tsx b/widget/ui/src/components/NotFound/NotFound.tsx
index 6886158303..9c18b81892 100644
--- a/widget/ui/src/components/NotFound/NotFound.tsx
+++ b/widget/ui/src/components/NotFound/NotFound.tsx
@@ -9,16 +9,19 @@ import { Typography } from '../Typography';
 import { Container } from './NotFound.styles';
 
 export function NotFound(props: NotFoundPropTypes) {
-  const { hasIcon = true, titleColor } = props;
+  const { icon, titleColor, hasIcon = true } = props;
   return (
     <Container>
-      {hasIcon && <SearchIcon color="secondary" size={26} />}
+      {hasIcon && (icon || <SearchIcon color="secondary" size={26} />)}
       <Divider size={4} />
       <Typography variant="title" size="medium" color={titleColor}>
         {props.title}
       </Typography>
       <Divider size={10} />
-      <Typography variant="body" size="medium" color="neutral700">
+      <Typography
+        className="not-found-description"
+        variant="body"
+        size="medium">
         {props.description}
       </Typography>
     </Container>
diff --git a/widget/ui/src/components/NotFound/NotFound.types.ts b/widget/ui/src/components/NotFound/NotFound.types.ts
index d5900f1008..602ce6b100 100644
--- a/widget/ui/src/components/NotFound/NotFound.types.ts
+++ b/widget/ui/src/components/NotFound/NotFound.types.ts
@@ -1,6 +1,9 @@
+import type { ReactNode } from 'react';
+
 export type NotFoundPropTypes = {
   title: string;
   description?: string;
-  hasIcon?: boolean;
   titleColor?: string;
+  icon?: ReactNode;
+  hasIcon?: boolean;
 };
diff --git a/widget/ui/src/components/TextField/TextField.styles.ts b/widget/ui/src/components/TextField/TextField.styles.ts
index eb5f0a85df..1c92f7e490 100644
--- a/widget/ui/src/components/TextField/TextField.styles.ts
+++ b/widget/ui/src/components/TextField/TextField.styles.ts
@@ -113,6 +113,9 @@ export const Input = styled('input', {
 
   '&::placeholder, &::-webkit-input-placeholder': {
     color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
   },
   '&:focus-visible': {
     outline: 'none',
diff --git a/widget/ui/src/containers/SwapInput/SwapInput.tsx b/widget/ui/src/containers/SwapInput/SwapInput.tsx
index e956f8b617..e1c138222c 100644
--- a/widget/ui/src/containers/SwapInput/SwapInput.tsx
+++ b/widget/ui/src/containers/SwapInput/SwapInput.tsx
@@ -37,6 +37,15 @@ export function SwapInput(props: SwapInputPropTypes) {
 
   const showBalanceSkeleton =
     'balance' in props && (props.loading || props.loadingBalance);
+  const price = props.price;
+
+  const isUsdValueZeroOrFalsy =
+    !props.price.usdValue || props.price.usdValue === '0';
+
+  const displayUsdValue =
+    props.price.error ||
+    (isUsdValueZeroOrFalsy ? '0.00' : `~$${props.price.usdValue}`);
+
   return (
     <Container
       id={
@@ -99,17 +108,17 @@ export function SwapInput(props: SwapInputPropTypes) {
             <>
               <NumericTooltip
                 align="end"
-                content={props.price.realValue}
+                content={price.realValue}
                 container={props.tooltipContainer}
                 open={
-                  !props.price.realValue || props.price.realValue === '0'
+                  !price.realValue || price.realValue === '0'
                     ? false
                     : undefined
                 }>
                 <InputAmount
                   disabled={props.disabled || props.mode === 'To'}
                   style={{ padding: 0 }}
-                  value={props.price.value}
+                  value={price.value}
                   type={'onInputChange' in props ? 'number' : 'text'}
                   step="any"
                   size="large"
@@ -129,30 +138,21 @@ export function SwapInput(props: SwapInputPropTypes) {
                     container: props.tooltipContainer,
                     side: 'bottom',
                   }}
-                  outputUsdValue={props.price.usdValue}
-                  realOutputUsdValue={props.price.realUsdValue}
-                  error={props.price.error}
+                  outputUsdValue={price.usdValue}
+                  realOutputUsdValue={price.realUsdValue}
+                  error={price.error}
                   percentageChange={props.percentageChange}
                   warningLevel={props.warningLevel}
                 />
               ) : (
                 <NumericTooltip
-                  content={props.price.realUsdValue}
+                  content={price.realUsdValue}
                   container={props.tooltipContainer}
-                  open={
-                    !props.price.realUsdValue ||
-                    props.price.realUsdValue === '0'
-                      ? false
-                      : undefined
-                  }
+                  open={isUsdValueZeroOrFalsy ? false : undefined}
                   side="bottom">
-                  <ValueTypography hasWarning={!!props.price.error}>
+                  <ValueTypography hasWarning={!!price.error}>
                     <UsdPrice variant="body" size="medium">
-                      {props.price.usdValue
-                        ? props.price.usdValue === '0'
-                          ? '0.00'
-                          : `~$${props.price.usdValue}`
-                        : props.price.error}
+                      {displayUsdValue}
                     </UsdPrice>
                   </ValueTypography>
                 </NumericTooltip>
diff --git a/widget/ui/src/icons/CustomTokensZeroState.tsx b/widget/ui/src/icons/CustomTokensZeroState.tsx
new file mode 100644
index 0000000000..4142423176
--- /dev/null
+++ b/widget/ui/src/icons/CustomTokensZeroState.tsx
@@ -0,0 +1,262 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgCustomTokensZeroState(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 200 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="#F3F8FC"
+        d="M44.167 61.576C5.142 56.15 5.23 102.127 11.919 116.708c12.94 28.225 62.797 48.735 69.176 24.965 9.46-35.247 62.915-2.897 85.22-4.754 22.304-1.858 24.25-31.86 6.499-46.34-17.752-14.48-5.966-32.553-8.561-48.994-2.595-16.44-24.489-29.104-48.396-14.093-22.582 14.178-17.514 41.617-71.69 34.084Z"
+      />
+      <g stroke="#002D5E" strokeLinecap="round" strokeWidth={0.877}>
+        <path d="M36.509 80.67c-2.554-2.055-5.828-1.903-10.124-.734M41.066 73.016c-2.62-3.294-3.184-5.288-3.688-9.6M37.608 75.705c-3.2-2.95-7.364-5.582-11.294-7.717" />
+      </g>
+      <path
+        stroke="#002D5E"
+        strokeDasharray="3.51 2.63"
+        strokeWidth={0.877}
+        d="M141.301 100.922c.348-3.058.581-6.172 1.492-9.117.782-2.524 2.02-4.717 3.768-6.66 1.456-1.62 3.195-3.075 5.223-3.867 1.97-.77 4.154-1.006 6.255-1.001 2.518.006 5.171.328 7.493 1.421 1.803.849 3.288 2.637 4.303 4.351 1.759 2.97 1.247 6.634-.92 9.22-.764.91-1.753 1.771-2.862 2.203-1.564.609-3.035.013-4.129-1.244-2.476-2.843-1.619-7.39-.322-10.552 1.524-3.715 4.277-6.931 7.534-9.149 2.361-1.607 5.028-2.739 7.68-3.736 2.619-.984 5.281-1.656 7.97-2.393"
+      />
+      <circle cx={186.116} cy={70.399} r={2.746} fill="#002D5E" />
+      <g stroke="#fff" strokeWidth={0.407} filter="url(#a)">
+        <rect
+          width={99.809}
+          height={28.4}
+          x={46.977}
+          y={112.419}
+          fill="#D6E8F9"
+          fillOpacity={0.5}
+          rx={4.404}
+        />
+        <rect
+          width={70.596}
+          height={4.056}
+          x={70.917}
+          y={120.126}
+          fill="#F5FAFF"
+          rx={2.028}
+        />
+        <rect
+          width={70.596}
+          height={4.056}
+          x={70.917}
+          y={129.868}
+          fill="#F5FAFF"
+          rx={2.028}
+        />
+        <path
+          fill="#F5FAFF"
+          d="M67.263 126.82a7.911 7.911 0 1 1-15.822 0 7.911 7.911 0 0 1 15.822 0Z"
+        />
+      </g>
+      <g stroke="#fff" strokeWidth={0.407} filter="url(#b)">
+        <rect
+          width={99.809}
+          height={28.4}
+          x={46.978}
+          y={44.592}
+          fill="#D6E8F9"
+          fillOpacity={0.5}
+          rx={4.404}
+        />
+        <rect
+          width={70.596}
+          height={4.056}
+          x={70.917}
+          y={52.3}
+          fill="#F5FAFF"
+          rx={2.028}
+        />
+        <rect
+          width={70.596}
+          height={4.056}
+          x={70.917}
+          y={62.041}
+          fill="#F5FAFF"
+          rx={2.028}
+        />
+        <path
+          fill="#F5FAFF"
+          d="M67.263 59a7.911 7.911 0 1 1-15.822 0 7.911 7.911 0 0 1 15.822 0Z"
+        />
+      </g>
+      <g filter="url(#c)">
+        <rect
+          width={108.517}
+          height={31.193}
+          x={38.475}
+          y={76.075}
+          fill="#fff"
+          rx={4.99}
+        />
+      </g>
+      <rect
+        width={75.27}
+        height={4.731}
+        x={66.133}
+        y={84.572}
+        fill="#E6F2FF"
+        rx={2.366}
+      />
+      <rect
+        width={75.27}
+        height={4.731}
+        x={66.133}
+        y={94.894}
+        fill="#E6F2FF"
+        rx={2.366}
+      />
+      <g filter="url(#d)">
+        <circle
+          cx={52.386}
+          cy={91.607}
+          r={9.749}
+          stroke="#002D5E"
+          strokeDasharray="1.78 1.34"
+          strokeWidth={0.446}
+        />
+      </g>
+      <g filter="url(#e)">
+        <circle cx={54.492} cy={91.848} r={9.99} fill="#E5F2FF" />
+        <circle
+          cx={54.492}
+          cy={91.848}
+          r={9.896}
+          stroke="#fff"
+          strokeWidth={0.188}
+        />
+      </g>
+      <g stroke="#002D5E" strokeLinecap="round" strokeWidth={0.754}>
+        <path d="m53.224 90.58 2.534 2.534M53.224 93.114l2.534-2.534" />
+      </g>
+      <circle
+        cx={54.491}
+        cy={91.847}
+        r={4.15}
+        stroke="#002D5E"
+        strokeWidth={0.754}
+      />
+      <defs>
+        <filter
+          id="a"
+          width={100.984}
+          height={29.575}
+          x={46.39}
+          y={111.831}
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            result="effect1_foregroundBlur_19281_419764"
+            stdDeviation={0.192}
+          />
+        </filter>
+        <filter
+          id="b"
+          width={100.984}
+          height={29.575}
+          x={46.39}
+          y={44.005}
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            result="effect1_foregroundBlur_19281_419764"
+            stdDeviation={0.192}
+          />
+        </filter>
+        <filter
+          id="c"
+          width={116.833}
+          height={39.509}
+          x={33.07}
+          y={74.827}
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            result="hardAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset dx={-1.247} dy={2.911} />
+          <feGaussianBlur stdDeviation={2.079} />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0.507031 0 0 0 0 0.626875 0 0 0 0 0.7375 0 0 0 0.49 0" />
+          <feBlend
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_19281_419764"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow_19281_419764"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="d"
+          width={21.73}
+          height={21.73}
+          x={41.521}
+          y={80.742}
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation={0.446} />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_19281_419764"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_19281_419764"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="e"
+          width={22.994}
+          height={24.285}
+          x={42.995}
+          y={81.104}
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation={0.377} />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_19281_419764"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            result="hardAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset dy={2.044} />
+          <feGaussianBlur stdDeviation={0.754} />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0.814115 0 0 0 0 0.882372 0 0 0 0 0.9625 0 0 0 0.33 0" />
+          <feBlend
+            in2="effect1_backgroundBlur_19281_419764"
+            result="effect2_dropShadow_19281_419764"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect2_dropShadow_19281_419764"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+export default SvgCustomTokensZeroState;
diff --git a/widget/ui/src/icons/CustomTokensZeroStateDark.tsx b/widget/ui/src/icons/CustomTokensZeroStateDark.tsx
new file mode 100644
index 0000000000..8f04625a84
--- /dev/null
+++ b/widget/ui/src/icons/CustomTokensZeroStateDark.tsx
@@ -0,0 +1,415 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgCustomTokensZeroStateDark(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 200 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Custom Tokens">
+        <path
+          id="Vector 10"
+          d="M44.167 61.5761C5.14181 56.15 5.22992 102.127 11.9196 116.708C24.8586 144.933 74.7156 165.443 81.0951 141.673C90.5545 106.426 144.01 138.776 166.315 136.919C188.62 135.061 190.565 105.059 172.814 90.5792C155.062 76.099 166.849 58.0255 164.253 41.585C161.658 25.1445 139.764 12.4813 115.857 27.4918C93.2754 41.6699 98.3432 69.1088 44.167 61.5761Z"
+          fill="#111112"
+        />
+        <g id="Group 1000007805">
+          <path
+            id="Vector 5"
+            d="M33.3549 82.5155C30.8013 80.4597 27.5271 80.6121 23.2312 81.7805"
+            stroke="#D1D1D1"
+            strokeWidth={0.876984}
+            strokeLinecap="round"
+          />
+          <path
+            id="Vector 6"
+            d="M37.9128 74.8615C35.292 71.5671 34.7292 69.5732 34.2246 65.261"
+            stroke="#D1D1D1"
+            strokeWidth={0.876984}
+            strokeLinecap="round"
+          />
+          <path
+            id="Vector 7"
+            d="M34.4533 77.5497C31.2532 74.6003 27.0895 71.9673 23.1592 69.833"
+            stroke="#D1D1D1"
+            strokeWidth={0.876984}
+            strokeLinecap="round"
+          />
+        </g>
+        <g id="Group 1000007806">
+          <path
+            id="Vector 2"
+            d="M138.142 102.767C138.49 99.7086 138.723 96.5943 139.635 93.6495C140.416 91.126 141.655 88.9323 143.402 86.9893C144.858 85.3701 146.598 83.9147 148.625 83.1229C150.596 82.3531 152.779 82.1166 154.881 82.1214C157.399 82.1272 160.052 82.4497 162.373 83.5426C164.176 84.3912 165.662 86.1799 166.677 87.8937C168.435 90.8633 167.923 94.5274 165.757 97.113C164.993 98.0243 164.003 98.885 162.895 99.3162C161.33 99.9252 159.86 99.3294 158.765 98.0726C156.289 95.2291 157.146 90.6821 158.443 87.5208C159.967 83.8057 162.721 80.5889 165.978 78.3715C168.338 76.7645 171.005 75.6328 173.657 74.6358C176.276 73.6511 178.939 72.9793 181.628 72.2427"
+            stroke="#D1D1D1"
+            strokeWidth={0.876984}
+            strokeDasharray="3.51 2.63"
+          />
+          <circle
+            id="Ellipse 1940"
+            cx={182.957}
+            cy={72.2431}
+            r={2.74629}
+            fill="#D1D1D1"
+          />
+        </g>
+        <g id="Group 1000007807">
+          <g id="Group 1000007810" filter="url(#filter0_f_19281_419835)">
+            <g id="Group 1000007748">
+              <g id="Rectangle 6610">
+                <rect
+                  x={43.6162}
+                  y={113.849}
+                  width={100.216}
+                  height={28.8071}
+                  rx={4.60784}
+                  fill="#444444"
+                  fillOpacity={0.5}
+                />
+                <rect
+                  x={43.8197}
+                  y={114.053}
+                  width={99.8093}
+                  height={28.4001}
+                  rx={4.40431}
+                  stroke="#787878"
+                  strokeOpacity={0.25}
+                  strokeWidth={0.407059}
+                />
+              </g>
+              <rect
+                id="Rectangle 6611"
+                x={67.5557}
+                y={121.557}
+                width={71.0035}
+                height={4.46308}
+                rx={2.23154}
+                fill="#343434"
+              />
+              <rect
+                id="Rectangle 6612"
+                x={67.5557}
+                y={131.298}
+                width={71.0035}
+                height={4.46308}
+                rx={2.23154}
+                fill="#343434"
+              />
+            </g>
+            <g id="Ellipse 1952">
+              <ellipse
+                cx={56.1948}
+                cy={128.461}
+                rx={8.11468}
+                ry={8.11468}
+                fill="#3F3F3F"
+              />
+              <path
+                d="M64.2094 128.461C64.2094 132.887 60.6211 136.475 56.1948 136.475C51.7684 136.475 48.1801 132.887 48.1801 128.461C48.1801 124.034 51.7684 120.446 56.1948 120.446C60.6211 120.446 64.2094 124.034 64.2094 128.461Z"
+                stroke="#787878"
+                strokeOpacity={0.25}
+                strokeWidth={0.2}
+              />
+            </g>
+          </g>
+          <g id="Group 1000007822" filter="url(#filter1_f_19281_419835)">
+            <g id="Group 1000007748_2">
+              <g id="Rectangle 6610_2">
+                <rect
+                  x={43.6162}
+                  y={46.2336}
+                  width={100.216}
+                  height={28.8071}
+                  rx={4.60784}
+                  fill="#444444"
+                  fillOpacity={0.5}
+                />
+                <rect
+                  x={43.8197}
+                  y={46.4372}
+                  width={99.8093}
+                  height={28.4001}
+                  rx={4.40431}
+                  stroke="#787878"
+                  strokeOpacity={0.25}
+                  strokeWidth={0.407059}
+                />
+              </g>
+              <rect
+                id="Rectangle 6611_2"
+                x={67.5557}
+                y={53.9412}
+                width={71.0035}
+                height={4.46308}
+                rx={2.23154}
+                fill="#343434"
+              />
+              <rect
+                id="Rectangle 6612_2"
+                x={67.5557}
+                y={63.6826}
+                width={71.0035}
+                height={4.46308}
+                rx={2.23154}
+                fill="#343434"
+              />
+            </g>
+            <g id="Ellipse 1952_2">
+              <ellipse
+                cx={56.1948}
+                cy={60.8449}
+                rx={8.11468}
+                ry={8.11468}
+                fill="#3F3F3F"
+              />
+              <path
+                d="M64.2094 60.8449C64.2094 65.2713 60.6211 68.8596 56.1948 68.8596C51.7684 68.8596 48.1801 65.2713 48.1801 60.8449C48.1801 56.4185 51.7684 52.8302 56.1948 52.8302C60.6211 52.8302 64.2094 56.4185 64.2094 60.8449Z"
+                stroke="#787878"
+                strokeOpacity={0.25}
+                strokeWidth={0.2}
+              />
+            </g>
+          </g>
+          <g id="Group 1000007811">
+            <g id="Rectangle 6610_3" filter="url(#filter2_d_19281_419835)">
+              <rect
+                x={35.3213}
+                y={78.5015}
+                width={106.238}
+                height={30.538}
+                rx={4.88471}
+                fill="#414141"
+              />
+              <rect
+                x={35.5248}
+                y={78.705}
+                width={105.831}
+                height={30.131}
+                rx={4.68118}
+                stroke="#313134"
+                strokeWidth={0.407059}
+              />
+            </g>
+            <g id="Group 1000007823">
+              <g id="Group 1000007726">
+                <g id="Ellipse 1938" filter="url(#filter3_bd_19281_419835)">
+                  <circle
+                    cx={52.4858}
+                    cy={93.5847}
+                    r={9.88228}
+                    fill="#363636"
+                  />
+                  <circle
+                    cx={52.4858}
+                    cy={93.5847}
+                    r={9.78911}
+                    stroke="#787878"
+                    strokeWidth={0.186346}
+                  />
+                </g>
+                <g id="Group 1000007725">
+                  <path
+                    id="Line 351"
+                    d="M51.2324 92.3315L53.7389 94.838"
+                    stroke="white"
+                    strokeWidth={0.745383}
+                    strokeLinecap="round"
+                  />
+                  <path
+                    id="Line 352"
+                    d="M51.2324 94.8362L53.7389 92.3297"
+                    stroke="white"
+                    strokeWidth={0.745383}
+                    strokeLinecap="round"
+                  />
+                </g>
+                <circle
+                  id="Ellipse 1939"
+                  cx={52.4894}
+                  cy={93.5833}
+                  r={4.10556}
+                  fill="#B6B6B6"
+                  fillOpacity={0.38}
+                  stroke="#B8B8B8"
+                  strokeWidth={0.745383}
+                />
+              </g>
+              <g id="Group 1000007808">
+                <g id="Group 1000007740">
+                  <g id="Ellipse 1941" filter="url(#filter4_b_19281_419835)">
+                    <circle
+                      cx={51.3139}
+                      cy={94.4919}
+                      r={9.74949}
+                      stroke="#A5A5A5"
+                      strokeWidth={0.446247}
+                      strokeDasharray="1.78 1.34"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+            <rect
+              id="Rectangle 6611_3"
+              x={66.5283}
+              y={86.8232}
+              width={69.6961}
+              height={4.16096}
+              rx={2.08048}
+              fill="#5A5A5A"
+            />
+            <rect
+              id="Rectangle 6612_3"
+              x={66.5283}
+              y={97.2258}
+              width={69.6961}
+              height={4.16096}
+              rx={2.08048}
+              fill="#5A5A5A"
+            />
+          </g>
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_19281_419835"
+          x={43.2322}
+          y={113.465}
+          width={100.985}
+          height={29.5751}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation={0.191993}
+            result="effect1_foregroundBlur_19281_419835"
+          />
+        </filter>
+        <filter
+          id="filter1_f_19281_419835"
+          x={43.2322}
+          y={45.8497}
+          width={100.985}
+          height={29.5751}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation={0.191993}
+            result="effect1_foregroundBlur_19281_419835"
+          />
+        </filter>
+        <filter
+          id="filter2_d_19281_419835"
+          x={22.044}
+          y={70.5351}
+          width={132.793}
+          height={57.0927}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy={5.31093} />
+          <feGaussianBlur stdDeviation={6.63866} />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 1 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_19281_419835"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_19281_419835"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter3_bd_19281_419835"
+          x={38.8766}
+          y={81.4662}
+          width={27.2185}
+          height={27.2185}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation={0.372692} />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_19281_419835"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy={1.49077} />
+          <feGaussianBlur stdDeviation={1.86346} />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 1 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_backgroundBlur_19281_419835"
+            result="effect2_dropShadow_19281_419835"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect2_dropShadow_19281_419835"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter4_b_19281_419835"
+          x={40.4493}
+          y={83.6268}
+          width={21.7293}
+          height={21.7303}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation={0.446247} />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_19281_419835"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_19281_419835"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+export default SvgCustomTokensZeroStateDark;
diff --git a/widget/ui/src/icons/Target.tsx b/widget/ui/src/icons/Target.tsx
new file mode 100644
index 0000000000..d46d851da9
--- /dev/null
+++ b/widget/ui/src/icons/Target.tsx
@@ -0,0 +1,24 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgTarget(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Custom token">
+        <path
+          id="Icon (Stroke)"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.0004 0.174805C12.456 0.174805 12.8254 0.544173 12.8254 0.999811V2.40968C17.483 2.80507 21.1952 6.51725 21.5906 11.1749H23.0005C23.4561 11.1749 23.8255 11.5443 23.8255 11.9999C23.8255 12.4555 23.4561 12.8249 23.0005 12.8249H21.5906C21.1952 17.4825 17.483 21.1947 12.8254 21.5901V23C12.8254 23.4556 12.456 23.825 12.0004 23.825C11.5447 23.825 11.1754 23.4556 11.1754 23V21.5901C6.51773 21.1947 2.80556 17.4825 2.41017 12.8249H1.0003C0.544661 12.8249 0.175293 12.4555 0.175293 11.9999C0.175293 11.5443 0.544661 11.1749 1.0003 11.1749H2.41017C2.80556 6.51725 6.51773 2.80507 11.1754 2.40968V0.999811C11.1754 0.544173 11.5447 0.174805 12.0004 0.174805ZM11.1754 4.06699C7.42972 4.45195 4.45243 7.42923 4.06748 11.1749H5.40033C5.85597 11.1749 6.22534 11.5443 6.22534 11.9999C6.22534 12.4555 5.85597 12.8249 5.40033 12.8249H4.06748C4.45243 16.5706 7.42972 19.5478 11.1754 19.9328V18.5999C11.1754 18.1443 11.5447 17.7749 12.0004 17.7749C12.456 17.7749 12.8254 18.1443 12.8254 18.5999V19.9328C16.571 19.5478 19.5483 16.5706 19.9333 12.8249H18.6004C18.1448 12.8249 17.7754 12.4555 17.7754 11.9999C17.7754 11.5443 18.1448 11.1749 18.6004 11.1749H19.9333C19.5483 7.42923 16.571 4.45195 12.8254 4.06699V5.39984C12.8254 5.85548 12.456 6.22485 12.0004 6.22485C11.5447 6.22485 11.1754 5.85548 11.1754 5.39984V4.06699ZM12.0004 8.97487C12.456 8.97487 12.8254 9.34424 12.8254 9.79988V11.1749H14.2004C14.656 11.1749 15.0254 11.5443 15.0254 11.9999C15.0254 12.4555 14.656 12.8249 14.2004 12.8249H12.8254V14.1999C12.8254 14.6555 12.456 15.0249 12.0004 15.0249C11.5447 15.0249 11.1754 14.6555 11.1754 14.1999V12.8249H9.80037C9.34473 12.8249 8.97536 12.4555 8.97536 11.9999C8.97536 11.5443 9.34473 11.1749 9.80037 11.1749H11.1754V9.79988C11.1754 9.34424 11.5447 8.97487 12.0004 8.97487Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgTarget;
diff --git a/widget/ui/src/icons/index.ts b/widget/ui/src/icons/index.ts
index ed227ddcfd..8254a0f474 100644
--- a/widget/ui/src/icons/index.ts
+++ b/widget/ui/src/icons/index.ts
@@ -14,6 +14,8 @@ export { default as CopyIcon } from './Copy';
 export { default as CosmosCategoryIcon } from './CosmosCategory';
 export { default as CreditCardIcon } from './CreditCard';
 export { default as CustomColorsIcon } from './CustomColors';
+export { default as CustomTokensZeroStateIcon } from './CustomTokensZeroState';
+export { default as CustomTokensZeroStateDarkIcon } from './CustomTokensZeroStateDark';
 export { default as DarkModeIcon } from './DarkMode';
 export { default as DeleteIcon } from './Delete';
 export { default as DesktopIcon } from './Desktop';
@@ -27,6 +29,7 @@ export { default as ExitIcon } from './Exit';
 export { default as ExplorerIcon } from './Explorer';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FirstIcon } from './First';
+export { default as FilterIcon } from './Filter';
 export { default as FontIcon } from './Font';
 export { default as GasIcon } from './Gas';
 export { default as HeightIcon } from './Height';
@@ -64,6 +67,7 @@ export { default as ShareIcon } from './Share';
 export { default as StatsIcon } from './Stats';
 export { default as SupportIcon } from './Support';
 export { default as SwapIcon } from './Swap';
+export { default as TargetIcon } from './Target';
 export { default as TimeIcon } from './Time';
 export { default as TransactionIcon } from './Transaction';
 export { default as TuneIcon } from './Tune';
@@ -76,7 +80,6 @@ export { default as BullhornIcon } from './Bullhorn';
 export { default as ChainsIcon } from './Chains';
 export { default as ColorsIcon } from './Colors';
 export { default as DiscordIcon } from './Discord';
-export { default as FilterIcon } from './Filter';
 export { default as InfinityIcon } from './Infinity';
 export { default as KeyIcon } from './Key';
 export { default as MediumIcon } from './Medium';
diff --git a/widget/ui/src/theme.ts b/widget/ui/src/theme.ts
index 890ef10d02..9c631ef079 100644
--- a/widget/ui/src/theme.ts
+++ b/widget/ui/src/theme.ts
@@ -87,6 +87,7 @@ export const theme = {
     24: '24px',
     28: '28px',
     32: '32px',
+    36: '36px',
   },
 
   radii: {
diff --git a/widget/ui/svgs/resources/fill/CustomTokensZeroState.svg b/widget/ui/svgs/resources/fill/CustomTokensZeroState.svg
new file mode 100644
index 0000000000..c7c737d6f4
--- /dev/null
+++ b/widget/ui/svgs/resources/fill/CustomTokensZeroState.svg
@@ -0,0 +1,97 @@
+<svg width="200" height="173" viewBox="0 0 200 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Custom Tokens">
+<g id="No result found">
+<path id="Vector 11" d="M44.1669 61.5761C5.14169 56.15 5.2298 102.127 11.9194 116.708C24.8585 144.933 74.7155 165.443 81.0949 141.673C90.5544 106.426 144.01 138.776 166.315 136.919C188.619 135.061 190.565 105.059 172.814 90.5792C155.062 76.099 166.848 58.0255 164.253 41.585C161.658 25.1445 139.764 12.4813 115.857 27.4918C93.2753 41.6699 98.3431 69.1088 44.1669 61.5761Z" fill="#F3F8FC"/>
+<g id="Group 1000007730">
+<path id="Vector 5" d="M36.5088 80.6708C33.9552 78.615 30.681 78.7674 26.3852 79.9357" stroke="#002D5E" stroke-width="0.876984" stroke-linecap="round"/>
+<path id="Vector 6" d="M41.0661 73.0165C38.4453 69.7221 37.8825 67.7282 37.3779 63.416" stroke="#002D5E" stroke-width="0.876984" stroke-linecap="round"/>
+<path id="Vector 7" d="M37.6079 75.705C34.4079 72.7556 30.2441 70.1225 26.3138 67.9883" stroke="#002D5E" stroke-width="0.876984" stroke-linecap="round"/>
+</g>
+<g id="Group 1000007739">
+<path id="Vector 2" d="M141.301 100.922C141.649 97.8641 141.882 94.7498 142.793 91.8051C143.575 89.2815 144.813 87.0878 146.561 85.1448C148.017 83.5256 149.756 82.0702 151.784 81.2784C153.754 80.5087 155.938 80.2721 158.039 80.2769C160.557 80.2827 163.21 80.6052 165.532 81.6981C167.335 82.5467 168.82 84.3354 169.835 86.0492C171.594 89.0188 171.082 92.6829 168.915 95.2685C168.151 96.1798 167.162 97.0405 166.053 97.4717C164.489 98.0807 163.018 97.485 161.924 96.2281C159.448 93.3846 160.305 88.8376 161.602 85.6763C163.126 81.9612 165.879 78.7445 169.136 76.527C171.497 74.9201 174.164 73.7884 176.816 72.7913C179.435 71.8066 182.097 71.1348 184.786 70.3983" stroke="#002D5E" stroke-width="0.876984" stroke-dasharray="3.51 2.63"/>
+<circle id="Ellipse 1940" cx="186.116" cy="70.3986" r="2.74629" fill="#002D5E"/>
+</g>
+<g id="Group 1000007760">
+<g id="Group 1000007756" filter="url(#filter0_f_19281_419764)">
+<g id="Group 1000007748">
+<rect id="Rectangle 6610" x="46.9775" y="112.419" width="99.8093" height="28.4001" rx="4.40431" fill="#D6E8F9" fill-opacity="0.5" stroke="white" stroke-width="0.407059"/>
+<rect id="Rectangle 6611" x="70.9172" y="120.126" width="70.5964" height="4.05602" rx="2.02801" fill="#F5FAFF" stroke="white" stroke-width="0.407059"/>
+<rect id="Rectangle 6612" x="70.9172" y="129.868" width="70.5964" height="4.05602" rx="2.02801" fill="#F5FAFF" stroke="white" stroke-width="0.407059"/>
+</g>
+<path id="Ellipse 1952" d="M67.2634 126.82C67.2634 131.189 63.7214 134.731 59.3522 134.731C54.983 134.731 51.4411 131.189 51.4411 126.82C51.4411 122.451 54.983 118.909 59.3522 118.909C63.7214 118.909 67.2634 122.451 67.2634 126.82Z" fill="#F5FAFF" stroke="white" stroke-width="0.407059"/>
+</g>
+<g id="Group 1000007757" filter="url(#filter1_f_19281_419764)">
+<g id="Group 1000007748_2">
+<rect id="Rectangle 6610_2" x="46.9776" y="44.5924" width="99.8093" height="28.4001" rx="4.40431" fill="#D6E8F9" fill-opacity="0.5" stroke="white" stroke-width="0.407059"/>
+<rect id="Rectangle 6611_2" x="70.9173" y="52.3" width="70.5964" height="4.05602" rx="2.02801" fill="#F5FAFF" stroke="white" stroke-width="0.407059"/>
+<rect id="Rectangle 6612_2" x="70.9173" y="62.0412" width="70.5964" height="4.05602" rx="2.02801" fill="#F5FAFF" stroke="white" stroke-width="0.407059"/>
+</g>
+<path id="Ellipse 1952_2" d="M67.2635 59.0002C67.2635 63.3694 63.7216 66.9113 59.3524 66.9113C54.9831 66.9113 51.4412 63.3694 51.4412 59.0002C51.4412 54.631 54.9831 51.089 59.3524 51.089C63.7216 51.089 67.2635 54.631 67.2635 59.0002Z" fill="#F5FAFF" stroke="white" stroke-width="0.407059"/>
+</g>
+<g id="Group 1000007758">
+<g id="Rectangle 6610_3" filter="url(#filter2_d_19281_419764)">
+<rect x="38.4755" y="76.0745" width="108.517" height="31.1933" rx="4.98952" fill="white"/>
+</g>
+<rect id="Rectangle 6611_3" x="66.1331" y="84.5723" width="75.2698" height="4.73124" rx="2.36562" fill="#E6F2FF"/>
+<rect id="Rectangle 6612_3" x="66.1331" y="94.8943" width="75.2698" height="4.73124" rx="2.36562" fill="#E6F2FF"/>
+</g>
+</g>
+</g>
+<g id="Group 1000007740">
+<g id="Ellipse 1941" filter="url(#filter3_b_19281_419764)">
+<circle cx="52.3863" cy="91.6074" r="9.74949" stroke="#002D5E" stroke-width="0.446247" stroke-dasharray="1.78 1.34"/>
+</g>
+</g>
+<g id="Group 1000007726">
+<g id="Ellipse 1938" filter="url(#filter4_bd_19281_419764)">
+<circle cx="54.4919" cy="91.8479" r="9.98996" fill="#E5F2FF"/>
+<circle cx="54.4919" cy="91.8479" r="9.89577" stroke="white" stroke-width="0.188376"/>
+</g>
+<g id="Group 1000007725">
+<path id="Line 351" d="M53.2242 90.5801L55.758 93.1138" stroke="#002D5E" stroke-width="0.753506" stroke-linecap="round"/>
+<path id="Line 352" d="M53.2242 93.1135L55.758 90.5798" stroke="#002D5E" stroke-width="0.753506" stroke-linecap="round"/>
+</g>
+<circle id="Ellipse 1939" cx="54.4914" cy="91.8473" r="4.1503" stroke="#002D5E" stroke-width="0.753506"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_19281_419764" x="46.3899" y="111.831" width="100.984" height="29.5751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.191993" result="effect1_foregroundBlur_19281_419764"/>
+</filter>
+<filter id="filter1_f_19281_419764" x="46.3901" y="44.0049" width="100.984" height="29.5751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.191993" result="effect1_foregroundBlur_19281_419764"/>
+</filter>
+<filter id="filter2_d_19281_419764" x="33.0702" y="74.8271" width="116.833" height="39.5092" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1.24738" dy="2.91055"/>
+<feGaussianBlur stdDeviation="2.07897"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.507031 0 0 0 0 0.626875 0 0 0 0 0.7375 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_19281_419764"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_19281_419764" result="shape"/>
+</filter>
+<filter id="filter3_b_19281_419764" x="41.5212" y="80.7423" width="21.7302" height="21.7303" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="0.446247"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_19281_419764"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_19281_419764" result="shape"/>
+</filter>
+<filter id="filter4_bd_19281_419764" x="42.9949" y="81.1044" width="22.994" height="24.2846" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="0.376753"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_19281_419764"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.04407"/>
+<feGaussianBlur stdDeviation="0.753506"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.814115 0 0 0 0 0.882372 0 0 0 0 0.9625 0 0 0 0.33 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_19281_419764" result="effect2_dropShadow_19281_419764"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_19281_419764" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/widget/ui/svgs/resources/fill/CustomTokensZeroStateDark.svg b/widget/ui/svgs/resources/fill/CustomTokensZeroStateDark.svg
new file mode 100644
index 0000000000..2afd5190b4
--- /dev/null
+++ b/widget/ui/svgs/resources/fill/CustomTokensZeroStateDark.svg
@@ -0,0 +1,112 @@
+<svg width="200" height="173" viewBox="0 0 200 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Custom Tokens">
+<path id="Vector 10" d="M44.167 61.5761C5.14181 56.15 5.22992 102.127 11.9196 116.708C24.8586 144.933 74.7156 165.443 81.0951 141.673C90.5545 106.426 144.01 138.776 166.315 136.919C188.62 135.061 190.565 105.059 172.814 90.5792C155.062 76.099 166.849 58.0255 164.253 41.585C161.658 25.1445 139.764 12.4813 115.857 27.4918C93.2754 41.6699 98.3432 69.1088 44.167 61.5761Z" fill="#111112"/>
+<g id="Group 1000007805">
+<path id="Vector 5" d="M33.3549 82.5155C30.8013 80.4597 27.5271 80.6121 23.2312 81.7805" stroke="#D1D1D1" stroke-width="0.876984" stroke-linecap="round"/>
+<path id="Vector 6" d="M37.9128 74.8615C35.292 71.5671 34.7292 69.5732 34.2246 65.261" stroke="#D1D1D1" stroke-width="0.876984" stroke-linecap="round"/>
+<path id="Vector 7" d="M34.4533 77.5497C31.2532 74.6003 27.0895 71.9673 23.1592 69.833" stroke="#D1D1D1" stroke-width="0.876984" stroke-linecap="round"/>
+</g>
+<g id="Group 1000007806">
+<path id="Vector 2" d="M138.142 102.767C138.49 99.7086 138.723 96.5943 139.635 93.6495C140.416 91.126 141.655 88.9323 143.402 86.9893C144.858 85.3701 146.598 83.9147 148.625 83.1229C150.596 82.3531 152.779 82.1166 154.881 82.1214C157.399 82.1272 160.052 82.4497 162.373 83.5426C164.176 84.3912 165.662 86.1799 166.677 87.8937C168.435 90.8633 167.923 94.5274 165.757 97.113C164.993 98.0243 164.003 98.885 162.895 99.3162C161.33 99.9252 159.86 99.3294 158.765 98.0726C156.289 95.2291 157.146 90.6821 158.443 87.5208C159.967 83.8057 162.721 80.5889 165.978 78.3715C168.338 76.7645 171.005 75.6328 173.657 74.6358C176.276 73.6511 178.939 72.9793 181.628 72.2427" stroke="#D1D1D1" stroke-width="0.876984" stroke-dasharray="3.51 2.63"/>
+<circle id="Ellipse 1940" cx="182.957" cy="72.2431" r="2.74629" fill="#D1D1D1"/>
+</g>
+<g id="Group 1000007807">
+<g id="Group 1000007810" filter="url(#filter0_f_19281_419835)">
+<g id="Group 1000007748">
+<g id="Rectangle 6610">
+<rect x="43.6162" y="113.849" width="100.216" height="28.8071" rx="4.60784" fill="#444444" fill-opacity="0.5"/>
+<rect x="43.8197" y="114.053" width="99.8093" height="28.4001" rx="4.40431" stroke="#787878" stroke-opacity="0.25" stroke-width="0.407059"/>
+</g>
+<rect id="Rectangle 6611" x="67.5557" y="121.557" width="71.0035" height="4.46308" rx="2.23154" fill="#343434"/>
+<rect id="Rectangle 6612" x="67.5557" y="131.298" width="71.0035" height="4.46308" rx="2.23154" fill="#343434"/>
+</g>
+<g id="Ellipse 1952">
+<ellipse cx="56.1948" cy="128.461" rx="8.11468" ry="8.11468" fill="#3F3F3F"/>
+<path d="M64.2094 128.461C64.2094 132.887 60.6211 136.475 56.1948 136.475C51.7684 136.475 48.1801 132.887 48.1801 128.461C48.1801 124.034 51.7684 120.446 56.1948 120.446C60.6211 120.446 64.2094 124.034 64.2094 128.461Z" stroke="#787878" stroke-opacity="0.25" stroke-width="0.2"/>
+</g>
+</g>
+<g id="Group 1000007822" filter="url(#filter1_f_19281_419835)">
+<g id="Group 1000007748_2">
+<g id="Rectangle 6610_2">
+<rect x="43.6162" y="46.2336" width="100.216" height="28.8071" rx="4.60784" fill="#444444" fill-opacity="0.5"/>
+<rect x="43.8197" y="46.4372" width="99.8093" height="28.4001" rx="4.40431" stroke="#787878" stroke-opacity="0.25" stroke-width="0.407059"/>
+</g>
+<rect id="Rectangle 6611_2" x="67.5557" y="53.9412" width="71.0035" height="4.46308" rx="2.23154" fill="#343434"/>
+<rect id="Rectangle 6612_2" x="67.5557" y="63.6826" width="71.0035" height="4.46308" rx="2.23154" fill="#343434"/>
+</g>
+<g id="Ellipse 1952_2">
+<ellipse cx="56.1948" cy="60.8449" rx="8.11468" ry="8.11468" fill="#3F3F3F"/>
+<path d="M64.2094 60.8449C64.2094 65.2713 60.6211 68.8596 56.1948 68.8596C51.7684 68.8596 48.1801 65.2713 48.1801 60.8449C48.1801 56.4185 51.7684 52.8302 56.1948 52.8302C60.6211 52.8302 64.2094 56.4185 64.2094 60.8449Z" stroke="#787878" stroke-opacity="0.25" stroke-width="0.2"/>
+</g>
+</g>
+<g id="Group 1000007811">
+<g id="Rectangle 6610_3" filter="url(#filter2_d_19281_419835)">
+<rect x="35.3213" y="78.5015" width="106.238" height="30.538" rx="4.88471" fill="#414141"/>
+<rect x="35.5248" y="78.705" width="105.831" height="30.131" rx="4.68118" stroke="#313134" stroke-width="0.407059"/>
+</g>
+<g id="Group 1000007823">
+<g id="Group 1000007726">
+<g id="Ellipse 1938" filter="url(#filter3_bd_19281_419835)">
+<circle cx="52.4858" cy="93.5847" r="9.88228" fill="#363636"/>
+<circle cx="52.4858" cy="93.5847" r="9.78911" stroke="#787878" stroke-width="0.186346"/>
+</g>
+<g id="Group 1000007725">
+<path id="Line 351" d="M51.2324 92.3315L53.7389 94.838" stroke="white" stroke-width="0.745383" stroke-linecap="round"/>
+<path id="Line 352" d="M51.2324 94.8362L53.7389 92.3297" stroke="white" stroke-width="0.745383" stroke-linecap="round"/>
+</g>
+<circle id="Ellipse 1939" cx="52.4894" cy="93.5833" r="4.10556" fill="#B6B6B6" fill-opacity="0.38" stroke="#B8B8B8" stroke-width="0.745383"/>
+</g>
+<g id="Group 1000007808">
+<g id="Group 1000007740">
+<g id="Ellipse 1941" filter="url(#filter4_b_19281_419835)">
+<circle cx="51.3139" cy="94.4919" r="9.74949" stroke="#A5A5A5" stroke-width="0.446247" stroke-dasharray="1.78 1.34"/>
+</g>
+</g>
+</g>
+</g>
+<rect id="Rectangle 6611_3" x="66.5283" y="86.8232" width="69.6961" height="4.16096" rx="2.08048" fill="#5A5A5A"/>
+<rect id="Rectangle 6612_3" x="66.5283" y="97.2258" width="69.6961" height="4.16096" rx="2.08048" fill="#5A5A5A"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_19281_419835" x="43.2322" y="113.465" width="100.985" height="29.5751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.191993" result="effect1_foregroundBlur_19281_419835"/>
+</filter>
+<filter id="filter1_f_19281_419835" x="43.2322" y="45.8497" width="100.985" height="29.5751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.191993" result="effect1_foregroundBlur_19281_419835"/>
+</filter>
+<filter id="filter2_d_19281_419835" x="22.044" y="70.5351" width="132.793" height="57.0927" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="5.31093"/>
+<feGaussianBlur stdDeviation="6.63866"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_19281_419835"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_19281_419835" result="shape"/>
+</filter>
+<filter id="filter3_bd_19281_419835" x="38.8766" y="81.4662" width="27.2185" height="27.2185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="0.372692"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_19281_419835"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.49077"/>
+<feGaussianBlur stdDeviation="1.86346"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_19281_419835" result="effect2_dropShadow_19281_419835"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_19281_419835" result="shape"/>
+</filter>
+<filter id="filter4_b_19281_419835" x="40.4493" y="83.6268" width="21.7293" height="21.7303" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="0.446247"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_19281_419835"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_19281_419835" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/widget/ui/svgs/resources/fill/Target.svg b/widget/ui/svgs/resources/fill/Target.svg
new file mode 100644
index 0000000000..96a6cc2686
--- /dev/null
+++ b/widget/ui/svgs/resources/fill/Target.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Custom token">
+<path id="Icon (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M12.0004 0.174805C12.456 0.174805 12.8254 0.544173 12.8254 0.999811V2.40968C17.483 2.80507 21.1952 6.51725 21.5906 11.1749H23.0005C23.4561 11.1749 23.8255 11.5443 23.8255 11.9999C23.8255 12.4555 23.4561 12.8249 23.0005 12.8249H21.5906C21.1952 17.4825 17.483 21.1947 12.8254 21.5901V23C12.8254 23.4556 12.456 23.825 12.0004 23.825C11.5447 23.825 11.1754 23.4556 11.1754 23V21.5901C6.51773 21.1947 2.80556 17.4825 2.41017 12.8249H1.0003C0.544661 12.8249 0.175293 12.4555 0.175293 11.9999C0.175293 11.5443 0.544661 11.1749 1.0003 11.1749H2.41017C2.80556 6.51725 6.51773 2.80507 11.1754 2.40968V0.999811C11.1754 0.544173 11.5447 0.174805 12.0004 0.174805ZM11.1754 4.06699C7.42972 4.45195 4.45243 7.42923 4.06748 11.1749H5.40033C5.85597 11.1749 6.22534 11.5443 6.22534 11.9999C6.22534 12.4555 5.85597 12.8249 5.40033 12.8249H4.06748C4.45243 16.5706 7.42972 19.5478 11.1754 19.9328V18.5999C11.1754 18.1443 11.5447 17.7749 12.0004 17.7749C12.456 17.7749 12.8254 18.1443 12.8254 18.5999V19.9328C16.571 19.5478 19.5483 16.5706 19.9333 12.8249H18.6004C18.1448 12.8249 17.7754 12.4555 17.7754 11.9999C17.7754 11.5443 18.1448 11.1749 18.6004 11.1749H19.9333C19.5483 7.42923 16.571 4.45195 12.8254 4.06699V5.39984C12.8254 5.85548 12.456 6.22485 12.0004 6.22485C11.5447 6.22485 11.1754 5.85548 11.1754 5.39984V4.06699ZM12.0004 8.97487C12.456 8.97487 12.8254 9.34424 12.8254 9.79988V11.1749H14.2004C14.656 11.1749 15.0254 11.5443 15.0254 11.9999C15.0254 12.4555 14.656 12.8249 14.2004 12.8249H12.8254V14.1999C12.8254 14.6555 12.456 15.0249 12.0004 15.0249C11.5447 15.0249 11.1754 14.6555 11.1754 14.1999V12.8249H9.80037C9.34473 12.8249 8.97536 12.4555 8.97536 11.9999C8.97536 11.5443 9.34473 11.1749 9.80037 11.1749H11.1754V9.79988C11.1754 9.34424 11.5447 8.97487 12.0004 8.97487Z" fill="#010101"/>
+</g>
+</svg>