From 081be64591b48cfa4fb10baf3067cf974476e298 Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Fri, 14 Jul 2023 09:42:30 +0200
Subject: [PATCH] feat(bridge-ui-v2): account balance (#14159)

Co-authored-by: Korbinian <KorbinianK@users.noreply.github.com>
---
 packages/bridge-ui-v2/package.json            |  1 +
 .../components/AmountInput/AmountInput.svelte | 53 ++++++++++++++++++-
 .../src/components/Bridge/Bridge.svelte       |  8 +--
 .../src/components/Faucet/Faucet.svelte       | 11 ++--
 .../components/LoadingText/LoadingText.svelte |  9 ++++
 .../src/components/LoadingText/index.ts       |  0
 .../bridge-ui-v2/src/libs/chain/chains.ts     | 27 +++++++---
 .../bridge-ui-v2/src/libs/token/getAddress.ts | 49 +++++++++++++++++
 .../bridge-ui-v2/src/libs/token/getBalance.ts | 26 +++++++++
 packages/bridge-ui-v2/src/libs/token/index.ts |  2 +
 .../bridge-ui-v2/src/libs/token/tokens.ts     |  9 ++++
 .../src/libs/util/truncateString.ts           |  3 ++
 12 files changed, 181 insertions(+), 17 deletions(-)
 create mode 100644 packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte
 create mode 100644 packages/bridge-ui-v2/src/components/LoadingText/index.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/getAddress.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/getBalance.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/util/truncateString.ts

diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json
index eebbbf12654..9f689a0e0f8 100644
--- a/packages/bridge-ui-v2/package.json
+++ b/packages/bridge-ui-v2/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite dev",
+    "dev:a3": "vite dev --mode a3",
     "build": "vite build",
     "preview": "vite preview",
     "test:pw": "playwright test",
diff --git a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte
index 7f92fdf456f..1c867eae6fc 100644
--- a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte
+++ b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte
@@ -1,10 +1,54 @@
 <script lang="ts">
+  import type { FetchBalanceResult, GetAccountResult, PublicClient } from '@wagmi/core';
   import { t } from 'svelte-i18n';
 
   import { InputBox } from '$components/InputBox';
+  import LoadingText from '$components/LoadingText/LoadingText.svelte';
+  import { getBalance as getTokenBalance, type Token } from '$libs/token';
+  import { getLogger } from '$libs/util/logger';
+  import { truncateString } from '$libs/util/truncateString';
   import { uid } from '$libs/util/uid';
+  import { account } from '$stores/account';
+  import { destChain, srcChain } from '$stores/network';
+
+  const log = getLogger('AmountInput');
+
+  export let token: Token;
 
   let inputId = `input-${uid()}`;
+
+  let tokenBalance: Maybe<FetchBalanceResult>;
+  let computingTokenBalance = false;
+
+  async function updateTokenBalance(
+    token?: Token,
+    account?: GetAccountResult<PublicClient>,
+    srcChainId?: number,
+    destChainId?: number,
+  ) {
+    if (!token || !account || !account.address) return;
+
+    computingTokenBalance = true;
+
+    try {
+      tokenBalance = await getTokenBalance(token, account.address, srcChainId, destChainId);
+
+      log('Token balance', tokenBalance);
+    } catch (error) {
+      console.error(error);
+
+      throw Error(`failed to get balance for ${token.symbol}`, { cause: error });
+    } finally {
+      computingTokenBalance = false;
+    }
+  }
+
+  export function renderTokenBalance(balance: Maybe<FetchBalanceResult>) {
+    if (!balance) return '0.00';
+    return `${truncateString(balance.formatted, 6)} ${balance.symbol}`;
+  }
+
+  $: updateTokenBalance(token, $account, $srcChain?.id, $destChain?.id);
 </script>
 
 <div class="f-col space-y-2">
@@ -12,7 +56,14 @@
     <label class="body-regular" for={inputId}>{$t('amount_input.label')}</label>
     <div class="body-small-regular">
       <span>{$t('amount_input.balance')}:</span>
-      <span>399.92 ETH</span>
+      <span>
+        {#if computingTokenBalance}
+          <LoadingText mask="0.0000" class="text-white" />
+          <LoadingText mask="XXX" class="text-white" />
+        {:else}
+          {renderTokenBalance(tokenBalance)}
+        {/if}
+      </span>
     </div>
   </div>
   <div class="relative f-items-center">
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
index 5f707c337b9..0a42443ab82 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -9,8 +9,10 @@
   import { ProcessingFee } from '$components/ProcessingFee';
   import { RecipientInput } from '$components/RecipientInput';
   import { TokenDropdown } from '$components/TokenDropdown';
-  import { tokens } from '$libs/token';
+  import { type Token, tokens } from '$libs/token';
   import { destChain, srcChain } from '$stores/network';
+
+  let selectedToken: Token;
 </script>
 
 <Card class="md:w-[524px]" title={$t('bridge.title')} text={$t('bridge.subtitle')}>
@@ -18,10 +20,10 @@
     <div class="space-y-4">
       <div class="space-y-2">
         <ChainSelector label={$t('chain.from')} value={$srcChain} />
-        <TokenDropdown {tokens} />
+        <TokenDropdown {tokens} bind:value={selectedToken} />
       </div>
 
-      <AmountInput />
+      <AmountInput token={selectedToken} />
 
       <div class="f-justify-center">
         <button class="f-center rounded-full bg-secondary-icon w-[30px] h-[30px]">
diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
index 7f7c1e4e6e5..bcb49af39e7 100644
--- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
+++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
@@ -20,7 +20,7 @@
   let checkingMintable = false;
   let switchingNetwork = false;
 
-  let selectedToken: Maybe<Token>;
+  let selectedToken: Token;
   let mintButtonEnabled = false;
   let reasonNotMintable = '';
 
@@ -90,15 +90,16 @@
   // This function will check whether or not the button to mint should be
   // enabled. If it shouldn't it'll also set the reason why so we can inform
   // the user why they can't mint
-  async function shouldEnableMintButton(token: Maybe<Token>, network: Maybe<Chain>) {
+  async function updateMintButtonState(token?: Token, network?: Chain) {
     if (!token || !network) return false;
 
     checkingMintable = true;
+    mintButtonEnabled = false;
     reasonNotMintable = '';
 
     try {
       await checkMintable(token, network);
-      return true;
+      mintButtonEnabled = true;
     } catch (error) {
       console.error(error);
 
@@ -121,8 +122,6 @@
     } finally {
       checkingMintable = false;
     }
-
-    return false;
   }
 
   function getAlertMessage(connected: boolean, wrongChain: boolean, reasonNotMintable: string) {
@@ -135,7 +134,7 @@
   $: wrongChain = isWrongChain($srcChain);
   $: alertMessage = getAlertMessage(connected, wrongChain, reasonNotMintable);
 
-  $: shouldEnableMintButton(selectedToken, $srcChain).then((enable) => (mintButtonEnabled = enable));
+  $: updateMintButtonState(selectedToken, $srcChain);
 </script>
 
 <Card class="md:w-[524px]" title={$t('faucet.title')} text={$t('faucet.subtitle')}>
diff --git a/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte b/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte
new file mode 100644
index 00000000000..bb76215a77e
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { classNames } from '$libs/util/classNames';
+
+  export let mask = 'Loading';
+
+  let classes = classNames('animate-pulse blur-sm font-bold', $$props.class);
+</script>
+
+<span class={classes}>{mask}</span>
diff --git a/packages/bridge-ui-v2/src/components/LoadingText/index.ts b/packages/bridge-ui-v2/src/components/LoadingText/index.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/bridge-ui-v2/src/libs/chain/chains.ts b/packages/bridge-ui-v2/src/libs/chain/chains.ts
index f59c8d2d7c7..227452bbc3a 100644
--- a/packages/bridge-ui-v2/src/libs/chain/chains.ts
+++ b/packages/bridge-ui-v2/src/libs/chain/chains.ts
@@ -1,4 +1,5 @@
 import type { Chain } from '@wagmi/core';
+import type { Address } from 'abitype';
 
 import {
   PUBLIC_L1_BRIDGE_ADDRESS,
@@ -8,6 +9,7 @@ import {
   PUBLIC_L1_EXPLORER_URL,
   PUBLIC_L1_RPC_URL,
   PUBLIC_L1_SIGNAL_SERVICE_ADDRESS,
+  PUBLIC_L1_TOKEN_VAULT_ADDRESS,
   PUBLIC_L2_BRIDGE_ADDRESS,
   PUBLIC_L2_CHAIN_ID,
   PUBLIC_L2_CHAIN_NAME,
@@ -15,6 +17,7 @@ import {
   PUBLIC_L2_EXPLORER_URL,
   PUBLIC_L2_RPC_URL,
   PUBLIC_L2_SIGNAL_SERVICE_ADDRESS,
+  PUBLIC_L2_TOKEN_VAULT_ADDRESS,
 } from '$env/static/public';
 
 export const mainnetChain: Chain = {
@@ -61,15 +64,25 @@ export const taikoChain: Chain = {
 
 export const chains = [mainnetChain, taikoChain];
 
-export const chainContractsMap = {
+export const chainContractsMap: Record<
+  string,
+  {
+    bridgeAddress: Address;
+    tokenVaultAddress: Address;
+    crossChainSyncAddress: Address;
+    signalServiceAddress: Address;
+  }
+> = {
   [PUBLIC_L1_CHAIN_ID]: {
-    bridgeAddress: PUBLIC_L1_BRIDGE_ADDRESS,
-    crossChainSyncAddress: PUBLIC_L1_CROSS_CHAIN_SYNC_ADDRESS,
-    signalServiceAddress: PUBLIC_L1_SIGNAL_SERVICE_ADDRESS,
+    bridgeAddress: PUBLIC_L1_BRIDGE_ADDRESS as Address,
+    tokenVaultAddress: PUBLIC_L1_TOKEN_VAULT_ADDRESS as Address,
+    crossChainSyncAddress: PUBLIC_L1_CROSS_CHAIN_SYNC_ADDRESS as Address,
+    signalServiceAddress: PUBLIC_L1_SIGNAL_SERVICE_ADDRESS as Address,
   },
   [PUBLIC_L2_CHAIN_ID]: {
-    bridgeAddress: PUBLIC_L2_BRIDGE_ADDRESS,
-    crossChainSyncAddress: PUBLIC_L2_CROSS_CHAIN_SYNC_ADDRESS,
-    signalServiceAddress: PUBLIC_L2_SIGNAL_SERVICE_ADDRESS,
+    bridgeAddress: PUBLIC_L2_BRIDGE_ADDRESS as Address,
+    tokenVaultAddress: PUBLIC_L2_TOKEN_VAULT_ADDRESS as Address,
+    crossChainSyncAddress: PUBLIC_L2_CROSS_CHAIN_SYNC_ADDRESS as Address,
+    signalServiceAddress: PUBLIC_L2_SIGNAL_SERVICE_ADDRESS as Address,
   },
 };
diff --git a/packages/bridge-ui-v2/src/libs/token/getAddress.ts b/packages/bridge-ui-v2/src/libs/token/getAddress.ts
new file mode 100644
index 00000000000..07ea5f660af
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/getAddress.ts
@@ -0,0 +1,49 @@
+import { getContract } from '@wagmi/core';
+import { zeroAddress } from 'viem';
+
+import { tokenVaultABI } from '$abi';
+import { chainContractsMap } from '$libs/chain';
+import { getLogger } from '$libs/util/logger';
+
+import { isETH } from './tokens';
+import type { Token } from './types';
+
+const log = getLogger('token:getAddress');
+
+export async function getAddress(token: Token, srcChainId?: number, destChainId?: number) {
+  if (!srcChainId) return;
+
+  // Get the address for the token on the source chain
+  let address = token.addresses[srcChainId];
+
+  // If the token isn't ETH or has no address...
+  if (!isETH(token) && (!address || address === zeroAddress)) {
+    if (!destChainId) return;
+
+    // Find the address on the destination chain instead. We are
+    // most likely on Taiko chain and the token hasn't yet been
+    // deployed on it.
+    const destChainTokenAddress = token.addresses[destChainId];
+
+    // Get the TokenVault contract on the source chain. The idea is to find
+    // the bridged address for the token on the destination chain if it's been
+    // deployed there. This is registered in the TokenVault contract,
+    // cacnonicalToBridged mapping.
+    const srcTokenVaultContract = getContract({
+      abi: tokenVaultABI,
+      address: chainContractsMap[srcChainId].tokenVaultAddress,
+    });
+
+    try {
+      address = await srcTokenVaultContract.read.canonicalToBridged([BigInt(destChainId), destChainTokenAddress]);
+
+      log(`Bridged address for ${token.symbol} is "${address}"`);
+    } catch (error) {
+      console.error(error);
+
+      throw Error(`Failed to get address for ${token.symbol} on chain ${srcChainId}`, { cause: error });
+    }
+  }
+
+  return address;
+}
diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
new file mode 100644
index 00000000000..b254e868d88
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
@@ -0,0 +1,26 @@
+import { fetchBalance } from '@wagmi/core';
+import type { Address } from 'abitype';
+import { zeroAddress } from 'viem';
+
+import { getAddress } from './getAddress';
+import { isETH } from './tokens';
+import type { Token } from './types';
+
+export async function getBalance(token: Token, userAddress: Address, srcChainId?: number, destChainId?: number) {
+  if (isETH(token)) {
+    return fetchBalance({ address: userAddress });
+  }
+
+  // We are dealing with an ERC20 token. We need to first find out its address
+  // on the current chain in order to fetch the balance.
+  const tokenAddress = await getAddress(token, srcChainId, destChainId);
+
+  if (!tokenAddress || tokenAddress === zeroAddress) return null;
+
+  // Wagmi is an excellent library 😊
+  return fetchBalance({
+    address: userAddress,
+    chainId: srcChainId,
+    token: tokenAddress,
+  });
+}
diff --git a/packages/bridge-ui-v2/src/libs/token/index.ts b/packages/bridge-ui-v2/src/libs/token/index.ts
index e2246d1f63d..92e250f0776 100644
--- a/packages/bridge-ui-v2/src/libs/token/index.ts
+++ b/packages/bridge-ui-v2/src/libs/token/index.ts
@@ -1,4 +1,6 @@
 export { checkMintable } from './checkMintable';
+export { getAddress } from './getAddress';
+export { getBalance } from './getBalance';
 export { mint } from './mint';
 export * from './tokens';
 export * from './types';
diff --git a/packages/bridge-ui-v2/src/libs/token/tokens.ts b/packages/bridge-ui-v2/src/libs/token/tokens.ts
index dbfb937b252..8f867c70b24 100644
--- a/packages/bridge-ui-v2/src/libs/token/tokens.ts
+++ b/packages/bridge-ui-v2/src/libs/token/tokens.ts
@@ -39,3 +39,12 @@ export const testERC20Tokens: Token[] = jsonParseWithDefault<TokenEnv[]>(PUBLIC_
 );
 
 export const tokens = [ETHToken, ...testERC20Tokens];
+
+export function isETH(token: Token) {
+  // Should be fine just by checking the symbol
+  return token.symbol.toLocaleLowerCase() === ETHToken.symbol.toLocaleLowerCase();
+}
+
+export function isERC20(token: Token): boolean {
+  return !isETH(token);
+}
diff --git a/packages/bridge-ui-v2/src/libs/util/truncateString.ts b/packages/bridge-ui-v2/src/libs/util/truncateString.ts
new file mode 100644
index 00000000000..266795e21dd
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/truncateString.ts
@@ -0,0 +1,3 @@
+export function truncateString(str: string, maxlength: number, strBoundary = '…') {
+  return str.length > maxlength ? `${str.substring(0, maxlength)}${strBoundary}` : str;
+}