From b0c0c58b0f21780fb30289ac293f4b2bf27421c9 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Fri, 6 Dec 2024 17:53:27 -0500
Subject: [PATCH 01/10] Added basic erc20 token list, WIP for nfts and
 uploading custom tokenlists

---
 src/components/helpers/FilledCheckBox.tsx     |   5 +-
 .../helpers/FilledRoundCheckBox.tsx           |   2 +-
 src/components/helpers/index.tsx              |   6 +
 src/components/network/NetworkItem.tsx        |   2 +-
 src/components/recovery/WalletList.tsx        |   4 +-
 .../wallet/collectibles/ImportCollectible.tsx | 171 ++++++++++++------
 .../wallet/collectibles/SendCollectible.tsx   |   2 +-
 src/components/wallet/tokens/ImportToken.tsx  | 107 ++++++++---
 src/components/wallet/tokens/SendToken.tsx    |   2 +-
 .../wallet/tokens/TokenBalanceItem.tsx        |   2 -
 src/components/wallet/tokens/TokenList.tsx    |   4 +-
 src/constants/network.ts                      |  74 ++++----
 src/constants/storage.ts                      |   5 +-
 src/routes/Recovery.tsx                       |   2 +-
 src/stores/CollectibleStore.ts                |  46 ++++-
 src/stores/NetworkStore.ts                    |   2 +-
 src/stores/TokenStore.ts                      |  33 ++++
 src/utils/indexeddb.ts                        |  59 ++++--
 18 files changed, 381 insertions(+), 147 deletions(-)
 create mode 100644 src/components/helpers/index.tsx

diff --git a/src/components/helpers/FilledCheckBox.tsx b/src/components/helpers/FilledCheckBox.tsx
index 8152a0d..9c8d8e0 100644
--- a/src/components/helpers/FilledCheckBox.tsx
+++ b/src/components/helpers/FilledCheckBox.tsx
@@ -1,9 +1,9 @@
-import { Box } from '@0xsequence/design-system'
+import { Box, BoxProps } from '@0xsequence/design-system'
 
 import Checkmark from '~/assets/icons/checkmark.svg'
 import EmptyCheckBox from '~/assets/icons/square-checkbox.svg'
 
-export default function FilledCheckBox({ checked, size = 'lg' }: { checked: boolean; size?: 'lg' | 'md' }) {
+export function FilledCheckBox({ checked, size = 'lg', ...rest }: { checked: boolean; size?: 'lg' | 'md' } & BoxProps) {
   return (
     <Box
       justifyContent="center"
@@ -14,6 +14,7 @@ export default function FilledCheckBox({ checked, size = 'lg' }: { checked: bool
         borderRadius: size === 'lg' ? '6px' : '3px',
         background: checked ? '#4F4F4F' : 'inherit'
       }}
+      {...rest}
     >
       {checked ? (
         <img
diff --git a/src/components/helpers/FilledRoundCheckBox.tsx b/src/components/helpers/FilledRoundCheckBox.tsx
index 6dc89af..d9e6531 100644
--- a/src/components/helpers/FilledRoundCheckBox.tsx
+++ b/src/components/helpers/FilledRoundCheckBox.tsx
@@ -5,7 +5,7 @@ import EmptyRoundCheckBox from '~/assets/icons/round-checkbox.svg'
 
 export const ROUND_CHECKBOX_SIZE = 8
 
-export default function FilledCheckBox({ checked }: { checked: boolean }) {
+export function FilledRoundCheckBox({ checked }: { checked: boolean }) {
   return (
     <Box
       width={`${ROUND_CHECKBOX_SIZE}`}
diff --git a/src/components/helpers/index.tsx b/src/components/helpers/index.tsx
new file mode 100644
index 0000000..5072296
--- /dev/null
+++ b/src/components/helpers/index.tsx
@@ -0,0 +1,6 @@
+import { FilledCheckBox } from '~/components/helpers/FilledCheckBox'
+import { FilledRoundCheckBox, ROUND_CHECKBOX_SIZE } from '~/components/helpers/FilledRoundCheckBox'
+import { ButtonWithIcon } from '~/components/helpers/ButtonWithIcon'
+import { ExternalIcon } from '~/components/helpers/ExternalIcon'
+
+export { FilledCheckBox, FilledRoundCheckBox, ROUND_CHECKBOX_SIZE, ButtonWithIcon, ExternalIcon }
\ No newline at end of file
diff --git a/src/components/network/NetworkItem.tsx b/src/components/network/NetworkItem.tsx
index 8777690..da4f239 100644
--- a/src/components/network/NetworkItem.tsx
+++ b/src/components/network/NetworkItem.tsx
@@ -13,7 +13,7 @@ import { ChangeEvent, useEffect, useState } from 'react'
 import { useObservable, useStore } from '~/stores'
 import { NetworkStore, createDebugLocalRelayer } from '~/stores/NetworkStore'
 
-import FilledCheckBox from '~/components/helpers/FilledCheckBox'
+import { FilledCheckBox } from '~/components/helpers'
 
 export default function NetworkItem({ network }: { network: NetworkConfig }) {
   const networkStore = useStore(NetworkStore)
diff --git a/src/components/recovery/WalletList.tsx b/src/components/recovery/WalletList.tsx
index 1eedd7f..6fed155 100644
--- a/src/components/recovery/WalletList.tsx
+++ b/src/components/recovery/WalletList.tsx
@@ -1,7 +1,7 @@
 import { Box, Text, truncateAddress } from '@0xsequence/design-system'
 import { useState } from 'react'
 
-import FilledRoundCheckBox, { ROUND_CHECKBOX_SIZE } from '~/components/helpers/FilledRoundCheckBox'
+import { FilledRoundCheckBox, ROUND_CHECKBOX_SIZE } from '~/components/helpers'
 
 export default function WalletList({
   possibleWallets,
@@ -46,7 +46,7 @@ export default function WalletList({
                 width="full"
               >
                 <Text
-                  variant='normal'
+                  variant="normal"
                   fontWeight="medium"
                   color="text100"
                   style={{ fontFamily: 'monospace' }}
diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
index e8d82ce..3402b65 100644
--- a/src/components/wallet/collectibles/ImportCollectible.tsx
+++ b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -46,11 +46,24 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   const [isAddingCollectible, setIsAddingCollectible] = useState(false)
   const [tokenDirectory, setTokenDirectory] = useState<string | undefined>()
 
+  const [isAddingCollectibleManually, setIsAddingCollectibleManually] = useState(false)
+
+  const [collectibleList, setCollectibleList] = useState<any[] | undefined>(undefined)
+
   useEffect(() => {
-    if (selectedNetwork) {
-      setTokenDirectory(networks.find(n => n.chainId === selectedNetwork.chainId)?.blockExplorer?.rootUrl)
+    const fetchCollectibleList = async () => {
+      if (selectedNetwork) {
+        setTokenDirectory(networks.find(n => n.chainId === selectedNetwork.chainId)?.blockExplorer?.rootUrl)
+        if (contractType === CollectibleContractTypeValues.ERC721) {
+          setCollectibleList(await collectibleStore.getDefaultERC721List(selectedNetwork.chainId))
+        } else if (contractType === CollectibleContractTypeValues.ERC1155) {
+          setCollectibleList(await collectibleStore.getDefaultERC1155List(selectedNetwork.chainId))
+        }
+      }
     }
 
+    fetchCollectibleList()
+
     if (selectedNetwork && collectibleAddress && collectibleTokenId && contractType) {
       collectibleStore
         .getCollectibleInfo({
@@ -117,7 +130,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     <Box flexDirection="column">
       <Box flexDirection="column" padding="6" gap="6">
         <Text variant="large" fontWeight="bold" color="text80">
-          Import ERC721 or ERC1155 Collectible
+          Import ERC721 or ERC1155 Collectibles
         </Text>
 
         <Box flexDirection="column" gap="3">
@@ -133,40 +146,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             />
           </Box>
 
-          <Box flexDirection="column" gap="0.5">
-            <Text variant="normal" fontWeight="medium" color="text80">
-              Collectible Address
-            </Text>
-
-            <Box flexDirection="row" gap="1" paddingBottom="0.5">
-              <Text variant="normal" fontWeight="medium" color="text50">
-                See addresses on network's
-              </Text>
-
-              <Text
-                variant="normal"
-                color="text50"
-                underline={!!tokenDirectory}
-                cursor={tokenDirectory ? 'pointer' : 'default'}
-                onClick={() => {
-                  if (tokenDirectory) {
-                    window.open(tokenDirectory)
-                  }
-                }}
-              >
-                directory
-              </Text>
-            </Box>
-
-            <TextInput
-              name="collectibleAddress"
-              value={collectibleAddress ?? ''}
-              onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-                setCollectibleAddress(ev.target.value)
-              }}
-            />
-          </Box>
-
           <Box flexDirection="column" gap="1">
             <Text variant="normal" fontWeight="medium" color="text80">
               Collectible Type
@@ -184,27 +163,96 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
 
           <Box flexDirection="column" gap="0.5">
             <Text variant="normal" fontWeight="medium" color="text80">
-              Collectible Token ID
+              Token
             </Text>
 
-            <TextInput
-              name="collectibleTokenId"
-              value={collectibleTokenId ?? ''}
-              onKeyPress={(event: { key: string; preventDefault: () => void }) => {
-                if (!/[0-9]/.test(event.key)) {
-                  event.preventDefault()
-                }
-              }}
-              onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-                if (ev.target.value === '') {
-                  setCollectibleTokenId(undefined)
-                  return
-                }
-
-                setCollectibleTokenId(ev.target.value as unknown as number)
-              }}
+            <Box
+              onClick={() => {}}
+              width="fit"
+              cursor="pointer"
+              paddingBottom="0.5"
+              opacity={{ base: '100', hover: '80' }}
+            >
+              <Text variant="normal" fontWeight="medium" color="text50">
+                Import external token list
+              </Text>
+            </Box>
+
+            <Select
+              name="collectibleList"
+              options={
+                collectibleList?.slice(0, 20).map(collectible => {
+                  return {
+                    label: collectible.name,
+                    value: collectible.address
+                  }
+                }) ?? []
+              }
+              onValueChange={value => setCollectibleAddress(value)}
             />
           </Box>
+
+          {isAddingCollectibleManually && (
+            <>
+              <Box flexDirection="column" gap="0.5">
+                <Text variant="normal" fontWeight="medium" color="text80">
+                  Collectible Address
+                </Text>
+
+                <Box flexDirection="row" gap="1" paddingBottom="0.5">
+                  <Text variant="normal" fontWeight="medium" color="text50">
+                    See addresses on network's
+                  </Text>
+
+                  <Text
+                    variant="normal"
+                    color="text50"
+                    underline={!!tokenDirectory}
+                    cursor={tokenDirectory ? 'pointer' : 'default'}
+                    onClick={() => {
+                      if (tokenDirectory) {
+                        window.open(tokenDirectory)
+                      }
+                    }}
+                  >
+                    directory
+                  </Text>
+                </Box>
+
+                <TextInput
+                  name="collectibleAddress"
+                  value={collectibleAddress ?? ''}
+                  onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                    setCollectibleAddress(ev.target.value)
+                  }}
+                />
+              </Box>
+
+              <Box flexDirection="column" gap="0.5">
+                <Text variant="normal" fontWeight="medium" color="text80">
+                  Collectible Token ID
+                </Text>
+
+                <TextInput
+                  name="collectibleTokenId"
+                  value={collectibleTokenId ?? ''}
+                  onKeyPress={(event: { key: string; preventDefault: () => void }) => {
+                    if (!/[0-9]/.test(event.key)) {
+                      event.preventDefault()
+                    }
+                  }}
+                  onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                    if (ev.target.value === '') {
+                      setCollectibleTokenId(undefined)
+                      return
+                    }
+
+                    setCollectibleTokenId(ev.target.value as unknown as number)
+                  }}
+                />
+              </Box>
+            </>
+          )}
         </Box>
 
         {isFetchingCollectibleInfo && (
@@ -246,8 +294,19 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
       </Box>
 
       <Divider marginY="0" />
-      <Box flexDirection="row" justifyContent="flex-end" padding="6" gap="2">
-        <Button label="Cancel" size="md" shape="square" onClick={onClose} />
+
+      <Box flexDirection="row" padding="6" gap="2">
+        {!isAddingCollectibleManually && (
+          <Button
+            label="Manual Import"
+            shape="square"
+            onClick={() => {
+              setIsAddingCollectibleManually(true)
+            }}
+          />
+        )}
+
+        <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
 
         <Button
           label="Add Collectible"
diff --git a/src/components/wallet/collectibles/SendCollectible.tsx b/src/components/wallet/collectibles/SendCollectible.tsx
index fc9ec34..8e0de7f 100644
--- a/src/components/wallet/collectibles/SendCollectible.tsx
+++ b/src/components/wallet/collectibles/SendCollectible.tsx
@@ -9,7 +9,7 @@ import { useStore } from '~/stores'
 import { CollectibleInfo } from '~/stores/CollectibleStore'
 import { WalletStore } from '~/stores/WalletStore'
 
-import FilledCheckBox from '~/components/helpers/FilledCheckBox'
+import { FilledCheckBox } from '~/components/helpers'
 
 export default function SendCollectible({
   collectibleInfo,
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index 5dbbea3..e12f944 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -36,11 +36,20 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   const [isAddingToken, setIsAddingToken] = useState(false)
   const [tokenDirectory, setTokenDirectory] = useState<string | undefined>()
 
+  const [isAddingTokenManually, setIsAddingTokenManually] = useState(false)
+
+  const [tokenList, setTokenList] = useState<any[] | undefined>(undefined)
+
   useEffect(() => {
-    if (selectedNetwork) {
-      setTokenDirectory(networks.find(n => n.chainId === selectedNetwork.chainId)?.blockExplorer?.rootUrl)
+    const fetchTokenList = async () => {
+      if (selectedNetwork) {
+        setTokenDirectory(networks.find(n => n.chainId === selectedNetwork.chainId)?.blockExplorer?.rootUrl)
+        setTokenList(await tokenStore.getDefaultTokenList(selectedNetwork.chainId))
+      }
     }
 
+    fetchTokenList()
+
     if (selectedNetwork && tokenAddress) {
       tokenStore.getTokenInfo(selectedNetwork.chainId, tokenAddress).then(tokenInfo => {
         setTokenInfo(tokenInfo)
@@ -87,7 +96,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
     <Box flexDirection="column">
       <Box flexDirection="column" padding="6" gap="6">
         <Text variant="large" fontWeight="bold" color="text80">
-          Import Token
+          Import Tokens
         </Text>
         <Box flexDirection="column">
           <Box flexDirection="row" style={{ paddingBottom: '5px' }}>
@@ -117,36 +126,69 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
 
           <Box flexDirection="column" gap="0.5">
             <Text variant="normal" fontWeight="medium" color="text80">
-              Token Address
+              Token
             </Text>
 
-            <Box flexDirection="row" gap="1" paddingBottom="0.5">
+            <Box
+              onClick={() => {}}
+              width="fit"
+              cursor="pointer"
+              paddingBottom="0.5"
+              opacity={{ base: '100', hover: '80' }}
+            >
               <Text variant="normal" fontWeight="medium" color="text50">
-                See addresses on network's
-              </Text>
-              <Text
-                variant="normal"
-                color="text50"
-                underline={!!tokenDirectory}
-                cursor={tokenDirectory ? 'pointer' : 'default'}
-                onClick={() => {
-                  if (tokenDirectory) {
-                    window.open(tokenDirectory)
-                  }
-                }}
-              >
-                directory
+                Import external token list
               </Text>
             </Box>
 
-            <TextInput
-              name="tokenAddress"
-              value={tokenAddress ?? ''}
-              onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-                setTokenAddress(ev.target.value)
-              }}
+            <Select
+              name="tokenList"
+              options={
+                tokenList?.slice(0, 20).map(token => {
+                  return {
+                    label: token.symbol,
+                    value: token.address
+                  }
+                }) ?? []
+              }
+              onValueChange={value => setTokenAddress(value)}
             />
           </Box>
+
+          {isAddingTokenManually && (
+            <Box flexDirection="column" gap="0.5">
+              <Text variant="normal" fontWeight="medium" color="text80">
+                Token Address
+              </Text>
+
+              <Box flexDirection="row" gap="1" paddingBottom="0.5">
+                <Text variant="normal" fontWeight="medium" color="text50">
+                  See addresses on network's
+                </Text>
+                <Text
+                  variant="normal"
+                  color="text50"
+                  underline={!!tokenDirectory}
+                  cursor={tokenDirectory ? 'pointer' : 'default'}
+                  onClick={() => {
+                    if (tokenDirectory) {
+                      window.open(tokenDirectory)
+                    }
+                  }}
+                >
+                  directory
+                </Text>
+              </Box>
+
+              <TextInput
+                name="tokenAddress"
+                value={tokenAddress ?? ''}
+                onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                  setTokenAddress(ev.target.value)
+                }}
+              />
+            </Box>
+          )}
         </Box>
 
         {isFetchingTokenInfo && (
@@ -171,8 +213,19 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
       </Box>
 
       <Divider marginY="0" />
-      <Box flexDirection="row" justifyContent="flex-end" padding="6" gap="2">
-        <Button label="Cancel" size="md" shape="square" onClick={onClose} />
+
+      <Box flexDirection="row" padding="6" gap="2">
+        {!isAddingTokenManually && (
+          <Button
+            label="Manual Import"
+            shape="square"
+            onClick={() => {
+              setIsAddingTokenManually(true)
+            }}
+          />
+        )}
+
+        <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
 
         <Button
           label="Add Token"
diff --git a/src/components/wallet/tokens/SendToken.tsx b/src/components/wallet/tokens/SendToken.tsx
index fd1278e..e2f7794 100644
--- a/src/components/wallet/tokens/SendToken.tsx
+++ b/src/components/wallet/tokens/SendToken.tsx
@@ -8,7 +8,7 @@ import { getNetworkTitle } from '~/utils/network'
 import { useStore } from '~/stores'
 import { WalletStore } from '~/stores/WalletStore'
 
-import FilledCheckBox from '~/components/helpers/FilledCheckBox'
+import { FilledCheckBox } from '~/components/helpers'
 
 export default function SendToken({
   tokenBalance,
diff --git a/src/components/wallet/tokens/TokenBalanceItem.tsx b/src/components/wallet/tokens/TokenBalanceItem.tsx
index 0842e91..fb9a21a 100644
--- a/src/components/wallet/tokens/TokenBalanceItem.tsx
+++ b/src/components/wallet/tokens/TokenBalanceItem.tsx
@@ -24,8 +24,6 @@ export default function TokenBalanceItem({
   const formattedBalance = ethers.formatUnits(tokenBalance.balance, tokenBalance.contractInfo?.decimals ?? 18)
   const truncatedBalance = truncateNumber(Number(formattedBalance), 5)
 
-  console.log(tokenBalance)
-
   return (
     <Card flexDirection="row" alignItems="center" gap="3">
       <ExternalIcon
diff --git a/src/components/wallet/tokens/TokenList.tsx b/src/components/wallet/tokens/TokenList.tsx
index 05eafdb..f782522 100644
--- a/src/components/wallet/tokens/TokenList.tsx
+++ b/src/components/wallet/tokens/TokenList.tsx
@@ -7,7 +7,7 @@ import { NetworkStore } from '~/stores/NetworkStore'
 import { TokenStore } from '~/stores/TokenStore'
 import { WalletStore } from '~/stores/WalletStore'
 
-import FilledCheckbox from '~/components/helpers/FilledCheckBox'
+import { FilledCheckBox } from '~/components/helpers'
 
 import CoinIcon from '~/assets/icons/coin.svg'
 
@@ -77,7 +77,7 @@ export default function TokenList({ onSendClick }: { onSendClick: (tokenBalance:
             gap="2"
             onClick={() => setFilterZeroBalances(!filterZeroBalances)}
           >
-            <FilledCheckbox checked={filterZeroBalances} size="md" />
+            <FilledCheckBox checked={filterZeroBalances} size="md" />
 
             <Text variant="small" color="text80">
               Filter zero balances
diff --git a/src/constants/network.ts b/src/constants/network.ts
index 8722ec7..bc24717 100644
--- a/src/constants/network.ts
+++ b/src/constants/network.ts
@@ -1,41 +1,41 @@
 // Picked from https://chainlist.org/
-export const DEFAULT_PUBLIC_RPC_LIST: Map<number, string> = new Map([
-  [1, 'https://ethereum-rpc.publicnode.com'],
-  [11155111, 'https://ethereum-sepolia-rpc.publicnode.com'],
-  [137, 'https://polygon-bor-rpc.publicnode.com'],
-  [80002, 'https://rpc-amoy.polygon.technology'],
-  [1101, 'https://zkevm-rpc.com'],
-  [56, 'https://bsc-rpc.publicnode.com'],
-  [97, 'https://bsc-testnet-rpc.publicnode.com'],
-  [10, 'https://optimism-rpc.publicnode.com'],
-  [11155420, 'https://sepolia.optimism.io'],
-  [42161, 'https://arb1.arbitrum.io/rpc'],
-  [421614, 'https://sepolia-rollup.arbitrum.io/rpc'],
-  [42170, 'https://arbitrum-nova.publicnode.com'],
-  [43114, 'https://avalanche-c-chain-rpc.publicnode.com'],
-  [43113, 'https://avalanche-fuji-c-chain-rpc.publicnode.com'],
-  [100, 'https://gnosis-pokt.nodies.app'],
-  [8453, 'https://mainnet.base.org'],
-  [84532, 'https://base-sepolia-rpc.publicnode.com'],
-  [19011, 'https://rpc.mainnet.oasys.homeverse.games'],
-  [40875, 'https://rpc.testnet.oasys.homeverse.games'],
-  [660279, 'https://xai-chain.net/rpc'],
-  [37714555429, 'https://testnet-v2.xai-chain.net/rpc'],
-  [3776, 'https://rpc.startale.com/astar-zkevm'],
-  [6038361, 'https://rpc.startale.com/zkyoto'],
-  [2730, 'https://xr-sepolia-testnet.rpc.caldera.xyz/http'],
-  [40, 'https://mainnet-asia.telos.net/evm'],
-  [1946, 'https://rpc.minato.soneium.org'],
-  [7668, 'https://root.rootnet.live/archive'],
-  [8333, 'https://mainnet-rpc.b3.fun'],
-  [13371, 'https://rpc.immutable.com'],
-  [33139, 'https://rpc.apechain.com'],
-  [81457, 'https://blast-rpc.publicnode.com'],
-  [33111, 'https://rpc.curtis.apechain.com'],
-  [1482601649, 'https://mainnet.skalenodes.com/v1/green-giddy-denebola'],
-  [37084624, 'https://testnet.skalenodes.com/v1/lanky-ill-funny-testnet'],
-  [13473, 'https://rpc.immutable.com'],
-  [7672, 'https://porcini.rootnet.app/archive']
+export const DEFAULT_PUBLIC_RPC_LIST: Map<number, [string | undefined, string]> = new Map([
+  [1, ['mainnet', 'https://ethereum-rpc.publicnode.com']],
+  [11155111, ['sepolia', 'https://ethereum-sepolia-rpc.publicnode.com']],
+  [137, ['polygon', 'https://polygon-bor-rpc.publicnode.com']],
+  [80002, [undefined, 'https://rpc-amoy.polygon.technology']],
+  [1101, ['polygon-zkevm', 'https://zkevm-rpc.com']],
+  [56, ['bnb', 'https://bsc-rpc.publicnode.com']],
+  [97, ['bnb-testnet', 'https://bsc-testnet-rpc.publicnode.com']],
+  [10, ['optimism', 'https://optimism-rpc.publicnode.com']],
+  [11155420, ['optimism-sepolia', 'https://sepolia.optimism.io']],
+  [42161, ['arbitrum', 'https://arb1.arbitrum.io/rpc']],
+  [421614, ['arbitrum-sepolia', 'https://sepolia-rollup.arbitrum.io/rpc']],
+  [42170, ['arbitrum-nova', 'https://arbitrum-nova.publicnode.com']],
+  [43114, ['avalanche', 'https://avalanche-c-chain-rpc.publicnode.com']],
+  [43113, ['avalanche-testnet', 'https://avalanche-fuji-c-chain-rpc.publicnode.com']],
+  [100, ['gnosis', 'https://gnosis-pokt.nodies.app']],
+  [8453, ['base', 'https://mainnet.base.org']],
+  [84532, ['base-sepolia', 'https://base-sepolia-rpc.publicnode.com']],
+  [19011, ['homeverse', 'https://rpc.mainnet.oasys.homeverse.games']],
+  [40875, ['homeverse-testnet', 'https://rpc.testnet.oasys.homeverse.games']],
+  [660279, [undefined, 'https://xai-chain.net/rpc']],
+  [37714555429, [undefined, 'https://testnet-v2.xai-chain.net/rpc']],
+  [3776, ['astar-zkevm', 'https://rpc.startale.com/astar-zkevm']],
+  [6038361, ['astar-zkyoto', 'https://rpc.startale.com/zkyoto']],
+  [2730, [undefined, 'https://xr-sepolia-testnet.rpc.caldera.xyz/http']],
+  [40, [undefined, 'https://mainnet-asia.telos.net/evm']],
+  [1946, [undefined, 'https://rpc.minato.soneium.org']],
+  [7668, [undefined, 'https://root.rootnet.live/archive']],
+  [8333, [undefined, 'https://mainnet-rpc.b3.fun']],
+  [13371, [undefined, 'https://rpc.immutable.com']],
+  [33139, [undefined, 'https://rpc.apechain.com']],
+  [81457, [undefined, 'https://blast-rpc.publicnode.com']],
+  [33111, [undefined, 'https://rpc.curtis.apechain.com']],
+  [1482601649, [undefined, 'https://mainnet.skalenodes.com/v1/green-giddy-denebola']],
+  [37084624, [undefined, 'https://testnet.skalenodes.com/v1/lanky-ill-funny-testnet']],
+  [13473, [undefined, 'https://rpc.immutable.com']],
+  [7672, [undefined, 'https://porcini.rootnet.app/archive']]
 ])
 
 // These are hardhat test networks
diff --git a/src/constants/storage.ts b/src/constants/storage.ts
index 8bf0363..677735e 100644
--- a/src/constants/storage.ts
+++ b/src/constants/storage.ts
@@ -12,5 +12,8 @@ export enum LocalStorageKey {
 }
 
 export enum IndexedDBKey {
-  SECURITY = 'security'
+  SECURITY = 'security',
+  ERC20 = 'erc20',
+  ERC721 = 'erc721',
+  ERC1155 = 'erc1155'
 }
diff --git a/src/routes/Recovery.tsx b/src/routes/Recovery.tsx
index f6cfe8c..17ed49d 100644
--- a/src/routes/Recovery.tsx
+++ b/src/routes/Recovery.tsx
@@ -27,7 +27,7 @@ import { AuthStore } from '~/stores/AuthStore'
 import { NetworkStore } from '~/stores/NetworkStore'
 import { WalletStore } from '~/stores/WalletStore'
 
-import FilledCheckBox from '~/components/helpers/FilledCheckBox'
+import { FilledCheckBox } from '~/components/helpers'
 import Networks from '~/components/network/Networks'
 import RecoveryHeader from '~/components/recovery/RecoveryHeader'
 import WalletList from '~/components/recovery/WalletList'
diff --git a/src/stores/CollectibleStore.ts b/src/stores/CollectibleStore.ts
index b0b0999..a151102 100644
--- a/src/stores/CollectibleStore.ts
+++ b/src/stores/CollectibleStore.ts
@@ -2,10 +2,12 @@ import { ContractType } from '@0xsequence/indexer'
 import { ethers } from 'ethers'
 
 import { IPFSGatewayHelper } from '~/utils/gateways'
+import { getIndexedDB } from '~/utils/indexeddb'
 import { subscribeImmediately } from '~/utils/observable'
 
 import { ERC721_ABI, ERC1155_ABI } from '~/constants/abi'
-import { LocalStorageKey } from '~/constants/storage'
+import { DEFAULT_PUBLIC_RPC_LIST } from '~/constants/network'
+import { IndexedDBKey, LocalStorageKey } from '~/constants/storage'
 
 import { Store, observable } from '.'
 import { AuthStore } from './AuthStore'
@@ -215,4 +217,46 @@ export class CollectibleStore {
     )
     this.userCollectibles.set(filteredBalances)
   }
+
+  async getDefaultERC721List(chainId: number) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC721)
+
+    const tokenList = await db.get(IndexedDBKey.ERC721, chainName)
+    if (!tokenList) {
+      const fetchedTokenList = await fetch(
+        `https://raw.githubusercontent.com/0xsequence/token-directory/master/index/${chainName}/erc721.json`
+      ).then(res => res.json())
+
+      await db.put(IndexedDBKey.ERC721, fetchedTokenList.tokens, chainName)
+      return fetchedTokenList.tokens
+    }
+
+    return tokenList
+  }
+
+  async getDefaultERC1155List(chainId: number) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC1155)
+
+    const tokenList = await db.get(IndexedDBKey.ERC1155, chainName)
+    if (!tokenList) {
+      const fetchedTokenList = await fetch(
+        `https://raw.githubusercontent.com/0xsequence/token-directory/master/index/${chainName}/erc1155.json`
+      ).then(res => res.json())
+
+      await db.put(IndexedDBKey.ERC1155, fetchedTokenList.tokens, chainName)
+      return fetchedTokenList.tokens
+    }
+
+    return tokenList
+  }
 }
diff --git a/src/stores/NetworkStore.ts b/src/stores/NetworkStore.ts
index 6b4091d..9ff6990 100644
--- a/src/stores/NetworkStore.ts
+++ b/src/stores/NetworkStore.ts
@@ -96,7 +96,7 @@ export class NetworkStore {
 
       const updatedNetworkConfig = value as NetworkConfig
 
-      const rpcForCurrent = DEFAULT_PUBLIC_RPC_LIST.get(Number(key))
+      const rpcForCurrent = DEFAULT_PUBLIC_RPC_LIST.get(Number(key))?.[1]
 
       const userEdit = userEdits?.find(network => network.chainId === updatedNetworkConfig.chainId)
 
diff --git a/src/stores/TokenStore.ts b/src/stores/TokenStore.ts
index 6140b55..348bd06 100644
--- a/src/stores/TokenStore.ts
+++ b/src/stores/TokenStore.ts
@@ -2,10 +2,13 @@ import { ContractType, TokenBalance } from '@0xsequence/indexer'
 import { NetworkConfig, NetworkType, getChainId } from '@0xsequence/network'
 import { ethers, isError } from 'ethers'
 
+import { getIndexedDB } from '~/utils/indexeddb'
 import { getNativeTokenInfo } from '~/utils/network'
 
 import { ERC20_ABI } from '~/constants/abi'
+import { DEFAULT_PUBLIC_RPC_LIST } from '~/constants/network'
 import { LocalStorageKey } from '~/constants/storage'
+import { IndexedDBKey } from '~/constants/storage'
 
 import { Store, observable } from '.'
 import { AuthStore } from './AuthStore'
@@ -264,6 +267,36 @@ export class TokenStore {
     }
   }
 
+  async getDefaultTokenList(chainId: number) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC20)
+
+    const tokenList = await db.get(IndexedDBKey.ERC20, chainName)
+    if (!tokenList) {
+      const fetchedTokenList = await fetch(
+        `https://raw.githubusercontent.com/0xsequence/token-directory/master/index/${chainName}/erc20.json`
+      ).then(res => res.json())
+
+      await db.put(IndexedDBKey.ERC20, fetchedTokenList.tokens, chainName)
+      return fetchedTokenList.tokens
+    }
+
+    return tokenList
+  }
+
+  // async getExternalTokenList(chainId: number) {
+  //   const rpc = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[1]
+  //   if (!rpc) {
+  //     return []
+  //   }
+  //   const provider = new ethers.JsonRpcProvider(rpc)
+  //   const erc20 = new ethers.Contract(address, ERC20_ABI, provider)
+  // }
+
   clear() {
     this.local.userAddedTokens.set([])
 
diff --git a/src/utils/indexeddb.ts b/src/utils/indexeddb.ts
index 53eb644..f97ed01 100644
--- a/src/utils/indexeddb.ts
+++ b/src/utils/indexeddb.ts
@@ -3,18 +3,55 @@ import * as idb from 'idb'
 import { IndexedDBKey } from '~/constants/storage'
 
 const DB_NAME = '@sequence-recovery'
-const DB_VERSION = 1
 
-export const getIndexedDB = async (objectStoreKey: IndexedDBKey) => {
-  // Open or create database
-  return idb.openDB(DB_NAME, DB_VERSION, {
-    upgrade: db => {
-      db.createObjectStore(objectStoreKey)
+export const getIndexedDB = async (objectStoreKey: IndexedDBKey): Promise<idb.IDBPDatabase<any>> => {
+  let db: idb.IDBPDatabase<any> | null = null
+  try {
+    // Open the database without specifying a version to get the current version
+    db = await idb.openDB(DB_NAME)
+    
+    if (db.objectStoreNames.contains(objectStoreKey)) {
+      // If the object store exists, return the db without closing it
+      return db
     }
-  })
-}
 
-export const clearIndexedDB = async (objectStoreKey: IndexedDBKey) => {
-  const db = await getIndexedDB(objectStoreKey)
-  await db.clear('security')
+    // If the object store does not exist, close the current connection
+    const currentVersion = db.version
+    db.close()
+
+    // Open the database with an incremented version to add the new object store
+    db = await idb.openDB(DB_NAME, currentVersion + 1, {
+      upgrade(upgradeDb) {
+        if (!upgradeDb.objectStoreNames.contains(objectStoreKey)) {
+          upgradeDb.createObjectStore(objectStoreKey)
+        }
+      },
+    })
+
+    return db
+  } catch (error) {
+    console.error('Error accessing IndexedDB:', error)
+    throw error
+  }
+  // Removed the finally block to prevent closing the db when it's returned
 }
+
+export const clearIndexedDB = async (objectStoreKey: IndexedDBKey): Promise<void> => {
+  let db: idb.IDBPDatabase<any> | null = null
+  try {
+    db = await getIndexedDB(objectStoreKey)
+    if (db.objectStoreNames.contains(objectStoreKey)) {
+      const tx = db.transaction(objectStoreKey, 'readwrite')
+      const store = tx.objectStore(objectStoreKey)
+      await store.clear()
+      await tx.done
+    }
+  } catch (error) {
+    console.error(`Failed to clear object store "${objectStoreKey}":`, error)
+    throw error
+  } finally {
+    if (db) {
+      db.close()
+    }
+  }
+}
\ No newline at end of file

From d9bf747b650d90c72995b200bbb7fd4f0ae058b1 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Mon, 9 Dec 2024 13:08:09 -0500
Subject: [PATCH 02/10] importing: added logos to network and tokens

---
 .../wallet/collectibles/ImportCollectible.tsx     |  7 ++++++-
 src/components/wallet/tokens/ImportToken.tsx      | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
index 3402b65..1ca1fea 100644
--- a/src/components/wallet/collectibles/ImportCollectible.tsx
+++ b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -83,7 +83,12 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   const selectOptions = mainnetNetworks
     .filter(network => !network.disabled)
     .map(network => ({
-      label: network.title,
+      label: (
+        <Box flexDirection="row" alignItems="center" gap="2">
+          <Image src={network.logoURI} maxWidth="8" maxHeight="8" />
+          <Text>{network.title}</Text>
+        </Box>
+      ),
       value: network.chainId.toString()
     }))
 
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index e12f944..021ff38 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   Card,
   Divider,
+  Image,
   Select,
   Spinner,
   Text,
@@ -62,7 +63,12 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   const selectOptions = mainnetNetworks
     .filter(network => !network.disabled)
     .map(network => ({
-      label: network.title,
+      label: (
+        <Box flexDirection="row" alignItems="center" gap="2">
+          <Image src={network.logoURI} maxWidth="8" maxHeight="8" />
+          <Text>{network.title}</Text>
+        </Box>
+      ),
       value: network.chainId.toString()
     }))
 
@@ -146,7 +152,12 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
               options={
                 tokenList?.slice(0, 20).map(token => {
                   return {
-                    label: token.symbol,
+                    label: (
+                      <Box flexDirection="row" alignItems="center" gap="2">
+                        <Image src={token.logoURI} maxHeight="8" maxWidth="8" />
+                        <Text>{token.symbol}</Text>
+                      </Box>
+                    ),
                     value: token.address
                   }
                 }) ?? []

From 786579766528782d53acea1a7911af4d89dc2bdb Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Mon, 9 Dec 2024 20:20:59 -0500
Subject: [PATCH 03/10] overhauled import token modal to support default token
 lists

---
 .../helpers/FilledRoundCheckBox.tsx           |   5 +-
 src/components/wallet/tokens/ImportToken.tsx  | 380 ++++++++++--------
 src/components/wallet/tokens/TokenList.tsx    |  11 +-
 3 files changed, 226 insertions(+), 170 deletions(-)

diff --git a/src/components/helpers/FilledRoundCheckBox.tsx b/src/components/helpers/FilledRoundCheckBox.tsx
index d9e6531..d519f91 100644
--- a/src/components/helpers/FilledRoundCheckBox.tsx
+++ b/src/components/helpers/FilledRoundCheckBox.tsx
@@ -1,11 +1,11 @@
-import { Box } from '@0xsequence/design-system'
+import { Box, BoxProps } from '@0xsequence/design-system'
 
 import CheckmarkBlack from '~/assets/icons/checkmark-black.svg'
 import EmptyRoundCheckBox from '~/assets/icons/round-checkbox.svg'
 
 export const ROUND_CHECKBOX_SIZE = 8
 
-export function FilledRoundCheckBox({ checked }: { checked: boolean }) {
+export function FilledRoundCheckBox({ checked, ...rest }: { checked: boolean } & BoxProps) {
   return (
     <Box
       width={`${ROUND_CHECKBOX_SIZE}`}
@@ -14,6 +14,7 @@ export function FilledRoundCheckBox({ checked }: { checked: boolean }) {
       alignItems="center"
       background={checked ? 'white' : 'transparent'}
       borderRadius="circle"
+      {...rest}
     >
       {checked ? (
         <img src={CheckmarkBlack} alt="Checkmark" style={{ width: '24px', height: '24px' }} />
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index 021ff38..343bc16 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -4,6 +4,7 @@ import {
   Card,
   Divider,
   Image,
+  SearchIcon,
   Select,
   Spinner,
   Text,
@@ -18,6 +19,8 @@ import { useObservable, useStore } from '~/stores'
 import { NetworkStore } from '~/stores/NetworkStore'
 import { TokenStore, UserAddedTokenInitialInfo } from '~/stores/TokenStore'
 
+import { FilledRoundCheckBox } from '~/components/helpers'
+
 export default function ImportToken({ onClose }: { onClose: () => void }) {
   const networkStore = useStore(NetworkStore)
   const networks = networkStore.networks.get()
@@ -29,36 +32,30 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
 
   const toast = useToast()
 
-  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig | undefined>()
-  const [tokenAddress, setTokenAddress] = useState<string | undefined>()
+  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>()
+  const [tokenManualAddress, setTokenManualAddress] = useState<string>('')
 
-  const [tokenInfo, setTokenInfo] = useState<UserAddedTokenInitialInfo | undefined>()
+  const [tokenInfo, setTokenInfo] = useState<UserAddedTokenInitialInfo>()
 
   const [isAddingToken, setIsAddingToken] = useState(false)
-  const [tokenDirectory, setTokenDirectory] = useState<string | undefined>()
 
   const [isAddingTokenManually, setIsAddingTokenManually] = useState(false)
 
-  const [tokenList, setTokenList] = useState<any[] | undefined>(undefined)
-
-  useEffect(() => {
-    const fetchTokenList = async () => {
-      if (selectedNetwork) {
-        setTokenDirectory(networks.find(n => n.chainId === selectedNetwork.chainId)?.blockExplorer?.rootUrl)
-        setTokenList(await tokenStore.getDefaultTokenList(selectedNetwork.chainId))
-      }
-    }
+  const [tokenList, setTokenList] = useState<any[]>([])
+  const [tokenListFilter, setTokenListFilter] = useState<string>('')
+  const [filteredTokenList, setFilteredTokenList] = useState<any[]>([])
 
-    fetchTokenList()
+  const [selectedTokens, setSelectedTokens] = useState<any[]>([])
 
-    if (selectedNetwork && tokenAddress) {
-      tokenStore.getTokenInfo(selectedNetwork.chainId, tokenAddress).then(tokenInfo => {
+  useEffect(() => {
+    if (tokenManualAddress) {
+      const fetchTokenInfo = async () => {
+        const tokenInfo = await tokenStore.getTokenInfo(selectedNetwork?.chainId ?? 1, tokenManualAddress)
         setTokenInfo(tokenInfo)
-      })
-    } else {
-      setTokenInfo(undefined)
+      }
+      fetchTokenInfo()
     }
-  }, [selectedNetwork, tokenAddress])
+  }, [selectedNetwork, tokenManualAddress])
 
   const selectOptions = mainnetNetworks
     .filter(network => !network.disabled)
@@ -72,181 +69,230 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
       value: network.chainId.toString()
     }))
 
+  useEffect(() => {
+    const fetchTokenList = async () => {
+      if (selectedNetwork) {
+        setTokenList(await tokenStore.getDefaultTokenList(selectedNetwork.chainId))
+      }
+    }
+
+    fetchTokenList()
+  }, [selectedNetwork])
+
+  useEffect(() => {
+    if (!tokenListFilter) return setFilteredTokenList(tokenList?.slice(0, 8))
+    setFilteredTokenList(
+      tokenList
+        ?.filter(token => token.symbol && token.symbol.toLowerCase().includes(tokenListFilter.toLowerCase()))
+        .slice(0, 8)
+    )
+  }, [tokenList, tokenListFilter])
+
+  useEffect(() => {
+    selectedTokens.map(async token => {
+      if (!token.info?.balance) {
+        const tokenInfo = await tokenStore.getTokenInfo(selectedNetwork?.chainId ?? 1, token.address)
+        token.info = tokenInfo
+      }
+    })
+  }, [selectedTokens])
+
+  const toggleSelectToken = async (tokenAddress: string) => {
+    const isSelected = selectedTokens.some(token => token.address === tokenAddress)
+    if (isSelected) {
+      setSelectedTokens(selectedTokens.filter(token => token.address !== tokenAddress))
+    } else {
+      setSelectedTokens([...selectedTokens, { address: tokenAddress, info: undefined }])
+    }
+  }
+
   const handleAdd = async () => {
-    if (selectedNetwork && tokenAddress && tokenInfo) {
-      setIsAddingToken(true)
-      await tokenStore.addToken({
-        chainId: selectedNetwork.chainId,
-        address: tokenAddress,
-        contractType: ContractType.ERC20,
-        symbol: tokenInfo.symbol,
-        decimals: tokenInfo.decimals
-      })
-      setIsAddingToken(false)
+    try {
+      if (selectedNetwork && ((tokenManualAddress && tokenInfo) || selectedTokens.length)) {
+        setIsAddingToken(true)
+
+        if (tokenManualAddress && tokenInfo && tokenInfo.symbol && tokenInfo.decimals) {
+          await tokenStore.addToken({
+            chainId: selectedNetwork.chainId,
+            address: tokenManualAddress,
+            contractType: ContractType.ERC20,
+            symbol: tokenInfo.symbol,
+            decimals: tokenInfo.decimals
+          })
+        } else if (selectedTokens.length > 0) {
+          selectedTokens.map(async token => {
+            await tokenStore.addToken({
+              chainId: selectedNetwork.chainId,
+              address: token.address,
+              contractType: ContractType.ERC20,
+              symbol: token.info.symbol,
+              decimals: token.info.decimals
+            })
+          })
+        } else {
+          throw new Error('Invalid token data')
+        }
+
+        setIsAddingToken(false)
+        toast({
+          variant: 'success',
+          title: `ERC20 token${selectedTokens.length + (tokenManualAddress ? 1 : 0) > 1 ? 's' : ''} added sucessfully`,
+          description:
+            "You'll be able to see this token on your browser as long as you don't clear your cache."
+        })
+        onClose()
+      }
+    } catch (err) {
+      console.error(err)
       toast({
-        variant: 'success',
-        title: 'ERC20 token added sucessfully',
-        description: "You'll be able to see this token on your browser as long as you don't clear your cache."
+        variant: 'error',
+        title: `One or more ERC20 tokens failed to add`,
+        description: 'Please try again.'
       })
-      resetInputs()
       onClose()
     }
   }
 
-  const resetInputs = () => {
-    setTokenAddress(undefined)
-    setSelectedNetwork(undefined)
-  }
-
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" height="full">
       <Box flexDirection="column" padding="6" gap="6">
-        <Text variant="large" fontWeight="bold" color="text80">
-          Import Tokens
-        </Text>
-        <Box flexDirection="column">
-          <Box flexDirection="row" style={{ paddingBottom: '5px' }}>
-            <Box>
-              <Text variant="normal" fontWeight="medium" color="text80" paddingY="2" paddingX="4">
-                ERC20 Token
-              </Text>
-
-              <Divider color="white" height="0.5" position="relative" marginY="0" style={{ top: '6px' }} />
-            </Box>
-          </Box>
-
-          <Divider marginY="0" />
+        <Box flexDirection="row" alignItems="center" gap="4">
+          <Text variant="large" fontWeight="bold" color="text80">
+            Import Tokens
+          </Text>
+
+          <Select
+            name="tokenNetwork"
+            placeholder="Select Network"
+            options={selectOptions}
+            onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
+          />
         </Box>
-        <Box flexDirection="column" gap="3">
-          <Box flexDirection="column" gap="1">
-            <Text variant="normal" fontWeight="medium" color="text80">
-              Token Network
-            </Text>
-
-            <Select
-              name="tokenNetwork"
-              options={selectOptions}
-              onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
-            />
-          </Box>
 
-          <Box flexDirection="column" gap="0.5">
-            <Text variant="normal" fontWeight="medium" color="text80">
-              Token
-            </Text>
-
-            <Box
-              onClick={() => {}}
-              width="fit"
-              cursor="pointer"
-              paddingBottom="0.5"
-              opacity={{ base: '100', hover: '80' }}
-            >
-              <Text variant="normal" fontWeight="medium" color="text50">
-                Import external token list
-              </Text>
-            </Box>
+        <TextInput
+          leftIcon={SearchIcon}
+          value={tokenListFilter}
+          onChange={(ev: ChangeEvent<HTMLInputElement>) => setTokenListFilter(ev.target.value)}
+        />
 
-            <Select
-              name="tokenList"
-              options={
-                tokenList?.slice(0, 20).map(token => {
-                  return {
-                    label: (
-                      <Box flexDirection="row" alignItems="center" gap="2">
-                        <Image src={token.logoURI} maxHeight="8" maxWidth="8" />
-                        <Text>{token.symbol}</Text>
-                      </Box>
-                    ),
-                    value: token.address
-                  }
-                }) ?? []
-              }
-              onValueChange={value => setTokenAddress(value)}
-            />
-          </Box>
+        <Box flexDirection="column">
+          {filteredTokenList?.map((token, i) => {
+            return (
+              <Box
+                key={i}
+                flexDirection="row"
+                alignItems="center"
+                background={{ base: 'backgroundPrimary', hover: 'backgroundSecondary' }}
+                onClick={() => {
+                  toggleSelectToken(token.address)
+                }}
+                borderRadius="sm"
+                padding="3"
+                gap="4"
+              >
+                <Image src={token.logoURI} maxHeight="10" maxWidth="10" />
+                <Text variant="normal" fontWeight="semibold" color="text80">
+                  {token.symbol}
+                </Text>
+                <Box flexDirection="row" alignItems="center" marginLeft="auto" gap="2">
+                  {selectedTokens?.filter(t => t.address.includes(token.address)).length > 0 && (
+                    <>
+                      <Text variant="normal" fontWeight="bold" color="text80">
+                        Balance:
+                      </Text>
+                      <Text variant="normal" fontWeight="bold" color="text80">
+                        {selectedTokens?.filter(t => t.address.includes(token.address))[0].info?.balance}
+                      </Text>
+                    </>
+                  )}
+                  <FilledRoundCheckBox
+                    checked={(selectedTokens?.filter(t => t.address.includes(token.address)).length || 0) > 0}
+                  />
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+      </Box>
 
+      <Box marginTop="auto">
+        <Box paddingX="6">
           {isAddingTokenManually && (
-            <Box flexDirection="column" gap="0.5">
+            <Box flexDirection="column" marginBottom="6" gap="0.5">
               <Text variant="normal" fontWeight="medium" color="text80">
                 Token Address
               </Text>
 
-              <Box flexDirection="row" gap="1" paddingBottom="0.5">
-                <Text variant="normal" fontWeight="medium" color="text50">
-                  See addresses on network's
-                </Text>
-                <Text
-                  variant="normal"
-                  color="text50"
-                  underline={!!tokenDirectory}
-                  cursor={tokenDirectory ? 'pointer' : 'default'}
-                  onClick={() => {
-                    if (tokenDirectory) {
-                      window.open(tokenDirectory)
-                    }
-                  }}
-                >
-                  directory
-                </Text>
-              </Box>
-
               <TextInput
                 name="tokenAddress"
-                value={tokenAddress ?? ''}
+                value={tokenManualAddress ?? ''}
                 onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-                  setTokenAddress(ev.target.value)
+                  setTokenManualAddress(ev.target.value)
                 }}
               />
             </Box>
           )}
+
+          {isFetchingTokenInfo ? (
+            <Box alignItems="center" marginBottom="6" justifyContent="center">
+              <Spinner size="lg" />
+            </Box>
+          ) : (
+            tokenInfo && (
+              <Card flexDirection="column" marginBottom="6" gap="2">
+                <Text variant="medium" fontWeight="bold" color="text80">
+                  {tokenInfo.symbol ?? ''}
+                </Text>
+                <Text variant="small" color="text80">
+                  Your Balance:
+                </Text>
+                <Text variant="medium" fontWeight="bold" color="text80">
+                  {tokenInfo.balance}
+                </Text>
+              </Card>
+            )
+          )}
         </Box>
 
-        {isFetchingTokenInfo && (
-          <Box alignItems="center" justifyContent="center">
-            <Spinner size="lg" />
+        <Divider marginY="0" />
+
+        <Box>
+          <Box flexDirection="row" padding="6" gap="2">
+            {isAddingTokenManually ? (
+              <Button
+                label="Hide"
+                shape="square"
+                disabled={!selectedNetwork}
+                onClick={() => {
+                  setIsAddingTokenManually(false)
+                  setTokenManualAddress('')
+                  setTokenInfo(undefined)
+                }}
+              />
+            ) : (
+              <Button
+                label="Manual Import"
+                shape="square"
+                disabled={!selectedNetwork}
+                onClick={() => {
+                  setIsAddingTokenManually(true)
+                }}
+              />
+            )}
+
+            <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
+
+            <Button
+              label="Add"
+              variant="primary"
+              shape="square"
+              disabled={(tokenInfo === undefined && !selectedTokens.length) || isAddingToken}
+              onClick={() => {
+                handleAdd()
+              }}
+            />
           </Box>
-        )}
-
-        {!isFetchingTokenInfo && tokenInfo && (
-          <Card flexDirection="column" gap="2">
-            <Text variant="medium" fontWeight="bold" color="text80">
-              {tokenInfo.symbol ?? ''}
-            </Text>
-            <Text variant="small" color="text80">
-              Your Balance:
-            </Text>
-            <Text variant="medium" fontWeight="bold" color="text80">
-              {tokenInfo.balance}
-            </Text>
-          </Card>
-        )}
-      </Box>
-
-      <Divider marginY="0" />
-
-      <Box flexDirection="row" padding="6" gap="2">
-        {!isAddingTokenManually && (
-          <Button
-            label="Manual Import"
-            shape="square"
-            onClick={() => {
-              setIsAddingTokenManually(true)
-            }}
-          />
-        )}
-
-        <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
-
-        <Button
-          label="Add Token"
-          variant="primary"
-          shape="square"
-          disabled={tokenInfo === undefined || isAddingToken}
-          onClick={() => {
-            handleAdd()
-          }}
-        />
+        </Box>
       </Box>
     </Box>
   )
diff --git a/src/components/wallet/tokens/TokenList.tsx b/src/components/wallet/tokens/TokenList.tsx
index f782522..06370fd 100644
--- a/src/components/wallet/tokens/TokenList.tsx
+++ b/src/components/wallet/tokens/TokenList.tsx
@@ -127,7 +127,16 @@ export default function TokenList({ onSendClick }: { onSendClick: (tokenBalance:
       </Box>
 
       {isImportTokenViewOpen && (
-        <Modal size="sm" onClose={() => setIsImportTokenViewOpen(false)}>
+        <Modal
+          size="lg"
+          onClose={() => setIsImportTokenViewOpen(false)}
+          contentProps={{
+            style: {
+              scrollbarColor: 'gray black',
+              scrollbarWidth: 'thin'
+            }
+          }}
+        >
           <ImportToken onClose={() => setIsImportTokenViewOpen(false)} />
         </Modal>
       )}

From 3492ec535fa96fb93fc9f122a4ad2c990aa3e143 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Tue, 10 Dec 2024 11:28:38 -0500
Subject: [PATCH 04/10] refactored project structure

---
 .../MobileDrawerContent.tsx                   | 64 +++++++++----------
 .../{recovery => header}/RecoveryHeader.tsx   |  2 +-
 .../{wallet => header}/WalletDropdownMenu.tsx |  2 +-
 .../{recovery => header}/styles.css.ts        |  4 +-
 src/components/wallet/PendingIndicator.tsx    |  2 +-
 src/components/{ => wallet}/PendingTxn.tsx    |  2 +-
 .../wallet/{ => dapps}/DappList.tsx           |  0
 .../{ => externalprovider}/ExternalWallet.tsx |  2 +-
 .../externalprovider}/SelectProvider.tsx      |  0
 src/components/wallet/tokens/ImportToken.tsx  | 12 ++--
 src/routes/Recovery.tsx                       |  2 +-
 src/routes/Wallet.tsx                         |  8 +--
 src/stores/WalletStore.ts                     |  2 +-
 src/utils/indexeddb.ts                        |  6 +-
 14 files changed, 56 insertions(+), 52 deletions(-)
 rename src/components/{recovery => header}/MobileDrawerContent.tsx (57%)
 rename src/components/{recovery => header}/RecoveryHeader.tsx (98%)
 rename src/components/{wallet => header}/WalletDropdownMenu.tsx (97%)
 rename src/components/{recovery => header}/styles.css.ts (89%)
 rename src/components/{ => wallet}/PendingTxn.tsx (95%)
 rename src/components/wallet/{ => dapps}/DappList.tsx (100%)
 rename src/components/wallet/{ => externalprovider}/ExternalWallet.tsx (98%)
 rename src/components/{ => wallet/externalprovider}/SelectProvider.tsx (100%)

diff --git a/src/components/recovery/MobileDrawerContent.tsx b/src/components/header/MobileDrawerContent.tsx
similarity index 57%
rename from src/components/recovery/MobileDrawerContent.tsx
rename to src/components/header/MobileDrawerContent.tsx
index f38b69e..b3bce31 100644
--- a/src/components/recovery/MobileDrawerContent.tsx
+++ b/src/components/header/MobileDrawerContent.tsx
@@ -1,4 +1,4 @@
-import { Box,  Image, Text } from '@0xsequence/design-system'
+import { Box, Image, Text } from '@0xsequence/design-system'
 import { motion } from 'framer-motion'
 
 import { useStore } from '~/stores'
@@ -57,38 +57,38 @@ export const MobileDrawerContent = () => {
         borderLeftColor="backgroundBackdrop"
         style={{ width: '75%' }}
       >
-          <Box
-            // flexDirection="row"
-            // alignItems="center"
-            // background="buttonGlass"
-            // borderRadius="sm"
-            gap="2"
-            // style={{ cursor: 'pointer', padding: '8px 16px 8px 8px' }}
-            onClick={() => window.open('https://docs.sequence.xyz/')}
-          >
-            <Image src={externalArrowIcon} height="5" />
-            <Text variant="normal" fontWeight="bold" color="text50">
-              Docs
-            </Text>
-          </Box>
+        <Box
+          // flexDirection="row"
+          // alignItems="center"
+          // background="buttonGlass"
+          // borderRadius="sm"
+          gap="2"
+          // style={{ cursor: 'pointer', padding: '8px 16px 8px 8px' }}
+          onClick={() => window.open('https://docs.sequence.xyz/')}
+        >
+          <Image src={externalArrowIcon} height="5" />
+          <Text variant="normal" fontWeight="bold" color="text50">
+            Docs
+          </Text>
+        </Box>
 
-          <Box
-            // flexDirection="row"
-            // alignItems="center"
-            // background="buttonGlass"
-            // borderRadius="sm"
-            gap="2"
-            // style={{ cursor: 'pointer', padding: '8px 16px 8px 8px' }}
-            onClick={() => {
-              openNetworkModal()
-              toggleNavDrawer(false)
-            }}
-          >
-            <Image src={networkIcon} height="5" />
-            <Text variant="normal" fontWeight="bold" color="text50">
-              Networks
-            </Text>
-          </Box>
+        <Box
+          // flexDirection="row"
+          // alignItems="center"
+          // background="buttonGlass"
+          // borderRadius="sm"
+          gap="2"
+          // style={{ cursor: 'pointer', padding: '8px 16px 8px 8px' }}
+          onClick={() => {
+            openNetworkModal()
+            toggleNavDrawer(false)
+          }}
+        >
+          <Image src={networkIcon} height="5" />
+          <Text variant="normal" fontWeight="bold" color="text50">
+            Networks
+          </Text>
+        </Box>
       </Box>
     </Box>
   )
diff --git a/src/components/recovery/RecoveryHeader.tsx b/src/components/header/RecoveryHeader.tsx
similarity index 98%
rename from src/components/recovery/RecoveryHeader.tsx
rename to src/components/header/RecoveryHeader.tsx
index 183b8ca..53f8543 100644
--- a/src/components/recovery/RecoveryHeader.tsx
+++ b/src/components/header/RecoveryHeader.tsx
@@ -5,7 +5,7 @@ import { useObservable, useStore } from '~/stores'
 import { AuthStore } from '~/stores/AuthStore'
 import { WalletStore } from '~/stores/WalletStore'
 
-import SettingsDropdownMenu from '~/components/wallet/WalletDropdownMenu'
+import SettingsDropdownMenu from '~/components/header/WalletDropdownMenu'
 
 import networkIcon from '~/assets/icons/chain.svg'
 import externalArrowIcon from '~/assets/icons/external-link-arrow.svg'
diff --git a/src/components/wallet/WalletDropdownMenu.tsx b/src/components/header/WalletDropdownMenu.tsx
similarity index 97%
rename from src/components/wallet/WalletDropdownMenu.tsx
rename to src/components/header/WalletDropdownMenu.tsx
index 77b0f12..c7b8128 100644
--- a/src/components/wallet/WalletDropdownMenu.tsx
+++ b/src/components/header/WalletDropdownMenu.tsx
@@ -18,7 +18,7 @@ import { truncateMiddle } from '~/utils/truncatemiddle'
 import { useObservable, useStore } from '~/stores'
 import { AuthStore } from '~/stores/AuthStore'
 
-import ConfirmSignOut from './ConfirmSignOut'
+import ConfirmSignOut from '~/components/wallet/ConfirmSignOut'
 
 export default function SettingsDropdownMenu() {
   const authStore = useStore(AuthStore)
diff --git a/src/components/recovery/styles.css.ts b/src/components/header/styles.css.ts
similarity index 89%
rename from src/components/recovery/styles.css.ts
rename to src/components/header/styles.css.ts
index b920224..eea082e 100644
--- a/src/components/recovery/styles.css.ts
+++ b/src/components/header/styles.css.ts
@@ -7,6 +7,6 @@ export const navDrawer = style([
     left: '0',
 
     width: 'vw',
-    height: 'vh',
-  }),
+    height: 'vh'
+  })
 ])
diff --git a/src/components/wallet/PendingIndicator.tsx b/src/components/wallet/PendingIndicator.tsx
index 8473441..9692ad4 100644
--- a/src/components/wallet/PendingIndicator.tsx
+++ b/src/components/wallet/PendingIndicator.tsx
@@ -4,7 +4,7 @@ import { useObservable } from 'micro-observables'
 import { useStore } from '~/stores'
 import { WalletStore } from '~/stores/WalletStore'
 
-import PendingTxn from '~/components/PendingTxn'
+import PendingTxn from '~/components/wallet/PendingTxn'
 
 export default function PendingIndicator({ ...rest }: BoxProps) {
   const walletStore = useStore(WalletStore)
diff --git a/src/components/PendingTxn.tsx b/src/components/wallet/PendingTxn.tsx
similarity index 95%
rename from src/components/PendingTxn.tsx
rename to src/components/wallet/PendingTxn.tsx
index 3199e45..7daed7b 100644
--- a/src/components/PendingTxn.tsx
+++ b/src/components/wallet/PendingTxn.tsx
@@ -1,6 +1,6 @@
 import { Box, Spinner, Text } from '@0xsequence/design-system'
 
-import NetworkTag from './network/NetworkTag'
+import NetworkTag from '~/components/network/NetworkTag'
 
 export default function PendingTxn({
   symbol,
diff --git a/src/components/wallet/DappList.tsx b/src/components/wallet/dapps/DappList.tsx
similarity index 100%
rename from src/components/wallet/DappList.tsx
rename to src/components/wallet/dapps/DappList.tsx
diff --git a/src/components/wallet/ExternalWallet.tsx b/src/components/wallet/externalprovider/ExternalWallet.tsx
similarity index 98%
rename from src/components/wallet/ExternalWallet.tsx
rename to src/components/wallet/externalprovider/ExternalWallet.tsx
index 562720e..0a32c4f 100644
--- a/src/components/wallet/ExternalWallet.tsx
+++ b/src/components/wallet/externalprovider/ExternalWallet.tsx
@@ -19,7 +19,7 @@ import { useEffect, useState } from 'react'
 import { useStore } from '~/stores'
 import { WalletStore } from '~/stores/WalletStore'
 
-import SelectProvider from '~/components/SelectProvider'
+import SelectProvider from '~/components/wallet/externalprovider/SelectProvider'
 import { ButtonWithIcon } from '~/components/helpers/ButtonWithIcon'
 import { ExternalIcon } from '~/components/helpers/ExternalIcon'
 
diff --git a/src/components/SelectProvider.tsx b/src/components/wallet/externalprovider/SelectProvider.tsx
similarity index 100%
rename from src/components/SelectProvider.tsx
rename to src/components/wallet/externalprovider/SelectProvider.tsx
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index 343bc16..ced6696 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -200,9 +200,13 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
                       <Text variant="normal" fontWeight="bold" color="text80">
                         Balance:
                       </Text>
-                      <Text variant="normal" fontWeight="bold" color="text80">
-                        {selectedTokens?.filter(t => t.address.includes(token.address))[0].info?.balance}
-                      </Text>
+                      {selectedTokens?.filter(t => t.address.includes(token.address))[0].info?.balance ? (
+                        <Text variant="normal" fontWeight="bold" color="text80">
+                          {selectedTokens?.filter(t => t.address.includes(token.address))[0].info?.balance}
+                        </Text>
+                      ) : (
+                        <Spinner size="md" marginRight="1" />
+                      )}
                     </>
                   )}
                   <FilledRoundCheckBox
@@ -233,7 +237,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
             </Box>
           )}
 
-          {isFetchingTokenInfo ? (
+          {isFetchingTokenInfo && tokenManualAddress ? (
             <Box alignItems="center" marginBottom="6" justifyContent="center">
               <Spinner size="lg" />
             </Box>
diff --git a/src/routes/Recovery.tsx b/src/routes/Recovery.tsx
index 17ed49d..6a19510 100644
--- a/src/routes/Recovery.tsx
+++ b/src/routes/Recovery.tsx
@@ -27,9 +27,9 @@ import { AuthStore } from '~/stores/AuthStore'
 import { NetworkStore } from '~/stores/NetworkStore'
 import { WalletStore } from '~/stores/WalletStore'
 
+import RecoveryHeader from '~/components/header/RecoveryHeader'
 import { FilledCheckBox } from '~/components/helpers'
 import Networks from '~/components/network/Networks'
-import RecoveryHeader from '~/components/recovery/RecoveryHeader'
 import WalletList from '~/components/recovery/WalletList'
 
 import { WALLET_WIDTH } from './Wallet'
diff --git a/src/routes/Wallet.tsx b/src/routes/Wallet.tsx
index 32e9ff2..da74198 100644
--- a/src/routes/Wallet.tsx
+++ b/src/routes/Wallet.tsx
@@ -18,12 +18,12 @@ import { TokenStore } from '~/stores/TokenStore'
 import { WalletConnectSignClientStore } from '~/stores/WalletConnectSignClientStore'
 import { WalletStore } from '~/stores/WalletStore'
 
+import RecoveryHeader from '~/components/header/RecoveryHeader'
 import Networks from '~/components/network/Networks'
-import RecoveryHeader from '~/components/recovery/RecoveryHeader'
 import SignClientTransactionConfirm from '~/components/signing/SignClientTransactionConfirm'
 import SignClientTransactionRelay from '~/components/signing/SignClientTransactionRelay'
-import DappList from '~/components/wallet/DappList'
-import ExternalWallet from '~/components/wallet/ExternalWallet'
+import DappList from '~/components/wallet/dapps/DappList'
+import ExternalWallet from '~/components/wallet/externalprovider/ExternalWallet'
 import PendingIndicator from '~/components/wallet/PendingIndicator'
 import CollectibleList from '~/components/wallet/collectibles/CollectibleList'
 import SendCollectible from '~/components/wallet/collectibles/SendCollectible'
@@ -307,7 +307,7 @@ function Wallet() {
     <Box>
       <RecoveryHeader />
 
-      <Box flexDirection="column" alignItems="center" >
+      <Box flexDirection="column" alignItems="center">
         <Box
           flexDirection="column"
           padding="5"
diff --git a/src/stores/WalletStore.ts b/src/stores/WalletStore.ts
index bef4f45..dada8e6 100644
--- a/src/stores/WalletStore.ts
+++ b/src/stores/WalletStore.ts
@@ -21,7 +21,7 @@ import { EIP1193Provider } from '~/hooks/useSyncProviders'
 
 import { observable, useStore } from '~/stores'
 
-import { ProviderDetail, ProviderInfo } from '~/components/SelectProvider'
+import { ProviderDetail, ProviderInfo } from '~/components/wallet/externalprovider/SelectProvider'
 
 import { Store } from '.'
 import { AuthStore } from './AuthStore'
diff --git a/src/utils/indexeddb.ts b/src/utils/indexeddb.ts
index f97ed01..7d7146d 100644
--- a/src/utils/indexeddb.ts
+++ b/src/utils/indexeddb.ts
@@ -9,7 +9,7 @@ export const getIndexedDB = async (objectStoreKey: IndexedDBKey): Promise<idb.ID
   try {
     // Open the database without specifying a version to get the current version
     db = await idb.openDB(DB_NAME)
-    
+
     if (db.objectStoreNames.contains(objectStoreKey)) {
       // If the object store exists, return the db without closing it
       return db
@@ -25,7 +25,7 @@ export const getIndexedDB = async (objectStoreKey: IndexedDBKey): Promise<idb.ID
         if (!upgradeDb.objectStoreNames.contains(objectStoreKey)) {
           upgradeDb.createObjectStore(objectStoreKey)
         }
-      },
+      }
     })
 
     return db
@@ -54,4 +54,4 @@ export const clearIndexedDB = async (objectStoreKey: IndexedDBKey): Promise<void
       db.close()
     }
   }
-}
\ No newline at end of file
+}

From f501c1e5c89c29cf0c897ea4e6c446ff9612b8b8 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Tue, 10 Dec 2024 13:17:55 -0500
Subject: [PATCH 05/10] added importing of custom token lists with a set format

---
 .../wallet/tokens/AddCustomTokenList.tsx      |  5 ++
 src/components/wallet/tokens/ImportToken.tsx  | 83 +++++++++++++++++--
 src/stores/TokenStore.ts                      | 17 ++--
 3 files changed, 89 insertions(+), 16 deletions(-)
 create mode 100644 src/components/wallet/tokens/AddCustomTokenList.tsx

diff --git a/src/components/wallet/tokens/AddCustomTokenList.tsx b/src/components/wallet/tokens/AddCustomTokenList.tsx
new file mode 100644
index 0000000..c2a0754
--- /dev/null
+++ b/src/components/wallet/tokens/AddCustomTokenList.tsx
@@ -0,0 +1,5 @@
+import { Button } from '@0xsequence/design-system'
+
+export default function AddCustomTokenList() {
+  return <Button />
+}
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index ced6696..a55e4e2 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -13,7 +13,7 @@ import {
 } from '@0xsequence/design-system'
 import { ContractType } from '@0xsequence/indexer'
 import { NetworkConfig, NetworkType } from '@0xsequence/network'
-import { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, useEffect, useRef, useState } from 'react'
 
 import { useObservable, useStore } from '~/stores'
 import { NetworkStore } from '~/stores/NetworkStore'
@@ -47,11 +47,15 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
 
   const [selectedTokens, setSelectedTokens] = useState<any[]>([])
 
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
   useEffect(() => {
     if (tokenManualAddress) {
       const fetchTokenInfo = async () => {
-        const tokenInfo = await tokenStore.getTokenInfo(selectedNetwork?.chainId ?? 1, tokenManualAddress)
-        setTokenInfo(tokenInfo)
+        if (selectedNetwork) {
+          const tokenInfo = await tokenStore.getTokenInfo(selectedNetwork.chainId, tokenManualAddress)
+          setTokenInfo(tokenInfo)
+        }
       }
       fetchTokenInfo()
     }
@@ -80,7 +84,10 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   }, [selectedNetwork])
 
   useEffect(() => {
-    if (!tokenListFilter) return setFilteredTokenList(tokenList?.slice(0, 8))
+    if (!tokenListFilter)
+      return setFilteredTokenList(
+        tokenList?.slice(0, 8)
+      )
     setFilteredTokenList(
       tokenList
         ?.filter(token => token.symbol && token.symbol.toLowerCase().includes(tokenListFilter.toLowerCase()))
@@ -90,8 +97,8 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
 
   useEffect(() => {
     selectedTokens.map(async token => {
-      if (!token.info?.balance) {
-        const tokenInfo = await tokenStore.getTokenInfo(selectedNetwork?.chainId ?? 1, token.address)
+      if (!token.info?.balance && selectedNetwork) {
+        const tokenInfo = await tokenStore.getTokenInfo(selectedNetwork.chainId, token.address)
         token.info = tokenInfo
       }
     })
@@ -136,7 +143,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
         setIsAddingToken(false)
         toast({
           variant: 'success',
-          title: `ERC20 token${selectedTokens.length + (tokenManualAddress ? 1 : 0) > 1 ? 's' : ''} added sucessfully`,
+          title: `ERC20 token${selectedTokens.length + (tokenManualAddress ? 1 : 0) > 1 ? 's' : ''} added successfully`,
           description:
             "You'll be able to see this token on your browser as long as you don't clear your cache."
         })
@@ -153,9 +160,52 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
     }
   }
 
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      try {
+        const text = await file.text()
+        const tokenList = JSON.parse(text)
+
+        console.log(tokenList)
+
+        if (Array.isArray(tokenList)) {
+          tokenList.map(token => {
+            if (!token.address || !token.symbol) {
+              throw new Error('Invalid token list')
+            }
+          })
+
+          if (selectedNetwork) {
+            await tokenStore.addExternalTokenList(selectedNetwork.chainId, tokenList)
+          }
+
+          toast({
+            variant: 'success',
+            title: `Custom token list imported successfully`
+          })
+          onClose()
+        } else {
+          throw new Error('Invalid file format')
+        }
+      } catch (error) {
+        console.error(error)
+        toast({
+          variant: 'error',
+          title: 'Failed to import token list',
+          description: 'Please ensure the file format is correct.'
+        })
+      }
+    }
+  }
+
+  const handleImportCustomTokenList = () => {
+    fileInputRef.current?.click()
+  }
+
   return (
     <Box flexDirection="column" height="full">
-      <Box flexDirection="column" padding="6" gap="6">
+      <Box flexDirection="column" height="full" padding="6" gap="6">
         <Box flexDirection="row" alignItems="center" gap="4">
           <Text variant="large" fontWeight="bold" color="text80">
             Import Tokens
@@ -217,6 +267,23 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
             )
           })}
         </Box>
+
+        {selectedNetwork && (
+          <Button
+            label={`Import custom token list for ${' ' + selectedNetwork?.title}`}
+            shape="square"
+            marginTop="auto"
+            onClick={handleImportCustomTokenList}
+          />
+        )}
+
+        <input
+          type="file"
+          accept=".json"
+          style={{ display: 'none' }}
+          ref={fileInputRef}
+          onChange={handleFileChange}
+        />
       </Box>
 
       <Box marginTop="auto">
diff --git a/src/stores/TokenStore.ts b/src/stores/TokenStore.ts
index 348bd06..26ca273 100644
--- a/src/stores/TokenStore.ts
+++ b/src/stores/TokenStore.ts
@@ -288,14 +288,15 @@ export class TokenStore {
     return tokenList
   }
 
-  // async getExternalTokenList(chainId: number) {
-  //   const rpc = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[1]
-  //   if (!rpc) {
-  //     return []
-  //   }
-  //   const provider = new ethers.JsonRpcProvider(rpc)
-  //   const erc20 = new ethers.Contract(address, ERC20_ABI, provider)
-  // }
+  async addExternalTokenList(chainId: number, tokenList: any[]) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC20)
+    await db.put(IndexedDBKey.ERC20, tokenList, chainName)
+  }
 
   clear() {
     this.local.userAddedTokens.set([])

From 09548f7ec6c2e2e1a98286e4b68d93e8fb0b8c1f Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Wed, 11 Dec 2024 12:52:37 -0500
Subject: [PATCH 06/10] WIP for adding collection list

---
 src/components/helpers/index.tsx              |   6 -
 .../{helpers => misc}/ButtonWithIcon.tsx      |   0
 .../{helpers => misc}/ExternalIcon.tsx        |   0
 .../{helpers => misc}/FilledCheckBox.tsx      |   0
 .../{helpers => misc}/FilledRoundCheckBox.tsx |   0
 src/components/misc/index.tsx                 |   6 +
 src/components/network/NetworkItem.tsx        |   2 +-
 src/components/recovery/WalletList.tsx        |   2 +-
 src/components/signing/ConnectionList.tsx     |   4 +-
 .../collectibles/CollectibleBalanceItem.tsx   |   4 +-
 .../wallet/collectibles/CollectibleList.tsx   |   2 +-
 .../wallet/collectibles/ImportCollectible.tsx | 698 +++++++++++++-----
 .../wallet/collectibles/SendCollectible.tsx   |   2 +-
 .../externalprovider/ExternalWallet.tsx       |   4 +-
 src/components/wallet/tokens/ImportToken.tsx  |  43 +-
 src/components/wallet/tokens/SendToken.tsx    |   2 +-
 .../wallet/tokens/TokenBalanceItem.tsx        |   4 +-
 src/components/wallet/tokens/TokenList.tsx    |   3 +-
 src/routes/Recovery.tsx                       |   2 +-
 src/stores/CollectibleStore.ts                |  20 +
 20 files changed, 560 insertions(+), 244 deletions(-)
 delete mode 100644 src/components/helpers/index.tsx
 rename src/components/{helpers => misc}/ButtonWithIcon.tsx (100%)
 rename src/components/{helpers => misc}/ExternalIcon.tsx (100%)
 rename src/components/{helpers => misc}/FilledCheckBox.tsx (100%)
 rename src/components/{helpers => misc}/FilledRoundCheckBox.tsx (100%)
 create mode 100644 src/components/misc/index.tsx

diff --git a/src/components/helpers/index.tsx b/src/components/helpers/index.tsx
deleted file mode 100644
index 5072296..0000000
--- a/src/components/helpers/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { FilledCheckBox } from '~/components/helpers/FilledCheckBox'
-import { FilledRoundCheckBox, ROUND_CHECKBOX_SIZE } from '~/components/helpers/FilledRoundCheckBox'
-import { ButtonWithIcon } from '~/components/helpers/ButtonWithIcon'
-import { ExternalIcon } from '~/components/helpers/ExternalIcon'
-
-export { FilledCheckBox, FilledRoundCheckBox, ROUND_CHECKBOX_SIZE, ButtonWithIcon, ExternalIcon }
\ No newline at end of file
diff --git a/src/components/helpers/ButtonWithIcon.tsx b/src/components/misc/ButtonWithIcon.tsx
similarity index 100%
rename from src/components/helpers/ButtonWithIcon.tsx
rename to src/components/misc/ButtonWithIcon.tsx
diff --git a/src/components/helpers/ExternalIcon.tsx b/src/components/misc/ExternalIcon.tsx
similarity index 100%
rename from src/components/helpers/ExternalIcon.tsx
rename to src/components/misc/ExternalIcon.tsx
diff --git a/src/components/helpers/FilledCheckBox.tsx b/src/components/misc/FilledCheckBox.tsx
similarity index 100%
rename from src/components/helpers/FilledCheckBox.tsx
rename to src/components/misc/FilledCheckBox.tsx
diff --git a/src/components/helpers/FilledRoundCheckBox.tsx b/src/components/misc/FilledRoundCheckBox.tsx
similarity index 100%
rename from src/components/helpers/FilledRoundCheckBox.tsx
rename to src/components/misc/FilledRoundCheckBox.tsx
diff --git a/src/components/misc/index.tsx b/src/components/misc/index.tsx
new file mode 100644
index 0000000..1b18c49
--- /dev/null
+++ b/src/components/misc/index.tsx
@@ -0,0 +1,6 @@
+import { FilledCheckBox } from '~/components/misc/FilledCheckBox'
+import { FilledRoundCheckBox, ROUND_CHECKBOX_SIZE } from '~/components/misc/FilledRoundCheckBox'
+import { ButtonWithIcon } from '~/components/misc/ButtonWithIcon'
+import { ExternalIcon } from '~/components/misc/ExternalIcon'
+
+export { FilledCheckBox, FilledRoundCheckBox, ROUND_CHECKBOX_SIZE, ButtonWithIcon, ExternalIcon }
\ No newline at end of file
diff --git a/src/components/network/NetworkItem.tsx b/src/components/network/NetworkItem.tsx
index da4f239..cfcfebf 100644
--- a/src/components/network/NetworkItem.tsx
+++ b/src/components/network/NetworkItem.tsx
@@ -13,7 +13,7 @@ import { ChangeEvent, useEffect, useState } from 'react'
 import { useObservable, useStore } from '~/stores'
 import { NetworkStore, createDebugLocalRelayer } from '~/stores/NetworkStore'
 
-import { FilledCheckBox } from '~/components/helpers'
+import { FilledCheckBox } from '~/components/misc'
 
 export default function NetworkItem({ network }: { network: NetworkConfig }) {
   const networkStore = useStore(NetworkStore)
diff --git a/src/components/recovery/WalletList.tsx b/src/components/recovery/WalletList.tsx
index 6fed155..c02b894 100644
--- a/src/components/recovery/WalletList.tsx
+++ b/src/components/recovery/WalletList.tsx
@@ -1,7 +1,7 @@
 import { Box, Text, truncateAddress } from '@0xsequence/design-system'
 import { useState } from 'react'
 
-import { FilledRoundCheckBox, ROUND_CHECKBOX_SIZE } from '~/components/helpers'
+import { FilledRoundCheckBox, ROUND_CHECKBOX_SIZE } from '~/components/misc'
 
 export default function WalletList({
   possibleWallets,
diff --git a/src/components/signing/ConnectionList.tsx b/src/components/signing/ConnectionList.tsx
index 6239497..f1f646f 100644
--- a/src/components/signing/ConnectionList.tsx
+++ b/src/components/signing/ConnectionList.tsx
@@ -4,8 +4,8 @@ import { SessionTypes } from '@walletconnect/types'
 import { useStore } from '~/stores'
 import { WalletConnectSignClientStore } from '~/stores/WalletConnectSignClientStore'
 
-import { ButtonWithIcon } from '~/components/helpers/ButtonWithIcon'
-import { ExternalIcon } from '~/components/helpers/ExternalIcon'
+import { ButtonWithIcon } from '~/components/misc/ButtonWithIcon'
+import { ExternalIcon } from '~/components/misc/ExternalIcon'
 
 export default function ConnectionList({ sessionList }: { sessionList: SessionTypes.Struct[] }) {
   const walletConnectSignClientStore = useStore(WalletConnectSignClientStore)
diff --git a/src/components/wallet/collectibles/CollectibleBalanceItem.tsx b/src/components/wallet/collectibles/CollectibleBalanceItem.tsx
index 814b206..812eccb 100644
--- a/src/components/wallet/collectibles/CollectibleBalanceItem.tsx
+++ b/src/components/wallet/collectibles/CollectibleBalanceItem.tsx
@@ -3,8 +3,8 @@ import { BigNumberish, ethers } from 'ethers'
 
 import { CollectibleInfo } from '~/stores/CollectibleStore'
 
-import { ButtonWithIcon } from '~/components/helpers/ButtonWithIcon'
-import { ExternalIcon } from '~/components/helpers/ExternalIcon'
+import { ButtonWithIcon } from '~/components/misc/ButtonWithIcon'
+import { ExternalIcon } from '~/components/misc/ExternalIcon'
 import NetworkTag from '~/components/network/NetworkTag'
 
 import SendIcon from '~/assets/icons/send.svg'
diff --git a/src/components/wallet/collectibles/CollectibleList.tsx b/src/components/wallet/collectibles/CollectibleList.tsx
index 9ff6e15..2b4e1fe 100644
--- a/src/components/wallet/collectibles/CollectibleList.tsx
+++ b/src/components/wallet/collectibles/CollectibleList.tsx
@@ -97,7 +97,7 @@ export default function CollectibleList({
       </Box>
 
       {isImportCollectibleViewOpen && (
-        <Modal size="sm" onClose={() => setIsImportCollectibleViewOpen(false)}>
+        <Modal onClose={() => setIsImportCollectibleViewOpen(false)}>
           <ImportCollectible onClose={() => setIsImportCollectibleViewOpen(false)} />
         </Modal>
       )}
diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
index 1ca1fea..397ab5f 100644
--- a/src/components/wallet/collectibles/ImportCollectible.tsx
+++ b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -4,6 +4,7 @@ import {
   Card,
   Divider,
   Image,
+  SearchIcon,
   Select,
   Spinner,
   Text,
@@ -11,9 +12,7 @@ import {
   useToast
 } from '@0xsequence/design-system'
 import { NetworkConfig, NetworkType } from '@0xsequence/network'
-import { BigNumberish } from 'ethers'
-import { ethers } from 'ethers'
-import { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, useEffect, useRef, useState } from 'react'
 
 import { useObservable, useStore } from '~/stores'
 import {
@@ -24,6 +23,8 @@ import {
 } from '~/stores/CollectibleStore'
 import { NetworkStore } from '~/stores/NetworkStore'
 
+import { FilledRoundCheckBox } from '~/components/misc'
+
 export default function ImportCollectible({ onClose }: { onClose: () => void }) {
   const networkStore = useStore(NetworkStore)
   const networks = networkStore.networks.get()
@@ -35,50 +36,55 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   const toast = useToast()
 
   const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig | undefined>()
-  const [collectibleAddress, setCollectibleAddress] = useState<string | undefined>()
-  const [collectibleTokenId, setCollectibleTokenId] = useState<number | undefined>()
+  const [collectibleManualAddress, setCollectibleManualAddress] = useState<string | undefined>()
+  const [collectibleManualTokenId, setCollectibleManualTokenId] = useState<number | undefined>()
   const [contractType, setContractType] = useState<CollectibleContractType | undefined>()
 
-  const [collectibleInfoResponse, setCollectibleInfoResponse] = useState<
-    CollectibleInfoResponse | undefined
-  >()
+  const [collectibleInfo, setCollectibleInfo] = useState<CollectibleInfoResponse | undefined>()
 
   const [isAddingCollectible, setIsAddingCollectible] = useState(false)
-  const [tokenDirectory, setTokenDirectory] = useState<string | undefined>()
-
   const [isAddingCollectibleManually, setIsAddingCollectibleManually] = useState(false)
 
-  const [collectibleList, setCollectibleList] = useState<any[] | undefined>(undefined)
+  const [collectionList, setCollectionList] = useState<any[]>([])
+  const [collectionListFilter, setCollectionListFilter] = useState<string>('')
+  const [filteredCollectionList, setFilteredCollectionList] = useState<any[]>([])
+
+  const [selectedCollection, setSelectedCollection] = useState<any[]>([])
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    console.log(filteredCollectionList)
+  }, [filteredCollectionList])
 
   useEffect(() => {
     const fetchCollectibleList = async () => {
-      if (selectedNetwork) {
-        setTokenDirectory(networks.find(n => n.chainId === selectedNetwork.chainId)?.blockExplorer?.rootUrl)
+      if (selectedNetwork && contractType) {
         if (contractType === CollectibleContractTypeValues.ERC721) {
-          setCollectibleList(await collectibleStore.getDefaultERC721List(selectedNetwork.chainId))
+          setCollectionList(await collectibleStore.getDefaultERC721List(selectedNetwork.chainId))
         } else if (contractType === CollectibleContractTypeValues.ERC1155) {
-          setCollectibleList(await collectibleStore.getDefaultERC1155List(selectedNetwork.chainId))
+          setCollectionList(await collectibleStore.getDefaultERC1155List(selectedNetwork.chainId))
         }
       }
     }
 
     fetchCollectibleList()
 
-    if (selectedNetwork && collectibleAddress && collectibleTokenId && contractType) {
+    if (selectedNetwork && collectibleManualAddress && collectibleManualTokenId && contractType) {
       collectibleStore
         .getCollectibleInfo({
           chainId: selectedNetwork.chainId,
-          address: collectibleAddress,
-          tokenId: collectibleTokenId,
+          address: collectibleManualAddress,
+          tokenId: collectibleManualTokenId,
           contractType
         })
         .then(response => {
-          setCollectibleInfoResponse(response)
+          setCollectibleInfo(response)
         })
     } else {
-      setCollectibleInfoResponse(undefined)
+      setCollectibleInfo(undefined)
     }
-  }, [selectedNetwork, collectibleAddress, collectibleTokenId, contractType])
+  }, [selectedNetwork, collectibleManualAddress, collectibleManualTokenId, contractType])
 
   const selectOptions = mainnetNetworks
     .filter(network => !network.disabled)
@@ -92,22 +98,59 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
       value: network.chainId.toString()
     }))
 
+  useEffect(() => {
+    const fetchCollectionList = async () => {
+      if (selectedNetwork) {
+        if (contractType === CollectibleContractTypeValues.ERC721) {
+          setCollectionList(await collectibleStore.getDefaultERC721List(selectedNetwork.chainId))
+        } else if (contractType === CollectibleContractTypeValues.ERC1155) {
+          setCollectionList(await collectibleStore.getDefaultERC1155List(selectedNetwork.chainId))
+        }
+      }
+    }
+
+    fetchCollectionList()
+  }, [selectedNetwork])
+
+  useEffect(() => {
+    if (!collectionListFilter) return setFilteredCollectionList(collectionList?.slice(0, 8))
+    setFilteredCollectionList(
+      collectionList
+        ?.filter(
+          collection =>
+            collection.name && collection.name.toLowerCase().includes(collectionListFilter.toLowerCase())
+        )
+        .slice(0, 8)
+    )
+  }, [collectionList, collectionListFilter])
+
+  const toggleSelectCollectible = async (collectionAddress: string) => {
+    const isSelected = selectedCollection.some(collection => collection.address === collectionAddress)
+    if (isSelected) {
+      setSelectedCollection(
+        selectedCollection.filter(collectible => collectible.address !== collectionAddress)
+      )
+    } else {
+      setSelectedCollection([...selectedCollection, { address: collectionAddress, info: undefined }])
+    }
+  }
+
   const handleAdd = async () => {
     if (
       selectedNetwork &&
-      collectibleAddress &&
-      collectibleInfoResponse &&
-      collectibleTokenId &&
+      collectibleManualAddress &&
+      collectibleInfo &&
+      collectibleManualTokenId &&
       contractType
     ) {
       await collectibleStore.addCollectible({
         collectibleInfoParams: {
           chainId: selectedNetwork.chainId,
-          address: collectibleAddress,
-          tokenId: collectibleTokenId,
+          address: collectibleManualAddress,
+          tokenId: collectibleManualTokenId,
           contractType
         },
-        collectibleInfoResponse: collectibleInfoResponse
+        collectibleInfoResponse: collectibleInfo
       })
       setIsAddingCollectible(false)
       toast({
@@ -125,203 +168,456 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   }
 
   const resetInputs = () => {
-    setCollectibleAddress(undefined)
+    setCollectibleManualAddress(undefined)
     setSelectedNetwork(undefined)
-    setCollectibleTokenId(undefined)
+    setCollectibleManualTokenId(undefined)
     setContractType(undefined)
   }
 
-  return (
-    <Box flexDirection="column">
-      <Box flexDirection="column" padding="6" gap="6">
-        <Text variant="large" fontWeight="bold" color="text80">
-          Import ERC721 or ERC1155 Collectibles
-        </Text>
-
-        <Box flexDirection="column" gap="3">
-          <Box flexDirection="column" gap="1">
-            <Text variant="normal" fontWeight="medium" color="text80">
-              Collectible Network
-            </Text>
-
-            <Select
-              name="collectibleNetwork"
-              options={selectOptions}
-              onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
-            />
-          </Box>
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      try {
+        const text = await file.text()
+        const collectionList = JSON.parse(text)
+
+        if (Array.isArray(collectionList)) {
+          collectionList.map(collection => {
+            if (!collection.address || !collection.name) {
+              throw new Error('Invalid collection list')
+            }
+          })
+
+          if (selectedNetwork && contractType) {
+            if (contractType === CollectibleContractTypeValues.ERC721) {
+              await collectibleStore.addExternalERC721List(selectedNetwork.chainId, collectionList)
+            } else if (contractType === CollectibleContractTypeValues.ERC1155) {
+              await collectibleStore.addExternalERC1155List(selectedNetwork.chainId, collectionList)
+            }
+          }
+
+          toast({
+            variant: 'success',
+            title: `Custom collection list imported successfully`
+          })
+          onClose()
+        } else {
+          throw new Error('Invalid file format')
+        }
+      } catch (error) {
+        console.error(error)
+        toast({
+          variant: 'error',
+          title: 'Failed to import token list',
+          description: 'Please ensure the file format is correct.'
+        })
+      }
+    }
+  }
 
-          <Box flexDirection="column" gap="1">
-            <Text variant="normal" fontWeight="medium" color="text80">
-              Collectible Type
-            </Text>
-
-            <Select
-              name="collectibleType"
-              options={[
-                { value: 'ERC721', label: 'ERC721' },
-                { value: 'ERC1155', label: 'ERC1155' }
-              ]}
-              onValueChange={value => setContractType(value as CollectibleContractType)}
-            />
-          </Box>
+  const handleImportCustomCollectibleList = () => {
+    fileInputRef.current?.click()
+  }
+
+  return (
+    // <Box flexDirection="column">
+    //   <Box flexDirection="column" padding="6" gap="6">
+    //     <Text variant="large" fontWeight="bold" color="text80">
+    //       Import ERC721 or ERC1155 Collectibles
+    //     </Text>
+
+    //     <Box flexDirection="column" gap="3">
+    //       <Box flexDirection="column" gap="1">
+    //         <Text variant="normal" fontWeight="medium" color="text80">
+    //           Collectible Network
+    //         </Text>
+
+    //         <Select
+    //           name="collectibleNetwork"
+    //           options={selectOptions}
+    //           onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
+    //         />
+    //       </Box>
+
+    //       <Box flexDirection="column" gap="1">
+    //         <Text variant="normal" fontWeight="medium" color="text80">
+    //           Collectible Type
+    //         </Text>
+
+    //         <Select
+    //           name="collectibleType"
+    //           options={[
+    //             { value: 'ERC721', label: 'ERC721' },
+    //             { value: 'ERC1155', label: 'ERC1155' }
+    //           ]}
+    //           onValueChange={value => setContractType(value as CollectibleContractType)}
+    //         />
+    //       </Box>
+
+    //       <Box flexDirection="column" gap="0.5">
+    //         <Text variant="normal" fontWeight="medium" color="text80">
+    //           Token
+    //         </Text>
+
+    //         <Box
+    //           onClick={() => {}}
+    //           width="fit"
+    //           cursor="pointer"
+    //           paddingBottom="0.5"
+    //           opacity={{ base: '100', hover: '80' }}
+    //         >
+    //           <Text variant="normal" fontWeight="medium" color="text50">
+    //             Import external token list
+    //           </Text>
+    //         </Box>
+
+    //         <Select
+    //           name="collectibleList"
+    //           options={
+    //             collectibleList?.slice(0, 20).map(collectible => {
+    //               return {
+    //                 label: collectible.name,
+    //                 value: collectible.address
+    //               }
+    //             }) ?? []
+    //           }
+    //           onValueChange={value => setCollectibleAddress(value)}
+    //         />
+    //       </Box>
+
+    //       {isAddingCollectibleManually && (
+    //         <>
+    //           <Box flexDirection="column" gap="0.5">
+    //             <Text variant="normal" fontWeight="medium" color="text80">
+    //               Collectible Address
+    //             </Text>
+
+    //             <Box flexDirection="row" gap="1" paddingBottom="0.5">
+    //               <Text variant="normal" fontWeight="medium" color="text50">
+    //                 See addresses on network's
+    //               </Text>
+
+    //               <Text
+    //                 variant="normal"
+    //                 color="text50"
+    //                 underline={!!tokenDirectory}
+    //                 cursor={tokenDirectory ? 'pointer' : 'default'}
+    //                 onClick={() => {
+    //                   if (tokenDirectory) {
+    //                     window.open(tokenDirectory)
+    //                   }
+    //                 }}
+    //               >
+    //                 directory
+    //               </Text>
+    //             </Box>
+
+    //             <TextInput
+    //               name="collectibleAddress"
+    //               value={collectibleAddress ?? ''}
+    //               onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+    //                 setCollectibleAddress(ev.target.value)
+    //               }}
+    //             />
+    //           </Box>
+
+    //           <Box flexDirection="column" gap="0.5">
+    //             <Text variant="normal" fontWeight="medium" color="text80">
+    //               Collectible Token ID
+    //             </Text>
+
+    //             <TextInput
+    //               name="collectibleTokenId"
+    //               value={collectibleTokenId ?? ''}
+    //               onKeyPress={(event: { key: string; preventDefault: () => void }) => {
+    //                 if (!/[0-9]/.test(event.key)) {
+    //                   event.preventDefault()
+    //                 }
+    //               }}
+    //               onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+    //                 if (ev.target.value === '') {
+    //                   setCollectibleTokenId(undefined)
+    //                   return
+    //                 }
+
+    //                 setCollectibleTokenId(ev.target.value as unknown as number)
+    //               }}
+    //             />
+    //           </Box>
+    //         </>
+    //       )}
+    //     </Box>
+
+    //     {isFetchingCollectibleInfo && (
+    //       <Box alignItems="center" justifyContent="center">
+    //         <Spinner size="lg" />
+    //       </Box>
+    //     )}
+
+    //     {collectibleInfoResponse && !collectibleInfoResponse.isOwner && !isFetchingCollectibleInfo && (
+    //       <Box alignItems="center" justifyContent="center">
+    //         <Text variant="medium" color="warning">
+    //           You do not own this collectible
+    //         </Text>
+    //       </Box>
+    //     )}
+
+    //     {collectibleInfoResponse && collectibleInfoResponse.isOwner && !isFetchingCollectibleInfo && (
+    //       <Card flexDirection="row" gap="6">
+    //         <Image src={collectibleInfoResponse.image} style={{ width: '120px', height: 'auto' }} />
+
+    //         <Box flexDirection="column" gap="2">
+    //           <Text variant="medium" fontWeight="bold" color="text80">
+    //             {collectibleInfoResponse.name ?? ''}
+    //           </Text>
+    //           <Text variant="small" color="text80">
+    //             Your Balance:
+    //           </Text>
+    //           <Text variant="medium" fontWeight="bold" color="text80">
+    //             {Number(
+    //               ethers.formatUnits(
+    //                 collectibleInfoResponse.balance as BigNumberish,
+    //                 collectibleInfoResponse.decimals ?? 0
+    //               )
+    //             )}
+    //           </Text>
+    //         </Box>
+    //       </Card>
+    //     )}
+    //   </Box>
+
+    //   <Divider marginY="0" />
+
+    //   <Box flexDirection="row" padding="6" gap="2">
+    //     {!isAddingCollectibleManually && (
+    //       <Button
+    //         label="Manual Import"
+    //         shape="square"
+    //         onClick={() => {
+    //           setIsAddingCollectibleManually(true)
+    //         }}
+    //       />
+    //     )}
+
+    //     <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
+
+    //     <Button
+    //       label="Add Collectible"
+    //       variant="primary"
+    //       shape="square"
+    //       disabled={collectibleInfoResponse === undefined || isAddingCollectible}
+    //       onClick={() => {
+    //         handleAdd()
+    //       }}
+    //     />
+    //   </Box>
+    // </Box>
+    <Box flexDirection="column" height="full">
+      <Box flexDirection="column" height="full" padding="6" gap="6">
+        <Box flexDirection="row" alignItems="center" gap="4">
+          <Text variant="large" fontWeight="bold" color="text80">
+            Import NFT
+          </Text>
+
+          <Select
+            name="collectibleNetwork"
+            placeholder="Select Network"
+            options={selectOptions}
+            onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
+          />
+        </Box>
 
-          <Box flexDirection="column" gap="0.5">
-            <Text variant="normal" fontWeight="medium" color="text80">
-              Token
-            </Text>
-
-            <Box
-              onClick={() => {}}
-              width="fit"
-              cursor="pointer"
-              paddingBottom="0.5"
-              opacity={{ base: '100', hover: '80' }}
-            >
-              <Text variant="normal" fontWeight="medium" color="text50">
-                Import external token list
+        <Box flexDirection="column" style={{ gap: '5px' }}>
+          <Box gap="2">
+            <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC721)}>
+              <Text
+                variant="normal"
+                fontWeight="semibold"
+                color={contractType === CollectibleContractTypeValues.ERC721 ? 'text100' : 'text50'}
+                paddingX="4"
+              >
+                ERC721
               </Text>
+              {contractType === CollectibleContractTypeValues.ERC721 && (
+                <Divider color="white" height="0.5" position="relative" marginY="0" style={{ top: '6px' }} />
+              )}
             </Box>
 
-            <Select
-              name="collectibleList"
-              options={
-                collectibleList?.slice(0, 20).map(collectible => {
-                  return {
-                    label: collectible.name,
-                    value: collectible.address
-                  }
-                }) ?? []
-              }
-              onValueChange={value => setCollectibleAddress(value)}
-            />
+            <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC1155)}>
+              <Text
+                variant="normal"
+                fontWeight="semibold"
+                color={contractType === CollectibleContractTypeValues.ERC1155 ? 'text100' : 'text50'}
+                paddingX="4"
+              >
+                ERC1155
+              </Text>
+              {contractType === CollectibleContractTypeValues.ERC1155 && (
+                <Divider color="white" height="0.5" position="relative" marginY="0" style={{ top: '6px' }} />
+              )}
+            </Box>
           </Box>
+          <Divider marginY="0" />
+        </Box>
 
-          {isAddingCollectibleManually && (
-            <>
-              <Box flexDirection="column" gap="0.5">
-                <Text variant="normal" fontWeight="medium" color="text80">
-                  Collectible Address
-                </Text>
-
-                <Box flexDirection="row" gap="1" paddingBottom="0.5">
-                  <Text variant="normal" fontWeight="medium" color="text50">
-                    See addresses on network's
-                  </Text>
-
-                  <Text
-                    variant="normal"
-                    color="text50"
-                    underline={!!tokenDirectory}
-                    cursor={tokenDirectory ? 'pointer' : 'default'}
-                    onClick={() => {
-                      if (tokenDirectory) {
-                        window.open(tokenDirectory)
-                      }
-                    }}
-                  >
-                    directory
-                  </Text>
-                </Box>
+        <Box flexDirection="column" gap="2">
+          <TextInput
+            leftIcon={SearchIcon}
+            value={collectionListFilter}
+            placeholder="Search for a collectible"
+            onChange={(ev: ChangeEvent<HTMLInputElement>) => setCollectionListFilter(ev.target.value)}
+          />
 
-                <TextInput
-                  name="collectibleAddress"
-                  value={collectibleAddress ?? ''}
-                  onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-                    setCollectibleAddress(ev.target.value)
-                  }}
-                />
-              </Box>
+          <Button
+            label={
+              selectedNetwork && contractType
+                ? `Import custom token list for ${contractType === CollectibleContractTypeValues.ERC721 ? 'ERC721' + ' on ' + selectedNetwork?.title : 'ERC1155' + ' on ' + selectedNetwork?.title}`
+                : 'Select Network and Type to import custom token list'
+            }
+            variant="text"
+            shape="square"
+            marginTop="auto"
+            onClick={selectedNetwork && contractType ? handleImportCustomCollectibleList : undefined}
+          />
+        </Box>
 
-              <Box flexDirection="column" gap="0.5">
-                <Text variant="normal" fontWeight="medium" color="text80">
-                  Collectible Token ID
+        <Box flexDirection="column">
+          {filteredCollectionList?.map((collectible, i) => {
+            return (
+              <Box
+                key={i}
+                flexDirection="row"
+                alignItems="center"
+                background={{ base: 'backgroundPrimary', hover: 'backgroundSecondary' }}
+                onClick={() => {
+                  toggleSelectCollectible(collectible.address)
+                }}
+                borderRadius="sm"
+                padding="3"
+                gap="4"
+              >
+                <Image src={collectible.logoURI} maxHeight="10" maxWidth="10" />
+                <Text variant="normal" fontWeight="semibold" color="text80">
+                  {collectible.name}
                 </Text>
-
-                <TextInput
-                  name="collectibleTokenId"
-                  value={collectibleTokenId ?? ''}
-                  onKeyPress={(event: { key: string; preventDefault: () => void }) => {
-                    if (!/[0-9]/.test(event.key)) {
-                      event.preventDefault()
-                    }
-                  }}
-                  onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-                    if (ev.target.value === '') {
-                      setCollectibleTokenId(undefined)
-                      return
+                <Box flexDirection="row" alignItems="center" marginLeft="auto" gap="2">
+                  {selectedCollection?.filter(c => c.address.includes(collectible.address)).length > 0 && (
+                    <>
+                      <Text variant="normal" fontWeight="bold" color="text80">
+                        Balance:
+                      </Text>
+                      {selectedCollection?.filter(c => c.address.includes(collectible.address))[0].info
+                        ?.balance ? (
+                        <Text variant="normal" fontWeight="bold" color="text80">
+                          {
+                            selectedCollection?.filter(c => c.address.includes(collectible.address))[0].info
+                              ?.balance
+                          }
+                        </Text>
+                      ) : (
+                        <Spinner size="md" marginRight="1" />
+                      )}
+                    </>
+                  )}
+                  <FilledRoundCheckBox
+                    checked={
+                      (selectedCollection?.filter(c => c.address.includes(collectible.address)).length || 0) >
+                      0
                     }
-
-                    setCollectibleTokenId(ev.target.value as unknown as number)
-                  }}
-                />
+                  />
+                </Box>
               </Box>
-            </>
-          )}
+            )
+          })}
         </Box>
 
-        {isFetchingCollectibleInfo && (
-          <Box alignItems="center" justifyContent="center">
-            <Spinner size="lg" />
-          </Box>
-        )}
-
-        {collectibleInfoResponse && !collectibleInfoResponse.isOwner && !isFetchingCollectibleInfo && (
-          <Box alignItems="center" justifyContent="center">
-            <Text variant="medium" color="warning">
-              You do not own this collectible
-            </Text>
-          </Box>
-        )}
-
-        {collectibleInfoResponse && collectibleInfoResponse.isOwner && !isFetchingCollectibleInfo && (
-          <Card flexDirection="row" gap="6">
-            <Image src={collectibleInfoResponse.image} style={{ width: '120px', height: 'auto' }} />
+        <input
+          type="file"
+          accept=".json"
+          style={{ display: 'none' }}
+          ref={fileInputRef}
+          onChange={handleFileChange}
+        />
+      </Box>
 
-            <Box flexDirection="column" gap="2">
-              <Text variant="medium" fontWeight="bold" color="text80">
-                {collectibleInfoResponse.name ?? ''}
-              </Text>
-              <Text variant="small" color="text80">
-                Your Balance:
-              </Text>
-              <Text variant="medium" fontWeight="bold" color="text80">
-                {Number(
-                  ethers.formatUnits(
-                    collectibleInfoResponse.balance as BigNumberish,
-                    collectibleInfoResponse.decimals ?? 0
-                  )
-                )}
+      <Box marginTop="auto">
+        <Box paddingX="6">
+          {isAddingCollectibleManually && (
+            <Box flexDirection="column" marginBottom="6" gap="0.5">
+              <Text variant="normal" fontWeight="medium" color="text80">
+                Collectible Address
               </Text>
+
+              <TextInput
+                name="collectibleAddress"
+                value={collectibleManualAddress ?? ''}
+                onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                  setCollectibleManualAddress(ev.target.value)
+                }}
+              />
             </Box>
-          </Card>
-        )}
-      </Box>
+          )}
 
-      <Divider marginY="0" />
+          {isFetchingCollectibleInfo && collectibleManualAddress ? (
+            <Box alignItems="center" marginBottom="6" justifyContent="center">
+              <Spinner size="lg" />
+            </Box>
+          ) : (
+            collectibleInfo && (
+              <Card flexDirection="column" marginBottom="6" gap="2">
+                <Text variant="medium" fontWeight="bold" color="text80">
+                  {collectibleInfo.name ?? ''}
+                </Text>
+                <Text variant="small" color="text80">
+                  Your Balance:
+                </Text>
+                <Text variant="medium" fontWeight="bold" color="text80">
+                  {collectibleInfo.balance}
+                </Text>
+              </Card>
+            )
+          )}
+        </Box>
 
-      <Box flexDirection="row" padding="6" gap="2">
-        {!isAddingCollectibleManually && (
-          <Button
-            label="Manual Import"
-            shape="square"
-            onClick={() => {
-              setIsAddingCollectibleManually(true)
-            }}
-          />
-        )}
-
-        <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
-
-        <Button
-          label="Add Collectible"
-          variant="primary"
-          shape="square"
-          disabled={collectibleInfoResponse === undefined || isAddingCollectible}
-          onClick={() => {
-            handleAdd()
-          }}
-        />
+        <Divider marginY="0" />
+
+        <Box>
+          <Box flexDirection="row" padding="6" gap="2">
+            {isAddingCollectibleManually ? (
+              <Button
+                label="Hide"
+                shape="square"
+                disabled={!selectedNetwork}
+                onClick={() => {
+                  setIsAddingCollectibleManually(false)
+                  setCollectibleManualAddress('')
+                  setCollectibleInfo(undefined)
+                }}
+              />
+            ) : (
+              <Button
+                label="Manual Import"
+                shape="square"
+                disabled={!selectedNetwork}
+                onClick={() => {
+                  setIsAddingCollectibleManually(true)
+                }}
+              />
+            )}
+
+            <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
+
+            <Button
+              label="Add"
+              variant="primary"
+              shape="square"
+              disabled={(collectibleInfo === undefined && !selectedCollection.length) || isAddingCollectible}
+              onClick={() => {
+                handleAdd()
+              }}
+            />
+          </Box>
+        </Box>
       </Box>
     </Box>
   )
diff --git a/src/components/wallet/collectibles/SendCollectible.tsx b/src/components/wallet/collectibles/SendCollectible.tsx
index 8e0de7f..1b388e1 100644
--- a/src/components/wallet/collectibles/SendCollectible.tsx
+++ b/src/components/wallet/collectibles/SendCollectible.tsx
@@ -9,7 +9,7 @@ import { useStore } from '~/stores'
 import { CollectibleInfo } from '~/stores/CollectibleStore'
 import { WalletStore } from '~/stores/WalletStore'
 
-import { FilledCheckBox } from '~/components/helpers'
+import { FilledCheckBox } from '~/components/misc'
 
 export default function SendCollectible({
   collectibleInfo,
diff --git a/src/components/wallet/externalprovider/ExternalWallet.tsx b/src/components/wallet/externalprovider/ExternalWallet.tsx
index 0a32c4f..40e906a 100644
--- a/src/components/wallet/externalprovider/ExternalWallet.tsx
+++ b/src/components/wallet/externalprovider/ExternalWallet.tsx
@@ -20,8 +20,8 @@ import { useStore } from '~/stores'
 import { WalletStore } from '~/stores/WalletStore'
 
 import SelectProvider from '~/components/wallet/externalprovider/SelectProvider'
-import { ButtonWithIcon } from '~/components/helpers/ButtonWithIcon'
-import { ExternalIcon } from '~/components/helpers/ExternalIcon'
+import { ButtonWithIcon } from '~/components/misc/ButtonWithIcon'
+import { ExternalIcon } from '~/components/misc/ExternalIcon'
 
 export default function ExternalWallet() {
   const walletStore = useStore(WalletStore)
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index a55e4e2..b180cea 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -19,7 +19,7 @@ import { useObservable, useStore } from '~/stores'
 import { NetworkStore } from '~/stores/NetworkStore'
 import { TokenStore, UserAddedTokenInitialInfo } from '~/stores/TokenStore'
 
-import { FilledRoundCheckBox } from '~/components/helpers'
+import { FilledRoundCheckBox } from '~/components/misc'
 
 export default function ImportToken({ onClose }: { onClose: () => void }) {
   const networkStore = useStore(NetworkStore)
@@ -84,10 +84,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   }, [selectedNetwork])
 
   useEffect(() => {
-    if (!tokenListFilter)
-      return setFilteredTokenList(
-        tokenList?.slice(0, 8)
-      )
+    if (!tokenListFilter) return setFilteredTokenList(tokenList?.slice(0, 8))
     setFilteredTokenList(
       tokenList
         ?.filter(token => token.symbol && token.symbol.toLowerCase().includes(tokenListFilter.toLowerCase()))
@@ -167,8 +164,6 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
         const text = await file.text()
         const tokenList = JSON.parse(text)
 
-        console.log(tokenList)
-
         if (Array.isArray(tokenList)) {
           tokenList.map(token => {
             if (!token.address || !token.symbol) {
@@ -219,11 +214,26 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
           />
         </Box>
 
-        <TextInput
-          leftIcon={SearchIcon}
-          value={tokenListFilter}
-          onChange={(ev: ChangeEvent<HTMLInputElement>) => setTokenListFilter(ev.target.value)}
-        />
+        <Box flexDirection="column" gap="2">
+          <TextInput
+            leftIcon={SearchIcon}
+            value={tokenListFilter}
+            placeholder="Search for a token"
+            onChange={(ev: ChangeEvent<HTMLInputElement>) => setTokenListFilter(ev.target.value)}
+          />
+
+          <Button
+            label={
+              selectedNetwork
+                ? `Import custom token list for ${' ' + selectedNetwork?.title}`
+                : 'Select Network to import custom token list'
+            }
+            variant="text"
+            shape="square"
+            marginTop="auto"
+            onClick={selectedNetwork ? handleImportCustomTokenList : undefined}
+          />
+        </Box>
 
         <Box flexDirection="column">
           {filteredTokenList?.map((token, i) => {
@@ -268,15 +278,6 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
           })}
         </Box>
 
-        {selectedNetwork && (
-          <Button
-            label={`Import custom token list for ${' ' + selectedNetwork?.title}`}
-            shape="square"
-            marginTop="auto"
-            onClick={handleImportCustomTokenList}
-          />
-        )}
-
         <input
           type="file"
           accept=".json"
diff --git a/src/components/wallet/tokens/SendToken.tsx b/src/components/wallet/tokens/SendToken.tsx
index e2f7794..e72adf4 100644
--- a/src/components/wallet/tokens/SendToken.tsx
+++ b/src/components/wallet/tokens/SendToken.tsx
@@ -8,7 +8,7 @@ import { getNetworkTitle } from '~/utils/network'
 import { useStore } from '~/stores'
 import { WalletStore } from '~/stores/WalletStore'
 
-import { FilledCheckBox } from '~/components/helpers'
+import { FilledCheckBox } from '~/components/misc'
 
 export default function SendToken({
   tokenBalance,
diff --git a/src/components/wallet/tokens/TokenBalanceItem.tsx b/src/components/wallet/tokens/TokenBalanceItem.tsx
index fb9a21a..58c1a6b 100644
--- a/src/components/wallet/tokens/TokenBalanceItem.tsx
+++ b/src/components/wallet/tokens/TokenBalanceItem.tsx
@@ -4,8 +4,8 @@ import { ethers } from 'ethers'
 
 import { truncateNumber } from '~/utils/bignumber'
 
-import { ButtonWithIcon } from '~/components/helpers/ButtonWithIcon'
-import { ExternalIcon } from '~/components/helpers/ExternalIcon'
+import { ButtonWithIcon } from '~/components/misc/ButtonWithIcon'
+import { ExternalIcon } from '~/components/misc/ExternalIcon'
 import NetworkTag from '~/components/network/NetworkTag'
 
 import SendIcon from '~/assets/icons/send.svg'
diff --git a/src/components/wallet/tokens/TokenList.tsx b/src/components/wallet/tokens/TokenList.tsx
index 06370fd..fcb36fa 100644
--- a/src/components/wallet/tokens/TokenList.tsx
+++ b/src/components/wallet/tokens/TokenList.tsx
@@ -7,7 +7,7 @@ import { NetworkStore } from '~/stores/NetworkStore'
 import { TokenStore } from '~/stores/TokenStore'
 import { WalletStore } from '~/stores/WalletStore'
 
-import { FilledCheckBox } from '~/components/helpers'
+import { FilledCheckBox } from '~/components/misc'
 
 import CoinIcon from '~/assets/icons/coin.svg'
 
@@ -128,7 +128,6 @@ export default function TokenList({ onSendClick }: { onSendClick: (tokenBalance:
 
       {isImportTokenViewOpen && (
         <Modal
-          size="lg"
           onClose={() => setIsImportTokenViewOpen(false)}
           contentProps={{
             style: {
diff --git a/src/routes/Recovery.tsx b/src/routes/Recovery.tsx
index 6a19510..15a3856 100644
--- a/src/routes/Recovery.tsx
+++ b/src/routes/Recovery.tsx
@@ -28,7 +28,7 @@ import { NetworkStore } from '~/stores/NetworkStore'
 import { WalletStore } from '~/stores/WalletStore'
 
 import RecoveryHeader from '~/components/header/RecoveryHeader'
-import { FilledCheckBox } from '~/components/helpers'
+import { FilledCheckBox } from '~/components/misc'
 import Networks from '~/components/network/Networks'
 import WalletList from '~/components/recovery/WalletList'
 
diff --git a/src/stores/CollectibleStore.ts b/src/stores/CollectibleStore.ts
index a151102..aa59652 100644
--- a/src/stores/CollectibleStore.ts
+++ b/src/stores/CollectibleStore.ts
@@ -259,4 +259,24 @@ export class CollectibleStore {
 
     return tokenList
   }
+
+  async addExternalERC721List(chainId: number, collectibleList: any[]) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC721)
+    await db.put(IndexedDBKey.ERC721, collectibleList, chainName)
+  }
+
+  async addExternalERC1155List(chainId: number, collectibleList: any[]) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC1155)
+    await db.put(IndexedDBKey.ERC1155, collectibleList, chainName)
+  }
 }

From 5667fe6f9c1813b47fe4707591c694cf889f7c5e Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Thu, 12 Dec 2024 23:08:00 -0500
Subject: [PATCH 07/10] finished collectible list import

---
 .../wallet/collectibles/CollectibleList.tsx   |  10 +-
 .../wallet/collectibles/ImportCollectible.tsx | 756 +++++++++---------
 .../wallet/tokens/AddCustomTokenList.tsx      |   5 -
 src/components/wallet/tokens/ImportToken.tsx  |  17 +-
 4 files changed, 387 insertions(+), 401 deletions(-)
 delete mode 100644 src/components/wallet/tokens/AddCustomTokenList.tsx

diff --git a/src/components/wallet/collectibles/CollectibleList.tsx b/src/components/wallet/collectibles/CollectibleList.tsx
index 2b4e1fe..d0b48d6 100644
--- a/src/components/wallet/collectibles/CollectibleList.tsx
+++ b/src/components/wallet/collectibles/CollectibleList.tsx
@@ -97,7 +97,15 @@ export default function CollectibleList({
       </Box>
 
       {isImportCollectibleViewOpen && (
-        <Modal onClose={() => setIsImportCollectibleViewOpen(false)}>
+        <Modal
+          onClose={() => setIsImportCollectibleViewOpen(false)}
+          contentProps={{
+            style: {
+              scrollbarColor: 'gray black',
+              scrollbarWidth: 'thin'
+            }
+          }}
+        >
           <ImportCollectible onClose={() => setIsImportCollectibleViewOpen(false)} />
         </Modal>
       )}
diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
index 397ab5f..eedadf6 100644
--- a/src/components/wallet/collectibles/ImportCollectible.tsx
+++ b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Card,
+  ChevronLeftIcon,
   Divider,
   Image,
   SearchIcon,
@@ -12,6 +13,7 @@ import {
   useToast
 } from '@0xsequence/design-system'
 import { NetworkConfig, NetworkType } from '@0xsequence/network'
+import { BigNumberish, ethers } from 'ethers'
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
 
 import { useObservable, useStore } from '~/stores'
@@ -35,27 +37,42 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
 
   const toast = useToast()
 
-  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig | undefined>()
+  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>(mainnetNetworks[0])
   const [collectibleManualAddress, setCollectibleManualAddress] = useState<string | undefined>()
   const [collectibleManualTokenId, setCollectibleManualTokenId] = useState<number | undefined>()
-  const [contractType, setContractType] = useState<CollectibleContractType | undefined>()
-
-  const [collectibleInfo, setCollectibleInfo] = useState<CollectibleInfoResponse | undefined>()
+  const [contractType, setContractType] = useState<CollectibleContractType>(
+    CollectibleContractTypeValues.ERC721
+  )
 
-  const [isAddingCollectible, setIsAddingCollectible] = useState(false)
-  const [isAddingCollectibleManually, setIsAddingCollectibleManually] = useState(false)
+  const [isAddingCollection, setIsAddingCollection] = useState(false)
 
   const [collectionList, setCollectionList] = useState<any[]>([])
   const [collectionListFilter, setCollectionListFilter] = useState<string>('')
   const [filteredCollectionList, setFilteredCollectionList] = useState<any[]>([])
 
-  const [selectedCollection, setSelectedCollection] = useState<any[]>([])
+  const [selectedCollection, setSelectedCollection] = useState<any>()
+  const [selectedCollectibles, setSelectedCollectibles] = useState<any[]>([])
+  const [queriedCollectibles, setQueriedCollectibles] = useState<any[]>([])
+  const [isFetchingQueriedCollectibles, setIsFetchingQueriedCollectibles] = useState(false)
+
+  const [isAddingCollectibleManually, setIsAddingCollectibleManually] = useState(false)
+  const [manualCollectibleInfo, setManualCollectibleInfo] = useState<CollectibleInfoResponse | undefined>()
+
+  const [queryCollectibleTokenIdsMap, setQueryCollectibleTokenIdsMap] = useState<Record<string, string>>({})
 
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  useEffect(() => {
-    console.log(filteredCollectionList)
-  }, [filteredCollectionList])
+  const selectOptions = mainnetNetworks
+    .filter(network => !network.disabled)
+    .map(network => ({
+      label: (
+        <Box flexDirection="row" alignItems="center" gap="2">
+          <Image src={network.logoURI} maxWidth="8" maxHeight="8" />
+          <Text>{network.title}</Text>
+        </Box>
+      ),
+      value: network.chainId.toString()
+    }))
 
   useEffect(() => {
     const fetchCollectibleList = async () => {
@@ -68,35 +85,73 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
       }
     }
 
+    const fetchCollectibleInfo = async () => {
+      if (selectedNetwork && contractType && collectibleManualAddress && collectibleManualTokenId) {
+        collectibleStore
+          .getCollectibleInfo({
+            chainId: selectedNetwork.chainId,
+            address: collectibleManualAddress,
+            tokenId: collectibleManualTokenId,
+            contractType
+          })
+          .then(response => {
+            setManualCollectibleInfo(response)
+          })
+      }
+    }
+
     fetchCollectibleList()
+    fetchCollectibleInfo()
+  }, [selectedNetwork, contractType, collectibleManualAddress, collectibleManualTokenId])
 
-    if (selectedNetwork && collectibleManualAddress && collectibleManualTokenId && contractType) {
-      collectibleStore
-        .getCollectibleInfo({
-          chainId: selectedNetwork.chainId,
-          address: collectibleManualAddress,
-          tokenId: collectibleManualTokenId,
-          contractType
-        })
-        .then(response => {
-          setCollectibleInfo(response)
-        })
-    } else {
-      setCollectibleInfo(undefined)
+  useEffect(() => {
+    if (selectedNetwork && contractType && selectedCollection) {
     }
-  }, [selectedNetwork, collectibleManualAddress, collectibleManualTokenId, contractType])
+  }, [selectedNetwork, contractType, selectedCollection, selectedCollectibles])
 
-  const selectOptions = mainnetNetworks
-    .filter(network => !network.disabled)
-    .map(network => ({
-      label: (
-        <Box flexDirection="row" alignItems="center" gap="2">
-          <Image src={network.logoURI} maxWidth="8" maxHeight="8" />
-          <Text>{network.title}</Text>
-        </Box>
-      ),
-      value: network.chainId.toString()
-    }))
+  useEffect(() => {
+    const fetchQueriedCollectibles = async () => {
+      setQueriedCollectibles([])
+      if (!queryCollectibleTokenIdsMap[selectedCollection.address]) return
+
+      setIsFetchingQueriedCollectibles(true)
+      const tokenIds = queryCollectibleTokenIdsMap[selectedCollection.address].split(',').map(Number)
+
+      for (const tokenId of tokenIds) {
+        try {
+          const collectibleInfo = await collectibleStore.getCollectibleInfo({
+            chainId: selectedNetwork.chainId,
+            contractType,
+            address: selectedCollection.address,
+            tokenId: tokenId
+          })
+
+          if (collectibleInfo.isOwner) {
+            setQueriedCollectibles(prev => [
+              ...prev,
+              {
+                collectibleInfo,
+                chainId: selectedNetwork.chainId,
+                contractType,
+                address: selectedCollection.address,
+                tokenId
+              }
+            ])
+          }
+        } catch (error) {
+          console.error(error)
+          continue
+        }
+      }
+      setIsFetchingQueriedCollectibles(false)
+    }
+
+    fetchQueriedCollectibles()
+  }, [queryCollectibleTokenIdsMap])
+
+  useEffect(() => {
+    console.log(selectedCollectibles)
+  }, [selectedCollectibles])
 
   useEffect(() => {
     const fetchCollectionList = async () => {
@@ -124,54 +179,62 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     )
   }, [collectionList, collectionListFilter])
 
-  const toggleSelectCollectible = async (collectionAddress: string) => {
-    const isSelected = selectedCollection.some(collection => collection.address === collectionAddress)
-    if (isSelected) {
-      setSelectedCollection(
-        selectedCollection.filter(collectible => collectible.address !== collectionAddress)
-      )
-    } else {
-      setSelectedCollection([...selectedCollection, { address: collectionAddress, info: undefined }])
-    }
-  }
-
   const handleAdd = async () => {
-    if (
-      selectedNetwork &&
-      collectibleManualAddress &&
-      collectibleInfo &&
-      collectibleManualTokenId &&
-      contractType
-    ) {
-      await collectibleStore.addCollectible({
-        collectibleInfoParams: {
-          chainId: selectedNetwork.chainId,
-          address: collectibleManualAddress,
-          tokenId: collectibleManualTokenId,
-          contractType
-        },
-        collectibleInfoResponse: collectibleInfo
-      })
-      setIsAddingCollectible(false)
+    try {
+      if (
+        selectedNetwork &&
+        contractType &&
+        collectibleManualAddress &&
+        collectibleManualTokenId &&
+        manualCollectibleInfo
+      ) {
+        await collectibleStore.addCollectible({
+          collectibleInfoParams: {
+            chainId: selectedNetwork.chainId,
+            address: collectibleManualAddress,
+            tokenId: collectibleManualTokenId,
+            contractType
+          },
+          collectibleInfoResponse: manualCollectibleInfo
+        })
+      }
+
+      if (selectedCollectibles.length > 0) {
+        selectedCollectibles.map(async collectible => {
+          await collectibleStore.addCollectible({
+            collectibleInfoParams: {
+              chainId: collectible.chainId,
+              address: collectible.address,
+              tokenId: collectible.tokenId,
+              contractType: collectible.contractType
+            },
+            collectibleInfoResponse: collectible.collectibleInfo
+          })
+        })
+      }
+
+      setIsAddingCollection(false)
       toast({
         variant: 'success',
-        title:
-          contractType === CollectibleContractTypeValues.ERC721
-            ? 'ERC721 collectible added successfully'
-            : 'ERC1155 collectible added successfully',
+        title: `Collectible${selectedCollectibles.length + (collectibleManualAddress ? 1 : 0) > 1 ? 's' : ''} added successfully`,
         description:
           "You'll be able to see this collectible on your browser as long as you don't clear your cache."
       })
       resetInputs()
       onClose()
+    } catch (error) {
+      console.error(error)
+      toast({
+        variant: 'error',
+        title: 'One or more collectibles failed to add',
+        description: 'Please try again.'
+      })
     }
   }
 
   const resetInputs = () => {
     setCollectibleManualAddress(undefined)
-    setSelectedNetwork(undefined)
     setCollectibleManualTokenId(undefined)
-    setContractType(undefined)
   }
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
@@ -219,326 +282,226 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     fileInputRef.current?.click()
   }
 
-  return (
-    // <Box flexDirection="column">
-    //   <Box flexDirection="column" padding="6" gap="6">
-    //     <Text variant="large" fontWeight="bold" color="text80">
-    //       Import ERC721 or ERC1155 Collectibles
-    //     </Text>
-
-    //     <Box flexDirection="column" gap="3">
-    //       <Box flexDirection="column" gap="1">
-    //         <Text variant="normal" fontWeight="medium" color="text80">
-    //           Collectible Network
-    //         </Text>
-
-    //         <Select
-    //           name="collectibleNetwork"
-    //           options={selectOptions}
-    //           onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
-    //         />
-    //       </Box>
-
-    //       <Box flexDirection="column" gap="1">
-    //         <Text variant="normal" fontWeight="medium" color="text80">
-    //           Collectible Type
-    //         </Text>
-
-    //         <Select
-    //           name="collectibleType"
-    //           options={[
-    //             { value: 'ERC721', label: 'ERC721' },
-    //             { value: 'ERC1155', label: 'ERC1155' }
-    //           ]}
-    //           onValueChange={value => setContractType(value as CollectibleContractType)}
-    //         />
-    //       </Box>
-
-    //       <Box flexDirection="column" gap="0.5">
-    //         <Text variant="normal" fontWeight="medium" color="text80">
-    //           Token
-    //         </Text>
-
-    //         <Box
-    //           onClick={() => {}}
-    //           width="fit"
-    //           cursor="pointer"
-    //           paddingBottom="0.5"
-    //           opacity={{ base: '100', hover: '80' }}
-    //         >
-    //           <Text variant="normal" fontWeight="medium" color="text50">
-    //             Import external token list
-    //           </Text>
-    //         </Box>
-
-    //         <Select
-    //           name="collectibleList"
-    //           options={
-    //             collectibleList?.slice(0, 20).map(collectible => {
-    //               return {
-    //                 label: collectible.name,
-    //                 value: collectible.address
-    //               }
-    //             }) ?? []
-    //           }
-    //           onValueChange={value => setCollectibleAddress(value)}
-    //         />
-    //       </Box>
-
-    //       {isAddingCollectibleManually && (
-    //         <>
-    //           <Box flexDirection="column" gap="0.5">
-    //             <Text variant="normal" fontWeight="medium" color="text80">
-    //               Collectible Address
-    //             </Text>
-
-    //             <Box flexDirection="row" gap="1" paddingBottom="0.5">
-    //               <Text variant="normal" fontWeight="medium" color="text50">
-    //                 See addresses on network's
-    //               </Text>
-
-    //               <Text
-    //                 variant="normal"
-    //                 color="text50"
-    //                 underline={!!tokenDirectory}
-    //                 cursor={tokenDirectory ? 'pointer' : 'default'}
-    //                 onClick={() => {
-    //                   if (tokenDirectory) {
-    //                     window.open(tokenDirectory)
-    //                   }
-    //                 }}
-    //               >
-    //                 directory
-    //               </Text>
-    //             </Box>
-
-    //             <TextInput
-    //               name="collectibleAddress"
-    //               value={collectibleAddress ?? ''}
-    //               onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-    //                 setCollectibleAddress(ev.target.value)
-    //               }}
-    //             />
-    //           </Box>
-
-    //           <Box flexDirection="column" gap="0.5">
-    //             <Text variant="normal" fontWeight="medium" color="text80">
-    //               Collectible Token ID
-    //             </Text>
-
-    //             <TextInput
-    //               name="collectibleTokenId"
-    //               value={collectibleTokenId ?? ''}
-    //               onKeyPress={(event: { key: string; preventDefault: () => void }) => {
-    //                 if (!/[0-9]/.test(event.key)) {
-    //                   event.preventDefault()
-    //                 }
-    //               }}
-    //               onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-    //                 if (ev.target.value === '') {
-    //                   setCollectibleTokenId(undefined)
-    //                   return
-    //                 }
-
-    //                 setCollectibleTokenId(ev.target.value as unknown as number)
-    //               }}
-    //             />
-    //           </Box>
-    //         </>
-    //       )}
-    //     </Box>
-
-    //     {isFetchingCollectibleInfo && (
-    //       <Box alignItems="center" justifyContent="center">
-    //         <Spinner size="lg" />
-    //       </Box>
-    //     )}
-
-    //     {collectibleInfoResponse && !collectibleInfoResponse.isOwner && !isFetchingCollectibleInfo && (
-    //       <Box alignItems="center" justifyContent="center">
-    //         <Text variant="medium" color="warning">
-    //           You do not own this collectible
-    //         </Text>
-    //       </Box>
-    //     )}
-
-    //     {collectibleInfoResponse && collectibleInfoResponse.isOwner && !isFetchingCollectibleInfo && (
-    //       <Card flexDirection="row" gap="6">
-    //         <Image src={collectibleInfoResponse.image} style={{ width: '120px', height: 'auto' }} />
-
-    //         <Box flexDirection="column" gap="2">
-    //           <Text variant="medium" fontWeight="bold" color="text80">
-    //             {collectibleInfoResponse.name ?? ''}
-    //           </Text>
-    //           <Text variant="small" color="text80">
-    //             Your Balance:
-    //           </Text>
-    //           <Text variant="medium" fontWeight="bold" color="text80">
-    //             {Number(
-    //               ethers.formatUnits(
-    //                 collectibleInfoResponse.balance as BigNumberish,
-    //                 collectibleInfoResponse.decimals ?? 0
-    //               )
-    //             )}
-    //           </Text>
-    //         </Box>
-    //       </Card>
-    //     )}
-    //   </Box>
-
-    //   <Divider marginY="0" />
-
-    //   <Box flexDirection="row" padding="6" gap="2">
-    //     {!isAddingCollectibleManually && (
-    //       <Button
-    //         label="Manual Import"
-    //         shape="square"
-    //         onClick={() => {
-    //           setIsAddingCollectibleManually(true)
-    //         }}
-    //       />
-    //     )}
-
-    //     <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
-
-    //     <Button
-    //       label="Add Collectible"
-    //       variant="primary"
-    //       shape="square"
-    //       disabled={collectibleInfoResponse === undefined || isAddingCollectible}
-    //       onClick={() => {
-    //         handleAdd()
-    //       }}
-    //     />
-    //   </Box>
-    // </Box>
-    <Box flexDirection="column" height="full">
-      <Box flexDirection="column" height="full" padding="6" gap="6">
-        <Box flexDirection="row" alignItems="center" gap="4">
-          <Text variant="large" fontWeight="bold" color="text80">
-            Import NFT
-          </Text>
+  const toggleSelectCollectible = async (collectible: any) => {
+    const isSelected = selectedCollectibles.some(
+      c => c.address === collectible.address && c.tokenId === collectible.tokenId
+    )
+    if (isSelected) {
+      setSelectedCollectibles(
+        selectedCollectibles.filter(
+          c => c.address !== collectible.address && c.tokenId !== collectible.tokenId
+        )
+      )
+    } else {
+      setSelectedCollectibles([...selectedCollectibles, collectible])
+    }
+  }
 
-          <Select
-            name="collectibleNetwork"
-            placeholder="Select Network"
-            options={selectOptions}
-            onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
+  const showCollectible = (collectible: any, i: number) => {
+    return (
+      <Box
+        key={i}
+        flexDirection="row"
+        alignItems="center"
+        background={{ base: 'backgroundPrimary', hover: 'backgroundSecondary' }}
+        onClick={() => {
+          toggleSelectCollectible(collectible)
+        }}
+        borderRadius="sm"
+        padding="3"
+        gap="4"
+      >
+        <Image src={collectible.collectibleInfo.image} maxHeight="10" maxWidth="10" />
+        <Text variant="normal" fontWeight="semibold" color="text80">
+          {collectible.collectibleInfo.name}
+        </Text>
+        <Box flexDirection="row" alignItems="center" marginLeft="auto" gap="2">
+          <Text variant="normal" fontWeight="bold" color="text80">
+            Balance:
+          </Text>
+          <Text variant="normal" fontWeight="bold" color="text80" marginRight="1">
+            {collectible.contractType === CollectibleContractTypeValues.ERC721
+              ? 1
+              : ethers.formatUnits(
+                  collectible.collectibleInfo.balance as BigNumberish,
+                  collectible.collectibleInfo.decimals ?? 0
+                )}
+          </Text>
+          <FilledRoundCheckBox
+            checked={
+              (selectedCollectibles?.filter(c => c.address.includes(collectible.address)).length || 0) > 0
+            }
           />
         </Box>
+      </Box>
+    )
+  }
 
-        <Box flexDirection="column" style={{ gap: '5px' }}>
-          <Box gap="2">
-            <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC721)}>
-              <Text
-                variant="normal"
-                fontWeight="semibold"
-                color={contractType === CollectibleContractTypeValues.ERC721 ? 'text100' : 'text50'}
-                paddingX="4"
-              >
-                ERC721
-              </Text>
-              {contractType === CollectibleContractTypeValues.ERC721 && (
-                <Divider color="white" height="0.5" position="relative" marginY="0" style={{ top: '6px' }} />
-              )}
-            </Box>
-
-            <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC1155)}>
-              <Text
-                variant="normal"
-                fontWeight="semibold"
-                color={contractType === CollectibleContractTypeValues.ERC1155 ? 'text100' : 'text50'}
-                paddingX="4"
-              >
-                ERC1155
-              </Text>
-              {contractType === CollectibleContractTypeValues.ERC1155 && (
-                <Divider color="white" height="0.5" position="relative" marginY="0" style={{ top: '6px' }} />
-              )}
-            </Box>
+  return (
+    <Box flexDirection="column" height="fit" minHeight="full">
+      {selectedCollection ? (
+        <Box flexDirection="column" height="full" padding="6" gap="6">
+          <Box flexDirection="row" alignItems="center" gap="4">
+            <Button leftIcon={ChevronLeftIcon} onClick={() => setSelectedCollection(undefined)} />
+            <Image src={selectedCollection.logoURI} maxHeight="10" maxWidth="10" />
+            <Text variant="large" fontWeight="bold" color="text80">
+              {selectedCollection.name}
+            </Text>
           </Box>
-          <Divider marginY="0" />
-        </Box>
 
-        <Box flexDirection="column" gap="2">
-          <TextInput
-            leftIcon={SearchIcon}
-            value={collectionListFilter}
-            placeholder="Search for a collectible"
-            onChange={(ev: ChangeEvent<HTMLInputElement>) => setCollectionListFilter(ev.target.value)}
-          />
+          <Box flexDirection="column" gap="2">
+            <TextInput
+              leftIcon={SearchIcon}
+              value={queryCollectibleTokenIdsMap[selectedCollection.address]}
+              placeholder="Enter token IDs separated by commas"
+              onChange={(ev: ChangeEvent<HTMLInputElement>) =>
+                setQueryCollectibleTokenIdsMap({
+                  ...queryCollectibleTokenIdsMap,
+                  [selectedCollection.address]: ev.target.value
+                })
+              }
+            />
+          </Box>
 
-          <Button
-            label={
-              selectedNetwork && contractType
-                ? `Import custom token list for ${contractType === CollectibleContractTypeValues.ERC721 ? 'ERC721' + ' on ' + selectedNetwork?.title : 'ERC1155' + ' on ' + selectedNetwork?.title}`
-                : 'Select Network and Type to import custom token list'
-            }
-            variant="text"
-            shape="square"
-            marginTop="auto"
-            onClick={selectedNetwork && contractType ? handleImportCustomCollectibleList : undefined}
-          />
+          {isFetchingQueriedCollectibles ? (
+            <Box alignItems="center" justifyContent="center">
+              <Spinner size="lg" />
+            </Box>
+          ) : (
+            <Box flexDirection="column">
+              {selectedCollectibles?.map((collectible, i) => {
+                if (collectible.address === selectedCollection.address) {
+                  return showCollectible(collectible, i)
+                }
+              })}
+              {queriedCollectibles?.map((collectible, i) => {
+                if (
+                  collectible.address === selectedCollection.address &&
+                  !selectedCollectibles.some(c => c.tokenId === collectible.tokenId)
+                ) {
+                  return showCollectible(collectible, i)
+                }
+              })}
+            </Box>
+          )}
         </Box>
+      ) : (
+        <Box flexDirection="column" height="full" padding="6" gap="6">
+          <Box flexDirection="row" alignItems="center" gap="4">
+            <Text variant="large" fontWeight="bold" color="text80">
+              Import NFT
+            </Text>
+
+            <Select
+              name="collectibleNetwork"
+              placeholder="Select Network"
+              value={selectedNetwork?.chainId.toString()}
+              options={selectOptions}
+              onValueChange={value =>
+                setSelectedNetwork(networks.find(n => n.chainId === Number(value)) || mainnetNetworks[0])
+              }
+            />
+          </Box>
 
-        <Box flexDirection="column">
-          {filteredCollectionList?.map((collectible, i) => {
-            return (
-              <Box
-                key={i}
-                flexDirection="row"
-                alignItems="center"
-                background={{ base: 'backgroundPrimary', hover: 'backgroundSecondary' }}
-                onClick={() => {
-                  toggleSelectCollectible(collectible.address)
-                }}
-                borderRadius="sm"
-                padding="3"
-                gap="4"
-              >
-                <Image src={collectible.logoURI} maxHeight="10" maxWidth="10" />
-                <Text variant="normal" fontWeight="semibold" color="text80">
-                  {collectible.name}
+          <Box flexDirection="column" style={{ gap: '5px' }}>
+            <Box gap="2">
+              <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC721)}>
+                <Text
+                  variant="normal"
+                  fontWeight="semibold"
+                  color={contractType === CollectibleContractTypeValues.ERC721 ? 'text100' : 'text50'}
+                  paddingX="4"
+                >
+                  ERC721
                 </Text>
-                <Box flexDirection="row" alignItems="center" marginLeft="auto" gap="2">
-                  {selectedCollection?.filter(c => c.address.includes(collectible.address)).length > 0 && (
-                    <>
-                      <Text variant="normal" fontWeight="bold" color="text80">
-                        Balance:
-                      </Text>
-                      {selectedCollection?.filter(c => c.address.includes(collectible.address))[0].info
-                        ?.balance ? (
-                        <Text variant="normal" fontWeight="bold" color="text80">
-                          {
-                            selectedCollection?.filter(c => c.address.includes(collectible.address))[0].info
-                              ?.balance
-                          }
-                        </Text>
-                      ) : (
-                        <Spinner size="md" marginRight="1" />
-                      )}
-                    </>
-                  )}
-                  <FilledRoundCheckBox
-                    checked={
-                      (selectedCollection?.filter(c => c.address.includes(collectible.address)).length || 0) >
-                      0
-                    }
+                {contractType === CollectibleContractTypeValues.ERC721 && (
+                  <Divider
+                    color="white"
+                    height="0.5"
+                    position="relative"
+                    marginY="0"
+                    style={{ top: '6px' }}
                   />
-                </Box>
+                )}
               </Box>
-            )
-          })}
-        </Box>
 
-        <input
-          type="file"
-          accept=".json"
-          style={{ display: 'none' }}
-          ref={fileInputRef}
-          onChange={handleFileChange}
-        />
-      </Box>
+              <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC1155)}>
+                <Text
+                  variant="normal"
+                  fontWeight="semibold"
+                  color={contractType === CollectibleContractTypeValues.ERC1155 ? 'text100' : 'text50'}
+                  paddingX="4"
+                >
+                  ERC1155
+                </Text>
+                {contractType === CollectibleContractTypeValues.ERC1155 && (
+                  <Divider
+                    color="white"
+                    height="0.5"
+                    position="relative"
+                    marginY="0"
+                    style={{ top: '6px' }}
+                  />
+                )}
+              </Box>
+            </Box>
+            <Divider marginY="0" />
+          </Box>
+
+          <Box flexDirection="column" gap="2">
+            <TextInput
+              leftIcon={SearchIcon}
+              value={collectionListFilter}
+              placeholder="Search for a collection"
+              onChange={(ev: ChangeEvent<HTMLInputElement>) => setCollectionListFilter(ev.target.value)}
+            />
+
+            <Button
+              label={
+                selectedNetwork && contractType
+                  ? `Import custom token list for ${contractType === CollectibleContractTypeValues.ERC721 ? 'ERC721' + ' on ' + selectedNetwork?.title : 'ERC1155' + ' on ' + selectedNetwork?.title}`
+                  : 'Select Network and Type to import custom token list'
+              }
+              variant="text"
+              shape="square"
+              marginTop="auto"
+              onClick={selectedNetwork && contractType ? handleImportCustomCollectibleList : undefined}
+            />
+          </Box>
+
+          <Box flexDirection="column">
+            {filteredCollectionList?.map((collection, i) => {
+              return (
+                <Box
+                  key={i}
+                  flexDirection="row"
+                  alignItems="center"
+                  background={{ base: 'backgroundPrimary', hover: 'backgroundSecondary' }}
+                  onClick={() => {
+                    setSelectedCollection(collection)
+                  }}
+                  borderRadius="sm"
+                  padding="3"
+                  gap="4"
+                >
+                  <Image src={collection.logoURI} maxHeight="10" maxWidth="10" />
+                  <Text variant="normal" fontWeight="semibold" color="text80">
+                    {collection.name}
+                  </Text>
+                </Box>
+              )
+            })}
+          </Box>
+
+          <input
+            type="file"
+            accept=".json"
+            style={{ display: 'none' }}
+            ref={fileInputRef}
+            onChange={handleFileChange}
+          />
+        </Box>
+      )}
 
       <Box marginTop="auto">
         <Box paddingX="6">
@@ -558,30 +521,47 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             </Box>
           )}
 
-          {isFetchingCollectibleInfo && collectibleManualAddress ? (
-            <Box alignItems="center" marginBottom="6" justifyContent="center">
+          {isFetchingCollectibleInfo && collectibleManualAddress && (
+            <Box alignItems="center" justifyContent="center">
               <Spinner size="lg" />
             </Box>
-          ) : (
-            collectibleInfo && (
-              <Card flexDirection="column" marginBottom="6" gap="2">
+          )}
+
+          {manualCollectibleInfo && !manualCollectibleInfo.isOwner && !isFetchingCollectibleInfo && (
+            <Box alignItems="center" justifyContent="center">
+              <Text variant="medium" color="warning">
+                You do not own this collectible
+              </Text>
+            </Box>
+          )}
+
+          {manualCollectibleInfo && manualCollectibleInfo.isOwner && !isFetchingCollectibleInfo && (
+            <Card flexDirection="row" gap="6">
+              <Image src={manualCollectibleInfo.image} style={{ width: '120px', height: 'auto' }} />
+
+              <Box flexDirection="column" gap="2">
                 <Text variant="medium" fontWeight="bold" color="text80">
-                  {collectibleInfo.name ?? ''}
+                  {manualCollectibleInfo.name ?? ''}
                 </Text>
                 <Text variant="small" color="text80">
                   Your Balance:
                 </Text>
                 <Text variant="medium" fontWeight="bold" color="text80">
-                  {collectibleInfo.balance}
+                  {Number(
+                    ethers.formatUnits(
+                      manualCollectibleInfo.balance as BigNumberish,
+                      manualCollectibleInfo.decimals ?? 0
+                    )
+                  )}
                 </Text>
-              </Card>
-            )
+              </Box>
+            </Card>
           )}
         </Box>
 
         <Divider marginY="0" />
 
-        <Box>
+        <Box width="full">
           <Box flexDirection="row" padding="6" gap="2">
             {isAddingCollectibleManually ? (
               <Button
@@ -591,7 +571,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
                 onClick={() => {
                   setIsAddingCollectibleManually(false)
                   setCollectibleManualAddress('')
-                  setCollectibleInfo(undefined)
+                  setManualCollectibleInfo(undefined)
                 }}
               />
             ) : (
@@ -611,7 +591,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
               label="Add"
               variant="primary"
               shape="square"
-              disabled={(collectibleInfo === undefined && !selectedCollection.length) || isAddingCollectible}
+              disabled={(!manualCollectibleInfo && !selectedCollectibles.length) || isAddingCollection}
               onClick={() => {
                 handleAdd()
               }}
diff --git a/src/components/wallet/tokens/AddCustomTokenList.tsx b/src/components/wallet/tokens/AddCustomTokenList.tsx
deleted file mode 100644
index c2a0754..0000000
--- a/src/components/wallet/tokens/AddCustomTokenList.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '@0xsequence/design-system'
-
-export default function AddCustomTokenList() {
-  return <Button />
-}
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index b180cea..3cd1704 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -32,7 +32,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
 
   const toast = useToast()
 
-  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>()
+  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>(mainnetNetworks[0])
   const [tokenManualAddress, setTokenManualAddress] = useState<string>('')
 
   const [tokenInfo, setTokenInfo] = useState<UserAddedTokenInitialInfo>()
@@ -123,7 +123,9 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
             symbol: tokenInfo.symbol,
             decimals: tokenInfo.decimals
           })
-        } else if (selectedTokens.length > 0) {
+        }
+
+        if (selectedTokens.length > 0) {
           selectedTokens.map(async token => {
             await tokenStore.addToken({
               chainId: selectedNetwork.chainId,
@@ -133,8 +135,6 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
               decimals: token.info.decimals
             })
           })
-        } else {
-          throw new Error('Invalid token data')
         }
 
         setIsAddingToken(false)
@@ -199,7 +199,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   }
 
   return (
-    <Box flexDirection="column" height="full">
+    <Box flexDirection="column" height="fit" minHeight="full">
       <Box flexDirection="column" height="full" padding="6" gap="6">
         <Box flexDirection="row" alignItems="center" gap="4">
           <Text variant="large" fontWeight="bold" color="text80">
@@ -210,7 +210,10 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
             name="tokenNetwork"
             placeholder="Select Network"
             options={selectOptions}
-            onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
+            value={selectedNetwork?.chainId.toString()}
+            onValueChange={value =>
+              setSelectedNetwork(networks.find(n => n.chainId === Number(value)) || mainnetNetworks[0])
+            }
           />
         </Box>
 
@@ -358,7 +361,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
               label="Add"
               variant="primary"
               shape="square"
-              disabled={(tokenInfo === undefined && !selectedTokens.length) || isAddingToken}
+              disabled={(!tokenInfo && !selectedTokens.length) || isAddingToken}
               onClick={() => {
                 handleAdd()
               }}

From f4ea715845c074a3cf907f558bf562c941a96ce6 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Mon, 16 Dec 2024 09:58:08 -0500
Subject: [PATCH 08/10] fixed pending txn indicator ui bug

---
 src/components/wallet/PendingTxn.tsx          | 38 +++++----
 .../wallet/collectibles/ImportCollectible.tsx | 82 +++++++++++--------
 src/stores/WalletStore.ts                     |  7 +-
 3 files changed, 73 insertions(+), 54 deletions(-)

diff --git a/src/components/wallet/PendingTxn.tsx b/src/components/wallet/PendingTxn.tsx
index 7daed7b..8cb4144 100644
--- a/src/components/wallet/PendingTxn.tsx
+++ b/src/components/wallet/PendingTxn.tsx
@@ -1,4 +1,4 @@
-import { Box, Spinner, Text } from '@0xsequence/design-system'
+import { Box, Spinner, Text, truncateAddress, useMediaQuery } from '@0xsequence/design-system'
 
 import NetworkTag from '~/components/network/NetworkTag'
 
@@ -13,31 +13,35 @@ export default function PendingTxn({
   to: string
   amount?: string
 }) {
+  const isMobile = useMediaQuery('isMobile')
+
   return (
     <Box flexDirection="column" width="full" gap="5" paddingTop="7">
       <Text variant="normal" fontWeight="bold" color="text80">
         Pending transactions
       </Text>
       <Box background="backgroundSecondary" borderRadius="sm" alignItems="center" padding="4" gap="5">
-        <Spinner size="lg" />
-
-        <Box flexDirection="column" gap="1">
-          <Box flexDirection="row" alignItems="center" gap="1">
-            <Text variant="normal" fontWeight="medium" color="text80">
-              Sending {amount} {symbol} on
-            </Text>
-
-            <NetworkTag chainId={chainId} paddingTop="0" paddingBottom="1" />
+        <Spinner size="md" width="full" />
 
-            <Text variant="normal" fontWeight="medium" color="text80">
-              to
-            </Text>
-            <Text variant="normal" fontWeight="medium" color="text80" style={{ fontFamily: 'monospace' }}>
-              {to}
-            </Text>
+        <Box flexDirection="column" gap="1" width="fit">
+          <Box flexDirection={isMobile ? 'column' : 'row'} gap="1">
+            <Box alignItems="center" gap="1">
+              <Text variant="normal" fontWeight="medium" color="text80">
+                Sending {Number(amount).toFixed(4)} {symbol} on
+              </Text>
+              <NetworkTag chainId={chainId} paddingTop="0" paddingBottom="1" />
+            </Box>
+            <Box alignItems="center" gap="1">
+              <Text variant="normal" fontWeight="medium" color="text80">
+                to
+              </Text>
+              <Text variant="normal" fontWeight="medium" color="text80" style={{ fontFamily: 'monospace' }}>
+                {truncateAddress(to)}
+              </Text>
+            </Box>
           </Box>
 
-          <Text variant="normal" fontWeight="medium" color="text50">
+          <Text variant="normal" fontWeight="medium" color="text50" width="fit">
             Your external wallet will prompt you to confirm the transaction
           </Text>
         </Box>
diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
index eedadf6..e42fbe9 100644
--- a/src/components/wallet/collectibles/ImportCollectible.tsx
+++ b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -38,7 +38,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   const toast = useToast()
 
   const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>(mainnetNetworks[0])
-  const [collectibleManualAddress, setCollectibleManualAddress] = useState<string | undefined>()
+  const [collectibleManualAddress, setCollectibleManualAddress] = useState<string>('')
   const [collectibleManualTokenId, setCollectibleManualTokenId] = useState<number | undefined>()
   const [contractType, setContractType] = useState<CollectibleContractType>(
     CollectibleContractTypeValues.ERC721
@@ -95,6 +95,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             contractType
           })
           .then(response => {
+            console.log('response', response)
             setManualCollectibleInfo(response)
           })
       }
@@ -104,11 +105,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     fetchCollectibleInfo()
   }, [selectedNetwork, contractType, collectibleManualAddress, collectibleManualTokenId])
 
-  useEffect(() => {
-    if (selectedNetwork && contractType && selectedCollection) {
-    }
-  }, [selectedNetwork, contractType, selectedCollection, selectedCollectibles])
-
   useEffect(() => {
     const fetchQueriedCollectibles = async () => {
       setQueriedCollectibles([])
@@ -126,6 +122,8 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             tokenId: tokenId
           })
 
+          // TODO: potential improvement to show user that the collectible is not owned
+
           if (collectibleInfo.isOwner) {
             setQueriedCollectibles(prev => [
               ...prev,
@@ -149,10 +147,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     fetchQueriedCollectibles()
   }, [queryCollectibleTokenIdsMap])
 
-  useEffect(() => {
-    console.log(selectedCollectibles)
-  }, [selectedCollectibles])
-
   useEffect(() => {
     const fetchCollectionList = async () => {
       if (selectedNetwork) {
@@ -220,7 +214,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
         description:
           "You'll be able to see this collectible on your browser as long as you don't clear your cache."
       })
-      resetInputs()
       onClose()
     } catch (error) {
       console.error(error)
@@ -232,11 +225,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     }
   }
 
-  const resetInputs = () => {
-    setCollectibleManualAddress(undefined)
-    setCollectibleManualTokenId(undefined)
-  }
-
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (file) {
@@ -506,29 +494,49 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
       <Box marginTop="auto">
         <Box paddingX="6">
           {isAddingCollectibleManually && (
-            <Box flexDirection="column" marginBottom="6" gap="0.5">
-              <Text variant="normal" fontWeight="medium" color="text80">
-                Collectible Address
-              </Text>
+            <Box flexDirection="column" gap="3">
+              <Box flexDirection="column" gap="0.5">
+                <Text variant="normal" fontWeight="medium" color="text80">
+                  Collectible Address
+                </Text>
 
-              <TextInput
-                name="collectibleAddress"
-                value={collectibleManualAddress ?? ''}
-                onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-                  setCollectibleManualAddress(ev.target.value)
-                }}
-              />
+                <TextInput
+                  name="collectibleAddress"
+                  value={collectibleManualAddress ?? ''}
+                  onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                    setCollectibleManualAddress(ev.target.value)
+                  }}
+                />
+              </Box>
+              <Box flexDirection="column" marginBottom="6" gap="0.5">
+                <Text variant="normal" fontWeight="medium" color="text80">
+                  Token ID
+                </Text>
+
+                <TextInput
+                  name="collectibleTokenId"
+                  value={collectibleManualTokenId ?? ''}
+                  onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                    if (ev.target.value === '') {
+                      setCollectibleManualTokenId(undefined)
+                      return
+                    }
+
+                    setCollectibleManualTokenId(ev.target.value as unknown as number)
+                  }}
+                />
+              </Box>
             </Box>
           )}
 
-          {isFetchingCollectibleInfo && collectibleManualAddress && (
-            <Box alignItems="center" justifyContent="center">
+          {isFetchingCollectibleInfo && collectibleManualAddress && collectibleManualTokenId && (
+            <Box alignItems="center" justifyContent="center" marginBottom="6">
               <Spinner size="lg" />
             </Box>
           )}
 
           {manualCollectibleInfo && !manualCollectibleInfo.isOwner && !isFetchingCollectibleInfo && (
-            <Box alignItems="center" justifyContent="center">
+            <Box alignItems="center" justifyContent="center" marginBottom="6">
               <Text variant="medium" color="warning">
                 You do not own this collectible
               </Text>
@@ -547,12 +555,14 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
                   Your Balance:
                 </Text>
                 <Text variant="medium" fontWeight="bold" color="text80">
-                  {Number(
-                    ethers.formatUnits(
-                      manualCollectibleInfo.balance as BigNumberish,
-                      manualCollectibleInfo.decimals ?? 0
-                    )
-                  )}
+                  {manualCollectibleInfo.balance
+                    ? Number(
+                        ethers.formatUnits(
+                          manualCollectibleInfo.balance as BigNumberish,
+                          manualCollectibleInfo.decimals ?? 0
+                        )
+                      )
+                    : 1}
                 </Text>
               </Box>
             </Card>
diff --git a/src/stores/WalletStore.ts b/src/stores/WalletStore.ts
index dada8e6..32f7de7 100644
--- a/src/stores/WalletStore.ts
+++ b/src/stores/WalletStore.ts
@@ -202,8 +202,13 @@ export class WalletStore {
       }
 
       return { hash }
-    } catch {
+    } catch (error) {
       this.isSendingTokenTransaction.set(undefined)
+      this.toast({
+        variant: 'error',
+        title: 'External wallet error',
+        description: (error as any).message
+      })
       throw new Error('Could not create transaction')
     }
   }

From 9b6e859ef5ec097ae3c36548ad728ac04f73af5f Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Mon, 16 Dec 2024 13:35:35 -0500
Subject: [PATCH 09/10] removed comments and added names for networks

---
 src/components/header/MobileDrawerContent.tsx | 10 ------
 src/constants/network.ts                      | 32 +++++++++----------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/components/header/MobileDrawerContent.tsx b/src/components/header/MobileDrawerContent.tsx
index b3bce31..315ef9f 100644
--- a/src/components/header/MobileDrawerContent.tsx
+++ b/src/components/header/MobileDrawerContent.tsx
@@ -58,12 +58,7 @@ export const MobileDrawerContent = () => {
         style={{ width: '75%' }}
       >
         <Box
-          // flexDirection="row"
-          // alignItems="center"
-          // background="buttonGlass"
-          // borderRadius="sm"
           gap="2"
-          // style={{ cursor: 'pointer', padding: '8px 16px 8px 8px' }}
           onClick={() => window.open('https://docs.sequence.xyz/')}
         >
           <Image src={externalArrowIcon} height="5" />
@@ -73,12 +68,7 @@ export const MobileDrawerContent = () => {
         </Box>
 
         <Box
-          // flexDirection="row"
-          // alignItems="center"
-          // background="buttonGlass"
-          // borderRadius="sm"
           gap="2"
-          // style={{ cursor: 'pointer', padding: '8px 16px 8px 8px' }}
           onClick={() => {
             openNetworkModal()
             toggleNavDrawer(false)
diff --git a/src/constants/network.ts b/src/constants/network.ts
index bc24717..2c41c9e 100644
--- a/src/constants/network.ts
+++ b/src/constants/network.ts
@@ -3,7 +3,7 @@ export const DEFAULT_PUBLIC_RPC_LIST: Map<number, [string | undefined, string]>
   [1, ['mainnet', 'https://ethereum-rpc.publicnode.com']],
   [11155111, ['sepolia', 'https://ethereum-sepolia-rpc.publicnode.com']],
   [137, ['polygon', 'https://polygon-bor-rpc.publicnode.com']],
-  [80002, [undefined, 'https://rpc-amoy.polygon.technology']],
+  [80002, ['polygon-amoy', 'https://rpc-amoy.polygon.technology']], // not on sequence directory repo
   [1101, ['polygon-zkevm', 'https://zkevm-rpc.com']],
   [56, ['bnb', 'https://bsc-rpc.publicnode.com']],
   [97, ['bnb-testnet', 'https://bsc-testnet-rpc.publicnode.com']],
@@ -19,23 +19,23 @@ export const DEFAULT_PUBLIC_RPC_LIST: Map<number, [string | undefined, string]>
   [84532, ['base-sepolia', 'https://base-sepolia-rpc.publicnode.com']],
   [19011, ['homeverse', 'https://rpc.mainnet.oasys.homeverse.games']],
   [40875, ['homeverse-testnet', 'https://rpc.testnet.oasys.homeverse.games']],
-  [660279, [undefined, 'https://xai-chain.net/rpc']],
-  [37714555429, [undefined, 'https://testnet-v2.xai-chain.net/rpc']],
+  [660279, ['xai', 'https://xai-chain.net/rpc']], // not on sequence directory repo
+  [37714555429, ['xai-testnet', 'https://testnet-v2.xai-chain.net/rpc']], // not on sequence directory repo
   [3776, ['astar-zkevm', 'https://rpc.startale.com/astar-zkevm']],
   [6038361, ['astar-zkyoto', 'https://rpc.startale.com/zkyoto']],
-  [2730, [undefined, 'https://xr-sepolia-testnet.rpc.caldera.xyz/http']],
-  [40, [undefined, 'https://mainnet-asia.telos.net/evm']],
-  [1946, [undefined, 'https://rpc.minato.soneium.org']],
-  [7668, [undefined, 'https://root.rootnet.live/archive']],
-  [8333, [undefined, 'https://mainnet-rpc.b3.fun']],
-  [13371, [undefined, 'https://rpc.immutable.com']],
-  [33139, [undefined, 'https://rpc.apechain.com']],
-  [81457, [undefined, 'https://blast-rpc.publicnode.com']],
-  [33111, [undefined, 'https://rpc.curtis.apechain.com']],
-  [1482601649, [undefined, 'https://mainnet.skalenodes.com/v1/green-giddy-denebola']],
-  [37084624, [undefined, 'https://testnet.skalenodes.com/v1/lanky-ill-funny-testnet']],
-  [13473, [undefined, 'https://rpc.immutable.com']],
-  [7672, [undefined, 'https://porcini.rootnet.app/archive']]
+  [2730, ['xr-sepolia-testnet', 'https://xr-sepolia-testnet.rpc.caldera.xyz/http']], // not on sequence directory repo
+  [40, ['telos', 'https://mainnet-asia.telos.net/evm']], // not on sequence directory repo
+  [1946, ['minato', 'https://rpc.minato.soneium.org']], // not on sequence directory repo
+  [7668, ['rootnet', 'https://root.rootnet.live/archive']], // not on sequence directory repo
+  [8333, ['b3', 'https://mainnet-rpc.b3.fun']], // not on sequence directory repo
+  [13371, ['immutable', 'https://rpc.immutable.com']], // not on sequence directory repo
+  [33139, ['apechain', 'https://rpc.apechain.com']], // not on sequence directory repo
+  [81457, ['blast', 'https://blast-rpc.publicnode.com']], // not on sequence directory repo
+  [33111, ['curtis', 'https://rpc.curtis.apechain.com']], // not on sequence directory repo
+  [1482601649, ['green-giddy-denebola', 'https://mainnet.skalenodes.com/v1/green-giddy-denebola']], // not on sequence directory repo
+  [37084624, ['lanky-ill-funny-testnet', 'https://testnet.skalenodes.com/v1/lanky-ill-funny-testnet']], // not on sequence directory repo
+  [13473, ['immutable', 'https://rpc.immutable.com']], // not on sequence directory repo
+  [7672, ['porcini', 'https://porcini.rootnet.app/archive']] // not on sequence directory repo
 ])
 
 // These are hardhat test networks

From 4b6e0845290d2e22aacb45e8b5c867c6456733a4 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Mon, 16 Dec 2024 14:53:14 -0500
Subject: [PATCH 10/10] added token/collection list reset button

---
 src/components/header/WalletDropdownMenu.tsx  |  7 ++-
 .../wallet/collectibles/ImportCollectible.tsx | 36 ++++++++++++--
 src/components/wallet/tokens/ImportToken.tsx  | 33 +++++++++++--
 src/stores/CollectibleStore.ts                | 49 ++++++++++++++++---
 src/stores/TokenStore.ts                      | 25 ++++++++--
 src/utils/truncatemiddle.tsx                  |  9 ----
 6 files changed, 125 insertions(+), 34 deletions(-)
 delete mode 100644 src/utils/truncatemiddle.tsx

diff --git a/src/components/header/WalletDropdownMenu.tsx b/src/components/header/WalletDropdownMenu.tsx
index c7b8128..5e57d6c 100644
--- a/src/components/header/WalletDropdownMenu.tsx
+++ b/src/components/header/WalletDropdownMenu.tsx
@@ -7,14 +7,13 @@ import {
   GradientAvatar,
   Modal,
   SignoutIcon,
-  Text
+  Text,
+  truncateAddress
 } from '@0xsequence/design-system'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
-import { truncateMiddle } from '~/utils/truncatemiddle'
-
 import { useObservable, useStore } from '~/stores'
 import { AuthStore } from '~/stores/AuthStore'
 
@@ -52,7 +51,7 @@ export default function SettingsDropdownMenu() {
             <Box flexDirection="row" alignItems="center" gap="2">
               <GradientAvatar address={walletAddress} size="sm" />
               <Text variant="normal" fontWeight="bold" color="text100">
-                {truncateMiddle(walletAddress!, 4, 4)}
+                {truncateAddress(walletAddress!, 2, 4)}
               </Text>
             </Box>
           }
diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
index e42fbe9..13f4bcb 100644
--- a/src/components/wallet/collectibles/ImportCollectible.tsx
+++ b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -47,6 +47,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   const [isAddingCollection, setIsAddingCollection] = useState(false)
 
   const [collectionList, setCollectionList] = useState<any[]>([])
+  const [collectionListDate, setCollectionListDate] = useState<Date>()
   const [collectionListFilter, setCollectionListFilter] = useState<string>('')
   const [filteredCollectionList, setFilteredCollectionList] = useState<any[]>([])
 
@@ -78,9 +79,13 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     const fetchCollectibleList = async () => {
       if (selectedNetwork && contractType) {
         if (contractType === CollectibleContractTypeValues.ERC721) {
-          setCollectionList(await collectibleStore.getDefaultERC721List(selectedNetwork.chainId))
+          const data = await collectibleStore.getERC721List(selectedNetwork.chainId)
+          setCollectionList(data.tokens)
+          setCollectionListDate(new Date(data.date))
         } else if (contractType === CollectibleContractTypeValues.ERC1155) {
-          setCollectionList(await collectibleStore.getDefaultERC1155List(selectedNetwork.chainId))
+          const data = await collectibleStore.getERC1155List(selectedNetwork.chainId)
+          setCollectionList(data.tokens)
+          setCollectionListDate(new Date(data.date))
         }
       }
     }
@@ -151,9 +156,13 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     const fetchCollectionList = async () => {
       if (selectedNetwork) {
         if (contractType === CollectibleContractTypeValues.ERC721) {
-          setCollectionList(await collectibleStore.getDefaultERC721List(selectedNetwork.chainId))
+          const data = await collectibleStore.getERC721List(selectedNetwork.chainId)
+          setCollectionList(data.tokens)
+          setCollectionListDate(new Date(data.date))
         } else if (contractType === CollectibleContractTypeValues.ERC1155) {
-          setCollectionList(await collectibleStore.getDefaultERC1155List(selectedNetwork.chainId))
+          const data = await collectibleStore.getERC1155List(selectedNetwork.chainId)
+          setCollectionList(data.tokens)
+          setCollectionListDate(new Date(data.date))
         }
       }
     }
@@ -488,6 +497,25 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             ref={fileInputRef}
             onChange={handleFileChange}
           />
+
+          {selectedNetwork && (
+            <Button
+              label={`RESET LIST - last updated: ${collectionListDate?.toLocaleString()}`}
+              variant="text"
+              color="text50"
+              onClick={async () => {
+                if (contractType === CollectibleContractTypeValues.ERC721) {
+                  const collectionData = await collectibleStore.resetERC721List(selectedNetwork.chainId)
+                  setCollectionList(collectionData.tokens)
+                  setCollectionListDate(new Date(collectionData.date))
+                } else {
+                  const collectionData = await collectibleStore.resetERC1155List(selectedNetwork.chainId)
+                  setCollectionList(collectionData.tokens)
+                  setCollectionListDate(new Date(collectionData.date))
+                }
+              }}
+            />
+          )}
         </Box>
       )}
 
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index 3cd1704..118b173 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -42,6 +42,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   const [isAddingTokenManually, setIsAddingTokenManually] = useState(false)
 
   const [tokenList, setTokenList] = useState<any[]>([])
+  const [tokenListDate, setTokenListDate] = useState<Date | undefined>()
   const [tokenListFilter, setTokenListFilter] = useState<string>('')
   const [filteredTokenList, setFilteredTokenList] = useState<any[]>([])
 
@@ -76,7 +77,18 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   useEffect(() => {
     const fetchTokenList = async () => {
       if (selectedNetwork) {
-        setTokenList(await tokenStore.getDefaultTokenList(selectedNetwork.chainId))
+        try {
+          const tokenData = await tokenStore.getTokenList(selectedNetwork.chainId)
+          console.log('tokenData', tokenData)
+
+          const tokenList = tokenData.tokens
+          const tokenListDate = new Date(tokenData.date)
+          setTokenList(tokenList)
+          setTokenListDate(tokenListDate)
+        } catch {
+          setTokenList([])
+          setTokenListDate(undefined)
+        }
       }
     }
 
@@ -84,10 +96,10 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   }, [selectedNetwork])
 
   useEffect(() => {
-    if (!tokenListFilter) return setFilteredTokenList(tokenList?.slice(0, 8))
+    if (!tokenListFilter) return setFilteredTokenList(tokenList.slice(0, 8))
     setFilteredTokenList(
       tokenList
-        ?.filter(token => token.symbol && token.symbol.toLowerCase().includes(tokenListFilter.toLowerCase()))
+        .filter(token => token.symbol && token.symbol.toLowerCase().includes(tokenListFilter.toLowerCase()))
         .slice(0, 8)
     )
   }, [tokenList, tokenListFilter])
@@ -232,8 +244,6 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
                 : 'Select Network to import custom token list'
             }
             variant="text"
-            shape="square"
-            marginTop="auto"
             onClick={selectedNetwork ? handleImportCustomTokenList : undefined}
           />
         </Box>
@@ -288,6 +298,19 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
           ref={fileInputRef}
           onChange={handleFileChange}
         />
+
+        {tokenListDate && (
+          <Button
+            label={`RESET LIST - last updated: ${tokenListDate?.toLocaleString()}`}
+            variant="text"
+            color="text50"
+            onClick={async () => {
+              const tokenData = await tokenStore.resetTokenList(selectedNetwork.chainId)
+              setTokenList(tokenData.tokens)
+              setTokenListDate(new Date(tokenData.date))
+            }}
+          />
+        )}
       </Box>
 
       <Box marginTop="auto">
diff --git a/src/stores/CollectibleStore.ts b/src/stores/CollectibleStore.ts
index aa59652..3cb5745 100644
--- a/src/stores/CollectibleStore.ts
+++ b/src/stores/CollectibleStore.ts
@@ -218,7 +218,7 @@ export class CollectibleStore {
     this.userCollectibles.set(filteredBalances)
   }
 
-  async getDefaultERC721List(chainId: number) {
+  async getERC721List(chainId: number) {
     const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
     if (!chainName) {
       return []
@@ -232,14 +232,16 @@ export class CollectibleStore {
         `https://raw.githubusercontent.com/0xsequence/token-directory/master/index/${chainName}/erc721.json`
       ).then(res => res.json())
 
-      await db.put(IndexedDBKey.ERC721, fetchedTokenList.tokens, chainName)
-      return fetchedTokenList.tokens
+      const data = { tokens: fetchedTokenList.tokens, date: new Date().toISOString() }
+
+      await db.put(IndexedDBKey.ERC721, data, chainName)
+      return data
     }
 
     return tokenList
   }
 
-  async getDefaultERC1155List(chainId: number) {
+  async getERC1155List(chainId: number) {
     const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
     if (!chainName) {
       return []
@@ -248,13 +250,16 @@ export class CollectibleStore {
     const db = await getIndexedDB(IndexedDBKey.ERC1155)
 
     const tokenList = await db.get(IndexedDBKey.ERC1155, chainName)
+
     if (!tokenList) {
       const fetchedTokenList = await fetch(
         `https://raw.githubusercontent.com/0xsequence/token-directory/master/index/${chainName}/erc1155.json`
       ).then(res => res.json())
 
-      await db.put(IndexedDBKey.ERC1155, fetchedTokenList.tokens, chainName)
-      return fetchedTokenList.tokens
+      const data = { tokens: fetchedTokenList.tokens, date: new Date().toISOString() }
+
+      await db.put(IndexedDBKey.ERC1155, data, chainName)
+      return data
     }
 
     return tokenList
@@ -266,8 +271,10 @@ export class CollectibleStore {
       return []
     }
 
+    const data = { tokens: collectibleList, date: new Date().toISOString() }
+
     const db = await getIndexedDB(IndexedDBKey.ERC721)
-    await db.put(IndexedDBKey.ERC721, collectibleList, chainName)
+    await db.put(IndexedDBKey.ERC721, data, chainName)
   }
 
   async addExternalERC1155List(chainId: number, collectibleList: any[]) {
@@ -276,7 +283,33 @@ export class CollectibleStore {
       return []
     }
 
+    const data = { tokens: collectibleList, date: new Date().toISOString() }
+
     const db = await getIndexedDB(IndexedDBKey.ERC1155)
-    await db.put(IndexedDBKey.ERC1155, collectibleList, chainName)
+    await db.put(IndexedDBKey.ERC1155, data, chainName)
+  }
+
+  async resetERC721List(chainId: number) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC721)
+    await db.delete(IndexedDBKey.ERC721, chainName)
+
+    return await this.getERC721List(chainId)
+  }
+
+  async resetERC1155List(chainId: number) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC1155)
+    await db.delete(IndexedDBKey.ERC1155, chainName)
+
+    return await this.getERC1155List(chainId)
   }
 }
diff --git a/src/stores/TokenStore.ts b/src/stores/TokenStore.ts
index 26ca273..7d71da2 100644
--- a/src/stores/TokenStore.ts
+++ b/src/stores/TokenStore.ts
@@ -267,7 +267,7 @@ export class TokenStore {
     }
   }
 
-  async getDefaultTokenList(chainId: number) {
+  async getTokenList(chainId: number) {
     const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
     if (!chainName) {
       return []
@@ -276,13 +276,16 @@ export class TokenStore {
     const db = await getIndexedDB(IndexedDBKey.ERC20)
 
     const tokenList = await db.get(IndexedDBKey.ERC20, chainName)
+
     if (!tokenList) {
       const fetchedTokenList = await fetch(
         `https://raw.githubusercontent.com/0xsequence/token-directory/master/index/${chainName}/erc20.json`
       ).then(res => res.json())
 
-      await db.put(IndexedDBKey.ERC20, fetchedTokenList.tokens, chainName)
-      return fetchedTokenList.tokens
+      const data = { tokens: fetchedTokenList.tokens, date: new Date().toISOString() }
+
+      await db.put(IndexedDBKey.ERC20, data, chainName)
+      return data
     }
 
     return tokenList
@@ -294,8 +297,22 @@ export class TokenStore {
       return []
     }
 
+    const data = { tokens: tokenList, date: new Date().toISOString() }
+
+    const db = await getIndexedDB(IndexedDBKey.ERC20)
+    await db.put(IndexedDBKey.ERC20, data, chainName)
+  }
+
+  async resetTokenList(chainId: number) {
+    const chainName = DEFAULT_PUBLIC_RPC_LIST.get(chainId)?.[0]
+    if (!chainName) {
+      return []
+    }
+
     const db = await getIndexedDB(IndexedDBKey.ERC20)
-    await db.put(IndexedDBKey.ERC20, tokenList, chainName)
+    await db.delete(IndexedDBKey.ERC20, chainName)
+
+    return await this.getTokenList(chainId)
   }
 
   clear() {
diff --git a/src/utils/truncatemiddle.tsx b/src/utils/truncatemiddle.tsx
deleted file mode 100644
index af1c096..0000000
--- a/src/utils/truncatemiddle.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export function truncateMiddle(str: string, frontChars: number = 6, backChars: number = 4) {
-  if (str.length <= frontChars + backChars + 3) {
-    // 3 for '...'
-    return str
-  }
-  const start = str.slice(0, frontChars)
-  const end = str.slice(-backChars)
-  return `${start}...${end}`
-}