feat: redesign update price and transfer item on gallery

components/gallery/GalleryItemAction/GalleryItemAction.vue

@@ -11,10 +11,18 @@
       class="mt-5" />
 
     <!-- change price as an owner -->
-    <GalleryItemPriceRelist v-if="isOwner" />
+    <GalleryItemPriceRelist
+      v-if="isOwner && nft?.id && nft?.price && nft?.collection.id"
+      :collection-id="nft.collection.id"
+      :nft-id="nft.id"
+      :nft-price="nft.price"
+      class="mt-5" />
 
     <!-- transfer item as an owner -->
-    <GalleryItemPriceTransfer v-if="isOwner" class="mt-5" />
+    <GalleryItemPriceTransfer
+      v-if="isOwner && nft?.id"
+      :nft-id="nft.id"
+      class="mt-5" />
   </div>
 </template>
 

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemRelist.vue

@@ -1,62 +1,106 @@
 <template>
-  <GalleryItemPriceSection v-if="nft?.price" title="Price" :price="nft?.price">
-    <GalleryItemActionSlides
-      v-if="Number(nft.price)"
-      ref="actionRef"
-      :active="active">
-      <template #action>
-        <NeoButton
-          label="Change Price"
-          size="large"
-          fixed-width
-          no-shadow
-          @click.native="toggleActive" />
-      </template>
-
-      <template #content>
-        <div>
-          <input type="number" placeholder="Your New Price" />
-        </div>
-      </template>
-    </GalleryItemActionSlides>
-    <GalleryItemActionSlides v-else :active="active">
-      <template #action>
-        <NeoButton
-          label="List"
-          size="large"
-          fixed-width
-          no-shadow
-          variant="k-accent"
-          @click.native="toggleActive" />
-      </template>
-
-      <template #content>
-        <div>
-          <input type="number" placeholder="Your Listing Price" />
-        </div>
-      </template>
-    </GalleryItemActionSlides>
-  </GalleryItemPriceSection>
+  <div>
+    <Loader v-model="isLoading" :status="status" />
+    <GalleryItemPriceSection title="Price" :price="nftPrice">
+      <GalleryItemActionSlides ref="actionRef" :active="active">
+        <template #action>
+          <NeoButton
+            :label="isListed ? 'Change Price' : 'List'"
+            size="large"
+            fixed-width
+            no-shadow
+            :variant="isListed ? 'k-accent' : 'primary'"
+            @click.native="updatePrice" />
+        </template>
+
+        <template #content>
+          <div>
+            <input
+              v-model="price"
+              type="number"
+              :placeholder="
+                isListed ? 'Your New Price' : 'Your Listing Price'
+              " />
+          </div>
+        </template>
+      </GalleryItemActionSlides>
+    </GalleryItemPriceSection>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { NeoButton } from '@kodadot1/brick'
 import { onClickOutside } from '@vueuse/core'
+import { NeoButton } from '@kodadot1/brick'
+import { createInteraction } from '@kodadot1/minimark'
+
+import type { JustInteraction } from '@kodadot1/minimark'
 
-import { useGalleryItem } from '../../useGalleryItem'
+import { calculateBalance } from '@/utils/format/balance'
+import { dangerMessage, infoMessage } from '@/utils/notification'
+import { bsxParamResolver, getApiCall } from '@/utils/gallery/abstractCalls'
 import GalleryItemPriceSection from '../GalleryItemActionSection.vue'
 import GalleryItemActionSlides from '../GalleryItemActionSlides.vue'
 
-const { nft } = useGalleryItem()
+const { urlPrefix } = usePrefix()
+const { apiInstance } = useApi()
+const { accountId } = useAuth()
+const { howAboutToExecute, isLoading, status } = useMetaTransaction()
 
-const active = ref(false)
+const props = defineProps<{
+  collectionId: string
+  nftId: string
+  nftPrice: string
+}>()
 
-function toggleActive() {
-  active.value = !active.value
-}
+const active = ref(false)
+const price = ref()
+const isListed = computed(() => Number(props.nftPrice))
 
 const actionRef = ref(null)
 onClickOutside(actionRef, () => (active.value = false))
+
+async function updatePrice() {
+  if (active.value === false) {
+    active.value = true
+  } else {
+    const api = await apiInstance.value
+    const meta = calculateBalance(price.value)
+
+    if (!meta) {
+      dangerMessage('Price is not valid')
+      return
+    }
+
+    let cb, arg
+
+    switch (urlPrefix.value) {
+      case 'rmrk':
+        cb = api.tx.system.remark
+        arg = [
+          createInteraction(
+            'LIST' as JustInteraction,
+            '1.0.0',
+            props.nftId,
+            String(meta)
+          ),
+        ]
+        break
+
+      case 'snek':
+      case 'bsx':
+        cb = getApiCall(api, urlPrefix.value, 'LIST')
+        arg = bsxParamResolver(props.nftId, 'LIST', String(meta))
+        break
+
+      default:
+        break
+    }
+
+    howAboutToExecute(accountId.value, cb, arg, () => {
+      infoMessage('Price updated')
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemTransfer.vue

@@ -1,35 +1,110 @@
 <template>
-  <div class="is-flex is-justify-content-space-between">
-    <div>&nbsp;</div>
-    <GalleryItemActionSlides ref="actionRef" :active="active">
-      <template #action>
-        <NeoButton
-          label="Transfer"
-          size="large"
-          fixed-width
-          no-shadow
-          @click.native="toggleActive" />
-      </template>
-
-      <template #content>
-        <div>
-          <input type="number" placeholder="Transfer To:" />
-        </div>
-      </template>
-    </GalleryItemActionSlides>
+  <div>
+    <Loader v-model="isLoading" :status="status" />
+    <div class="is-flex is-justify-content-space-between">
+      <div>&nbsp;</div>
+      <GalleryItemActionSlides ref="actionRef" :active="active">
+        <template #action>
+          <NeoButton
+            label="Transfer"
+            size="large"
+            fixed-width
+            no-shadow
+            @click.native="sendItem" />
+        </template>
+
+        <template #content>
+          <div>
+            <input v-model="address" type="text" placeholder="Transfer To:" />
+          </div>
+        </template>
+      </GalleryItemActionSlides>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NeoButton } from '@kodadot1/brick'
 import { onClickOutside } from '@vueuse/core'
+import { checkAddress, isAddress } from '@polkadot/util-crypto'
+import { NeoButton } from '@kodadot1/brick'
+import { createInteraction } from '@kodadot1/minimark'
+
+import type { JustInteraction } from '@kodadot1/minimark'
 
+import { dangerMessage, infoMessage } from '@/utils/notification'
+import { ss58Of } from '@/utils/config/chain.config'
+import correctFormat from '@/utils/ss58Format'
+import { tokenIdToRoute } from '@/components/unique/utils'
 import GalleryItemActionSlides from '../GalleryItemActionSlides.vue'
 
+const { urlPrefix } = usePrefix()
+const { apiInstance } = useApi()
+const { accountId } = useAuth()
+const { $route } = useNuxtApp()
+const { howAboutToExecute, isLoading, status } = useMetaTransaction()
+
+const props = defineProps<{
+  nftId: string
+}>()
+
 const active = ref(false)
+const address = ref()
+
+async function sendItem() {
+  if (active.value === false) {
+    active.value = true
+  } else {
+    const api = await apiInstance.value
+    const { id, item } = tokenIdToRoute($route.params.id)
+    const [, err] = checkAddress(
+      address.value,
+      correctFormat(ss58Of(urlPrefix.value))
+    )
+
+    if (!isAddress(address.value)) {
+      dangerMessage('Invalid address')
+      return
+    }
+
+    if (err) {
+      dangerMessage(err)
+      return
+    }
+
+    let cb, arg
+
+    switch (urlPrefix.value) {
+      case 'rmrk':
+        cb = api.tx.system.remark
+        arg = [
+          createInteraction(
+            'SEND' as JustInteraction,
+            '1.0.0',
+            props.nftId,
+            String(address.value)
+          ),
+        ]
+        break
+
+      case 'bsx':
+      case 'snek':
+        cb = api.tx.utility.batchAll
+        arg = [
+          [
+            api.tx.marketplace.setPrice(id, item, 0),
+            api.tx.nft.transfer(id, item, address.value),
+          ],
+        ]
+        break
+
+      default:
+        break
+    }
 
-function toggleActive() {
-  active.value = !active.value
+    howAboutToExecute(accountId.value, cb, arg, () => {
+      infoMessage('Item transfered')
+    })
+  }
 }
 
 const actionRef = ref(null)

composables/useMetaTransaction.ts

@@ -20,6 +20,7 @@ function useMetaTransaction() {
   } = useTransactionStatus()
   const { apiInstance } = useAPI()
   const tx = ref<ExecResult>()
+
   const howAboutToExecute = async (
     account: string,
     cb: (...params: any[]) => Extrinsic,
@@ -28,6 +29,7 @@ function useMetaTransaction() {
     onError?: () => void
   ): Promise<void> => {
     try {
+      isLoading.value = true
       tx.value = await exec(
         account,
         '',

utils/gallery/abstractCalls.ts

@@ -22,7 +22,7 @@ export const bsxParamResolver = (
   id: string,
   selectedAction: string,
   meta: string | number,
-  currentOwner: string,
+  currentOwner?: string,
   expiration?: number
 ): any[] => {
   const [collectionId, tokenId] = id.split('-')