Merge pull request #241 from G7DAO/staging

Staging
G7DAO · Dec 10, 2024 · c8d47ad · c8d47ad
2 parents cf60d40 + d726fe2
commit c8d47ad
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 147 deletions.
diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx
@@ -27,8 +27,10 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
 
   const { returnTransferData, getTransactionInputs, getHighNetworkTimestamp } = useBridgeTransfer()
   const { data: transferStatus, isLoading } = returnTransferData({ txRecord: deposit })
-  const { data: transactionInputs } = getTransactionInputs({ txRecord: deposit })
   const { data: highNetworkTimestamp } = getHighNetworkTimestamp({ txRecord: deposit, transferStatus: transferStatus })
+  const { data: transactionInputs, isLoading: isLoadingInputs } = getTransactionInputs({ txRecord: deposit })
+  const finalTransactionInputs = transactionInputs || deposit.transactionInputs
+
   return (
     <>
       {isLoading && smallView ? (
@@ -55,13 +57,17 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                 </div>
               </div>
               <div className={styles.gridItem}>{timeAgo(deposit.lowNetworkTimestamp)}</div>
-              {!transactionInputs?.tokenSymbol ? (
+              {!isLoadingInputs && finalTransactionInputs?.tokenSymbol ? (
                 <div className={styles.gridItem}>
-                  <div className={styles.loading}>Loading</div>
+                  {`${finalTransactionInputs.tokenSymbol === 'USDC'
+                    ? ethers.utils.formatUnits(finalTransactionInputs.amount, 6)
+                    : deposit.amount} ${finalTransactionInputs.tokenSymbol}`}
                 </div>
               ) : (
                 <div className={styles.gridItem}>
-                  {`${transactionInputs.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs.amount, 6) : deposit.amount} ${transactionInputs.tokenSymbol}`}
+                  <div className={styles.loading}>
+                    Loading
+                  </div>
                 </div>
               )}
               <div className={styles.gridItem}>{depositInfo.from}</div>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx
@@ -63,7 +63,6 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
   const status = getStatus(withdrawal, lowNetworks, highNetworks)
   const { data: transferStatus, isLoading } = returnTransferData({ txRecord: withdrawal })
   const { data: transactionInputs } = getTransactionInputs({ txRecord: withdrawal })
-
   return (
     <>
       {status?.isLoading && smallView ? (
@@ -92,13 +91,13 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
                     </div>
                   </div>
                   <div className={styles.gridItem}>{timeAgo(withdrawal.highNetworkTimestamp)}</div>
-                  {!transactionInputs?.tokenSymbol ? (
+                  {transactionInputs?.tokenSymbol ? (
                     <div className={styles.gridItem}>
-                      <div className={styles.loading}>Loading</div>
+                      {`${transactionInputs.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs.amount, 6) : withdrawal.amount} ${transactionInputs.tokenSymbol}`}
                     </div>
                   ) : (
                     <div className={styles.gridItem}>
-                      {`${transactionInputs.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs.amount, 6) : withdrawal.amount} ${transactionInputs.tokenSymbol}`}
+                      <div className={styles.loading}>Loading</div>
                     </div>
                   )}
                   <div className={styles.gridItem}>{status?.data?.from ?? ''}</div>
@@ -143,16 +142,30 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
                       >
                         {timeAgo(withdrawal?.highNetworkTimestamp)}
                       </div>
-                      <div
-                        className={styles.gridItem}
-                        onClick={() => setCollapseExecuted(!collapseExecuted)}
-                        style={{
-                          cursor: 'pointer',
-                          backgroundColor: hovered ? '#393939' : 'initial'
-                        }}
-                        onMouseEnter={() => setHovered(true)}
-                        onMouseLeave={() => setHovered(false)}
-                      >{`${transactionInputs?.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs?.amount, 6) : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
+                      {transactionInputs?.tokenSymbol ? (
+                        <div
+                          className={styles.gridItem}
+                          onClick={() => setCollapseExecuted(!collapseExecuted)}
+                          style={{
+                            cursor: 'pointer',
+                            backgroundColor: hovered ? '#393939' : 'initial'
+                          }}
+                          onMouseEnter={() => setHovered(true)}
+                          onMouseLeave={() => setHovered(false)}
+                        >{`${transactionInputs?.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs?.amount, 6) : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>) : (
+                        <div
+                          className={styles.gridItem}
+                          onClick={() => setCollapseExecuted(!collapseExecuted)}
+                          style={{
+                            cursor: 'pointer',
+                            backgroundColor: hovered ? '#393939' : 'initial'
+                          }}
+                          onMouseEnter={() => setHovered(true)}
+                          onMouseLeave={() => setHovered(false)}
+                        >
+                          <div className={styles.loading}>Loading</div>
+                        </div>
+                      )}
                       <div
                         className={styles.gridItem}
                         onClick={() => setCollapseExecuted(!collapseExecuted)}
@@ -216,9 +229,15 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
                             <div className={styles.typeCompleted}>Initiate</div>
                           </div>
                           <div className={styles.gridItemInitiate}>{timeAgo(withdrawal?.highNetworkTimestamp)}</div>
-                          <div
-                            className={styles.gridItemInitiate}
-                          >{`${transactionInputs?.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs?.amount, 6) : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
+                          {transactionInputs?.tokenSymbol ? (
+                            <div className={styles.gridItemInitiate}>
+                              {`${transactionInputs.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs.amount, 6) : withdrawal.amount} ${transactionInputs.tokenSymbol}`}
+                            </div>
+                          ) : (
+                            <div className={styles.gridItemInitiate}>
+                              <div className={styles.loading}>Loading</div>
+                            </div>
+                          )}
                           <div className={styles.gridItemInitiate}>{status?.data?.from ?? ''}</div>
                           <div className={styles.gridItemInitiate}>{status?.data?.to ?? ''}</div>
                           <div className={styles.gridItemInitiate}>
@@ -240,9 +259,15 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
                             <div className={styles.typeCompleted}>Finalize</div>
                           </div>
                           <div className={styles.gridItemInitiate}>{timeAgo(withdrawal?.completionTimestamp)}</div>
-                          <div
-                            className={styles.gridItemInitiate}
-                          >{`${transactionInputs?.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs?.amount, 6) : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
+                          {transactionInputs?.tokenSymbol ? (
+                            <div className={styles.gridItemInitiate}>
+                              {`${transactionInputs.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs.amount, 6) : withdrawal.amount} ${transactionInputs.tokenSymbol}`}
+                            </div>
+                          ) : (
+                            <div className={styles.gridItem}>
+                              <div className={styles.loading}>Loading</div>
+                            </div>
+                          )}
                           <div className={styles.gridItemInitiate}>{status?.data?.from ?? ''}</div>
                           <div className={styles.gridItemInitiate}>{status?.data?.to ?? ''}</div>
                           <div className={styles.gridItemInitiate}>
@@ -273,9 +298,15 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
                         </div>
                       </div>
                       <div className={styles.gridItem}>{timeAgo(status?.data?.timestamp)}</div>
-                      <div
-                        className={styles.gridItem}
-                      >{`${transactionInputs?.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs?.amount, 6) : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
+                      {transactionInputs?.tokenSymbol ? (
+                        <div className={styles.gridItem}>
+                          {`${transactionInputs.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs.amount, 6) : withdrawal.amount} ${transactionInputs.tokenSymbol}`}
+                        </div>
+                      ) : (
+                        <div className={styles.gridItem}>
+                          <div className={styles.loading}>Loading</div>
+                        </div>
+                      )}
                       <div className={styles.gridItem}>{status?.data?.from ?? ''}</div>
                       <div className={styles.gridItem}>{status?.data?.to ?? ''}</div>
                       {transferStatus && transferStatus?.status === ChildToParentMessageStatus.CONFIRMED && (

diff --git a/webapps/world-builder-dashboard/src/components/landing/MainSection.tsx b/webapps/world-builder-dashboard/src/components/landing/MainSection.tsx
@@ -21,7 +21,7 @@ const MainSection: React.FC<MainSectionProps> = ({ smallView, startBuilding }) =
                             className={styles.learnMoreCTA}
                             onClick={() =>
                                 window.open(
-                                    'https://wiki.game7.io/g7-developer-resource/bWmdEUXVjGpgIbH3H5XT/introducing-the-g7-network/world-builder',
+                                    'https://docs.game7.io/',
                                     '_blank'
                                 )
                             }

diff --git a/webapps/world-builder-dashboard/src/components/landing/Navbar.tsx b/webapps/world-builder-dashboard/src/components/landing/Navbar.tsx
@@ -21,7 +21,7 @@ const NAVBAR_ITEMS = [
   { name: 'Community', link: 'https://discord.com/invite/g7dao' },
   {
     name: 'Docs',
-    link: 'https://wiki.game7.io/g7-developer-resource/bWmdEUXVjGpgIbH3H5XT/introducing-the-g7-network/world-builder'
+    link: 'https://docs.game7.io/'
   }
 ]
 

diff --git a/webapps/world-builder-dashboard/src/components/landing/NetworksEssentials.tsx b/webapps/world-builder-dashboard/src/components/landing/NetworksEssentials.tsx
@@ -31,13 +31,13 @@ const essentials = [
     title: 'Block explorer',
     description: 'Track and interact directly with your smart contracts',
     imageClass: styles.networkEssentialExplorer,
-    onClick: () => window.open('https://testnet.game7.io/', '_blank')
+    onClick: () => window.open('https://mainnet.game7.io/', '_blank')
   },
   {
     title: 'Docs',
     description: 'Get more information about building on the G7 Network',
     imageClass: styles.networkEssentialDocs,
-    onClick: () => window.open('https://wiki.game7.io/g7-developer-resource/', '_blank')
+    onClick: () => window.open('https://docs.game7.io/', '_blank')
   },
   {
     title: 'Discord',

diff --git a/webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts b/webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts
@@ -38,7 +38,7 @@ export const useBridgeTransfer = () => {
           await new Promise((resolve) => setTimeout(resolve, retryDelay))
           attempt++
         } else {
-          throw error
+          throw error // Rethrow error if not 429 or max retries reached
         }
       }
     }
@@ -52,26 +52,19 @@ export const useBridgeTransfer = () => {
     const destinationRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === destinationChainId)?.rpcs[0]
     const originRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === originChainId)?.rpcs[0]
 
-    // If the status is pending and time since last fetched is > 2 minutes, fetch again
+    // Update shouldFetchStatus to prevent refetching for completed transactions
     const shouldFetchStatus = (cachedTransaction: any) => {
-      const isPending = ![1, 2, 6, 9].includes(cachedTransaction?.status)
+      const isCompleted = [1, 2, 6, 9].includes(cachedTransaction?.status)
+      if (isCompleted) return false
       const timeSinceLastUpdate = Date.now() - (cachedTransaction?.lastUpdated || 0)
-      return isPending && timeSinceLastUpdate > 1 * 60 * 1000
+      return timeSinceLastUpdate > 1 * 60 * 1000
     }
 
-    let transferStatus: any
+    let status: any
 
     return useQuery(
       ['transferData', txHash],
       async () => {
-        const transactions = getCachedTransactions(connectedAccount ?? '', selectedNetworkType)
-        const cachedTransaction = transactions.find((t: any) =>
-          isDeposit ? t.lowNetworkHash === txRecord.lowNetworkHash : t.highNetworkHash === txRecord.highNetworkHash
-        )
-
-        if (cachedTransaction?.status && !shouldFetchStatus(cachedTransaction)) {
-          return { status: cachedTransaction.status }
-        }
         const _bridgeTransfer = new BridgeTransfer({
           txHash: txHash ?? '',
           destinationNetworkChainId: destinationChainId ?? 0,
@@ -82,25 +75,25 @@ export const useBridgeTransfer = () => {
 
         try {
           // Fetch status with retry logic
-          const statusResponse = await retryWithExponentialBackoff(async () => await _bridgeTransfer.getStatus())
-          transferStatus = statusResponse
+          status = await retryWithExponentialBackoff(async () => await _bridgeTransfer.getStatus())
 
+          const transactions = getCachedTransactions(connectedAccount ?? '', selectedNetworkType)
 
           // Update the cache with the latest status
           const newTransactions = transactions.map((t: any) => {
             const isSameHash = isDeposit
               ? t.lowNetworkHash === txRecord.lowNetworkHash
               : t.highNetworkHash === txRecord.highNetworkHash
 
-            return isSameHash ? { ...t, status: statusResponse?.status, lastUpdated: Date.now() } : t
+            return isSameHash ? { ...t, status: status?.status, lastUpdated: Date.now() } : t
           })
 
           localStorage.setItem(
             `bridge-${connectedAccount}-transactions-${selectedNetworkType}`,
             JSON.stringify(newTransactions)
           )
 
-          return statusResponse
+          return status
         } catch (error) {
           console.error('Error fetching status:', error)
 
@@ -111,8 +104,8 @@ export const useBridgeTransfer = () => {
           )
 
           if (cachedTransaction && cachedTransaction.status !== undefined) {
-            transferStatus = cachedTransaction.status
-            return { status: transferStatus, ...cachedTransaction } // Return cached status
+            status = cachedTransaction.status
+            return { status } // Return cached status
           }
 
           throw error // Re-throw error if no cache
@@ -127,18 +120,18 @@ export const useBridgeTransfer = () => {
           )
 
           if (cachedTransaction && cachedTransaction.status !== undefined) {
-            transferStatus = cachedTransaction.status
-            return { status: transferStatus }
+            status = cachedTransaction.status
+            return { status }
           }
         },
         staleTime: 0.5 * 60 * 1000,
-        refetchInterval: shouldFetchStatus(
-          getCachedTransactions(connectedAccount ?? '', selectedNetworkType).find((t: any) =>
+        refetchInterval: () => {
+          const cachedTx = getCachedTransactions(connectedAccount ?? '', selectedNetworkType).find((t: any) =>
             t.type === 'DEPOSIT' ? t.lowNetworkHash === txHash : t.highNetworkHash === txHash
           )
-        )
-          ? 1 * 60 * 1000
-          : false,
+          
+          return shouldFetchStatus(cachedTx) ? 1 * 60 * 1000 : false
+        },
         refetchOnWindowFocus: false,
         enabled: !!txRecord
       }
@@ -237,19 +230,11 @@ export const useBridgeTransfer = () => {
     const destinationRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === destinationChainId)?.rpcs[0]
     const originRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === originChainId)?.rpcs[0]
 
-
     return useQuery(
       ['transactionInputs', txHash],
       async () => {
-        // Get fresh cache data
-        const transactions = getCachedTransactions(connectedAccount ?? '', selectedNetworkType)
-        const cachedTransaction = transactions.find((t: any) =>
-          isDeposit ? t.lowNetworkHash === txRecord.lowNetworkHash : t.highNetworkHash === txRecord.highNetworkHash
-        )
-
-        // Check if we have cached inputs
-        if (cachedTransaction?.transactionInputs !== undefined) {
-          return cachedTransaction.transactionInputs
+        if (txRecord.transactionInputs) {
+          return txRecord.transactionInputs
         }
 
         const _bridgeTransfer = new BridgeTransfer({
@@ -260,17 +245,17 @@ export const useBridgeTransfer = () => {
           originSignerOrProviderOrRpc: originRpc
         })
 
-        const transactionInputs = await retryWithExponentialBackoff(
-          async () => _bridgeTransfer.getInfo()
-        )
+        const transactionInputs = await _bridgeTransfer.getInfo()
+
+        const transactions = getCachedTransactions(connectedAccount ?? '', selectedNetworkType)
 
-        // Update cache with new data
+        // Update the cache with the latest status
         const newTransactions = transactions.map((t: any) => {
           const isSameHash = isDeposit
             ? t.lowNetworkHash === txRecord.lowNetworkHash
             : t.highNetworkHash === txRecord.highNetworkHash
 
-          return isSameHash ? { ...t, transactionInputs: transactionInputs, lastUpdated: Date.now() } : t
+          return isSameHash ? { ...t, transactionInputs: transactionInputs } : t
         })
 
         localStorage.setItem(
@@ -281,19 +266,24 @@ export const useBridgeTransfer = () => {
       },
       {
         placeholderData: () => {
-          // Get fresh cache data for placeholder
           const transactions = getCachedTransactions(connectedAccount ?? '', selectedNetworkType)
           const cachedTransaction = transactions.find((t: any) =>
             isDeposit ? t.lowNetworkHash === txRecord.lowNetworkHash : t.highNetworkHash === txRecord.highNetworkHash
           )
-          return cachedTransaction?.transactionInputs
+
+          if (cachedTransaction?.transactionInputs) {
+            return cachedTransaction.transactionInputs
+          }
+
+          return null
         },
-        staleTime: 30 * 60 * 1000,
+        staleTime: 2 * 60 * 1000,
         refetchOnWindowFocus: false,
         enabled: !!txRecord
       }
     )
   }
+
   const getHighNetworkTimestamp = ({
     txRecord,
     transferStatus,
@@ -345,8 +335,8 @@ export const useBridgeTransfer = () => {
           const cachedTransaction = transactions.find((t: any) => t.lowNetworkHash === txRecord?.lowNetworkHash)
           return cachedTransaction?.highNetworkTimestamp
         },
-
-        staleTime: Infinity,
+        keepPreviousData: true,
+        staleTime: 1 * 60 * 1000,
         refetchInterval: false,
         refetchOnWindowFocus: false,
         enabled: !!txRecord && !!transferStatus?.completionTxHash // Run query only if data is valid

diff --git a/webapps/world-builder-dashboard/src/layouts/MainLayout/MainLayout.tsx b/webapps/world-builder-dashboard/src/layouts/MainLayout/MainLayout.tsx
@@ -42,7 +42,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({}) => {
     },
     {
       name: 'documentation',
-      navigateTo: 'https://wiki.game7.io/g7-developer-resource',
+      navigateTo: 'https://docs.game7.io/',
       icon: <IconDocumentation stroke={'#B9B9B9'} />
     }
   ]