refactored project structure

src/components/recovery/MobileDrawerContent.tsx → 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>
   )

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'

src/components/wallet/WalletDropdownMenu.tsx → 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)

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

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)

src/components/PendingTxn.tsx → 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,

src/components/wallet/ExternalWallet.tsx → 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'
 

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>

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'

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"

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'

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