✨ Add title and image preview in latest listing/purchase

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:
@@ -32,6 +38,7 @@
                 <div>{{ new BigNumber(item.price).shiftedBy(-9).toFixed() }}LIKE</div>
                 <div>till {{ item.expiration }}</div>
               </section>
+              <button @click="viewClassListings(item.class_id)">View</button>
             </td>
           </tr>
         </tbody>
@@ -42,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) {

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) {

pages/listings/[classId].vue

@@ -52,23 +52,27 @@
 import BigNumber from 'bignumber.js';
 import { storeToRefs } from 'pinia';
 import { useWalletStore } from '~/stores/wallet';
-import { queryNFTClass, queryListingByNFTClassId } from '../../utils/cosmos';
+import { useMetadataStore } from '~/stores/metadata';
+import { queryListingByNFTClassId } from '../../utils/cosmos';
 import { convertLongToNumber, convertImageSrc } from '../../utils';
 
 const router = useRouter();
 const route = useRoute();
-const store = useWalletStore();
-const { wallet, signer } = storeToRefs(store);
+const walletStore = useWalletStore();
+const metadataStore = useMetadataStore();
+const { wallet, signer } = storeToRefs(walletStore);
 const listing = ref([] as any[]);
 const metadata = ref({} as any);
 
 const classId = computed(() => route.params.classId as string);
+
+const { connect } = walletStore;
+const { lazyFetchClassMetadata } = metadataStore;
+
 onMounted(async () => {
-  metadata.value = await queryNFTClass(classId.value);
+  metadata.value = await lazyFetchClassMetadata(classId.value);
   listing.value = await queryListingByNFTClassId(classId.value);
 })
-
-const { connect } = store;
 async function buyNFT({
   classId,
   nftId,

pages/sell/[classId]/[nftId].vue

@@ -42,12 +42,14 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useWalletStore } from '~/stores/wallet';
-import { queryNFTClass, queryNFT, signCreateNFTListing } from '../../../utils/cosmos';
+import { useMetadataStore } from '~/stores/metadata';
+import { signCreateNFTListing } from '../../../utils/cosmos';
 
 const router = useRouter();
 const route = useRoute();
-const store = useWalletStore();
-const { wallet, signer } = storeToRefs(store);
+const walletStore = useWalletStore();
+const metadataStore = useMetadataStore();
+const { wallet, signer } = storeToRefs(walletStore);
 const classData = ref({} as any);
 const nftData = ref({} as any);
 const listingPrice = ref(32);
@@ -57,13 +59,15 @@ const maxExpirationValue = new Date(Date.now() + 15552000000).toISOString().spli
 const minExpirationValue = new Date(Date.now()).toISOString().split('T')[0];
 const classId = computed(() => route.params.classId as string);
 const nftId = computed(() => route.params.nftId as string);
+
+const { connect } = walletStore;
+const { lazyFetchClassMetadata, lazyFetchNFTMetadata } = metadataStore;
+
 onMounted(async () => {
-  classData.value = await queryNFTClass(classId.value);
-  nftData.value = await queryNFT(classId.value, nftId.value);
+  classData.value = await lazyFetchClassMetadata(classId.value);
+  nftData.value = await lazyFetchNFTMetadata(classId.value, nftId.value);
 })
 
-const { connect } = store;
-
 async function viewClassListings(classId: string) {
   router.push({ path: `/listings/${classId}` });
 }

stores/metadata.ts

@@ -0,0 +1,58 @@
+import { defineStore } from "pinia";
+
+export const useMetadataStore = defineStore("metadata", () => {
+  const classMetadata = ref({} as { [key: string]: any });
+  const nftMetadata = ref({} as { [key: string]: any });
+
+  function getNFTMetadataKey(classId: string, nftId: string) {
+    return `${classId}_${nftId}`;
+  }
+
+  const getClassMetadataById = computed(
+    () => (classId: string) => classMetadata.value[classId]
+  );
+  const getNftMetadataById = computed(
+    () => (classId: string, nftId: string) =>
+      nftMetadata.value[getNFTMetadataKey(classId, nftId)]
+  );
+
+  async function fetchClassMetadata(classId: string) {
+    classMetadata.value[classId] = await queryNFTClass(classId);
+    return classMetadata.value[classId];
+  }
+
+  async function lazyFetchClassMetadata(classId: string) {
+    const value = classMetadata.value[classId];
+    if (value) {
+      return value;
+    }
+    return fetchClassMetadata(classId);
+  }
+
+  async function fetchNFTMetadata(classId: string, nftId: string) {
+    nftMetadata.value[getNFTMetadataKey(classId, nftId)] = await queryNFT(
+      classId,
+      nftId
+    );
+    return nftMetadata.value[getNFTMetadataKey(classId, nftId)];
+  }
+
+  async function lazyFetchNFTMetadata(classId: string, nftId: string) {
+    const value = nftMetadata.value[getNFTMetadataKey(classId, nftId)];
+    if (value) {
+      return value;
+    }
+    return fetchNFTMetadata(classId, nftId);
+  }
+
+  return {
+    classMetadata,
+    nftMetadata,
+    getClassMetadataById,
+    getNftMetadataById,
+    fetchClassMetadata,
+    lazyFetchClassMetadata,
+    fetchNFTMetadata,
+    lazyFetchNFTMetadata,
+  };
+});