From ad16ed8e89b38b760faa7252b9a24e2ca90ce5f9 Mon Sep 17 00:00:00 2001
From: Korbinian <korbiniank@outlook.de>
Date: Tue, 24 Oct 2023 12:15:05 +0200
Subject: [PATCH] update design and some refactoring

---
 packages/bridge-ui-v2/README.md               |   2 +-
 .../__mocks__/parseNFTMetadata.ts             |   2 +-
 .../Bridge/AddressInput/AddressInput.svelte   |  22 +-
 .../components/Bridge/AddressInput/state.ts   |  10 +-
 .../src/components/Bridge/Amount.svelte       |   3 +-
 .../components/Bridge/IDInput/IDInput.svelte  |  40 +--
 .../src/components/Bridge/NFTBridge.svelte    |  68 ++--
 .../Bridge/NFTBridgeSteps/ImportStep.svelte   | 307 +++++++++++-------
 .../Bridge/NFTBridgeSteps/ReviewStep.svelte   |  11 +-
 .../src/components/Icon/Icon.svelte           |  25 +-
 .../src/components/NFTCard/NFTCard.svelte     |  11 +-
 .../src/components/NFTCard/NFTCardGrid.svelte |  13 +
 .../src/components/NFTCard/index.ts           |   1 +
 .../components/NFTList/NFTInfoDialog.svelte   |  75 +++++
 .../src/components/NFTList/NFTList.svelte     |   9 +-
 .../src/components/NFTList/NFTListItem.svelte |  76 +++--
 packages/bridge-ui-v2/src/i18n/en.json        | 104 +++---
 .../src/libs/bridge/checkBalanceToBridge.ts   |   7 +-
 .../bridge-ui-v2/src/libs/bridge/fetchNFTs.ts |  19 +-
 .../libs/bridge/isSupportedNFTInterface.ts    |  97 ++++++
 .../bridge-ui-v2/src/libs/proof/Prover.ts     |   2 +-
 .../src/libs/token/fetchNFTImageUrl.ts        |  98 +++++-
 .../token/getTokenWithInfoFromAddress.test.ts |  10 +-
 .../libs/token/getTokenWithInfoFromAddress.ts |   6 +-
 .../src/libs/util/fetchNFTMetadata.ts         |  96 ++++++
 .../src/libs/util/getFileExtension.ts         |   4 +
 26 files changed, 798 insertions(+), 320 deletions(-)
 create mode 100644 packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte
 create mode 100644 packages/bridge-ui-v2/src/components/NFTList/NFTInfoDialog.svelte
 create mode 100644 packages/bridge-ui-v2/src/libs/bridge/isSupportedNFTInterface.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/util/fetchNFTMetadata.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/util/getFileExtension.ts

diff --git a/packages/bridge-ui-v2/README.md b/packages/bridge-ui-v2/README.md
index 38d5f80fc2..1b02780394 100644
--- a/packages/bridge-ui-v2/README.md
+++ b/packages/bridge-ui-v2/README.md
@@ -48,7 +48,7 @@ These are are the additional configuration files that have to be filled in:
 | **/config/configuredBridges.json**      | Defines the chains that are connected via taiko bridges and lists the contract addresses |
 | **/config/configuredChains.json**       | Defines some metadata for the chains, such as name, icons, explorer URL, etc.            |
 | **/config/configuredRelayer.json**      | If chains have a relayer, the URL and the chain IDs it covers are entered here           |
-| **/config/configuredCustomTokens.json** | Defines a list of tokens that should be available in the token dropdowns                 |
+| **/config/configuredCustomTokens.json** | Defines a list of tokens that should be availabe in the token dropdowns                  |
 
 ---
 
diff --git a/packages/bridge-ui-v2/__mocks__/parseNFTMetadata.ts b/packages/bridge-ui-v2/__mocks__/parseNFTMetadata.ts
index 85bd5c786b..54e00a3f21 100644
--- a/packages/bridge-ui-v2/__mocks__/parseNFTMetadata.ts
+++ b/packages/bridge-ui-v2/__mocks__/parseNFTMetadata.ts
@@ -1,3 +1,3 @@
 import { vi } from 'vitest';
 
-export const parseNFTMetadata = vi.fn();
+export const fetchNFTMetadata = vi.fn();
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte
index 99a7b6a312..fbdcc01c54 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte
@@ -14,14 +14,14 @@
   export let labelText = $t('inputs.address_input.label.default');
   export let isDisabled = false;
   export let quiet = false;
-  export let state: State = State.Default;
+  export let state: State = State.DEFAULT;
 
   export const validateAddress = () => {
     validateEthereumAddress(ethereumAddress);
   };
 
   export const clearAddress = () => {
-    state = State.Default;
+    state = State.DEFAULT;
     if (input) input.value = '';
     validateEthereumAddress('');
   };
@@ -43,21 +43,21 @@
       addr = address as string;
     }
     if (addr.length >= 2 && !addr.startsWith('0x')) {
-      state = State.Invalid;
+      state = State.INVALID;
       return;
     }
     if (addr.length < 42) {
-      state = State.TooShort;
+      state = State.TOO_SHORT;
     } else {
       if (isAddress(addr)) {
-        state = State.Valid;
+        state = State.VALID;
       } else {
-        state = State.Invalid;
+        state = State.INVALID;
       }
       dispatch('input', addr);
     }
 
-    dispatch('addressvalidation', { isValidEthereumAddress: state === State.Valid, addr });
+    dispatch('addressvalidation', { isValidEthereumAddress: state === State.VALID, addr });
   };
 
   onMount(() => {
@@ -80,7 +80,7 @@
       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 {$$props.class}
-      {state === State.Valid ? 'success' : ethereumAddress && state !== State.Validating ? 'error' : ''}
+      {state === State.VALID ? 'success' : ethereumAddress && state !== State.VALIDATING ? 'error' : ''}
       " />
     <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} />
@@ -90,11 +90,11 @@
 
 {#if !quiet}
   <div class="min-h-[20px] !mt-3">
-    {#if state === State.Invalid && ethereumAddress}
+    {#if state === State.INVALID && ethereumAddress}
       <FlatAlert type="error" forceColumnFlow message={$t('inputs.address_input.errors.invalid')} />
-    {:else if state === State.TooShort && ethereumAddress}
+    {:else if state === State.TOO_SHORT && ethereumAddress}
       <FlatAlert type="warning" forceColumnFlow message={$t('inputs.address_input.errors.too_short')} />
-    {:else if state === State.Valid}
+    {:else if state === State.VALID}
       <FlatAlert type="success" forceColumnFlow message={$t('inputs.address_input.success')} />
     {/if}
   </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
index a6c3794ad9..ff0e18ac07 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
+++ b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
@@ -1,7 +1,7 @@
 export enum AddressInputState {
-  Default,
-  Valid,
-  Invalid,
-  TooShort,
-  Validating,
+  DEFAULT,
+  VALID,
+  INVALID,
+  TOO_SHORT,
+  VALIDATING,
 }
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
index 593d21a317..e03f202dd5 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
@@ -248,7 +248,6 @@
       {/if}
     </div>
   </div>
-
   <div class="relative">
     <div class="relative f-items-center">
       <InputBox
@@ -260,7 +259,7 @@
         error={$insufficientBalance}
         on:input={inputAmount}
         bind:this={inputBox}
-        class="py-6 pr-16 px-[26px] title-subsection-bold border-0" />
+        class="py-6 pr-16 px-[26px] title-subsection-bold border-0  {$$props.class}" />
       <!-- TODO: talk to Jane about the MAX button and its styling -->
       <button
         class="absolute right-6 uppercase hover:font-bold"
diff --git a/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte
index 73ec630c97..5931ded1c3 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte
@@ -7,7 +7,7 @@
 
   import { IDInputState as State } from './state';
 
-  export let numbersArray: number[] = [];
+  export let validIdNumbers: number[] = [];
   export let isDisabled = false;
   export let enteredIds: string = '';
   export let limit = 1;
@@ -15,33 +15,33 @@
 
   export const clearIds = () => {
     enteredIds = '';
-    numbersArray = [];
-    dispatch('input', { enteredIds, numbersArray });
+    validIdNumbers = [];
+    dispatch('inputValidation');
   };
 
   const dispatch = createEventDispatcher();
 
   let inputId = `input-${uid()}`;
 
-  function validateInput(e: Event) {
-    const target = e.target as HTMLInputElement;
-    let newValue = target.value.replace(/\s+/g, '');
-    const inputArray = newValue.split(',');
-    if (inputArray.length > limit) {
-      newValue = inputArray.slice(0, limit).join(',');
+  function validateInput(idInput: EventTarget | string | null = null) {
+    state = State.VALIDATING;
+    if (!idInput) return;
+    let ids;
+    if (idInput && idInput instanceof EventTarget) {
+      ids = (idInput as HTMLInputElement).value.replace(/\s+/g, '');
+    } else {
+      ids = idInput as string;
     }
-    enteredIds = newValue;
-    dispatch('input', { enteredIds, numbersArray });
-  }
 
-  $: {
-    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) : [];
+    const inputArray = ids.split(',');
+    if (inputArray.length > limit) {
+      ids = inputArray.slice(0, limit).join(',');
     }
+    enteredIds = ids;
+    const isValid = inputArray.every((item) => /^[0-9]+$/.test(item));
+    validIdNumbers = isValid ? inputArray.map((num) => parseInt(num)).filter(Boolean) : [];
+    state = State.VALID;
+    dispatch('inputValidation');
   }
 </script>
 
@@ -56,7 +56,7 @@
       type="text"
       placeholder={$t('inputs.token_id_input.placeholder')}
       bind:value={enteredIds}
-      on:input={validateInput}
+      on:input={(e) => validateInput(e.target)}
       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.DEFAULT ? '' : 'error'}" />
     <!-- /*state === State.Valid ? 'success' : state === State.Invalid ? 'error' : ''  -->
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
index 13db99e596..aa6b3ab07b 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
@@ -2,7 +2,7 @@
   import type { Hash } from '@wagmi/core';
   import { onDestroy, tick } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { type Address, getAddress } from 'viem';
+  import { type Address, getAddress, isAddress } from 'viem';
 
   import { routingContractsMap } from '$bridgeConfig';
   import { chainConfig } from '$chainConfig';
@@ -18,11 +18,11 @@
   import { hasBridge } from '$libs/bridge/bridges';
   import type { ERC721Bridge } from '$libs/bridge/ERC721Bridge';
   import type { ERC1155Bridge } from '$libs/bridge/ERC1155Bridge';
-  import { fetchNFTs } from '$libs/bridge/fetchNFTs';
   import { getBridgeArgs } from '$libs/bridge/getBridgeArgs';
   import { handleBridgeError } from '$libs/bridge/handleBridgeErrors';
   import { bridgeTxService } from '$libs/storage';
   import { ETHToken, type NFT, TokenType } from '$libs/token';
+  import { fetchNFTImageUrl } from '$libs/token/fetchNFTImageUrl';
   import { getCrossChainAddress } from '$libs/token/getCrossChainAddress';
   import { getTokenWithInfoFromAddress } from '$libs/token/getTokenWithInfoFromAddress';
   import { getConnectedWallet } from '$libs/util/getConnectedWallet';
@@ -55,6 +55,7 @@
   let actionsComponent: Actions;
   let importMethod: 'scan' | 'manual' = 'scan';
   let nftIdArray: number[] = [];
+  let contractAddress: Address | string = '';
 
   function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
     updateForm();
@@ -250,7 +251,6 @@
     if (nftIdInputComponent) nftIdInputComponent.clearIds();
 
     $selectedToken = ETHToken;
-    contractAddress = '';
     importMethod === 'scan';
     scanned = false;
     canProceed = false;
@@ -269,29 +269,16 @@
   let nftStepDescription: string;
   let nextStepButtonText: string;
 
-  let contractAddress: Address | '';
-
   let addressInputComponent: AddressInput;
   let nftIdInputComponent: IdInput;
 
-  let scanning: boolean = false;
+  let validatingImport: boolean = false;
   let scanned: boolean = false;
 
   let selectedNFT: NFT[];
-  let canProceed: boolean;
+  let canProceed: boolean = false;
   let foundNFTs: NFT[] = [];
 
-  const scanForNFTs = async () => {
-    scanning = true;
-    const accountAddress = $account?.address;
-    const srcChainId = $network?.id;
-    if (!accountAddress || !srcChainId) return;
-    const nftsFromAPIs = await fetchNFTs(accountAddress, BigInt(srcChainId));
-    foundNFTs = nftsFromAPIs.nfts;
-    scanning = false;
-    scanned = true;
-  };
-
   const getStepText = () => {
     if (activeStep === NFTSteps.REVIEW) {
       return $t('common.confirm');
@@ -308,22 +295,42 @@
     resetForm();
   };
 
+  const prefetchImage = async () => {
+    await Promise.all(
+      nftIdArray.map(async (id) => {
+        const token = $selectedToken as NFT;
+        if (token) {
+          token.tokenId = id;
+          fetchNFTImageUrl(token).then((nftWithUrl) => {
+            $selectedToken = nftWithUrl;
+            selectedNFT = [nftWithUrl];
+          });
+        } else {
+          throw new Error('no token');
+        }
+      }),
+    );
+  };
+
   const manualImportAction = () => {
     if (!$network?.id) throw new Error('network not found');
     const srcChainId = $network?.id;
     const tokenId = nftIdArray[0];
 
-    if (contractAddress && srcChainId)
-      getTokenWithInfoFromAddress({ contractAddress, srcChainId, owner: $account?.address, tokenId })
-        .then((token) => {
+    if (isAddress(contractAddress) && srcChainId)
+      getTokenWithInfoFromAddress({ contractAddress, srcChainId: srcChainId, tokenId, owner: $account?.address })
+        .then(async (token) => {
           if (!token) throw new Error('no token with info');
-          selectedNFT = [token as NFT];
+          // detectedTokenType = token.type;
+          // idInputState = IDInputState.VALID;
           $selectedToken = token;
+          await prefetchImage();
         })
         .catch((err) => {
           console.error(err);
-          //   detectedTokenType = null;
-          //   addressInputState = AddressInputState.Invalid;
+          // detectedTokenType = null;
+          // idInputState = IDInputState.INVALID;
+          // invalidToken = true;
         });
     nextStep();
   };
@@ -352,7 +359,6 @@
     <Step stepIndex={NFTSteps.CONFIRM} currentStepIndex={activeStep} isActive={activeStep === NFTSteps.CONFIRM}
       >{$t('bridge.title.nft.confirm')}</Step>
   </Stepper>
-
   <Card class="mt-[32px] w-full md:w-[524px]" title={nftStepTitle} text={nftStepDescription}>
     <div class="space-y-[30px]">
       <!-- IMPORT STEP -->
@@ -361,12 +367,11 @@
           bind:importMethod
           bind:canProceed
           bind:selectedNFT
-          {scanForNFTs}
-          {nftIdArray}
-          {contractAddress}
+          bind:nftIdArray
+          bind:contractAddress
           {foundNFTs}
           bind:scanned
-          bind:scanning />
+          bind:validating={validatingImport} />
         <!-- REVIEW STEP -->
       {:else if activeStep === NFTSteps.REVIEW}
         <ReviewStep bind:selectedNFT />
@@ -393,9 +398,12 @@
         </div>
       {:else if activeStep === NFTSteps.IMPORT}
         {#if importMethod === 'manual'}
+          <div class="h-sep" />
+
           <div class="f-col w-full">
             <Button
               disabled={!canProceed}
+              loading={validatingImport}
               type="primary"
               class="px-[28px] py-[14px] rounded-full flex-1 w-auto text-white"
               on:click={manualImportAction}><span class="body-bold">{nextStepButtonText}</span></Button>
@@ -406,6 +414,8 @@
           </div>
         {:else if scanned}
           <div class="f-col w-full">
+            <div class="h-sep" />
+
             <Button
               disabled={!canProceed}
               type="primary"
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
index 95f1e1e682..c8095733a8 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -1,37 +1,64 @@
 <script lang="ts">
+  import type { Address } from '@wagmi/core';
+  import { isAddress } from 'ethereum-address';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import type { Address } from 'viem';
 
   import { FlatAlert } from '$components/Alert';
+  import Alert from '$components/Alert/Alert.svelte';
   import AddressInput from '$components/Bridge/AddressInput/AddressInput.svelte';
   import { AddressInputState } from '$components/Bridge/AddressInput/state';
+  import Amount from '$components/Bridge/Amount.svelte';
   import IdInput from '$components/Bridge/IDInput/IDInput.svelte';
   import { IDInputState } from '$components/Bridge/IDInput/state';
-  import { destNetwork as destinationChain, selectedToken } from '$components/Bridge/state';
+  import { destNetwork as destinationChain, enteredAmount, selectedToken } from '$components/Bridge/state';
   import { Button } from '$components/Button';
   import { ChainSelectorWrapper } from '$components/ChainSelector';
   import { IconFlipper } from '$components/Icon';
   import RotatingIcon from '$components/Icon/RotatingIcon.svelte';
   import { LoadingMask } from '$components/LoadingMask';
-  import { NFTCard } from '$components/NFTCard';
+  import { NFTCardGrid } from '$components/NFTCard';
   import { NFTList } from '$components/NFTList';
-  import { type NFT, TokenType } from '$libs/token';
+  import { fetchNFTs } from '$libs/bridge/fetchNFTs';
+  import { detectContractType, type NFT, TokenType } from '$libs/token';
   import { checkOwnership } from '$libs/token/checkOwnership';
   import { getTokenWithInfoFromAddress } from '$libs/token/getTokenWithInfoFromAddress';
-  import { noop } from '$libs/util/noop';
   import { account } from '$stores/account';
   import { network } from '$stores/network';
 
-  export let scanForNFTs: () => Promise<void> = async () => {};
-
   export let selectedNFT: NFT[];
-  export let nftIdArray: number[];
-  export let contractAddress: Address | '';
-  export let canProceed: boolean;
+  export let nftIdArray: number[] = [];
+  export let canProceed: boolean = false;
   export let scanned: boolean;
-  export let scanning: boolean;
-
   export let importMethod: 'scan' | 'manual';
+  export let foundNFTs: NFT[] = [];
+  export let validating: boolean = false;
+  export let contractAddress: Address | string = '';
+
+  let enteredIds: string = '';
+  let scanning: boolean;
+
+  let addressInputComponent: AddressInput;
+  let addressInputState: AddressInputState = AddressInputState.DEFAULT;
+
+  let idInputState: IDInputState = IDInputState.DEFAULT;
+
+  let invalidToken: boolean = true;
+  let isOwnerOfAllToken: boolean = false;
+
+  let detectedTokenType: TokenType | null = null;
+  let interfaceSupported: boolean = true;
+
+  let nftIdInputComponent: IdInput;
+  let amountComponent: Amount;
+
+  const reset = () => {
+    nftView = NFTView.LIST;
+    enteredIds = '';
+    invalidToken = true;
+    isOwnerOfAllToken = false;
+    detectedTokenType = null;
+  };
 
   enum NFTView {
     CARDS,
@@ -47,19 +74,16 @@
     }
   };
 
-  let validating: boolean = false;
-  let enteredIds: string = '';
-  //   let manualNFTInput: boolean = false;
-  let addressInputState: AddressInputState = AddressInputState.Default;
-
-  let isOwnerOfAllToken: boolean = false;
-  let detectedTokenType: TokenType | null = null;
-  export let foundNFTs: NFT[] = [];
-
-  $: canScan = $account?.isConnected && $network?.id && $destinationChain && !scanning;
-
-  let addressInputComponent: AddressInput;
-  let nftIdInputComponent: IdInput;
+  const scanForNFTs = async () => {
+    scanning = true;
+    const accountAddress = $account?.address;
+    const srcChainId = $network?.id;
+    if (!accountAddress || !srcChainId) return;
+    const nftsFromAPIs = await fetchNFTs(accountAddress, BigInt(srcChainId));
+    foundNFTs = nftsFromAPIs.nfts;
+    scanning = false;
+    scanned = true;
+  };
 
   const changeImportMethod = () => {
     if (addressInputComponent) addressInputComponent.clearAddress();
@@ -70,128 +94,162 @@
     $selectedToken = null;
   };
 
-  function onAddressValidation(event: CustomEvent<{ isValidEthereumAddress: boolean; addr: Address }>) {
+  async function onAddressValidation(event: CustomEvent<{ isValidEthereumAddress: boolean; addr: Address }>) {
     const { isValidEthereumAddress, addr } = event.detail;
-    addressInputState = AddressInputState.Validating;
+    invalidToken = false;
+    interfaceSupported = true;
+    addressInputState = AddressInputState.VALIDATING;
 
     if (isValidEthereumAddress && typeof addr === 'string') {
+      contractAddress = addr;
+      try {
+        detectedTokenType = await detectContractType(addr);
+      } catch {
+        invalidToken = true;
+        addressInputState = AddressInputState.INVALID;
+      }
+
       if (!$network?.id) throw new Error('network not found');
-      const srcChainId = $network?.id;
-      // If we have a valid address, we generate a token object for the $selectedToken store
-      getTokenWithInfoFromAddress({ contractAddress: addr, srcChainId: srcChainId, owner: $account?.address })
-        .then((token) => {
-          if (!token) throw new Error('no token with info');
-          detectedTokenType = token.type;
-          addressInputState = AddressInputState.Valid;
-          $selectedToken = token;
-        })
-        .catch((err) => {
-          console.error(err);
-          detectedTokenType = null;
-          addressInputState = AddressInputState.Invalid;
-        });
+      if (detectedTokenType !== TokenType.ERC721 && detectedTokenType !== TokenType.ERC1155) {
+        addressInputState = AddressInputState.INVALID;
+        return;
+      }
+
+      //TODO: not working as expected yet
+
+      // interfaceSupported = await isSupportedNFTInterface(addr, detectedTokenType);
+      // if (!interfaceSupported) {
+      //   addressInputState = AddressInputState.INVALID;
+      // } else {
+      //   addressInputState = AddressInputState.VALID;
+      // }
+      addressInputState = AddressInputState.VALID;
     } else {
       detectedTokenType = null;
-      addressInputState = AddressInputState.Invalid;
+      addressInputState = AddressInputState.INVALID;
     }
+    return;
   }
 
-  // Update ID input state based on the current state of the form
-  let idInputState: IDInputState;
-  $: {
-    if (isOwnerOfAllToken && nftIdArray?.length > 0) {
-      idInputState = IDInputState.VALID;
-    } else if (!isOwnerOfAllToken && nftIdArray?.length > 0) {
-      idInputState = IDInputState.INVALID;
-    } else {
-      idInputState = IDInputState.DEFAULT;
+  const onIdInput = async () => {
+    idInputState = IDInputState.VALIDATING;
+    validating = true;
+    const srcChainId = $network?.id;
+    if (isAddress(contractAddress) && srcChainId && $account?.address && nftIdArray.length > 0) {
+      const tokenId = nftIdArray[0]; //TODO: wont work with multiple token
+      // If we have a valid address, we generate a token object for the $selectedToken store
+      checkOwnership(contractAddress as Address, detectedTokenType, nftIdArray, $account?.address, srcChainId).then(
+        async (result) => {
+          isOwnerOfAllToken = result.every((value) => value.isOwner === true);
+          if (isOwnerOfAllToken) {
+            getTokenWithInfoFromAddress({
+              contractAddress: contractAddress as Address,
+              srcChainId: srcChainId,
+              tokenId,
+              owner: $account?.address,
+            })
+              .then(async (token) => {
+                if (!token) throw new Error('no token with info');
+                detectedTokenType = token.type;
+                idInputState = IDInputState.VALID;
+                $selectedToken = token;
+                // await prefetchImage();
+              })
+              .catch((err) => {
+                console.error(err);
+                detectedTokenType = null;
+                idInputState = IDInputState.INVALID;
+                invalidToken = true;
+              });
+            idInputState = IDInputState.VALID;
+          } else {
+            idInputState = IDInputState.INVALID;
+          }
+        },
+      );
     }
-  }
-
-  let previousSelectedToken: typeof $selectedToken | null = null;
-  $: {
-    if (
-      (selectedNFT.length > 0 &&
-        $selectedToken !== selectedNFT[0] &&
-        selectedNFT.length > 0 &&
-        $network?.id &&
-        (previousSelectedToken !== $selectedToken || !previousSelectedToken)) ||
-      (nftIdArray && nftIdArray.length > 0)
-    ) {
-      previousSelectedToken = $selectedToken;
-      if (!scanned) {
-        if (addressInputState !== AddressInputState.Valid) () => noop();
-        if (contractAddress === '') () => noop();
-      } else {
-        //eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        contractAddress = selectedNFT[0].addresses[$network?.id!];
-      }
+    idInputState = IDInputState.DEFAULT;
+    validating = false;
+  };
 
-      if ($account?.address && $network?.id && contractAddress)
-        checkOwnership(contractAddress, detectedTokenType, nftIdArray, $account?.address, $network?.id).then(
-          (result) => {
-            result;
-            isOwnerOfAllToken = result.every((value) => value.isOwner === true);
-          },
-        );
+  onMount(() => {
+    reset();
+  });
 
-      //TODO: this needs changing if we do batch transfers in the future:
-      // Update either selectedToken store to handle arrays or the actions to access a different store for NFTs
-      $selectedToken = selectedNFT[0];
-    }
-  }
+  $: canImport = $account?.isConnected && $network?.id && $destinationChain && !scanning;
 
   // Handles the next step button status
-  $: if (
-    importMethod === 'manual'
-      ? addressInputState === AddressInputState.Valid &&
-        nftIdArray.length > 0 &&
-        contractAddress &&
-        $destinationChain &&
-        isOwnerOfAllToken
-      : selectedNFT.length > 0 && $destinationChain && scanned
-  ) {
+  $: if (importMethod === 'manual') {
+    if (
+      detectedTokenType === TokenType.ERC721 &&
+      addressInputState === AddressInputState.VALID &&
+      idInputState === IDInputState.VALID &&
+      isOwnerOfAllToken
+    ) {
+      canProceed = true;
+    } else if (
+      detectedTokenType === TokenType.ERC1155 &&
+      addressInputState === AddressInputState.VALID &&
+      idInputState === IDInputState.VALID &&
+      $enteredAmount > BigInt(0) &&
+      isOwnerOfAllToken
+    ) {
+      canProceed = true;
+    } else {
+      canProceed = false;
+    }
+  } else if (importMethod === 'scan' && selectedNFT.length > 0 && $destinationChain && scanned) {
     canProceed = true;
+  } else {
+    canProceed = false;
   }
+
+  $: isDisabled = idInputState !== IDInputState.VALID || addressInputState !== AddressInputState.VALID;
 </script>
 
 <div class="f-between-center gap-4">
   <ChainSelectorWrapper />
 </div>
-<div class="h-sep" />
-
 <!-- 
 Manual NFT Input 
 -->
 {#if importMethod === 'manual'}
-  <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" />
+  <div id="manualImport">
+    <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 />
+    {#if addressInputState === AddressInputState.INVALID && invalidToken}
+      <FlatAlert type="error" forceColumnFlow message="todo: invalid token" />
     {/if}
 
-    <!-- TODO: add limit to config -->
-    <IdInput
-      bind:this={nftIdInputComponent}
-      bind:enteredIds
-      bind:numbersArray={nftIdArray}
-      bind:state={idInputState}
-      limit={1}
-      class="bg-neutral-background border-0 h-[56px]" />
+    {#if !interfaceSupported}
+      <Alert type="error">TODO: token interface is not supported (link to docs?)</Alert>
+    {/if}
     <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}
+      <!-- TODO: add limit to config -->
+      <IdInput
+        isDisabled={addressInputState !== AddressInputState.VALID}
+        bind:this={nftIdInputComponent}
+        bind:enteredIds
+        bind:validIdNumbers={nftIdArray}
+        bind:state={idInputState}
+        on:inputValidation={onIdInput}
+        limit={1}
+        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>
     </div>
+    {#if detectedTokenType === TokenType.ERC1155 && interfaceSupported}
+      <Amount bind:this={amountComponent} class="bg-neutral-background border-0 h-[56px]" disabled={isDisabled} />
+    {/if}
   </div>
 {:else}
   <!-- 
@@ -200,7 +258,7 @@ Automatic NFT Input
   {#if !scanned}
     <div class="f-col w-full gap-4">
       <Button
-        disabled={!canScan}
+        disabled={!canImport}
         loading={scanning}
         type={scanned ? 'neutral' : 'primary'}
         class="px-[28px] py-[14px] rounded-full flex-1 text-white"
@@ -212,8 +270,9 @@ Automatic NFT Input
       </Button>
 
       <Button
+        disabled={!canImport}
         type="neutral"
-        class="px-[28px] py-[14px] bg-transparent !border border-primary-brand rounded-full hover:border-primary-interactive-hover "
+        class="px-[28px] py-[14px] bg-transparent border-primary-brand rounded-full "
         on:click={() => changeImportMethod()}>
         {$t('bridge.actions.nft_manual')}
       </Button>
@@ -248,16 +307,14 @@ Automatic NFT Input
           </div>
         </div>
         <div>
-          <div class="relative max-h-[200px] min-h-[200px] bg-neutral rounded-[20px] pl-2 overflow-hidden">
-            <div class="max-h-[200px] min-h-[200px] overflow-y-auto py-2">
+          <div class="relative max-h-[350px] min-h-[350px] bg-neutral rounded-[20px] overflow-hidden">
+            <div class="max-h-[350px] min-h-[350px] overflow-y-auto py-2 px-[20px]">
               {#if scanning}
                 <LoadingMask spinnerClass="border-white" text={$t('messages.bridge.nft_scanning')} />
               {:else if nftView === NFTView.LIST}
                 <NFTList bind:nfts={foundNFTs} chainId={$network?.id} bind:selectedNFT />
               {:else if nftView === NFTView.CARDS}
-                {#each foundNFTs as nft}
-                  <NFTCard {nft} />
-                {/each}
+                <NFTCardGrid bind:nfts={foundNFTs} />
               {/if}
             </div>
           </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
index 019a99216a..2b4057b0c7 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
@@ -2,21 +2,19 @@
   import { t } from 'svelte-i18n';
 
   import { chainConfig } from '$chainConfig';
-  import Amount from '$components/Bridge/Amount.svelte';
   import { ProcessingFee } from '$components/Bridge/ProcessingFee';
   import Recipient from '$components/Bridge/Recipient.svelte';
-  import { destNetwork as destinationChain, selectedToken } from '$components/Bridge/state';
+  import { destNetwork as destinationChain } from '$components/Bridge/state';
   import { ChainSelector } from '$components/ChainSelector';
   import { Icon, IconFlipper } from '$components/Icon';
   import { NFTCard } from '$components/NFTCard';
   import { NFTList } from '$components/NFTList';
-  import { type NFT, TokenType } from '$libs/token';
+  import type { NFT } from '$libs/token';
   import { shortenAddress } from '$libs/util/shortenAddress';
   import { network } from '$stores/network';
 
   export let selectedNFT: NFT[];
 
-  let amountComponent: Amount;
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
 
@@ -63,7 +61,7 @@
   </div>
 
   <div class="flex justify-between">
-    <div class="font-bold">{$t('bridge.nft.step.review.token_id')}</div>
+    <div class="font-bold">{$t('inputs.token_id_input.label')}</div>
     <div class="break-words text-right text-secondary-content">
       <ul>
         {#each selectedNFT as nft}
@@ -81,9 +79,6 @@
 <div class="space-y-[16px]">
   <Recipient bind:this={recipientComponent} />
   <ProcessingFee bind:this={processingFeeComponent} />
-  {#if $selectedToken?.type === TokenType.ERC1155}
-    <Amount bind:this={amountComponent} />
-  {/if}
 </div>
 
 <div class="h-sep" />
diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
index ee51bca03f..ed0b4d5031 100644
--- a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
+++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
@@ -31,7 +31,8 @@
     | 'list'
     | 'magnifier'
     | 'cards'
-    | 'refresh';
+    | 'refresh'
+    | 'option-dots';
 </script>
 
 <script lang="ts">
@@ -261,5 +262,27 @@
       clip-rule="evenodd"
       d="M10.2502 8.13886C9.62122 10.4861 7.20854 11.8791 4.86129 11.2501C4.08607 11.0424 3.41644 10.6411 2.88866 10.1123L2.63943 9.86311L4.58601 9.86276C4.91738 9.8627 5.18596 9.59402 5.18591 9.26265C5.18585 8.93128 4.91717 8.6627 4.5858 8.66276L1.19105 8.66337C1.03192 8.6634 0.879316 8.72664 0.766813 8.83919C0.654311 8.95173 0.591126 9.10436 0.59116 9.2635L0.591873 12.657C0.591943 12.9883 0.860629 13.2569 1.192 13.2568C1.52337 13.2568 1.79194 12.9881 1.79187 12.6567L1.79146 10.7122L2.03935 10.9601C2.71217 11.6341 3.56632 12.1455 4.5507 12.4092C7.53811 13.2097 10.6088 11.4369 11.4093 8.44944C11.495 8.12936 11.3051 7.80036 10.985 7.7146C10.6649 7.62883 10.3359 7.81878 10.2502 8.13886ZM11.2333 5.16095C11.3458 5.04841 11.409 4.89577 11.409 4.73662L11.4084 1.34307C11.4084 1.0117 11.1397 0.74311 10.8083 0.743164C10.477 0.743219 10.2084 1.01189 10.2084 1.34326L10.2088 3.28796L9.96091 3.04011C9.28811 2.36617 8.43377 1.85461 7.44948 1.59087C4.46207 0.790397 1.39138 2.56326 0.590906 5.55067C0.505141 5.87075 0.69509 6.19975 1.01517 6.28552C1.33525 6.37128 1.66425 6.18133 1.75002 5.86125C2.37896 3.514 4.79164 2.12104 7.13889 2.74998C7.91414 2.95771 8.5838 3.35905 9.11158 3.88783L9.36047 4.13672L7.41489 4.13672C7.08352 4.13672 6.81489 4.40535 6.81489 4.73672C6.81489 5.06809 7.08352 5.33672 7.41489 5.33672H10.809C10.9681 5.33672 11.1208 5.27349 11.2333 5.16095Z"
       fill="none" />
+  {:else if (type = 'option-dots')}
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      transform="translate(17)"
+      d="M2 0C2.82843 0 3.5 0.671573 3.5 1.5C3.5 2.32843 2.82843 3 2 3C1.17157 3 0.5 2.32843 0.5 1.5C0.5 0.671573 1.17157 0 2 0Z"
+      fill="none" />
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      transform="translate(17)"
+      d="M2 5.5C2.82843 5.5 3.5 6.17157 3.5 7C3.5 7.82843 2.82843 8.5 2 8.5C1.17157 8.5 0.5 7.82843 0.5 7C0.5 6.17157 1.17157 5.5 2 5.5Z"
+      fill="none" />
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      transform="translate(17)"
+      d="M3.5 12.5C3.5 11.6716 2.82843 11 2 11C1.17157 11 0.5 11.6716 0.5 12.5C0.5 13.3284 1.17157 14 2 14C2.82843 14 3.5 13.3284 3.5 12.5Z"
+      fill="none" />
   {/if}
 </svg>
diff --git a/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte b/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte
index 3d063b94da..5a178fe1ca 100644
--- a/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte
@@ -4,27 +4,24 @@
   import type { Address } from 'viem';
 
   import type { NFT } from '$libs/token';
-  import { fetchNFTImageUrl } from '$libs/token/fetchNFTImageUrl';
   import { truncateString } from '$libs/util/truncateString';
   import { network } from '$stores/network';
 
   export let nft: NFT;
 
-  let imageUrl: string | null = null;
+  const placeholderUrl = 'https://placehold.co/400x400.png';
+
+  let imageUrl: string = nft.metadata?.image || placeholderUrl;
+
   let chainId: number | undefined;
   let address: Address;
 
   $: if (nft) {
     chainId = get(network)?.id;
     if (chainId) {
-      fetchImage(nft);
       address = nft.addresses[chainId];
     }
   }
-
-  async function fetchImage(nft: NFT) {
-    imageUrl = await fetchNFTImageUrl(nft);
-  }
 </script>
 
 <div class="rounded max-w-[200px] border-2 border-primary-border m-5 max-h-[300px]">
diff --git a/packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte b/packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte
new file mode 100644
index 0000000000..a8091bdeec
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { NFT } from '$libs/token';
+
+  import { NFTCard } from '.';
+
+  export let nfts: NFT[] = [];
+</script>
+
+<div>
+  {#each nfts as nft}
+    <NFTCard {nft} />
+  {/each}
+</div>
diff --git a/packages/bridge-ui-v2/src/components/NFTCard/index.ts b/packages/bridge-ui-v2/src/components/NFTCard/index.ts
index 3fe76b67a5..207302799b 100644
--- a/packages/bridge-ui-v2/src/components/NFTCard/index.ts
+++ b/packages/bridge-ui-v2/src/components/NFTCard/index.ts
@@ -1 +1,2 @@
 export { default as NFTCard } from './NFTCard.svelte';
+export { default as NFTCardGrid } from './NFTCardGrid.svelte';
diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTInfoDialog.svelte b/packages/bridge-ui-v2/src/components/NFTList/NFTInfoDialog.svelte
new file mode 100644
index 0000000000..5e7d6563f7
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/NFTList/NFTInfoDialog.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  import { Button } from '$components/Button';
+  import { CloseButton } from '$components/CloseButton';
+  import type { NFT } from '$libs/token';
+  import { shortenAddress } from '$libs/util/shortenAddress';
+  import { uid } from '$libs/util/uid';
+  import { network } from '$stores/network';
+  const dialogId = `dialog-${uid()}`;
+
+  const placeholderUrl = 'https://placehold.co/600x600.png';
+
+  export let modalOpen = false;
+
+  export let nft: NFT;
+
+  const dispatch = createEventDispatcher();
+
+  const selectNFT = () => {
+    dispatch('selected');
+    closeModal();
+  };
+
+  const closeModal = () => {
+    modalOpen = false;
+  };
+</script>
+
+<dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
+  <div class="modal-box relative px-[24px] py-[35px] md:rounded-[20px] bg-neutral-background">
+    <CloseButton onClick={closeModal} />
+
+    <div class="f-col w-full space-y-[30px]">
+      <h3 class="title-body-bold">{$t('bridge.nft.step.import.nft_card.title')}</h3>
+
+      <img alt="placeholder nft" src={nft.metadata?.image || placeholderUrl} class="rounded-[20px] self-center" />
+      <div id="metadata">
+        <div class="f-between-center">
+          <div class="text-secondary-content">{$t('common.collection')}</div>
+          <div class="text-primary-content">{nft.name}</div>
+        </div>
+        <div class="f-between-center">
+          <div class="text-secondary-content">{$t('common.contract_address')}</div>
+          <div class="text-primary-content">
+            {$network?.id ? shortenAddress(nft.addresses[$network?.id], 10, 13) : ''}
+          </div>
+        </div>
+
+        <div class="f-between-center">
+          <div class="text-secondary-content">{$t('common.token_id')}</div>
+          <div class="text-primary-content">{nft.tokenId}</div>
+        </div>
+        <div class="f-between-center">
+          <div class="text-secondary-content">{$t('common.token_standard')}</div>
+          <div class="text-primary-content">{nft.type}</div>
+        </div>
+      </div>
+      <div class="f-col">
+        <Button
+          type="primary"
+          hasBorder={true}
+          class="px-[28px] py-[14px] rounded-full flex-1 w-full"
+          on:click={() => selectNFT()}>
+          {$t('bridge.nft.step.import.nft_card.select')}
+        </Button>
+
+        <button on:click={closeModal} class="flex mt-[16px] mb-0 justify-center link">
+          {$t('common.cancel')}
+        </button>
+      </div>
+    </div>
+  </div>
+</dialog>
diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte b/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte
index aa8536e04e..942738db4a 100644
--- a/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte
@@ -75,12 +75,13 @@
         <div>
           {#if nftsGroup.length > 0}
             <div class="collection-header">
-              <span class="font-bold">
+              <span class="font-bold text-primary-content">
                 {nftsGroup[0].name}
               </span>
-              <span class="badge badge-primary badge-outline badge-xs p-2">{nftsGroup[0].type}</span>
+              <span class="badge badge-primary badge-outline badge-xs px-[10px] h-[24px] ml-[10px]"
+                ><span class="text-xs">{nftsGroup[0].type}</span></span>
             </div>
-            <div class="token-ids my-2">
+            <div class="token-ids my-[16px]">
               {#each nftsGroup as nft}
                 {@const collectionAddress = nft.addresses[chainId]}
                 {#if collectionAddress === undefined}
@@ -99,7 +100,7 @@
             </div>
           {/if}
         </div>
-        <div class="h-sep" />
+        <div class="h-sep my-[30px]" />
       {/each}
     {/if}
   </div>
diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte b/packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte
index c1c388e5b3..189e59dee7 100644
--- a/packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { get } from 'svelte/store';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
+  import { Icon } from '$components/Icon';
   import { type NFT, TokenType } from '$libs/token';
-  import { fetchNFTImageUrl } from '$libs/token/fetchNFTImageUrl';
   import { noop } from '$libs/util/noop';
-  import { network } from '$stores/network';
+
+  import NftInfoDialog from './NFTInfoDialog.svelte';
 
   export let nft: NFT;
   export let collectionAddress: Address;
@@ -16,61 +16,69 @@
   export let toggleAddressCheckBox: (collectionAddress: string) => void = noop;
   export let selectable = false;
 
-  let imageUrl: string | null = null;
-  let imageLoaded = false;
-  let chainId: number | undefined;
-  const placeholderUrl = '/chains/taiko.svg';
+  let selected: boolean = false;
 
-  $: if (nft) {
-    chainId = get(network)?.id;
-    if (chainId) {
-      fetchImage(nft);
-    }
-  }
+  let modalOpen = false;
 
-  async function fetchImage(nft: NFT) {
-    imageUrl = await fetchNFTImageUrl(nft);
-  }
+  const placeholderUrl = 'https://placehold.co/400x400.png';
+
+  let imageUrl: string = nft.metadata?.image || placeholderUrl;
+  let imageLoaded = false;
+
+  const handleDialogSelection = () => {
+    selectNFT(nft);
+    selected = true;
+    modalOpen = false;
+  };
 
   function handleImageLoad() {
     imageLoaded = true;
   }
 </script>
 
-<div class="form-control flex">
-  <label class="cursor-pointer label">
+<div class="form-control flex h-[60px] my-[16px]">
+  <label class="cursor-pointer label space-x-[16px]">
+    <div>
+      {#if multiSelectEnabled && selectable}
+        <input
+          type="checkbox"
+          class="checkbox checkbox-secondary"
+          checked={checkedAddresses.get(collectionAddress) || false}
+          on:change={() => toggleAddressCheckBox(collectionAddress)} />
+      {:else if selectable}
+        <input
+          type="radio"
+          name="nft-radio"
+          checked={selected}
+          class="flex-none radio radio-secondary"
+          on:change={() => selectNFT(nft)} />
+      {/if}
+    </div>
     <div class="mr-2">
-      <div class="avatar">
-        <div class="w-10 mask mask-hexagon">
+      <div class="avatar h-[56px] w-[56px]">
+        <div class="rounded-[10px]">
           {#if !imageLoaded}
-            <img alt="placeholder" src={placeholderUrl} class="w-[40px] h-[40px] rounded animate-pulse" />
+            <img alt="placeholder" src={placeholderUrl} class="rounded animate-pulse" />
           {/if}
-          <img alt="placeholder nft" src={imageUrl || ''} class="w-[40px] h-[40px] rounded" on:load={handleImageLoad} />
-          <img alt="placeholder nft" src={imageUrl} class="w-[40px] h-[40px] rounded" />
+          <img alt="placeholder nft" src={imageUrl || ''} class=" rounded" on:load={handleImageLoad} />
         </div>
       </div>
     </div>
     <div class="f-col grow">
       {#if nft.metadata?.name}
-        <span class=" text-xs text-neutral-content">{nft.metadata?.name}</span>
+        <span class="text-xs text-neutral-content text-bold">{nft.metadata?.name}</span>
       {/if}
-      <span class=" text-xs text-neutral-content">{$t('common.id')}: {nft.tokenId}</span>
+      <span class=" text-xs text-neutral-content font-bold">{nft.tokenId}</span>
       {#if nft.type === TokenType.ERC1155}
         <span class=" text-xs text-neutral-content">{$t('common.balance')}: {nft.balance}</span>
       {/if}
     </div>
-    {#if multiSelectEnabled && selectable}
-      <input
-        type="checkbox"
-        class="checkbox checkbox-secondary"
-        checked={checkedAddresses.get(collectionAddress) || false}
-        on:change={() => toggleAddressCheckBox(collectionAddress)} />
-    {:else if selectable}
-      <input type="radio" name="nft-radio" class="flex-none radio radio-secondary" on:change={() => selectNFT(nft)} />
-    {/if}
+    <button on:click={() => (modalOpen = true)}><Icon type="option-dots" /></button>
   </label>
 </div>
 
+<NftInfoDialog {nft} bind:modalOpen on:selected={() => handleDialogSelection()} />
+
 <style>
   /* Todo: temporary test, remove or move */
   .animate-pulse {
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index 3c46d15d86..b9da9e47d4 100644
--- a/packages/bridge-ui-v2/src/i18n/en.json
+++ b/packages/bridge-ui-v2/src/i18n/en.json
@@ -2,26 +2,26 @@
   "bridge": {
     "actions": {
       "approve": {
-        "tx": {
-          "title": "Approval sent",
-          "message": "Track the {token} token approval status on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
+        "rejected": {
+          "title": "Request to approve rejected"
         },
         "success": {
-          "title": "Approved token",
-          "message": "You can now proceed to bridge {token}."
+          "message": "You can now proceed to bridge {token}.",
+          "title": "Approved token"
         },
-        "rejected": {
-          "title": "Request to approve rejected"
+        "tx": {
+          "message": "Track the {token} token approval status on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>.",
+          "title": "Approval sent"
         }
       },
       "bridge": {
-        "tx": {
-          "title": "Transaction sent",
-          "message": "Track the bridge status of your {token} <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
-        },
         "success": {
-          "title": "Transaction completed",
-          "message": "Your funds are being prepared for claiming on Taiko."
+          "message": "Your funds are being prepared for claiming on Taiko.",
+          "title": "Transaction completed"
+        },
+        "tx": {
+          "message": "Track the bridge status of your {token} <a href=\"{url}\" target=\"_blank\"><b>here</b></a>.",
+          "title": "Transaction sent"
         }
       },
       "nft_manual": "Add manually",
@@ -47,8 +47,8 @@
     },
     "errors": {
       "approve_error": {
-        "title": "Approval failed",
-        "message": "We encountered an issue while trying to approve this token."
+        "message": "We encountered an issue while trying to approve this token.",
+        "title": "Approval failed"
       },
       "approve_rejected": {
         "title": "Request to approve rejected by user"
@@ -71,12 +71,12 @@
         "title": "Allowance already set"
       },
       "send_erc20_error": {
-        "title": "Failed to send",
-        "message": "There was an issue attempting to send ERC20 token."
+        "message": "There was an issue attempting to send ERC20 token.",
+        "title": "Failed to send"
       },
       "send_message_error": {
-        "title": "Failed to send",
-        "message": "Please try again"
+        "message": "Please try again",
+        "title": "Failed to send"
       },
       "unknown_error": {
         "message": "An unexpected error has occurred. Please try again.",
@@ -87,6 +87,10 @@
       "step": {
         "confirm": "Confirm",
         "import": {
+          "nft_card": {
+            "select": "Select NFT",
+            "title": "NFT details"
+          },
           "scan_screen": {
             "description": "Don't see your NFTs? Try adding them manually!",
             "title": "Your NFTs ({number} items)"
@@ -136,7 +140,9 @@
     "id": "ID",
     "loading": "Loading",
     "name": "Name",
-    "ok": "Ok"
+    "ok": "Ok",
+    "token_id": "Token ID",
+    "token_standard": "Token standard"
   },
   "custom_recipient": {
     "placeholder": "Add custom recipient"
@@ -149,17 +155,17 @@
     },
     "description": "Mint test tokens.",
     "mint": {
-      "tx": {
-        "title": "Transaction sent",
-        "message": "Track the progress on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
+      "rejected": {
+        "message": "An error occurred while attempting to mint the token.",
+        "title": "Error minting token"
       },
       "success": {
-        "title": "Token minted successfully",
-        "message": "Check your updated balance on the Bridge page."
+        "message": "Check your updated balance on the Bridge page.",
+        "title": "Token minted successfully"
       },
-      "rejected": {
-        "title": "Error minting token",
-        "message": "An error occurred while attempting to mint the token."
+      "tx": {
+        "message": "Track the progress on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>.",
+        "title": "Transaction sent"
       }
     },
     "title": "Faucet",
@@ -209,6 +215,9 @@
       "disconnected": "Account disconnected",
       "required": "Please connect your wallet."
     },
+    "bridge": {
+      "nft_scanning": "Scanning for NFTs"
+    },
     "network": {
       "pending": {
         "message": "Please open your wallet to check the current status.",
@@ -221,9 +230,6 @@
       "required": "Source chain must be selected.",
       "required_dest": "Destination chain must be selected.",
       "switching": "Switching network"
-    },
-    "bridge": {
-      "nft_scanning": "Scanning for NFTs"
     }
   },
   "nav": {
@@ -285,34 +291,34 @@
   "transactions": {
     "actions": {
       "claim": {
-        "tx": {
-          "title": "Transaction sent",
-          "message": "Track the progress on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
-        },
-        "success": {
-          "title": "Transaction completed",
-          "message": "Your funds have been successfully claimed on {network}."
-        },
-        "rejected": {
-          "title": "Request to claim rejected."
-        },
         "dialog": {
           "description": "Insufficient balance to claim yourself. Please wait for the relayer to claim for you automatically. Refer to our guide for more information.",
           "link": "Go to guide",
           "title": "Please wait"
+        },
+        "rejected": {
+          "title": "Request to claim rejected."
+        },
+        "success": {
+          "message": "Your funds have been successfully claimed on {network}.",
+          "title": "Transaction completed"
+        },
+        "tx": {
+          "message": "Track the progress on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>.",
+          "title": "Transaction sent"
         }
       },
       "release": {
-        "tx": {
-          "title": "Transaction sent",
-          "message": "Track the progress on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
+        "rejected": {
+          "title": "Request to release rejected."
         },
         "success": {
-          "title": "Transaction completed",
-          "message": "Your funds have been released on {network}"
+          "message": "Your funds have been released on {network}",
+          "title": "Transaction completed"
         },
-        "rejected": {
-          "title": "Request to release rejected."
+        "tx": {
+          "message": "Track the progress on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>.",
+          "title": "Transaction sent"
         }
       }
     },
diff --git a/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts b/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts
index 2127151fa3..33dbc0cafe 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts
@@ -1,5 +1,5 @@
 import { fetchBalance, getPublicClient } from '@wagmi/core';
-import { type Address, zeroAddress } from 'viem';
+import { type Address, ContractFunctionExecutionError, zeroAddress } from 'viem';
 
 import { routingContractsMap } from '$bridgeConfig';
 import {
@@ -135,7 +135,10 @@ export async function checkBalanceToBridge({
       } as BridgeArgs);
     } catch (err) {
       console.error(err);
-      // TODO: catch errors
+      if (err instanceof ContractFunctionExecutionError) {
+        throw err;
+      }
+      // TODO: catch/rethrow other errors
     }
     // no need to deduct the amount we want to bridge from the balance as we pay in ETH
     if (estimatedCost > balance) {
diff --git a/packages/bridge-ui-v2/src/libs/bridge/fetchNFTs.ts b/packages/bridge-ui-v2/src/libs/bridge/fetchNFTs.ts
index 3b13cfa6a1..70753bf58e 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/fetchNFTs.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/fetchNFTs.ts
@@ -4,6 +4,7 @@ import type { ChainID } from '$libs/chain';
 import { eventIndexerApiServices } from '$libs/eventIndexer/initEventIndexer';
 import { type NFT, TokenType } from '$libs/token';
 import { checkOwnershipOfNFTs } from '$libs/token/checkOwnership';
+import { fetchNFTImageUrl } from '$libs/token/fetchNFTImageUrl';
 import { getTokenWithInfoFromAddress } from '$libs/token/getTokenWithInfoFromAddress';
 import { getLogger } from '$libs/util/logger';
 
@@ -63,19 +64,27 @@ export async function fetchNFTs(userAddress: Address, chainID: ChainID): Promise
   // Deduplicate based on address and chainID
   const deduplicatedNfts = deduplicateNFTs(nftArrays);
 
+  // Fetch image for each NFT
+  const promises = Promise.all(
+    deduplicatedNfts.map(async (nft) => {
+      const nftWithImage = await fetchNFTImageUrl(nft);
+      return nftWithImage;
+    }),
+  );
+  const nftsWithImage = await promises;
+
   // Double check the ownership
-  const ownsAllNfts = await checkOwnershipOfNFTs(nftArrays.flat(), userAddress, Number(chainID));
+  const ownsAllNfts = await checkOwnershipOfNFTs(nftsWithImage, userAddress, Number(chainID));
   log(`user ${userAddress} owns all NFTs:`, ownsAllNfts);
-
   // filter out the NFTs that the user doesn't own
-  const filteredNfts = deduplicatedNfts.filter((nft) => {
+  const filteredNfts = nftsWithImage.filter((nft) => {
     const isOwned = ownsAllNfts.successfulOwnershipChecks.find((result) => result.tokenId === nft.tokenId);
     return isOwned;
   });
 
-  if (filteredNfts.length !== deduplicatedNfts.length) {
+  if (filteredNfts.length !== nftsWithImage.length) {
     //TODO: handle this case differently? maybe show a warning to the user?
-    log(`found ${deduplicatedNfts.length - filteredNfts.length} tokens that the user doesn't own`);
+    log(`found ${nftsWithImage.length - filteredNfts.length} tokens that the user doesn't own`);
   }
 
   log(`found ${filteredNfts.length} unique NFTs from all indexers`, filteredNfts);
diff --git a/packages/bridge-ui-v2/src/libs/bridge/isSupportedNFTInterface.ts b/packages/bridge-ui-v2/src/libs/bridge/isSupportedNFTInterface.ts
new file mode 100644
index 0000000000..ae7d2fce14
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/isSupportedNFTInterface.ts
@@ -0,0 +1,97 @@
+// import { getContract } from "@wagmi/core";
+// import { get } from "svelte/store";
+import type { Address } from 'viem';
+
+// import { erc721VaultABI, erc1155VaultABI } from "$abi";
+// import { routingContractsMap } from "$bridgeConfig";
+// import { destNetwork } from "$components/Bridge/state";
+import type { TokenType } from '$libs/token';
+// import { getConnectedWallet } from "$libs/util/getConnectedWallet";
+// import { account } from '$stores/account';
+// import { network } from '$stores/network';
+
+// import type { NFTBridgeTransferOp } from ".";
+
+/**
+ * Checks if a NFT contract is supported by the vault contract by estimating the gas cost of a sendToken call
+ * @param tokenAddress
+ * @param tokenType
+ * @returns boolean
+ */
+export const isSupportedNFTInterface = async (
+  tokenAddress: Address,
+  tokenType: TokenType.ERC1155 | TokenType.ERC721,
+): Promise<boolean> => {
+  throw new Error(`Not implemented isSupportedNFTInterface: ${tokenAddress} ${tokenType}`);
+  // let interfaceSupported = false;
+
+  // const user = get(account).address;
+  // const srcChainId = get(network)?.id;
+  // const destChainId = get(destNetwork)?.id;
+
+  // if (!user || !srcChainId || !destChainId) throw new Error("User, srcChainId, and destChainId must be defined");
+
+  // const walletClient = await getConnectedWallet(srcChainId);
+
+  // if (tokenType === TokenType.ERC721) {
+  //     const dummyArgs: NFTBridgeTransferOp = {
+  //         to: user,
+  //         destChainId: BigInt(destChainId),
+  //         token: tokenAddress,
+  //         fee: 0n,
+  //         gasLimit: 0n,
+  //         refundTo: user,
+  //         memo: '',
+  //         tokenIds: [1n],
+  //         amounts: [0n],
+  //     }
+  //     const tokenVaultContract = getContract({
+  //         walletClient,
+  //         abi: erc721VaultABI,
+  //         address: routingContractsMap[srcChainId][destChainId].erc721VaultAddress,
+  //     });
+  //     try {
+  //         await tokenVaultContract.estimateGas.sendToken([dummyArgs], { value: 0n })
+  //         interfaceSupported = true;
+
+  //     } catch (e) {
+  //         if (e instanceof ContractFunctionExecutionError) {
+  //             if (e.cause.message.includes("VAULT_INTERFACE_NOT_SUPPORTED")) {
+  //                 interfaceSupported = false;
+
+  //             }
+  //         } else {
+  //             console.error(e);
+  //         }
+  //     }
+
+  // } else if (tokenType === TokenType.ERC1155) {
+  //     const dummyArgs: NFTBridgeTransferOp = {
+  //         to: user,
+  //         destChainId: BigInt(destChainId),
+  //         token: tokenAddress,
+  //         fee: 0n,
+  //         gasLimit: 0n,
+  //         refundTo: user,
+  //         memo: '',
+  //         tokenIds: [1n],
+  //         amounts: [1n],
+  //     }
+  //     const tokenVaultContract = getContract({
+  //         walletClient,
+  //         abi: erc1155VaultABI,
+  //         address: routingContractsMap[srcChainId][destChainId].erc1155VaultAddress,
+  //     });
+  //     tokenVaultContract.estimateGas.sendToken([dummyArgs], { value: 0n }).then(() => interfaceSupported = true).catch((e) => {
+  //         if (e instanceof ContractFunctionExecutionError) {
+  //             if (e.cause.message.includes("VAULT_INTERFACE_NOT_SUPPORTED")) {
+  //                 interfaceSupported = false;
+
+  //             }
+  //         } else {
+  //             console.error(e);
+  //         }
+  //     });
+  // }
+  // return interfaceSupported
+};
diff --git a/packages/bridge-ui-v2/src/libs/proof/Prover.ts b/packages/bridge-ui-v2/src/libs/proof/Prover.ts
index e0c457c992..b3cb623d3b 100644
--- a/packages/bridge-ui-v2/src/libs/proof/Prover.ts
+++ b/packages/bridge-ui-v2/src/libs/proof/Prover.ts
@@ -47,7 +47,7 @@ export class Prover {
     const key = await this._getKey(contractAddress, msgHash);
 
     // Unfortunately, since this method is stagnant, it hasn't been included into Viem lib
-    // as supported methods. Still stupported  by Alchemy, Infura and others.
+    // as supported methods. Still stupported  by Alchmey, Infura and others.
     // See https://eips.ethereum.org/EIPS/eip-1186
     // Following is a workaround to support this method.
     const clientWithEthProofRequest = client as ClientWithEthGetProofRequest;
diff --git a/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts b/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
index 54377a3ac4..416b4f7611 100644
--- a/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
+++ b/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
@@ -1,21 +1,105 @@
-import { parseNFTMetadata } from '$libs/util/parseNFTMetadata';
+// import { parseNFTMetadata } from '$libs/util/fetchNFTMetadata';
+import axios, { AxiosError, type AxiosResponse } from 'axios';
+
+import { checkForAdblocker } from '$libs/util/checkForAdblock';
+import { extractIPFSCidFromUrl } from '$libs/util/extractIPFSCidFromUrl';
+import { fetchNFTMetadata } from '$libs/util/fetchNFTMetadata';
+import { getFileExtension } from '$libs/util/getFileExtension';
+import { getLogger } from '$libs/util/logger';
 import { safeParseUrl } from '$libs/util/safeParseUrl';
 
 import type { NFT, NFTMetadata } from './types';
 
-const PLACEHOLDER_IMAGE_URL = '/chains/taiko.svg';
+const log = getLogger('libs:token:fetchNFTImageUrl');
 
-export const fetchNFTImageUrl = async (token: NFT) => {
+// TODO: very similar to fetchNFTMetadata, can we combine them?
+export const fetchNFTImageUrl = async (token: NFT): Promise<NFT> => {
   try {
     let metadata: NFTMetadata | null;
     if (!token.metadata) {
-      metadata = await parseNFTMetadata(token);
+      metadata = await fetchNFTMetadata(token);
     } else {
       metadata = token.metadata;
     }
-    if (!metadata?.image || metadata?.image === '') return PLACEHOLDER_IMAGE_URL;
-    return safeParseUrl(metadata?.image);
+    if (!metadata?.image || metadata?.image === '') throw new Error('No image found');
+    else {
+      const url = safeParseUrl(metadata.image);
+      if (!url) throw new Error(`Invalid image URL: ${metadata.image}`);
+
+      let image;
+      try {
+        image = await axios.get(url);
+      } catch (err) {
+        const error = err as AxiosError;
+        log(`error fetching image for ${token.name} id: ${token.tokenId}`, error);
+        //todo: handle different error scenarios?
+        image = await retry(url, token.tokenId);
+      }
+      if (!image) {
+        const isBlocked = await checkForAdblocker(url);
+        if (isBlocked) {
+          log(`The resource at ${url} is blocked by an adblocker`);
+          image = await retry(url, token.tokenId);
+        } else {
+          throw new Error(`No image found for ${token.name} id: ${token.tokenId}`);
+        }
+      }
+
+      if (!image || image instanceof Error) {
+        // Handle errorx
+        throw new Error(`No image found for ${token.name} id: ${token.tokenId}`);
+      }
+      if (token.metadata) {
+        token.metadata.image = url;
+      } else {
+        token.metadata = {
+          description: '',
+          external_url: '',
+          image: url,
+          name: '',
+        };
+      }
+    }
+    return token;
+  } catch (error) {
+    return token;
+  }
+};
+
+// TODO: we could retry several times with different gateways
+const retry = async (url: string, tokenId: number): Promise<AxiosResponse | Error> => {
+  let newUrl;
+  tokenId !== undefined && tokenId !== null ? (newUrl = useGateway(url, tokenId)) : (newUrl = useGateway(url, tokenId));
+  if (newUrl) {
+    const result = await retryRequest(newUrl);
+    if (result instanceof Error) {
+      return result;
+    }
+    return result;
+  }
+  return new Error(`No image found for ${url}`);
+};
+
+const retryRequest = async (newUrl: string): Promise<AxiosResponse | Error> => {
+  try {
+    log(`retrying with ${newUrl}`);
+    return await axios.get(newUrl);
   } catch (error) {
-    return PLACEHOLDER_IMAGE_URL;
+    log('retrying failed', error);
+    throw new Error(`No image found for ${newUrl}`);
+  }
+};
+
+//TODO: make this configurable via the config system?
+const useGateway = (url: string, tokenId: number) => {
+  const { cid } = extractIPFSCidFromUrl(url);
+  const extension = getFileExtension(url);
+  let gateway: string;
+  if (tokenId !== undefined && tokenId !== null && cid) {
+    gateway = `https://ipfs.io/ipfs/${cid}/${tokenId}.${extension}`;
+  } else {
+    log(`no valid CID found in ${url}`);
+    return null;
   }
+  return gateway;
 };
diff --git a/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.test.ts b/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.test.ts
index 218ff5b925..41fa6ddc16 100644
--- a/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.test.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.test.ts
@@ -3,14 +3,14 @@ import { type Address, zeroAddress } from 'viem';
 
 import { customToken } from '$customToken';
 import { UnknownTokenTypeError } from '$libs/error';
-import { parseNFTMetadata } from '$libs/util/parseNFTMetadata';
+import { fetchNFTMetadata } from '$libs/util/fetchNFTMetadata';
 
 import { detectContractType } from './detectContractType';
 import { getTokenWithInfoFromAddress } from './getTokenWithInfoFromAddress';
 import { TokenType } from './types';
 
 vi.mock('@wagmi/core');
-vi.mock('../util/parseNFTMetadata');
+vi.mock('../util/fetchNFTMetadata');
 
 vi.mock('../../generated/customTokenConfig', () => {
   const mockToken = {
@@ -115,7 +115,7 @@ describe('getTokenWithInfoFromAddress', () => {
         .mockResolvedValueOnce('Mock1155')
         .mockResolvedValueOnce('some/uri/123')
         .mockResolvedValueOnce(1337n);
-      vi.mocked(parseNFTMetadata).mockResolvedValue(mockedMetadata);
+      vi.mocked(fetchNFTMetadata).mockResolvedValue(mockedMetadata);
       // When
       const result = await getTokenWithInfoFromAddress({
         contractAddress: address,
@@ -144,7 +144,7 @@ describe('getTokenWithInfoFromAddress', () => {
       vi.mocked(detectContractType).mockResolvedValue(TokenType.ERC1155);
       vi.mocked(readContract).mockResolvedValueOnce('Mock1155').mockResolvedValueOnce('some/uri/123');
 
-      vi.mocked(parseNFTMetadata).mockResolvedValue(mockedMetadata);
+      vi.mocked(fetchNFTMetadata).mockResolvedValue(mockedMetadata);
 
       // When
       const result = await getTokenWithInfoFromAddress({ contractAddress: address, srcChainId: 1, tokenId: 123 });
@@ -172,7 +172,7 @@ describe('getTokenWithInfoFromAddress', () => {
         .mockResolvedValueOnce(null) // first uri call
         .mockResolvedValueOnce('some/uri/123');
 
-      vi.mocked(parseNFTMetadata).mockResolvedValue(mockedMetadata);
+      vi.mocked(fetchNFTMetadata).mockResolvedValue(mockedMetadata);
 
       // When
       const result = await getTokenWithInfoFromAddress({ contractAddress: address, srcChainId: 1, tokenId: 123 });
diff --git a/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.ts b/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.ts
index af4b6cf4a7..66aecd96dd 100644
--- a/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.ts
@@ -2,8 +2,8 @@ import { erc721ABI, fetchToken, readContract } from '@wagmi/core';
 import type { Address } from 'viem';
 
 import { erc1155ABI } from '$abi';
+import { fetchNFTMetadata } from '$libs/util/fetchNFTMetadata';
 import { getLogger } from '$libs/util/logger';
-import { parseNFTMetadata } from '$libs/util/parseNFTMetadata';
 import { safeReadContract } from '$libs/util/safeReadContract';
 
 import { detectContractType } from './detectContractType';
@@ -117,7 +117,7 @@ const getERC1155Info = async (
       balance: balance ? balance : 0,
     } as NFT;
     try {
-      const metadata = await parseNFTMetadata(token);
+      const metadata = await fetchNFTMetadata(token);
       if (metadata?.name !== '') name = metadata?.name;
       // todo: more metadata?
       token.metadata = metadata || undefined;
@@ -174,7 +174,7 @@ const getERC721Info = async (
     uri: uri ? uri.toString() : undefined,
   } as NFT;
   try {
-    const metadata = await parseNFTMetadata(token);
+    const metadata = await fetchNFTMetadata(token);
     token.metadata = metadata || undefined;
   } catch {
     return token;
diff --git a/packages/bridge-ui-v2/src/libs/util/fetchNFTMetadata.ts b/packages/bridge-ui-v2/src/libs/util/fetchNFTMetadata.ts
new file mode 100644
index 0000000000..2533d96020
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/fetchNFTMetadata.ts
@@ -0,0 +1,96 @@
+import axios, { AxiosError, type AxiosResponse } from 'axios';
+
+import { type NFT, type NFTMetadata, TokenType } from '$libs/token';
+import { safeParseUrl } from '$libs/util/safeParseUrl';
+
+import { checkForAdblocker } from './checkForAdblock';
+import { extractIPFSCidFromUrl } from './extractIPFSCidFromUrl';
+import { getLogger } from './logger';
+
+const log = getLogger('libs:token:fetchNFTMetadata');
+
+export const fetchNFTMetadata = async (token: NFT): Promise<NFTMetadata | null> => {
+  if (token.type !== TokenType.ERC721 && token.type !== TokenType.ERC1155) throw new Error('Not a NFT');
+
+  log(`fetching metadata for ${token.name} id: ${token.tokenId}`);
+
+  if (!token.uri) throw new Error('No token URI found');
+
+  if (token.uri.includes('{id}')) {
+    token.uri = token.uri.replace('{id}', token.tokenId.toString());
+  }
+
+  const url = safeParseUrl(token.uri);
+  if (!url) throw new Error(`Invalid token URI: ${token.uri}`);
+
+  let json;
+
+  try {
+    json = await axios.get(url);
+  } catch (err) {
+    const error = err as AxiosError;
+    log(`error fetching metadata for ${token.name} id: ${token.tokenId}`, error);
+    //todo: handle different error scenarios?
+    json = await retry(url, token.tokenId);
+  }
+  if (!json) {
+    const isBlocked = await checkForAdblocker(url);
+    if (isBlocked) {
+      log(`The resource at ${url} is blocked by an adblocker`);
+      json = await retry(url, token.tokenId);
+    } else {
+      throw new Error(`No metadata found for ${token.name} id: ${token.tokenId}`);
+    }
+  }
+
+  if (!json || json instanceof Error) {
+    // Handle error
+    throw new Error(`No metadata found for ${token.name} id: ${token.tokenId}`);
+  }
+  const metadata = {
+    description: json.data.description || '',
+    external_url: json.data.external_url || '',
+    image: json.data.image || '',
+    name: json.data.name || '',
+  };
+
+  log(`fetched metadata for ${token.name} id: ${token.tokenId}`, metadata);
+  return metadata;
+};
+
+// TODO: we could retry several times with different gateways
+const retry = async (url: string, tokenId: number): Promise<AxiosResponse | Error> => {
+  let newUrl;
+  tokenId !== undefined && tokenId !== null ? (newUrl = useGateway(url, tokenId)) : (newUrl = useGateway(url, tokenId));
+  if (newUrl) {
+    const result = await retryRequest(newUrl);
+    if (result instanceof Error) {
+      return result;
+    }
+    return result;
+  }
+  return new Error(`No metadata found for ${url}`);
+};
+
+const retryRequest = async (newUrl: string): Promise<AxiosResponse | Error> => {
+  try {
+    log(`retrying with ${newUrl}`);
+    return await axios.get(newUrl);
+  } catch (error) {
+    log('retrying failed', error);
+    throw new Error(`No metadata found for ${newUrl}`);
+  }
+};
+
+//TODO: make this configurable via the config system?
+const useGateway = (url: string, tokenId: number) => {
+  const { cid } = extractIPFSCidFromUrl(url);
+  let gateway: string;
+  if (tokenId !== undefined && tokenId !== null && cid) {
+    gateway = `https://ipfs.io/ipfs/${cid}/${tokenId}.json`;
+  } else {
+    log(`no valid CID found in ${url}`);
+    return null;
+  }
+  return gateway;
+};
diff --git a/packages/bridge-ui-v2/src/libs/util/getFileExtension.ts b/packages/bridge-ui-v2/src/libs/util/getFileExtension.ts
new file mode 100644
index 0000000000..d9beabfe8a
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/getFileExtension.ts
@@ -0,0 +1,4 @@
+export function getFileExtension(filename: string): string {
+  const parts: string[] = filename.split('.');
+  return parts.length > 1 ? parts[parts.length - 1] : '';
+}