✨ [NFT Details] Override NFT Class metadata with NFT metadata

src/mixins/nft.js

@@ -5,8 +5,6 @@ import { CrispMixinFactory } from '~/mixins/crisp';
 import {
   APP_LIKE_CO_VIEW,
   APP_LIKE_CO_URL_BASE,
-  ARWEAVE_ENDPOINT,
-  IPFS_VIEW_GATEWAY_URL,
   TX_STATUS,
   LIKECOIN_NFT_API_WALLET,
   LIKECOIN_NFT_COLLECT_WITHOUT_WALLET_ITEMS_BY_CREATORS,
@@ -32,6 +30,7 @@ import {
   getISCNRecord,
   getNFTClassCollectionType,
   formatNFTEventsToHistory,
+  parseNFTMetadataURL,
 } from '~/util/nft';
 import { formatNumberWithUnit, formatNumberWithLIKE } from '~/util/ui';
 
@@ -99,6 +98,7 @@ export default {
       'getNFTClassOwnerInfoById',
       'getNFTClassOwnerCount',
       'getNFTClassCollectedCount',
+      'getNFTMetadataById',
       'LIKEPriceInUSD',
       'uiIsOpenCollectModal',
       'uiTxTargetClassId',
@@ -107,6 +107,9 @@ export default {
     NFTClassMetadata() {
       return this.getNFTClassMetadataById(this.classId) || {};
     },
+    nftMetadata() {
+      return this.getNFTMetadataById(this.nftId) || {};
+    },
     nftClassCollectionType() {
       return getNFTClassCollectionType(this.NFTClassMetadata);
     },
@@ -134,22 +137,35 @@ export default {
     NFTName() {
       return this.NFTClassMetadata.name;
     },
+    nftName() {
+      return this.nftMetadata.name || this.NFTName;
+    },
     NFTDescription() {
       return this.NFTClassMetadata.description;
     },
+    nftDescription() {
+      return this.nftMetadata.description || this.NFTDescription;
+    },
     NFTImageUrl() {
       const { image = '' } = this.NFTClassMetadata;
-      const [schema, path] = image.split('://');
-      if (schema === 'ar') return `${ARWEAVE_ENDPOINT}/${path}`;
-      if (schema === 'ipfs') return `${IPFS_VIEW_GATEWAY_URL}/${path}`;
-      return this.NFTClassMetadata.image;
+      return parseNFTMetadataURL(image);
+    },
+    nftImageURL() {
+      const image = this.nftMetadata.image || this.NFTImageUrl;
+      return parseNFTMetadataURL(image);
     },
     NFTImageBackgroundColor() {
       return this.NFTClassMetadata.background_color;
     },
+    nftImageBackgroundColor() {
+      return this.nftMetadata.background_color || this.NFTImageBackgroundColor;
+    },
     NFTExternalUrl() {
       return this.NFTClassMetadata.external_url;
     },
+    nftExternalURL() {
+      return this.nftMetadata.external_url || this.NFTExternalUrl;
+    },
     NFTPrice() {
       return this.purchaseInfo.price;
     },

src/pages/nft/class/_classId/_nftId.vue

@@ -211,11 +211,11 @@ export default {
   },
   mixins: [clipboardMixin, nftMixin, navigationListenerMixin],
   head() {
-    const title = this.NFTName || this.$t('nft_details_page_title');
+    const title = this.nftName || this.$t('nft_details_page_title');
     const description =
-      this.NFTDescription || this.$t('nft_details_page_description');
+      this.nftDescription || this.$t('nft_details_page_description');
     const ogImage =
-      this.NFTImageUrl || 'https://liker.land/images/og/writing-nft.jpg';
+      this.nftImageURL || 'https://liker.land/images/og/writing-nft.jpg';
     return {
       title,
       meta: [
@@ -276,7 +276,6 @@ export default {
   },
   data() {
     return {
-      nftMetadata: {},
       // For <select> to change only, please use `this.nftId` instead
       selectedNFTId: this.$route.params.nftId,
       isLoading: true,
@@ -293,25 +292,6 @@ export default {
     nftId() {
       return this.$route.params.nftId;
     },
-    nftExternalURL() {
-      return this.nftMetadata.external_url || this.NFTExternalUrl;
-    },
-    nftImageBackgroundColor() {
-      return this.nftMetadata.background_color || this.NFTImageBackgroundColor;
-    },
-    nftImageURL() {
-      const image = this.nftMetadata.image || this.NFTImageUrl;
-      const [schema, path] = image.split('://');
-      if (schema === 'ar') return `${ARWEAVE_ENDPOINT}/${path}`;
-      if (schema === 'ipfs') return `${IPFS_VIEW_GATEWAY_URL}/${path}`;
-      return image;
-    },
-    nftName() {
-      return this.nftMetadata.name || this.NFTName;
-    },
-    nftDescription() {
-      return this.nftMetadata.description || this.NFTDescription;
-    },
     isTransferDisabled() {
       return this.isOwnerInfoLoading || !this.userCollectedCount;
     },
@@ -350,21 +330,17 @@ export default {
       });
       return undefined;
     }
-    let nftMetadata;
     try {
       await Promise.all([
         store.dispatch('fetchNFTClassMetadata', classId),
+        store.dispatch('fetchNFTMetadata', { classId, nftId }),
         store.dispatch('lazyGetNFTPurchaseInfo', classId).catch(err => {
           if (err.response?.data !== 'NFT_CLASS_NOT_FOUND') {
             // eslint-disable-next-line no-console
             console.error(JSON.stringify(err));
           }
         }),
       ]);
-      nftMetadata = await store.dispatch('fetchNFTMetadata', {
-        classId,
-        nftId,
-      });
     } catch (err) {
       if (err.response?.data?.code === 3) {
         error({
@@ -381,7 +357,7 @@ export default {
       }
       return undefined;
     }
-    return { nftMetadata, action };
+    return { action };
   },
   async mounted() {
     try {

src/store/modules/nft.js

@@ -16,6 +16,7 @@ import * as TYPES from '../mutation-types';
 const state = () => ({
   purchaseInfoByClassIdMap: {},
   metadataByClassIdMap: {},
+  metadataByNFTIdMap: {},
   ownerInfoByClassIdMap: {},
   userClassIdListMap: {},
   userLastCollectedTimestampMap: {},
@@ -28,6 +29,9 @@ const mutations = {
   [TYPES.NFT_SET_NFT_CLASS_METADATA](state, { classId, metadata }) {
     Vue.set(state.metadataByClassIdMap, classId, metadata);
   },
+  [TYPES.NFT_SET_NFT_METADATA](state, { nftId, metadata }) {
+    Vue.set(state.metadataByNFTIdMap, nftId, metadata);
+  },
   [TYPES.NFT_SET_NFT_CLASS_OWNER_INFO](state, { classId, info }) {
     Vue.set(state.ownerInfoByClassIdMap, classId, info);
   },
@@ -84,6 +88,7 @@ const getters = {
       (acc, val) => acc + val.length,
       0
     ),
+  getNFTMetadataById: state => id => state.metadataByNFTIdMap[id],
   getUserLastCollectedTimestampByAddress: state => address =>
     state.userLastCollectedTimestampMap[address],
   getNFTClassIdListSorterForCreated: (_, getters) => ({
@@ -225,9 +230,7 @@ const actions = {
     commit(TYPES.NFT_SET_NFT_CLASS_METADATA, { classId, metadata });
     return metadata;
   },
-  async fetchNFTMetadata({ state }, { classId, nftId }) {
-    const classData = state.metadataByClassIdMap[classId];
-    const classMetadata = classData.metadata || {};
+  async fetchNFTMetadata({ commit }, { classId, nftId }) {
     let metadata;
     const { nft: chainMetadata } = await this.$api.$get(
       api.getChainNFTMetadataEndpoint(classId, nftId)
@@ -236,7 +239,6 @@ const actions = {
       chainMetadata || {};
     metadata = {
       uri,
-      ...classMetadata,
       ...nftMetadata,
     };
     if (isValidHttpUrl(uri)) {
@@ -248,6 +250,7 @@ const actions = {
       });
       if (apiMetadata) metadata = { ...metadata, ...apiMetadata };
     }
+    commit(TYPES.NFT_SET_NFT_METADATA, { nftId, metadata });
     return metadata;
   },
   async fetchNFTOwners({ commit }, classId) {

src/store/mutation-types.js

@@ -2,6 +2,7 @@ export const NFT_SET_NFT_CLASS_PURCHASE_INFO =
   'NFT_SET_NFT_CLASS_PURCHASE_INFO';
 export const NFT_SET_NFT_CLASS_METADATA = 'NFT_SET_NFT_CLASS_METADATA';
 export const NFT_SET_NFT_CLASS_OWNER_INFO = 'NFT_SET_NFT_CLASS_OWNER_INFO';
+export const NFT_SET_NFT_METADATA = 'NFT_SET_NFT_METADATA';
 export const NFT_SET_USER_CLASSID_LIST_MAP = 'NFT_SET_USER_CLASSID_LIST_MAP';
 export const NFT_SET_USER_LAST_COLLECTED_TIMESTAMP_MAP =
   'NFT_SET_USER_LAST_COLLECTED_TIMESTAMP_MAP';

src/util/nft.js

@@ -4,6 +4,8 @@ import { TxRaw } from 'cosmjs-types/cosmos/tx/v1beta1/tx';
 import * as api from '@/util/api';
 import { deriveAllPrefixedAddresses } from './cosmos';
 import {
+  ARWEAVE_ENDPOINT,
+  IPFS_VIEW_GATEWAY_URL,
   LIKECOIN_CHAIN_NFT_RPC,
   LIKECOIN_CHAIN_MIN_DENOM,
   LIKECOIN_NFT_API_WALLET,
@@ -289,3 +291,10 @@ export function formatOwnerInfoFromChain(owners) {
   });
   return ownerInfo;
 }
+
+export function parseNFTMetadataURL(url) {
+  const [schema, path] = url.split('://');
+  if (schema === 'ar') return `${ARWEAVE_ENDPOINT}/${path}`;
+  if (schema === 'ipfs') return `${IPFS_VIEW_GATEWAY_URL}/${path}`;
+  return url;
+}