fix(bridge-ui-v2): refresh ETH balance at the top right (#14539)

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { FetchBalanceResult } from '@wagmi/core';
   import { t } from 'svelte-i18n';
   import { formatUnits, parseUnits } from 'viem';
 
@@ -9,12 +8,13 @@
   import { warningToast } from '$components/NotificationToast';
   import { checkBalanceToBridge, getMaxAmountToBridge } from '$libs/bridge';
   import { InsufficientAllowanceError, InsufficientBalanceError, RevertedWithFailedError } from '$libs/error';
-  import { getBalance as getTokenBalance } from '$libs/token';
+  import { ETHToken, getBalance as getTokenBalance } from '$libs/token';
   import { debounce } from '$libs/util/debounce';
   import { getLogger } from '$libs/util/logger';
-  import { truncateString } from '$libs/util/truncateString';
+  import { renderBalance } from '$libs/util/renderBalance';
   import { uid } from '$libs/util/uid';
   import { account } from '$stores/account';
+  import { ethBalance } from '$stores/balance';
   import { network } from '$stores/network';
 
   import {
@@ -108,6 +108,16 @@
         destChainId,
         userAddress,
       });
+      if (token.name === ETHToken.name) {
+        $ethBalance = $tokenBalance;
+      } else {
+        $ethBalance = await getTokenBalance({
+          token: ETHToken,
+          srcChainId,
+          destChainId,
+          userAddress,
+        });
+      }
     } catch (err) {
       log('Error updating balance: ', err);
       //most likely we have a custom token that is not bridged yet
@@ -122,13 +132,6 @@
   // Could happen as the user enters an amount
   const debouncedValidateAmount = debounce(validateAmount, 300);
 
-  function renderBalance(balance: Maybe<FetchBalanceResult>) {
-    if (!balance) return '0.00';
-
-    let maxlength = Number(balance.formatted) < 0.000001 ? balance.decimals : 6;
-    return `${truncateString(balance.formatted, maxlength, '')} ${balance.symbol}`;
-  }
-
   // Will trigger on input events. We update the entered amount
   // and check it's validity
   function inputAmount(event: Event) {

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

@@ -4,9 +4,11 @@
 
   import { Button } from '$components/Button';
   import { DesktopOrLarger } from '$components/DesktopOrLarger';
-  import { Icon } from '$components/Icon';
+  import { EthIcon, Icon } from '$components/Icon';
   import { web3modal } from '$libs/connect';
   import { noop } from '$libs/util/noop';
+  import { renderBalance } from '$libs/util/renderBalance';
+  import { ethBalance } from '$stores/balance';
 
   export let connected = false;
 
@@ -17,8 +19,6 @@
   let web3modalOpen = false;
   let unsubscribeWeb3Modal = noop;
 
-  $: web3ButtonBalance = connected && isDesktopOrLarger ? 'show' : 'hide';
-
   function connectWallet() {
     if (web3modalOpen) return;
     web3modal.openModal();
@@ -43,7 +43,13 @@
   https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/components
 -->
 {#if connected}
-  <w3m-core-button balance={web3ButtonBalance} />
+  <Button class="px-[20px] py-2 mr-[8px] rounded-full" type="neutral" on:click={connectWallet}>
+    <span class="body-regular f-items-center space-x-2">
+      <svelte:component this={EthIcon} size={20} />
+      <span>{renderBalance($ethBalance)}</span>
+    </span>
+  </Button>
+  <w3m-core-button balance="hide" />
 {:else}
   <!-- TODO: fixing the width for English. i18n? -->
   <Button class="px-[20px] py-2 rounded-full w-[215px]" type="neutral" loading={web3modalOpen} on:click={connectWallet}>

packages/bridge-ui-v2/src/components/Icon/BLL.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  export let width = 32;
-  export let height = 32;
+  export let size = 32;
+  export let width = size;
+  export let height = size;
 </script>
 
 <svg {width} {height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

packages/bridge-ui-v2/src/components/Icon/ERC20.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  export let height = 30;
-  export let width = 30;
+  export let size = 30;
+  export let height = size;
+  export let width = size;
 </script>
 
 <svg

packages/bridge-ui-v2/src/components/Icon/HORSE.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  export let width = 32;
-  export let height = 32;
+  export let size = 32;
+  export let width = size;
+  export let height = size;
 </script>
 
 <svg {width} {height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -110,11 +110,11 @@
         <div class="flex space-x-2 items-center">
           {#if symbolToIconMap[value.symbol]}
             <i role="img" aria-label={value.name}>
-              <svelte:component this={symbolToIconMap[value.symbol]} />
+              <svelte:component this={symbolToIconMap[value.symbol]} size={28}/>
             </i>
           {:else}
             <i role="img" aria-label={value.symbol}>
-              <Erc20 />
+              <svelte:component this={Erc20} size={28}/>
             </i>
           {/if}
           <span class="title-subsection-bold">{value.symbol}</span>

packages/bridge-ui-v2/src/libs/util/renderBalance.ts

@@ -0,0 +1,10 @@
+import type { FetchBalanceResult } from '@wagmi/core';
+
+import { truncateString } from '$libs/util/truncateString';
+
+export function renderBalance(balance: Maybe<FetchBalanceResult>) {
+  if (!balance) return '0.00';
+
+  const maxlength = Number(balance.formatted) < 0.000001 ? balance.decimals : 6;
+  return `${truncateString(balance.formatted, maxlength, '')} ${balance.symbol}`;
+}

packages/bridge-ui-v2/src/stores/balance.ts

@@ -0,0 +1,4 @@
+import type { FetchBalanceResult } from '@wagmi/core';
+import { writable } from 'svelte/store';
+
+export const ethBalance = writable<Maybe<FetchBalanceResult>>(null);