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

fix errors on approval flow
G7DAO · Dec 16, 2024 · d68098d · d68098d
2 parents aa8fbbb + 4e64a0f
commit d68098d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 41 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
@@ -71,12 +71,12 @@ const ActionButton: React.FC<ActionButtonProps> = ({
   }, [bridger])
 
   const checkAllowances = async () => {
-    if (!bridger || !connectedAccount) return null;
+    if (!bridger || !connectedAccount) return null
     console.log('check allowances start')
     if (amount === '0.01') {
-      setStartingTokenIndex(0);
-      setShowApproval(true);
-      return false;
+      setStartingTokenIndex(0)
+      setShowApproval(true)
+      return false
     }
 
     console.log('allowancesVerified', allowancesVerified)
@@ -89,7 +89,6 @@ const ActionButton: React.FC<ActionButtonProps> = ({
     const amountBN = ethers.utils.parseUnits(amount, decimals)
 
     if (bridgeAllowance === null) {
-      console.log('bridgeAllowance is null')
       const gasFeesAmount = gasFees?.[1] ? ethers.utils.parseUnits(gasFees[1], 18) : amountBN
       const needsNativeTokenApproval = nativeAllowance !== null ? nativeAllowance?.lt(gasFeesAmount) : false
       if (needsNativeTokenApproval) {
@@ -167,7 +166,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         fromNetwork: selectedLowNetwork.chainId,
         toNetwork: selectedHighNetwork.chainId,
         connectedAccount: connectedAccount
-      });
+      })
       if (bridger?.isDeposit) {
         const tx = await bridger?.transfer({ amount: amountToSend, signer, destinationProvider })
         await tx?.wait()
@@ -237,16 +236,16 @@ const ActionButton: React.FC<ActionButtonProps> = ({
   )
 
   const handleApprovalComplete = () => {
-    console.log('=== ActionButton: handleApprovalComplete ===');
-    console.log('Setting allowancesVerified to true');
+    console.log('=== ActionButton: handleApprovalComplete ===')
+    console.log('Setting allowancesVerified to true')
     setShowApproval(false)
     setAllowancesVerified(true)
     transfer.mutate(amount)
   }
 
   const checkAllowancesAndTransfer = async () => {
-    console.log('=== checkAllowancesAndTransfer START ===');
-    console.log('Current allowancesVerified state:', allowancesVerified);
+    console.log('=== checkAllowancesAndTransfer START ===')
+    console.log('Current allowancesVerified state:', allowancesVerified)
 
     if (allowancesVerified) {
       transfer.mutate(amount)
@@ -270,18 +269,18 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         token.symbol === selectedLowNetwork.nativeCurrency?.symbol
     )!
     if (bridgeAllowance === null && nativeAllowance !== null) {
-      return [nativeToken];
+      return [nativeToken]
     }
     if (nativeAllowance === null && bridgeAllowance !== null) {
-      return [selectedBridgeToken];
+      return [selectedBridgeToken]
     }
 
     if (nativeAllowance === null && bridgeAllowance === null) {
-      return [];
+      return []
     }
 
-    return [selectedBridgeToken, nativeToken];
-  })();
+    return [selectedBridgeToken, nativeToken]
+  })()
 
   return (
     <>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/MultiTokenApproval.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/MultiTokenApproval.tsx
@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import styles from './MultiTokenApproval.module.css';
-import { Modal } from 'summon-ui/mantine';
-import AllowanceSelector from '../allowance/AllowanceSelector';
-import { ethers } from 'ethers';
-import { useQueryClient } from 'react-query';
-import { useMutation } from 'react-query';
-import { Bridger } from 'game7-bridge-sdk';
-import { useBlockchainContext } from '@/contexts/BlockchainContext';
-import { getNetworks } from '../../../../constants';
-import { Token } from '@/utils/tokens';
-import IconCheck from '@/assets/IconCheck';
-import IconClose from '@/assets/IconClose';
+import React, { useState, useEffect } from 'react'
+import styles from './MultiTokenApproval.module.css'
+import { Modal } from 'summon-ui/mantine'
+import AllowanceSelector from '../allowance/AllowanceSelector'
+import { ethers } from 'ethers'
+import { useQueryClient } from 'react-query'
+import { useMutation } from 'react-query'
+import { Bridger } from 'game7-bridge-sdk'
+import { useBlockchainContext } from '@/contexts/BlockchainContext'
+import { getNetworks } from '../../../../constants'
+import { Token } from '@/utils/tokens'
+import IconCheck from '@/assets/IconCheck'
+import IconClose from '@/assets/IconClose'
 
 interface MultiTokenApprovalProps {
   showApproval: boolean
@@ -40,32 +40,37 @@ export const MultiTokenApproval: React.FC<MultiTokenApprovalProps> = ({ showAppr
   const [approvedTokens, setApprovedTokens] = useState<Set<string>>(initialApprovedTokens)
   const [currentTokenIndex, setCurrentTokenIndex] = useState(startingTokenIndex)
   const [newAllowance, setNewAllowance] = useState(() => {
-    const currentToken = tokens[currentTokenIndex];
+    const currentToken = tokens[currentTokenIndex]
     if (currentTokenIndex === 1) {
-      const gasFeeAmount = ethers.utils.parseUnits(gasFees[1] || '0', currentToken.decimals || 18)
+      const gasFeeAmount = ethers.utils.parseUnits(
+        (gasFees[1] === '0' ? amount : gasFees[1]) || amount, 
+        currentToken.decimals || 18
+      )
       return gasFeeAmount
     }
     return currentTokenIndex === 0
       ? ethers.utils.parseUnits(amount || '0', decimals || 18)
       : ethers.utils.parseUnits(amount || '0', currentToken.decimals || 18)
-  });
+  })
+
+  const [allowanceInitialized, setAllowanceInitialized] = useState(false)
 
   useEffect(() => {
     if (currentTokenIndex >= tokens.length) {
       console.warn('Invalid token index:', currentTokenIndex, 'tokens:', tokens)
       return
     }
 
-    const currentToken = tokens[currentTokenIndex];
-    if (!newAllowance) {
-      const initialAmount = currentTokenIndex === 1
-        ? ethers.utils.parseUnits(gasFees[1] || '0', currentToken.decimals || 18)
-        : currentTokenIndex === 0
-          ? ethers.utils.parseUnits(amount || '0', decimals || 18)
-          : ethers.utils.parseUnits(amount || '0', currentToken.decimals || 18)
-      setNewAllowance(initialAmount);
+    if (!allowanceInitialized && currentTokenIndex === 1) {
+      const currentToken = tokens[currentTokenIndex]
+      const gasFeeAmount = ethers.utils.parseUnits(
+        (gasFees[1] === '0' ? amount : gasFees[1]) || amount, 
+        currentToken.decimals || 18
+      )
+      setNewAllowance(gasFeeAmount)
+      setAllowanceInitialized(true)
     }
-  }, [currentTokenIndex, tokens, amount, decimals, gasFees]);
+  }, [currentTokenIndex, tokens, amount, decimals, gasFees, allowanceInitialized])
 
   const approve = useMutation(
     async (amount: ethers.BigNumber) => {
@@ -84,7 +89,7 @@ export const MultiTokenApproval: React.FC<MultiTokenApprovalProps> = ({ showAppr
       onSuccess: ({ tokenSymbol }) => {
         setApprovedTokens(prev => {
           const newSet = new Set([...prev, tokenSymbol])
-          return newSet;
+          return newSet
         })
 
         // If there's only one token, complete immediately