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] 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)
+  }
 }