fix selectedToken store, updated design

taikoxyz · Oct 25, 2023 · 6eb5987 · 6eb5987
1 parent 7409a28
commit 6eb5987
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 41 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
@@ -368,7 +368,7 @@
           bind:canProceed
           bind:nftIdArray
           bind:contractAddress
-          {foundNFTs}
+          bind:foundNFTs
           bind:scanned
           bind:validating={validatingImport} />
         <!-- REVIEW STEP -->
@@ -383,17 +383,12 @@
       <!-- 
         User Actions
       -->
-      {#if activeStep !== NFTSteps.IMPORT}
-        <Button
-          type="neutral"
-          class="px-[28px] py-[14px] rounded-full w-auto flex-1 bg-transparent !border border-primary-brand hover:border-primary-interactive-hover"
-          on:click={previousStep}>
-          <span class="body-bold">{$t('common.edit')}</span></Button>
-      {/if}
       {#if activeStep === NFTSteps.REVIEW}
-        <div class="f-between-center w-full gap-4">
-          <div class="h-sep" />
+        <div class="f-col w-full gap-4">
           <Actions {approve} {bridge} />
+          <button on:click={previousStep} class="flex justify-center py-3 link">
+            {$t('common.back')}
+          </button>
         </div>
       {:else if activeStep === NFTSteps.IMPORT}
         {#if importMethod === 'manual'}

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -217,6 +217,7 @@
 <!-- 
 Manual NFT Input 
 -->
+
 {#if importMethod === 'manual'}
   <div id="manualImport">
     <AddressInput

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,9 +4,9 @@
   import { chainConfig } from '$chainConfig';
   import { ProcessingFee } from '$components/Bridge/ProcessingFee';
   import Recipient from '$components/Bridge/Recipient.svelte';
-  import { destNetwork as destinationChain, selectedNFTs } from '$components/Bridge/state';
+  import { destNetwork as destinationChain, enteredAmount, selectedNFTs } from '$components/Bridge/state';
   import { ChainSelector } from '$components/ChainSelector';
-  import { Icon, IconFlipper } from '$components/Icon';
+  import { IconFlipper } from '$components/Icon';
   import { NFTDisplay } from '$components/NFTs';
   import { shortenAddress } from '$libs/util/shortenAddress';
   import { network } from '$stores/network';
@@ -34,7 +34,6 @@
 <div class="container mx-auto inline-block align-middle space-y-[25px]">
   <div class="flex justify-between mb-2 items-center">
     <div class="font-bold text-primary-content">{$t('bridge.nft.step.review.transfer_details')}</div>
-    <button class="flex justify-start link"> Edit </button>
   </div>
   <div>
     <div class="flex justify-between items-center">
@@ -59,7 +58,7 @@
                   href={`${chainConfig[$destinationChain?.id].urls.explorer}`}
                   target="_blank">
                   {shortenAddress(nft.addresses[currentChain], 8, 12)}
-                  <Icon type="arrow-top-right" fillClass="fill-primary-link" />
+                  <!-- <Icon type="arrow-top-right" fillClass="fill-primary-link" /> -->
                 </a>
               </li>
             {/if}
@@ -78,6 +77,11 @@
         </ul>
       </div>
     </div>
+
+    <div class="flex justify-between">
+      <div class="text-secondary-content">{$t('common.amount')}</div>
+      {$enteredAmount}
+    </div>
   </div>
 </div>
 

diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { get } from 'svelte/store';
 
-  import { selectedNFTs } from '$components/Bridge/state';
+  import { selectedNFTs, selectedToken } from '$components/Bridge/state';
   import { NFTCard } from '$components/NFTs/NFTCards';
   import type { NFT } from '$libs/token';
   import { groupNFTByCollection } from '$libs/util/groupNFTByCollection';
@@ -19,8 +19,10 @@
 
     if ($selectedNFTs && foundNFT && $selectedNFTs.includes(foundNFT)) {
       $selectedNFTs = $selectedNFTs.filter((selected) => selected.tokenId !== nft.tokenId); // Deselect
+      $selectedToken = null;
     } else {
       $selectedNFTs = foundNFT ? [foundNFT] : null; // Select
+      if ($selectedNFTs) $selectedToken = $selectedNFTs[0];
     }
   };
 </script>

diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
@@ -21,7 +21,7 @@
   const dispatch = createEventDispatcher();
 
   const selectNFT = () => {
-    dispatch('selected');
+    dispatch('selected', nft);
     closeModal();
   };
 

diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
-  import { selectedNFTs } from '$components/Bridge/state';
+  import { selectedNFTs, selectedToken } 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';
@@ -43,6 +43,8 @@
     const address = nft.addresses[currentChainId];
     const foundNFT = nfts.find((n) => n.addresses[currentChainId] === address && nft.tokenId === n.tokenId);
     $selectedNFTs = foundNFT ? [foundNFT] : null;
+
+    if ($selectedNFTs) $selectedToken = $selectedNFTs[0];
   };
 
   const checkAllCheckboxes = () => {

diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte
@@ -42,30 +42,26 @@
 
 <div class="form-control flex">
   <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 h-[56px] w-[56px]">
-        <div class="rounded-[10px]">
-          {#if !imageLoaded}
-            <img alt="placeholder" src={placeholderUrl} class="rounded animate-pulse" />
-          {/if}
-          <img alt="placeholder nft" src={imageUrl || ''} class=" rounded" on:load={handleImageLoad} />
-        </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 class="avatar h-[56px] w-[56px]">
+      <div class="rounded-[10px] bg-primary-background">
+        {#if !imageLoaded}
+          <img alt="placeholder" src={placeholderUrl} class="rounded animate-pulse" />
+        {/if}
+        <img alt="placeholder nft" src={imageUrl || ''} class=" rounded" on:load={handleImageLoad} />
       </div>
     </div>
     <div class="f-col grow">

diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
@@ -129,6 +129,7 @@
   "common": {
     "add": "Add",
     "address": "Address",
+    "amount": "Amount",
     "back": "Go back",
     "balance": "Balance",
     "cancel": "Cancel",