Merge branch 'main' into chore/minimark-out-utils

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

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/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()
   }

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 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 = () => {

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')"
@@ -104,12 +109,13 @@
 
 <script setup lang="ts">
 import { NeoIcon, NeoButton } from '@kodadot1/brick'
-import { SwapStep } from '@/components/swap/types'
+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()
 const { swap } = storeToRefs(swapStore)
 
@@ -122,6 +128,8 @@ const toTokenToSwap = (item: SwapItem) => ({
   sn: item.sn,
 })
 
+const surcharge = computed(() => swap.value?.surcharge)
+
 const submit = () => {
   if (!swap.value) {
     return
@@ -132,16 +140,18 @@ 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'),
   })
 }
 
-watchEffect(async () => {
+watch([status, blockNumber], () => {
   if (status.value === TransactionStatus.Finalized && blockNumber.value) {
+    successMessage($i18n.t('swap.created'), {
+      footer: { icon: 'circle-info', label: $i18n.t('general.updateOnWebsiteSoon') },
+    })
     swapStore.updateSwap({ blockNumber: blockNumber.value })
-    await navigateTo({ name: getSwapStepRouteName(SwapStep.COUNTERPARTY) })
+    navigateTo(`/${urlPrefix.value}/u/${accountId.value}?tab=swaps&filter=outgoing`)
   }
 })
 </script>

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

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,11 +122,12 @@ export const infoMessage = (
   })
 }
 
-export const successMessage = message =>
+export const successMessage = (message: string, extraConfig?: { footer?: NotificationFooter }) =>
   showNotification({
     title: 'Success',
     message: message,
     params: notificationTypes.success,
+    ...extraConfig,
   })
 
 export const getReportIssueAction = (message: string) => {