feat: fetch oda on drops page

components/collection/drop/GenerativeLayout.vue

@@ -13,7 +13,10 @@
               <div class="font-bold is-size-5 mb-4 capitalize">
                 {{ $t('tooltip.created') }}
               </div>
-              <CollectionDropCreatedBy :address="address" />
+              <CollectionDropCreatedBy
+                :address="address"
+                :show-popover="false"
+              />
             </div>
             <div
               v-if="ownerAddresses.length"
@@ -48,6 +51,11 @@
           />
 
           <CollectionUnlockableTag :collection-id="drop?.collection" />
+
+          <CollectionDropRefreshMetadata
+            :collection-id="drop?.collection"
+            :chain="drop?.chain"
+          />
         </div>
 
         <div

components/collection/drop/ItemsGrid.vue

@@ -30,6 +30,7 @@
       hide-listing
       show-timestamp
       :reset-search-query-params="['sort']"
+      fetch-onchain-data
     />
   </div>
 </template>

components/collection/drop/RefreshMetadata.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="text-k-grey text-xs p-4 border border-k-shade">
+    The images and metadata below are from its official website or on-chain data, cached by Koda. It’s our <span class="font-bold">best effort</span>, and we <span class="font-bold">don’t take any responsibility for any incorrectness</span>. You can <NuxtLink
+      @click="refreshMetadata"
+    >
+      <span class="font-bold">request an update</span>
+    </NuxtLink> or <NuxtLink
+      to="https://github.com/kodadot/nft-gallery/issues/new?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen&template=bug.yml"
+      target="_blank"
+    >
+      <span class="font-bold">report any problem</span>
+    </NuxtLink> you find.
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Prefix } from '@kodadot1/static'
+import { refreshOdaCollectionTokensMetadata } from '@/services/oda'
+
+const props = defineProps<{
+  collectionId: string
+  chain: Prefix
+}>()
+
+const { toast } = useToast()
+const { $i18n } = useNuxtApp()
+
+const refreshMetadata = () => {
+  toast($i18n.t('toast.refreshMetdata'))
+  refreshOdaCollectionTokensMetadata(props.chain, props.collectionId)
+}
+</script>

components/items/ItemsGrid/ItemsGrid.vue

@@ -131,6 +131,7 @@ import { useListingCartStore } from '@/stores/listingCart'
 import DynamicGrid from '@/components/shared/DynamicGrid.vue'
 import type { NFT } from '@/types'
 import type { GridSection } from '@/stores/preferences'
+import { fetchOdaToken } from '@/services/oda'
 
 const slots = useSlots()
 
@@ -151,6 +152,7 @@ const props = defineProps<{
   collectionPopoverHide?: boolean
   hideListing?: boolean
   linkTarget?: string
+  fetchOnchainData?: boolean
 }>()
 
 const emit = defineEmits(['total', 'loading'])
@@ -287,4 +289,40 @@ const getSkeletonVariant = (slotProps) => {
   }
   return 'primary'
 }
+
+const { urlPrefix } = usePrefix()
+const { isAssetHub } = useIsChain(urlPrefix)
+
+const processOnchainData = useDebounceFn(async () => {
+  items.value = await Promise.all(items.value.map(async (item) => {
+    if (item.sn && !isTokenEntity(item)) {
+      const tokenData = await fetchOdaToken(urlPrefix.value, item.collection.id, item.sn)
+
+      if (tokenData.metadata && tokenData.metadata_uri) {
+        return {
+          ...item,
+          name: tokenData.metadata?.name || item.meta.name,
+          meta: {
+            ...item.meta,
+            name: tokenData.metadata?.name || item.meta.name,
+            id: tokenData.metadata?.image || item.meta.id,
+            image: tokenData.metadata?.image || item.meta.image,
+            animationUrl: tokenData.metadata?.animation_url || item.meta.animationUrl,
+          },
+        }
+      }
+    }
+
+    return {
+      ...item,
+      name: item.collection.name,
+    }
+  }))
+}, 500)
+
+watch(() => items.value.length, () => {
+  if (isAssetHub.value && items.value.length && props.fetchOnchainData) {
+    processOnchainData()
+  }
+}, { immediate: true })
 </script>

composables/useNft.ts

@@ -40,6 +40,7 @@ export type TokenEntity = {
     name: string
     floorPrice: [{ price: string }]
   }
+  sn?: string
 }
 
 export type NFTOffer = {

services/oda.ts

@@ -1,7 +1,7 @@
 import type { Prefix } from '@kodadot1/static'
 import type { Abi } from '@/composables/transaction/types'
 
-const BASE_URL = isProduction ? 'https://oda.koda.art' : 'https://oda-beta.koda.art'
+const BASE_URL = isProduction ? 'https://oda.koda.art' : 'https://5977602c-oda-beta.kodadot.workers.dev'
 const api = $fetch.create({ baseURL: BASE_URL, retry: 3 })
 
 type OnchainCollection = {