From f4ea715845c074a3cf907f558bf562c941a96ce6 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Mon, 16 Dec 2024 09:58:08 -0500
Subject: [PATCH] fixed pending txn indicator ui bug

---
 src/components/wallet/PendingTxn.tsx          | 38 +++++----
 .../wallet/collectibles/ImportCollectible.tsx | 82 +++++++++++--------
 src/stores/WalletStore.ts                     |  7 +-
 3 files changed, 73 insertions(+), 54 deletions(-)

diff --git a/src/components/wallet/PendingTxn.tsx b/src/components/wallet/PendingTxn.tsx
index 7daed7b..8cb4144 100644
--- a/src/components/wallet/PendingTxn.tsx
+++ b/src/components/wallet/PendingTxn.tsx
@@ -1,4 +1,4 @@
-import { Box, Spinner, Text } from '@0xsequence/design-system'
+import { Box, Spinner, Text, truncateAddress, useMediaQuery } from '@0xsequence/design-system'
 
 import NetworkTag from '~/components/network/NetworkTag'
 
@@ -13,31 +13,35 @@ export default function PendingTxn({
   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="lg" />
-
-        <Box flexDirection="column" gap="1">
-          <Box flexDirection="row" alignItems="center" gap="1">
-            <Text variant="normal" fontWeight="medium" color="text80">
-              Sending {amount} {symbol} on
-            </Text>
-
-            <NetworkTag chainId={chainId} paddingTop="0" paddingBottom="1" />
+        <Spinner size="md" width="full" />
 
-            <Text variant="normal" fontWeight="medium" color="text80">
-              to
-            </Text>
-            <Text variant="normal" fontWeight="medium" color="text80" style={{ fontFamily: 'monospace' }}>
-              {to}
-            </Text>
+        <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">
+          <Text variant="normal" fontWeight="medium" color="text50" width="fit">
             Your external wallet will prompt you to confirm the transaction
           </Text>
         </Box>
diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
index eedadf6..e42fbe9 100644
--- a/src/components/wallet/collectibles/ImportCollectible.tsx
+++ b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -38,7 +38,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   const toast = useToast()
 
   const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>(mainnetNetworks[0])
-  const [collectibleManualAddress, setCollectibleManualAddress] = useState<string | undefined>()
+  const [collectibleManualAddress, setCollectibleManualAddress] = useState<string>('')
   const [collectibleManualTokenId, setCollectibleManualTokenId] = useState<number | undefined>()
   const [contractType, setContractType] = useState<CollectibleContractType>(
     CollectibleContractTypeValues.ERC721
@@ -95,6 +95,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             contractType
           })
           .then(response => {
+            console.log('response', response)
             setManualCollectibleInfo(response)
           })
       }
@@ -104,11 +105,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     fetchCollectibleInfo()
   }, [selectedNetwork, contractType, collectibleManualAddress, collectibleManualTokenId])
 
-  useEffect(() => {
-    if (selectedNetwork && contractType && selectedCollection) {
-    }
-  }, [selectedNetwork, contractType, selectedCollection, selectedCollectibles])
-
   useEffect(() => {
     const fetchQueriedCollectibles = async () => {
       setQueriedCollectibles([])
@@ -126,6 +122,8 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             tokenId: tokenId
           })
 
+          // TODO: potential improvement to show user that the collectible is not owned
+
           if (collectibleInfo.isOwner) {
             setQueriedCollectibles(prev => [
               ...prev,
@@ -149,10 +147,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     fetchQueriedCollectibles()
   }, [queryCollectibleTokenIdsMap])
 
-  useEffect(() => {
-    console.log(selectedCollectibles)
-  }, [selectedCollectibles])
-
   useEffect(() => {
     const fetchCollectionList = async () => {
       if (selectedNetwork) {
@@ -220,7 +214,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
         description:
           "You'll be able to see this collectible on your browser as long as you don't clear your cache."
       })
-      resetInputs()
       onClose()
     } catch (error) {
       console.error(error)
@@ -232,11 +225,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     }
   }
 
-  const resetInputs = () => {
-    setCollectibleManualAddress(undefined)
-    setCollectibleManualTokenId(undefined)
-  }
-
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (file) {
@@ -506,29 +494,49 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
       <Box marginTop="auto">
         <Box paddingX="6">
           {isAddingCollectibleManually && (
-            <Box flexDirection="column" marginBottom="6" gap="0.5">
-              <Text variant="normal" fontWeight="medium" color="text80">
-                Collectible Address
-              </Text>
+            <Box flexDirection="column" gap="3">
+              <Box flexDirection="column" gap="0.5">
+                <Text variant="normal" fontWeight="medium" color="text80">
+                  Collectible Address
+                </Text>
 
-              <TextInput
-                name="collectibleAddress"
-                value={collectibleManualAddress ?? ''}
-                onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-                  setCollectibleManualAddress(ev.target.value)
-                }}
-              />
+                <TextInput
+                  name="collectibleAddress"
+                  value={collectibleManualAddress ?? ''}
+                  onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                    setCollectibleManualAddress(ev.target.value)
+                  }}
+                />
+              </Box>
+              <Box flexDirection="column" marginBottom="6" gap="0.5">
+                <Text variant="normal" fontWeight="medium" color="text80">
+                  Token ID
+                </Text>
+
+                <TextInput
+                  name="collectibleTokenId"
+                  value={collectibleManualTokenId ?? ''}
+                  onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                    if (ev.target.value === '') {
+                      setCollectibleManualTokenId(undefined)
+                      return
+                    }
+
+                    setCollectibleManualTokenId(ev.target.value as unknown as number)
+                  }}
+                />
+              </Box>
             </Box>
           )}
 
-          {isFetchingCollectibleInfo && collectibleManualAddress && (
-            <Box alignItems="center" justifyContent="center">
+          {isFetchingCollectibleInfo && collectibleManualAddress && collectibleManualTokenId && (
+            <Box alignItems="center" justifyContent="center" marginBottom="6">
               <Spinner size="lg" />
             </Box>
           )}
 
           {manualCollectibleInfo && !manualCollectibleInfo.isOwner && !isFetchingCollectibleInfo && (
-            <Box alignItems="center" justifyContent="center">
+            <Box alignItems="center" justifyContent="center" marginBottom="6">
               <Text variant="medium" color="warning">
                 You do not own this collectible
               </Text>
@@ -547,12 +555,14 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
                   Your Balance:
                 </Text>
                 <Text variant="medium" fontWeight="bold" color="text80">
-                  {Number(
-                    ethers.formatUnits(
-                      manualCollectibleInfo.balance as BigNumberish,
-                      manualCollectibleInfo.decimals ?? 0
-                    )
-                  )}
+                  {manualCollectibleInfo.balance
+                    ? Number(
+                        ethers.formatUnits(
+                          manualCollectibleInfo.balance as BigNumberish,
+                          manualCollectibleInfo.decimals ?? 0
+                        )
+                      )
+                    : 1}
                 </Text>
               </Box>
             </Card>
diff --git a/src/stores/WalletStore.ts b/src/stores/WalletStore.ts
index dada8e6..32f7de7 100644
--- a/src/stores/WalletStore.ts
+++ b/src/stores/WalletStore.ts
@@ -202,8 +202,13 @@ export class WalletStore {
       }
 
       return { hash }
-    } catch {
+    } catch (error) {
       this.isSendingTokenTransaction.set(undefined)
+      this.toast({
+        variant: 'error',
+        title: 'External wallet error',
+        description: (error as any).message
+      })
       throw new Error('Could not create transaction')
     }
   }