moved nft components to folder, fixed selection issues

packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte

@@ -325,14 +325,14 @@
           // idInputState = IDInputState.VALID;
           $selectedToken = token;
           await prefetchImage();
+          nextStep();
         })
         .catch((err) => {
           console.error(err);
           // detectedTokenType = null;
           // idInputState = IDInputState.INVALID;
           // invalidToken = true;
         });
-    nextStep();
   };
 
   // Whenever the user switches bridge types, we should reset the forms

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte

@@ -21,13 +21,13 @@
   import { ChainSelectorWrapper } from '$components/ChainSelector';
   import { IconFlipper } from '$components/Icon';
   import RotatingIcon from '$components/Icon/RotatingIcon.svelte';
-  import { LoadingMask } from '$components/LoadingMask';
-  import { NFTCardGrid } from '$components/NFTCard';
-  import { NFTList } from '$components/NFTList';
+  import { NFTDisplay } from '$components/NFTs';
+  import { NFTView } from '$components/NFTs/types';
   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';
 
@@ -39,6 +39,8 @@
   export let validating: boolean = false;
   export let contractAddress: Address | string = '';
 
+  export const prefetchImage = () => noop();
+
   let enteredIds: string = '';
   let scanning: boolean;
 
@@ -56,6 +58,8 @@
   let nftIdInputComponent: IdInput;
   let amountComponent: Amount;
 
+  let nftView: NFTView = NFTView.LIST;
+
   const reset = () => {
     nftView = NFTView.LIST;
     enteredIds = '';
@@ -64,12 +68,6 @@
     detectedTokenType = null;
   };
 
-  enum NFTView {
-    CARDS,
-    LIST,
-  }
-  let nftView: NFTView = NFTView.LIST;
-
   const changeNFTView = () => {
     if (nftView === NFTView.CARDS) {
       nftView = NFTView.LIST;
@@ -158,7 +156,8 @@
                 detectedTokenType = token.type;
                 idInputState = IDInputState.VALID;
                 $selectedToken = token;
-                // await prefetchImage();
+                $selectedNFTs = [token as NFT];
+                await prefetchImage();
               })
               .catch((err) => {
                 console.error(err);
@@ -313,17 +312,7 @@ Automatic NFT Input
           </div>
         </div>
         <div>
-          <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} />
-              {:else if nftView === NFTView.CARDS}
-                <NFTCardGrid bind:nfts={foundNFTs} />
-              {/if}
-            </div>
-          </div>
+          <NFTDisplay loading={scanning} nfts={foundNFTs} {nftView} />
         </div>
       </section>
 

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte

@@ -7,9 +7,7 @@
   import { destNetwork as destinationChain, selectedNFTs } 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 { noop } from '$libs/util/noop';
+  import { NFTDisplay } from '$components/NFTs';
   import { shortenAddress } from '$libs/util/shortenAddress';
   import { network } from '$stores/network';
 
@@ -101,13 +99,5 @@ NFT List or Card View
       <!-- <Icon type="list" fillClass="fill-primary-icon" size={24} vWidth={24} vHeight={24} /> -->
     </div>
   </div>
-  {#if nftView === NFTView.LIST}
-    <NFTList bind:nfts={nftsToDisplay} chainId={$network?.id} viewOnly />
-  {:else if nftView === NFTView.CARDS}
-    <div class="rounded-[20px] bg-neutral min-h-[200px] w-full p-2 f-center">
-      {#each nftsToDisplay as nft}
-        <NFTCard {nft} selectNFT={noop} viewOnly />
-      {/each}
-    </div>
-  {/if}
+  <NFTDisplay loading={false} nfts={$selectedNFTs} {nftView} viewOnly />
 </section>

packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { selectedNFTs } from '$components/Bridge/state';
+  import { Icon } from '$components/Icon';
+  import NftInfoDialog from '$components/NFTs/NFTInfoDialog.svelte';
+  import type { NFT } from '$libs/token';
+
+  export let nft: NFT;
+  export let selectNFT: (nft: NFT) => void;
+  export let viewOnly = false;
+
+  const placeholderUrl = 'https://placehold.co/400x400.png';
+
+  let imageUrl: string = nft.metadata?.image || placeholderUrl;
+
+  let isChecked = false;
+
+  let modalOpen = false;
+
+  const handleDialogSelection = () => {
+    selectNFT(nft);
+    modalOpen = false;
+  };
+
+  const handleImageClick = () => {
+    selectNFT(nft);
+  };
+
+  $: {
+    isChecked = $selectedNFTs ? $selectedNFTs.some((selected) => selected.tokenId === nft.tokenId) : false;
+  }
+</script>
+
+<div class="rounded-[10px] w-[120px] bg-white max-h-[160px] min-h-[160px] relative">
+  {#if !viewOnly}
+    <label for="nft-radio" class="cursor-pointer">
+      <input type="radio" class="hidden" name="nft-radio" checked={isChecked} on:change={() => selectNFT(nft)} />
+
+      {#if isChecked}
+        <div
+          class="selected-overlay rounded-[10px]"
+          role="button"
+          tabindex="0"
+          on:click={handleImageClick}
+          on:keydown={handleImageClick}>
+          <Icon type="check-circle" class="f-center " fillClass="fill-primary-brand" width={40} height={40} />
+        </div>
+      {/if}
+      <div role="button" tabindex="0" class="h-[125px]" on:click={handleImageClick} on:keydown={handleImageClick}>
+        <img alt={nft.name} src={imageUrl} class="rounded-t-[10px] h-[124px]" />
+      </div>
+    </label>
+  {:else}
+    <img alt={nft.name} src={imageUrl} class="rounded-t-[10px] h-[124px]" />
+  {/if}
+
+  <button
+    name="nftInfoDialog"
+    class="px-[10px] py-[8px] h-[36px] f-between-center w-full"
+    on:click={() => (modalOpen = true)}
+    ><span class="font-bold text-black">{nft.tokenId} </span>
+    <Icon type="option-dots" fillClass="fill-grey-500" /></button>
+</div>
+
+<NftInfoDialog {nft} bind:modalOpen on:selected={() => handleDialogSelection()} {viewOnly} />
+
+<style>
+  .selected-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(11, 16, 27, 0.7); /* Gray-900 0.7 opacity */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 3px solid var(--primary-brand);
+  }
+</style>

packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte → packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte

@@ -2,14 +2,13 @@
   import { get } from 'svelte/store';
 
   import { selectedNFTs } from '$components/Bridge/state';
+  import { NFTCard } from '$components/NFTs/NFTCards';
   import type { NFT } from '$libs/token';
   import { groupNFTByCollection } from '$libs/util/groupNFTByCollection';
   import { network } from '$stores/network';
 
-  import { NFTCard } from '.';
-
   export let nfts: NFT[] = [];
-  // export let selectedNFT: NFT[] | null = [];
+  export let viewOnly = false;
 
   const selectNFT = (nft: NFT) => {
     const currentChainId = get(network)?.id;
@@ -44,7 +43,7 @@
             {#if collectionAddress === undefined}
               <div>TODO: Address for {nft.name} is undefined</div>
             {:else}
-              <NFTCard {nft} {selectNFT} />
+              <NFTCard {nft} {selectNFT} {viewOnly} />
             {/if}
           {/each}
         </div>

packages/bridge-ui-v2/src/components/NFTs/NFTDisplay.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+
+  import { LoadingMask } from '$components/LoadingMask';
+  import type { NFT } from '$libs/token';
+  import { network } from '$stores/network';
+
+  import { NFTCardGrid } from './NFTCards';
+  import { NFTList } from './NFTList';
+  import { NFTView } from './types';
+
+  export let loading: boolean;
+
+  export let viewOnly = false;
+
+  export let nfts: NFT[] | null = [];
+
+  export let nftView: NFTView = NFTView.LIST;
+</script>
+
+<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 loading}
+      <LoadingMask spinnerClass="border-white" text={$t('messages.bridge.nft_scanning')} />
+    {:else if nftView === NFTView.LIST && nfts}
+      <NFTList bind:nfts chainId={$network?.id} {viewOnly} />
+    {:else if nftView === NFTView.CARDS && nfts}
+      <NFTCardGrid bind:nfts {viewOnly} />
+    {/if}
+  </div>
+</div>

packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte → packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte

@@ -4,11 +4,10 @@
 
   import { selectedNFTs } from '$components/Bridge/state';
   import { Icon } from '$components/Icon';
+  import NftInfoDialog from '$components/NFTs/NFTInfoDialog.svelte';
   import { type NFT, TokenType } from '$libs/token';
   import { noop } from '$libs/util/noop';
 
-  import NftInfoDialog from './NFTInfoDialog.svelte';
-
   export let nft: NFT;
   export let collectionAddress: Address;
   export let multiSelectEnabled = false;

packages/bridge-ui-v2/src/components/NFTs/NFTList/index.ts

@@ -0,0 +1,2 @@
+export { default as NFTList } from './NFTList.svelte';
+export { default as NFTListItem } from './NFTListItem.svelte';

packages/bridge-ui-v2/src/components/NFTs/index.ts

@@ -0,0 +1 @@
+export { default as NFTDisplay } from './NFTDisplay.svelte';

packages/bridge-ui-v2/src/components/NFTs/types.ts

@@ -0,0 +1,4 @@
+export enum NFTView {
+  CARDS,
+  LIST,
+}