improved styling and added confirmation for resetting token list (#50)

0xsequence · Dec 19, 2024 · d8cbb55 · d8cbb55
1 parent 5ca364d
commit d8cbb55
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 25 deletions.
diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -5,6 +5,7 @@ import {
   ChevronLeftIcon,
   Divider,
   Image,
+  Modal,
   SearchIcon,
   Select,
   Spinner,
@@ -45,6 +46,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   )
 
   const [isAddingCollection, setIsAddingCollection] = useState(false)
+  const [confirmRefreshList, setConfirmRefreshList] = useState(false)
 
   const [collectionList, setCollectionList] = useState<any[]>([])
   const [collectionListDate, setCollectionListDate] = useState<Date>()
@@ -334,6 +336,20 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     )
   }
 
+  const handleRefreshCollectibleList = 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))
+    }
+
+    setConfirmRefreshList(false)
+  }
+
   return (
     <Box flexDirection="column" height="fit" minHeight="full">
       {selectedCollection ? (
@@ -445,7 +461,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             <Divider marginY="0" />
           </Box>
 
-          <Box flexDirection="column" gap="2">
+          <Box flexDirection="column" gap="3">
             <TextInput
               leftIcon={SearchIcon}
               value={collectionListFilter}
@@ -498,22 +514,13 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             onChange={handleFileChange}
           />
 
-          {selectedNetwork && (
+          {collectionListDate && (
             <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))
-                }
-              }}
+              label={`Refresh list - last updated: ${collectionListDate?.toLocaleString()}`}
+              shape="square"
+              size="xs"
+              color="text80"
+              onClick={() => setConfirmRefreshList(true)}
             />
           )}
         </Box>
@@ -637,6 +644,21 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
           </Box>
         </Box>
       </Box>
+
+      {confirmRefreshList && (
+        <Modal size="sm">
+          <Box flexDirection="column" padding="6" gap="6">
+            <Text variant="normal" fontWeight="medium" color="text80">
+              {`Refreshing list will remove the manually imported list for ${selectedNetwork?.title}. Are you sure you want to continue?`}
+            </Text>
+
+            <Box alignSelf="flex-end" flexDirection="row" gap="3">
+              <Button label="Cancel" size="md" shape="square" onClick={() => setConfirmRefreshList(false)} />
+              <Button label="Confirm" variant="danger" size="md" shape="square" onClick={handleRefreshCollectibleList} />
+            </Box>
+          </Box>
+        </Modal>
+      )}
     </Box>
   )
 }
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
@@ -4,6 +4,7 @@ import {
   Card,
   Divider,
   Image,
+  Modal,
   SearchIcon,
   Select,
   Spinner,
@@ -38,6 +39,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   const [tokenInfo, setTokenInfo] = useState<UserAddedTokenInitialInfo>()
 
   const [isAddingToken, setIsAddingToken] = useState(false)
+  const [confirmRefreshList, setConfirmRefreshList] = useState(false)
 
   const [isAddingTokenManually, setIsAddingTokenManually] = useState(false)
 
@@ -210,6 +212,16 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
     fileInputRef.current?.click()
   }
 
+  const handleRefreshTokenList = async () => {
+    if (selectedNetwork) {
+      const tokenData = await tokenStore.resetTokenList(selectedNetwork.chainId)
+      setTokenList(tokenData.tokens)
+      setTokenListDate(new Date(tokenData.date))
+    }
+
+    setConfirmRefreshList(false)
+  }
+
   return (
     <Box flexDirection="column" height="fit" minHeight="full">
       <Box flexDirection="column" height="full" padding="6" gap="6">
@@ -229,7 +241,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
           />
         </Box>
 
-        <Box flexDirection="column" gap="2">
+        <Box flexDirection="column" gap="3">
           <TextInput
             leftIcon={SearchIcon}
             value={tokenListFilter}
@@ -301,14 +313,11 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
 
         {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))
-            }}
+            label={`Refresh list - last updated: ${tokenListDate?.toLocaleString()}`}
+            shape="square"
+            size="xs"
+            color="text80"
+            onClick={() => setConfirmRefreshList(true)}
           />
         )}
       </Box>
@@ -392,6 +401,27 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
           </Box>
         </Box>
       </Box>
+
+      {confirmRefreshList && (
+        <Modal size="sm">
+          <Box flexDirection="column" padding="6" gap="6">
+            <Text variant="normal" fontWeight="medium" color="text80">
+              {`Refreshing list will remove the manually imported list for ${selectedNetwork?.title}. Are you sure you want to continue?`}
+            </Text>
+
+            <Box alignSelf="flex-end" flexDirection="row" gap="3">
+              <Button label="Cancel" size="md" shape="square" onClick={() => setConfirmRefreshList(false)} />
+              <Button
+                label="Confirm"
+                variant="danger"
+                size="md"
+                shape="square"
+                onClick={handleRefreshTokenList}
+              />
+            </Box>
+          </Box>
+        </Modal>
+      )}
     </Box>
   )
 }