feat: create offer on AssetHub

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -56,7 +56,7 @@
 
       <NeoButton
         :label="autoTeleportLabel"
-        variant="primary"
+        :variant="buttonVariant"
         no-shadow
         :shiny="shiny"
         :disabled="isDisabled"
@@ -96,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoSwitch } from '@kodadot1/brick'
+import { NeoButton, NeoSwitch, type NeoButtonVariant } from '@kodadot1/brick'
 import AutoTeleportWelcomeModal from './AutoTeleportWelcomeModal.vue'
 import type { ActionlessInteraction } from './utils'
 import { getActionDetails } from './utils'
@@ -133,6 +133,7 @@ const props = withDefaults(
     loading?: boolean
     shiny?: boolean
     earlySuccess?: boolean
+    buttonVariant?: NeoButtonVariant
   }>(),
   {
     autoCloseModalDelayModal: undefined,
@@ -146,6 +147,7 @@ const props = withDefaults(
     loading: false,
     shiny: false,
     earlySuccess: true,
+    buttonVariant: 'primary',
   },
 )
 

components/common/shoppingCart/utils.ts

@@ -6,6 +6,7 @@ import { sum } from '@/utils/math'
 import type { NFT, TokenId } from '@/components/rmrk/service/scheme'
 import { chainPropListOf } from '@/utils/config/chain.config'
 import { nameWithIndex } from '@/utils/nft'
+import type { MakingOfferItem } from '@/components/offer/types'
 
 export const prefixToToken = {
   ksm: 'KSM',
@@ -90,6 +91,22 @@ export const nftToListingCartItem = (
   }
 }
 
+export const nftToOfferItem = (nft: NFT & TokenId): MakingOfferItem => {
+  const { urlPrefix } = usePrefix()
+
+  return {
+    id: nft.id,
+    name: nameWithIndex(nft.name, nft.sn),
+    price: nft.price ?? '0',
+    urlPrefix: urlPrefix.value,
+    collection: nft.collection,
+    metadata: nft.metadata,
+    meta: nft.meta,
+    sn: nft.sn,
+    currentOwner: nft.currentOwner,
+  }
+}
+
 export const shoppingCartItemToListingCartItem = (
   item: ShoppingCartItem,
   floor = '',

components/gallery/GalleryItemAction/GalleryItemAction.vue

@@ -5,6 +5,12 @@
       v-if="!isOwner && nft"
       :nft="nft"
     />
+    <!-- make offer -->
+    <GalleryItemOffer
+      v-if="offerVisible(urlPrefix) && !isOwner && nft"
+      :nft="nft"
+      class="mt-2"
+    />
 
     <!-- change price as an owner -->
     <GalleryItemPriceRelist
@@ -24,9 +30,10 @@
 
 <script lang="ts" setup>
 import GalleryItemPriceBuy from './GalleryItemActionType/GalleryItemBuy.vue'
+import GalleryItemOffer from './GalleryItemActionType/GalleryItemOffer.vue'
 import GalleryItemPriceRelist from './GalleryItemActionType/GalleryItemRelist.vue'
 import GalleryItemPriceTransfer from './GalleryItemActionType/GalleryItemTransfer.vue'
-import { listVisible } from '@/utils/config/permission.config'
+import { listVisible, offerVisible } from '@/utils/config/permission.config'
 
 import type { NFT } from '@/components/rmrk/service/scheme'
 

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex justify-end gallery-item-offer mr-[55px]">
+    <NeoButton
+      :label="$t('transaction.offer')"
+      variant="k-blue"
+      size="large"
+      fixed-width
+      @click="openOfferModal"
+    />
+    <MakeOffer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoButton } from '@kodadot1/brick'
+import type { NFT } from '@/components/rmrk/service/scheme'
+import { nftToOfferItem } from '@/components/common/shoppingCart/utils'
+import { usePreferencesStore } from '@/stores/preferences'
+import { useMakingOfferStore } from '@/stores/makeOffer'
+import MakeOffer from '@/components/offer/MakeOffer.vue'
+
+const props = defineProps<{
+  nft: NFT
+}>()
+
+const preferencesStore = usePreferencesStore()
+const makeOfferStore = useMakingOfferStore()
+
+const openOfferModal = () => {
+  makeOfferStore.clear()
+  const item = nftToOfferItem(props.nft)
+  makeOfferStore.setItem(item)
+
+  preferencesStore.setMakeOfferModalOpen(true)
+}
+
+watch(
+  () => preferencesStore.makeOfferModalOpen,
+  (isOpen) => {
+    if (!isOpen) {
+      onOfferModalClose()
+    }
+  },
+)
+
+const onOfferModalClose = () => {
+  setTimeout(() => {
+    makeOfferStore.clear()
+  }, 500) // wait for modal animation
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables';
+
+.gallery-item-offer {
+  button {
+    font-size: 1rem;
+    height: 3.375rem;
+  }
+}
+
+@include until-widescreen {
+  .gallery-item-offer {
+    width: 100%;
+    margin-top: 1rem !important;
+    button {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>