More robust ethers v5 provider support (#2258)

synapsecns · Mar 13, 2024 · a91994f · a91994f
1 parent e513a28
commit a91994f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 49 deletions.
diff --git a/packages/widget/src/components/Transaction.tsx b/packages/widget/src/components/Transaction.tsx
@@ -4,7 +4,6 @@ import { Chain } from 'types'
 import { useAppDispatch } from '@/state/hooks'
 import { getTxBlockExplorerLink } from '@/utils/getTxBlockExplorerLink'
 import { getExplorerAddressUrl } from '@/utils/getExplorerAddressLink'
-import { getTxSynapseExplorerLink } from '@/utils/getTxSynapseExplorerLink'
 import { useBridgeTxStatus } from '@/hooks/useBridgeTxStatus'
 import { isNull } from '@/utils/isNull'
 import {

diff --git a/packages/widget/src/components/Widget.tsx b/packages/widget/src/components/Widget.tsx
@@ -271,8 +271,9 @@ export const Widget = ({
           signer,
         })
       )
+
       /** Fetch allowance on successful approval tx */
-      if (tx?.payload?.hash) {
+      if (tx?.payload?.hash || tx?.payload?.transactionHash) {
         dispatch(
           fetchAndStoreAllowance({
             spenderAddress: bridgeQuote?.routerAddress,

diff --git a/packages/widget/src/state/slices/bridgeTransaction/hooks.ts b/packages/widget/src/state/slices/bridgeTransaction/hooks.ts
@@ -42,46 +42,50 @@ export const executeBridgeTxn = createAsyncThunk(
     signer: any
     synapseSDK: any
   }) => {
-    const data = await synapseSDK.bridge(
-      destinationAddress,
-      originRouterAddress,
-      originChainId,
-      destinationChainId,
-      tokenAddress,
-      amount,
-      originQuery,
-      destQuery
-    )
+    try {
+      const data = await synapseSDK.bridge(
+        destinationAddress,
+        originRouterAddress,
+        originChainId,
+        destinationChainId,
+        tokenAddress,
+        amount,
+        originQuery,
+        destQuery
+      )
 
-    const payload =
-      tokenAddress === ZeroAddress
-        ? {
-            data: data.data,
-            to: data.to,
-            value: amount,
-          }
-        : {
-            data: data.data,
-            to: data.to,
-          }
+      const payload =
+        tokenAddress === ZeroAddress
+          ? {
+              data: data.data,
+              to: data.to,
+              value: amount,
+            }
+          : {
+              data: data.data,
+              to: data.to,
+            }
 
-    const tx = await signer.sendTransaction(payload)
+      const tx = await signer.sendTransaction(payload)
 
-    const receipt = await tx.wait()
+      const receipt = await tx.wait()
 
-    const txHash = receipt?.hash
+      const txHash = receipt?.hash ?? receipt?.transactionHash
 
-    const timestamp = getTimeMinutesFromNow(0)
+      const timestamp = getTimeMinutesFromNow(0)
 
-    return {
-      txHash,
-      bridgeModuleName,
-      parsedOriginAmount,
-      originTokenSymbol,
-      originChainId,
-      destinationChainId,
-      estimatedTime,
-      timestamp,
+      return {
+        txHash,
+        bridgeModuleName,
+        parsedOriginAmount,
+        originTokenSymbol,
+        originChainId,
+        destinationChainId,
+        estimatedTime,
+        timestamp,
+      }
+    } catch (error) {
+      console.error('Error executing bridge: ', error)
     }
   }
 )
diff --git a/packages/widget/src/utils/actions/approveErc20Token.ts b/packages/widget/src/utils/actions/approveErc20Token.ts
@@ -1,18 +1,12 @@
-import { JsonRpcApiProvider, BrowserProvider, ethers } from 'ethers'
+import { ethers, AbiCoder } from 'ethers'
 
 import { MAX_UINT256 } from '@/constants/index'
-import erc20ABI from '../../constants/abis/erc20.json'
 
 export const approveErc20Token = async ({
   spenderAddress,
   tokenAddress,
   amount,
   signer,
-}: {
-  spenderAddress: string
-  tokenAddress: string
-  amount: bigint
-  signer: JsonRpcApiProvider | BrowserProvider
 }) => {
   try {
     if (!spenderAddress) {
@@ -24,14 +18,26 @@ export const approveErc20Token = async ({
     if (!signer) {
       throw new Error('Require Signer')
     }
-    // Create a new instance of Contract with the signer
-    const tokenContract = new ethers.Contract(tokenAddress, erc20ABI, signer)
 
-    // If amount is not provided, use maximum uint256
-    const approveAmount = amount ?? MAX_UINT256
+    const functionSignature = 'approve(address,uint256)'
+    const abiCoder = AbiCoder.defaultAbiCoder()
+    const data = abiCoder.encode(
+      ['address', 'uint256'],
+      [spenderAddress, amount ?? MAX_UINT256]
+    )
 
-    // Send approve transaction
-    const tx = await tokenContract.approve(spenderAddress, approveAmount)
+    // The function selector is the first 4 bytes of the hash of the function signature
+    const functionSelector = ethers
+      .keccak256(ethers.toUtf8Bytes(functionSignature))
+      .slice(0, 10)
+
+    // The complete data for the transaction combines the selector and the encoded arguments
+    const txData = functionSelector + data.slice(2) // remove 0x from data
+
+    const tx = await signer.sendTransaction({
+      to: tokenAddress,
+      data: txData,
+    })
 
     // Wait for the transaction to be mined
     const receipt = await tx.wait()