moved selectedNFTs to store for state sync

taikoxyz · Oct 24, 2023 · 4b4339e · 4b4339e
1 parent 68517f0
commit 4b4339e
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 47 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
@@ -366,15 +366,14 @@
         <ImportStep
           bind:importMethod
           bind:canProceed
-          bind:selectedNFT
           bind:nftIdArray
           bind:contractAddress
           {foundNFTs}
           bind:scanned
           bind:validating={validatingImport} />
         <!-- REVIEW STEP -->
       {:else if activeStep === NFTSteps.REVIEW}
-        <ReviewStep bind:selectedNFT />
+        <ReviewStep />
         <!-- CONFIRM STEP -->
       {:else if activeStep === NFTSteps.CONFIRM}
         <div class="f-between-center gap-4">

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -11,7 +11,12 @@
   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, enteredAmount, selectedToken } from '$components/Bridge/state';
+  import {
+    destNetwork as destinationChain,
+    enteredAmount,
+    selectedNFTs,
+    selectedToken,
+  } from '$components/Bridge/state';
   import { Button } from '$components/Button';
   import { ChainSelectorWrapper } from '$components/ChainSelector';
   import { IconFlipper } from '$components/Icon';
@@ -26,7 +31,6 @@
   import { account } from '$stores/account';
   import { network } from '$stores/network';
 
-  export let selectedNFT: NFT[];
   export let nftIdArray: number[] = [];
   export let canProceed: boolean = false;
   export let scanned: boolean;
@@ -76,6 +80,7 @@
 
   const scanForNFTs = async () => {
     scanning = true;
+    $selectedNFTs = [];
     const accountAddress = $account?.address;
     const srcChainId = $network?.id;
     if (!accountAddress || !srcChainId) return;
@@ -90,7 +95,7 @@
 
     importMethod = importMethod === 'manual' ? 'scan' : 'manual';
     scanned = false;
-    selectedNFT = [];
+    $selectedNFTs = [];
     $selectedToken = null;
   };
 
@@ -198,7 +203,7 @@
     } else {
       canProceed = false;
     }
-  } else if (importMethod === 'scan' && selectedNFT.length > 0 && $destinationChain && scanned) {
+  } else if (importMethod === 'scan' && $selectedNFTs && $selectedNFTs.length > 0 && $destinationChain && scanned) {
     canProceed = true;
   } else {
     canProceed = false;
@@ -313,7 +318,7 @@ Automatic NFT Input
               {#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 />
+                <NFTList bind:nfts={foundNFTs} chainId={$network?.id} />
               {:else if nftView === NFTView.CARDS}
                 <NFTCardGrid bind:nfts={foundNFTs} />
               {/if}

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
@@ -4,20 +4,20 @@
   import { chainConfig } from '$chainConfig';
   import { ProcessingFee } from '$components/Bridge/ProcessingFee';
   import Recipient from '$components/Bridge/Recipient.svelte';
-  import { destNetwork as destinationChain } from '$components/Bridge/state';
+  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 type { NFT } from '$libs/token';
+  import { noop } from '$libs/util/noop';
   import { shortenAddress } from '$libs/util/shortenAddress';
   import { network } from '$stores/network';
 
-  export let selectedNFT: NFT[];
-
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
 
+  $: nftsToDisplay = $selectedNFTs ? $selectedNFTs : [];
+
   enum NFTView {
     CARDS,
     LIST,
@@ -42,7 +42,7 @@
     <div class="font-bold">{$t('common.contract_address')}</div>
     <div class="text-secondary-content">
       <ul>
-        {#each selectedNFT as nft}
+        {#each nftsToDisplay as nft}
           {@const currentChain = $network?.id}
           {#if currentChain && $destinationChain?.id}
             <li>
@@ -64,7 +64,7 @@
     <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}
+        {#each nftsToDisplay as nft}
           <li>{nft.tokenId}</li>
         {/each}
       </ul>
@@ -102,11 +102,11 @@ NFT List or Card View
     </div>
   </div>
   {#if nftView === NFTView.LIST}
-    <NFTList bind:nfts={selectedNFT} chainId={$network?.id} viewOnly />
+    <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 selectedNFT as nft}
-        <NFTCard {nft} />
+      {#each nftsToDisplay as nft}
+        <NFTCard {nft} selectNFT={noop} viewOnly />
       {/each}
     </div>
   {/if}

diff --git a/packages/bridge-ui-v2/src/components/Bridge/state.ts b/packages/bridge-ui-v2/src/components/Bridge/state.ts
@@ -18,6 +18,7 @@ import { type BridgeType, BridgeTypes } from './types';
 
 export const activeBridge = writable<BridgeType>(BridgeTypes.FUNGIBLE);
 export const selectedToken = writable<Maybe<Token | NFT>>(null);
+export const selectedNFTs = writable<Maybe<NFT[]>>(null);
 export const tokenBalance = writable<Maybe<FetchBalanceResult | bigint>>(null);
 export const enteredAmount = writable<bigint>(BigInt(0));
 export const destNetwork = writable<Maybe<Chain>>(null);

diff --git a/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte b/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+  import { selectedNFTs } from '$components/Bridge/state';
   import { Icon } from '$components/Icon';
   import NftInfoDialog from '$components/NFTList/NFTInfoDialog.svelte';
   import type { NFT } from '$libs/token';
 
   export let nft: NFT;
   export let selectNFT: (nft: NFT) => void;
-  export let selectedNFT: NFT[] | null;
+  export let viewOnly = false;
 
   const placeholderUrl = 'https://placehold.co/400x400.png';
 
@@ -25,33 +26,40 @@
   };
 
   $: {
-    isChecked = selectedNFT ? selectedNFT.some((selected) => selected.tokenId === nft.tokenId) : false;
+    isChecked = $selectedNFTs ? $selectedNFTs.some((selected) => selected.tokenId === nft.tokenId) : false;
   }
 </script>
 
 <div class="rounded-[10px] w-[120px] bg-white max-h-[161px] min-h-[161px] relative">
   <input type="radio" class="hidden" name="nft-radio" checked={isChecked} on:change={() => selectNFT(nft)} />
-  {#if isChecked}
-    <div class="selected-overlay">
-      <Icon type="check-circle" class="f-center " fillClass="fill-primary-brand" width={40} height={40} />
+  {#if !viewOnly}
+    {#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]" />
+    </div>
+  {:else}
+    <div class="h-[125px] border-0 p-0">
+      <img alt={nft.name} src={imageUrl} />
     </div>
   {/if}
-  <div
-    role="button"
-    tabindex="0"
-    class="h-[125px] border-0 p-0"
-    on:click={handleImageClick}
-    on:keydown={handleImageClick}>
-    <img alt={nft.name} src={imageUrl} />
-  </div>
   <div class="f-between-center p-[8px]">
     <span class="font-bold text-black">{nft.tokenId} </span>
     <button class="mr-[10px]" on:click={() => (modalOpen = true)}
       ><Icon type="option-dots" fillClass="fill-grey-500" /></button>
   </div>
 </div>
 
-<NftInfoDialog {nft} bind:modalOpen on:selected={() => handleDialogSelection()} />
+<NftInfoDialog {nft} bind:modalOpen on:selected={() => handleDialogSelection()} viewOnly />
 
 <style>
   /* Add styles for the overlay and checkmark icon */

diff --git a/packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte b/packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
   import { get } from 'svelte/store';
 
+  import { selectedNFTs } from '$components/Bridge/state';
   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 selectedNFT: NFT[] | null = [];
 
   const selectNFT = (nft: NFT) => {
     const currentChainId = get(network)?.id;
 
-    if (!selectedNFT || !currentChainId || !nft) return;
+    if (!currentChainId || !nft) return;
     const address = nft.addresses[currentChainId];
     const foundNFT = nfts.find((n) => n.addresses[currentChainId] === address && nft.tokenId === n.tokenId);
-    selectedNFT = foundNFT ? [foundNFT] : null;
+
+    if ($selectedNFTs && foundNFT && $selectedNFTs.includes(foundNFT)) {
+      $selectedNFTs = $selectedNFTs.filter((selected) => selected.tokenId !== nft.tokenId); // Deselect
+    } else {
+      $selectedNFTs = foundNFT ? [foundNFT] : null; // Select
+    }
   };
 </script>
 
@@ -38,7 +44,7 @@
             {#if collectionAddress === undefined}
               <div>TODO: Address for {nft.name} is undefined</div>
             {:else}
-              <NFTCard {nft} {selectNFT} {selectedNFT} />
+              <NFTCard {nft} {selectNFT} />
             {/if}
           {/each}
         </div>

diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTInfoDialog.svelte b/packages/bridge-ui-v2/src/components/NFTList/NFTInfoDialog.svelte
@@ -8,11 +8,13 @@
   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 viewOnly = false;
 
   export let nft: NFT;
 
@@ -58,17 +60,27 @@
         </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>
+        {#if viewOnly}
+          <Button
+            type="primary"
+            hasBorder={true}
+            class="px-[28px] py-[14px] rounded-full flex-1 w-full"
+            on:click={closeModal}>
+            {$t('common.ok')}
+          </Button>
+        {:else}
+          <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>
+          <button on:click={closeModal} class="flex mt-[16px] mb-0 justify-center link">
+            {$t('common.cancel')}
+          </button>
+        {/if}
       </div>
     </div>
   </div>

diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte b/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
+  import { selectedNFTs } from '$components/Bridge/state';
   import { PUBLIC_NFT_BATCH_TRANSFERS_ENABLED } from '$env/static/public';
   import type { NFT } from '$libs/token';
   import { groupNFTByCollection } from '$libs/util/groupNFTByCollection';
@@ -9,7 +10,7 @@
 
   export let nfts: NFT[];
   export let chainId: number | undefined;
-  export let selectedNFT: NFT[] | null = [];
+  // export let selectedNFT: NFT[] | null = [];
   export let viewOnly = false;
 
   const multiSelectEnabled = (PUBLIC_NFT_BATCH_TRANSFERS_ENABLED || 'false') === 'true';
@@ -37,11 +38,11 @@
   };
 
   const selectNFT = (nft: NFT) => {
-    if (!selectedNFT || !chainId || !nft) return;
+    if (!selectedNFTs || !chainId || !nft) return;
     const currentChainId = chainId;
     const address = nft.addresses[currentChainId];
     const foundNFT = nfts.find((n) => n.addresses[currentChainId] === address && nft.tokenId === n.tokenId);
-    selectedNFT = foundNFT ? [foundNFT] : null;
+    $selectedNFTs = foundNFT ? [foundNFT] : null;
   };
 
   const checkAllCheckboxes = () => {

diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte b/packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte
@@ -2,6 +2,7 @@
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
+  import { selectedNFTs } from '$components/Bridge/state';
   import { Icon } from '$components/Icon';
   import { type NFT, TokenType } from '$libs/token';
   import { noop } from '$libs/util/noop';
@@ -34,6 +35,10 @@
   function handleImageLoad() {
     imageLoaded = true;
   }
+
+  $: {
+    selected = $selectedNFTs ? $selectedNFTs.some((selected) => selected.tokenId === nft.tokenId) : false;
+  }
 </script>
 
 <div class="form-control flex h-[60px] my-[16px]">