added token/collection list reset button

0xsequence · Dec 16, 2024 · 4b6e084 · 4b6e084
1 parent 9b6e859
commit 4b6e084
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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,18 +77,29 @@ 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)
+        }
       }
     }
 
     fetchTokenList()
   }, [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
@@ -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
@@ -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