From 13ebf1c54f147bfb0ad754abc24271caf97c3775 Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Mon, 17 Jul 2023 17:12:28 +0200
Subject: [PATCH] feat(bridge-ui-v2): Processing Fee (#14170)

Co-authored-by: Korbinian <KorbinianK@users.noreply.github.com>
---
 packages/bridge-ui-v2/src/app.config.ts       |  10 ++
 .../AccountConnectionToast.svelte             |  17 +-
 .../components/Activities/Activities.svelte   |   4 +-
 .../components/AmountInput/AmountInput.svelte |  71 ---------
 .../src/components/AmountInput/index.ts       |   1 -
 .../Bridge/AmountInput/AmountInput.svelte     |  26 +++
 .../Bridge/AmountInput/Balance.svelte         |  56 +++++++
 .../components/Bridge/AmountInput/index.ts    |   1 +
 .../src/components/Bridge/Bridge.svelte       |  54 +++++--
 .../Bridge/ProcessingFee/NoneOption.svelte    |  51 ++++++
 .../ProcessingFee/ProcessingFee.svelte        | 150 +++++++++++-------
 .../ProcessingFee/RecommendedFee.svelte       |  48 ++++++
 .../{ => Bridge}/ProcessingFee/index.ts       |   0
 .../RecipientInput/RecipientInput.svelte      |   0
 .../{ => Bridge}/RecipientInput/index.ts      |   0
 .../Bridge/SwitchChainsButton.svelte          |  20 +++
 .../src/components/Bridge/state.ts            |  17 ++
 .../ChainSelector/ChainSelector.svelte        |  36 +++--
 .../src/components/Faucet/Faucet.svelte       |  12 +-
 .../components/LoadingText/LoadingText.svelte |  13 +-
 .../src/components/LoadingText/index.ts       |   1 +
 .../src/components/OnAccount/OnAccount.svelte |  14 ++
 .../src/components/OnAccount/index.ts         |   1 +
 .../src/components/OnNetwork/OnNetwork.svelte |  14 ++
 .../src/components/OnNetwork/index.ts         |   1 +
 packages/bridge-ui-v2/src/i18n/en.json        |   3 +-
 .../bridge-ui-v2/src/libs/chain/chains.ts     |   4 +-
 .../src/libs/fee/recommendProcessingFee.ts    |  48 +++++-
 .../src/libs/token/getAddress.test.ts         |  14 +-
 .../bridge-ui-v2/src/libs/token/getAddress.ts |  16 +-
 .../src/libs/token/getBalance.test.ts         |  28 +++-
 .../bridge-ui-v2/src/libs/token/getBalance.ts |  18 ++-
 .../bridge-ui-v2/src/libs/util/parseToWei.ts  |   7 +
 .../bridge-ui-v2/src/libs/wagmi/watcher.ts    |   4 +-
 packages/bridge-ui-v2/src/stores/account.ts   |   4 +-
 packages/bridge-ui-v2/src/stores/index.ts     |   2 +
 packages/bridge-ui-v2/src/stores/network.ts   |   4 +-
 packages/bridge-ui-v2/tsconfig.json           |   2 +
 38 files changed, 563 insertions(+), 209 deletions(-)
 create mode 100644 packages/bridge-ui-v2/src/app.config.ts
 delete mode 100644 packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte
 delete mode 100644 packages/bridge-ui-v2/src/components/AmountInput/index.ts
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/AmountInput/AmountInput.svelte
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
 rename packages/bridge-ui-v2/src/components/{ => Bridge}/ProcessingFee/ProcessingFee.svelte (53%)
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte
 rename packages/bridge-ui-v2/src/components/{ => Bridge}/ProcessingFee/index.ts (100%)
 rename packages/bridge-ui-v2/src/components/{ => Bridge}/RecipientInput/RecipientInput.svelte (100%)
 rename packages/bridge-ui-v2/src/components/{ => Bridge}/RecipientInput/index.ts (100%)
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/state.ts
 create mode 100644 packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte
 create mode 100644 packages/bridge-ui-v2/src/components/OnAccount/index.ts
 create mode 100644 packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte
 create mode 100644 packages/bridge-ui-v2/src/components/OnNetwork/index.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/util/parseToWei.ts
 create mode 100644 packages/bridge-ui-v2/src/stores/index.ts

diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts
new file mode 100644
index 0000000000..5584560c84
--- /dev/null
+++ b/packages/bridge-ui-v2/src/app.config.ts
@@ -0,0 +1,10 @@
+export const recommentProcessingFee = {
+  ethGasLimit: BigInt(900000),
+  erc20NotDeployedGasLimit: BigInt(3100000),
+  erc20DeployedGasLimit: BigInt(1100000),
+};
+
+export const processingFeeComponent = {
+  closingDelayOptionClick: 300,
+  intervalComputeRecommendedFee: 20000,
+};
diff --git a/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte b/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte
index 4dfec03c35..eabcab394c 100644
--- a/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte
+++ b/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte
@@ -2,22 +2,21 @@
   import { t } from 'svelte-i18n';
 
   import { successToast, warningToast } from '$components/NotificationToast';
-  import { account } from '$stores/account';
-
-  let prevAccount = $account;
+  import { OnAccount } from '$components/OnAccount';
+  import type { Account } from '$stores/account';
 
   // Listen to changes in the account state and notify the user
   // when the account is connected or disconnected via toast
-  account.subscribe((_account) => {
-    if (_account?.isConnected) {
+  function onAccountChange(newAccount: Account, oldAccount?: Account) {
+    if (newAccount?.isConnected) {
       successToast($t('messages.account.connected'));
-    } else if (prevAccount && _account?.isDisconnected) {
+    } else if (oldAccount && newAccount?.isDisconnected) {
       // We check if there was previous account, if not
       // the user just hit the app, and there is no need
       // to show the message.
       warningToast($t('messages.account.disconnected'));
     }
-
-    prevAccount = _account;
-  });
+  }
 </script>
+
+<OnAccount change={onAccountChange} />
diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
index 4582e16867..9e3633b7dc 100644
--- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
+++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
@@ -3,7 +3,7 @@
 
   import { Card } from '$components/Card';
   import { ChainSelector } from '$components/ChainSelector';
-  import { srcChain } from '$stores/network';
+  import { network } from '$stores/network';
 
   import ListWithDetailsView from './ListWithDetailsView.svelte';
   import TableView from './TableView.svelte';
@@ -11,7 +11,7 @@
 
 <Card class="md:min-w-[524px]" title={$t('activities.title')} text={$t('activities.subtitle')}>
   <div class="space-y-[35px]">
-    <ChainSelector label={$t('chain_selector.currently_on')} value={$srcChain} />
+    <ChainSelector label={$t('chain_selector.currently_on')} value={$network} />
     <!-- Small size view  -->
     <div class="md:hidden">
       <ListWithDetailsView />
diff --git a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte
deleted file mode 100644
index 2aaf0434c7..0000000000
--- a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-  import type { FetchBalanceResult, GetAccountResult, PublicClient } from '@wagmi/core';
-  import { t } from 'svelte-i18n';
-
-  import { InputBox } from '$components/InputBox';
-  import LoadingText from '$components/LoadingText/LoadingText.svelte';
-  import { getBalance as getTokenBalance, type Token } from '$libs/token';
-  import { truncateString } from '$libs/util/truncateString';
-  import { uid } from '$libs/util/uid';
-  import { account } from '$stores/account';
-  import { destChain, srcChain } from '$stores/network';
-
-  export let token: Token;
-
-  let inputId = `input-${uid()}`;
-
-  let tokenBalance: Maybe<FetchBalanceResult>;
-  let computingTokenBalance = false;
-
-  async function updateTokenBalance(
-    token?: Token,
-    account?: GetAccountResult<PublicClient>,
-    srcChainId?: number,
-    destChainId?: number,
-  ) {
-    if (!token || !account || !account.address) return;
-
-    computingTokenBalance = true;
-
-    try {
-      tokenBalance = await getTokenBalance(token, account.address, srcChainId, destChainId);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      computingTokenBalance = false;
-    }
-  }
-
-  export function renderTokenBalance(balance: Maybe<FetchBalanceResult>) {
-    if (!balance) return '0.00';
-    return `${truncateString(balance.formatted, 6)} ${balance.symbol}`;
-  }
-
-  $: updateTokenBalance(token, $account, $srcChain?.id, $destChain?.id);
-</script>
-
-<div class="f-col space-y-2">
-  <div class="f-between-center text-secondary-content">
-    <label class="body-regular" for={inputId}>{$t('amount_input.label')}</label>
-    <div class="body-small-regular">
-      <span>{$t('amount_input.balance')}:</span>
-      <span>
-        {#if computingTokenBalance}
-          <LoadingText mask="0.0000" class="text-white" />
-          <LoadingText mask="XXX" class="text-white" />
-        {:else}
-          {renderTokenBalance(tokenBalance)}
-        {/if}
-      </span>
-    </div>
-  </div>
-  <div class="relative f-items-center">
-    <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/AmountInput/index.ts b/packages/bridge-ui-v2/src/components/AmountInput/index.ts
deleted file mode 100644
index e49f595a9a..0000000000
--- a/packages/bridge-ui-v2/src/components/AmountInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './AmountInput.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
new file mode 100644
index 0000000000..d2cd50a02c
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/AmountInput.svelte
@@ -0,0 +1,26 @@
+<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/Balance.svelte b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte
new file mode 100644
index 0000000000..18000188fa
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { FetchBalanceResult } from '@wagmi/core';
+  import { t } from 'svelte-i18n';
+
+  import LoadingText from '$components/LoadingText/LoadingText.svelte';
+  import { getBalance as getTokenBalance, type Token } from '$libs/token';
+  import { truncateString } from '$libs/util/truncateString';
+  import { type Account, account } from '$stores/account';
+  import { network } from '$stores/network';
+
+  import { destNetwork, selectedToken } from '../state';
+
+  let tokenBalance: 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;
+
+    computingTokenBalance = true;
+    errorComputingTokenBalance = false;
+
+    try {
+      tokenBalance = await getTokenBalance({
+        token,
+        destChainId,
+        userAddress: account.address,
+        chainId: srcChainId,
+      });
+    } catch (error) {
+      console.error(error);
+      errorComputingTokenBalance = true;
+    } finally {
+      computingTokenBalance = false;
+    }
+  }
+
+  export function renderTokenBalance(balance: Maybe<FetchBalanceResult>) {
+    if (!balance) return '0.00';
+    return `${truncateString(balance.formatted, 6)} ${balance.symbol}`;
+  }
+
+  $: updateTokenBalance($selectedToken, $account, $network?.id, $destNetwork?.id);
+</script>
+
+<div class="body-small-regular">
+  <span>{$t('amount_input.balance')}:</span>
+  <span>
+    {#if computingTokenBalance}
+      <LoadingText mask="0.0000" />
+      <LoadingText mask="XXX" />
+    {:else}
+      {renderTokenBalance(tokenBalance)}
+    {/if}
+  </span>
+</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
new file mode 100644
index 0000000000..ff5cf90c7c
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts
@@ -0,0 +1 @@
+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 0a42443ab8..770e2c091a 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -1,38 +1,58 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
-  import AmountInput from '$components/AmountInput';
-  import Button from '$components/Button/Button.svelte';
+  import { Button } from '$components/Button';
   import { Card } from '$components/Card';
   import { ChainSelector } from '$components/ChainSelector';
-  import Icon from '$components/Icon/Icon.svelte';
-  import { ProcessingFee } from '$components/ProcessingFee';
-  import { RecipientInput } from '$components/RecipientInput';
+  import { OnAccount } from '$components/OnAccount';
+  import { OnNetwork } from '$components/OnNetwork';
   import { TokenDropdown } from '$components/TokenDropdown';
-  import { type Token, tokens } from '$libs/token';
-  import { destChain, srcChain } from '$stores/network';
+  import { chains } from '$libs/chain';
+  import { ETHToken, tokens } from '$libs/token';
+  import type { Account } from '$stores/account';
+  import { type Network, network } from '$stores/network';
 
-  let selectedToken: Token;
+  import { AmountInput } from './AmountInput';
+  import { ProcessingFee } from './ProcessingFee';
+  import { RecipientInput } from './RecipientInput';
+  import { destNetwork, selectedToken } from './state';
+  import SwitchChainsButton from './SwitchChainsButton.svelte';
+
+  function onNetworkChange(network: Network) {
+    if (network && chains.length === 2) {
+      // If there are only two chains, the destination chain will be the other one
+      const otherChain = chains.find((chain) => chain.id !== network.id);
+
+      if (otherChain) destNetwork.set(otherChain);
+    }
+  }
+
+  function onAccountChange(account: Account) {
+    if (account && account.isConnected && !$selectedToken) {
+      $selectedToken = ETHToken;
+    } else if (account && account.isDisconnected) {
+      $selectedToken = null;
+      $destNetwork = null;
+    }
+  }
 </script>
 
 <Card class="md:w-[524px]" title={$t('bridge.title')} text={$t('bridge.subtitle')}>
   <div class="space-y-[35px]">
     <div class="space-y-4">
       <div class="space-y-2">
-        <ChainSelector label={$t('chain.from')} value={$srcChain} />
-        <TokenDropdown {tokens} bind:value={selectedToken} />
+        <ChainSelector label={$t('chain.from')} value={$network} switchWallet />
+        <TokenDropdown {tokens} bind:value={$selectedToken} />
       </div>
 
-      <AmountInput token={selectedToken} />
+      <AmountInput />
 
       <div class="f-justify-center">
-        <button class="f-center rounded-full bg-secondary-icon w-[30px] h-[30px]">
-          <Icon type="up-down" />
-        </button>
+        <SwitchChainsButton />
       </div>
 
       <div class="space-y-2">
-        <ChainSelector label={$t('chain.to')} value={$destChain} />
+        <ChainSelector label={$t('chain.to')} value={$destNetwork} readOnly />
         <RecipientInput />
       </div>
     </div>
@@ -46,3 +66,7 @@
     </Button>
   </div>
 </Card>
+
+<OnNetwork change={onNetworkChange} />
+
+<OnAccount change={onAccountChange} />
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
new file mode 100644
index 0000000000..fb5dbd614f
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Address } from 'abitype';
+
+  import { recommendProcessingFee } from '$libs/fee';
+  import { getBalance, type Token } from '$libs/token';
+  import { account, network } from '$stores';
+
+  import { destNetwork, selectedToken } from '../state';
+
+  export let enoughEth: boolean;
+  export let calculating = false;
+  export let error = false;
+
+  async function compute(token: Maybe<Token>, userAddress?: Address, srcChainId?: number, destChainId?: number) {
+    if (!token || !userAddress || !srcChainId || !destChainId) {
+      enoughEth = false;
+      return;
+    }
+
+    calculating = true;
+    error = false;
+
+    try {
+      // Get the balance of the user on the destination chain
+      const destBalance = await getBalance({
+        token,
+        userAddress,
+        chainId: destChainId,
+      });
+
+      // Calculate the recommended amount of ETH needed for processMessage call
+      const recommendedAmount = await recommendProcessingFee({
+        token,
+        destChainId,
+        srcChainId,
+      });
+
+      // Does the user have enough ETH to claim manually on the destination chain?
+      enoughEth = destBalance ? destBalance?.value >= recommendedAmount : false;
+    } catch (err) {
+      console.error(err);
+
+      error = true;
+      enoughEth = false;
+    } finally {
+      calculating = false;
+    }
+  }
+
+  $: compute($selectedToken, $account?.address, $network?.id, $destNetwork?.id);
+</script>
diff --git a/packages/bridge-ui-v2/src/components/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
similarity index 53%
rename from packages/bridge-ui-v2/src/components/ProcessingFee/ProcessingFee.svelte
rename to packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
index 2301879269..18b8fcb099 100644
--- a/packages/bridge-ui-v2/src/components/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -1,84 +1,106 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import { t } from 'svelte-i18n';
+  import { formatEther } from 'viem';
 
+  import { Alert } from '$components/Alert';
   import { Icon } from '$components/Icon';
   import { InputBox } from '$components/InputBox';
+  import { LoadingText } from '$components/LoadingText';
   import { Tooltip } from '$components/Tooltip';
+  import { processingFeeComponent } from '$config';
   import { ProcessingFeeMethod } from '$libs/fee';
-  import { recommendProcessingFee } from '$libs/fee';
+  import { parseToWei } from '$libs/util/parseToWei';
   import { uid } from '$libs/util/uid';
 
+  import { processingFee } from '../state';
+  import NoneOption from './NoneOption.svelte';
+  import RecommendedFee from './RecommendedFee.svelte';
+
   let dialogId = `dialog-${uid()}`;
   let selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED;
 
-  let recommendedAmount = 0;
+  let recommendedAmount = BigInt(0);
   let calculatingRecommendedAmount = false;
   let errorCalculatingRecommendedAmount = false;
 
-  let selectedAmount = 0;
+  let hasEnoughEth = false;
+  let calculatingEnoughEth = false;
+  let errorCalculatingEnoughEth = false;
+
   let modalOpen = false;
   let customInput: InputBox;
 
-  async function calculateRecommendedAmount() {
-    calculatingRecommendedAmount = true;
-    try {
-      recommendedAmount = await recommendProcessingFee();
-      errorCalculatingRecommendedAmount = false;
-    } catch (error) {
-      errorCalculatingRecommendedAmount = true;
-      recommendedAmount = 0;
-    } finally {
-      calculatingRecommendedAmount = false;
+  function closeModal() {
+    // Let's check if we are closing with CUSTOM method selected and zero amount entered
+    if (selectedFeeMethod === ProcessingFeeMethod.CUSTOM && $processingFee === BigInt(0)) {
+      // If so, let's switch to RECOMMENDED method
+      selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED;
     }
 
-    return recommendedAmount;
+    modalOpen = false;
+  }
+
+  function openModal() {
+    modalOpen = true;
+  }
+
+  function closeOnOptionClick() {
+    // 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();
   }
 
-  async function onSelectedFeeMethodChanged(method: ProcessingFeeMethod) {
-    // customInput?.clear();
+  function onCustomInputChange(event: Event) {
+    if (selectedFeeMethod !== ProcessingFeeMethod.CUSTOM) return;
+
+    const input = event.target as HTMLInputElement;
+    $processingFee = parseToWei(input.value);
+  }
 
+  async function updateProcessingFee(method: ProcessingFeeMethod, recommendedAmount: bigint) {
     switch (method) {
       case ProcessingFeeMethod.RECOMMENDED:
-        // Get the cached value if exists, otherwise calculate it
-        selectedAmount = recommendedAmount ? recommendedAmount : await calculateRecommendedAmount();
+        $processingFee = recommendedAmount;
+        customInput?.clear();
+
         break;
       case ProcessingFeeMethod.CUSTOM:
         // Get a previous value entered if exists, otherwise default to 0
-        selectedAmount = Number(customInput?.value() ?? 0);
+        $processingFee = parseToWei(customInput?.value());
 
         // 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);
         break;
       case ProcessingFeeMethod.NONE:
-        selectedAmount = 0;
+        $processingFee = BigInt(0);
+        customInput?.clear();
+
         break;
     }
   }
 
-  function onCustomInputChange(event: Event) {
-    const { value } = event.target as HTMLInputElement;
-    selectedAmount = Number(value);
-  }
-
-  function closeModal() {
-    modalOpen = false;
-  }
+  function unselectNoneIfNotEnoughETH(method: ProcessingFeeMethod, enoughEth: boolean) {
+    if (method === ProcessingFeeMethod.NONE && !enoughEth) {
+      selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED;
 
-  function openModal() {
-    modalOpen = true;
+      // We need to manually trigger this update because we are already in an update
+      // cicle, meaning the change above will not start a new one. This is how Svelte
+      // works, batching all the changes and kicking off an update cicle. This could
+      // also prevent infinite loops. It's safe though to call this function because
+      // we're not changing state that could potentially end up in such situation.
+      updateProcessingFee(selectedFeeMethod, recommendedAmount);
+    }
   }
 
-  // TODO: some info needs to be passed in in order to calculate the recommended amount
-  $: calculateRecommendedAmount();
+  $: updateProcessingFee(selectedFeeMethod, recommendedAmount);
 
-  // TODO: how about using a onClick handler instead of this watcher?
-  $: onSelectedFeeMethodChanged(selectedFeeMethod);
+  $: unselectNoneIfNotEnoughETH(selectedFeeMethod, hasEnoughEth);
 </script>
 
 <div class="ProcessingFee">
@@ -92,16 +114,16 @@
 
   <span class="body-small-regular text-secondary-content mt-[6px]">
     {#if calculatingRecommendedAmount}
-      {$t('processing_fee.recommended.calculating')}
+      <LoadingText mask="0.0001" /> ETH
     {:else if errorCalculatingRecommendedAmount}
       {$t('processing_fee.recommended.error')}
     {:else}
-      {selectedAmount} ETH
+      {formatEther($processingFee ?? BigInt(0))} ETH
     {/if}
   </span>
 
   <dialog id={dialogId} class="modal modal-bottom md:absolute md:px-4 md:pb-4" class:modal-open={modalOpen}>
-    <div class="modal-box relative px-6 py-[35px] bg-neutral-background">
+    <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} />
       </button>
@@ -118,11 +140,11 @@
             <span class="body-small-regular text-secondary-content">
               <!-- TODO: think about the UI for this part. Talk to Jane -->
               {#if calculatingRecommendedAmount}
-                {$t('processing_fee.recommended.calculating')}
+                <LoadingText mask="0.0001" /> ETH
               {:else if errorCalculatingRecommendedAmount}
                 {$t('processing_fee.recommended.error')}
               {:else}
-                {recommendedAmount} ETH
+                {formatEther(recommendedAmount)} ETH
               {/if}
             </span>
           </div>
@@ -132,26 +154,37 @@
             type="radio"
             value={ProcessingFeeMethod.RECOMMENDED}
             name="processingFeeMethod"
-            bind:group={selectedFeeMethod} />
+            bind:group={selectedFeeMethod}
+            on:click={closeOnOptionClick} />
         </li>
 
         <!-- NONE -->
-        <li class="f-between-center">
-          <div class="f-col">
-            <label for="input-none" class="body-bold">
-              {$t('processing_fee.none.label')}
-            </label>
-            <span class="body-small-regular text-secondary-content">
-              {$t('processing_fee.none.text')}
-            </span>
+        <li class="space-y-2">
+          <div class="f-between-center">
+            <div class="f-col">
+              <label for="input-none" class="body-bold">
+                {$t('processing_fee.none.label')}
+              </label>
+              <span class="body-small-regular text-secondary-content">
+                {$t('processing_fee.none.text')}
+              </span>
+            </div>
+            <input
+              id="input-none"
+              class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
+              type="radio"
+              disabled={!hasEnoughEth}
+              value={ProcessingFeeMethod.NONE}
+              name="processingFeeMethod"
+              bind:group={selectedFeeMethod}
+              on:click={closeOnOptionClick} />
           </div>
-          <input
-            id="input-none"
-            class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
-            type="radio"
-            value={ProcessingFeeMethod.NONE}
-            name="processingFeeMethod"
-            bind:group={selectedFeeMethod} />
+
+          {#if !hasEnoughEth}
+            <Alert type="warning">
+              {$t('processing_fee.none.warning')}
+            </Alert>
+          {/if}
         </li>
 
         <!-- CUSTOM -->
@@ -188,3 +221,10 @@
     </div>
   </dialog>
 </div>
+
+<RecommendedFee bind:amount={recommendedAmount} />
+
+<NoneOption
+  bind:enoughEth={hasEnoughEth}
+  bind:calculating={calculatingEnoughEth}
+  bind:error={errorCalculatingEnoughEth} />
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte
new file mode 100644
index 0000000000..4e63211415
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+
+  import { processingFeeComponent } from '$config';
+  import { recommendProcessingFee } from '$libs/fee';
+  import type { Token } from '$libs/token';
+  import { network } from '$stores/network';
+
+  import { destNetwork, selectedToken } from '../state';
+
+  export let amount: bigint;
+  export let calculating = false;
+  export let error = false;
+
+  let interval: ReturnType<typeof setInterval>;
+
+  async function compute(token: Maybe<Token>, srcChainId?: number, destChainId?: number) {
+    if (!token) return;
+
+    calculating = true;
+    error = false;
+
+    try {
+      amount = await recommendProcessingFee({
+        token,
+        destChainId,
+        srcChainId,
+      });
+    } catch (err) {
+      console.error(err);
+      error = true;
+    } finally {
+      calculating = false;
+    }
+  }
+
+  $: compute($selectedToken, $network?.id, $destNetwork?.id);
+
+  onMount(() => {
+    interval = setInterval(() => {
+      compute($selectedToken, $network?.id, $destNetwork?.id);
+    }, processingFeeComponent.intervalComputeRecommendedFee);
+  });
+
+  onDestroy(() => {
+    clearInterval(interval);
+  });
+</script>
diff --git a/packages/bridge-ui-v2/src/components/ProcessingFee/index.ts b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/index.ts
similarity index 100%
rename from packages/bridge-ui-v2/src/components/ProcessingFee/index.ts
rename to packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/index.ts
diff --git a/packages/bridge-ui-v2/src/components/RecipientInput/RecipientInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/RecipientInput/RecipientInput.svelte
similarity index 100%
rename from packages/bridge-ui-v2/src/components/RecipientInput/RecipientInput.svelte
rename to packages/bridge-ui-v2/src/components/Bridge/RecipientInput/RecipientInput.svelte
diff --git a/packages/bridge-ui-v2/src/components/RecipientInput/index.ts b/packages/bridge-ui-v2/src/components/Bridge/RecipientInput/index.ts
similarity index 100%
rename from packages/bridge-ui-v2/src/components/RecipientInput/index.ts
rename to packages/bridge-ui-v2/src/components/Bridge/RecipientInput/index.ts
diff --git a/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
new file mode 100644
index 0000000000..3197b75995
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { switchNetwork } from '@wagmi/core';
+
+  import { Icon } from '$components/Icon';
+
+  import { destNetwork } from './state';
+
+  async function switchToDestChain() {
+    if (!$destNetwork) return;
+
+    await switchNetwork({ chainId: $destNetwork.id });
+  }
+</script>
+
+<button
+  class="f-center rounded-full bg-secondary-icon w-[30px] h-[30px]"
+  disabled={!$destNetwork}
+  on:click={switchToDestChain}>
+  <Icon type="up-down" />
+</button>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/state.ts b/packages/bridge-ui-v2/src/components/Bridge/state.ts
new file mode 100644
index 0000000000..834e104573
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/state.ts
@@ -0,0 +1,17 @@
+import type { Chain } from '@wagmi/core';
+import { writable } from 'svelte/store';
+
+import type { Token } from '$libs/token';
+
+// Note: we could combine this with Context API, but since we'll only
+// have one Bridge component, it would be an overkill. If we wanted to
+// instantiate multiple Bridge components, then we'd need to use
+// Context API to avoid having multiple instances of the same store.
+// One could argue that we only want this store to be used by the Bridge
+// and its descendants, in which case Context API would be the one to use,
+// 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>();
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
index ab2e071186..a95f2fcb20 100644
--- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
+++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -15,6 +15,8 @@
 
   export let label: string;
   export let value: Maybe<GetNetworkResult['chain']> = null;
+  export let switchWallet = false;
+  export let readOnly = false;
 
   let chainToIconMap: Record<string, ComponentType> = {
     [PUBLIC_L1_CHAIN_ID]: EthIcon,
@@ -31,6 +33,8 @@
   }
 
   function openModal() {
+    if (readOnly) return;
+
     // We want to inform the user that they need to connect
     // their wallet if they want to change the network
     if (!$account.isConnected) {
@@ -44,19 +48,26 @@
   async function selectChain(chain: Chain) {
     if (chain.id === value?.id) return;
 
-    switchingNetwork = true;
-
-    try {
-      await switchNetwork({ chainId: chain.id });
-      closeModal();
-    } catch (error) {
-      console.error(error);
-
-      if (error instanceof UserRejectedRequestError) {
-        warningToast($t('messages.network.rejected'));
+    if (switchWallet) {
+      // We want to switch the wallet to the selected network.
+      // This will trigger the network switch in the UI also
+      switchingNetwork = true;
+
+      try {
+        await switchNetwork({ chainId: chain.id });
+        closeModal();
+      } catch (error) {
+        console.error(error);
+
+        if (error instanceof UserRejectedRequestError) {
+          warningToast($t('messages.network.rejected'));
+        }
+      } finally {
+        switchingNetwork = false;
       }
-    } finally {
-      switchingNetwork = false;
+    } else {
+      value = chain;
+      closeModal();
     }
   }
 
@@ -77,6 +88,7 @@
     <button
       id={buttonId}
       type="button"
+      disabled={readOnly}
       aria-haspopup="dialog"
       aria-controls={dialogId}
       aria-expanded={modalOpen}
diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
index 9e2807da5e..c1348c80eb 100644
--- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
+++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
@@ -14,7 +14,7 @@
   import { MintableError, testERC20Tokens, type Token } from '$libs/token';
   import { checkMintable, mint } from '$libs/token';
   import { account } from '$stores/account';
-  import { srcChain } from '$stores/network';
+  import { network } from '$stores/network';
 
   let minting = false;
   let checkingMintable = false;
@@ -47,10 +47,10 @@
     if (checkingMintable || minting) return;
 
     // A token and a source chain must be selected in order to be able to mint
-    if (!selectedToken || !$srcChain) return;
+    if (!selectedToken || !$network) return;
 
     // ... and of course, our wallet must be connected
-    const walletClient = await getWalletClient({ chainId: $srcChain.id });
+    const walletClient = await getWalletClient({ chainId: $network.id });
     if (!walletClient) return;
 
     // Let's begin the minting process
@@ -131,16 +131,16 @@
   }
 
   $: connected = isUserConnected($account);
-  $: wrongChain = isWrongChain($srcChain);
+  $: wrongChain = isWrongChain($network);
   $: alertMessage = getAlertMessage(connected, wrongChain, reasonNotMintable);
 
-  $: updateMintButtonState(selectedToken, $srcChain);
+  $: updateMintButtonState(selectedToken, $network);
 </script>
 
 <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={$srcChain} />
+      <ChainSelector label={$t('chain_selector.currently_on')} value={$network} />
       <TokenDropdown tokens={testERC20Tokens} bind:value={selectedToken} />
     </div>
 
diff --git a/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte b/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte
index bb76215a77..88d3183aca 100644
--- a/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte
+++ b/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+
   import { classNames } from '$libs/util/classNames';
 
   export let mask = 'Loading';
 
-  let classes = classNames('animate-pulse blur-sm font-bold', $$props.class);
+  let maskElem: HTMLSpanElement;
+  let classes = classNames('animate-pulse rounded-md', $$props.class);
+
+  onMount(() => {
+    // The idea is to use same background color as text color
+    const textColor = globalThis.getComputedStyle(maskElem).getPropertyValue('color');
+    maskElem.style.backgroundColor = textColor;
+  });
 </script>
 
-<span class={classes}>{mask}</span>
+<span class={classes} bind:this={maskElem}>{mask}</span>
diff --git a/packages/bridge-ui-v2/src/components/LoadingText/index.ts b/packages/bridge-ui-v2/src/components/LoadingText/index.ts
index e69de29bb2..454dbe17cf 100644
--- a/packages/bridge-ui-v2/src/components/LoadingText/index.ts
+++ b/packages/bridge-ui-v2/src/components/LoadingText/index.ts
@@ -0,0 +1 @@
+export { default as LoadingText } from './LoadingText.svelte';
diff --git a/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte b/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte
new file mode 100644
index 0000000000..08fdbd6d34
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { noop } from 'svelte/internal';
+
+  import { type Account, account } from '$stores/account';
+
+  export let change: (newAccount: Account, oldAccount?: Account) => void = noop;
+
+  let prevAccount: Account;
+
+  account.subscribe((newAccount) => {
+    change(newAccount, prevAccount);
+    prevAccount = newAccount;
+  });
+</script>
diff --git a/packages/bridge-ui-v2/src/components/OnAccount/index.ts b/packages/bridge-ui-v2/src/components/OnAccount/index.ts
new file mode 100644
index 0000000000..fe9d67c246
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/OnAccount/index.ts
@@ -0,0 +1 @@
+export { default as OnAccount } from './OnAccount.svelte';
diff --git a/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte b/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte
new file mode 100644
index 0000000000..817897b6ec
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { noop } from 'svelte/internal';
+
+  import { type Network, network } from '$stores/network';
+
+  export let change: (newNetwork: Network, oldNetwork: Network) => void = noop;
+
+  let prevNetwork = $network;
+
+  network.subscribe((newNetwork) => {
+    change(newNetwork, prevNetwork);
+    prevNetwork = newNetwork;
+  });
+</script>
diff --git a/packages/bridge-ui-v2/src/components/OnNetwork/index.ts b/packages/bridge-ui-v2/src/components/OnNetwork/index.ts
new file mode 100644
index 0000000000..c47e6a5cdc
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/OnNetwork/index.ts
@@ -0,0 +1 @@
+export { default as OnNetwork } from './OnNetwork.svelte';
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index 433598fd69..cc9e3ca999 100644
--- a/packages/bridge-ui-v2/src/i18n/en.json
+++ b/packages/bridge-ui-v2/src/i18n/en.json
@@ -26,7 +26,8 @@
     },
     "none": {
       "label": "None",
-      "text": "Use ETH to manually claim your bridged token later"
+      "text": "Use ETH to manually claim your bridged token later",
+      "warning": "This option cannot be selected. You have not enough ETH to cover the gas fees for claiming."
     },
     "custom": {
       "label": "Custom",
diff --git a/packages/bridge-ui-v2/src/libs/chain/chains.ts b/packages/bridge-ui-v2/src/libs/chain/chains.ts
index ce029c5f9a..2779bff788 100644
--- a/packages/bridge-ui-v2/src/libs/chain/chains.ts
+++ b/packages/bridge-ui-v2/src/libs/chain/chains.ts
@@ -21,7 +21,7 @@ import {
 } from '$env/static/public';
 
 export const mainnetChain: Chain = {
-  id: +PUBLIC_L1_CHAIN_ID,
+  id: Number(PUBLIC_L1_CHAIN_ID),
   name: PUBLIC_L1_CHAIN_NAME,
   network: 'L1',
   nativeCurrency: {
@@ -42,7 +42,7 @@ export const mainnetChain: Chain = {
 };
 
 export const taikoChain: Chain = {
-  id: +PUBLIC_L2_CHAIN_ID,
+  id: Number(PUBLIC_L2_CHAIN_ID),
   name: PUBLIC_L2_CHAIN_NAME,
   network: 'L2',
   nativeCurrency: {
diff --git a/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts b/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
index 14bec1e5c9..8e0b088585 100644
--- a/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
+++ b/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
@@ -1,8 +1,42 @@
-export async function recommendProcessingFee(): Promise<number> {
-  // TODO: implement
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(0.000135);
-    }, 1000);
-  });
+import { getPublicClient } from '@wagmi/core';
+import { zeroAddress } from 'viem';
+
+import { recommentProcessingFee } from '$config';
+import { getAddress, isERC20, type Token } from '$libs/token';
+
+type RecommendProcessingFeeArgs = {
+  token: Token;
+  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();
+
+  // The gas limit for processMessage call for ETH is about ~800k.
+  // To make it enticing, we say 900k
+  let gasLimit = ethGasLimit;
+
+  if (isERC20(token)) {
+    if (!srcChainId) return BigInt(0);
+
+    const tokenAddress = await getAddress({ token, chainId: srcChainId, destChainId });
+
+    if (!tokenAddress || tokenAddress === zeroAddress) {
+      // Gas limit for erc20 if not deployed on the destination chain
+      // already is about ~2.9m, so we add some to make it enticing
+      gasLimit = erc20NotDeployedGasLimit;
+    } else {
+      // Gas limit for erc20 if already deployed on the destination chain is
+      // about ~1m, so again, add some to ensure processing
+      gasLimit = erc20DeployedGasLimit;
+    }
+  }
+
+  return gasPrice * gasLimit;
 }
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 d4f5756c77..4f7d8c55ee 100644
--- a/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts
@@ -26,25 +26,29 @@ describe('getAddress', () => {
   });
 
   it('should return undefined if no source chain id is passed in', async () => {
-    expect(await getAddress(ETHToken)).toBeUndefined();
+    expect(await getAddress({ token: ETHToken })).toBeUndefined();
   });
 
   it('should return the address if ETH', async () => {
-    expect(await getAddress(ETHToken, +PUBLIC_L1_CHAIN_ID)).toEqual(zeroAddress);
+    expect(await getAddress({ token: ETHToken, chainId: Number(PUBLIC_L1_CHAIN_ID) })).toEqual(zeroAddress);
   });
 
   it('should return the address if ERC20 and has address on the source chain', async () => {
-    expect(await getAddress(HORSEToken, +PUBLIC_L1_CHAIN_ID)).toEqual(HORSEToken.addresses[PUBLIC_L1_CHAIN_ID]);
+    expect(await getAddress({ token: HORSEToken, chainId: 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(HORSEToken, +PUBLIC_L2_CHAIN_ID)).toBeUndefined();
+    expect(await getAddress({ token: HORSEToken, chainId: 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(HORSEToken, +PUBLIC_L2_CHAIN_ID, +PUBLIC_L1_CHAIN_ID)).toEqual('0x456789');
+    expect(
+      await getAddress({ token: HORSEToken, chainId: Number(PUBLIC_L2_CHAIN_ID), destChainId: +PUBLIC_L1_CHAIN_ID }),
+    ).toEqual('0x456789');
     expect(mockTokenContract.read.canonicalToBridged).toHaveBeenCalledWith([
       BigInt(1),
       HORSEToken.addresses[PUBLIC_L1_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 2af61c2a6b..2417d7184b 100644
--- a/packages/bridge-ui-v2/src/libs/token/getAddress.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getAddress.ts
@@ -8,15 +8,21 @@ import { getLogger } from '$libs/util/logger';
 import { isETH } from './tokens';
 import type { Token } from './types';
 
+type GetAddressArgs = {
+  token: Token;
+  chainId?: number;
+  destChainId?: number;
+};
+
 const log = getLogger('token:getAddress');
 
-export async function getAddress(token: Token, srcChainId?: number, destChainId?: number) {
-  if (!srcChainId) return;
+export async function getAddress({ token, chainId, destChainId }: GetAddressArgs) {
+  if (!chainId) return;
 
   // Get the address for the token on the source chain
-  let address = token.addresses[srcChainId];
+  let address = token.addresses[chainId];
 
-  // If the token isn't ETH or has no address...
+  // If the token isn't ETH and has no address...
   if (!isETH(token) && (!address || address === zeroAddress)) {
     if (!destChainId) return;
 
@@ -31,7 +37,7 @@ export async function getAddress(token: Token, srcChainId?: number, destChainId?
     // cacnonicalToBridged mapping.
     const srcTokenVaultContract = getContract({
       abi: tokenVaultABI,
-      address: chainContractsMap[srcChainId].tokenVaultAddress,
+      address: chainContractsMap[chainId].tokenVaultAddress,
     });
 
     address = await srcTokenVaultContract.read.canonicalToBridged([BigInt(destChainId), destChainTokenAddress]);
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 98bd108b44..a6846bb2be 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,7 @@ describe('getBalance', () => {
   it('should return the balance of ETH', async () => {
     vi.mocked(fetchBalance).mockResolvedValueOnce(mockBalanceForETH);
 
-    const balance = await getBalance(ETHToken, mockWalletClient.account.address);
+    const balance = await getBalance({ token: ETHToken, userAddress: mockWalletClient.account.address });
 
     expect(balance).toEqual(mockBalanceForETH);
     expect(getAddress).not.toHaveBeenCalled();
@@ -54,13 +54,21 @@ describe('getBalance', () => {
     vi.mocked(getAddress).mockResolvedValueOnce(BLLToken.addresses[PUBLIC_L1_CHAIN_ID]);
     vi.mocked(fetchBalance).mockResolvedValueOnce(mockBalanceForBLL);
 
-    const balance = await getBalance(BLLToken, mockWalletClient.account.address, +PUBLIC_L1_CHAIN_ID);
+    const balance = await getBalance({
+      token: BLLToken,
+      userAddress: mockWalletClient.account.address,
+      chainId: Number(PUBLIC_L1_CHAIN_ID),
+    });
 
     expect(balance).toEqual(mockBalanceForBLL);
-    expect(getAddress).toHaveBeenCalledWith(BLLToken, +PUBLIC_L1_CHAIN_ID, undefined);
+    expect(getAddress).toHaveBeenCalledWith({
+      token: BLLToken,
+      chainId: Number(PUBLIC_L1_CHAIN_ID),
+      destChainId: undefined,
+    });
     expect(fetchBalance).toHaveBeenCalledWith({
       address: mockWalletClient.account.address,
-      chainId: +PUBLIC_L1_CHAIN_ID,
+      chainId: Number(PUBLIC_L1_CHAIN_ID),
       token: BLLToken.addresses[PUBLIC_L1_CHAIN_ID],
     });
   });
@@ -68,10 +76,18 @@ describe('getBalance', () => {
   it('should return null if the token address is not found', async () => {
     vi.mocked(getAddress).mockResolvedValueOnce(zeroAddress);
 
-    const balance = await getBalance(BLLToken, mockWalletClient.account.address, +PUBLIC_L1_CHAIN_ID);
+    const balance = await getBalance({
+      token: BLLToken,
+      userAddress: mockWalletClient.account.address,
+      chainId: Number(PUBLIC_L1_CHAIN_ID),
+    });
 
     expect(balance).toBeNull();
-    expect(getAddress).toHaveBeenCalledWith(BLLToken, +PUBLIC_L1_CHAIN_ID, undefined);
+    expect(getAddress).toHaveBeenCalledWith({
+      token: BLLToken,
+      chainId: Number(PUBLIC_L1_CHAIN_ID),
+      destChainId: undefined,
+    });
     expect(fetchBalance).not.toHaveBeenCalled();
   });
 });
diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
index cc6504ed3e..ebb974455e 100644
--- a/packages/bridge-ui-v2/src/libs/token/getBalance.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getBalance.ts
@@ -8,24 +8,32 @@ import { getAddress } from './getAddress';
 import { isETH } from './tokens';
 import type { Token } from './types';
 
+type GetBalanceArgs = {
+  token: Token;
+  userAddress: Address;
+  chainId?: number;
+  destChainId?: number;
+};
+
 const log = getLogger('token:getBalance');
 
-export async function getBalance(token: Token, userAddress: Address, srcChainId?: number, destChainId?: number) {
+export async function getBalance({ token, userAddress, chainId, destChainId }: GetBalanceArgs) {
   let tokenBalance: FetchBalanceResult | null = null;
 
   if (isETH(token)) {
-    tokenBalance = await fetchBalance({ address: userAddress });
+    tokenBalance = await fetchBalance({ address: userAddress, chainId });
   } else {
     // We are dealing with an ERC20 token. We need to first find out its address
     // on the current chain in order to fetch the balance.
-    const tokenAddress = await getAddress(token, srcChainId, destChainId);
+    const tokenAddress = await getAddress({ token, chainId, destChainId });
 
     if (!tokenAddress || tokenAddress === zeroAddress) return null;
 
-    // Wagmi is an excellent library 😊
+    // Wagmi is such an amazing library. We had to do this
+    // more manually before.
     tokenBalance = await fetchBalance({
+      chainId,
       address: userAddress,
-      chainId: srcChainId,
       token: tokenAddress,
     });
   }
diff --git a/packages/bridge-ui-v2/src/libs/util/parseToWei.ts b/packages/bridge-ui-v2/src/libs/util/parseToWei.ts
new file mode 100644
index 0000000000..3bd87c349a
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/parseToWei.ts
@@ -0,0 +1,7 @@
+import { parseUnits } from 'viem';
+
+import { ETHToken } from '$libs/token';
+
+export function parseToWei(strEther?: string) {
+  return parseUnits(strEther ?? '0', ETHToken.decimals);
+}
diff --git a/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts b/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts
index a52725551a..c4d29fb461 100644
--- a/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts
+++ b/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts
@@ -2,7 +2,7 @@ import { watchAccount, watchNetwork /*, watchPublicClient, watchWalletClient*/ }
 
 import { getLogger } from '$libs/util/logger';
 import { account } from '$stores/account';
-import { srcChain } from '$stores/network';
+import { network } from '$stores/network';
 
 const log = getLogger('wagmi:watcher');
 
@@ -19,7 +19,7 @@ export function startWatching() {
 
       // When we switch networks, we are actually selecting
       // the source chain.
-      srcChain.set(data.chain);
+      network.set(data.chain);
     });
 
     // Action for subscribing to account changes.
diff --git a/packages/bridge-ui-v2/src/stores/account.ts b/packages/bridge-ui-v2/src/stores/account.ts
index 3356bd0b84..8294dddaec 100644
--- a/packages/bridge-ui-v2/src/stores/account.ts
+++ b/packages/bridge-ui-v2/src/stores/account.ts
@@ -1,4 +1,6 @@
 import type { GetAccountResult, PublicClient } from '@wagmi/core';
 import { writable } from 'svelte/store';
 
-export const account = writable<GetAccountResult<PublicClient>>();
+export type Account = GetAccountResult<PublicClient>;
+
+export const account = writable<Account>();
diff --git a/packages/bridge-ui-v2/src/stores/index.ts b/packages/bridge-ui-v2/src/stores/index.ts
new file mode 100644
index 0000000000..4b6b85801e
--- /dev/null
+++ b/packages/bridge-ui-v2/src/stores/index.ts
@@ -0,0 +1,2 @@
+export { account } from './account';
+export { network } from './network';
diff --git a/packages/bridge-ui-v2/src/stores/network.ts b/packages/bridge-ui-v2/src/stores/network.ts
index a4e6a81ed6..03422c681b 100644
--- a/packages/bridge-ui-v2/src/stores/network.ts
+++ b/packages/bridge-ui-v2/src/stores/network.ts
@@ -1,6 +1,6 @@
 import type { GetNetworkResult } from '@wagmi/core';
 import { writable } from 'svelte/store';
 
-export const srcChain = writable<GetNetworkResult['chain']>();
+export type Network = GetNetworkResult['chain'];
 
-export const destChain = writable<GetNetworkResult['chain']>();
+export const network = writable<Network>();
diff --git a/packages/bridge-ui-v2/tsconfig.json b/packages/bridge-ui-v2/tsconfig.json
index 112aee87f8..dbd0fda826 100644
--- a/packages/bridge-ui-v2/tsconfig.json
+++ b/packages/bridge-ui-v2/tsconfig.json
@@ -15,6 +15,8 @@
     "paths": {
       "$components/*": ["./src/components/*"],
       "$stores/*": ["./src/stores/*"],
+      "$stores": ["./src/stores/index.ts"],
+      "$config": ["./src/app.config.ts"],
       "$libs/*": ["./src/libs/*"],
       "$abi": ["./src/abi/index.ts"]
     },