feat: create offer on AssetHub

components/common/listingCart/shared/ListingCartItemDetails.vue → components/common/CartItemDetails.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div v-if="nft">
     <div class="flex justify-between">
       <div class="flex">
         <div>
           <BaseMediaItem
-            v-if="nft.mediaUrl"
+            v-if="nft?.mediaUrl"
             class="border border-k-shade image is-48x48"
             :class="{ 'opacity-50': discarded }"
             :alt="nft?.name"
@@ -48,23 +48,30 @@
 <script setup lang="ts">
 import { parseNftAvatar } from '@/utils/nft'
 import type { ListCartItem } from '@/stores/listingCart'
+import type { MakingOfferItem } from '@/components/offer/types'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
 
 const avatar = ref<string>()
 
 const props = defineProps<{
-  nft: ListCartItem
+  nft?: (ListCartItem | MakingOfferItem) & {
+    mediaUrl?: {
+      image: string
+      mimeType: string
+    }
+  }
   discarded?: boolean
 }>()
 
 const getAvatar = async () => {
   if (props.nft) {
-    avatar.value = await parseNftAvatar(props.nft)
+    avatar.value = await parseNftAvatar(props.nft as EntityWithMeta)
   }
 }
 
 onMounted(() => {
-  if (!props.nft.mediaUrl) {
+  if (!props.nft?.mediaUrl) {
     getAvatar()
   }
 })

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/listingCart/ListingCartModal.vue

@@ -76,7 +76,7 @@
 
         <div class="flex justify-between px-6">
           <AutoTeleportActionButton
-            ref="autoteleportButton"
+            ref="autoTeleportButton"
             :actions="actions"
             :disabled="confirmButtonDisabled"
             :fees="{ forceActionAutoFees: true }"
@@ -114,6 +114,7 @@ import AutoTeleportActionButton, {
 } from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import { hasOperationsDisabled } from '@/utils/prefix'
+import useAutoTeleportActionButton from '@/composables/autoTeleport/useAutoTeleportActionButton'
 
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
@@ -139,7 +140,7 @@ const { chainSymbol, decimals } = useChain()
 const fixedPrice = ref()
 const floorPricePercentAdjustment = ref()
 const autoTeleport = ref(false)
-const autoteleportButton = ref()
+const autoTeleportButton = ref()
 const itemCount = ref(listingCartStore.count)
 const items = ref<ListCartItem[]>([])
 const autoTeleportLoaded = ref(false)
@@ -150,7 +151,7 @@ const isSuccessModalOpen = computed(
 
 const teleportTransitionTxFees = computed(() =>
   format(
-    autoteleportButton.value?.optimalTransition.txFees || 0,
+    autoTeleportButton.value?.optimalTransition.txFees || 0,
     decimals.value,
     chainSymbol.value,
   ),
@@ -167,7 +168,33 @@ watch(floorPricePercentAdjustment, (rate) => {
 })
 
 const fiatStore = useFiatStore()
-const action = ref<Actions>(emptyObject<Actions>())
+
+const getAction = (items: ListCartItem[]): Actions => {
+  const token = items
+    .filter((item): item is ListCartItem & { listPrice: number } =>
+      Boolean(item.listPrice),
+    )
+    .map(item => ({
+      price: String(calculateBalance(item.listPrice, decimals.value)),
+      nftId: item.id,
+    })) as TokenToList[]
+
+  return {
+    interaction: Interaction.LIST,
+    urlPrefix: urlPrefix.value,
+    token,
+    successMessage: $i18n.t('transaction.price.success') as string,
+    errorMessage: $i18n.t('transaction.price.error') as string,
+  }
+}
+
+const { action } = useAutoTeleportActionButton({
+  autoTeleport,
+  autoTeleportButton,
+  autoTeleportLoaded,
+  getActionFn: () => getAction(listingCartStore.itemsInChain),
+})
+
 const actions = computed<AutoTeleportAction[]>(() => [
   {
     action: action.value,
@@ -218,7 +245,7 @@ const confirmButtonDisabled = computed(
   () =>
     hasOperationsDisabled(urlPrefix.value)
     || Boolean(listingCartStore.incompleteListPrices)
-    || !autoteleportButton.value?.isReady,
+    || !autoTeleportButton.value?.isReady,
 )
 
 const confirmListingLabel = computed(() => {
@@ -227,7 +254,7 @@ const confirmListingLabel = computed(() => {
   }
   switch (listingCartStore.incompleteListPrices) {
     case 0:
-      if (!autoteleportButton.value?.isReady) {
+      if (!autoTeleportButton.value?.isReady) {
         return $i18n.t('autoTeleport.checking')
       }
 
@@ -245,25 +272,6 @@ const confirmListingLabel = computed(() => {
   }
 })
 
-const getAction = (items: ListCartItem[]): Actions => {
-  const token = items
-    .filter((item): item is ListCartItem & { listPrice: number } =>
-      Boolean(item.listPrice),
-    )
-    .map(item => ({
-      price: String(calculateBalance(item.listPrice, decimals.value)),
-      nftId: item.id,
-    })) as TokenToList[]
-
-  return {
-    interaction: Interaction.LIST,
-    urlPrefix: urlPrefix.value,
-    token,
-    successMessage: $i18n.t('transaction.price.success') as string,
-    errorMessage: $i18n.t('transaction.price.error') as string,
-  }
-}
-
 const submitListing = () => {
   return transaction(getAction(items.value || []))
 }
@@ -321,20 +329,20 @@ watch(
   },
 )
 
-watch(
-  () => autoteleportButton.value?.isReady,
-  () => {
-    if (autoteleportButton.value?.isReady && !autoTeleportLoaded.value) {
-      autoTeleportLoaded.value = true
-    }
-  },
-)
-
-watchSyncEffect(() => {
-  if (!autoTeleport.value) {
-    action.value = getAction(listingCartStore.itemsInChain)
-  }
-})
+// watch(
+//   () => autoTeleportButton.value?.isReady,
+//   () => {
+//     if (autoTeleportButton.value?.isReady && !autoTeleportLoaded.value) {
+//       autoTeleportLoaded.value = true
+//     }
+//   },
+// )
+
+// watchSyncEffect(() => {
+//   if (!autoTeleport.value) {
+//     action.value = getAction(listingCartStore.itemsInChain)
+//   }
+// })
 
 const closeListingCartModal = () =>
   (preferencesStore.listingCartModalOpen = false)

components/common/listingCart/multipleItemsCart/ListingCartItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="border-t border-k-shade py-5">
-    <ListingCartItemDetails
+    <CartItemDetails
       :nft="nft"
       :discarded="nft.discarded"
     >
@@ -36,14 +36,14 @@
           </div>
         </div>
       </template>
-    </ListingCartItemDetails>
+    </CartItemDetails>
   </div>
 </template>
 
 <script setup lang="ts">
 import { NeoButton } from '@kodadot1/brick'
 import ListingCartPriceInput from '../shared/ListingCartPriceInput.vue'
-import ListingCartItemDetails from '../shared/ListingCartItemDetails.vue'
+import CartItemDetails from '@/components/common/CartItemDetails.vue'
 import type { ListCartItem } from '@/stores/listingCart'
 import { useListingCartStore } from '@/stores/listingCart'
 import formatBalance from '@/utils/format/balance'

components/common/listingCart/singleItemCart/ListingCartSingleItemCart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="py-5">
-    <ListingCartItemDetails :nft="item">
+    <CartItemDetails :nft="item">
       <template #right>
         <div class="flex items-end">
           {{ itemPrice }}
@@ -17,7 +17,7 @@
           </div>
         </div>
       </template>
-    </ListingCartItemDetails>
+    </CartItemDetails>
 
     <hr class="my-5">
 
@@ -36,9 +36,9 @@
 </template>
 
 <script setup lang="ts">
-import ListingCartItemDetails from '../shared/ListingCartItemDetails.vue'
 import ListingCartFloorPrice from '../shared/ListingCartFloorPrice.vue'
 import ListingCartPriceInput from '../shared/ListingCartPriceInput.vue'
+import CartItemDetails from '@/components/common/CartItemDetails.vue'
 import { useListingCartStore } from '@/stores/listingCart'
 import formatBalance from '@/utils/format/balance'
 

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'