added default and custom token lists to import (#49)

* Added basic erc20 token list, WIP for nfts and uploading custom tokenlists * importing: added logos to network and tokens * overhauled import token modal to support default token lists * refactored project structure * added importing of custom token lists with a set format * WIP for adding collection list * finished collectible list import * fixed pending txn indicator ui bug * removed comments and added names for networks * added token/collection list reset button
0xsequence · Dec 18, 2024 · 5ca364d · 5ca364d
1 parent d7148a8
commit 5ca364d
Show file tree

Hide file tree

Showing 36 changed files with 1,255 additions and 470 deletions.
diff --git a/src/components/PendingTxn.tsx b/src/components/PendingTxn.tsx
diff --git a/...mponents/recovery/MobileDrawerContent.tsx → ...components/header/MobileDrawerContent.tsx b/...mponents/recovery/MobileDrawerContent.tsx → ...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,28 @@ 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
+          gap="2"
+          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
+          gap="2"
+          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 → src/components/header/RecoveryHeader.tsx b/src/components/recovery/RecoveryHeader.tsx → 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 → src/components/header/WalletDropdownMenu.tsx b/src/components/wallet/WalletDropdownMenu.tsx → src/components/header/WalletDropdownMenu.tsx
@@ -7,18 +7,17 @@ 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'
 
-import ConfirmSignOut from './ConfirmSignOut'
+import ConfirmSignOut from '~/components/wallet/ConfirmSignOut'
 
 export default function SettingsDropdownMenu() {
   const authStore = useStore(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/recovery/styles.css.ts → src/components/header/styles.css.ts b/src/components/recovery/styles.css.ts → 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/helpers/ButtonWithIcon.tsx → src/components/misc/ButtonWithIcon.tsx b/src/components/helpers/ButtonWithIcon.tsx → src/components/misc/ButtonWithIcon.tsx
diff --git a/src/components/helpers/ExternalIcon.tsx → src/components/misc/ExternalIcon.tsx b/src/components/helpers/ExternalIcon.tsx → src/components/misc/ExternalIcon.tsx
diff --git a/src/components/helpers/FilledCheckBox.tsx → src/components/misc/FilledCheckBox.tsx b/src/components/helpers/FilledCheckBox.tsx → src/components/misc/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/...omponents/helpers/FilledRoundCheckBox.tsx → src/components/misc/FilledRoundCheckBox.tsx b/...omponents/helpers/FilledRoundCheckBox.tsx → src/components/misc/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 default function FilledCheckBox({ checked }: { checked: boolean }) {
+export function FilledRoundCheckBox({ checked, ...rest }: { checked: boolean } & BoxProps) {
   return (
     <Box
       width={`${ROUND_CHECKBOX_SIZE}`}
@@ -14,6 +14,7 @@ export default function FilledCheckBox({ 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/misc/index.tsx 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 }
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/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
@@ -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/misc'
 
 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/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/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/wallet/PendingTxn.tsx b/src/components/wallet/PendingTxn.tsx
@@ -0,0 +1,51 @@
+import { Box, Spinner, Text, truncateAddress, useMediaQuery } from '@0xsequence/design-system'
+
+import NetworkTag from '~/components/network/NetworkTag'
+
+export default function PendingTxn({
+  symbol,
+  chainId,
+  to,
+  amount
+}: {
+  symbol: string
+  chainId: number
+  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="md" width="full" />
+
+        <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" width="fit">
+            Your external wallet will prompt you to confirm the transaction
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
diff --git 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
@@ -97,7 +97,15 @@ export default function CollectibleList({
       </Box>
 
       {isImportCollectibleViewOpen && (
-        <Modal size="sm" onClose={() => setIsImportCollectibleViewOpen(false)}>
+        <Modal
+          onClose={() => setIsImportCollectibleViewOpen(false)}
+          contentProps={{
+            style: {
+              scrollbarColor: 'gray black',
+              scrollbarWidth: 'thin'
+            }
+          }}
+        >
           <ImportCollectible onClose={() => setIsImportCollectibleViewOpen(false)} />
         </Modal>
       )}