From 2ec333f5d3f3330c11dc0ab3afacc027c33cd5e0 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Tue, 19 Mar 2024 14:07:41 +0100
Subject: [PATCH] fix(bridge-ui): balance updating when connecting (#16481)

---
 .../TokenDropdown/TokenDropdown.svelte        | 34 +++++--------------
 packages/bridge-ui/src/libs/wagmi/watcher.ts  |  3 +-
 2 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
index 49a1e54a568..46d1caab78f 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
@@ -17,7 +17,6 @@
   import Erc20 from '$components/Icon/ERC20.svelte';
   import { warningToast } from '$components/NotificationToast';
   import { OnAccount } from '$components/OnAccount';
-  import { OnNetwork } from '$components/OnNetwork';
   import { tokenService } from '$libs/storage/services';
   import { ETHToken, fetchBalance as getTokenBalance, type Token, TokenType } from '$libs/token';
   import { getTokenAddresses } from '$libs/token/getTokenAddresses';
@@ -72,7 +71,6 @@
     }
 
     // In order to select a token, we only need the source chain to be selected,
-    // unless it's an imported token...
     if (!srcChain) {
       warningToast({ title: $t('messages.network.required') });
       $computingBalance = false;
@@ -83,11 +81,6 @@
       $computingBalance = false;
       return;
     }
-    // if it is an imported Token, chances are we do not yet have the bridged address
-    // for the destination chain, so we need to fetch it
-    // if (token.imported) {
-    //   // ... in the case of imported tokens, we also require the destination chain to be selected.
-
     try {
       const tokenInfo = await getTokenAddresses({ token, srcChainId: srcChain.id, destChainId: destChain.id });
       if (!tokenInfo) {
@@ -119,7 +112,7 @@
       console.error(error);
     }
     value = token;
-    await updateBalance($account?.address, srcChain.id, destChain.id);
+    await updateBalance();
     $computingBalance = false;
   };
 
@@ -130,11 +123,10 @@
     }
   };
 
-  export async function updateBalance(
-    userAddress = $account?.address,
-    srcChainId = $connectedSourceChain?.id,
-    destChainId = $destNetwork?.id,
-  ) {
+  async function updateBalance() {
+    const userAddress = $account?.address;
+    const srcChainId = $connectedSourceChain?.id;
+    const destChainId = $destNetwork?.id;
     const token = value;
     if (!token || !srcChainId || !destChainId || !userAddress) return;
     $computingBalance = true;
@@ -172,17 +164,8 @@
     $computingBalance = false;
   }
 
-  const onNetworkChange = () => {
-    const srcChain = $connectedSourceChain;
-    const destChain = $destNetwork;
-    if (srcChain && destChain) updateBalance($account?.address, srcChain.id, destChain.id);
-  };
-
   const onAccountChange = (newAccount: Account, prevAccount?: Account) => {
-    const srcChain = $connectedSourceChain;
-    const destChain = $destNetwork;
-    if (destChain && srcChain && (newAccount?.chainId === prevAccount?.chainId || !newAccount || !prevAccount))
-      updateBalance($account?.address, srcChain.id, destChain.id);
+    if (newAccount?.chainId === prevAccount?.chainId || !newAccount || !prevAccount) updateBalance();
   };
 
   $: textClass = disabled ? 'text-secondary-content' : 'font-bold ';
@@ -199,7 +182,7 @@
     $computingBalance = true;
     value = tokens[0];
     $selectedToken = value;
-    await updateBalance($account?.address, srcChain.id, destChain.id);
+    await updateBalance();
     $computingBalance = false;
   });
 </script>
@@ -221,7 +204,7 @@
         <span class="title-subsection-bold text-base text-secondary-content">{$t('token_dropdown.label')}</span>
       {:else if value}
         <div class="flex f-space-between space-x-2 items-center text-secondary-content">
-          <!-- Only match icons to configurd tokens -->
+          <!-- Only match icons to configured tokens -->
           {#if symbolToIconMap[value.symbol] && !value.imported}
             <i role="img" aria-label={value.name}>
               <svelte:component this={symbolToIconMap[value.symbol]} size={20} />
@@ -258,5 +241,4 @@
 
 <div data-modal-uuid={id} />
 
-<OnNetwork change={onNetworkChange} />
 <OnAccount change={onAccountChange} />
diff --git a/packages/bridge-ui/src/libs/wagmi/watcher.ts b/packages/bridge-ui/src/libs/wagmi/watcher.ts
index a1d5a5981e7..040e9bf85f7 100644
--- a/packages/bridge-ui/src/libs/wagmi/watcher.ts
+++ b/packages/bridge-ui/src/libs/wagmi/watcher.ts
@@ -22,7 +22,7 @@ export async function startWatching() {
       onChange(data) {
         checkForPausedContracts();
         log('Account changed', data);
-        account.set(data);
+
         refreshUserBalance();
         const { chain } = data;
 
@@ -37,6 +37,7 @@ export async function startWatching() {
           // the source chain.
           connectedSourceChain.set(chain);
         }
+        account.set(data);
       },
     });