fix(bridge-ui-v2): bugfixes (#15400)

Co-authored-by: Daniel Wang <[email protected]>

packages/bridge-ui-v2/src/components/Bridge/Actions.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
+  import { routingContractsMap } from '$bridgeConfig';
   import ActionButton from '$components/Button/ActionButton.svelte';
   import { Icon } from '$components/Icon';
   import { bridges, ContractType, type RequireApprovalArgs } from '$libs/bridge';
+  import type { ERC20Bridge } from '$libs/bridge/ERC20Bridge';
   import type { ERC721Bridge } from '$libs/bridge/ERC721Bridge';
   import type { ERC1155Bridge } from '$libs/bridge/ERC1155Bridge';
   import { getContractAddressByType } from '$libs/bridge/getContractAddressByType';
@@ -62,6 +64,34 @@
       if (paused) throw new BridgePausedError('Bridge is paused');
     });
     $validatingAmount = true;
+
+    if ($selectedToken?.type === TokenType.ERC20) {
+      if ($account?.address && $network?.id && $destNetwork?.id) {
+        const currentChainId = $network?.id;
+        const destinationChainId = $destNetwork?.id;
+        const tokenVaultAddress = routingContractsMap[currentChainId][destinationChainId].erc20VaultAddress;
+
+        const bridge = bridges[$selectedToken.type] as ERC20Bridge;
+
+        try {
+          const requiresApproval = await bridge.requireAllowance({
+            amount: $enteredAmount,
+            tokenAddress: $selectedToken.addresses[currentChainId],
+            ownerAddress: $account.address,
+            spenderAddress: tokenVaultAddress,
+          });
+          $insufficientAllowance = false;
+          $validatingAmount = false;
+          return !requiresApproval;
+        } catch (error) {
+          console.error('isApprovedForAll error');
+          $validatingAmount = false;
+          return false;
+        }
+      }
+      $validatingAmount = false;
+      return false;
+    }
     if ($selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155) {
       if ($account?.address && $network?.id && $destNetwork?.id) {
         const currentChainId = $network?.id;
@@ -181,9 +211,12 @@
     !paused;
 
   $: erc20ConditionsSatisfied =
-    !canDoNothing && !$insufficientAllowance && commonConditions && $tokenBalance && $enteredAmount;
-  $: erc721ConditionsSatisfied = allTokensApproved && commonConditions;
-  $: erc1155ConditionsSatisfied = allTokensApproved && $enteredAmount && $enteredAmount > 0 && commonConditions;
+    commonConditions && !canDoNothing && !$insufficientAllowance && $tokenBalance && $enteredAmount;
+
+  $: erc721ConditionsSatisfied = commonConditions && allTokensApproved;
+
+  $: erc1155ConditionsSatisfied = commonConditions && allTokensApproved && $enteredAmount && $enteredAmount > 0;
+
   $: ethConditionsSatisfied = commonConditions && $enteredAmount && $enteredAmount > 0;
 
   $: disableBridge = isERC20

packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { isAddress } from 'ethereum-address';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
@@ -68,6 +68,10 @@
   $: borderState = validState ? 'success' : invalidState ? 'error' : defaultBorder;
 
   $: classes = classNames($$props.class, borderState);
+
+  onDestroy(() => {
+    clearAddress();
+  });
 </script>
 
 <div class="f-col space-y-2">

packages/bridge-ui-v2/src/components/Bridge/Amount.svelte

@@ -106,7 +106,6 @@
           invalidInput = true;
           break;
       }
-      console.error('Error validating amount: ', err);
     } finally {
       $validatingAmount = false;
     }

packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte

@@ -54,6 +54,7 @@
 
   function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
     resetForm();
+    $selectedToken = ETHToken;
 
     if (newNetwork) {
       const destChainId = $destinationChain?.id;
@@ -216,8 +217,11 @@
       // Reset the form
       resetForm();
 
-      // Refresh user's balance
+      // Refresh user's ETH balance
       refreshUserBalance();
+
+      // Update amount balance after bridging
+      if (amountComponent) amountComponent.updateBalance();
     } catch (err) {
       console.error(err);
       handleBridgeError(err as Error);
@@ -230,10 +234,6 @@
     if (recipientComponent) recipientComponent.clearRecipient();
     if (processingFeeComponent) processingFeeComponent.resetProcessingFee();
 
-    // Update balance after bridging
-    if (amountComponent) amountComponent.updateBalance();
-
-    $selectedToken = ETHToken;
     bridging = false;
   };
 

packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
 
   import { Icon } from '$components/Icon';
@@ -43,6 +43,10 @@
     state = State.VALID;
     dispatch('inputValidation');
   }
+
+  onDestroy(() => {
+    clearIds();
+  });
 </script>
 
 <div class="f-col space-y-2">

packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte

@@ -111,7 +111,6 @@
 
     $recipientAddress = $account?.address || null;
     bridgingStatus = 'pending';
-
     $selectedToken = ETHToken;
     importMethod === null;
     scanned = false;
@@ -126,7 +125,9 @@
   let activeStep: NFTSteps = NFTSteps.IMPORT;
 
   const nextStep = () => (activeStep = Math.min(activeStep + 1, NFTSteps.CONFIRM));
-  const previousStep = () => (activeStep = Math.max(activeStep - 1, NFTSteps.IMPORT));
+  const previousStep = () => {
+    activeStep = Math.max(activeStep - 1, NFTSteps.IMPORT);
+  };
 
   let nftStepTitle: string;
   let nftStepDescription: string;
@@ -316,7 +317,7 @@
               ><span class="body-bold">{$t('bridge.nft.step.confirm.button.back')}</span>
             </ActionButton>
           {:else}
-            <button on:click={resetForm} class="flex justify-center py-3 link">
+            <button on:click={() => (activeStep = NFTSteps.REVIEW)} class="flex justify-center py-3 link">
               {$t('common.back')}
             </button>
           {/if}

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ConfirmationStep.svelte

@@ -14,9 +14,11 @@
   import type { ERC1155Bridge } from '$libs/bridge/ERC1155Bridge';
   import { getBridgeArgs } from '$libs/bridge/getBridgeArgs';
   import { handleBridgeError } from '$libs/bridge/handleBridgeErrors';
+  import { BridgePausedError } from '$libs/error';
   import { bridgeTxService } from '$libs/storage';
   import { TokenType } from '$libs/token';
   import { getCrossChainAddress } from '$libs/token/getCrossChainAddress';
+  import { isBridgePaused } from '$libs/util/checkForPausedContracts';
   import { getConnectedWallet } from '$libs/util/getConnectedWallet';
   import { account } from '$stores/account';
   import { network } from '$stores/network';
@@ -86,6 +88,10 @@
   };
 
   async function approve() {
+    isBridgePaused().then((paused) => {
+      if (paused) throw new BridgePausedError('Bridge is paused');
+    });
+
     try {
       if (!$selectedToken || !$network || !$destNetwork?.id) return;
       const type: TokenType = $selectedToken.type;

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 { onMount } from 'svelte';
+  import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
 
   import { FlatAlert } from '$components/Alert';
@@ -177,7 +177,7 @@
     validating = false;
   };
 
-  onMount(() => {
+  onDestroy(() => {
     reset();
   });
 
@@ -226,6 +226,9 @@
   $: isDisabled = idInputState !== IDInputState.VALID || addressInputState !== AddressInputState.VALID;
 
   $: nothingFound = scanned && foundNFTs.length === 0;
+
+  $: displayOwnershipError =
+    contractAddress && enteredIds && !isOwnerOfAllToken && nftIdArray?.length > 0 && !validating;
 </script>
 
 <div class="f-between-center gap-[16px] mt-[30px]">
@@ -243,13 +246,10 @@ Manual NFT Input
       class="bg-neutral-background border-0 h-[56px]"
       on:addressvalidation={onAddressValidation}
       labelText={$t('inputs.address_input.label.contract')} />
-    <!-- {#if addressInputState === AddressInputState.INVALID && invalidToken}
-      <FlatAlert type="error" forceColumnFlow message="todo: invalid token" />
-    {/if} -->
 
-    {#if !interfaceSupported}
+    <!-- {#if !interfaceSupported}
       <Alert type="error">TODO: token interface is not supported (link to docs?)</Alert>
-    {/if}
+    {/if} -->
     <div class="min-h-[20px] mt-[30px]">
       <!-- TODO: add limit to config -->
       <IdInput
@@ -262,8 +262,8 @@ Manual NFT Input
         limit={1}
         class="bg-neutral-background border-0 h-[56px]" />
       <div class="min-h-[20px] !mt-3">
-        {#if !isOwnerOfAllToken && nftIdArray?.length > 0 && !validating}
-          <FlatAlert type="error" forceColumnFlow message="todo: must be owner of all token" />
+        {#if displayOwnershipError}
+          <FlatAlert type="error" forceColumnFlow message={$t('bridge.errors.not_the_owner_of_all')} />
         {/if}
       </div>
     </div>

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte

@@ -12,18 +12,18 @@
   import { shortenAddress } from '$libs/util/shortenAddress';
   import { network } from '$stores/network';
 
+  export let hasEnoughEth: boolean = false;
+
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
-  export let hasEnoughEth: boolean = false;
 
   const dispatch = createEventDispatcher();
 
-  $: nftsToDisplay = $selectedNFTs ? $selectedNFTs : [];
-
   enum NFTView {
     CARDS,
     LIST,
   }
+
   let nftView: NFTView = NFTView.CARDS;
 
   const changeNFTView = () => {
@@ -38,6 +38,8 @@
     dispatch('editTransactionDetails');
   };
 
+  $: nftsToDisplay = $selectedNFTs ? $selectedNFTs : [];
+
   // check if any of the selected NFTs are ERC1155 tokens
   $: isERC1155 = $selectedNFTs ? $selectedNFTs.some((nft) => nft.type === 'ERC1155') : false;
 </script>

packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte

@@ -15,7 +15,7 @@
   import { TokenDropdown } from '$components/TokenDropdown';
   import { chains } from '$libs/chain';
   import { InsufficientBalanceError, MintError, TokenMintedError } from '$libs/error';
-  import { checkMintable, mint, testERC20Tokens, type Token } from '$libs/token';
+  import { checkMintable, mint, testERC20Tokens, testNFT, type Token } from '$libs/token';
   import { account, network, pendingTransactions } from '$stores';
 
   let minting = false;
@@ -26,6 +26,7 @@
   let mintButtonEnabled = false;
   let alertMessage = '';
   let mintableTokens: Token[] = [];
+
   const onlyMintable: boolean = true;
 
   async function switchNetworkToL1() {
@@ -55,6 +56,7 @@
 
     // Let's begin the minting process
     minting = true;
+    mintButtonEnabled = false;
 
     try {
       const txHash = await mint(selectedToken, $network.id);
@@ -159,7 +161,10 @@
 
   onMount(() => {
     // Only show tokens in the dropdown that are mintable
-    mintableTokens = testERC20Tokens.filter((token) => token.mintable);
+    const testERC20 = testERC20Tokens.filter((token) => token.mintable);
+    const testNFTs = testNFT.filter((token) => token.mintable);
+
+    mintableTokens = [...testERC20, ...testNFTs];
   });
 
   $: connected = isUserConnected($account);

packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte

@@ -102,7 +102,17 @@
     if (!tokenAddress) return;
     loadingTokenDetails = true;
     log('Fetching token details for address "%s"…', tokenAddress);
-    const type = await detectContractType(tokenAddress);
+
+    let type: TokenType;
+    try {
+      type = await detectContractType(tokenAddress);
+    } catch (error) {
+      log('Failed to detect contract type: ', error);
+      loadingTokenDetails = false;
+      state = AddressInputState.NOT_ERC20;
+      return;
+    }
+
     if (type !== TokenType.ERC20) {
       loadingTokenDetails = false;
       state = AddressInputState.NOT_ERC20;
@@ -160,7 +170,6 @@
 <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
   <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-dialog-background">
     <CloseButton onClick={closeModal} />
-
     <h3 class="title-body-bold mb-7">{$t('token_dropdown.custom_token.title')}</h3>
 
     <p class="body-regular text-secondary-content mb-3">{$t('token_dropdown.custom_token.description')}</p>

packages/bridge-ui-v2/src/i18n/en.json

@@ -77,6 +77,7 @@
         "title": "Allowance already set"
       },
       "no_decimals_allowed": "Decimals are not supported for this token",
+      "not_the_owner_of_all": "You must be the owner of all tokens",
       "send_erc20_error": {
         "message": "There was an issue attempting to send ERC20 token.",
         "title": "Failed to send"

packages/bridge-ui-v2/src/libs/token/tokens.ts

@@ -17,6 +17,10 @@ export const ETHToken: Token = {
   type: TokenType.ETH,
 };
 
-export const testERC20Tokens: Token[] = customToken;
+export const testERC20Tokens: Token[] = customToken.filter((token) => token.type === TokenType.ERC20);
+
+export const testNFT: Token[] = customToken.filter(
+  (token) => token.type === TokenType.ERC721 || token.type === TokenType.ERC1155,
+);
 
 export const tokens = [ETHToken, ...testERC20Tokens];