Observe bridge tx

package.json

@@ -94,8 +94,8 @@
     "swiper": "^8.4.5",
     "swr": "^2.1.3",
     "tss-react": "^4.4.1",
-    "viem": "^1.0.7",
-    "wagmi": "^1.3.9",
+    "viem": "^1.10.1",
+    "wagmi": "^1.4.1",
     "web-vitals": "^2.1.4",
     "zustand": "^4.1.3"
   },
@@ -136,7 +136,7 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "tailwindcss": "^3.1.8",
-    "typescript": "^4.7.4",
+    "typescript": "5.0.4",
     "util": "^0.12.5"
   }
 }

src/contexts/PriceFeeProvider.tsx

@@ -12,12 +12,6 @@ import { requireEnv } from "@/utils"
 const OFFSET = "0x1111000000000000000000000000000000001111"
 const amount = BigInt(1)
 
-enum MIN_GASLIMIT {
-  ETH_GATEWAY = 14e4,
-  WETH_GATEWAY = 17e4,
-  STANDARD_ERC20_GATEWAY = 15e4,
-}
-
 type Props = {
   gasLimit: bigint
   gasPrice: bigint
@@ -70,7 +64,7 @@ export const PriceFeeProvider = ({ children }) => {
       if (chainId === CHAIN_ID.L1) {
         const price = await getGasPrice()
         const limit = await getGasLimit()
-        // console.log(price, limit, "gas price/limit")
+        console.log(price, limit, "relay price/limit")
         setGasPrice(price)
         setGasLimit(limit)
       } else {
@@ -107,7 +101,7 @@ export const PriceFeeProvider = ({ children }) => {
 
   const getGasPrice = async () => {
     try {
-      const L2GasPriceOracleContract = getContract("GAS_PRICE_ORACLE", networksAndSigners[CHAIN_ID.L1].signer)
+      const L2GasPriceOracleContract = getContract("GAS_PRICE_ORACLE", networksAndSigners[CHAIN_ID.L1].provider)
       const gasPrice = await L2GasPriceOracleContract.l2BaseFee()
       return gasPrice
     } catch (err) {
@@ -187,7 +181,7 @@ export const PriceFeeProvider = ({ children }) => {
         to: requireEnv(L2Contracts.SCROLL_MESSENGER.env),
         data: calldata,
       })
-      return (BigInt(Math.max(Number(gaslimit), MIN_GASLIMIT[contractName] as unknown as number)) * BigInt(120)) / BigInt(100)
+      return (gaslimit * BigInt(120)) / BigInt(100)
     } catch (error) {
       throw new Error(error)
     }

src/contexts/RainbowProvider.tsx

@@ -5,6 +5,7 @@ import { type WalletClient } from "@wagmi/core"
 import { BrowserProvider, ethers } from "ethers"
 import produce from "immer"
 import { createContext, useCallback, useContext, useMemo } from "react"
+import { defineChain } from "viem"
 import { WagmiConfig, configureChains, createConfig, sepolia, useAccount, useDisconnect, useNetwork, useWalletClient } from "wagmi"
 import { jsonRpcProvider } from "wagmi/providers/jsonRpc"
 import { publicProvider } from "wagmi/providers/public"
@@ -22,7 +23,7 @@ type RainbowContextProps = {
   checkConnectedChainId: (chainId: number) => boolean
 }
 
-export const scrollChain: Chain = {
+export const scrollChain: Chain = defineChain({
   id: CHAIN_ID.L2,
   name: TESTNET_NAME,
   network: TESTNET_NAME,
@@ -44,12 +45,19 @@ export const scrollChain: Chain = {
   blockExplorers: {
     default: { name: "Blockscout", url: requireEnv("REACT_APP_EXTERNAL_EXPLORER_URI_L2") },
   },
-}
+})
 
-const sepoliaChain = produce(sepolia, draft => {
+const refactorSepoliaChain = produce(sepolia, draft => {
   draft.rpcUrls.public.http = [RPC_URL.L1 as any]
 })
 
+const sepoliaChain = defineChain({
+  ...refactorSepoliaChain,
+  fees: {
+    baseFeeMultiplier: 2.1,
+  },
+})
+
 const projectId = requireEnv("REACT_APP_CONNECT_WALLET_PROJECT_ID")
 
 const RainbowContext = createContext<RainbowContextProps | undefined>(undefined)

src/hooks/useClaim.ts

@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import useSWR from "swr"
 
 import { fetchTxByHashUrl } from "@/apis/bridge"
 import { BRIDGE_PAGE_SIZE } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
+import useBridgeStore from "@/stores/bridgeStore"
 import useClaimStore from "@/stores/claimStore"
 
 export interface TxHistory {
@@ -15,10 +16,16 @@ export interface TxHistory {
 const useClaim = () => {
   const { walletCurrentAddress } = useRainbowContext()
 
+  const { mode, txType, withDrawStep } = useBridgeStore()
+
   const { comboPageTransactions, pageTransactions, generateTransactions } = useClaimStore()
 
   const [errorMessage, setErrorMessage] = useState("")
 
+  const isClaimTable = useMemo(() => {
+    return mode === "Transaction" && txType === "Withdraw" && withDrawStep === "2"
+  }, [mode, txType, withDrawStep])
+
   const fetchTxList = useCallback(({ txs }) => {
     return scrollRequest(fetchTxByHashUrl, {
       method: "post",
@@ -32,7 +39,7 @@ const useClaim = () => {
   const { data } = useSWR<any>(
     () => {
       // const needToRefreshTransactions = pageTransactions.filter(item => !item.toHash && !item.assumedStatus)
-      if (pageTransactions.length && walletCurrentAddress) {
+      if (pageTransactions.length && walletCurrentAddress && isClaimTable) {
         const txs = pageTransactions.map(item => item.hash).filter((item, index, arr) => index === arr.indexOf(item))
         return { txs }
       }

src/hooks/useTxHistory.ts

@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import useSWR from "swr"
 
 import { fetchClaimableTxListUrl, fetchTxByHashUrl } from "@/apis/bridge"
 import { BRIDGE_PAGE_SIZE } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
+import useBridgeStore from "@/stores/bridgeStore"
 import useTxStore from "@/stores/txStore"
 
 export interface TxHistory {
@@ -14,11 +15,16 @@ export interface TxHistory {
 
 const useTxHistory = networksAndSigners => {
   const { walletCurrentAddress } = useRainbowContext()
+  const { mode } = useBridgeStore()
   const { pageTransactions, generateTransactions, comboPageTransactions, combineClaimableTransactions, orderedTxDB } = useTxStore()
 
   const [errorMessage, setErrorMessage] = useState("")
   const [claimableTx, setclaimableTx] = useState<[] | null>(null)
 
+  const isHistoryTable = useMemo(() => {
+    return mode === "History"
+  }, [mode])
+
   const fetchTxList = useCallback(({ txs }) => {
     return scrollRequest(fetchTxByHashUrl, {
       method: "post",
@@ -44,7 +50,7 @@ const useTxHistory = networksAndSigners => {
     () => {
       const needToRefreshTransactions = pageTransactions.filter(item => !item.toHash && !item.assumedStatus)
 
-      if (needToRefreshTransactions.length && walletCurrentAddress) {
+      if (needToRefreshTransactions.length && walletCurrentAddress && isHistoryTable) {
         const txs = needToRefreshTransactions.map(item => item.hash).filter((item, index, arr) => index === arr.indexOf(item))
         return { txs }
       }

src/pages/bridge/Send/useSendTransaction.ts

@@ -53,6 +53,8 @@ export function useSendTransaction(props) {
       updateOrderedTxs(walletCurrentAddress, tx.hash, TxPosition.Frontend)
       tx.wait()
         .then(receipt => {
+          console.log(receipt, "wait receipt")
+
           if (receipt?.status === 1) {
             handleTransaction(tx, {
               fromBlockNumber: receipt.blockNumber,
@@ -74,6 +76,7 @@ export function useSendTransaction(props) {
           }
         })
         .catch(error => {
+          console.log(error, "catch wait error")
           // TRANSACTION_REPLACED or TIMEOUT
           sentryDebug(error.message)
           if (isError(error, "TRANSACTION_REPLACED")) {
@@ -108,6 +111,7 @@ export function useSendTransaction(props) {
           setSending(false)
         })
     } catch (error) {
+      console.log(error, "catch send error")
       setSending(false)
       // reject && insufficient funds(send error)
       if (!isError(error, "ACTION_REJECTED")) {

src/pages/new-bridge/Send/index.tsx

@@ -66,7 +66,7 @@ const useStyles = makeStyles()(theme => ({
 const Send = () => {
   const { classes } = useStyles()
   const { chainId } = useRainbowContext()
-  const { txType, fromNetwork, withDrawStep, changeTxType, changeTxResult, changeIsNetworkCorrect } = useBridgeStore()
+  const { txType, fromNetwork, withDrawStep, changeTxType, changeTxResult, changeTxError, changeIsNetworkCorrect } = useBridgeStore()
 
   useEffect(() => {
     let networkCorrect
@@ -83,6 +83,7 @@ const Send = () => {
   const handleChange = (e, newValue) => {
     changeTxType(newValue)
     changeTxResult(null)
+    changeTxError(null)
   }
 
   return (

src/pages/new-bridge/components/ClaimTable/ClaimButton.tsx

@@ -70,6 +70,7 @@ const ClaimButton = props => {
       result
         .wait()
         .then(receipt => {
+          console.log(receipt, "claim receipt")
           if (receipt?.status === 1) {
             const estimatedOffsetTime = (receipt.blockNumber - blockNumbers[0]) * 12 * 1000
             if (isValidOffsetTime(estimatedOffsetTime)) {
@@ -89,6 +90,8 @@ const ClaimButton = props => {
           }
         })
         .catch(error => {
+          console.log(error, "catch claim wait error")
+
           // TRANSACTION_REPLACED or TIMEOUT
           sentryDebug(error.message)
           if (isError(error, "TRANSACTION_REPLACED")) {
@@ -118,6 +121,8 @@ const ClaimButton = props => {
           setLoading(false)
         })
     } catch (error) {
+      console.log(error, "catch claim error")
+
       if (isError(error, "ACTION_REJECTED")) {
         addEstimatedTimeMap(`claim_${tx.hash}`, 0)
       }

src/pages/new-bridge/hooks/useGasFee.ts

@@ -1,3 +1,4 @@
+import { getPublicClient } from "@wagmi/core"
 import { useState } from "react"
 import { useBlockNumber } from "wagmi"
 
@@ -19,11 +20,18 @@ const useGasFee = selectedToken => {
   const [gasLimit, setGasLimit] = useState(BigInt(0))
 
   const calculateGasFee = async () => {
-    const { maxFeePerGas, gasPrice: rawGasPrice } = await networksAndSigners[fromNetwork.chainId].provider.getFeeData()
-    const limit = ((await estimateSend()) * BigInt(120)) / BigInt(100)
-    // sepolia scroll not support EIP-1559
-    const gasPrice = fromNetwork.isL1 ? maxFeePerGas : rawGasPrice
-    const estimatedGasCost = BigInt(limit) * BigInt(gasPrice || 1e9)
+    const rawlimit = await estimateSend()
+    const limit = (rawlimit * BigInt(120)) / BigInt(100)
+    let gasPrice
+    if (fromNetwork.isL1) {
+      const { maxFeePerGas } = await getPublicClient({ chainId: fromNetwork.chainId }).estimateFeesPerGas()
+      gasPrice = maxFeePerGas as bigint
+    } else {
+      const { gasPrice: legacyGasPrice } = await getPublicClient({ chainId: fromNetwork.chainId }).estimateFeesPerGas({ type: "legacy" })
+      gasPrice = legacyGasPrice as bigint
+    }
+    const estimatedGasCost = BigInt(limit) * BigInt(gasPrice)
+    console.log(gasPrice, limit, "gas price/limit")
     return { gasLimit: limit, gasFee: estimatedGasCost }
   }
 

src/pages/new-bridge/hooks/useSendTransaction.ts

@@ -51,6 +51,7 @@ export function useSendTransaction(props) {
       updateOrderedTxs(walletCurrentAddress, tx.hash, TxPosition.Frontend, txDirection)
       tx.wait()
         .then(receipt => {
+          console.log(receipt, "receipt")
           if (receipt?.status === 1) {
             changeTxResult({ hash: tx.hash, amount: fromTokenAmount })
 
@@ -77,6 +78,8 @@ export function useSendTransaction(props) {
           }
         })
         .catch(error => {
+          console.log(error, "wait catch error")
+
           // TRANSACTION_REPLACED or TIMEOUT
           sentryDebug(error.message)
           if (isError(error, "TRANSACTION_REPLACED")) {
@@ -112,6 +115,8 @@ export function useSendTransaction(props) {
           setIsLoading(false)
         })
     } catch (error) {
+      console.log(error, "send catch error")
+
       setIsLoading(false)
       // reject && insufficient funds(send error)
       if (isError(error, "ACTION_REJECTED")) {

src/stores/txStore.ts

@@ -260,7 +260,7 @@ const maxLengthAccount = (orderedTxDB: OrderedTxDB) => {
   let maxLength = 0
   let address
   for (let i = 0; i < briefList.length; i++) {
-    if (briefList[i][1] > maxLength) {
+    if ((briefList[i][1] as number) > maxLength) {
       maxLength = briefList[i][1] as number
       address = briefList[i][0]
     }