diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts
index 5584560c844..0c49606a95c 100644
--- a/packages/bridge-ui-v2/src/app.config.ts
+++ b/packages/bridge-ui-v2/src/app.config.ts
@@ -8,3 +8,8 @@ export const processingFeeComponent = {
   closingDelayOptionClick: 300,
   intervalComputeRecommendedFee: 20000,
 };
+
+export const bridge = {
+  noOwnerGasLimit: BigInt(140000),
+  noTokenDeployedGasLimit: BigInt(3000000),
+};
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount/Amount.svelte
new file mode 100644
index 00000000000..9775ac28559
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount/Amount.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+  import type { FetchBalanceResult } from '@wagmi/core';
+  import { t } from 'svelte-i18n';
+  import { formatUnits, parseUnits } from 'viem';
+
+  import Icon from '$components/Icon/Icon.svelte';
+  import { InputBox } from '$components/InputBox';
+  import { warningToast } from '$components/NotificationToast';
+  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';
+  import { network } from '$stores/network';
+
+  import { destNetwork, enteredAmount, processingFee, selectedToken } from '../state';
+  import Balance from './Balance.svelte';
+
+  let inputId = `input-${uid()}`;
+  let tokenBalance: FetchBalanceResult;
+  let inputBox: InputBox;
+
+  let computingMaxAmount = false;
+
+  // 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) // no need to check if the amount is 0
+    )
+      return;
+
+    try {
+      await checkBalanceToBridge({
+        to: $account.address,
+        token: $selectedToken,
+        amount: $enteredAmount,
+        balance: tokenBalance.value,
+        srcChainId: $network.id,
+        destChainId: $destNetwork.id,
+        processingFee: $processingFee,
+      });
+    } catch (err) {
+      console.error(err);
+
+      switch (true) {
+        case err instanceof InsufficientBalanceError:
+          insufficientBalance = true;
+          break;
+        case err instanceof InsufficientAllowanceError:
+          insufficientAllowance = true;
+          break;
+      }
+    }
+  }
+
+  // We want to debounce this function for input events
+  const debouncedCheckEnteredAmount = debounce(checkEnteredAmount, 300);
+
+  // Will trigger on input events. We update the entered amount
+  // and check it's validity
+  function updateAmount(event: Event) {
+    insufficientBalance = false;
+    insufficientAllowance = false;
+
+    if (!$selectedToken) return;
+
+    const target = event.target as HTMLInputElement;
+
+    try {
+      $enteredAmount = parseUnits(target.value, $selectedToken.decimals);
+
+      debouncedCheckEnteredAmount();
+    } catch (err) {
+      $enteredAmount = BigInt(0);
+    }
+  }
+
+  // "MAX" button handler
+  async function useMaxAmount() {
+    insufficientBalance = false;
+    insufficientAllowance = false;
+
+    // We cannot calculate the max amount without these guys
+    if (!$selectedToken || !$network || !$destNetwork || !$account?.address) return;
+
+    computingMaxAmount = true;
+
+    try {
+      const maxAmount = await getMaxAmountToBridge({
+        to: $account.address,
+        token: $selectedToken,
+        balance: tokenBalance.value,
+        processingFee: $processingFee,
+        srcChainId: $network.id,
+        destChainId: $destNetwork.id,
+        amount: BigInt(1), // whatever amount to estimate the cost
+      });
+
+      // 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'));
+    } finally {
+      computingMaxAmount = false;
+    }
+  }
+
+  // Let's also trigger the check when either the processingFee or
+  // the selectedToken change and debounce it, just in case
+  // TODO: better way? maybe store.subscribe(), or different component
+  $: $processingFee && $selectedToken && debouncedCheckEnteredAmount();
+</script>
+
+<div class="AmountInput f-col space-y-2">
+  <div class="f-between-center text-secondary-content">
+    <label class="body-regular" for={inputId}>{$t('amount_input.label')}</label>
+    <Balance bind:value={tokenBalance} />
+  </div>
+
+  <div class="relative f-items-center">
+    <InputBox
+      id={inputId}
+      type="number"
+      placeholder="0.01"
+      min="0"
+      loading={computingMaxAmount}
+      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 hover:font-bold"
+      disabled={!$selectedToken || !$network || computingMaxAmount}
+      on:click={useMaxAmount}>
+      {$t('amount_input.button.max')}
+    </button>
+  </div>
+
+  {#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" />
+      <div class="body-small-regular text-negative-sentiment">
+        {$t('amount_input.error.insufficient_balance')}
+      </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 84%
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 18000188fa6..ca4c24ccce4 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount/Balance.svelte
@@ -10,25 +10,26 @@
 
   import { destNetwork, selectedToken } from '../state';
 
-  let tokenBalance: Maybe<FetchBalanceResult>;
+  export let value: Maybe<FetchBalanceResult>;
+
   let computingTokenBalance = false;
   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;
 
     try {
-      tokenBalance = await getTokenBalance({
+      value = await getTokenBalance({
         token,
+        srcChainId,
         destChainId,
         userAddress: account.address,
-        chainId: srcChainId,
       });
-    } catch (error) {
-      console.error(error);
+    } catch (err) {
+      console.error(err);
       errorComputingTokenBalance = true;
     } finally {
       computingTokenBalance = false;
@@ -50,7 +51,7 @@
       <LoadingText mask="0.0000" />
       <LoadingText mask="XXX" />
     {:else}
-      {renderTokenBalance(tokenBalance)}
+      {renderTokenBalance(value)}
     {/if}
   </span>
 </div>
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 00000000000..e8c536613eb
--- /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/AmountInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/AmountInput.svelte
deleted file mode 100644
index d2cd50a02cc..00000000000
--- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/AmountInput.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { t } from 'svelte-i18n';
-
-  import { InputBox } from '$components/InputBox';
-  import { uid } from '$libs/util/uid';
-
-  import Balance from './Balance.svelte';
-
-  let inputId = `input-${uid()}`;
-</script>
-
-<div class="AmountInput f-col space-y-2">
-  <div class="f-between-center text-secondary-content">
-    <label class="body-regular" for={inputId}>{$t('amount_input.label')}</label>
-    <Balance />
-  </div>
-  <div class="relative f-items-center">
-    <InputBox
-      id={inputId}
-      type="number"
-      placeholder="0.01"
-      min="0"
-      class="w-full input-box outline-none py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content" />
-    <button class="absolute right-6 uppercase">{$t('amount_input.button.max')}</button>
-  </div>
-</div>
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 ff5cf90c7ce..00000000000
--- 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 770e2c091a4..86a1baa5d1a 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 fb5dbd614f8..d9034180e4a 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Address } from 'abitype';
+  import type { Address } from 'viem';
 
   import { recommendProcessingFee } from '$libs/fee';
   import { getBalance, type Token } from '$libs/token';
@@ -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 18b8fcb0994..b75865e4144 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;
@@ -29,7 +31,7 @@
   let errorCalculatingEnoughEth = false;
 
   let modalOpen = false;
-  let customInput: InputBox;
+  let inputBox: InputBox;
 
   function closeModal() {
     // Let's check if we are closing with CUSTOM method selected and zero amount entered
@@ -42,20 +44,30 @@
   }
 
   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);
   }
 
-  function focusCustomInput() {
-    customInput?.focus();
+  function focusInputBox() {
+    inputBox.focus();
   }
 
-  function onCustomInputChange(event: Event) {
+  function onInputBoxChange(event: Event) {
     if (selectedFeeMethod !== ProcessingFeeMethod.CUSTOM) return;
 
     const input = event.target as HTMLInputElement;
@@ -66,20 +78,20 @@
     switch (method) {
       case ProcessingFeeMethod.RECOMMENDED:
         $processingFee = recommendedAmount;
-        customInput?.clear();
+        inputBox?.clear();
 
         break;
       case ProcessingFeeMethod.CUSTOM:
         // Get a previous value entered if exists, otherwise default to 0
-        $processingFee = parseToWei(customInput?.value());
+        $processingFee = parseToWei(inputBox?.getValue());
 
         // We need to wait for Svelte to set the attribute `disabled` on the input
         // to false to be able to focus it
-        tick().then(focusCustomInput);
+        tick().then(focusInputBox);
         break;
       case ProcessingFeeMethod.NONE:
         $processingFee = BigInt(0);
-        customInput?.clear();
+        inputBox?.clear();
 
         break;
     }
@@ -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,17 +219,29 @@
         </li>
       </ul>
 
-      <div class="relative f-items-center">
+      <div class="relative f-items-center my-[20px]">
         <InputBox
           type="number"
           min="0"
           placeholder="0.01"
           disabled={selectedFeeMethod !== ProcessingFeeMethod.CUSTOM}
           class="w-full input-box outline-none p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
-          on:input={onCustomInputChange}
-          bind:this={customInput} />
+          on:input={onInputBoxChange}
+          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 4e63211415a..cef262625ec 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 00000000000..fc42fed1b79
--- /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 24b36c2b3a5..00000000000
--- 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 3197b75995b..18af65694e9 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/Bridge/state.ts b/packages/bridge-ui-v2/src/components/Bridge/state.ts
index 834e1045738..63435098002 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/state.ts
+++ b/packages/bridge-ui-v2/src/components/Bridge/state.ts
@@ -12,6 +12,7 @@ import type { Token } from '$libs/token';
 // but once again, we don't need such level of security that we have to
 // prevent other components outside the Bridge from accessing this store.
 
-export const selectedToken = writable<Maybe<Token>>();
-export const destNetwork = writable<Maybe<Chain>>();
-export const processingFee = writable<bigint>();
+export const selectedToken = writable<Maybe<Token>>(null);
+export const enteredAmount = writable<bigint>(BigInt(0));
+export const destNetwork = writable<Maybe<Chain>>(null);
+export const processingFee = writable<bigint>(BigInt(0));
diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte
index 0bcab9c66ff..b93c011bb4e 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/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
index a95f2fcb20f..ae34f6184bd 100644
--- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
+++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -56,10 +56,10 @@
       try {
         await switchNetwork({ chainId: chain.id });
         closeModal();
-      } catch (error) {
-        console.error(error);
+      } catch (err) {
+        console.error(err);
 
-        if (error instanceof UserRejectedRequestError) {
+        if (err instanceof UserRejectedRequestError) {
           warningToast($t('messages.network.rejected'));
         }
       } finally {
diff --git a/packages/bridge-ui-v2/src/components/ClickMask/ClickMask.svelte b/packages/bridge-ui-v2/src/components/ClickMask/ClickMask.svelte
new file mode 100644
index 00000000000..1ca5de0b2b9
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/ClickMask/ClickMask.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { noop, onDestroy } from 'svelte/internal';
+
+  export let active = false;
+  export let fn = noop;
+
+  let mask: HTMLDivElement;
+
+  onMount(() => {
+    mask?.addEventListener('click', fn);
+  });
+
+  onDestroy(() => {
+    mask?.removeEventListener('click', fn);
+  });
+
+  $: displayClass = active ? 'block' : 'hidden';
+</script>
+
+<div class="{displayClass} fixed top-0 right-0 bottom-0 left-0" bind:this={mask} />
diff --git a/packages/bridge-ui-v2/src/components/ClickMask/index.ts b/packages/bridge-ui-v2/src/components/ClickMask/index.ts
new file mode 100644
index 00000000000..cee59e6af90
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/ClickMask/index.ts
@@ -0,0 +1 @@
+export { default as ClickMask } from './ClickMask.svelte';
diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
index c1348c80eb3..95216792d9d 100644
--- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
+++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type Chain, getWalletClient, switchNetwork } from '@wagmi/core';
+  import { type Chain, switchNetwork } from '@wagmi/core';
   import { t } from 'svelte-i18n';
   import { UserRejectedRequestError } from 'viem';
 
@@ -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';
@@ -30,11 +31,11 @@
     switchingNetwork = true;
 
     try {
-      await switchNetwork({ chainId: +PUBLIC_L1_CHAIN_ID });
-    } catch (error) {
-      console.error(error);
+      await switchNetwork({ chainId: Number(PUBLIC_L1_CHAIN_ID) });
+    } catch (err) {
+      console.error(err);
 
-      if (error instanceof UserRejectedRequestError) {
+      if (err instanceof UserRejectedRequestError) {
         warningToast($t('messages.network.rejected'));
       }
     } finally {
@@ -46,18 +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;
 
-    // ... and of course, our wallet must be connected
-    const walletClient = await getWalletClient({ chainId: $network.id });
-    if (!walletClient) return;
-
     // Let's begin the minting process
     minting = true;
 
     try {
-      const txHash = await mint(selectedToken, walletClient);
+      const txHash = await mint(selectedToken, $network.id);
 
       successToast(
         $t('faucet.minting_tx', {
@@ -70,10 +67,13 @@
       );
 
       // TODO: pending transaction logic
-    } catch (error) {
-      console.error(error);
+    } 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;
     }
@@ -98,21 +98,16 @@
     reasonNotMintable = '';
 
     try {
-      await checkMintable(token, network);
+      await checkMintable(token, network.id);
       mintButtonEnabled = true;
-    } catch (error) {
-      console.error(error);
-
-      const { cause } = error as Error;
+    } catch (err) {
+      console.error(err);
 
-      switch (cause) {
-        case MintableError.NOT_CONNECTED:
-          reasonNotMintable = $t('faucet.warning.no_connected');
-          break;
-        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:
@@ -140,7 +135,7 @@
 <Card class="md:w-[524px]" title={$t('faucet.title')} text={$t('faucet.subtitle')}>
   <div class="space-y-[35px]">
     <div class="space-y-2">
-      <ChainSelector label={$t('chain_selector.currently_on')} value={$network} />
+      <ChainSelector label={$t('chain_selector.currently_on')} value={$network} switchWallet />
       <TokenDropdown tokens={testERC20Tokens} bind:value={selectedToken} />
     </div>
 
@@ -152,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}
@@ -165,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/InputBox/InputBox.svelte b/packages/bridge-ui-v2/src/components/InputBox/InputBox.svelte
index 3ecbb46e85f..757aaa698bd 100644
--- a/packages/bridge-ui-v2/src/components/InputBox/InputBox.svelte
+++ b/packages/bridge-ui-v2/src/components/InputBox/InputBox.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
   import { classNames } from '$libs/util/classNames';
 
-  let input: HTMLInputElement;
+  export let loading = false;
+  export let error = false;
 
-  export let classes = classNames('w-full input-box placeholder:text-tertiary-content', $$props.class);
+  let input: HTMLInputElement;
+  let classes = classNames('w-full input-box placeholder:text-tertiary-content', $$props.class);
 
-  export const clear = () => (input.value = '');
+  // Public API
+  export const getValue = () => input.value;
+  export const setValue = (value: string) => (input.value = value);
+  export const clear = () => setValue('');
   export const focus = () => input.focus();
-  export const value = () => input.value;
 </script>
 
-<input class={classes} {...$$restProps} on:input bind:this={input} />
+<input class={classes} class:error disabled={loading} {...$$restProps} bind:this={input} on:input on:blur />
diff --git a/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte b/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte
index 3b2659a8efa..582f88f9559 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/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
index 7548ff10e51..26252954d18 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { noop } from 'svelte/internal';
 
+  import { ClickMask } from '$components/ClickMask';
   import type { Token } from '$libs/token';
   import { classNames } from '$libs/util/classNames';
 
@@ -11,6 +12,7 @@
   export let tokens: Token[] = [];
   export let value: Maybe<Token> = null;
   export let selectToken: (token: Token) => void = noop;
+  export let closeMenu: () => void = noop;
 
   $: menuClasses = classNames(
     'menu absolute right-0 w-[265px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10',
@@ -44,3 +46,5 @@
     </li>
   {/each}
 </ul>
+
+<ClickMask fn={closeMenu} active={menuOpen} />
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
index b0fa14f4777..8b10916ed12 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
@@ -66,7 +66,7 @@
   </button>
 
   {#if isDesktopOrLarger}
-    <DropdownView {id} {menuOpen} {tokens} {value} {selectToken} />
+    <DropdownView {id} {menuOpen} {tokens} {value} {selectToken} {closeMenu} />
   {:else}
     <DialogView {id} {menuOpen} {tokens} {value} {selectToken} {closeMenu} />
   {/if}
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index cc9e3ca9999..af62f785c4b 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"
     }
   },
 
@@ -84,7 +88,14 @@
   "amount_input": {
     "label": "Amount",
     "balance": "Balance",
-    "button.max": "Max"
+    "button": {
+      "max": "Max",
+      "failed_max": "Coult not estimate max amount to bridge."
+    },
+    "error": {
+      "insufficient_balance": "Insufficient balance",
+      "insufficient_allowance": "Insufficient allowance"
+    }
   },
 
   "chain_selector": {
@@ -101,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/ERC1155Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts
new file mode 100644
index 00000000000..ddad81ecab1
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts
@@ -0,0 +1,7 @@
+import type { Bridge } from './types';
+
+export class ERC1155Bridge implements Bridge {
+  async estimateGas(): Promise<bigint> {
+    return Promise.resolve(BigInt(0));
+  }
+}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
new file mode 100644
index 00000000000..df3a68c595c
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
@@ -0,0 +1,67 @@
+import { getContract } from '@wagmi/core';
+
+import { tokenVaultABI } from '$abi';
+import { bridge } from '$config';
+import { getConnectedWallet } from '$libs/util/getConnectedWallet';
+import { getLogger } from '$libs/util/logger';
+
+import type { Bridge, ERC20BridgeArgs, SendERC20Args } from './types';
+
+const log = getLogger('ERC20Bridge');
+
+export class ERC20Bridge implements Bridge {
+  private static async _prepareTransaction(args: ERC20BridgeArgs) {
+    const walletClient = await getConnectedWallet();
+
+    const {
+      to,
+      memo = '',
+      amount,
+      destChainId,
+      tokenAddress,
+      processingFee,
+      tokenVaultAddress,
+      isTokenAlreadyDeployed,
+    } = args;
+
+    const tokenVaultContract = getContract({
+      walletClient,
+      abi: tokenVaultABI,
+      address: tokenVaultAddress,
+    });
+
+    const refundAddress = walletClient.account.address;
+
+    const gasLimit = !isTokenAlreadyDeployed
+      ? BigInt(bridge.noTokenDeployedGasLimit)
+      : processingFee > 0
+      ? bridge.noOwnerGasLimit
+      : BigInt(0);
+
+    const sendERC20Args: SendERC20Args = [
+      BigInt(destChainId),
+      to,
+      tokenAddress,
+      amount,
+      gasLimit,
+      processingFee,
+      refundAddress,
+      memo,
+    ];
+
+    log('Preparing transaction with args', sendERC20Args);
+
+    return { tokenVaultContract, sendERC20Args };
+  }
+
+  async estimateGas(args: ERC20BridgeArgs) {
+    const { tokenVaultContract, sendERC20Args } = await ERC20Bridge._prepareTransaction(args);
+    const [, , , , , processingFee] = sendERC20Args;
+
+    const value = processingFee;
+
+    log('Estimating gas for sendERC20 call. Sending value', value);
+
+    return tokenVaultContract.estimateGas.sendERC20([...sendERC20Args], { value });
+  }
+}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts
new file mode 100644
index 00000000000..a9d03418e55
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts
@@ -0,0 +1,7 @@
+import type { Bridge } from './types';
+
+export class ERC721Bridge implements Bridge {
+  async estimateGas(): Promise<bigint> {
+    return Promise.resolve(BigInt(0));
+  }
+}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts
new file mode 100644
index 00000000000..928857a1a6b
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts
@@ -0,0 +1,69 @@
+import { getContract } from '@wagmi/core';
+
+import { bridgeABI } from '$abi';
+import { bridge } from '$config';
+import { getConnectedWallet } from '$libs/util/getConnectedWallet';
+import { getLogger } from '$libs/util/logger';
+
+import type { Bridge, ETHBridgeArgs, Message } from './types';
+
+const log = getLogger('ETHBridge');
+
+export class ETHBridge implements Bridge {
+  private static async _prepareTransaction(args: ETHBridgeArgs) {
+    const walletClient = await getConnectedWallet();
+
+    const { to, memo = '', amount, srcChainId, destChainId, bridgeAddress, processingFee } = args;
+
+    const bridgeContract = getContract({
+      walletClient,
+      abi: bridgeABI,
+      address: bridgeAddress,
+    });
+
+    const owner = walletClient.account.address;
+
+    // TODO: contract actually supports bridging to ourselves as well as
+    //       to another address at the same time
+    const [depositValue, callValue] =
+      to.toLowerCase() === owner.toLowerCase() ? [amount, BigInt(0)] : [BigInt(0), amount];
+
+    // If there is a processing fee, use the specified message gas limit
+    // as might not be called by the owner
+    const gasLimit = processingFee > 0 ? bridge.noOwnerGasLimit : BigInt(0);
+
+    const message: Message = {
+      to,
+      owner,
+      sender: owner,
+      refundAddress: owner,
+
+      srcChainId: BigInt(srcChainId),
+      destChainId: BigInt(destChainId),
+
+      gasLimit,
+      callValue,
+      depositValue,
+      processingFee,
+
+      memo,
+      data: '0x',
+      id: BigInt(0), // will be set in contract
+    };
+
+    log('Preparing transaction with message', message);
+
+    return { bridgeContract, message };
+  }
+
+  async estimateGas(args: ETHBridgeArgs) {
+    const { bridgeContract, message } = await ETHBridge._prepareTransaction(args);
+    const { depositValue, callValue, processingFee } = message;
+
+    const value = depositValue + callValue + processingFee;
+
+    log('Estimating gas for sendMessage call. Sending value', value);
+
+    return bridgeContract.estimateGas.sendMessage([message], { value });
+  }
+}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/bridges.ts b/packages/bridge-ui-v2/src/libs/bridge/bridges.ts
new file mode 100644
index 00000000000..8eefde0a6dd
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/bridges.ts
@@ -0,0 +1,12 @@
+import { ERC20Bridge } from './ERC20Bridge';
+import { ERC721Bridge } from './ERC721Bridge';
+import { ERC1155Bridge } from './ERC1155Bridge';
+import { ETHBridge } from './ETHBridge';
+import type { Bridge, BridgeType } from './types';
+
+export const bridges: Record<BridgeType, Bridge> = {
+  ETH: new ETHBridge(),
+  ERC20: new ERC20Bridge(),
+  ERC721: new ERC721Bridge(),
+  ERC1155: new ERC1155Bridge(),
+};
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 00000000000..44be8a43c2b
--- /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/estimateCostOfBridging.ts b/packages/bridge-ui-v2/src/libs/bridge/estimateCostOfBridging.ts
new file mode 100644
index 00000000000..adcb8c81d74
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/estimateCostOfBridging.ts
@@ -0,0 +1,12 @@
+import { getPublicClient } from '@wagmi/core';
+
+import type { Bridge, BridgeArgs } from './types';
+
+export async function estimateCostOfBridging(bridge: Bridge, bridgeArgs: BridgeArgs) {
+  const publicClient = getPublicClient();
+
+  // Calculate the estimated cost of bridging
+  const estimatedGas = await bridge.estimateGas(bridgeArgs);
+  const gasPrice = await publicClient.getGasPrice();
+  return estimatedGas * gasPrice;
+}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/getMaxAmountToBridge.ts b/packages/bridge-ui-v2/src/libs/bridge/getMaxAmountToBridge.ts
new file mode 100644
index 00000000000..7b7e98d7806
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/getMaxAmountToBridge.ts
@@ -0,0 +1,61 @@
+import type { Address } from 'viem';
+
+import { chainContractsMap } from '$libs/chain';
+import { isETH, type Token } from '$libs/token';
+import { getLogger } from '$libs/util/logger';
+
+import { bridges } from './bridges';
+import { estimateCostOfBridging } from './estimateCostOfBridging';
+import type { ETHBridgeArgs } from './types';
+
+type GetMaxToBridgeArgs = {
+  to: Address;
+  token: Token;
+  balance: bigint;
+  amount?: bigint;
+  srcChainId?: number;
+  destChainId?: number;
+  processingFee?: bigint;
+};
+
+const log = getLogger('bridge:getMaxAmountToBridge');
+
+export async function getMaxAmountToBridge({
+  to,
+  token,
+  amount,
+  balance,
+  srcChainId,
+  destChainId,
+  processingFee,
+}: GetMaxToBridgeArgs) {
+  // For ERC20 tokens, we can bridge the whole balance
+  let maxAmount = balance;
+
+  if (isETH(token)) {
+    // 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,
+    } as ETHBridgeArgs;
+
+    const estimatedCost = await estimateCostOfBridging(bridges.ETH, bridgeArgs);
+
+    log('Estimated cost of bridging', estimatedCost, 'with argument', bridgeArgs);
+
+    // We also need to take into account the processing fee if any
+    maxAmount = balance - estimatedCost - (processingFee ?? BigInt(0));
+  }
+
+  return maxAmount;
+}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/index.ts b/packages/bridge-ui-v2/src/libs/bridge/index.ts
new file mode 100644
index 00000000000..284f0b0ba2f
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/index.ts
@@ -0,0 +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/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts
new file mode 100644
index 00000000000..7dd0f52172c
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts
@@ -0,0 +1,97 @@
+import type { Address, Hex } from 'viem';
+
+export enum BridgeType {
+  ETH = 'ETH',
+
+  // https://ethereum.org/en/developers/docs/standards/tokens/erc-20/
+  ERC20 = 'ERC20',
+
+  // https://ethereum.org/en/developers/docs/standards/tokens/erc-721/
+  ERC721 = 'ERC721',
+
+  // https://ethereum.org/en/developers/docs/standards/tokens/erc-1155/
+  ERC1155 = 'ERC1155',
+}
+
+// Bridge sendMessage(message: Message)
+export type Message = {
+  // Message ID. Will be set in contract
+  id: bigint;
+  // Message sender address (auto filled)
+  sender: Address;
+  // Source chain ID (auto filled)
+  srcChainId: bigint;
+  // Destination chain ID where the `to` address lives (auto filled)
+  destChainId: bigint;
+  // Owner address of the bridged asset.
+  owner: Address;
+  // Destination owner address
+  to: Address;
+  // Alternate address to send any refund. If blank, defaults to owner.
+  refundAddress: Address;
+  // Deposited Ether minus the processingFee.
+  depositValue: bigint;
+  // callValue to invoke on the destination chain, for ERC20 transfers.
+  callValue: bigint;
+  // Processing fee for the relayer. Zero if owner will process themself.
+  processingFee: bigint;
+  // gasLimit to invoke on the destination chain, for ERC20 transfers.
+  gasLimit: bigint;
+  // callData to invoke on the destination chain, for ERC20 transfers.
+  data: Hex;
+  // Optional memo.
+  memo: string;
+};
+
+// TokenVault sendERC20(...args)
+export type SendERC20Args = [
+  bigint, // destChainId
+  Address, // to
+  Address, // token
+  bigint, // amount
+  bigint, // gasLimit
+  bigint, // processingFee
+  Address, // refundAddress
+  string, // memo
+];
+
+// TODO: future sendToken(op: BridgeTransferOp)
+export type BridgeTransferOp = {
+  destChainId: bigint;
+  to: Address;
+  token: Address;
+  amount: bigint;
+  gasLimit: bigint;
+  processingFee: bigint;
+  refundAddress: Address;
+  memo: string;
+};
+
+export type ApproveArgs = {
+  amount: bigint;
+  tokenAddress: Address;
+  spenderAddress: Address;
+};
+
+export type BridgeArgs = {
+  to: Address;
+  srcChainId: number;
+  destChainId: number;
+  amount: bigint;
+  processingFee: bigint;
+  memo?: string;
+};
+
+export type ETHBridgeArgs = BridgeArgs & {
+  bridgeAddress: Address;
+};
+
+export type ERC20BridgeArgs = BridgeArgs & {
+  tokenAddress: Address;
+  tokenVaultAddress: Address;
+  isTokenAlreadyDeployed?: boolean;
+};
+
+export interface Bridge {
+  estimateGas(args: BridgeArgs): Promise<bigint>;
+}
diff --git a/packages/bridge-ui-v2/src/libs/chain/chains.ts b/packages/bridge-ui-v2/src/libs/chain/chains.ts
index 2779bff7880..496137b14ba 100644
--- a/packages/bridge-ui-v2/src/libs/chain/chains.ts
+++ b/packages/bridge-ui-v2/src/libs/chain/chains.ts
@@ -1,5 +1,4 @@
-import type { Chain } from '@wagmi/core';
-import type { Address } from 'abitype';
+import type { Address, Chain } from '@wagmi/core';
 
 import {
   PUBLIC_L1_BRIDGE_ADDRESS,
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 00000000000..b81a7432d57
--- /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 00000000000..f72bc43e28c
--- /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 8e0b0885858..af8793c8826 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 3066604fa6c..6802f6332e2 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');
@@ -45,28 +45,18 @@ describe('checkMintable', () => {
     vi.mocked(getPublicClient).mockReturnValue(mockPublicClient);
   });
 
-  it('should throw when wallet is not connected', async () => {
-    vi.mocked(getWalletClient).mockResolvedValueOnce(null);
-
-    try {
-      await checkMintable(BLLToken, mainnetChain);
-      expect.fail('should have thrown');
-    } catch (error) {
-      const { cause } = error as Error;
-      expect(cause).toBe(MintableError.NOT_CONNECTED);
-      expect(getWalletClient).toHaveBeenCalledWith({ chainId: mainnetChain.id });
-    }
+  beforeEach(() => {
+    vi.clearAllMocks();
   });
 
   it('should throw when user has already minted', async () => {
     vi.mocked(mockTokenContract.read.minters).mockResolvedValueOnce(true);
 
     try {
-      await checkMintable(BLLToken, mainnetChain);
+      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,
@@ -91,12 +81,11 @@ describe('checkMintable', () => {
     vi.mocked(mockPublicClient.getBalance).mockResolvedValueOnce(BigInt(100));
 
     try {
-      await checkMintable(BLLToken, mainnetChain);
+      await checkMintable(BLLToken, mainnetChain.id);
       expect.fail('should have thrown');
     } catch (error) {
-      const { cause } = error as Error;
-      expect(cause).toBe(MintableError.INSUFFICIENT_BALANCE);
-      expect(getPublicClient).toHaveBeenCalledWith({ chainId: mainnetChain.id });
+      expect(error).toBeInstanceOf(InsufficientBalanceError);
+      expect(getPublicClient).toHaveBeenCalled();
       expect(mockTokenContract.estimateGas.mint).toHaveBeenCalledWith([mockWalletClient.account.address]);
       expect(mockPublicClient.getBalance).toHaveBeenCalledWith({ address: mockWalletClient.account.address });
     }
@@ -117,7 +106,7 @@ describe('checkMintable', () => {
     vi.mocked(mockPublicClient.getBalance).mockResolvedValueOnce(BigInt(300));
 
     try {
-      await checkMintable(BLLToken, mainnetChain);
+      await checkMintable(BLLToken, mainnetChain.id);
     } catch (error) {
       expect.fail('should not have thrown');
     }
diff --git a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts
index 848de485316..1906dd357a8 100644
--- a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts
+++ b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts
@@ -1,21 +1,16 @@
-import { type Chain, getContract, getPublicClient, getWalletClient } from '@wagmi/core';
-import { formatEther } from 'viem';
+import { getContract, getPublicClient } from '@wagmi/core';
 
 import { freeMintErc20ABI } from '$abi';
+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 is not connected to the network
-// 2. User has already minted this token
-// 3. User has insufficient balance to mint this token
-export async function checkMintable(token: Token, network: Chain) {
-  const chainId = network.id;
-  const walletClient = await getWalletClient({ chainId });
-
-  if (!walletClient) {
-    throw Error(`user is not connected to ${network.name}`, { cause: MintableError.NOT_CONNECTED });
-  }
+// 1. User has already minted this token
+// 2. User has insufficient balance to mint this token
+export async function checkMintable(token: Token, chainId: number) {
+  const walletClient = await getConnectedWallet();
 
   const tokenContract = getContract({
     walletClient,
@@ -28,12 +23,13 @@ export async function checkMintable(token: Token, network: Chain) {
   const hasMinted = await tokenContract.read.minters([userAddress]);
 
   if (hasMinted) {
-    throw Error(`token ${token.symbol} has already been minted`, { cause: MintableError.TOKEN_MINTED });
+    throw new TokenMintedError();
   }
 
   // Check whether the user has enough balance to mint.
   // Compute the cost of the transaction:
-  const publicClient = getPublicClient({ chainId });
+  const publicClient = getPublicClient();
+
   const estimatedGas = await tokenContract.estimateGas.mint([userAddress]);
   const gasPrice = await publicClient.getGasPrice();
   const estimatedCost = estimatedGas * gasPrice;
@@ -41,8 +37,6 @@ export async function checkMintable(token: Token, network: Chain) {
   const userBalance = await publicClient.getBalance({ address: userAddress });
 
   if (estimatedCost > userBalance) {
-    throw Error(`user has insufficient balance to mint ${token.symbol}: ${formatEther(userBalance)}`, {
-      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 4f7d8c55eea..6818da3c2f6 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 2417d7184b6..96765e45dc3 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 a6846bb2be6..12db6a12687 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,37 +61,45 @@ 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({
       address: mockWalletClient.account.address,
-      chainId: Number(PUBLIC_L1_CHAIN_ID),
       token: BLLToken.addresses[PUBLIC_L1_CHAIN_ID],
     });
   });
 
-  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 ebb974455e1..33aad51707f 100644
--- a/packages/bridge-ui-v2/src/libs/token/getBalance.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
@@ -1,6 +1,5 @@
 import { fetchBalance, type FetchBalanceResult } from '@wagmi/core';
-import type { Address } from 'abitype';
-import { zeroAddress } from 'viem';
+import { type Address, zeroAddress } from 'viem';
 
 import { getLogger } from '$libs/util/logger';
 
@@ -9,30 +8,33 @@ 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)) {
-    tokenBalance = await fetchBalance({ address: userAddress, chainId });
+  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.
     tokenBalance = await fetchBalance({
-      chainId,
       address: userAddress,
       token: tokenAddress,
     });
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 00000000000..254c7597802
--- /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 00000000000..7b30e2c2a23
--- /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 92e250f0776..e13186d034f 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 00000000000..8edf6a6d963
--- /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 379c5798d88..e1bf2db5ca4 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, mockWalletClient)).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 cfd35b3b331..c09c949a6ee 100644
--- a/packages/bridge-ui-v2/src/libs/token/mint.ts
+++ b/packages/bridge-ui-v2/src/libs/token/mint.ts
@@ -1,16 +1,18 @@
-import { getContract, type WalletClient } from '@wagmi/core';
+import { getContract } from '@wagmi/core';
 
 import { freeMintErc20ABI } from '$abi';
+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, walletClient: WalletClient) {
-  const tokenSymbol = token.symbol;
+export async function mint(token: Token, chainId: number) {
+  const walletClient = await getConnectedWallet(chainId);
+
   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 c47b27f7fa3..e68098c660b 100644
--- a/packages/bridge-ui-v2/src/libs/token/types.ts
+++ b/packages/bridge-ui-v2/src/libs/token/types.ts
@@ -1,4 +1,4 @@
-import type { Address } from 'abitype';
+import type { Address } from 'viem';
 
 export type Token = {
   name: string;
@@ -12,9 +12,3 @@ export type TokenEnv = {
   address: Address;
   symbol: string;
 };
-
-export enum MintableError {
-  NOT_CONNECTED = 'NOT_CONNECTED',
-  TOKEN_MINTED = 'TOKEN_MINTED',
-  INSUFFICIENT_BALANCE = 'INSUFFICIENT_BALANCE',
-}
diff --git a/packages/bridge-ui-v2/src/libs/util/debounce.ts b/packages/bridge-ui-v2/src/libs/util/debounce.ts
new file mode 100644
index 00000000000..75cdc862732
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/debounce.ts
@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function debounce<T extends (...args: any[]) => ReturnType<T>>(
+  callback: T,
+  timeout: number,
+): (...args: Parameters<T>) => void {
+  let timer: ReturnType<typeof setTimeout>;
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      callback(...args);
+    }, timeout);
+  };
+}
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 00000000000..f42cda0f29b
--- /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/getConnectedWallet.ts b/packages/bridge-ui-v2/src/libs/util/getConnectedWallet.ts
new file mode 100644
index 00000000000..136a6b7cc14
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/getConnectedWallet.ts
@@ -0,0 +1,11 @@
+import { getWalletClient } from '@wagmi/core';
+
+export async function getConnectedWallet(chainId?: number) {
+  const walletClient = await getWalletClient({ chainId });
+
+  if (!walletClient) {
+    throw Error('wallet is not connected');
+  }
+
+  return walletClient;
+}
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 00000000000..4b5bcf09f07
--- /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/truncateDecimal.ts b/packages/bridge-ui-v2/src/libs/util/truncateDecimal.ts
new file mode 100644
index 00000000000..bd3391864cb
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/truncateDecimal.ts
@@ -0,0 +1,4 @@
+export function truncateDecimal(num: number, decimalPlaces: number) {
+  const factor = 10 ** decimalPlaces;
+  return Math.floor(num * factor) / factor;
+}
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 00000000000..2f8bf9db5c2
--- /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...');
+  });
+});
diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css
index 7b82bbfa2c6..839066bb4d9 100644
--- a/packages/bridge-ui-v2/src/styles/components.css
+++ b/packages/bridge-ui-v2/src/styles/components.css
@@ -83,7 +83,11 @@
 
       /* focus:border-[3px] */
       /* focus:border-primary-border-accent */
-      focus:shadow-[0_0_0_3px_#E81899];
+      focus:!shadow-[0_0_0_3px_#E81899];
+  }
+
+  .input-box.error {
+    @apply !shadow-[0_0_0_3px_#F15C5D];
   }
 
   /* Separatos */
diff --git a/packages/website/components/Button/AddTokenButton.tsx b/packages/website/components/Button/AddTokenButton.tsx
deleted file mode 100644
index c479fda662b..00000000000
--- a/packages/website/components/Button/AddTokenButton.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import {
-  ELDFELL_ADD_ETHEREUM_CHAIN,
-  ELDFELL_CONFIG,
-  GRIMSVOTN_ADD_ETHEREUM_CHAIN,
-  GRIMSVOTN_CONFIG,
-  SEPOLIA_ADD_ETHEREUM_CHAIN,
-  SEPOLIA_CONFIG,
-} from "../../domain/chain";
-
-import { ethereumRequest } from "../../utils/ethereumRequest";
-
-type ConnectButtonProps = {
-  network:
-  | typeof SEPOLIA_CONFIG.names.shortName
-  | typeof ELDFELL_CONFIG.names.shortName
-  | typeof GRIMSVOTN_CONFIG.names.shortName;
-};
-
-const chainMap = {
-  Eldfell: ELDFELL_CONFIG.chainId.hex, // 167005
-  Grimsvotn: GRIMSVOTN_CONFIG.chainId.hex, // 167005
-  Sepolia: SEPOLIA_CONFIG.chainId.hex, // 11155111
-};
-
-const configMap = {
-  Eldfell: ELDFELL_ADD_ETHEREUM_CHAIN,
-  Grimsvotn: GRIMSVOTN_ADD_ETHEREUM_CHAIN,
-  Sepolia: SEPOLIA_ADD_ETHEREUM_CHAIN,
-};
-
-interface AddTokenButtonProps {
-  address: string;
-  symbol: string;
-  decimals: number;
-  image: string;
-  network: ConnectButtonProps["network"];
-}
-
-const addTokenToWallet = async (token: AddTokenButtonProps) => {
-  const { ethereum } = window as any;
-
-  if (ethereum.chainId != chainMap[token.network]) {
-    await ethereumRequest("wallet_addEthereumChain", [configMap[token.network]]);
-  }
-
-  const params = { options: { address: token.address, symbol: token.symbol, decimals: token.decimals, image: token.image }, type: "ERC20" };
-
-  await ethereumRequest("wallet_watchAsset", params);
-
-
-};
-
-export function AddTokenButton({
-  address,
-  symbol,
-  decimals,
-  image,
-  network,
-}: AddTokenButtonProps) {
-  return (
-    <div
-      onClick={() => addTokenToWallet({ address, symbol, decimals, image, network })}
-      className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
-    >
-      Add {symbol} ({network})
-    </div>
-  );
-}
diff --git a/packages/website/components/Button/AddTokensButton.tsx b/packages/website/components/Button/AddTokensButton.tsx
index 1fd0f5b7454..c67b9ee54e3 100644
--- a/packages/website/components/Button/AddTokensButton.tsx
+++ b/packages/website/components/Button/AddTokensButton.tsx
@@ -13,9 +13,9 @@ import { ethereumRequest } from "../../utils/ethereumRequest";
 
 type ConnectButtonProps = {
   network:
-  | typeof SEPOLIA_CONFIG.names.shortName
-  | typeof ELDFELL_CONFIG.names.shortName
-  | typeof GRIMSVOTN_CONFIG.names.shortName;
+    | typeof SEPOLIA_CONFIG.names.shortName
+    | typeof ELDFELL_CONFIG.names.shortName
+    | typeof GRIMSVOTN_CONFIG.names.shortName;
 };
 
 const chainMap = {
@@ -45,20 +45,26 @@ const addTokensToWallet = async ({ network }: AddTokensButtonProps) => {
     await ethereumRequest("wallet_addEthereumChain", [configMap[network]]);
   }
   for (const token of tokenConfigMap[network]) {
-    const params = { options: { address: token.address, symbol: token.symbol, decimals: token.decimals, image: token.image }, type: "ERC20" };
+    const params = {
+      options: {
+        address: token.address,
+        symbol: token.symbol,
+        decimals: token.decimals,
+        image: token.image,
+      },
+      type: "ERC20",
+    };
     await ethereumRequest("wallet_watchAsset", params);
   }
 };
 
-export function AddTokensButton({
-  network,
-}: AddTokensButtonProps) {
+export function AddTokensButton({ network }: AddTokensButtonProps) {
   return (
     <div
       onClick={() => addTokensToWallet({ network })}
       className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center m-1 w-48 justify-center"
     >
-      Add {network} Tokens
+      Add {network} tokens
     </div>
   );
 }
diff --git a/packages/website/components/Home/BlogSection.tsx b/packages/website/components/Home/BlogSection.tsx
index 0a8f78d0587..1b71bcf9302 100644
--- a/packages/website/components/Home/BlogSection.tsx
+++ b/packages/website/components/Home/BlogSection.tsx
@@ -1,44 +1,44 @@
 const posts = [
   {
-    title: "Cross-chain communication exploration – rollups’ vision",
-    href: "https://taiko.mirror.xyz/ryYEi4gAeOWwyERqYTs7CPbNEOYXaEeiMEui6gdlnyg",
+    title: "Eldfell L3 (alpha-4) is live!",
+    href: "https://taiko.mirror.xyz/HJCWBluTwmNyWRkhzIXXr0k5xAaalRNtmlyDMJTu_ws",
     description:
-      "TLDR: This article explores the approaches of different L2s to cross-chain messaging from rollups’ perspective, focusing more on trustless cross-chain communication.",
-    date: "Jul 12, 2023",
-    datetime: "2023-07-12",
+      "Taiko’s fourth testnet has arrived! Eldfell L3 (alpha-4) is our first experiment with inception layers and a new staking based proving design.",
+    date: "Jul 18, 2023",
+    datetime: "2023-07-18",
     imageUrl:
-      "https://mirror-media.imgix.net/publication-images/HQGT0nBEq8AzLQxQFqqpI.png?height=512&width=1024&h=512&w=1024&auto=compress",
-    readingTime: "14 min",
+      "https://mirror-media.imgix.net/publication-images/ew9PQRsaJTLtGd8ShGiyR.jpeg?height=600&width=1200&h=600&w=1200&auto=compress",
+    readingTime: "3 min",
     author: {
-      name: "Lisa A.",
-      imageUrl: "https://avatars.githubusercontent.com/u/106527861?v=4",
+      name: "d1onys1us",
+      imageUrl: "https://avatars.githubusercontent.com/u/13951458?v=4",
     },
   },
   {
-    title: "Alpha-3 testnet update: stats & future plans",
-    href: "https://taiko.mirror.xyz/LBukIvc5nRfNdbzk3_bDZNkBRSmavFp_D90IkBYCuFk",
+    title: "Announcing our first community grant program",
+    href: "https://taiko.mirror.xyz/G7dmuoR42S4D55vT8bs_lAxPZP63kAgRu2IfqkJdf6U",
     description:
-      "Alpha-3 has been drumming along for one month now! Let's take a look at what’s happened.",
-    date: "Jul 07, 2023",
-    datetime: "2023-07-07",
+      "We are excited to launch our first community grant program to discover & support builders to enhance our ecosystem with funds and dev resources.",
+    date: "Jul 14, 2023",
+    datetime: "2023-07-14",
     imageUrl:
-      "https://mirror-media.imgix.net/publication-images/4vqDxKbexLf3eX3d4GtRB.jpeg?height=512&width=1024&h=512&w=1024&auto=compress",
-    readingTime: "2 min",
+      "https://mirror-media.imgix.net/publication-images/wmQORiddLvZqlHJi8ma1k.jpeg?height=960&width=1920&h=960&w=1920&auto=compress",
+    readingTime: "10 min",
     author: {
       name: "d1onys1us",
       imageUrl: "https://avatars.githubusercontent.com/u/13951458?v=4",
     },
   },
   {
-    title: "ZK-Roller-Coaster #8",
-    href: "https://taiko.mirror.xyz/tOUCZgLRV9bKH24bxhahISpdhkQmqVyM-ZX-wMWtqkI",
+    title: "Cross-chain communication exploration – rollups’ vision",
+    href: "https://taiko.mirror.xyz/ryYEi4gAeOWwyERqYTs7CPbNEOYXaEeiMEui6gdlnyg",
     description:
-      "This is the 8th edition of ZK-Roller-Coaster where we track and investigate the most exciting, meaningful, and crazy ZK-stuff of the prior two weeks.",
-    date: "Jul 04, 2023",
-    datetime: "2023-07-04",
+      "TLDR: This article explores the approaches of different L2s to cross-chain messaging from rollups’ perspective, focusing more on trustless cross-chain communication.",
+    date: "Jul 12, 2023",
+    datetime: "2023-07-12",
     imageUrl:
-      "https://mirror-media.imgix.net/publication-images/3cfm8O9yVJ8aszk8bQ700.png?height=1536&width=3072&h=1536&w=3072&auto=compress",
-    readingTime: "4 min",
+      "https://mirror-media.imgix.net/publication-images/HQGT0nBEq8AzLQxQFqqpI.png?height=512&width=1024&h=512&w=1024&auto=compress",
+    readingTime: "14 min",
     author: {
       name: "Lisa A.",
       imageUrl: "https://avatars.githubusercontent.com/u/106527861?v=4",
diff --git a/packages/website/pages/docs/guides/build-on-taiko/receive-tokens.mdx b/packages/website/pages/docs/guides/build-on-taiko/receive-tokens.mdx
index 9d72f962b4a..1ebd65029f7 100644
--- a/packages/website/pages/docs/guides/build-on-taiko/receive-tokens.mdx
+++ b/packages/website/pages/docs/guides/build-on-taiko/receive-tokens.mdx
@@ -2,7 +2,7 @@ import { Callout, Steps } from "nextra-theme-docs";
 
 # Receive tokens
 
-This guide will help you receive testnet tokens. You can see all the deployed tokens [here](/docs/reference/contract-addresses). Keep in mind HORSE and BLL faucets only distribute to Grimsvotn L2. To get HORSE and BLL on Eldfell L3, you will need to [use the bridge](/docs/guides/bridge-tokens).
+This guide will help you receive testnet tokens. You can see all the deployed tokens [here](/docs/reference/contract-addresses). Keep in mind HORSE and BLL faucets only distribute to Grimsvotn L2. To get HORSE and BLL on Eldfell L3, you will need to [use the bridge](/docs/guides/build-on-taiko/bridge-tokens).
 
 ## Prerequisites
 
@@ -23,7 +23,7 @@ This guide will help you receive testnet tokens. You can see all the deployed to
     ### Receive HORSE
     Navigate to the [Sepolia L1 ↔ Grimsvotn L2 bridge](https://bridge.test.taiko.xyz), select HORSE from the dropdown, and click "Faucet".
 
-    To receive HORSE on Eldfell L3, you will need to [use the bridge](/docs/guides/bridge-tokens).
+    To receive HORSE on Eldfell L3, you will need to [use the bridge](/docs/guides/build-on-taiko/bridge-tokens).
 
     ![receive horse](/images/guides/receive-horse.png)
 
diff --git a/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx b/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx
index 6618849412a..f5c75b09496 100644
--- a/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx
+++ b/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx
@@ -2,11 +2,7 @@ import { Steps } from "nextra-theme-docs";
 import { AddTokensButton } from "components/Button/AddTokensButton";
 import { ConnectToMetamaskButton } from "components/Button/ConnectToMetamaskButton";
 
-import {
-  ELDFELL_CONFIG,
-  GRIMSVOTN_CONFIG,
-  SEPOLIA_CONFIG,
-} from "domain/chain";
+import { ELDFELL_CONFIG, GRIMSVOTN_CONFIG, SEPOLIA_CONFIG } from "domain/chain";
 
 # Setup your wallet
 
@@ -28,11 +24,11 @@ This guide helps you connect your wallet to Taiko's networks.
 
     ### Add tokens to your wallet
     <AddTokensButton
-    network="Sepolia"/>
+    network={SEPOLIA_CONFIG.names.shortName}/>
 
     <br />
-    <AddTokensButton 
-    network="Grimsvotn"/>
+    <AddTokensButton
+    network={GRIMSVOTN_CONFIG.names.shortName}/>
 
 
 </Steps>
diff --git a/packages/website/theme.config.tsx b/packages/website/theme.config.tsx
index 0931908ef07..b4694f23f69 100644
--- a/packages/website/theme.config.tsx
+++ b/packages/website/theme.config.tsx
@@ -3,13 +3,14 @@ import { ThemedImage } from "./components/ThemedImage";
 import { useConfig } from "nextra-theme-docs";
 import { useRouter } from "next/router";
 import { ThemeToggle } from "./components/ThemeToggle";
+import { ELDFELL_CONFIG } from "./domain/chain";
 
 export default {
   banner: {
     key: "banner",
     text: (
       <a href="/docs/guides" target="_blank">
-        📌 Eldell L3 is here! Get started →
+        📌 {ELDFELL_CONFIG.names.shortishName} is here! Get started →
       </a>
     ),
   },