fix(bridge-ui-v2): fix for approval button not updating (#15481)

taikoxyz · Jan 11, 2024 · 62eebe4 · 62eebe4 · vercel · Jan 11, 2024
1 parent e1748cf
commit 62eebe4
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 92 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
@@ -53,6 +53,7 @@
     $validatingAmount = true;
     checkTokenApprovalStatus($selectedToken);
     isValidTokenBalance();
+    $validatingAmount = false;
   });
 
   //TODO: does this check entered balance?!
@@ -77,7 +78,7 @@
 
   $: isValidBalance = false;
 
-  $: validating = ($validatingAmount && $enteredAmount > 0) || approving;
+  $: validating = $validatingAmount && $enteredAmount > 0;
 
   // Basic conditions so we can even start the bridging process
   $: hasAddress = $recipientAddress || $account?.address;
@@ -154,7 +155,7 @@
         {/if}
         {#if approving}
           <span class="body-bold">{$t('bridge.button.approving')}</span>
-        {:else if $allApproved && !validating}
+        {:else if $allApproved && !validating && $enteredAmount > 0}
           <div class="f-items-center">
             <Icon type="check" />
             <span class="body-bold">{$t('bridge.button.approved')}</span>

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { formatUnits, parseUnits } from 'viem';
 
@@ -52,6 +53,8 @@
 
   export let disabled = false;
 
+  export let doAllowanceCheck = true;
+
   export async function validateAmount(token = $selectedToken, fee = $processingFee) {
     if (!$network?.id) return;
     $validatingAmount = true; // During validation, we disable all the actions
@@ -73,47 +76,53 @@
       !(balanceForGasCalculation && balanceForGasCalculation > BigInt(0)) ||
       $enteredAmount === BigInt(0) // no need to check if the amount is 0
     ) {
+      $validatingAmount = false;
       return;
     }
 
-    try {
-      await checkBalanceToBridge({
-        to,
-        token,
-        amount: $enteredAmount,
-        fee,
-        balance: balanceForGasCalculation,
-        srcChainId: $network.id,
-        destChainId: $destNetwork.id,
-        tokenIds:
-          $selectedToken.type === TokenType.ERC721 || $selectedToken.type === TokenType.ERC1155
-            ? [BigInt((token as NFT).tokenId)]
-            : [],
-      });
-    } catch (err) {
-      switch (true) {
-        case err instanceof InsufficientBalanceError:
-          $insufficientBalance = true;
-          break;
-        case err instanceof InsufficientAllowanceError:
-          $insufficientAllowance = true;
-          break;
-        case err instanceof RevertedWithFailedError:
-          warningToast({ title: $t('messages.network.rejected') });
-          break;
-        case err instanceof RevertedWithoutMessageError:
-          warningToast({
-            title: $t('bridge.errors.unknown_error.title'),
-            message: $t('bridge.errors.unknown_error.message'),
-          });
-          break;
-        default:
-          invalidInput = true;
-          break;
+    if (doAllowanceCheck) {
+      try {
+        await checkBalanceToBridge({
+          to,
+          token,
+          amount: $enteredAmount,
+          fee,
+          balance: balanceForGasCalculation,
+          srcChainId: $network.id,
+          destChainId: $destNetwork.id,
+          tokenIds:
+            $selectedToken.type === TokenType.ERC721 || $selectedToken.type === TokenType.ERC1155
+              ? [BigInt((token as NFT).tokenId)]
+              : [],
+        });
+      } catch (err) {
+        switch (true) {
+          case err instanceof InsufficientBalanceError:
+            $insufficientBalance = true;
+            break;
+          case err instanceof InsufficientAllowanceError:
+            $insufficientAllowance = true;
+            break;
+          case err instanceof RevertedWithFailedError:
+            warningToast({ title: $t('messages.network.rejected') });
+            break;
+          case err instanceof RevertedWithoutMessageError:
+            warningToast({
+              title: $t('bridge.errors.unknown_error.title'),
+              message: $t('bridge.errors.unknown_error.message'),
+            });
+            break;
+          default:
+            invalidInput = true;
+            break;
+        }
+      }
+    } else {
+      if (typeof $tokenBalance === 'bigint') {
+        $insufficientBalance = $tokenBalance < $enteredAmount;
       }
-    } finally {
-      $validatingAmount = false;
     }
+    $validatingAmount = false;
   }
 
   export async function updateBalance(
@@ -123,7 +132,6 @@
     destChainId = $destNetwork?.id,
   ) {
     if (!token || !srcChainId || !userAddress) return;
-
     $computingBalance = true;
     $errorComputingBalance = false;
 
@@ -150,9 +158,8 @@
       //most likely we have a custom token that is not bridged yet
       $errorComputingBalance = true;
       clearAmount();
-    } finally {
-      $computingBalance = false;
     }
+    $computingBalance = false;
   }
 
   // We want to debounce this function for input events.
@@ -236,6 +243,7 @@
   }
 
   const determineBalance = () => {
+    $computingBalance = true;
     let balance = 0n;
     if (!$selectedToken) return balance;
     const type = $selectedToken.type;
@@ -254,6 +262,7 @@
       default:
         break;
     }
+    $computingBalance = false;
     return balance;
   };
 
@@ -271,11 +280,17 @@
 
   $: noDecimalsAllowedAlert = invalidInput;
 
-  $: inputDisabled =
-    computingMaxAmount || disabled || !$selectedToken || !$network || computingMaxAmount || $errorComputingBalance;
+  $: inputDisabled = computingMaxAmount || disabled || !$selectedToken || !$network || $errorComputingBalance;
 
   // TODO: Disabled for now, potentially confusing users
   // $: showInsiffucientAllowanceAlert = $insufficientAllowance && !$errorComputingBalance && !$computingBalance;
+
+  onMount(() => {
+    $computingBalance = true;
+    $enteredAmount = BigInt(0);
+    determineBalance();
+    $computingBalance = false;
+  });
 </script>
 
 <div class="Amount f-col space-y-2">

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -97,8 +97,10 @@
       if (!$selectedToken || !$network || !$destinationChain) return;
       const type: TokenType = $selectedToken.type;
       const walletClient = await getConnectedWallet($network.id);
-      let tokenAddress = await getAddress($selectedToken.addresses[$network.id]);
-
+      let tokenAddress = $selectedToken.addresses[$network.id];
+      if (tokenAddress) {
+        tokenAddress = await getAddress(tokenAddress);
+      }
       if (!tokenAddress) {
         const crossChainAddress = await getCrossChainAddress({
           token: $selectedToken,
@@ -256,7 +258,7 @@
     ETH & ERC20 Bridge  
 -->
 {#if $activeBridge === BridgeTypes.FUNGIBLE}
-  <Card class="w-full md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description.default')}>
+  <Card class="w-full md:w-[524px] " title={$t('bridge.title.default')} text={$t('bridge.description.default')}>
     <div class="space-y-[30px] mt-[30px]">
       <div class="f-between-center gap-4">
         <ChainSelectorWrapper />

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
@@ -178,13 +178,13 @@
     );
   };
 
-  const manualImportAction = () => {
+  const manualImportAction = async () => {
     if (!$network?.id) throw new Error('network not found');
     const srcChainId = $network?.id;
     const tokenId = nftIdArray[0];
 
     if (isAddress(contractAddress) && srcChainId)
-      getTokenWithInfoFromAddress({ contractAddress, srcChainId: srcChainId, tokenId, owner: $account?.address })
+      await getTokenWithInfoFromAddress({ contractAddress, srcChainId: srcChainId, tokenId, owner: $account?.address })
         .then(async (token) => {
           if (!token) throw new Error('no token with info');
           // detectedTokenType = token.type;

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ConfirmationStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ConfirmationStep.svelte
@@ -207,6 +207,7 @@
       {:else if bridging || approving}
         <Spinner class="!w-[160px] !h-[160px] text-primary-brand" />
         <div id="text" class="f-col my-[30px] text-center">
+          <h1 class="mb-[16px]">{$t('bridge.nft.step.confirm.processing')}</h1>
           <span>{$t('bridge.nft.step.confirm.approve.pending')}</span>
         </div>
       {:else if $allApproved && !approving && !bridging}

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Address } from '@wagmi/core';
   import { isAddress } from 'ethereum-address';
-  import { onDestroy } from 'svelte';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
   import { chainConfig } from '$chainConfig';
@@ -118,7 +118,6 @@
       } catch {
         addressInputState = AddressInputState.INVALID;
       }
-
       if (!$network?.id) throw new Error('network not found');
       if (detectedTokenType !== TokenType.ERC721 && detectedTokenType !== TokenType.ERC1155) {
         addressInputState = AddressInputState.NOT_NFT;
@@ -182,7 +181,7 @@
     validating = false;
   };
 
-  onDestroy(() => {
+  onMount(() => {
     reset();
   });
 
@@ -204,6 +203,8 @@
       addressInputState === AddressInputState.VALID &&
       idInputState === IDInputState.VALID &&
       $enteredAmount > BigInt(0) &&
+      typeof $tokenBalance === 'bigint' &&
+      $enteredAmount <= $tokenBalance &&
       isOwnerOfAllToken;
 
     const isManualImportValid = importMethod === ImportMethod.MANUAL && (isValidManualERC721 || isValidManualERC1155);
@@ -237,6 +238,10 @@
 
   $: displayL1Warning =
     slowL1Warning && $destinationChain?.id && chainConfig[$destinationChain.id].type === LayerType.L1;
+
+  onMount(() => {
+    detectedTokenType = null;
+  });
 </script>
 
 <div class="f-between-center gap-[16px] mt-[30px]">
@@ -279,8 +284,12 @@ Manual NFT Input
         {/if}
       </div>
     </div>
-    {#if detectedTokenType === TokenType.ERC1155 && interfaceSupported}
-      <Amount bind:this={amountComponent} class="bg-neutral-background border-0 h-[56px]" disabled={isDisabled} />
+    {#if detectedTokenType === TokenType.ERC1155 && interfaceSupported && enteredIds?.length > 0 && !validating}
+      <Amount
+        bind:this={amountComponent}
+        class="bg-neutral-background border-0 h-[56px]"
+        disabled={isDisabled}
+        doAllowanceCheck={false} />
     {/if}
   </div>
 {:else}

diff --git a/packages/bridge-ui-v2/src/components/Card/Card.svelte b/packages/bridge-ui-v2/src/components/Card/Card.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <div class={classes}>
-  <div class="card-body body-regular px-4 md:p-[50px] gap-0 py-0 md:mt-[0px]">
+  <div class="card-body body-regular px-4 md:p-[50px] gap-0 py-0 md:mt-[0px] mt-[40px]">
     {#if title}
       <h2 class="card-title title-screen-bold">{title}</h2>
     {/if}

diff --git a/packages/bridge-ui-v2/src/components/Stepper/Stepper.svelte b/packages/bridge-ui-v2/src/components/Stepper/Stepper.svelte
@@ -19,7 +19,7 @@
 
 <div class={classes}>
   <div class="card-body body-regular gap-0 p-0">
-    <ul class="steps my-[30px]">
+    <ul class="steps md:mb-[30px] mt-[30px]">
       <slot {activeStep} />
     </ul>
   </div>

diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
@@ -130,7 +130,7 @@
         title: $t('transactions.actions.claim.success.title'),
         message: $t('transactions.actions.claim.success.message', {
           values: {
-            network: $network.id,
+            network: $network.name,
           },
         }),
       });

diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
@@ -114,12 +114,13 @@
           },
           "bridge": {
             "success": {
-              "message": "Your bridge transaction was confirmed. The transaction can take a few minutes to complete, track it <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
+              "message": "Your bridge transaction was confirmed. The transaction can take a few minutes to complete, track it <a class='link' href=\"{url}\" target=\"_blank\"><b>here</b></a>."
             }
           },
           "button": {
             "back": "Back to bridge"
           },
+          "processing": "Processing...",
           "title": "Confirm"
         },
         "import": {

diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
@@ -92,7 +92,7 @@ export class ERC20Bridge extends Bridge {
 
     log('Estimating gas for sendERC20 call with value', value);
 
-    const estimatedGas = tokenVaultContract.estimateGas.sendToken([sendERC20Args], { value });
+    const estimatedGas = await tokenVaultContract.estimateGas.sendToken([sendERC20Args], { value });
 
     log('Gas estimated', estimatedGas);