From 61138a88b529d70df0e81468052971a4fc4fde16 Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Thu, 20 Jul 2023 23:19:27 +0200
Subject: [PATCH] fix(bridge-ui-v2): processing fee and amount input validation
 (#14220)

---
 .../Amount.svelte}                            | 104 +++++++++++-------
 .../{AmountInput => Amount}/Balance.svelte    |   4 +-
 .../src/components/Bridge/Amount/index.ts     |   1 +
 .../components/Bridge/AmountInput/index.ts    |   1 -
 .../src/components/Bridge/Bridge.svelte       |  10 +-
 .../Bridge/ProcessingFee/NoneOption.svelte    |   3 +-
 .../Bridge/ProcessingFee/ProcessingFee.svelte |  36 +++++-
 .../ProcessingFee/RecommendedFee.svelte       |   3 +-
 .../Recipient.svelte}                         |   0
 .../src/components/Bridge/Recipient/index.ts  |   1 +
 .../components/Bridge/RecipientInput/index.ts |   1 -
 .../Bridge/SwitchChainsButton.svelte          |  13 ++-
 .../src/components/Button/Button.svelte       |   2 +-
 .../src/components/Faucet/Faucet.svelte       |  28 +++--
 .../NotificationToast/ItemToast.svelte        |   2 +-
 packages/bridge-ui-v2/src/i18n/en.json        |  14 ++-
 .../src/libs/bridge/ERC20Bridge.ts            |   2 +-
 .../bridge-ui-v2/src/libs/bridge/ETHBridge.ts |   4 +-
 .../src/libs/bridge/checkBalanceToBridge.ts   |  87 +++++++++++++++
 ...MaxToBridge.ts => getMaxAmountToBridge.ts} |  47 ++++----
 .../bridge-ui-v2/src/libs/bridge/index.ts     |   2 +
 .../bridge-ui-v2/src/libs/error/errors.ts     |   3 +
 packages/bridge-ui-v2/src/libs/error/index.ts |   1 +
 .../src/libs/fee/recommendProcessingFee.ts    |  10 +-
 .../src/libs/token/checkMintable.test.ts      |   8 +-
 .../src/libs/token/checkMintable.ts           |  11 +-
 .../src/libs/token/getAddress.test.ts         |  20 ++--
 .../bridge-ui-v2/src/libs/token/getAddress.ts |  38 +++----
 .../src/libs/token/getBalance.test.ts         |  27 +++--
 .../bridge-ui-v2/src/libs/token/getBalance.ts |  18 +--
 .../libs/token/getCrossChainAddress.test.ts   |   5 +
 .../src/libs/token/getCrossChainAddress.ts    |  33 ++++++
 packages/bridge-ui-v2/src/libs/token/index.ts |   1 +
 .../src/libs/token/isDeployedCrossChain.ts    |  24 ++++
 .../bridge-ui-v2/src/libs/token/mint.test.ts  |   8 +-
 packages/bridge-ui-v2/src/libs/token/mint.ts  |   9 +-
 packages/bridge-ui-v2/src/libs/token/types.ts |   5 -
 .../src/libs/util/getConnectedWallet.test.ts  |   5 +
 .../{getWallet.ts => getConnectedWallet.ts}   |   4 +-
 .../src/libs/util/truncateDecimal.test.ts     |   9 ++
 .../src/libs/util/truncateString.test.ts      |   9 ++
 41 files changed, 435 insertions(+), 178 deletions(-)
 rename packages/bridge-ui-v2/src/components/Bridge/{AmountInput/AmountInput.svelte => Amount/Amount.svelte} (58%)
 rename packages/bridge-ui-v2/src/components/Bridge/{AmountInput => Amount}/Balance.svelte (95%)
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/Amount/index.ts
 delete mode 100644 packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts
 rename packages/bridge-ui-v2/src/components/Bridge/{RecipientInput/RecipientInput.svelte => Recipient/Recipient.svelte} (100%)
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/Recipient/index.ts
 delete mode 100644 packages/bridge-ui-v2/src/components/Bridge/RecipientInput/index.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts
 rename packages/bridge-ui-v2/src/libs/bridge/{getMaxToBridge.ts => getMaxAmountToBridge.ts} (52%)
 create mode 100644 packages/bridge-ui-v2/src/libs/error/errors.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/error/index.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.test.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/isDeployedCrossChain.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/util/getConnectedWallet.test.ts
 rename packages/bridge-ui-v2/src/libs/util/{getWallet.ts => getConnectedWallet.ts} (54%)
 create mode 100644 packages/bridge-ui-v2/src/libs/util/truncateDecimal.test.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/util/truncateString.test.ts

diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/AmountInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount/Amount.svelte
similarity index 58%
rename from packages/bridge-ui-v2/src/components/Bridge/AmountInput/AmountInput.svelte
rename to packages/bridge-ui-v2/src/components/Bridge/Amount/Amount.svelte
index 02e0875364..9775ac2855 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/AmountInput.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount/Amount.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import type { FetchBalanceResult } from '@wagmi/core';
   import { t } from 'svelte-i18n';
-  import { formatEther, parseUnits } from 'viem';
+  import { formatUnits, parseUnits } from 'viem';
 
   import Icon from '$components/Icon/Icon.svelte';
   import { InputBox } from '$components/InputBox';
   import { warningToast } from '$components/NotificationToast';
-  import { getMaxToBridge } from '$libs/bridge/getMaxToBridge';
+  import { checkBalanceToBridge, getMaxAmountToBridge } from '$libs/bridge';
+  import { InsufficientAllowanceError, InsufficientBalanceError } from '$libs/error';
   import { debounce } from '$libs/util/debounce';
   import { uid } from '$libs/util/uid';
   import { account } from '$stores/account';
@@ -20,44 +21,49 @@
   let inputBox: InputBox;
 
   let computingMaxAmount = false;
-  let errorAmount = false;
 
-  // Let's get the max amount to bridge and see if it's less
-  // than what the user has entered. For ETH, will actually get an error
-  // when trying to get that max amount, if the user has entered too much ETH
+  // There are two possible errors that can happen when the user
+  // enters an amount:
+  // 1. Insufficient balance
+  // 2. Insufficient allowance
+  // The first one is an error and the user cannot proceed. The second one
+  // is a warning but the user must approve allowance before bridging.
+  let insufficientBalance = false;
+  let insufficientAllowance = false;
+
   async function checkEnteredAmount() {
+    insufficientBalance = false;
+    insufficientAllowance = false;
+
     if (
       !$selectedToken ||
       !$network ||
+      !$destNetwork ||
       !$account?.address ||
-      $enteredAmount === BigInt(0) // why to even bother, right?
-    ) {
-      errorAmount = false;
+      $enteredAmount === BigInt(0) // no need to check if the amount is 0
+    )
       return;
-    }
 
     try {
-      const maxAmount = await getMaxToBridge({
+      await checkBalanceToBridge({
+        to: $account.address,
         token: $selectedToken,
+        amount: $enteredAmount,
         balance: tokenBalance.value,
-        processingFee: $processingFee,
         srcChainId: $network.id,
-        destChainId: $destNetwork?.id,
-        userAddress: $account.address,
-        amount: $enteredAmount,
+        destChainId: $destNetwork.id,
+        processingFee: $processingFee,
       });
-
-      if ($enteredAmount > maxAmount) {
-        errorAmount = true;
-      }
     } catch (err) {
       console.error(err);
 
-      // Viem will throw an error that contains the following message, indicating
-      // that the user won't have enough to pay the transaction
-      // TODO: better way to handle this. Error codes?
-      if (`${err}`.toLocaleLowerCase().match('transaction exceeds the balance')) {
-        errorAmount = true;
+      switch (true) {
+        case err instanceof InsufficientBalanceError:
+          insufficientBalance = true;
+          break;
+        case err instanceof InsufficientAllowanceError:
+          insufficientAllowance = true;
+          break;
       }
     }
   }
@@ -68,14 +74,15 @@
   // Will trigger on input events. We update the entered amount
   // and check it's validity
   function updateAmount(event: Event) {
-    errorAmount = false;
+    insufficientBalance = false;
+    insufficientAllowance = false;
 
     if (!$selectedToken) return;
 
     const target = event.target as HTMLInputElement;
 
     try {
-      $enteredAmount = parseUnits(target.value, $selectedToken?.decimals);
+      $enteredAmount = parseUnits(target.value, $selectedToken.decimals);
 
       debouncedCheckEnteredAmount();
     } catch (err) {
@@ -83,30 +90,35 @@
     }
   }
 
-  function setETHAmount(amount: bigint) {
-    inputBox.setValue(formatEther(amount));
-    $enteredAmount = amount;
-  }
-
-  // Will trigger when the user clicks on the "Max" button
+  // "MAX" button handler
   async function useMaxAmount() {
-    errorAmount = false;
+    insufficientBalance = false;
+    insufficientAllowance = false;
 
-    if (!$selectedToken || !$network || !$account?.address) return;
+    // We cannot calculate the max amount without these guys
+    if (!$selectedToken || !$network || !$destNetwork || !$account?.address) return;
 
     computingMaxAmount = true;
 
     try {
-      const maxAmount = await getMaxToBridge({
+      const maxAmount = await getMaxAmountToBridge({
+        to: $account.address,
         token: $selectedToken,
         balance: tokenBalance.value,
         processingFee: $processingFee,
         srcChainId: $network.id,
-        destChainId: $destNetwork?.id,
-        userAddress: $account.address,
+        destChainId: $destNetwork.id,
+        amount: BigInt(1), // whatever amount to estimate the cost
       });
 
-      setETHAmount(maxAmount);
+      // Update UI
+      inputBox.setValue(formatUnits(maxAmount, $selectedToken.decimals));
+
+      // Update state
+      $enteredAmount = maxAmount;
+
+      // Check validity
+      checkEnteredAmount();
     } catch (err) {
       console.error(err);
       warningToast($t('amount_input.button.failed_max'));
@@ -134,19 +146,20 @@
       placeholder="0.01"
       min="0"
       loading={computingMaxAmount}
-      error={errorAmount}
+      error={insufficientBalance}
       on:input={updateAmount}
       bind:this={inputBox}
       class="w-full input-box outline-none py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content" />
+    <!-- TODO: talk to Jane about the MAX button and its styling -->
     <button
-      class="absolute right-6 uppercase"
+      class="absolute right-6 uppercase hover:font-bold"
       disabled={!$selectedToken || !$network || computingMaxAmount}
       on:click={useMaxAmount}>
       {$t('amount_input.button.max')}
     </button>
   </div>
 
-  {#if errorAmount}
+  {#if insufficientBalance}
     <!-- TODO: should we make another component for flat error messages? -->
     <div class="f-items-center space-x-1 mt-3">
       <Icon type="exclamation-circle" fillClass="fill-negative-sentiment" />
@@ -155,4 +168,13 @@
       </div>
     </div>
   {/if}
+
+  {#if insufficientAllowance}
+    <div class="f-items-center space-x-1 mt-3">
+      <Icon type="exclamation-circle" fillClass="fill-warning-sentiment" />
+      <div class="body-small-regular text-warning-sentiment">
+        {$t('amount_input.error.insufficient_allowance')}
+      </div>
+    </div>
+  {/if}
 </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount/Balance.svelte
similarity index 95%
rename from packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte
rename to packages/bridge-ui-v2/src/components/Bridge/Amount/Balance.svelte
index a82bc0d8fa..ca4c24ccce 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount/Balance.svelte
@@ -16,7 +16,7 @@
   let errorComputingTokenBalance = false;
 
   async function updateTokenBalance(token: Maybe<Token>, account?: Account, srcChainId?: number, destChainId?: number) {
-    if (!token || !account || !account.address) return;
+    if (!token || !srcChainId || !account?.address) return;
 
     computingTokenBalance = true;
     errorComputingTokenBalance = false;
@@ -24,9 +24,9 @@
     try {
       value = await getTokenBalance({
         token,
+        srcChainId,
         destChainId,
         userAddress: account.address,
-        chainId: srcChainId,
       });
     } catch (err) {
       console.error(err);
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount/index.ts b/packages/bridge-ui-v2/src/components/Bridge/Amount/index.ts
new file mode 100644
index 0000000000..e8c536613e
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount/index.ts
@@ -0,0 +1 @@
+export { default as Amount } from './Amount.svelte';
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts
deleted file mode 100644
index ff5cf90c7c..0000000000
--- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as AmountInput } from './AmountInput.svelte';
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
index 770e2c091a..86a1baa5d1 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -12,9 +12,9 @@
   import type { Account } from '$stores/account';
   import { type Network, network } from '$stores/network';
 
-  import { AmountInput } from './AmountInput';
+  import { Amount } from './Amount';
   import { ProcessingFee } from './ProcessingFee';
-  import { RecipientInput } from './RecipientInput';
+  import { Recipient } from './Recipient';
   import { destNetwork, selectedToken } from './state';
   import SwitchChainsButton from './SwitchChainsButton.svelte';
 
@@ -45,7 +45,7 @@
         <TokenDropdown {tokens} bind:value={$selectedToken} />
       </div>
 
-      <AmountInput />
+      <Amount />
 
       <div class="f-justify-center">
         <SwitchChainsButton />
@@ -53,7 +53,7 @@
 
       <div class="space-y-2">
         <ChainSelector label={$t('chain.to')} value={$destNetwork} readOnly />
-        <RecipientInput />
+        <!-- <RecipientInput /> -->
       </div>
     </div>
 
@@ -61,7 +61,7 @@
 
     <div class="h-sep" />
 
-    <Button type="primary" class="px-[28px] py-[14px]">
+    <Button type="primary" class="px-[28px] py-[14px] rounded-full w-full">
       <span class="body-bold">{$t('bridge.button.bridge')}</span>
     </Button>
   </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
index 99af71c167..d9034180e4 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
@@ -23,9 +23,8 @@
     try {
       // Get the balance of the user on the destination chain
       const destBalance = await getBalance({
-        token,
         userAddress,
-        chainId: destChainId,
+        srcChainId: destChainId,
       });
 
       // Calculate the recommended amount of ETH needed for processMessage call
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
index 47dc3807f9..b75865e414 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -4,6 +4,7 @@
   import { formatEther } from 'viem';
 
   import { Alert } from '$components/Alert';
+  import { Button } from '$components/Button';
   import { Icon } from '$components/Icon';
   import { InputBox } from '$components/InputBox';
   import { LoadingText } from '$components/LoadingText';
@@ -19,6 +20,7 @@
 
   let dialogId = `dialog-${uid()}`;
   let selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED;
+  let prevOptionSelected = ProcessingFeeMethod.RECOMMENDED;
 
   let recommendedAmount = BigInt(0);
   let calculatingRecommendedAmount = false;
@@ -42,10 +44,20 @@
   }
 
   function openModal() {
+    // Keep track of the selected method before opening the modal
+    // so if we cancel we can go back to the previous method
+    prevOptionSelected = selectedFeeMethod;
+
     modalOpen = true;
   }
 
-  function closeOnOptionClick() {
+  function cancelModal() {
+    inputBox.clear();
+    selectedFeeMethod = prevOptionSelected;
+    closeModal();
+  }
+
+  function closeModalWithDelay() {
     // By adding delay there is enough time to see the selected option
     // before closing the modal. Better experience for the user.
     setTimeout(closeModal, processingFeeComponent.closingDelayOptionClick);
@@ -122,7 +134,7 @@
     {/if}
   </span>
 
-  <dialog id={dialogId} class="modal modal-bottom md:absolute md:px-4 md:pb-4" class:modal-open={modalOpen}>
+  <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
     <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
       <button class="absolute right-6 top-[35px]" on:click={closeModal}>
         <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
@@ -130,7 +142,7 @@
 
       <h3 class="title-body-bold mb-7">{$t('processing_fee.title')}</h3>
 
-      <ul class="space-y-7 mb-[20px]">
+      <ul class="space-y-7">
         <!-- RECOMMENDED -->
         <li class="f-between-center">
           <div class="f-col">
@@ -155,7 +167,7 @@
             value={ProcessingFeeMethod.RECOMMENDED}
             name="processingFeeMethod"
             bind:group={selectedFeeMethod}
-            on:click={closeOnOptionClick} />
+            on:click={closeModalWithDelay} />
         </li>
 
         <!-- NONE -->
@@ -177,7 +189,7 @@
               value={ProcessingFeeMethod.NONE}
               name="processingFeeMethod"
               bind:group={selectedFeeMethod}
-              on:click={closeOnOptionClick} />
+              on:click={closeModalWithDelay} />
           </div>
 
           {#if !hasEnoughEth}
@@ -207,7 +219,7 @@
         </li>
       </ul>
 
-      <div class="relative f-items-center">
+      <div class="relative f-items-center my-[20px]">
         <InputBox
           type="number"
           min="0"
@@ -218,6 +230,18 @@
           bind:this={inputBox} />
         <span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
       </div>
+
+      <div class="grid grid-cols-2 gap-[20px]">
+        <Button
+          on:click={cancelModal}
+          type="neutral"
+          class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
+          <span class="body-bold">{$t('processing_fee.button.cancel')}</span>
+        </Button>
+        <Button type="primary" class="px-[28px] py-[10px] rounded-full w-auto" on:click={closeModal}>
+          <span class="body-bold">{$t('processing_fee.button.confirm')}</span>
+        </Button>
+      </div>
     </div>
   </dialog>
 </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte
index 4e63211415..cef262625e 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte
@@ -15,7 +15,8 @@
   let interval: ReturnType<typeof setInterval>;
 
   async function compute(token: Maybe<Token>, srcChainId?: number, destChainId?: number) {
-    if (!token) return;
+    // Without token nor destination chain we cannot compute this fee
+    if (!token || !destChainId) return;
 
     calculating = true;
     error = false;
diff --git a/packages/bridge-ui-v2/src/components/Bridge/RecipientInput/RecipientInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient/Recipient.svelte
similarity index 100%
rename from packages/bridge-ui-v2/src/components/Bridge/RecipientInput/RecipientInput.svelte
rename to packages/bridge-ui-v2/src/components/Bridge/Recipient/Recipient.svelte
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient/index.ts b/packages/bridge-ui-v2/src/components/Bridge/Recipient/index.ts
new file mode 100644
index 0000000000..fc42fed1b7
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient/index.ts
@@ -0,0 +1 @@
+export { default as Recipient } from './Recipient.svelte';
diff --git a/packages/bridge-ui-v2/src/components/Bridge/RecipientInput/index.ts b/packages/bridge-ui-v2/src/components/Bridge/RecipientInput/index.ts
deleted file mode 100644
index 24b36c2b3a..0000000000
--- a/packages/bridge-ui-v2/src/components/Bridge/RecipientInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as RecipientInput } from './RecipientInput.svelte';
diff --git a/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
index 3197b75995..18af65694e 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
@@ -1,14 +1,25 @@
 <script lang="ts">
   import { switchNetwork } from '@wagmi/core';
+  import { t } from 'svelte-i18n';
+  import { UserRejectedRequestError } from 'viem';
 
   import { Icon } from '$components/Icon';
+  import { warningToast } from '$components/NotificationToast';
 
   import { destNetwork } from './state';
 
   async function switchToDestChain() {
     if (!$destNetwork) return;
 
-    await switchNetwork({ chainId: $destNetwork.id });
+    try {
+      await switchNetwork({ chainId: $destNetwork.id });
+    } catch (err) {
+      console.error(err);
+
+      if (err instanceof UserRejectedRequestError) {
+        warningToast($t('messages.network.rejected'));
+      }
+    }
   }
 </script>
 
diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte
index 0bcab9c66f..b93c011bb4 100644
--- a/packages/bridge-ui-v2/src/components/Button/Button.svelte
+++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte
@@ -45,7 +45,7 @@
   };
 
   $: classes = classNames(
-    'btn w-full h-auto min-h-fit border-0',
+    'btn h-auto min-h-fit border-0',
 
     type === 'primary' ? 'body-bold' : 'body-regular',
 
diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
index 2b7e621a56..95216792d9 100644
--- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
+++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
@@ -11,7 +11,8 @@
   import { successToast, warningToast } from '$components/NotificationToast';
   import { TokenDropdown } from '$components/TokenDropdown';
   import { PUBLIC_L1_CHAIN_ID, PUBLIC_L1_CHAIN_NAME, PUBLIC_L1_EXPLORER_URL } from '$env/static/public';
-  import { MintableError, testERC20Tokens, type Token } from '$libs/token';
+  import { InsufficientBalanceError, TokenMintedError } from '$libs/error';
+  import { testERC20Tokens, type Token } from '$libs/token';
   import { checkMintable, mint } from '$libs/token';
   import { account } from '$stores/account';
   import { network } from '$stores/network';
@@ -46,14 +47,14 @@
     // During loading state we make sure the user cannot use this function
     if (checkingMintable || minting) return;
 
-    // A token and a source chain must be selected in order to be able to mint
+    // Token and source chain are needed to mint
     if (!selectedToken || !$network) return;
 
     // Let's begin the minting process
     minting = true;
 
     try {
-      const txHash = await mint(selectedToken);
+      const txHash = await mint(selectedToken, $network.id);
 
       successToast(
         $t('faucet.minting_tx', {
@@ -69,7 +70,10 @@
     } catch (err) {
       console.error(err);
 
-      // const { cause } = error as Error;
+      const { cause } = err as Error;
+      if (cause instanceof UserRejectedRequestError) {
+        warningToast($t('messages.mint.rejected'));
+      }
     } finally {
       minting = false;
     }
@@ -99,13 +103,11 @@
     } catch (err) {
       console.error(err);
 
-      const { cause } = err as Error;
-
-      switch (cause) {
-        case MintableError.INSUFFICIENT_BALANCE:
+      switch (true) {
+        case err instanceof InsufficientBalanceError:
           reasonNotMintable = $t('faucet.warning.insufficient_balance');
           break;
-        case MintableError.TOKEN_MINTED:
+        case err instanceof TokenMintedError:
           reasonNotMintable = $t('faucet.warning.token_minted');
           break;
         default:
@@ -145,7 +147,11 @@
 
     {#if connected && wrongChain}
       <!-- We give the user an easier way to switch chains with this button -->
-      <Button type="primary" class="px-[28px] py-[14px]" loading={switchingNetwork} on:click={switchNetworkToL1}>
+      <Button
+        type="primary"
+        class="px-[28px] py-[14px] rounded-full w-full"
+        loading={switchingNetwork}
+        on:click={switchNetworkToL1}>
         {#if switchingNetwork}
           <span>{$t('messages.network.switching')}</span>
         {:else}
@@ -158,7 +164,7 @@
     {:else}
       <Button
         type="primary"
-        class="px-[28px] py-[14px]"
+        class="px-[28px] py-[14px] rounded-full w-full"
         disabled={!mintButtonEnabled}
         loading={checkingMintable || minting}
         on:click={mintToken}>
diff --git a/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte b/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte
index 3b2659a8ef..582f88f955 100644
--- a/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte
+++ b/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte
@@ -59,7 +59,7 @@
 </script>
 
 <div role="alert" class={alertClasses}>
-  <div class="grid grid-cols-[24px_auto] space-x-2">
+  <div class="grid grid-cols-[24px_auto] items-center space-x-2">
     <Icon type={iconTypeMap[type]} size={24} fillClass={alertIconClassMap[type]} />
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     <div class={messageClasses}>{@html message}</div>
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index 56ab85e668..af62f785c4 100644
--- a/packages/bridge-ui-v2/src/i18n/en.json
+++ b/packages/bridge-ui-v2/src/i18n/en.json
@@ -18,7 +18,7 @@
 
   "processing_fee": {
     "title": "Processing fee",
-    "link": "Customise fee",
+    "link": "Customize fee",
     "recommended": {
       "label": "Recommended",
       "calculating": "Calculating",
@@ -32,6 +32,10 @@
     "custom": {
       "label": "Custom",
       "text": "Customize your processing fee"
+    },
+    "button": {
+      "confirm": "Confirm",
+      "cancel": "Cancel"
     }
   },
 
@@ -88,7 +92,10 @@
       "max": "Max",
       "failed_max": "Coult not estimate max amount to bridge."
     },
-    "error.insufficient_balance": "Insufficient balance"
+    "error": {
+      "insufficient_balance": "Insufficient balance",
+      "insufficient_allowance": "Insufficient allowance"
+    }
   },
 
   "chain_selector": {
@@ -105,6 +112,9 @@
     "network": {
       "switching": "Switching network",
       "rejected": "Request to switch chain rejected."
+    },
+    "mint": {
+      "rejected": "Request to mint rejected."
     }
   },
 
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
index 074bc062a2..df3a68c595 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
@@ -2,7 +2,7 @@ import { getContract } from '@wagmi/core';
 
 import { tokenVaultABI } from '$abi';
 import { bridge } from '$config';
-import { getConnectedWallet } from '$libs/util/getWallet';
+import { getConnectedWallet } from '$libs/util/getConnectedWallet';
 import { getLogger } from '$libs/util/logger';
 
 import type { Bridge, ERC20BridgeArgs, SendERC20Args } from './types';
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts
index 45c54f813a..928857a1a6 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts
@@ -2,7 +2,7 @@ import { getContract } from '@wagmi/core';
 
 import { bridgeABI } from '$abi';
 import { bridge } from '$config';
-import { getConnectedWallet } from '$libs/util/getWallet';
+import { getConnectedWallet } from '$libs/util/getConnectedWallet';
 import { getLogger } from '$libs/util/logger';
 
 import type { Bridge, ETHBridgeArgs, Message } from './types';
@@ -29,7 +29,7 @@ export class ETHBridge implements Bridge {
       to.toLowerCase() === owner.toLowerCase() ? [amount, BigInt(0)] : [BigInt(0), amount];
 
     // If there is a processing fee, use the specified message gas limit
-    // if not called by the owner
+    // as might not be called by the owner
     const gasLimit = processingFee > 0 ? bridge.noOwnerGasLimit : BigInt(0);
 
     const message: Message = {
diff --git a/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts b/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts
new file mode 100644
index 0000000000..44be8a43c2
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts
@@ -0,0 +1,87 @@
+import { type Address, zeroAddress } from 'viem';
+
+import { chainContractsMap } from '$libs/chain';
+import { InsufficientAllowanceError, InsufficientBalanceError } from '$libs/error';
+import { getAddress, isETH, type Token } from '$libs/token';
+import { isDeployedCrossChain } from '$libs/token/isDeployedCrossChain';
+
+import { bridges } from './bridges';
+import { estimateCostOfBridging } from './estimateCostOfBridging';
+import type { BridgeArgs, ERC20BridgeArgs, ETHBridgeArgs } from './types';
+
+type HasEnoughBalanceToBridgeArgs = {
+  to: Address;
+  token: Token;
+  amount: bigint;
+  balance: bigint;
+  srcChainId: number;
+  destChainId: number;
+  processingFee?: bigint;
+};
+
+export async function checkBalanceToBridge({
+  to,
+  token,
+  amount,
+  balance,
+  srcChainId,
+  destChainId,
+  processingFee,
+}: HasEnoughBalanceToBridgeArgs) {
+  let estimatedCost = BigInt(0);
+
+  const bridgeArgs = {
+    to,
+    amount,
+    srcChainId,
+    destChainId,
+    processingFee,
+  } as BridgeArgs;
+
+  if (isETH(token)) {
+    const { bridgeAddress } = chainContractsMap[srcChainId];
+
+    try {
+      estimatedCost = await estimateCostOfBridging(bridges.ETH, {
+        ...bridgeArgs,
+        bridgeAddress,
+      } as ETHBridgeArgs);
+    } catch (err) {
+      console.error(err);
+
+      if (`${err}`.includes('transaction exceeds the balance of the account')) {
+        throw new InsufficientBalanceError('you do not have enough balance to bridge ETH', { cause: err });
+      }
+    }
+  } else {
+    const { tokenVaultAddress } = chainContractsMap[srcChainId];
+    const tokenAddress = await getAddress({ token, srcChainId, destChainId });
+
+    if (!tokenAddress || tokenAddress === zeroAddress) return false;
+
+    const isTokenAlreadyDeployed = await isDeployedCrossChain({
+      token,
+      srcChainId: destChainId,
+      destChainId: srcChainId,
+    });
+
+    try {
+      estimatedCost = await estimateCostOfBridging(bridges.ERC20, {
+        ...bridgeArgs,
+        tokenAddress,
+        tokenVaultAddress,
+        isTokenAlreadyDeployed,
+      } as ERC20BridgeArgs);
+    } catch (err) {
+      console.error(err);
+
+      if (`${err}`.includes('insufficient allowance')) {
+        throw new InsufficientAllowanceError(`insufficient allowance for the amount ${amount}`, { cause: err });
+      }
+    }
+  }
+
+  if (estimatedCost > balance - amount) {
+    throw new InsufficientBalanceError('you do not have enough balance to bridge');
+  }
+}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/getMaxToBridge.ts b/packages/bridge-ui-v2/src/libs/bridge/getMaxAmountToBridge.ts
similarity index 52%
rename from packages/bridge-ui-v2/src/libs/bridge/getMaxToBridge.ts
rename to packages/bridge-ui-v2/src/libs/bridge/getMaxAmountToBridge.ts
index 041567139a..7b7e98d780 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/getMaxToBridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/getMaxAmountToBridge.ts
@@ -1,6 +1,6 @@
 import type { Address } from 'viem';
 
-import { chainContractsMap, chains } from '$libs/chain';
+import { chainContractsMap } from '$libs/chain';
 import { isETH, type Token } from '$libs/token';
 import { getLogger } from '$libs/util/logger';
 
@@ -9,52 +9,53 @@ import { estimateCostOfBridging } from './estimateCostOfBridging';
 import type { ETHBridgeArgs } from './types';
 
 type GetMaxToBridgeArgs = {
+  to: Address;
   token: Token;
   balance: bigint;
-  srcChainId: number;
-  userAddress: Address;
-  processingFee: bigint;
-  destChainId?: number;
   amount?: bigint;
+  srcChainId?: number;
+  destChainId?: number;
+  processingFee?: bigint;
 };
 
-const log = getLogger('getMaxToBridge');
+const log = getLogger('bridge:getMaxAmountToBridge');
 
-export async function getMaxToBridge({
+export async function getMaxAmountToBridge({
+  to,
   token,
+  amount,
   balance,
   srcChainId,
-  userAddress,
-  processingFee,
   destChainId,
-  amount,
+  processingFee,
 }: GetMaxToBridgeArgs) {
+  // For ERC20 tokens, we can bridge the whole balance
+  let maxAmount = balance;
+
   if (isETH(token)) {
-    const to = userAddress;
-    const { bridgeAddress } = chainContractsMap[srcChainId.toString()];
+    // We cannot really compute the cost of bridging ETH without
+    if (!to || !srcChainId || !destChainId) {
+      throw Error('missing required arguments to compute cost');
+    }
+
+    const { bridgeAddress } = chainContractsMap[srcChainId];
 
     const bridgeArgs = {
       to,
+      amount,
       srcChainId,
+      destChainId,
       bridgeAddress,
       processingFee,
-
-      // If no amount passed in, use whatever just to get an estimation
-      amount: amount ?? BigInt(1),
-
-      // If no destination chain is selected, find another chain to estimate
-      // TODO: we might want to really find a compatible chain to bridge to
-      //       if we have multiple layers
-      destChainId: destChainId ?? chains.find((chain) => chain.id !== srcChainId)?.id,
     } as ETHBridgeArgs;
 
     const estimatedCost = await estimateCostOfBridging(bridges.ETH, bridgeArgs);
 
     log('Estimated cost of bridging', estimatedCost, 'with argument', bridgeArgs);
 
-    return balance - processingFee - estimatedCost;
+    // We also need to take into account the processing fee if any
+    maxAmount = balance - estimatedCost - (processingFee ?? BigInt(0));
   }
 
-  // For ERC20 tokens, we can bridge the whole balance
-  return balance;
+  return maxAmount;
 }
diff --git a/packages/bridge-ui-v2/src/libs/bridge/index.ts b/packages/bridge-ui-v2/src/libs/bridge/index.ts
index 5187917dc4..284f0b0ba2 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/index.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/index.ts
@@ -1,3 +1,5 @@
 export { bridges } from './bridges';
+export { checkBalanceToBridge } from './checkBalanceToBridge';
 export { estimateCostOfBridging } from './estimateCostOfBridging';
+export { getMaxAmountToBridge } from './getMaxAmountToBridge';
 export * from './types';
diff --git a/packages/bridge-ui-v2/src/libs/error/errors.ts b/packages/bridge-ui-v2/src/libs/error/errors.ts
new file mode 100644
index 0000000000..b81a7432d5
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/error/errors.ts
@@ -0,0 +1,3 @@
+export class TokenMintedError extends Error {}
+export class InsufficientBalanceError extends Error {}
+export class InsufficientAllowanceError extends Error {}
diff --git a/packages/bridge-ui-v2/src/libs/error/index.ts b/packages/bridge-ui-v2/src/libs/error/index.ts
new file mode 100644
index 0000000000..f72bc43e28
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/error/index.ts
@@ -0,0 +1 @@
+export * from './errors';
diff --git a/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts b/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
index 8e0b088585..af8793c882 100644
--- a/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
+++ b/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
@@ -6,15 +6,13 @@ import { getAddress, isERC20, type Token } from '$libs/token';
 
 type RecommendProcessingFeeArgs = {
   token: Token;
-  destChainId?: number;
+  destChainId: number;
   srcChainId?: number;
 };
 
 const { ethGasLimit, erc20NotDeployedGasLimit, erc20DeployedGasLimit } = recommentProcessingFee;
 
 export async function recommendProcessingFee({ token, destChainId, srcChainId }: RecommendProcessingFeeArgs) {
-  if (!destChainId) return BigInt(0);
-
   const destPublicClient = getPublicClient({ chainId: destChainId });
   const gasPrice = await destPublicClient.getGasPrice();
 
@@ -23,9 +21,11 @@ export async function recommendProcessingFee({ token, destChainId, srcChainId }:
   let gasLimit = ethGasLimit;
 
   if (isERC20(token)) {
-    if (!srcChainId) return BigInt(0);
+    if (!srcChainId) {
+      throw Error('missing required source chain for ERC20 token');
+    }
 
-    const tokenAddress = await getAddress({ token, chainId: srcChainId, destChainId });
+    const tokenAddress = await getAddress({ token, srcChainId, destChainId });
 
     if (!tokenAddress || tokenAddress === zeroAddress) {
       // Gas limit for erc20 if not deployed on the destination chain
diff --git a/packages/bridge-ui-v2/src/libs/token/checkMintable.test.ts b/packages/bridge-ui-v2/src/libs/token/checkMintable.test.ts
index 503542c036..6802f6332e 100644
--- a/packages/bridge-ui-v2/src/libs/token/checkMintable.test.ts
+++ b/packages/bridge-ui-v2/src/libs/token/checkMintable.test.ts
@@ -9,10 +9,10 @@ import {
 
 import { freeMintErc20ABI } from '$abi';
 import { mainnetChain } from '$libs/chain';
+import { InsufficientBalanceError, TokenMintedError } from '$libs/error';
 
 import { checkMintable } from './checkMintable';
 import { testERC20Tokens } from './tokens';
-import { MintableError } from './types';
 
 vi.mock('$env/static/public');
 vi.mock('@wagmi/core');
@@ -56,8 +56,7 @@ describe('checkMintable', () => {
       await checkMintable(BLLToken, mainnetChain.id);
       expect.fail('should have thrown');
     } catch (error) {
-      const { cause } = error as Error;
-      expect(cause).toBe(MintableError.TOKEN_MINTED);
+      expect(error).toBeInstanceOf(TokenMintedError);
       expect(getContract).toHaveBeenCalledWith({
         walletClient: mockWalletClient,
         abi: freeMintErc20ABI,
@@ -85,8 +84,7 @@ describe('checkMintable', () => {
       await checkMintable(BLLToken, mainnetChain.id);
       expect.fail('should have thrown');
     } catch (error) {
-      const { cause } = error as Error;
-      expect(cause).toBe(MintableError.INSUFFICIENT_BALANCE);
+      expect(error).toBeInstanceOf(InsufficientBalanceError);
       expect(getPublicClient).toHaveBeenCalled();
       expect(mockTokenContract.estimateGas.mint).toHaveBeenCalledWith([mockWalletClient.account.address]);
       expect(mockPublicClient.getBalance).toHaveBeenCalledWith({ address: mockWalletClient.account.address });
diff --git a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts
index 2c91d47a4e..1906dd357a 100644
--- a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts
+++ b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts
@@ -1,9 +1,10 @@
 import { getContract, getPublicClient } from '@wagmi/core';
 
 import { freeMintErc20ABI } from '$abi';
-import { getConnectedWallet } from '$libs/util/getWallet';
+import { InsufficientBalanceError, TokenMintedError } from '$libs/error';
+import { getConnectedWallet } from '$libs/util/getConnectedWallet';
 
-import { MintableError, type Token } from './types';
+import type { Token } from './types';
 
 // Throws an error if:
 // 1. User has already minted this token
@@ -22,7 +23,7 @@ export async function checkMintable(token: Token, chainId: number) {
   const hasMinted = await tokenContract.read.minters([userAddress]);
 
   if (hasMinted) {
-    throw Error(`token already minted`, { cause: MintableError.TOKEN_MINTED });
+    throw new TokenMintedError();
   }
 
   // Check whether the user has enough balance to mint.
@@ -36,8 +37,6 @@ export async function checkMintable(token: Token, chainId: number) {
   const userBalance = await publicClient.getBalance({ address: userAddress });
 
   if (estimatedCost > userBalance) {
-    throw Error('user has insufficient balance', {
-      cause: MintableError.INSUFFICIENT_BALANCE,
-    });
+    throw new InsufficientBalanceError();
   }
 }
diff --git a/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts b/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts
index 4f7d8c55ee..6818da3c2f 100644
--- a/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts
@@ -1,5 +1,4 @@
 import { getContract, type GetContractResult } from '@wagmi/core';
-import { zeroAddress } from 'viem';
 
 import { tokenVaultABI } from '$abi';
 import { PUBLIC_L1_CHAIN_ID, PUBLIC_L2_CHAIN_ID } from '$env/static/public';
@@ -25,29 +24,29 @@ describe('getAddress', () => {
     vi.mocked(getContract).mockReturnValue(mockTokenContract);
   });
 
-  it('should return undefined if no source chain id is passed in', async () => {
-    expect(await getAddress({ token: ETHToken })).toBeUndefined();
-  });
-
-  it('should return the address if ETH', async () => {
-    expect(await getAddress({ token: ETHToken, chainId: Number(PUBLIC_L1_CHAIN_ID) })).toEqual(zeroAddress);
+  it('should return undefined if ETH', async () => {
+    expect(await getAddress({ token: ETHToken, srcChainId: Number(PUBLIC_L1_CHAIN_ID) })).toBeUndefined();
   });
 
   it('should return the address if ERC20 and has address on the source chain', async () => {
-    expect(await getAddress({ token: HORSEToken, chainId: Number(PUBLIC_L1_CHAIN_ID) })).toEqual(
+    expect(await getAddress({ token: HORSEToken, srcChainId: Number(PUBLIC_L1_CHAIN_ID) })).toEqual(
       HORSEToken.addresses[PUBLIC_L1_CHAIN_ID],
     );
   });
 
   it('should return undefined if ERC20 and has no address on the source chain and no destination chain is is passed in', async () => {
-    expect(await getAddress({ token: HORSEToken, chainId: Number(PUBLIC_L2_CHAIN_ID) })).toBeUndefined();
+    expect(await getAddress({ token: HORSEToken, srcChainId: Number(PUBLIC_L2_CHAIN_ID) })).toBeUndefined();
   });
 
   it('should return the address of deployed ERC20 token', async () => {
     vi.mocked(mockTokenContract.read.canonicalToBridged).mockResolvedValue('0x456789');
 
     expect(
-      await getAddress({ token: HORSEToken, chainId: Number(PUBLIC_L2_CHAIN_ID), destChainId: +PUBLIC_L1_CHAIN_ID }),
+      await getAddress({
+        token: HORSEToken,
+        srcChainId: Number(PUBLIC_L2_CHAIN_ID),
+        destChainId: Number(PUBLIC_L1_CHAIN_ID),
+      }),
     ).toEqual('0x456789');
     expect(mockTokenContract.read.canonicalToBridged).toHaveBeenCalledWith([
       BigInt(1),
@@ -56,6 +55,7 @@ describe('getAddress', () => {
     expect(getContract).toHaveBeenCalledWith({
       abi: tokenVaultABI,
       address: chainContractsMap[PUBLIC_L2_CHAIN_ID].tokenVaultAddress,
+      chainId: Number(PUBLIC_L2_CHAIN_ID),
     });
   });
 });
diff --git a/packages/bridge-ui-v2/src/libs/token/getAddress.ts b/packages/bridge-ui-v2/src/libs/token/getAddress.ts
index 2417d7184b..96765e45dc 100644
--- a/packages/bridge-ui-v2/src/libs/token/getAddress.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getAddress.ts
@@ -1,47 +1,39 @@
-import { getContract } from '@wagmi/core';
-import { zeroAddress } from 'viem';
+import { type Address, zeroAddress } from 'viem';
 
-import { tokenVaultABI } from '$abi';
-import { chainContractsMap } from '$libs/chain';
 import { getLogger } from '$libs/util/logger';
 
+import { getCrossChainAddress } from './getCrossChainAddress';
 import { isETH } from './tokens';
 import type { Token } from './types';
 
 type GetAddressArgs = {
   token: Token;
-  chainId?: number;
+  srcChainId: number;
   destChainId?: number;
 };
 
 const log = getLogger('token:getAddress');
 
-export async function getAddress({ token, chainId, destChainId }: GetAddressArgs) {
-  if (!chainId) return;
+export async function getAddress({ token, srcChainId, destChainId }: GetAddressArgs) {
+  if (isETH(token)) return; // ETH doesn't have an address
 
   // Get the address for the token on the source chain
-  let address = token.addresses[chainId];
+  let address: Maybe<Address> = token.addresses[srcChainId];
 
-  // If the token isn't ETH and has no address...
-  if (!isETH(token) && (!address || address === zeroAddress)) {
+  if (!address || address === zeroAddress) {
+    // We need destination chain to find the address, otherwise
+    // there is nothing we can do here.
     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[chainId].tokenVaultAddress,
+    // most likely on Taiko chain. We need to then query the
+    // canonicalToBridged mapping on the other chain
+    address = await getCrossChainAddress({
+      token,
+      srcChainId: destChainId,
+      destChainId: srcChainId,
     });
 
-    address = await srcTokenVaultContract.read.canonicalToBridged([BigInt(destChainId), destChainTokenAddress]);
-
     log(`Bridged address for ${token.symbol} is "${address}"`);
   }
 
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 7b9d00d2e7..12db6a1268 100644
--- a/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts
@@ -43,7 +43,11 @@ describe('getBalance', () => {
   it('should return the balance of ETH', async () => {
     vi.mocked(fetchBalance).mockResolvedValueOnce(mockBalanceForETH);
 
-    const balance = await getBalance({ token: ETHToken, userAddress: mockWalletClient.account.address });
+    const balance = await getBalance({
+      token: ETHToken,
+      userAddress: mockWalletClient.account.address,
+      srcChainId: Number(PUBLIC_L1_CHAIN_ID),
+    });
 
     expect(balance).toEqual(mockBalanceForETH);
     expect(getAddress).not.toHaveBeenCalled();
@@ -57,13 +61,13 @@ describe('getBalance', () => {
     const balance = await getBalance({
       token: BLLToken,
       userAddress: mockWalletClient.account.address,
-      chainId: Number(PUBLIC_L1_CHAIN_ID),
+      srcChainId: Number(PUBLIC_L1_CHAIN_ID),
     });
 
     expect(balance).toEqual(mockBalanceForBLL);
     expect(getAddress).toHaveBeenCalledWith({
       token: BLLToken,
-      chainId: Number(PUBLIC_L1_CHAIN_ID),
+      srcChainId: Number(PUBLIC_L1_CHAIN_ID),
       destChainId: undefined,
     });
     expect(fetchBalance).toHaveBeenCalledWith({
@@ -72,21 +76,30 @@ describe('getBalance', () => {
     });
   });
 
-  it('should return null if the token address is not found', async () => {
+  it('should return undefined if the token address is not found', async () => {
     vi.mocked(getAddress).mockResolvedValueOnce(zeroAddress);
 
     const balance = await getBalance({
       token: BLLToken,
       userAddress: mockWalletClient.account.address,
-      chainId: Number(PUBLIC_L1_CHAIN_ID),
+      srcChainId: Number(PUBLIC_L1_CHAIN_ID),
     });
 
-    expect(balance).toBeNull();
+    expect(balance).toBeUndefined();
     expect(getAddress).toHaveBeenCalledWith({
       token: BLLToken,
-      chainId: Number(PUBLIC_L1_CHAIN_ID),
+      srcChainId: Number(PUBLIC_L1_CHAIN_ID),
       destChainId: undefined,
     });
     expect(fetchBalance).not.toHaveBeenCalled();
   });
+
+  it('should return undefined if ERC20 and no source chain is passed in', async () => {
+    const balance = await getBalance({
+      token: BLLToken,
+      userAddress: mockWalletClient.account.address,
+    });
+
+    expect(balance).toBeUndefined();
+  });
 });
diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
index f4715362bd..33aad51707 100644
--- a/packages/bridge-ui-v2/src/libs/token/getBalance.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
@@ -8,25 +8,29 @@ import { isETH } from './tokens';
 import type { Token } from './types';
 
 type GetBalanceArgs = {
-  token: Token;
   userAddress: Address;
-  chainId?: number;
+  token?: Token;
+  srcChainId?: number;
   destChainId?: number;
 };
 
 const log = getLogger('token:getBalance');
 
-export async function getBalance({ token, userAddress, chainId, destChainId }: GetBalanceArgs) {
-  let tokenBalance: FetchBalanceResult | null = null;
+export async function getBalance({ userAddress, token, srcChainId, destChainId }: GetBalanceArgs) {
+  let tokenBalance: FetchBalanceResult;
 
-  if (isETH(token)) {
+  if (!token || isETH(token)) {
+    // If no token is passed in, we assume is ETH
     tokenBalance = await fetchBalance({ address: userAddress });
   } else {
+    // We need at least the source chain to find the address
+    if (!srcChainId) return;
+
     // 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, chainId, destChainId });
+    const tokenAddress = await getAddress({ token, srcChainId, destChainId });
 
-    if (!tokenAddress || tokenAddress === zeroAddress) return null;
+    if (!tokenAddress || tokenAddress === zeroAddress) return;
 
     // Wagmi is such an amazing library. We had to do this
     // more manually before.
diff --git a/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.test.ts b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.test.ts
new file mode 100644
index 0000000000..254c759780
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.test.ts
@@ -0,0 +1,5 @@
+describe('getCrossChainAddress', () => {
+  it('TODO', () => {
+    expect(true).toBeTruthy();
+  });
+});
diff --git a/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
new file mode 100644
index 0000000000..7b30e2c2a2
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
@@ -0,0 +1,33 @@
+import { getContract } from '@wagmi/core';
+
+import { tokenVaultABI } from '$abi';
+import { chainContractsMap } from '$libs/chain';
+
+import { isETH } from './tokens';
+import type { Token } from './types';
+
+type GetCrossChainAddressArgs = {
+  token: Token;
+  srcChainId: number;
+  destChainId: number;
+};
+
+export function getCrossChainAddress({ token, srcChainId, destChainId }: GetCrossChainAddressArgs) {
+  if (isETH(token)) return; // ETH doesn't have an address
+
+  const { tokenVaultAddress } = chainContractsMap[destChainId];
+
+  const srcChainTokenAddress = token.addresses[srcChainId];
+
+  // We cannot find the address if we don't have
+  // the token address on the source chain
+  if (!srcChainTokenAddress) return;
+
+  const destTokenVaultContract = getContract({
+    abi: tokenVaultABI,
+    chainId: destChainId,
+    address: tokenVaultAddress,
+  });
+
+  return destTokenVaultContract.read.canonicalToBridged([BigInt(srcChainId), srcChainTokenAddress]);
+}
diff --git a/packages/bridge-ui-v2/src/libs/token/index.ts b/packages/bridge-ui-v2/src/libs/token/index.ts
index 92e250f077..e13186d034 100644
--- a/packages/bridge-ui-v2/src/libs/token/index.ts
+++ b/packages/bridge-ui-v2/src/libs/token/index.ts
@@ -1,6 +1,7 @@
 export { checkMintable } from './checkMintable';
 export { getAddress } from './getAddress';
 export { getBalance } from './getBalance';
+export { isDeployedCrossChain } from './isDeployedCrossChain';
 export { mint } from './mint';
 export * from './tokens';
 export * from './types';
diff --git a/packages/bridge-ui-v2/src/libs/token/isDeployedCrossChain.ts b/packages/bridge-ui-v2/src/libs/token/isDeployedCrossChain.ts
new file mode 100644
index 0000000000..8edf6a6d96
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/isDeployedCrossChain.ts
@@ -0,0 +1,24 @@
+import { zeroAddress } from 'viem';
+
+import type { Token } from '$libs/token';
+
+import { getCrossChainAddress } from './getCrossChainAddress';
+
+type IsDeployedCrossChainArgs = {
+  token: Token;
+  srcChainId: number;
+  destChainId: number;
+};
+
+export async function isDeployedCrossChain({ token, srcChainId, destChainId }: IsDeployedCrossChainArgs) {
+  const destTokenAddressOnDestChain = token.addresses[destChainId];
+
+  if (!destTokenAddressOnDestChain || destTokenAddressOnDestChain === zeroAddress) {
+    // Check if token is already deployed as BridgedERC20 on destination chain
+    const bridgedTokenAddress = await getCrossChainAddress({ token, srcChainId, destChainId });
+
+    return bridgedTokenAddress && bridgedTokenAddress !== zeroAddress;
+  }
+
+  return true;
+}
diff --git a/packages/bridge-ui-v2/src/libs/token/mint.test.ts b/packages/bridge-ui-v2/src/libs/token/mint.test.ts
index 2be21d8334..e1bf2db5ca 100644
--- a/packages/bridge-ui-v2/src/libs/token/mint.test.ts
+++ b/packages/bridge-ui-v2/src/libs/token/mint.test.ts
@@ -13,7 +13,6 @@ const BLLToken = testERC20Tokens[0];
 
 const mockWalletClient = {
   account: { address: '0x123' },
-  chain: { id: PUBLIC_L1_CHAIN_ID },
 } as unknown as WalletClient;
 
 const mockTokenContract = {
@@ -28,7 +27,12 @@ describe('mint', () => {
     vi.mocked(getContract).mockReturnValue(mockTokenContract);
     vi.mocked(mockTokenContract.write.mint).mockResolvedValue('0x123456');
 
-    await expect(mint(BLLToken)).resolves.toEqual('0x123456');
+    await expect(mint(BLLToken, Number(PUBLIC_L1_CHAIN_ID))).resolves.toEqual('0x123456');
     expect(mockTokenContract.write.mint).toHaveBeenCalledWith([mockWalletClient.account.address]);
+    expect(getContract).toHaveBeenCalledWith({
+      walletClient: mockWalletClient,
+      abi: expect.anything(),
+      address: BLLToken.addresses[PUBLIC_L1_CHAIN_ID],
+    });
   });
 });
diff --git a/packages/bridge-ui-v2/src/libs/token/mint.ts b/packages/bridge-ui-v2/src/libs/token/mint.ts
index c958558371..c09c949a6e 100644
--- a/packages/bridge-ui-v2/src/libs/token/mint.ts
+++ b/packages/bridge-ui-v2/src/libs/token/mint.ts
@@ -1,19 +1,18 @@
 import { getContract } from '@wagmi/core';
 
 import { freeMintErc20ABI } from '$abi';
-import { getConnectedWallet } from '$libs/util/getWallet';
+import { getConnectedWallet } from '$libs/util/getConnectedWallet';
 
 import { getLogger } from '../util/logger';
 import type { Token } from './types';
 
 const log = getLogger('token:mint');
 
-export async function mint(token: Token) {
-  const walletClient = await getConnectedWallet();
+export async function mint(token: Token, chainId: number) {
+  const walletClient = await getConnectedWallet(chainId);
 
-  const tokenSymbol = token.symbol;
   const userAddress = walletClient.account.address;
-  const chainId = walletClient.chain.id;
+  const tokenSymbol = token.symbol;
 
   const tokenContract = getContract({
     walletClient,
diff --git a/packages/bridge-ui-v2/src/libs/token/types.ts b/packages/bridge-ui-v2/src/libs/token/types.ts
index 230e5814d1..e68098c660 100644
--- a/packages/bridge-ui-v2/src/libs/token/types.ts
+++ b/packages/bridge-ui-v2/src/libs/token/types.ts
@@ -12,8 +12,3 @@ export type TokenEnv = {
   address: Address;
   symbol: string;
 };
-
-export enum MintableError {
-  TOKEN_MINTED = 'TOKEN_MINTED',
-  INSUFFICIENT_BALANCE = 'INSUFFICIENT_BALANCE',
-}
diff --git a/packages/bridge-ui-v2/src/libs/util/getConnectedWallet.test.ts b/packages/bridge-ui-v2/src/libs/util/getConnectedWallet.test.ts
new file mode 100644
index 0000000000..f42cda0f29
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/getConnectedWallet.test.ts
@@ -0,0 +1,5 @@
+describe('getConnectedWallet', () => {
+  it('TODO', () => {
+    expect(true).toBeTruthy();
+  });
+});
diff --git a/packages/bridge-ui-v2/src/libs/util/getWallet.ts b/packages/bridge-ui-v2/src/libs/util/getConnectedWallet.ts
similarity index 54%
rename from packages/bridge-ui-v2/src/libs/util/getWallet.ts
rename to packages/bridge-ui-v2/src/libs/util/getConnectedWallet.ts
index d609ef6234..136a6b7cc1 100644
--- a/packages/bridge-ui-v2/src/libs/util/getWallet.ts
+++ b/packages/bridge-ui-v2/src/libs/util/getConnectedWallet.ts
@@ -1,7 +1,7 @@
 import { getWalletClient } from '@wagmi/core';
 
-export async function getConnectedWallet() {
-  const walletClient = await getWalletClient();
+export async function getConnectedWallet(chainId?: number) {
+  const walletClient = await getWalletClient({ chainId });
 
   if (!walletClient) {
     throw Error('wallet is not connected');
diff --git a/packages/bridge-ui-v2/src/libs/util/truncateDecimal.test.ts b/packages/bridge-ui-v2/src/libs/util/truncateDecimal.test.ts
new file mode 100644
index 0000000000..4b5bcf09f0
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/truncateDecimal.test.ts
@@ -0,0 +1,9 @@
+import { truncateDecimal } from './truncateDecimal';
+
+describe('truncateDecimal', () => {
+  it('should truncate decimals', () => {
+    expect(truncateDecimal(1.23456789, 2)).toEqual(1.23);
+    expect(truncateDecimal(12.3456789, 3)).toEqual(12.345);
+    expect(truncateDecimal(123.456789, 4)).toEqual(123.4567);
+  });
+});
diff --git a/packages/bridge-ui-v2/src/libs/util/truncateString.test.ts b/packages/bridge-ui-v2/src/libs/util/truncateString.test.ts
new file mode 100644
index 0000000000..2f8bf9db5c
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/truncateString.test.ts
@@ -0,0 +1,9 @@
+import { truncateString } from './truncateString';
+
+describe('truncateString', () => {
+  it('should truncate strings', () => {
+    expect(truncateString('123456789', 3)).toEqual('123…');
+    expect(truncateString('123456789', 5)).toEqual('12345…');
+    expect(truncateString('123456789', 6, '...')).toEqual('123456...');
+  });
+});