From 1822b7d7c42355f6c638a18b14c7b474fa3d0ca7 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Thu, 12 Dec 2024 21:05:23 +0100
Subject: [PATCH 1/9] fix: swap successful redirect

---
 components/swap/review.vue | 4 ++--
 locales/en.json            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/swap/review.vue b/components/swap/review.vue
index 5a7dcfccdb..0bf4882fb5 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -104,12 +104,12 @@
 
 <script setup lang="ts">
 import { NeoIcon, NeoButton } from '@kodadot1/brick'
-import { SwapStep } from '@/components/swap/types'
 
 const router = useRouter()
 const { $i18n } = useNuxtApp()
 const { transaction, isLoading, status, blockNumber } = useTransaction()
 const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
 const swapStore = useAtomicSwapStore()
 const { swap } = storeToRefs(swapStore)
 
@@ -141,7 +141,7 @@ const submit = () => {
 watchEffect(async () => {
   if (status.value === TransactionStatus.Finalized && blockNumber.value) {
     swapStore.updateSwap({ blockNumber: blockNumber.value })
-    await navigateTo({ name: getSwapStepRouteName(SwapStep.COUNTERPARTY) })
+    navigateTo(`/${urlPrefix.value}/u/${accountId.value}?tab=swaps&filter=outgoing`)
   }
 })
 </script>
diff --git a/locales/en.json b/locales/en.json
index f873c9430c..362f9ebbaa 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1823,7 +1823,7 @@
     "connectTrader": "Connect with a trader",
     "connectTraderInfo": "Enter the wallet address of the trader you want to engage with, and we’ll guide you through the secure process of making a swap offer.",
     "counterparty": "Counterparty",
-    "created": "Swap Created",
+    "created": "Swap created. Please wait a moment to see it in your swaps list.",
     "creatingSwap": "Creating Swap",
     "incomingSwap": "Incoming Swap",
     "landingSubtitle": "Koda Swap facilitates secure and straightforward exchanges of digital assets. Connect directly with traders and confidently navigate your NFT transactions with our reliable platform.",

From d0621da5dbc3986cca127a02d34de2b1a7bf9389 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Thu, 12 Dec 2024 22:08:25 +0100
Subject: [PATCH 2/9] feat: Swap Page Review Step follow up

---
 components/swap/review.vue | 69 ++++++++++++++++++++------------------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/components/swap/review.vue b/components/swap/review.vue
index 5a7dcfccdb..12eae073c6 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -1,5 +1,5 @@
 <template>
-  <SwapLayout>
+  <SwapLayout class="pb-[160px]">
     <template #title>
       <SwapBannerTitle
         step="4/4"
@@ -22,7 +22,7 @@
               alt="Swap offer"
             >
           </div>
-          <p>
+          <p class="h-12">
             {{ $t('swap.reviewSelected') }}
           </p>
 
@@ -50,7 +50,7 @@
               alt="Swap Receive"
             >
           </div>
-          <p>
+          <p class="h-12">
             {{ $t('swap.reviewCounterpartyAccept') }}
           </p>
 
@@ -60,39 +60,42 @@
           />
         </div>
       </div>
+    </div>
+  </SwapLayout>
+  <div class="fixed bottom-0 left-0 right-0 bg-background-color z-1">
+    <hr class="mb-14 mt-0">
+
+    <div
+      class="container is-fluid flex flex-col gap-6 justify-between items-center mb-8 md:flex-row md:my-[3.5rem]"
+    >
+      <div class="w-[300px]">
+        <TradeExpirationSelector
+          v-model="swap.duration"
+          position="auto"
+          class="pt-2"
+        />
+      </div>
 
-      <hr class="mb-14 mt-0">
-
-      <div
-        class="flex flex-col gap-6 justify-between items-center mb-8 md:flex-row md:my-[3.5rem]"
-      >
-        <div class="w-[300px]">
-          <TradeExpirationSelector
-            v-model="swap.duration"
-            position="auto"
-            class="pt-2"
-          />
-        </div>
-
-        <div class="flex gap-8 justify-end">
-          <NeoButton
-            class="!px-10"
-            size="large"
-            :label="$t('swap.modifyOffer')"
-            @click="router.push({ name: 'prefix-swap-id', params: { id: swap.counterparty }, query: { swapId: swap.id } })"
-          />
-
-          <NeoButton
-            class="!px-10"
-            variant="primary"
-            size="large"
-            :label="$t('swap.submit')"
-            @click="submit"
-          />
-        </div>
+      <div class="flex gap-8 justify-end">
+        <NeoButton
+          class="!px-10"
+          size="large"
+          no-shadow
+          :label="$t('swap.modifyOffer')"
+          @click="router.push({ name: 'prefix-swap-id', params: { id: swap.counterparty }, query: { swapId: swap.id } })"
+        />
+
+        <NeoButton
+          class="!px-10"
+          variant="primary"
+          no-shadow
+          size="large"
+          :label="$t('swap.submit')"
+          @click="submit"
+        />
       </div>
     </div>
-  </SwapLayout>
+  </div>
 
   <SigningModal
     :title="$t('swap.creatingSwap')"

From de39d6bbd20daca435c32410ac3cb723cffb2f73 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Thu, 12 Dec 2024 23:28:14 +0100
Subject: [PATCH 3/9] feat: surcharge card

---
 components/items/ItemsGrid/ItemsGrid.vue |  2 ++
 components/swap/GridList.vue             | 13 ++++++++-
 components/swap/SurchargeCard.vue        | 37 ++++++++++++++++++++++++
 components/swap/review.vue               |  6 +++-
 locales/en.json                          |  3 ++
 5 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 components/swap/SurchargeCard.vue

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 5144691e88..b1dbb4d64c 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -68,6 +68,8 @@
         />
       </div>
 
+      <slot name="additional-item" />
+
       <!-- skeleton on fetching next page -->
       <template v-if="isLoading || isFetchingData">
         <NftCardSkeleton
diff --git a/components/swap/GridList.vue b/components/swap/GridList.vue
index 62394878e8..310e5d758d 100644
--- a/components/swap/GridList.vue
+++ b/components/swap/GridList.vue
@@ -11,12 +11,22 @@
       grid-size="medium"
       :grid-section="gridSection"
       :hide-hover-action="!selectable"
-    />
+    >
+      <template
+        v-if="surcharge"
+        #additional-item
+      >
+        <SwapSurchargeCard
+          :surcharge="surcharge"
+        />
+      </template>
+    </ItemsGrid>
   </div>
 </template>
 
 <script lang="ts" setup>
 import ItemsGrid from '@/components/items/ItemsGrid/ItemsGrid.vue'
+import { type SwapSurcharge } from '@/composables/transaction/types'
 
 const gridSection = GridSection.PROFILE_GALLERY
 
@@ -24,6 +34,7 @@ const props = defineProps<{
   query: Record<string, any>
   selectable?: boolean
   withFilters?: boolean
+  surcharge?: SwapSurcharge
 }>()
 
 const route = useRoute()
diff --git a/components/swap/SurchargeCard.vue b/components/swap/SurchargeCard.vue
new file mode 100644
index 0000000000..db63195e50
--- /dev/null
+++ b/components/swap/SurchargeCard.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="nft-card bg-k-grey-light !px-4 !py-6 flex flex-col items-center justify-between gap-4">
+    <div class="text-lg text-center font-bold capitalize">
+      {{ $t('swap.surchargeTitle') }}
+    </div>
+
+    <div class="flex flex-col gap-1 items-center justify-center rounded-2xl bg-white w-full h-full">
+      <div class="text-[31px]">
+        {{ formatted }}
+      </div>
+
+      <div class="text-k-grey">
+        ~ {{ usd }} $USD
+      </div>
+    </div>
+
+    <div class="text-xs text-center capitalize">
+      {{ $t(surcharge?.direction === 'Send' ? 'swap.surchargeIncludedWithYourItems' : 'swap.surchargeIncludedWithTheirItems') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type SwapSurcharge } from '@/composables/transaction/types'
+
+const props = defineProps<{
+  surcharge: SwapSurcharge
+}>()
+
+const { decimals, chainSymbol } = useChain()
+
+const { usd, formatted } = useAmount(
+  computed(() => props.surcharge.amount),
+  decimals,
+  chainSymbol,
+)
+</script>
diff --git a/components/swap/review.vue b/components/swap/review.vue
index 12eae073c6..a8fe9c206f 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -29,6 +29,7 @@
           <SwapGridList
             :query="offeredQuery"
             class="!my-10"
+            :surcharge="surcharge?.direction === 'Send' ? surcharge : undefined"
           />
         </div>
 
@@ -57,6 +58,7 @@
           <SwapGridList
             :query="desiredQuery"
             class="!my-10"
+            :surcharge="surcharge?.direction === 'Receive' ? surcharge : undefined"
           />
         </div>
       </div>
@@ -125,6 +127,8 @@ const toTokenToSwap = (item: SwapItem) => ({
   sn: item.sn,
 })
 
+const surcharge = computed(() => swap.value?.surcharge)
+
 const submit = () => {
   if (!swap.value) {
     return
@@ -135,7 +139,7 @@ const submit = () => {
     offered: swap.value.offered.map(toTokenToSwap),
     desired: swap.value.desired.map(toTokenToSwap),
     duration: swap.value.duration,
-    surcharge: swap.value.surcharge,
+    surcharge: surcharge.value,
     urlPrefix: urlPrefix.value,
     successMessage: $i18n.t('swap.created'),
   })
diff --git a/locales/en.json b/locales/en.json
index f873c9430c..dbd21bd3e4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1840,6 +1840,9 @@
     "selectOffer": "Select your offer",
     "selectOfferSubtitle": "Select your NFTs you want to offer in this swap.",
     "submit": "Submit Swap Offer",
+    "surchargeIncludedWithTheirItems": "Included with their items",
+    "surchargeIncludedWithYourItems": "Included with your items",
+    "surchargeTitle": "Additional Funds",
     "swap": "Swap",
     "swapWithdrawl": "Swap Cancelation",
     "youOffer": "You offer",

From cc2c26fde57dbc4ddf6434c1acd40174c98ab655 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Thu, 12 Dec 2024 23:41:16 +0100
Subject: [PATCH 4/9] fix: stick footer

---
 components/swap/review.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/swap/review.vue b/components/swap/review.vue
index a8fe9c206f..ef6da5eb25 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -1,5 +1,5 @@
 <template>
-  <SwapLayout class="pb-[160px]">
+  <SwapLayout class="pb-[100px]">
     <template #title>
       <SwapBannerTitle
         step="4/4"
@@ -64,11 +64,11 @@
       </div>
     </div>
   </SwapLayout>
-  <div class="fixed bottom-0 left-0 right-0 bg-background-color z-1">
-    <hr class="mb-14 mt-0">
+  <div class="fixed bottom-0 left-0 right-0 bg-background-color z-[100]">
+    <hr class="m-0">
 
     <div
-      class="container is-fluid flex flex-col gap-6 justify-between items-center mb-8 md:flex-row md:my-[3.5rem]"
+      class="container is-fluid flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
     >
       <div class="w-[300px]">
         <TradeExpirationSelector

From 3dea28a83a46436635887c560251910b92abc423 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:53:09 +0100
Subject: [PATCH 5/9] fix: dark mode card

---
 components/swap/SurchargeCard.vue | 4 ++--
 components/swap/review.vue        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/swap/SurchargeCard.vue b/components/swap/SurchargeCard.vue
index db63195e50..e97bd7f3ee 100644
--- a/components/swap/SurchargeCard.vue
+++ b/components/swap/SurchargeCard.vue
@@ -4,7 +4,7 @@
       {{ $t('swap.surchargeTitle') }}
     </div>
 
-    <div class="flex flex-col gap-1 items-center justify-center rounded-2xl bg-white w-full h-full">
+    <div class="flex flex-col gap-1 items-center justify-center rounded-2xl bg-background-color w-full h-full">
       <div class="text-[31px]">
         {{ formatted }}
       </div>
@@ -15,7 +15,7 @@
     </div>
 
     <div class="text-xs text-center capitalize">
-      {{ $t(surcharge?.direction === 'Send' ? 'swap.surchargeIncludedWithYourItems' : 'swap.surchargeIncludedWithTheirItems') }}
+      {{ $t(surcharge.direction === 'Send' ? 'swap.surchargeIncludedWithYourItems' : 'swap.surchargeIncludedWithTheirItems') }}
     </div>
   </div>
 </template>
diff --git a/components/swap/review.vue b/components/swap/review.vue
index ef6da5eb25..e72e3d4220 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -29,7 +29,7 @@
           <SwapGridList
             :query="offeredQuery"
             class="!my-10"
-            :surcharge="surcharge?.direction === 'Send' ? surcharge : undefined"
+            :surcharge="surcharge.direction === 'Send' ? surcharge : undefined"
           />
         </div>
 

From 664ec158b675773dd1d42d939c1f3ef0fa7be3d6 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Fri, 13 Dec 2024 19:54:24 +0100
Subject: [PATCH 6/9] feat: swap success toast

---
 components/swap/review.vue | 9 ++++++---
 locales/en.json            | 2 +-
 utils/notification.ts      | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/swap/review.vue b/components/swap/review.vue
index 0bf4882fb5..e20accfa35 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -104,10 +104,11 @@
 
 <script setup lang="ts">
 import { NeoIcon, NeoButton } from '@kodadot1/brick'
+import { successMessage } from '@/utils/notification'
 
 const router = useRouter()
 const { $i18n } = useNuxtApp()
-const { transaction, isLoading, status, blockNumber } = useTransaction()
+const { transaction, isLoading, status, blockNumber } = useTransaction({ disableSuccessNotification: true })
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 const swapStore = useAtomicSwapStore()
@@ -134,12 +135,14 @@ const submit = () => {
     duration: swap.value.duration,
     surcharge: swap.value.surcharge,
     urlPrefix: urlPrefix.value,
-    successMessage: $i18n.t('swap.created'),
   })
 }
 
-watchEffect(async () => {
+watch([status, blockNumber], () => {
   if (status.value === TransactionStatus.Finalized && blockNumber.value) {
+    successMessage($i18n.t('swap.created'), {
+      footer: computed(() => ({ icon: 'circle-info', label: $i18n.t('general.updateOnWebsiteSoon') })),
+    })
     swapStore.updateSwap({ blockNumber: blockNumber.value })
     navigateTo(`/${urlPrefix.value}/u/${accountId.value}?tab=swaps&filter=outgoing`)
   }
diff --git a/locales/en.json b/locales/en.json
index 362f9ebbaa..f873c9430c 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1823,7 +1823,7 @@
     "connectTrader": "Connect with a trader",
     "connectTraderInfo": "Enter the wallet address of the trader you want to engage with, and we’ll guide you through the secure process of making a swap offer.",
     "counterparty": "Counterparty",
-    "created": "Swap created. Please wait a moment to see it in your swaps list.",
+    "created": "Swap Created",
     "creatingSwap": "Creating Swap",
     "incomingSwap": "Incoming Swap",
     "landingSubtitle": "Koda Swap facilitates secure and straightforward exchanges of digital assets. Connect directly with traders and confidently navigate your NFT transactions with our reliable platform.",
diff --git a/utils/notification.ts b/utils/notification.ts
index b22b136b4b..77cac5d2e0 100644
--- a/utils/notification.ts
+++ b/utils/notification.ts
@@ -120,11 +120,12 @@ export const infoMessage = (
   })
 }
 
-export const successMessage = message =>
+export const successMessage = (message: string, extraConfig?: { footer?: Ref<Omit<NotificationAction, 'url'> | undefined> }) =>
   showNotification({
     title: 'Success',
     message: message,
     params: notificationTypes.success,
+    ...extraConfig,
   })
 
 export const getReportIssueAction = (message: string) => {

From 2bfc20f1bf83f6932d8ffc8dce3db090e7cad2ae Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Sun, 15 Dec 2024 14:18:44 +0100
Subject: [PATCH 7/9] chore: notification type

---
 components/common/Notification.vue | 2 +-
 components/swap/review.vue         | 2 +-
 utils/notification.ts              | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/common/Notification.vue b/components/common/Notification.vue
index 39edd71e90..56c892a308 100644
--- a/components/common/Notification.vue
+++ b/components/common/Notification.vue
@@ -69,7 +69,7 @@ const props = withDefaults(
     action?: MaybeRef<NotificationAction | undefined>
     holdTimer?: Ref<boolean>
     icon?: Ref<NeoMessageIconVariant | undefined>
-    footer?: Ref<Omit<NotificationAction, 'url'> | undefined>
+    footer?: NotificationFooter
   }>(),
   {
     variant: 'success',
diff --git a/components/swap/review.vue b/components/swap/review.vue
index e20accfa35..38bc8eb514 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -141,7 +141,7 @@ const submit = () => {
 watch([status, blockNumber], () => {
   if (status.value === TransactionStatus.Finalized && blockNumber.value) {
     successMessage($i18n.t('swap.created'), {
-      footer: computed(() => ({ icon: 'circle-info', label: $i18n.t('general.updateOnWebsiteSoon') })),
+      footer: { icon: 'circle-info', label: $i18n.t('general.updateOnWebsiteSoon') },
     })
     swapStore.updateSwap({ blockNumber: blockNumber.value })
     navigateTo(`/${urlPrefix.value}/u/${accountId.value}?tab=swaps&filter=outgoing`)
diff --git a/utils/notification.ts b/utils/notification.ts
index 77cac5d2e0..2994987dc0 100644
--- a/utils/notification.ts
+++ b/utils/notification.ts
@@ -10,6 +10,8 @@ import MessageNotify from '@/components/MessageNotify.vue'
 
 export type NotificationAction = { label: string, url: string, icon?: string }
 
+export type NotificationFooter = MaybeRef<Omit<NotificationAction, 'url'> | undefined>
+
 type Params = {
   variant: NeoMessageVariant
   duration?: number
@@ -50,7 +52,7 @@ export const showNotification = ({
   action?: MaybeRef<NotificationAction | undefined>
   holdTimer?: Ref<boolean>
   icon?: Ref<NeoMessageIconVariant | undefined>
-  footer?: Ref<Omit<NotificationAction, 'url'> | undefined>
+  footer?: NotificationFooter
 }) => {
   if (params === notificationTypes.danger) {
     consola.error('[Notification Error]', message)
@@ -120,7 +122,7 @@ export const infoMessage = (
   })
 }
 
-export const successMessage = (message: string, extraConfig?: { footer?: Ref<Omit<NotificationAction, 'url'> | undefined> }) =>
+export const successMessage = (message: string, extraConfig?: { footer?: NotificationFooter }) =>
   showNotification({
     title: 'Success',
     message: message,

From 819e80f4d57cc00606d614f0155f14b626531364 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Mon, 16 Dec 2024 10:13:46 +0500
Subject: [PATCH 8/9] fix(swaps): swap item is `selected`  in collection grid

---
 components/items/ItemsGrid/ItemsGridImage.vue | 29 +++++--------------
 .../items/ItemsGrid/useAtomicSwapAction.ts    |  2 +-
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 9a3a40202b..31cf805c1e 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -10,13 +10,7 @@
     :show-timestamp="showTimestamp"
     :collection-popover-hide="collectionPopoverHide"
     :lazy-loading="lazyLoading"
-    :class="{
-      'in-cart-border':
-        shoppingCartStore.isItemInCart(nft.id)
-        || listingCartStore.isItemInCart(nft.id)
-        || isAtomicSwapItemSelected
-      ,
-    }"
+    :class="{ 'in-cart-border': shoppingCartStore.isItemInCart(nft.id) || isSelectActionItemInCart }"
     :show-action-on-hover="!showActionSection"
     :link="NuxtLink"
     bind-key="to"
@@ -58,15 +52,15 @@
         </NeoButton>
       </div>
       <div
-        v-else-if="showSelect"
+        v-else-if="showSelectAction"
         class="flex"
       >
         <NeoButton
-          :label="selectLabel"
+          :label="selectActionLabel"
           data-testid="item-buy"
           no-shadow
           class="flex-grow"
-          @click.prevent="onSelect"
+          @click.prevent="onSelectAction"
         />
       </div>
     </template>
@@ -165,20 +159,13 @@ const onClickShoppingCart = () => {
 
 const onClickListingCart = () => listNftByNftWithMetadata(props.nft, { toggle: true })
 
-const selectLabel = computed(() => {
-  const selected = showAtomicSwapAction.value ? isAtomicSwapItemSelected.value : listingCartStore.isItemInCart(props.nft.id)
-  return selected ? $i18n.t('remove') : $i18n.t('select')
-})
+const isSelectActionItemInCart = computed(() => isAtomicSwapItemSelected.value || listingCartStore.isItemInCart(props.nft.id))
 
-const showSelect = computed(() => {
-  if (showAtomicSwapAction.value) {
-    return true
-  }
+const selectActionLabel = computed(() => isSelectActionItemInCart.value ? $i18n.t('remove') : $i18n.t('select'))
 
-  return isOwner.value && !props.hideListing
-})
+const showSelectAction = computed(() => showAtomicSwapAction.value || (isOwner.value && !props.hideListing))
 
-const onSelect = () => {
+const onSelectAction = () => {
   if (showAtomicSwapAction.value) {
     onAtomicSwapSelect()
   }
diff --git a/components/items/ItemsGrid/useAtomicSwapAction.ts b/components/items/ItemsGrid/useAtomicSwapAction.ts
index 3354453767..164655a7d9 100644
--- a/components/items/ItemsGrid/useAtomicSwapAction.ts
+++ b/components/items/ItemsGrid/useAtomicSwapAction.ts
@@ -11,7 +11,7 @@ export default (nft: NFTWithMetadata) => {
   const showAtomicSwapAction = computed(() => ATOMIC_SWAP_PAGES.includes(routeName.value))
 
   const isItemSelected = computed(() => {
-    return step.value === SwapStep.REVIEW
+    return !showAtomicSwapAction.value || step.value === SwapStep.REVIEW
       ? false
       : [...swap.value.desired, ...swap.value.offered].flat().some(item => item.id === nft.id)
   })

From 6339ecff50022ab354287c85219b0b443dc17c1e Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Mon, 16 Dec 2024 10:31:16 +0500
Subject: [PATCH 9/9] ref(useAtomicSwapAction.ts): clearer computed variables

---
 components/items/ItemsGrid/useAtomicSwapAction.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/items/ItemsGrid/useAtomicSwapAction.ts b/components/items/ItemsGrid/useAtomicSwapAction.ts
index 164655a7d9..47df7e7e9b 100644
--- a/components/items/ItemsGrid/useAtomicSwapAction.ts
+++ b/components/items/ItemsGrid/useAtomicSwapAction.ts
@@ -8,12 +8,12 @@ export default (nft: NFTWithMetadata) => {
 
   const routeName = computed(() => route.name?.toString() as string)
 
-  const showAtomicSwapAction = computed(() => ATOMIC_SWAP_PAGES.includes(routeName.value))
+  const showAtomicSwapAction = computed(() => ATOMIC_SWAP_PAGES.includes(routeName.value) && step.value !== SwapStep.REVIEW)
 
   const isItemSelected = computed(() => {
-    return !showAtomicSwapAction.value || step.value === SwapStep.REVIEW
-      ? false
-      : [...swap.value.desired, ...swap.value.offered].flat().some(item => item.id === nft.id)
+    return showAtomicSwapAction.value
+      ? [...swap.value.desired, ...swap.value.offered].flat().some(item => item.id === nft.id)
+      : false
   })
 
   const onAtomicSwapSelect = () => {