From 8b32873baff95c739de050a600c79f6dc8609a25 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Thu, 22 Dec 2022 16:56:45 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20title=20and=20image=20preview?=
 =?UTF-8?q?=20in=20latest=20listing/purchase?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.vue           | 11 +++++++++++
 pages/latest/purchase.vue | 12 ++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/pages/index.vue b/pages/index.vue
index 0de27ce..8305155 100644
--- 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
index 5b7379e..64e9d42 100644
--- 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) {