✨ Add title and image preview in latest listing/purchase

likecoin · Dec 22, 2022 · 8b32873 · 8b32873
1 parent 7eca996
commit 8b32873
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/pages/index.vue b/pages/index.vue
@@ -18,6 +18,12 @@
             <td>#{{ i + 1 }}</td>
             <td>
               <div>
+                <h4>{{ getClassMetadataById(item.class_id)?.name }}</h4>
+                <img
+                  v-if="getClassMetadataById(item.class_id)?.data?.metadata?.image"
+                  :src="convertImageSrc(getClassMetadataById(item.class_id).data?.metadata.image)"
+                  height="64"
+                  width="64" /><br />
                 Class ID:
                 <NftLink :class-id="item.class_id" /><br />
                 NFT ID:
@@ -43,12 +49,17 @@
 
 <script setup lang="ts">
 import BigNumber from 'bignumber.js';
+import { useMetadataStore } from '~/stores/metadata';
 
 const router = useRouter();
 const listingEvents = ref([] as any[]);
 
+const metadataStore = useMetadataStore();
+const { getClassMetadataById, lazyFetchClassMetadata } = metadataStore;
+
 onMounted(async () => {
   listingEvents.value = await getRecentListingEvents()
+  await Promise.all(listingEvents.value.map(v => lazyFetchClassMetadata(v.class_id)));
 })
 
 function viewClassListings(classId: string) {

diff --git a/pages/latest/purchase.vue b/pages/latest/purchase.vue
@@ -17,6 +17,13 @@
           <td>#{{ i + 1 }}</td>
           <td>
             <div>
+              <h4>{{ getClassMetadataById(item.class_id)?.name }}</h4>
+              <img
+                v-if="getClassMetadataById(item.class_id)?.data?.metadata?.image"
+                :src="convertImageSrc(getClassMetadataById(item.class_id).data?.metadata.image)"
+                height="64"
+                width="64"
+              /><br />
               Class ID:
               <NftLink :class-id="item.class_id" /><br />
               NFT ID:
@@ -41,12 +48,17 @@
 
 <script setup lang="ts">
 import BigNumber from 'bignumber.js';
+import { useMetadataStore } from '~/stores/metadata';
 
 const router = useRouter();
 const buyNFTEvents = ref([] as any[]);
 
+const metadataStore = useMetadataStore();
+const { getClassMetadataById, lazyFetchClassMetadata } = metadataStore;
+
 onMounted(async () => {
   buyNFTEvents.value = await getRecentBuyNFTEvents();
+  await Promise.all(buyNFTEvents.value.map(v => lazyFetchClassMetadata(v.class_id)));
 })
 
 function viewClassListings(classId: string) {