feat: Create offer modal & signing design

components/common/shoppingCart/utils.ts

@@ -91,13 +91,14 @@ export const nftToListingCartItem = (
   }
 }
 
-export const nftToOfferItem = (nft: NFT & TokenId): MakingOfferItem => {
+export const nftToOfferItem = (nft: NFT & TokenId, highestOffer?: string): MakingOfferItem => {
   const { urlPrefix } = usePrefix()
 
   return {
     id: nft.id,
     name: nameWithIndex(nft.name, nft.sn),
     price: nft.price ?? '0',
+    highestOffer,
     urlPrefix: urlPrefix.value,
     collection: nft.collection,
     metadata: nft.metadata,

components/gallery/GalleryItem.vue

@@ -166,7 +166,10 @@
               v-if="nft && isAssetHub"
               :nft="nft"
             />
-            <GalleryItemAction :nft="nft" />
+            <GalleryItemAction
+              :nft="nft"
+              :highest-offer="nftHighestOffer"
+            />
             <UnlockableTag
               v-if="isUnlockable && !isMobile"
               :link="unlockLink"
@@ -258,6 +261,7 @@ const {
   nftAnimationMimeType,
   nftMimeType,
   nftResources,
+  nftHighestOffer,
 } = galleryItem
 const collection = computed(() => nft.value?.collection)
 

components/gallery/GalleryItemAction/GalleryItemAction.vue

@@ -9,6 +9,7 @@
     <GalleryItemOffer
       v-if="offerVisible(urlPrefix) && !isOwner && nft"
       :nft="nft"
+      :highest-offer="highestOffer"
       class="mt-2"
     />
 
@@ -34,11 +35,13 @@ import GalleryItemOffer from './GalleryItemActionType/GalleryItemOffer.vue'
 import GalleryItemPriceRelist from './GalleryItemActionType/GalleryItemRelist.vue'
 import GalleryItemPriceTransfer from './GalleryItemActionType/GalleryItemTransfer.vue'
 import { listVisible, offerVisible } from '@/utils/config/permission.config'
+import type { NFTOffer } from '@/composables/useNft'
 
 import type { NFT } from '@/components/rmrk/service/scheme'
 
 const props = defineProps<{
   nft: NFT | undefined
+  highestOffer: NFTOffer
 }>()
 
 const { urlPrefix } = usePrefix()

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="flex justify-end gallery-item-offer">
-    <NeoButton
-      :label="$t('transaction.offer')"
-      variant="k-blue"
-      size="large"
-      class="w-[calc(10rem+55px)]"
-      @click="openOfferModal"
-    />
-    <MakeOffer />
-  </div>
+  <GalleryItemPriceSection
+    :title="$t('offer.highestOffer')"
+    :price="highestOfferPrice"
+    class="mt-4"
+  >
+    <div class="flex justify-end gallery-item-offer">
+      <NeoButton
+        :label="$t('transaction.offer')"
+        variant="k-blue"
+        size="large"
+        class="w-[calc(10rem+55px)]"
+        @click="onMakeOfferClick"
+      />
+      <MakeOffer />
+    </div>
+  </GalleryItemPriceSection>
 </template>
 
 <script setup lang="ts">
@@ -18,22 +24,35 @@ import { nftToOfferItem } from '@/components/common/shoppingCart/utils'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useMakingOfferStore } from '@/stores/makeOffer'
 import MakeOffer from '@/components/offer/MakeOffer.vue'
+import GalleryItemPriceSection from '@/components/gallery/GalleryItemAction/GalleryItemActionSection.vue'
 
 const props = defineProps<{
   nft: NFT
+  highestOffer?: {
+    price: string
+  }
 }>()
 
 const preferencesStore = usePreferencesStore()
 const makeOfferStore = useMakingOfferStore()
+const { doAfterLogin } = useDoAfterlogin()
+
+const highestOfferPrice = computed(() => props.highestOffer?.price || '')
 
 const openOfferModal = () => {
   makeOfferStore.clear()
-  const item = nftToOfferItem(props.nft)
+  const item = nftToOfferItem(props.nft, highestOfferPrice.value)
   makeOfferStore.setItem(item)
 
   preferencesStore.setMakeOfferModalOpen(true)
 }
 
+const onMakeOfferClick = () => {
+  doAfterLogin({
+    onLoginSuccess: openOfferModal,
+  })
+}
+
 useModalIsOpenTracker({
   isOpen: computed(() => preferencesStore.makeOfferModalOpen),
   onChange: () => makeOfferStore.clear(),

components/gallery/useGalleryItem.ts

@@ -5,7 +5,7 @@ import { getNftMetadata } from '@/composables/useNft'
 import useSubscriptionGraphql from '@/composables/useSubscriptionGraphql'
 import { getCloudflareMp4 } from '@/services/imageWorker'
 import type { NFT } from '@/components/rmrk/service/scheme'
-import type { NFTWithMetadata, NftResources } from '@/composables/useNft'
+import type { NFTWithMetadata, NftResources, NFTOffer } from '@/composables/useNft'
 import { getMimeType } from '@/utils/gallery/media'
 
 interface NFTData {
@@ -20,6 +20,7 @@ export interface GalleryItem {
   nftAnimationMimeType: Ref<string>
   nftImage: Ref<string>
   nftResources: Ref<NftResources[] | undefined>
+  nftHighestOffer: Ref<NFTOffer | undefined>
 }
 
 export const useGalleryItem = (nftId?: string): GalleryItem => {
@@ -32,6 +33,7 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
   const nftMimeType = ref('')
   const nftMetadata = ref<NFTWithMetadata>()
   const nftResources = ref<NftResources[]>()
+  const nftHighestOffer = ref<NFTOffer>()
 
   const { params } = useRoute()
   const id = nftId || params.id
@@ -53,6 +55,14 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     },
   })
 
+  const { data: nftOfferData } = useGraphql({
+    queryName: 'highestOfferByNftId',
+    disabled: computed(() => urlPrefix.value !== 'ahp'),
+    variables: {
+      id,
+    },
+  })
+
   useSubscriptionGraphql({
     query: `   nft: nftEntityById(id: "${id}") {
       id
@@ -152,6 +162,12 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     })
   })
 
+  watch(nftOfferData as unknown as { offers: NFTOffer[] }, (newData) => {
+    if (newData && newData.offers && newData.offers[0]) {
+      nftHighestOffer.value = newData.offers[0]
+    }
+  })
+
   return {
     nft,
     nftImage,
@@ -160,5 +176,6 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     nftMimeType,
     nftMetadata,
     nftResources,
+    nftHighestOffer,
   }
 }

components/offer/MakeOffer.vue

@@ -32,6 +32,7 @@
       @close="onClose"
     >
       <ModalBody
+        v-if="preferencesStore.makeOfferModalOpen"
         modal-max-height="100vh"
         :title="$t('transaction.offer')"
         content-class="pt-4 pb-5 px-0"
@@ -49,6 +50,7 @@
           <AutoTeleportActionButton
             ref="autoTeleportButton"
             :actions="actions"
+            :amount="totalOfferAmount"
             :disabled="confirmButtonDisabled"
             :fees="{ forceActionAutoFees: true }"
             :label="confirmListingLabel"
@@ -83,6 +85,7 @@ import MakingOfferSingleItem from '@/components/offer/MakingOfferSingleItem.vue'
 import SuccessfulMakingOfferBody from '@/components/offer/SuccessfulMakingOfferBody.vue'
 import { offerVisible } from '@/utils/config/permission.config'
 import useAutoTeleportActionButton from '@/composables/autoTeleport/useAutoTeleportActionButton'
+import { sum } from '@/utils/math'
 
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
@@ -96,6 +99,7 @@ const {
   txHash,
   clear: clearTransaction,
 } = useTransaction()
+const { itemsInChain, hasInvalidOfferPrices, count } = storeToRefs(offerStore)
 
 const { isTransactionSuccessful } = useTransactionSuccessful({
   status,
@@ -104,7 +108,6 @@ const { isTransactionSuccessful } = useTransactionSuccessful({
 
 const { decimals } = useChain()
 const { $i18n } = useNuxtApp()
-const itemCount = ref(offerStore.count)
 const items = ref<MakingOfferItem[]>([])
 
 const isSuccessModalOpen = computed(
@@ -118,18 +121,22 @@ const getAction = (items: MakingOfferItem[]): Actions => {
     token: items.map(item => ({
       price: String(calculateBalance(Number(item.offerPrice), decimals.value)),
       collectionId: item.collection.id,
+      duration: item.offerExpiration || 7,
       nftSn: item.sn,
     } as TokenToOffer)),
-    duration: 300,
     successMessage: $i18n.t('transaction.price.offer') as string,
-    errorMessage: $i18n.t('transaction.price.error') as string,
+    errorMessage: $i18n.t('transaction.offerError') as string,
   }
 }
 
 const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded } = useAutoTeleportActionButton({
-  getActionFn: () => getAction(offerStore.itemsInChain),
+  getActionFn: () => getAction(itemsInChain.value),
 })
 
+const totalOfferAmount = computed(
+  () => calculateBalance(sum(itemsInChain.value.map(nft => Number(nft.offerPrice))), decimals.value),
+)
+
 const actions = computed<AutoTeleportAction[]>(() => [
   {
     action: action.value,
@@ -146,7 +153,7 @@ const actions = computed<AutoTeleportAction[]>(() => [
 const confirmButtonDisabled = computed(
   () =>
     hasOperationsDisabled(urlPrefix.value)
-    || offerStore.hasInvalidOfferPrices
+    || hasInvalidOfferPrices.value
     || !autoTeleportButton.value?.isReady,
 )
 
@@ -155,23 +162,30 @@ const confirmListingLabel = computed(() => {
     return $i18n.t('toast.unsupportedOperation')
   }
 
+  if (!totalOfferAmount.value) {
+    return $i18n.t('offer.emptyInput')
+  }
+
+  if (hasInvalidOfferPrices.value) {
+    return $i18n.t('offer.invalidPrice')
+  }
+
   if (!autoTeleportButton.value?.isReady) {
     return $i18n.t('autoTeleport.checking')
   }
   return $i18n.t('transaction.offer')
 })
 
 const submitOffer = () => {
-  return transaction(getAction(offerStore.itemsInChain))
+  return transaction(getAction(itemsInChain.value))
 }
 
 async function confirm({ autoteleport }: AutoTeleportActionButtonConfirmEvent) {
   try {
     clearTransaction()
 
     autoTeleport.value = autoteleport
-    itemCount.value = offerStore.count
-    items.value = [...offerStore.itemsInChain]
+    items.value = [...itemsInChain.value]
 
     if (!autoteleport) {
       await submitOffer()
@@ -194,9 +208,9 @@ const handleSuccessModalClose = () => {
 }
 
 watch(
-  () => offerStore.count,
+  () => count.value,
   () => {
-    if (offerStore.count === 0) {
+    if (count.value === 0) {
       closeMakingOfferModal()
     }
   },

components/offer/MakingOfferSingleItem.vue

@@ -6,24 +6,53 @@
           {{ itemPrice }}
         </div>
       </template>
+
+      <template #footer>
+        <hr class="my-4">
+
+        <div class="mb-2 flex justify-between">
+          <div>
+            {{ $t('offer.bestOffer') }}
+          </div>
+          <div>
+            {{ highestOfferPrice }}
+          </div>
+        </div>
+        <div class="flex justify-between">
+          <div>
+            {{ $t('offer.collectionFloorPrice') }}
+          </div>
+          <div>
+            {{ collectionFloorPrice }}
+          </div>
+        </div>
+      </template>
     </CartItemDetails>
 
-    <hr class="my-5">
+    <hr class="my-4">
 
     <div class="font-bold">
       {{ $t('offer.yourOfferAmount') }}
     </div>
 
-    <ListingCartPriceInput
-      v-model="offerStoreItem"
+    <OfferPriceInput
+      v-model="offerPriceStoreItem"
+      class="pt-2"
+    />
+    <div class="font-bold pt-4">
+      {{ $t('offer.expiration') }}
+    </div>
+
+    <OfferExpirationSelector
+      v-model="offerExpirationStoreItem"
       class="pt-2"
-      full-width
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import ListingCartPriceInput from '@/components/common/listingCart/shared/ListingCartPriceInput.vue'
+import OfferPriceInput from '@/components/offer/OfferPriceInput.vue'
+import OfferExpirationSelector from '@/components/offer/OfferExpirationSelector.vue'
 import { useMakingOfferStore } from '@/stores/makeOffer'
 import formatBalance from '@/utils/format/balance'
 import CartItemDetails from '@/components/common/CartItemDetails.vue'
@@ -49,10 +78,20 @@ const itemPrice = computed(() => formatWithBlank(Number(item.value.price)))
 const formatWithBlank = (value: number) => {
   return value ? formatBalance(value, decimals.value, chainSymbol.value) : '--'
 }
-const offerStoreItem = computed({
+const offerPriceStoreItem = computed({
   get: () => offerStore.getItem(item.value?.id)?.offerPrice,
   set: price => offerStore.updateItem({ id: item.value.id, offerPrice: price }),
 })
+const offerExpirationStoreItem = computed({
+  get: () => offerStore.getItem(item.value?.id)?.offerExpiration,
+  set: v => offerStore.updateItem({ id: item.value.id, offerExpiration: v }),
+})
+
+const highestOfferPrice = computed(() => formatWithBlank(Number(item.value.highestOffer) || 0) || '--')
+
+const collectionFloorPrice = computed(() =>
+  formatWithBlank(Number(item.value.collection.floorPrice?.[0]?.price || '0')) || '--',
+)
 
 watch(
   () => props.offerPrice,