Merge pull request #215 from G7DAO/feat/network-toggle

Feat/network toggle

webapps/world-builder-dashboard/package.json

@@ -18,7 +18,7 @@
     "axios": "^1.6.8",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.11",
-    "game7-bridge-sdk": "^0.0.64",
+    "game7-bridge-sdk": "^0.0.67",
     "history": "^5.3.0",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.2.0",

webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx

@@ -95,7 +95,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         if (selectedBridgeToken.address != ZERO_ADDRESS) {
           const allowance = (await bridger?.getAllowance(selectedLowNetwork.rpcs[0], connectedAccount ?? '')) ?? ''
           const allowanceToCheck = ethers.utils.formatUnits(allowance, decimals)
- 
+
           // approve first
           if (Number(allowanceToCheck) < Number(amountToSend)) {
             const txApprove = await bridger?.approve(amountToSend, signer)
@@ -126,7 +126,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
           highNetworkChainId: selectedHighNetwork.chainId,
           highNetworkHash: tx?.hash,
           highNetworkTimestamp: Date.now() / 1000,
-          challengePeriod: 60 * 60,
+          challengePeriod: selectedNetworkType === 'Testnet' ? 60 * 60 : 60 * 60 * 24 * 7,
           symbol: symbol,
           status: BridgeTransferStatus.WITHDRAW_UNCONFIRMED
         }

webapps/world-builder-dashboard/src/components/bridge/bridge/NetworkSelector.tsx

@@ -82,11 +82,11 @@ const NetworkSelector = ({ networks, onChange, selectedNetwork, direction }: Net
               direction === 'DEPOSIT'
                 ? selectedHighNetwork.chainId !== n.chainId && selectedHighNetwork.chainId === selectedNetwork.chainId
                 : selectedLowNetwork.chainId !== n.chainId && selectedLowNetwork.chainId === selectedNetwork.chainId
+            if (isDisabled) return
             return (
               <Combobox.Option
                 value={String(n.chainId)}
-                key={n.chainId}
-                disabled={isDisabled}
+                key={n.chainId}   
                 className={isDisabled ? styles.optionDisabled : styles.option}
               >
                 <Group>

webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { getHighNetworks, getLowNetworks } from '../../../../constants'
+import React, { useEffect, useState } from 'react'
+import { getHighNetworks, getLowNetworks, getNetworks } from '../../../../constants'
 import DepositMobile from './DepositMobile'
 import styles from './WithdrawTransactions.module.css'
 import { ethers } from 'ethers'
@@ -9,14 +9,14 @@ import IconArrowNarrowDown from '@/assets/IconArrowNarrowDown'
 import IconLinkExternal02 from '@/assets/IconLinkExternal02'
 import { useBlockchainContext } from '@/contexts/BlockchainContext'
 import { useBridgeTransfer } from '@/hooks/useBridgeTransfer'
-import { useDepositStatus } from '@/hooks/useL2ToL1MessageStatus'
 import { TransactionRecord } from '@/utils/bridge/depositERC20ArbitrumSDK'
 import { ETA, timeAgo } from '@/utils/timeFormat'
-import { getBlockExplorerUrl } from '@/utils/web3utils'
+import { fetchTransactionTimestamp, getBlockExplorerUrl } from '@/utils/web3utils'
 
 interface DepositProps {
   deposit: TransactionRecord
 }
+
 const Deposit: React.FC<DepositProps> = ({ deposit }) => {
   const { selectedNetworkType } = useBlockchainContext()
   const smallView = useMediaQuery('(max-width: 1199px)')
@@ -25,21 +25,43 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
     to: getHighNetworks(selectedNetworkType)?.find((n) => n.chainId === deposit.highNetworkChainId)?.displayName ?? ''
   }
 
-  const { data: status, isLoading: isLoadingStatus } = useDepositStatus(deposit, selectedNetworkType)
   const { returnTransferData, getTransactionInputs } = useBridgeTransfer()
   const { data: transferStatus, isLoading } = returnTransferData({ txRecord: deposit })
   const { data: transactionInputs } = getTransactionInputs({ txRecord: deposit })
+  const [highNetworkTimestamp, setHighNetworkTimestamp] = useState<number>(0)
+
+
+  useEffect(() => {
+    const fetchTimestamp = async () => {
+      if (transferStatus) {
+        if (transferStatus?.completionTxHash) {
+          console.log(selectedNetworkType)
+          const destinationRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === deposit.highNetworkChainId)
+            ?.rpcs[0]
+          const timestamp = await fetchTransactionTimestamp(transferStatus.completionTxHash, destinationRpc ?? '')
+          if (timestamp) {
+            console.log(timestamp)
+            setHighNetworkTimestamp(timestamp)
+          }
+        } else {
+          console.log("no compl;etion tx hash found" )
+        }
+      }
+    }
+
+    fetchTimestamp()
+  }, [transferStatus?.completionTxHash])
 
   return (
     <>
-      {isLoadingStatus && smallView ? (
+      {isLoading && smallView ? (
         <div className={styles.gridItem}>
           <div className={styles.loading}>Loading</div>
         </div>
       ) : (
         <>
           {smallView ? (
-            <DepositMobile deposit={deposit} isLoading={isLoadingStatus} selectedNetworkType={selectedNetworkType} />
+            <DepositMobile deposit={deposit} isLoading={isLoading} selectedNetworkType={selectedNetworkType} />
           ) : (
             <>
               <div className={styles.gridItem}>
@@ -85,7 +107,7 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                 )}
 
                 {/* Second column */}
-                {isLoading || transferStatus?.status === undefined || isLoadingStatus ? (
+                {isLoading || transferStatus?.status === undefined || !highNetworkTimestamp ? (
                   <div className={styles.gridItem}>
                     <div className={styles.loading}>Loading</div>
                   </div>
@@ -94,11 +116,7 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                     {transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
                     transferStatus?.status === BridgeTransferStatus.DEPOSIT_GAS_DEPOSITED ||
                     transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_FUNDS_DEPOSITED_ON_CHILD ? (
-                      <>
-                        {status?.highNetworkTimestamp === undefined
-                          ? 'No status found'
-                          : timeAgo(status?.highNetworkTimestamp)}
-                      </>
+                      <>{timeAgo(highNetworkTimestamp)}</>
                     ) : (
                       <>{ETA(deposit.lowNetworkTimestamp, deposit.retryableCreationTimeout ?? 15 * 60)}</>
                     )}

webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx

@@ -62,7 +62,6 @@ 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 })
-
   const { data: transactionInputs } = getTransactionInputs({ txRecord: withdrawal })
 
   return (

webapps/world-builder-dashboard/src/hooks/useL2ToL1MessageStatus.ts

@@ -147,9 +147,9 @@ const fetchDepositStatus = async (deposit: TransactionRecord, selectedNetworkTyp
   let l2Result
 
   try {
-    l2Result = await l1ContractCallReceipt.waitForChildTransactionReceipt(l2Provider, l1Receipt.confirmations, 1)
+    l2Result = await l1ContractCallReceipt.waitForChildTransactionReceipt(l2Provider, l1Receipt.confirmations)
   } catch (e) {
-    console.error('Error waiting for child transaction receipt:', { deposit, e })
+    console.error('Error waiting for child transaction receipt: ', { error: e, receipt: l1Receipt })
   }
 
   if (!l2Result) {

webapps/world-builder-dashboard/src/utils/web3utils.ts

@@ -1,6 +1,7 @@
 import { getHighNetworks, getLowNetworks, HIGH_NETWORKS, LOW_NETWORKS } from '../../constants'
 import { ethers } from 'ethers'
 import { NetworkType } from '@/contexts/BlockchainContext'
+import { providers } from 'ethers'
 
 export const convertToBigNumber = (numberString: string, precision = 18) => {
   const [integerPart, decimalPart] = numberString.split('.')
@@ -58,3 +59,30 @@ export const parseUntilDelimiter = (input: any) => {
   const match = input.match(/^[^\(\[]+/)
   return match ? match[0] : input
 }
+
+export const fetchTransactionTimestamp = async (completionTxHash: string, rpcUrl: string): Promise<number | null> => {
+  try {
+    // Initialize the provider with the RPC URL
+    const provider = new providers.JsonRpcProvider(rpcUrl)
+
+    // Fetch the transaction receipt
+    const receipt = await provider.getTransactionReceipt(completionTxHash)
+    if (!receipt) {
+      console.warn('Transaction receipt not found for hash:', completionTxHash)
+      return null
+    }
+
+    // Fetch the block details using the block number from the receipt
+    const block = await provider.getBlock(receipt.blockNumber)
+    if (!block) {
+      console.warn('Block not found for block number:', receipt.blockNumber)
+      return null
+    }
+
+    // Return the timestamp from the block
+    return block.timestamp
+  } catch (error) {
+    console.error('Error fetching transaction timestamp:', error)
+    return null
+  }
+}