From 3ab723ad685f2dc0074e184acb4654a65c66fd9c Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Mon, 30 Sep 2024 19:56:14 +0700
Subject: [PATCH] feat(nft): integrate collection ABI fetching across
 components

---
 .../GalleryItemButton/GalleryItemButton.vue      |  2 +-
 .../GalleryItemMoreActionBtn.vue                 |  4 ++--
 components/gallery/useGalleryItem.ts             | 16 +---------------
 pages/[prefix]/gallery/[id].vue                  | 10 ++++++++++
 stores/nft.ts                                    |  3 +++
 5 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/components/gallery/GalleryItemButton/GalleryItemButton.vue b/components/gallery/GalleryItemButton/GalleryItemButton.vue
index 569a5ef7ad..1816fe5e13 100644
--- a/components/gallery/GalleryItemButton/GalleryItemButton.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemButton.vue
@@ -22,7 +22,7 @@ import { extractTwitterIdFromDescription } from '@/utils/parse'
 const { $i18n } = useNuxtApp()
 const imageData = ref()
 
-const { getNft: nft, getNftMetadata: nftMetadata, getNftMimeType: nftMimeType } = storeToRefs(useNftStore())
+const { getNft: nft, getNftMetadata: nftMetadata, getNftMimeType: nftMimeType, getAbi: abi } = storeToRefs(useNftStore())
 
 const customSharingContent = computed(() => {
   const twitterId = nft.value?.meta?.description
diff --git a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
index c91ee905a0..dbe04d023b 100644
--- a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
@@ -174,9 +174,9 @@ const unlist = () => {
 }
 
 const refreshMetadata = async () => {
-  if (props.collectionId && props.nftSn) {
+  if (props.nft?.collection?.id && props.nft?.sn) {
     toast('Refreshing metadata. Check back in a minute...')
-    await refreshOdaTokenMetadata(urlPrefix.value, props.collectionId!, props.nftSn!)
+    await refreshOdaTokenMetadata(urlPrefix.value, props.nft.collection.id, props.nft.sn)
   }
 }
 
diff --git a/components/gallery/useGalleryItem.ts b/components/gallery/useGalleryItem.ts
index 716b4aac65..9e6eb870ed 100644
--- a/components/gallery/useGalleryItem.ts
+++ b/components/gallery/useGalleryItem.ts
@@ -5,10 +5,9 @@ import useSubscriptionGraphql from '@/composables/useSubscriptionGraphql'
 import { getDrops } from '@/services/fxart'
 import { getCloudflareMp4 } from '@/services/imageWorker'
 import type { NFTMetadata } from '@/services/oda'
-import { fetchMimeType, fetchOdaToken, fetchOdaCollectionAbi } from '@/services/oda'
+import { fetchMimeType, fetchOdaToken } from '@/services/oda'
 import { useHistoryStore } from '@/stores/history'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import type { Abi } from '@/composables/transaction/types'
 
 interface NFTData {
   nftEntity?: NftEntity
@@ -24,7 +23,6 @@ export interface GalleryItem {
   nftAnimationMimeType: Ref<string>
   nftImage: Ref<string>
   nftHighestOffer: Ref<NFTOffer | undefined>
-  abi: Ref<Abi | null | undefined>
 }
 
 export const useGalleryItem = (nftId?: string): GalleryItem => {
@@ -66,12 +64,6 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     },
   })
 
-  const { data: abi } = useQuery({
-    queryKey: ['collection-abi', nft.value?.collection.id],
-    queryFn: () => isEvm(urlPrefix.value) ? fetchOdaCollectionAbi(urlPrefix.value, nft.value?.collection.id as string) : Promise.resolve(null),
-    enabled: computed(() => Boolean(nft.value)),
-  })
-
   useSubscriptionGraphql({
     query: `   nft: nftEntityById(id: "${id}") {
       id
@@ -133,12 +125,7 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     }
   })
 
-  const { isRemark } = useIsChain(usePrefix().urlPrefix)
   onBeforeMount(async () => {
-    if (isRemark.value) {
-      return
-    }
-
     const getMetadata = await fetchOdaToken(urlPrefix.value, collectionId, tokenId)
     const metadata = getMetadata.metadata
 
@@ -187,6 +174,5 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     nftMimeType,
     nftMetadata,
     nftHighestOffer,
-    abi,
   }
 }
diff --git a/pages/[prefix]/gallery/[id].vue b/pages/[prefix]/gallery/[id].vue
index 5021f80c97..0267a91732 100644
--- a/pages/[prefix]/gallery/[id].vue
+++ b/pages/[prefix]/gallery/[id].vue
@@ -3,7 +3,9 @@
 </template>
 
 <script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
 import { useGalleryItem } from '@/components/gallery/useGalleryItem'
+import { fetchOdaCollectionAbi } from '@/services/oda'
 
 const nftStore = useNftStore()
 
@@ -16,6 +18,13 @@ const {
   nftMimeType,
 } = useGalleryItem()
 
+const { urlPrefix } = usePrefix()
+const { data: abi } = useQuery({
+  queryKey: ['collection-abi', nft.value?.collection.id],
+  queryFn: () => isEvm(urlPrefix.value) ? fetchOdaCollectionAbi(urlPrefix.value, nft.value?.collection.id as string) : Promise.resolve(null),
+  enabled: computed(() => Boolean(nft.value)),
+})
+
 watchEffect(() => {
   nftStore.nft = nft.value
   nftStore.nftMetadata = nftMetadata.value
@@ -23,6 +32,7 @@ watchEffect(() => {
   nftStore.nftAnimation = nftAnimation.value
   nftStore.nftAnimationMimeType = nftAnimationMimeType.value
   nftStore.nftMimeType = nftMimeType.value
+  nftStore.abi = abi.value ?? null
 })
 
 definePageMeta({
diff --git a/stores/nft.ts b/stores/nft.ts
index d8fa92c4fd..a85030927d 100644
--- a/stores/nft.ts
+++ b/stores/nft.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import type { NFTMetadata } from '@/services/oda'
 import type { NFT } from '@/components/rmrk/service/scheme'
+import type { Abi } from '@/composables/transaction/types'
 
 export const useNftStore = defineStore('nft', {
   state: () => ({
@@ -13,6 +14,7 @@ export const useNftStore = defineStore('nft', {
     nftMimeType: '',
     nftAnimation: '',
     nftAnimationMimeType: '',
+    abi: null as Abi | null,
   }),
 
   getters: {
@@ -22,5 +24,6 @@ export const useNftStore = defineStore('nft', {
     getNftMimeType: state => state.nftMimeType,
     getNftAnimation: state => state.nftAnimation,
     getNftAnimationMimeType: state => state.nftAnimationMimeType,
+    getAbi: state => state.abi,
   },
 })