Merge pull request #261 from G7DAO/feat/update-bridge-sdk

Feat/update bridge sdk
G7DAO · Dec 19, 2024 · fea6969 · fea6969
2 parents a15203d + 0bc1b80
commit fea6969
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 17 deletions.
diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx
@@ -1,5 +1,5 @@
 // External Libraries
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useMutation, useQueryClient } from 'react-query'
 import { useNavigate } from 'react-router-dom'
 // Constants
@@ -64,21 +64,27 @@ const ActionButton: React.FC<ActionButtonProps> = ({
   const networks = getNetworks(selectedNetworkType)
   const [showApproval, setShowApproval] = useState(false)
   const [startingTokenIndex, setStartingTokenIndex] = useState(0)
+  const [allowancesVerified, setAllowancesVerified] = useState(false)
 
 
+  useEffect(() => {
+    console.log('bridger changed')
+    setAllowancesVerified(false)
+  }, [bridger])
+
   const checkAllowances = async () => {
     if (!bridger || !connectedAccount) return null
     if (amount === '0.01') {
       setStartingTokenIndex(0)
       setShowApproval(true)
       return false
     }
-
-
+
     const amountBN = ethers.utils.parseUnits(amount, decimals)
     if (bridgeAllowance === null) {
       const gasFeesAmount = gasFees?.[1] ? ethers.utils.parseUnits(gasFees[1], 18) : amountBN
       const needsNativeTokenApproval = nativeAllowance !== null ? nativeAllowance?.lt(gasFeesAmount) : false
+      console.log('needsNativeTokenApproval', needsNativeTokenApproval)
       if (needsNativeTokenApproval) {
         setStartingTokenIndex(0)
         setShowApproval(true)
@@ -88,13 +94,15 @@ const ActionButton: React.FC<ActionButtonProps> = ({
       const needsBridgeTokenApproval = bridgeAllowance?.lt(amountBN)
       const gasFeesAmount = gasFees?.[1] ? ethers.utils.parseUnits(gasFees[1], 18) : amountBN
       const needsNativeTokenApproval = nativeAllowance !== null ? nativeAllowance?.lt(gasFeesAmount) : false
-
+      console.log('needsBridgeTokenApproval', needsBridgeTokenApproval)
       if (needsBridgeTokenApproval || needsNativeTokenApproval) {
         setStartingTokenIndex(needsBridgeTokenApproval ? 0 : 1)
         setShowApproval(true)
         return false
       }
     }
+
+    setAllowancesVerified(true)
     return true
   }
 
@@ -130,6 +138,8 @@ const ActionButton: React.FC<ActionButtonProps> = ({
     }
     setErrorMessage('')
 
+    setAllowancesVerified(false)
+
     const allowancesOk = await checkAllowances()
     if (allowancesOk) {
       transfer.mutate(amount)
@@ -171,7 +181,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
           highNetworkChainId: selectedHighNetwork.chainId,
           lowNetworkHash: tx?.hash,
           lowNetworkTimestamp: Date.now() / 1000,
-          completionTimestamp: !isCCTP ? Date.now() / 1000 : null,
+          completionTimestamp: Date.now() / 1000,
           newTransaction: true,
           symbol: symbol,
           status:
@@ -214,13 +224,14 @@ const ActionButton: React.FC<ActionButtonProps> = ({
           if (transactionsString) {
             transactions = JSON.parse(transactionsString)
           }
+          console.log(record)
           transactions.push(record)
           localStorage.setItem(
             `bridge-${connectedAccount}-transactions-${selectedNetworkType}`,
             JSON.stringify(transactions)
           )
         } catch (e) {
-          console.error(e)
+          console.log(e)
         }
         queryClient.refetchQueries(['pendingTransactions'])
         queryClient.refetchQueries(['ERC20Balance'])
@@ -231,14 +242,17 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         navigate('/bridge/transactions')
       },
       onError: (e) => {
-        console.error(e)
+        console.log(e)
         setErrorMessage('Transaction failed. Try again, please')
       }
     }
   )
 
   const handleApprovalComplete = () => {
+    console.log('=== ActionButton: handleApprovalComplete ===')
+    console.log('Setting allowancesVerified to true')
     setShowApproval(false)
+    setAllowancesVerified(true)
     transfer.mutate(amount)
   }
 

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/TransactionSummary.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/TransactionSummary.tsx
@@ -78,7 +78,11 @@ const TransactionSummary: React.FC<TransactionSummaryProps> = ({
           <div className={styles.itemName}>You will receive</div>
           <div className={styles.valueContainer}>
             <div className={styles.value}>{`${value} ${tokenSymbol}`}</div>
-            {tokenRate > 0 && <div className={styles.valueNote}>{formatCurrency(value * (tokenSymbol === 'ETH' || tokenSymbol === 'G7' || tokenSymbol === 'TG7T' ? ethRate : tokenRate))}</div>}
+            {tokenRate > 0 && (
+              <div className={styles.valueNote}>
+                {formatCurrency(value * (tokenSymbol === 'ETH' || tokenSymbol === 'G7' || tokenSymbol === 'TG7T' ? ethRate : tokenRate ?? 0))}
+              </div>
+            )}
           </div>
         </div>
       </div>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx
@@ -88,7 +88,7 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                       onMouseLeave={() => setHovered(false)}>
                       {`${finalTransactionInputs.tokenSymbol === 'USDC'
                         ? ethers.utils.formatUnits(finalTransactionInputs.amount, 6)
-                        : deposit.amount} ${finalTransactionInputs.tokenSymbol}`}
+                        : ethers.utils.formatEther(finalTransactionInputs?.amount) ?? deposit.amount} ${finalTransactionInputs.tokenSymbol}`}
                     </div>
                   ) : (
                     <div className={styles.gridItem}
@@ -204,7 +204,7 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                       <div className={styles.gridItemChild} title={deposit.lowNetworkHash}>
                         <div className={styles.typeCompleted}>Finalize</div>
                       </div>
-                      <div className={styles.gridItemInitiate}>{timeAgo(deposit?.completionTimestamp)}</div>
+                      <div className={styles.gridItemInitiate}>{timeAgo(deposit?.lowNetworkTimestamp)}</div>
                       {transactionInputs?.tokenSymbol ? (
                         <div className={styles.gridItemInitiate}>
                           {`${transactionInputs.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs.amount, 6) : deposit.amount} ${transactionInputs.tokenSymbol}`}
@@ -249,7 +249,7 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                     <div className={styles.gridItem}>
                       {`${finalTransactionInputs.tokenSymbol === 'USDC'
                         ? ethers.utils.formatUnits(finalTransactionInputs.amount, 6)
-                        : deposit.amount} ${finalTransactionInputs.tokenSymbol}`}
+                        : ethers.utils.formatEther(finalTransactionInputs?.amount) ?? deposit.amount} ${finalTransactionInputs.tokenSymbol}`}
                     </div>
                   ) : (
                     <div className={styles.gridItem}>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx
@@ -70,6 +70,7 @@ const HistoryDesktop: React.FC<HistoryDesktopProps> = () => {
   const { data: apiTransactions } = useHistoryTransactions(connectedAccount)
   const [mergedTransactions, setMergedTransactions] = useState<TransactionRecord[]>([])
   const headers = ['Type', 'Submitted', 'Token', 'From', 'To', 'Transaction', 'Status', '']
+  console.log(apiTransactions)
 
   // Merge transations only when API data is updated with new data
   useEffect(() => {

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx
@@ -65,6 +65,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
   const highNetworks = getHighNetworks(selectedNetworkType) || HIGH_NETWORKS
   const status = getStatus(withdrawal, lowNetworks, highNetworks)
   const { data: transferStatus, isLoading } = returnTransferData({ txRecord: withdrawal })
+  console.log(transferStatus)
   const { data: transactionInputs } = getTransactionInputs({ txRecord: withdrawal })
   return (
     <>

diff --git a/webapps/world-builder-dashboard/src/hooks/useL2ToL1MessageStatus.ts b/webapps/world-builder-dashboard/src/hooks/useL2ToL1MessageStatus.ts
@@ -256,13 +256,16 @@ export const getNotifications = (transactions: TransactionRecord[]) => {
   )
   const notifications: BridgeNotification[] = completedTransactions
     .map((ct) => {
-      const timestamp = ct.completionTimestamp ?? ct.claimableTimestamp ?? Date.now() / 1000
-
+      const timestamp = ct.type === 'DEPOSIT' ? ct.status === 6 || ct.status === 9 || ct.status === 12 ? ct.highNetworkTimestamp ?? ct.completionTimestamp ?? Date.now() / 1000 : ct.claimableTimestamp ?? Date.now() / 1000 : ct.completionTimestamp ?? ct.claimableTimestamp ?? Date.now() / 1000
+      const amount = ct.transactionInputs?.tokenSymbol === 'USDC'
+        ? ethers.utils.formatUnits(ct.transactionInputs?.amount ?? 0, 6)
+        : ethers.utils.formatEther(ct?.transactionInputs?.amount ?? 0)
+        ?? ct.amount
       return {
         status: ct.isFailed ? 'FAILED' : ct.completionTimestamp ? 'COMPLETED' : 'CLAIMABLE',
         type: ct.type,
+        amount: amount,
         timestamp,
-        amount: ct.amount,
         to: (ct.type === 'WITHDRAWAL' ? ct.lowNetworkChainId : ct.highNetworkChainId) ?? 1,
         seen: !ct.newTransaction,
         tx: ct
@@ -336,9 +339,7 @@ export const usePendingTransactions = (connectedAccount: string | undefined): Us
           }
           if (t.type === 'WITHDRAWAL') {
             if (t.status === ChildToParentMessageStatus.CONFIRMED || t.status === BridgeTransferStatus.CCTP_COMPLETE) {
-              if (!t.claimableTimestamp) {
-                updatedTransactions.push({ ...t, claimableTimestamp: Date.now() / 1000, newTransaction: true })
-              }
+              updatedTransactions.push({ ...t, claimableTimestamp: Date.now() / 1000, newTransaction: true })
             }
           }
         }