From f783831c66d5a5409a2bfe20db9d1ab9e87bac62 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Tue, 12 Sep 2023 16:47:24 +0200
Subject: [PATCH] fix(bridge-ui-v2): custom tokens from local storage (#14677)

---
 .../src/components/Bridge/Bridge.svelte       | 10 +++---
 .../Bridge/ChainSelectorWrapper.svelte        |  1 +
 .../TokenDropdown/DropdownView.svelte         | 31 +++++++++----------
 .../src/libs/token/getBalance.test.ts         |  1 +
 .../bridge-ui-v2/src/libs/token/getBalance.ts |  3 +-
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
index c95249dabc5..99b23917b58 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
+++ b/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();
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte b/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
index e92be3c7a79..4354e8b006b 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
+++ b/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';
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
index 79c13ca570f..eb20ddc6521 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
+++ b/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>
diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts
index 3fdd8e91e19..6a17133be05 100644
--- a/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts
+++ b/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],
     });
   });
diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
index 1c26c9f93df..a4710f8c79f 100644
--- a/packages/bridge-ui-v2/src/libs/token/getBalance.ts
+++ b/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,
     });
   }