Merge pull request #10909 from Jarsen136/issue-10843

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"
@@ -259,6 +262,7 @@ const {
   nftAnimationMimeType,
   nftMimeType,
   nftResources,
+  nftHighestOffer,
 } = galleryItem
 const collection = computed(() => nft.value?.collection)
 

components/gallery/GalleryItemAction/GalleryItemAction.vue

@@ -7,8 +7,10 @@
     />
     <!-- make offer -->
     <GalleryItemOffer
-      v-if="offerVisible(urlPrefix) && !isOwner && nft"
+      v-if="offerVisible(urlPrefix) && nft"
+      :hide-action-button="isOwner"
       :nft="nft"
+      :highest-offer="highestOffer"
       class="mt-2"
     />
 
@@ -34,11 +36,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 | undefined
 }>()
 
 const { urlPrefix } = usePrefix()

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue

@@ -1,14 +1,21 @@
 <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
+        v-if="!hideActionButton"
+        :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 +25,40 @@ 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'
+import type { NFTOffer } from '@/composables/useNft'
 
 const props = defineProps<{
   nft: NFT
+  highestOffer?: NFTOffer
+  hideActionButton?: boolean
 }>()
-
 const preferencesStore = usePreferencesStore()
 const makeOfferStore = useMakingOfferStore()
+const { doAfterLogin } = useDoAfterlogin()
+const { isCurrentOwner } = useAuth()
+const isOwner = computed(() => isCurrentOwner(props.nft?.currentOwner))
+
+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: () => {
+      if (!isOwner.value) {
+        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,8 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
   const nftMimeType = ref('')
   const nftMetadata = ref<NFTWithMetadata>()
   const nftResources = ref<NftResources[]>()
+  const nftHighestOffer = ref<NFTOffer>()
+  const isOfferIndexerDisabled = computed(() => urlPrefix.value !== 'ahp')
 
   const { params } = useRoute()
   const id = nftId || params.id
@@ -53,6 +56,14 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     },
   })
 
+  const { data: nftOfferData, refetch: refetchHighestOffer } = useGraphql({
+    queryName: 'highestOfferByNftId',
+    disabled: isOfferIndexerDisabled,
+    variables: {
+      id,
+    },
+  })
+
   useSubscriptionGraphql({
     query: `   nft: nftEntityById(id: "${id}") {
       id
@@ -66,6 +77,14 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     onChange: refetch,
   })
 
+  useSubscriptionGraphql({
+    query: `offers(where: {status_eq: ACTIVE, desired: {id_eq: "${id}"}}, orderBy: price_DESC, limit: 1) {
+      id
+    }`,
+    disabled: isOfferIndexerDisabled,
+    onChange: refetchHighestOffer,
+  })
+
   watch(data as unknown as NFTData, async (newData) => {
     const nftEntity = newData?.nftEntity
     if (!nftEntity) {
@@ -152,6 +171,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 +185,6 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     nftMimeType,
     nftMetadata,
     nftResources,
+    nftHighestOffer,
   }
 }