Added basic erc20 token list, WIP for nfts and uploading custom token…

…lists
0xsequence · Dec 6, 2024 · b0c0c58 · b0c0c58
1 parent d7148a8
commit b0c0c58
Show file tree

Hide file tree

Showing 18 changed files with 381 additions and 147 deletions.
diff --git 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
@@ -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
@@ -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 }
diff --git 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
@@ -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
@@ -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
@@ -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,