Merge pull request #11248 from Jarsen136/issue-11215

Swap Page Review Step follow up

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

components/swap/GridList.vue

@@ -11,19 +11,30 @@
       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
 
 const props = defineProps<{
   query: Record<string, any>
   selectable?: boolean
   withFilters?: boolean
+  surcharge?: SwapSurcharge
 }>()
 
 const route = useRoute()

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-background-color 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>

components/swap/review.vue

@@ -1,5 +1,5 @@
 <template>
-  <SwapLayout>
+  <SwapLayout class="pb-[100px]">
     <template #title>
       <SwapBannerTitle
         step="4/4"
@@ -22,13 +22,14 @@
               alt="Swap offer"
             >
           </div>
-          <p>
+          <p class="h-12">
             {{ $t('swap.reviewSelected') }}
           </p>
 
           <SwapGridList
             :query="offeredQuery"
             class="!my-10"
+            :surcharge="surcharge.direction === 'Send' ? surcharge : undefined"
           />
         </div>
 
@@ -50,49 +51,53 @@
               alt="Swap Receive"
             >
           </div>
-          <p>
+          <p class="h-12">
             {{ $t('swap.reviewCounterpartyAccept') }}
           </p>
 
           <SwapGridList
             :query="desiredQuery"
             class="!my-10"
+            :surcharge="surcharge?.direction === 'Receive' ? surcharge : undefined"
           />
         </div>
       </div>
+    </div>
+  </SwapLayout>
+  <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 !my-6 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')"
@@ -123,6 +128,8 @@ const toTokenToSwap = (item: SwapItem) => ({
   sn: item.sn,
 })
 
+const surcharge = computed(() => swap.value?.surcharge)
+
 const submit = () => {
   if (!swap.value) {
     return
@@ -133,7 +140,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,
   })
 }

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",