fix(bridge-ui-v2): custom tokens from local storage

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

@@ -258,13 +258,13 @@
 
       bridgeTxService.addTxByAddress($account.address, bridgeTx);
 
-      // Reset the form
-      amountComponent.clearAmount();
-      recipientComponent.clearRecipient();
-      processingFeeComponent.resetProcessingFee();
+      // Reset the form (we check if these are still mounted, as the user might have left the page)
+      if (amountComponent) amountComponent.clearAmount();
+      if (recipientComponent) recipientComponent.clearRecipient();
+      if (processingFeeComponent) processingFeeComponent.resetProcessingFee();
 
       // Update balance after bridging
-      amountComponent.updateBalance();
+      if (amountComponent) amountComponent.updateBalance();
 
       // Refresh user's balance
       refreshUserBalance();

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+
   import { destNetwork, destOptions } from '$components/Bridge/state';
   import SwitchChainsButton from '$components/Bridge/SwitchChainsButton.svelte';
   import { ChainSelector } from '$components/ChainSelector';

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

@@ -60,39 +60,39 @@
 
 <!-- Desktop (or larger) view -->
 <ul role="listbox" {id} class={menuClasses}>
-  {#each tokens as token (token.symbol)}
+  {#each tokens as t (t.symbol)}
     <li
       role="option"
       tabindex="0"
-      aria-selected={token === value}
-      on:click={() => selectToken(token)}
-      on:keydown={getTokenKeydownHandler(token)}>
+      aria-selected={t === value}
+      on:click={() => selectToken(t)}
+      on:keydown={getTokenKeydownHandler(t)}>
       <div class="p-4">
-        {#if symbolToIconMap[token.symbol]}
-          <i role="img" aria-label={token.name}>
-            <svelte:component this={symbolToIconMap[token.symbol]} size={28} />
+        {#if symbolToIconMap[t.symbol]}
+          <i role="img" aria-label={t.name}>
+            <svelte:component this={symbolToIconMap[t.symbol]} size={28} />
           </i>
         {:else}
-          <i role="img" aria-label={token.symbol}>
+          <i role="img" aria-label={t.symbol}>
             <svelte:component this={Erc20} size={28} />
           </i>
         {/if}
-        <span class="body-bold">{token.symbol}</span>
+        <span class="body-bold">{t.symbol}</span>
       </div>
     </li>
   {/each}
-  {#each customTokens as token, index (index)}
+  {#each customTokens as ct, index (index)}
     <li
       role="option"
       tabindex="0"
-      aria-selected={token === value}
-      on:click={() => selectToken(token)}
-      on:keydown={getTokenKeydownHandler(token)}>
+      aria-selected={ct === value}
+      on:click={() => selectToken(ct)}
+      on:keydown={getTokenKeydownHandler(ct)}>
       <div class="p-4">
-        <i role="img" aria-label={token.name}>
+        <i role="img" aria-label={ct.name}>
           <Erc20 />
         </i>
-        <span class="body-bold">{token.symbol}</span>
+        <span class="body-bold">{ct.symbol}</span>
       </div>
     </li>
   {/each}
@@ -105,7 +105,6 @@
             body-bold
             bg-transparent
             flex-1
-
             px-0">
         {$t('token_dropdown.add_custom')}
       </span>

packages/bridge-ui-v2/src/libs/token/getBalance.test.ts

@@ -85,6 +85,7 @@ describe('getBalance', () => {
     });
     expect(fetchBalance).toHaveBeenCalledWith({
       address: mockWalletClient.account.address,
+      chainId: Number(PUBLIC_L1_CHAIN_ID),
       token: BLLToken.addresses[PUBLIC_L1_CHAIN_ID],
     });
   });

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

@@ -31,11 +31,10 @@ export async function getBalance({ userAddress, token, srcChainId, destChainId }
 
     if (!tokenAddress || tokenAddress === zeroAddress) return;
 
-    // Wagmi is such an amazing library. We had to do this
-    // more manually before.
     tokenBalance = await fetchBalance({
       address: userAddress,
       token: tokenAddress,
+      chainId: srcChainId,
     });
   }