From c85e1629d0b9b544880f65f0e4050456579c87d1 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:17:45 +0200
Subject: [PATCH] feat(bridge-ui-v2): manual NFT import step (#14842)

---
 .../bridge-ui-v2/__mocks__/@wagmi/core.ts     |   4 +
 packages/bridge-ui-v2/src/app.config.ts       |   4 +
 .../{ => AddressInput}/AddressInput.svelte    |  65 +++--
 .../components/Bridge/AddressInput/state.ts   |   7 +
 .../src/components/Bridge/Amount.svelte       |   2 +-
 .../src/components/Bridge/Bridge.svelte       | 247 ++++++++++++++----
 .../src/components/Bridge/BridgeTabs.svelte   |   4 +-
 .../src/components/Bridge/IDInput.svelte      |  58 ++++
 .../src/components/Bridge/Recipient.svelte    |   4 +-
 .../ChainSelector/ChainSelectorWrapper.svelte |   9 +-
 .../TokenDropdown/AddCustomERC20.svelte       |  11 +-
 packages/bridge-ui-v2/src/i18n/en.json        |  19 +-
 .../bridge-ui-v2/src/libs/error/errors.ts     |   4 +
 .../src/libs/fee/recommendProcessingFee.ts    |  47 +++-
 .../src/libs/token/checkOwnership.test.ts     |  94 +++++++
 .../src/libs/token/checkOwnership.ts          |  70 +++++
 .../src/libs/token/detectContractType.test.ts |  85 ++++++
 .../src/libs/token/detectContractType.ts      | 118 +++++----
 .../src/libs/token/getTokenInfo.test.ts       |  86 ++++++
 .../src/libs/token/getTokenInfo.ts            |  49 ++++
 packages/bridge-ui-v2/src/libs/token/types.ts |   4 +-
 21 files changed, 835 insertions(+), 156 deletions(-)
 rename packages/bridge-ui-v2/src/components/Bridge/{ => AddressInput}/AddressInput.svelte (59%)
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
 create mode 100644 packages/bridge-ui-v2/src/components/Bridge/IDInput.svelte
 create mode 100644 packages/bridge-ui-v2/src/libs/token/checkOwnership.test.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/checkOwnership.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/detectContractType.test.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/getTokenInfo.test.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/token/getTokenInfo.ts

diff --git a/packages/bridge-ui-v2/__mocks__/@wagmi/core.ts b/packages/bridge-ui-v2/__mocks__/@wagmi/core.ts
index 88658482f17..0700d6c0cd0 100644
--- a/packages/bridge-ui-v2/__mocks__/@wagmi/core.ts
+++ b/packages/bridge-ui-v2/__mocks__/@wagmi/core.ts
@@ -10,6 +10,10 @@ export const getContract = vi.fn();
 
 export const fetchBalance = vi.fn();
 
+export const fetchToken = vi.fn();
+
+export const readContract = vi.fn();
+
 export const configureChains = vi.fn(() => {
   return { publicClient: 'mockPublicClient' };
 });
diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts
index fa68452bea8..6f833e2df84 100644
--- a/packages/bridge-ui-v2/src/app.config.ts
+++ b/packages/bridge-ui-v2/src/app.config.ts
@@ -2,6 +2,10 @@ export const recommentProcessingFee = {
   ethGasLimit: BigInt(900_000),
   erc20NotDeployedGasLimit: BigInt(3_100_000),
   erc20DeployedGasLimit: BigInt(1_100_000),
+  erc721NotDeployedGasLimit: BigInt(3_400_000),
+  erc721DeployedGasLimit: BigInt(1_100_000),
+  erc1155NotDeployedGasLimit: BigInt(4_000_000),
+  erc1155DeployedGasLimit: BigInt(1_100_000),
 };
 
 export const processingFeeComponent = {
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte
similarity index 59%
rename from packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte
rename to packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte
index be417f388d9..88d058e2615 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte
@@ -8,22 +8,33 @@
   import { Icon } from '$components/Icon';
   import { uid } from '$libs/util/uid';
 
-  enum State {
-    Valid = 'valid',
-    Invalid = 'invalid',
-    TooShort = 'too_short',
-  }
+  import { AddressInputState as State } from './state';
+
+  export let ethereumAddress: Address | string = '';
+  export let labelText = $t('inputs.address_input.label.default');
+  export let isDisabled = false;
+  export let quiet = false;
+  export let state: State = State.Default;
+
+  export const validateAddress = () => {
+    validateEthereumAddress(ethereumAddress);
+  };
+
+  export const clearAddress = () => {
+    if (input) input.value = '';
+    validateEthereumAddress('');
+  };
+
+  export const focus = () => input.focus();
 
   let input: HTMLInputElement;
   let inputId = `input-${uid()}`;
-  let state: State;
-
-  export let ethereumAddress: Address | string = '';
 
   const dispatch = createEventDispatcher();
 
   const validateEthereumAddress = (address: string | EventTarget | null) => {
     let addr: string;
+    if (!address) return;
 
     if (address && address instanceof EventTarget) {
       addr = (address as HTMLInputElement).value;
@@ -49,41 +60,37 @@
   };
 
   $: validateEthereumAddress(ethereumAddress);
-
-  export const clear = () => {
-    input.value = '';
-    validateEthereumAddress('');
-  };
-
-  export const focus = () => input.focus();
 </script>
 
 <div class="f-col space-y-2">
   <div class="f-between-center text-secondary-content">
-    <label class="body-regular" for={inputId}>{$t('inputs.address_input.label')}</label>
+    <label class="body-regular" for={inputId}>{labelText}</label>
   </div>
   <div class="relative f-items-center">
     <input
-      bind:this={input}
       id={inputId}
+      disabled={isDisabled}
       type="string"
       placeholder="0x1B77..."
       bind:value={ethereumAddress}
       on:input={(e) => validateEthereumAddress(e.target)}
-      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content
-      {state === State.Valid ? 'success' : ethereumAddress ? 'error' : ''}
+      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {$$props.class}
+      {state === State.Valid ? 'success' : ethereumAddress && state !== State.Validating ? 'error' : ''}
       " />
-    <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clear}>
+    <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clearAddress}>
       <Icon type="x-close-circle" fillClass="fill-primary-icon" size={24} />
     </button>
   </div>
 </div>
-<div class="mt-5 min-h-[20px]">
-  {#if state === State.Invalid && ethereumAddress}
-    <FlatAlert type="error" forceColumnFlow message={$t('inputs.address_input.errors.invalid')} />
-  {:else if state === State.TooShort && ethereumAddress}
-    <FlatAlert type="warning" forceColumnFlow message={$t('inputs.address_input.errors.too_short')} />
-  {:else if state === State.Valid}
-    <FlatAlert type="success" forceColumnFlow message={$t('inputs.address_input.success')} />
-  {/if}
-</div>
+
+{#if !quiet}
+  <div class="min-h-[20px] !mt-3">
+    {#if state === State.Invalid && ethereumAddress}
+      <FlatAlert type="error" forceColumnFlow message={$t('inputs.address_input.errors.invalid')} />
+    {:else if state === State.TooShort && ethereumAddress}
+      <FlatAlert type="warning" forceColumnFlow message={$t('inputs.address_input.errors.too_short')} />
+    {:else if state === State.Valid}
+      <FlatAlert type="success" forceColumnFlow message={$t('inputs.address_input.success')} />
+    {/if}
+  </div>
+{/if}
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
new file mode 100644
index 00000000000..5ba71e8ea8c
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
@@ -0,0 +1,7 @@
+export enum AddressInputState {
+  Default = 'default',
+  Valid = 'valid',
+  Invalid = 'invalid',
+  TooShort = 'too_short',
+  Validating = 'validating',
+}
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
index 355321307f1..b979f82a4cc 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
@@ -43,7 +43,7 @@
 
   // Public API
   export function clearAmount() {
-    inputBox.clear();
+    inputBox?.clear();
     $enteredAmount = BigInt(0);
   }
 
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
index 8bae4c9b842..e27a64774a7 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+  import { onDestroy, tick } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { TransactionExecutionError, UserRejectedRequestError } from 'viem';
+  import { type Address, TransactionExecutionError, UserRejectedRequestError } from 'viem';
 
   import { routingContractsMap } from '$bridgeConfig';
   import { chainConfig } from '$chainConfig';
@@ -32,7 +33,9 @@
     SendMessageError,
   } from '$libs/error';
   import { bridgeTxService } from '$libs/storage';
-  import { ETHToken, getAddress, isDeployedCrossChain, tokens, TokenType } from '$libs/token';
+  import { ETHToken, getAddress, isDeployedCrossChain, type Token, tokens, TokenType } from '$libs/token';
+  import { checkOwnership } from '$libs/token/checkOwnership';
+  import { getTokenInfoFromAddress } from '$libs/token/getTokenInfo';
   import { refreshUserBalance } from '$libs/util/balance';
   import { getConnectedWallet } from '$libs/util/getConnectedWallet';
   import { type Account, account } from '$stores/account';
@@ -40,13 +43,16 @@
   import { pendingTransactions } from '$stores/pendingTransactions';
 
   import Actions from './Actions.svelte';
+  import AddressInput from './AddressInput/AddressInput.svelte';
+  import { AddressInputState } from './AddressInput/state';
   import Amount from './Amount.svelte';
+  import IdInput from './IDInput.svelte';
   import { ProcessingFee } from './ProcessingFee';
   import Recipient from './Recipient.svelte';
   import {
     activeBridge,
     bridgeService,
-    destNetwork,
+    destNetwork as destinationChain,
     enteredAmount,
     processingFee,
     recipientAddress,
@@ -54,41 +60,50 @@
   } from './state';
   import { BridgeTypes, NFTSteps } from './types';
 
-  let activeStep: NFTSteps = NFTSteps.IMPORT;
   let amountComponent: Amount;
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
 
   function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
+    tick().then(() => {
+      // run validations again
+      runValidations();
+    });
+
     if (newNetwork) {
-      const destChainId = $destNetwork?.id;
-      if (!$destNetwork?.id) return;
+      const destChainId = $destinationChain?.id;
+      if (!$destinationChain?.id) return;
       // determine if we simply swapped dest and src networks
       if (newNetwork.id === destChainId) {
-        destNetwork.set(oldNetwork);
+        destinationChain.set(oldNetwork);
         return;
       }
       // check if the new network has a bridge to the current dest network
-      if (hasBridge(newNetwork.id, $destNetwork?.id)) {
-        destNetwork.set(oldNetwork);
+      if (hasBridge(newNetwork.id, $destinationChain?.id)) {
+        destinationChain.set(oldNetwork);
       } else {
         // if not, set dest network to null
-        $destNetwork = null;
+        $destinationChain = null;
       }
     }
   }
 
+  const runValidations = () => {
+    if (amountComponent) amountComponent.validateAmount();
+    if (addressInputComponent) addressInputComponent.validateAddress();
+  };
+
   function onAccountChange(account: Account) {
     if (account && account.isConnected && !$selectedToken) {
       $selectedToken = ETHToken;
     } else if (account && account.isDisconnected) {
       $selectedToken = null;
-      $destNetwork = null;
+      $destinationChain = null;
     }
   }
 
   async function approve() {
-    if (!$selectedToken || !$network || !$destNetwork) return;
+    if (!$selectedToken || !$network || !$destinationChain) return;
 
     const erc20Bridge = bridges.ERC20 as ERC20Bridge;
 
@@ -98,14 +113,14 @@
       const tokenAddress = await getAddress({
         token: $selectedToken,
         srcChainId: $network.id,
-        destChainId: $destNetwork.id,
+        destChainId: $destinationChain.id,
       });
 
       if (!tokenAddress) {
         throw new Error('token address not found');
       }
 
-      const spenderAddress = routingContractsMap[$network.id][$destNetwork.id].erc20VaultAddress;
+      const spenderAddress = routingContractsMap[$network.id][$destinationChain.id].erc20VaultAddress;
 
       const txHash = await erc20Bridge.approve({
         tokenAddress,
@@ -161,7 +176,7 @@
   }
 
   async function bridge() {
-    if (!$bridgeService || !$selectedToken || !$network || !$destNetwork || !$account?.address) return;
+    if (!$bridgeService || !$selectedToken || !$network || !$destinationChain || !$account?.address) return;
 
     try {
       const walletClient = await getConnectedWallet($network.id);
@@ -171,7 +186,7 @@
         to: $recipientAddress || $account.address,
         wallet: walletClient,
         srcChainId: $network.id,
-        destChainId: $destNetwork.id,
+        destChainId: $destinationChain.id,
         amount: $enteredAmount,
         fee: $processingFee,
       } as BridgeArgs;
@@ -180,7 +195,7 @@
         case TokenType.ETH: {
           // Specific arguments for ETH bridge:
           // - bridgeAddress
-          const bridgeAddress = routingContractsMap[$network.id][$destNetwork.id].bridgeAddress;
+          const bridgeAddress = routingContractsMap[$network.id][$destinationChain.id].bridgeAddress;
           bridgeArgs = { ...bridgeArgs, bridgeAddress } as ETHBridgeArgs;
           break;
         }
@@ -193,19 +208,19 @@
           const tokenAddress = await getAddress({
             token: $selectedToken,
             srcChainId: $network.id,
-            destChainId: $destNetwork.id,
+            destChainId: $destinationChain.id,
           });
 
           if (!tokenAddress) {
             throw new Error('token address not found');
           }
 
-          const tokenVaultAddress = routingContractsMap[$network.id][$destNetwork.id].erc20VaultAddress;
+          const tokenVaultAddress = routingContractsMap[$network.id][$destinationChain.id].erc20VaultAddress;
 
           const isTokenAlreadyDeployed = await isDeployedCrossChain({
             token: $selectedToken,
             srcChainId: $network.id,
-            destChainId: $destNetwork.id,
+            destChainId: $destinationChain.id,
           });
 
           bridgeArgs = {
@@ -244,7 +259,7 @@
       successToast(
         $t('bridge.actions.bridge.success', {
           values: {
-            network: $destNetwork.name,
+            network: $destinationChain.name,
           },
         }),
       );
@@ -257,7 +272,7 @@
         symbol: $selectedToken.symbol,
         decimals: $selectedToken.decimals,
         srcChainId: BigInt($network.id),
-        destChainId: BigInt($destNetwork.id),
+        destChainId: BigInt($destinationChain.id),
         tokenType: $selectedToken.type,
         status: MessageStatus.NEW,
         timestamp: Date.now(),
@@ -270,13 +285,8 @@
 
       bridgeTxService.addTxByAddress($account.address, bridgeTx);
 
-      // Reset the form (we check if these are still mounted, as the user might have left the page)
-      if (amountComponent) amountComponent.clearAmount();
-      if (recipientComponent) recipientComponent.clearRecipient();
-      if (processingFeeComponent) processingFeeComponent.resetProcessingFee();
-
-      // Update balance after bridging
-      if (amountComponent) amountComponent.updateBalance();
+      // Reset the form
+      resetForm();
 
       // Refresh user's balance
       refreshUserBalance();
@@ -309,21 +319,108 @@
     }
   }
 
+  $: if ($selectedToken && amountComponent) {
+    amountComponent.validateAmount();
+  }
+
+  const resetForm = () => {
+    //we check if these are still mounted, as the user might have left the page
+    if (amountComponent) amountComponent.clearAmount();
+    if (recipientComponent) recipientComponent.clearRecipient();
+    if (processingFeeComponent) processingFeeComponent.resetProcessingFee();
+    if (addressInputComponent) addressInputComponent.clearAddress();
+
+    // Update balance after bridging
+    if (amountComponent) amountComponent.updateBalance();
+    if (nftIdInputComponent) nftIdInputComponent.clearIds();
+    $selectedToken = ETHToken;
+    contractAddress = '';
+  };
+
+  // NFT Bridge logic
+  let activeStep: NFTSteps = NFTSteps.IMPORT;
+
   const nextStep = () => (activeStep = Math.min(activeStep + 1, NFTSteps.CONFIRM));
-  const back = () => (activeStep = Math.max(activeStep - 1, NFTSteps.IMPORT));
+  const previousStep = () => (activeStep = Math.max(activeStep - 1, NFTSteps.IMPORT));
 
   let nftStepTitle: string;
   let nftStepDescription: string;
+  let nftIdArray: number[];
+  let enteredIds: string = '';
+  let contractAddress: Address | '';
+  let addressInputComponent: AddressInput;
+  let nftIdInputComponent: IdInput;
+  let addressInputState: AddressInputState = AddressInputState.Default;
+  let isOwnerOfAllToken: boolean = false;
+  let validating: boolean = false;
+  let detectedTokenType: TokenType | null = null;
+
+  function onAddressValidation(event: CustomEvent<{ isValidEthereumAddress: boolean; addr: Address }>) {
+    const { isValidEthereumAddress, addr } = event.detail;
+    addressInputState = AddressInputState.Validating;
+
+    if (isValidEthereumAddress && typeof addr === 'string') {
+      getTokenInfoFromAddress(addr)
+        .then((details) => {
+          if (!details) throw new Error('token details not found');
+          if (!$network?.id) throw new Error('network not found');
+
+          detectedTokenType = details.type;
+          addressInputState = AddressInputState.Valid;
+
+          $selectedToken = {
+            type: details.type,
+            symbol: details.symbol,
+            decimals: details.decimals,
+            name: details.name,
+            logoURI: '',
+            addresses: {
+              [$network.id]: addr,
+            },
+          } as Token;
+        })
+        .catch((err) => {
+          console.error(err);
+          detectedTokenType = null;
+          addressInputState = AddressInputState.Invalid;
+        });
+    } else {
+      detectedTokenType = null;
+      addressInputState = AddressInputState.Invalid;
+    }
+  }
+
+  // Whenever the user switches bridge types, we should reset the forms
+  $: $activeBridge && resetForm();
 
   $: {
-    const stepKey = NFTSteps[activeStep].toLowerCase(); // Convert enum to string and to lowercase
-    nftStepTitle = $t(`bridge.title.nft.${stepKey}`);
-    nftStepDescription = $t(`bridge.description.nft.${stepKey}`);
+    (async () => {
+      if (addressInputState !== AddressInputState.Valid) return;
+      if (contractAddress === '') return;
+      validating = true;
+
+      if ($account?.address && $network?.id && contractAddress)
+        isOwnerOfAllToken = await checkOwnership(
+          contractAddress,
+          detectedTokenType,
+          nftIdArray,
+          $account?.address,
+          $network?.id,
+        );
+      validating = false;
+    })();
   }
 
-  $: if ($selectedToken && amountComponent) {
-    amountComponent.validateAmount();
-  }
+  $: canProceed =
+    addressInputState === AddressInputState.Valid &&
+    nftIdArray.length > 0 &&
+    contractAddress &&
+    $destinationChain &&
+    isOwnerOfAllToken;
+
+  onDestroy(() => {
+    resetForm();
+  });
 </script>
 
 {#if $activeBridge === BridgeTypes.FUNGIBLE}
@@ -334,9 +431,7 @@
       </div>
 
       <TokenDropdown {tokens} bind:value={$selectedToken} />
-      {#if $selectedToken?.symbol === 'BLL' && !$selectedToken?.imported}
-        <FlatAlert class="!mt-2" message={$t('bridge.errors.bll_token')} type="warning" />
-      {/if}
+
       <Amount bind:this={amountComponent} />
 
       <div class="space-y-[16px]">
@@ -361,13 +456,73 @@
     </Stepper>
 
     <Card class="mt-[32px] w-full md:w-[524px]" title={nftStepTitle} text={nftStepDescription}>
-      <div class="f-between-center w-full gap-4">
-        <Button type="primary" class="px-[28px] py-[14px] rounded-full flex-1 text-white" on:click={back}
-          >Previous Step</Button>
-        <Button type="primary" class="px-[28px] py-[14px] rounded-full flex-1 text-white" on:click={nextStep}
-          >Next Step</Button>
-      </div>
-    </Card>
+      <div class="space-y-[30px]">
+        {#if activeStep === NFTSteps.IMPORT}
+          <div class="f-between-center gap-4">
+            <ChainSelectorWrapper />
+          </div>
+          <AddressInput
+            bind:this={addressInputComponent}
+            bind:ethereumAddress={contractAddress}
+            bind:state={addressInputState}
+            class="bg-neutral-background border-0 h-[56px]"
+            on:addressvalidation={onAddressValidation}
+            labelText={$t('inputs.address_input.label.contract')}
+            quiet />
+
+          <div class="min-h-[20px] !mt-3">
+            {#if detectedTokenType === TokenType.ERC721 && contractAddress}
+              <FlatAlert type="success" forceColumnFlow message="todo: valid erc721" />
+            {:else if detectedTokenType === TokenType.ERC1155 && contractAddress}
+              <FlatAlert type="success" forceColumnFlow message="todo: valid erc1155" />
+            {/if}
+
+            <IdInput
+              bind:this={nftIdInputComponent}
+              bind:enteredIds
+              bind:numbersArray={nftIdArray}
+              class="bg-neutral-background border-0 h-[56px]" />
+            <div class="min-h-[20px] !mt-3">
+              {#if !isOwnerOfAllToken && nftIdArray?.length > 0 && !validating}
+                <FlatAlert type="error" forceColumnFlow message="todo: must be owner of all token" />
+              {/if}
+            </div>
+
+            {#if detectedTokenType === TokenType.ERC1155}
+              <Amount bind:this={amountComponent} />
+            {/if}
+          </div>
+        {:else if activeStep === NFTSteps.REVIEW}
+          <div class="f-between-center gap-4">
+            <div class="f-col">
+              <p>Contract: {contractAddress}</p>
+              <p>IDs: {nftIdArray.join(', ')}</p>
+            </div>
+          </div>
+        {:else if activeStep === NFTSteps.CONFIRM}
+          <div class="f-between-center gap-4">
+            <ChainSelectorWrapper />
+          </div>
+        {/if}
+        <div class="space-y-[16px]">
+          <Recipient bind:this={recipientComponent} />
+          <ProcessingFee bind:this={processingFeeComponent} />
+        </div>
+        <div class="h-sep" />
+        <div class="f-between-center w-full gap-4">
+          {#if activeStep !== NFTSteps.IMPORT}
+            <Button
+              type="secondary"
+              class="px-[28px] py-[14px] rounded-full flex-1 text-secondary-content"
+              on:click={previousStep}>Previous Step</Button>
+          {/if}
+          <Button
+            disabled={!canProceed}
+            type="primary"
+            class="px-[28px] py-[14px] rounded-full flex-1 text-white"
+            on:click={nextStep}>Next Step</Button>
+        </div>
+      </div></Card>
   </div>
 {/if}
 
diff --git a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte
index 9a8115cc7bb..a055db56825 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte
@@ -20,13 +20,13 @@
 {#if PUBLIC_NFT_BRIDGE_ENABLED === 'true'}
   <div class={classes}>
     <button
-      class="{isERC20Bridge ? 'btn-primary' : 'btn-ghost'} px-[28px] py-[14px] rounded-full text-white"
+      class="{isERC20Bridge ? 'btn-primary' : 'btn-ghost'} h-[40px] px-[28px] rounded-full text-white"
       on:click={() => onBridgeClick(BridgeTypes.FUNGIBLE)}>
       <span> {$t('nav.token')}</span>
     </button>
 
     <button
-      class="{isNFTBridge ? 'btn-primary' : 'btn-ghost'}  h-[44px] px-[28px] py-[14px] rounded-full text-white"
+      class="{isNFTBridge ? 'btn-primary' : 'btn-ghost'}  h-[40px] px-[28px] rounded-full text-white"
       on:click={() => onBridgeClick(BridgeTypes.NFT)}>
       <span> {$t('nav.nft')}</span>
     </button>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/IDInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/IDInput.svelte
new file mode 100644
index 00000000000..6828c020c28
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/IDInput.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  import { Icon } from '$components/Icon';
+  import { uid } from '$libs/util/uid';
+
+  export let numbersArray: number[] = [];
+  export let isDisabled = false;
+  export let enteredIds: string = '';
+
+  export const clearIds = () => {
+    enteredIds = '';
+    numbersArray = [];
+    dispatch('input', { enteredIds, numbersArray });
+  };
+
+  const dispatch = createEventDispatcher();
+
+  let inputId = `input-${uid()}`;
+
+  function validateInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    enteredIds = target.value.replace(/\s+/g, '');
+    dispatch('input', { enteredIds, numbersArray });
+  }
+
+  $: {
+    enteredIds = enteredIds.replace(/\s+/g, '');
+    if (enteredIds === '' || enteredIds.endsWith(',')) {
+      numbersArray = [];
+    } else {
+      const inputArray = enteredIds.split(',');
+      const isValid = inputArray.every((item) => /^[0-9]+$/.test(item));
+      numbersArray = isValid ? inputArray.map((num) => parseInt(num)).filter(Boolean) : [];
+    }
+  }
+</script>
+
+<div class="f-col space-y-2">
+  <div class="f-between-center text-secondary-content">
+    <label class="body-regular" for={inputId}>{$t('inputs.token_id_input.label')}</label>
+  </div>
+  <div class="relative f-items-center">
+    <input
+      id={inputId}
+      disabled={isDisabled}
+      type="text"
+      placeholder={$t('inputs.token_id_input.placeholder')}
+      bind:value={enteredIds}
+      on:input={validateInput}
+      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {$$props.class}" />
+    <!-- /*state === State.Valid ? 'success' : state === State.Invalid ? 'error' : ''  -->
+    <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clearIds}>
+      <Icon type="x-close-circle" fillClass="fill-primary-icon" size={24} />
+    </button>
+  </div>
+</div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
index f406f92e1bf..83e186b6f73 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -10,12 +10,12 @@
   import { uid } from '$libs/util/uid';
   import { account } from '$stores/account';
 
-  import AddressInput from './AddressInput.svelte';
+  import AddressInput from './AddressInput/AddressInput.svelte';
   import { recipientAddress } from './state';
 
   // Public API
   export const clearRecipient = () => {
-    addressInput.clear(); // update UI
+    addressInput.clearAddress(); // update UI
     $recipientAddress = null; // update state
   };
 
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelectorWrapper.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelectorWrapper.svelte
index 422c28de329..4f851492f0b 100644
--- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelectorWrapper.svelte
+++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelectorWrapper.svelte
@@ -10,6 +10,8 @@
   import { chainIdToChain, chains } from '$libs/chain';
   import { network } from '$stores/network';
 
+  let destChainElement: ChainSelector;
+
   function handleSourceChange(): void {
     updateDestOptions();
   }
@@ -62,6 +64,11 @@
 
 <SwitchChainsButton />
 
-<ChainSelector class="flex-1" bind:value={$destNetwork} on:change={handleDestChange} validOptions={$destOptions} />
+<ChainSelector
+  bind:this={destChainElement}
+  class="flex-1 "
+  bind:value={$destNetwork}
+  on:change={handleDestChange}
+  validOptions={$destOptions} />
 
 <OnNetwork change={onNetworkChange} />
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
index 7ff29467023..746f351a65d 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
   import { erc20ABI, getNetwork, readContract } from '@wagmi/core';
-  import { fetchToken } from '@wagmi/core';
   import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
   import { formatUnits } from 'viem';
 
   import { FlatAlert } from '$components/Alert';
-  import AddressInput from '$components/Bridge/AddressInput.svelte';
+  import AddressInput from '$components/Bridge/AddressInput/AddressInput.svelte';
   import { Button } from '$components/Button';
   import { Icon } from '$components/Icon';
   import Erc20 from '$components/Icon/ERC20.svelte';
   import { Spinner } from '$components/Spinner';
   import { tokenService } from '$libs/storage/services';
-  import { type GetCrossChainAddressArgs, type Token, type TokenEnv, TokenType } from '$libs/token';
+  import { type GetCrossChainAddressArgs, type Token, type TokenDetails, TokenType } from '$libs/token';
   import { getCrossChainAddress } from '$libs/token/getCrossChainAddress';
+  import { getTokenInfoFromAddress } from '$libs/token/getTokenInfo';
   import { getLogger } from '$libs/util/logger';
   import { uid } from '$libs/util/uid';
   import { account } from '$stores/account';
@@ -30,7 +30,7 @@
   export let loading = false;
   export let loadingTokenDetails = false;
 
-  let tokenDetails: (TokenEnv & { balance: bigint; decimals: number }) | null;
+  let tokenDetails: TokenDetails | null;
   let tokenError = '';
   let tokenAddress: Address | string = '';
   let customTokens: Token[] = [];
@@ -101,7 +101,8 @@
     log('Fetching token details for address "%s"…', tokenAddress);
     tokenError = 'unchecked';
     try {
-      const tokenInfo = await fetchToken({ address: tokenAddress as Address });
+      const tokenInfo = await getTokenInfoFromAddress(tokenAddress as Address);
+      if (!tokenInfo) return;
       const balance = await readContract({
         address: tokenAddress as Address,
         abi: erc20ABI,
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index 30a43e07607..407594b0f85 100644
--- a/packages/bridge-ui-v2/src/i18n/en.json
+++ b/packages/bridge-ui-v2/src/i18n/en.json
@@ -206,18 +206,23 @@
     }
   },
   "inputs": {
-    "nft": {
-      "token_id": {
-        "label": "Token ID(s)",
-        "placeholder": "1 or 5,14,733"
+    "token_id_input": {
+      "label": "Token ID(s)",
+      "placeholder": "1 or 5,14,733",
+      "errors": {
+        "invalid": "Not a valid numeric value"
       }
     },
     "address_input": {
-      "label": "Address",
-      "placeholder": "Enter an address",
+      "label": {
+        "default": "Address",
+        "contract": "Contract address",
+        "recipient": "Recipient address"
+      },
+      "placeholder": "Enter a valid ethereum address",
       "errors": {
         "invalid": "Invalid address format",
-        "too_short": "Address length is too short"
+        "too_short": "Address is too short"
       },
       "success": "Valid address format"
     },
diff --git a/packages/bridge-ui-v2/src/libs/error/errors.ts b/packages/bridge-ui-v2/src/libs/error/errors.ts
index 8fcec9e60ab..adf92f49604 100644
--- a/packages/bridge-ui-v2/src/libs/error/errors.ts
+++ b/packages/bridge-ui-v2/src/libs/error/errors.ts
@@ -81,3 +81,7 @@ export class RetryError extends Error {
 export class ReleaseError extends Error {
   name = 'ReleaseError';
 }
+
+export class UnknownTokenTypeError extends Error {
+  name = 'UnknownTokenTypeError';
+}
diff --git a/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts b/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
index ce640858147..9b81ff4e7e6 100644
--- a/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
+++ b/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts
@@ -12,9 +12,20 @@ type RecommendProcessingFeeArgs = {
   srcChainId?: number;
 };
 
-const { ethGasLimit, erc20NotDeployedGasLimit, erc20DeployedGasLimit } = recommentProcessingFee;
+const {
+  ethGasLimit,
+  erc20NotDeployedGasLimit,
+  erc20DeployedGasLimit,
+  erc1155DeployedGasLimit,
+  erc1155NotDeployedGasLimit,
+  erc721DeployedGasLimit,
+  erc721NotDeployedGasLimit,
+} = recommentProcessingFee;
 
 export async function recommendProcessingFee({ token, destChainId, srcChainId }: RecommendProcessingFeeArgs) {
+  if (!srcChainId) {
+    throw Error('missing required source chain');
+  }
   const destPublicClient = getPublicClient({ chainId: destChainId });
   // getGasPrice will return gasPrice as 3000000001, rather than 3000000000
   const gasPrice = await destPublicClient.getGasPrice();
@@ -24,10 +35,6 @@ export async function recommendProcessingFee({ token, destChainId, srcChainId }:
   let gasLimit = ethGasLimit;
 
   if (token.type === TokenType.ERC20) {
-    if (!srcChainId) {
-      throw Error('missing required source chain for ERC20 token');
-    }
-
     const isTokenAlreadyDeployed = await isDeployedCrossChain({
       token,
       srcChainId,
@@ -35,16 +42,38 @@ export async function recommendProcessingFee({ token, destChainId, srcChainId }:
     });
 
     if (isTokenAlreadyDeployed) {
-      // Gas limit for erc20 if already deployed on the destination chain is
-      // about ~1m, so again, add some to ensure processing
       gasLimit = erc20DeployedGasLimit;
       log(`token ${token.symbol} is already deployed on chain ${destChainId}`);
     } else {
-      // 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;
       log(`token ${token.symbol} is not deployed on chain ${destChainId}`);
     }
+  } else if (token.type === TokenType.ERC721) {
+    const isTokenAlreadyDeployed = await isDeployedCrossChain({
+      token,
+      srcChainId,
+      destChainId,
+    });
+    if (isTokenAlreadyDeployed) {
+      gasLimit = erc721DeployedGasLimit;
+      log(`token ${token.symbol} is already deployed on chain ${destChainId}`);
+    } else {
+      gasLimit = erc721NotDeployedGasLimit;
+      log(`token ${token.symbol} is not deployed on chain ${destChainId}`);
+    }
+  } else if (token.type === TokenType.ERC1155) {
+    const isTokenAlreadyDeployed = await isDeployedCrossChain({
+      token,
+      srcChainId,
+      destChainId,
+    });
+    if (isTokenAlreadyDeployed) {
+      gasLimit = erc1155DeployedGasLimit;
+      log(`token ${token.symbol} is already deployed on chain ${destChainId}`);
+    } else {
+      gasLimit = erc1155NotDeployedGasLimit;
+      log(`token ${token.symbol} is not deployed on chain ${destChainId}`);
+    }
   }
 
   return gasPrice * gasLimit;
diff --git a/packages/bridge-ui-v2/src/libs/token/checkOwnership.test.ts b/packages/bridge-ui-v2/src/libs/token/checkOwnership.test.ts
new file mode 100644
index 00000000000..b87dedf7c85
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/checkOwnership.test.ts
@@ -0,0 +1,94 @@
+import { readContract } from '@wagmi/core';
+
+import { checkOwnership } from './checkOwnership';
+import { detectContractType } from './detectContractType';
+import { TokenType } from './types';
+
+vi.mock('@wagmi/core');
+
+vi.mock('./detectContractType', () => {
+  const actual = vi.importActual('./detectContractType');
+  return {
+    ...actual,
+    detectContractType: vi.fn(),
+  };
+});
+describe('checkOwnership', () => {
+  const OWNER = '0x1';
+  const TOKEN_ADDRESS = '0x2';
+  const TOKEN_IDS = [1, 2];
+  const CHAIN_ID = 1;
+
+  it('should return true if the account owns all the tokens (ERC1155)', async () => {
+    // Given
+    vi.mocked(readContract).mockResolvedValueOnce(BigInt(10)).mockResolvedValueOnce(BigInt(10));
+
+    // When
+    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS, OWNER, CHAIN_ID);
+
+    // Then
+    expect(result).toBe(true);
+  });
+
+  it('should return false if the account does not own any of the tokens (ERC1155)', async () => {
+    // Given
+    vi.mocked(readContract).mockResolvedValueOnce(BigInt(0)).mockResolvedValueOnce(BigInt(0));
+
+    // When
+    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS, OWNER, CHAIN_ID);
+
+    // Then
+    expect(result).toBe(false);
+  });
+
+  it('should return true if the account owns all the tokens (ERC721)', async () => {
+    // Given
+    vi.mocked(readContract).mockResolvedValueOnce(OWNER).mockResolvedValueOnce(OWNER);
+
+    // When
+    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS, OWNER, CHAIN_ID);
+
+    // Then
+    expect(result).toBe(true);
+  });
+
+  it('should return true if the account owns all the tokens (no token type passed)', async () => {
+    // Given
+    vi.mocked(readContract).mockResolvedValueOnce(OWNER).mockResolvedValueOnce(OWNER);
+
+    vi.mocked(detectContractType).mockResolvedValueOnce(TokenType.ERC721);
+
+    // When
+    const result = await checkOwnership(TOKEN_ADDRESS, null, TOKEN_IDS, OWNER, CHAIN_ID);
+
+    // Then
+    expect(result).toBe(true);
+  });
+
+  it('should return false if the account does not own any of the tokens (ERC721)', async () => {
+    // Given
+    vi.mocked(readContract).mockResolvedValueOnce('0x2').mockResolvedValueOnce('0x3');
+
+    // When
+    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS, OWNER, CHAIN_ID);
+
+    // Then
+    expect(result).toBe(false);
+  });
+
+  it('should return false if tokenType is null', async () => {
+    // When
+    const result = await checkOwnership(TOKEN_ADDRESS, null, TOKEN_IDS, OWNER, CHAIN_ID);
+
+    // Then
+    expect(result).toBe(false);
+  });
+
+  it('should return false if tokenIds array is empty', async () => {
+    // When
+    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, [], OWNER, CHAIN_ID);
+
+    // Then
+    expect(result).toBe(false);
+  });
+});
diff --git a/packages/bridge-ui-v2/src/libs/token/checkOwnership.ts b/packages/bridge-ui-v2/src/libs/token/checkOwnership.ts
new file mode 100644
index 00000000000..2c8e9e83a68
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/checkOwnership.ts
@@ -0,0 +1,70 @@
+import { erc721ABI, readContract } from '@wagmi/core';
+import type { Address } from 'viem';
+
+import { erc1155ABI } from '$abi';
+
+import { detectContractType } from './detectContractType';
+import { TokenType } from './types';
+
+const isOwnerERC1155 = async (
+  tokenAddress: Address,
+  tokenId: number,
+  accountAddress: Address,
+  chainId: number,
+): Promise<boolean> => {
+  try {
+    const balance = await readContract({
+      address: tokenAddress,
+      abi: erc1155ABI,
+      functionName: 'balanceOf',
+      chainId,
+      args: [accountAddress, BigInt(tokenId)],
+    });
+
+    return Number(balance) > 0;
+  } catch (error) {
+    return false;
+  }
+};
+
+const isOwnerERC721 = async (
+  tokenAddress: Address,
+  tokenId: number,
+  accountAddress: Address,
+  chainId: number,
+): Promise<boolean> => {
+  try {
+    const owner = await readContract({
+      address: tokenAddress,
+      abi: erc721ABI,
+      functionName: 'ownerOf',
+      chainId,
+      args: [BigInt(tokenId)],
+    });
+    return owner === accountAddress;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const checkOwnership = async (
+  tokenAddress: Address,
+  tokenType: TokenType | null,
+  tokenIds: number[],
+  accountAddress: Address,
+  chainId: number,
+): Promise<boolean> => {
+  if (!tokenType) tokenType = await detectContractType(tokenAddress);
+  if (!tokenType || !tokenIds.length || !accountAddress || !chainId) return false;
+
+  const checkPromises = tokenIds.map((tokenId) =>
+    tokenType === TokenType.ERC1155
+      ? isOwnerERC1155(tokenAddress, tokenId, accountAddress, chainId)
+      : tokenType === TokenType.ERC721
+      ? isOwnerERC721(tokenAddress, tokenId, accountAddress, chainId)
+      : Promise.resolve(false),
+  );
+
+  const ownershipResults = await Promise.all(checkPromises);
+  return ownershipResults.every((isOwner) => isOwner);
+};
diff --git a/packages/bridge-ui-v2/src/libs/token/detectContractType.test.ts b/packages/bridge-ui-v2/src/libs/token/detectContractType.test.ts
new file mode 100644
index 00000000000..dad6a4d1a74
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/detectContractType.test.ts
@@ -0,0 +1,85 @@
+import { readContract } from '@wagmi/core';
+import { zeroAddress } from 'viem';
+
+import { UnknownTokenTypeError } from '$libs/error';
+
+import { detectContractType } from './detectContractType';
+import { TokenType } from './types';
+
+vi.mock('@wagmi/core');
+
+describe('detectContractType', () => {
+  it('should return ERC721 for a valid ERC721 contract', async () => {
+    // Given
+    const contractAddress = zeroAddress;
+    vi.mocked(readContract).mockImplementationOnce(() => Promise.resolve());
+
+    // When
+    const result = await detectContractType(contractAddress);
+
+    // Then
+    expect(result).toBe(TokenType.ERC721);
+  });
+
+  it('should return ERC721 for a valid ERC721 contract with invalid Token ID', async () => {
+    // Given
+    const contractAddress = zeroAddress;
+    vi.mocked(readContract).mockImplementationOnce(() => Promise.reject(new Error('ERC721: invalid token ID')));
+
+    // When
+    const result = await detectContractType(contractAddress);
+
+    // Then
+    expect(result).toBe(TokenType.ERC721);
+  });
+
+  it('should return ERC1155 for a valid ERC1155 contract', async () => {
+    // Given
+    const contractAddress = zeroAddress;
+    vi.mocked(readContract)
+      .mockImplementationOnce(() => Promise.reject())
+      .mockImplementationOnce(() => Promise.resolve());
+
+    // When
+    const result = await detectContractType(contractAddress);
+
+    // Then
+    expect(result).toBe(TokenType.ERC1155);
+  });
+
+  it('should return ERC20 for a valid ERC20 contract', async () => {
+    // Given
+    const contractAddress = zeroAddress;
+    vi.mocked(readContract)
+      .mockImplementationOnce(() => Promise.reject())
+      .mockImplementationOnce(() => Promise.reject())
+      .mockImplementationOnce(() => Promise.resolve());
+
+    // When
+    const result = await detectContractType(contractAddress);
+
+    // Then
+    expect(result).toBe(TokenType.ERC20);
+  });
+
+  it('should throw an error for an unknown contract type', async () => {
+    // Given
+    const contractAddress = zeroAddress;
+    vi.mocked(readContract).mockImplementation(() => Promise.reject(UnknownTokenTypeError));
+
+    // When & Then
+    await expect(detectContractType(contractAddress)).rejects.toThrow(UnknownTokenTypeError);
+  });
+
+  it('should throw an error for if none of the checks passed', async () => {
+    // Given
+    const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
+    vi.mocked(readContract)
+      .mockImplementation(() => Promise.reject())
+      .mockImplementation(() => Promise.reject())
+      .mockImplementation(() => Promise.reject());
+
+    // When & Then
+    await expect(detectContractType(contractAddress)).rejects.toThrow(UnknownTokenTypeError);
+  });
+});
diff --git a/packages/bridge-ui-v2/src/libs/token/detectContractType.ts b/packages/bridge-ui-v2/src/libs/token/detectContractType.ts
index c12e225a60a..26894793d5f 100644
--- a/packages/bridge-ui-v2/src/libs/token/detectContractType.ts
+++ b/packages/bridge-ui-v2/src/libs/token/detectContractType.ts
@@ -1,65 +1,77 @@
 import { readContract } from '@wagmi/core';
 
-export async function detectContractType(contractAddress: string, tokenId: number) {
-  // eslint-disable-next-line no-console
-  console.info('detectContractType', contractAddress);
+import { erc20ABI, erc721ABI, erc1155ABI } from '$abi';
+import { UnknownTokenTypeError } from '$libs/error';
+import { getLogger } from '$libs/util/logger';
 
-  // Use abi from @wagmi/core, and get it setup in wagmi.config.ts
-  const ERC721_ABI = [
-    {
-      constant: true,
-      inputs: [{ name: 'tokenId', type: 'uint256' }],
-      name: 'ownerOf',
-      outputs: [{ name: '', type: 'address' }],
-      payable: false,
-      stateMutability: 'view',
-      type: 'function',
-    },
-  ];
+import { TokenType } from './types';
 
-  const ERC1155_ABI = [
-    {
-      constant: true,
-      inputs: [
-        { name: 'owner', type: 'address' },
-        { name: 'operator', type: 'address' },
-      ],
-      name: 'isApprovedForAll',
-      outputs: [{ name: '', type: 'bool' }],
-      payable: false,
-      stateMutability: 'view',
-      type: 'function',
-    },
-  ];
+type Address = `0x${string}`;
 
+const log = getLogger('detectContractType');
+
+async function isERC721(address: Address): Promise<boolean> {
   try {
     await readContract({
-      address: contractAddress as `0x${string}`, // TODO: type Address
-      abi: ERC721_ABI,
+      address,
+      abi: erc721ABI,
       functionName: 'ownerOf',
-      args: [tokenId],
+      args: [0n],
     });
-    // TODO: please use getLogger from util/logger
-    // eslint-disable-next-line no-console
-    console.info('ERC721');
-    return 'ERC721'; // TODO: use TokenType
+    return true;
   } catch (err) {
-    // eslint-disable-next-line no-console
-    console.log(err);
-    try {
-      await readContract({
-        address: contractAddress as `0x${string}`,
-        abi: ERC1155_ABI,
-        functionName: 'isApprovedForAll',
-        args: ['0x0000000000000000000000000000000000000000', '0x0000000000000000000000000000000000000000'],
-      });
-      // eslint-disable-next-line no-console
-      console.info('ERC1155');
-      return 'ERC1155'; // TODO: use TokenType
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.log(err);
-      return 'UNKNOWN'; // TODO: throw UnknownTypeError and handle in the UI?
-    }
+    // we expect this error to be thrown if the token is a ERC721 and the tokenId is invalid
+    return (err as Error)?.message?.includes('ERC721: invalid token ID') ?? false;
+  }
+}
+// return err instanceof ContractFunctionExecutionError &&
+//   err.cause.message.includes('ERC721: invalid token ID');
+async function isERC1155(address: Address): Promise<boolean> {
+  try {
+    await readContract({
+      address,
+      abi: erc1155ABI,
+      functionName: 'isApprovedForAll',
+      args: ['0x0000000000000000000000000000000000000000', '0x0000000000000000000000000000000000000000'],
+    });
+    return true;
+  } catch {
+    return false;
   }
 }
+
+async function isERC20(address: Address): Promise<boolean> {
+  try {
+    await readContract({
+      address,
+      abi: erc20ABI,
+      functionName: 'balanceOf',
+      args: ['0x0000000000000000000000000000000000000000'],
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function detectContractType(contractAddress: Address): Promise<TokenType> {
+  log('detectContractType', { contractAddress });
+
+  if (await isERC721(contractAddress)) {
+    log('is ERC721');
+    return TokenType.ERC721;
+  }
+
+  if (await isERC1155(contractAddress)) {
+    log('is ERC1155');
+    return TokenType.ERC1155;
+  }
+
+  if (await isERC20(contractAddress)) {
+    log('is ERC20');
+    return TokenType.ERC20;
+  }
+
+  log('Unable to determine token type', { contractAddress });
+  throw new UnknownTokenTypeError();
+}
diff --git a/packages/bridge-ui-v2/src/libs/token/getTokenInfo.test.ts b/packages/bridge-ui-v2/src/libs/token/getTokenInfo.test.ts
new file mode 100644
index 00000000000..17735551887
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/getTokenInfo.test.ts
@@ -0,0 +1,86 @@
+import { fetchToken, type FetchTokenResult, readContract } from '@wagmi/core';
+import { type Address, zeroAddress } from 'viem';
+
+import { UnknownTokenTypeError } from '$libs/error';
+
+import { detectContractType } from './detectContractType';
+import { getTokenInfoFromAddress } from './getTokenInfo';
+import { TokenType } from './types';
+
+vi.mock('@wagmi/core');
+
+vi.mock('./errors', () => {
+  return {
+    UnknownTypeError: vi.fn().mockImplementation(() => {
+      return { message: 'Mocked UnknownTypeError' };
+    }),
+  };
+});
+
+vi.mock('./detectContractType', () => {
+  const actual = vi.importActual('./detectContractType');
+  return {
+    ...actual,
+    detectContractType: vi.fn(),
+  };
+});
+
+describe('getTokenInfoFromAddress', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return correct token details for ERC20 tokens', async () => {
+    // Given
+    const address: Address = zeroAddress;
+    vi.mocked(detectContractType).mockResolvedValue(TokenType.ERC20);
+    vi.mocked(fetchToken).mockResolvedValue({
+      name: 'MockToken',
+      symbol: 'MTK',
+      decimals: 18,
+    } as FetchTokenResult);
+
+    // When
+    const result = await getTokenInfoFromAddress(address);
+
+    // Then
+    expect(result).toEqual({
+      address,
+      name: 'MockToken',
+      symbol: 'MTK',
+      decimals: 18,
+      type: TokenType.ERC20,
+    });
+  });
+
+  it('should return correct token details for ERC721 tokens', async () => {
+    // Given
+    const address: Address = zeroAddress;
+    vi.mocked(detectContractType).mockResolvedValue(TokenType.ERC721);
+    vi.mocked(readContract).mockResolvedValueOnce('MockNFT').mockResolvedValueOnce('MNFT');
+
+    // When
+    const result = await getTokenInfoFromAddress(address);
+
+    // Then
+    expect(result).toEqual({
+      address,
+      name: 'MockNFT',
+      symbol: 'MNFT',
+      decimals: 0,
+      type: TokenType.ERC721,
+    });
+  });
+
+  it('should return null for unknown token types', async () => {
+    // Given
+    const address: Address = zeroAddress;
+    vi.mocked(detectContractType).mockRejectedValue(new UnknownTokenTypeError());
+
+    // When
+    const result = await getTokenInfoFromAddress(address);
+
+    // Then
+    expect(result).toBeNull();
+  });
+});
diff --git a/packages/bridge-ui-v2/src/libs/token/getTokenInfo.ts b/packages/bridge-ui-v2/src/libs/token/getTokenInfo.ts
new file mode 100644
index 00000000000..c0e2ede1acb
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/token/getTokenInfo.ts
@@ -0,0 +1,49 @@
+import { erc721ABI, fetchToken, readContract } from '@wagmi/core';
+import type { Address } from 'viem';
+
+import { detectContractType } from './detectContractType';
+import { type TokenDetails, TokenType } from './types';
+
+export const getTokenInfoFromAddress = async (address: Address) => {
+  try {
+    const tokenType = await detectContractType(address);
+    const details: TokenDetails = {} as TokenDetails;
+    if (tokenType === TokenType.ERC20) {
+      const token = await fetchToken({
+        address,
+      });
+      details.type = tokenType;
+      details.address = address;
+      details.name = token.name;
+      details.symbol = token.symbol;
+      details.decimals = token.decimals;
+      return details;
+    } else if (tokenType === TokenType.ERC1155) {
+      // todo: via URI?
+      details.type = tokenType;
+      return details;
+    } else if (tokenType === TokenType.ERC721) {
+      const name = await readContract({
+        address,
+        abi: erc721ABI,
+        functionName: 'name',
+      });
+
+      const symbol = await readContract({
+        address,
+        abi: erc721ABI,
+        functionName: 'symbol',
+      });
+
+      details.type = tokenType;
+      details.address = address;
+      details.name = name;
+      details.symbol = symbol;
+      details.decimals = 0;
+      return details;
+    }
+    return null;
+  } catch (err) {
+    return null;
+  }
+};
diff --git a/packages/bridge-ui-v2/src/libs/token/types.ts b/packages/bridge-ui-v2/src/libs/token/types.ts
index 8b281d41cdf..e0d95fa40de 100644
--- a/packages/bridge-ui-v2/src/libs/token/types.ts
+++ b/packages/bridge-ui-v2/src/libs/token/types.ts
@@ -24,11 +24,13 @@ export type Token = {
   mintable?: boolean;
 };
 
-export type TokenEnv = {
+export type TokenDetails = {
   name: string;
   address: Address;
   symbol: string;
   balance: bigint;
+  decimals: number;
+  type: TokenType;
 };
 
 export type GetCrossChainAddressArgs = {