♻️ Refactor nft vs NFT vs iscn data parsing in mixin (#2082)

* ♻️ Refactor nft vs NFT vs iscn data parsing in mixin

* ♻️ Move iscn to mixin

* 🎨 Fix inconsistent use of NFT contentMetadata

src/components/EventModal/Collect/index.vue

@@ -46,7 +46,7 @@
       </transition>
       <Label v-if="isAddedToShoppingCart" preset="p5" align="center">{{
         $t('nft_collect_modal_added_to_shopping_cart_description', {
-          nft: NFTName,
+          nft: nftName,
         })
       }}</Label>
       <template v-else-if="isCompleted">
@@ -805,10 +805,10 @@ export default {
       logTrackerEvent(this, 'NFT', 'NFTClickShare', this.classId, 1);
       if (navigator?.share) {
         const title = this.$t('nft_collect_modal_share_title', {
-          name: this.NFTName,
+          name: this.nftName,
         });
         const text = this.$t('nft_collect_modal_share_text', {
-          name: this.NFTName,
+          name: this.nftName,
           creator: this.creatorDisplayName,
         });
         const url = this.justCollectedNFTId

src/components/IndexPageFreeCollectCTA.vue

@@ -8,7 +8,7 @@
     </client-only>
     <NFTPageCollectCTA
       :class-id="classId"
-      :nft-image-url="NFTImageUrl"
+      :nft-image-url="nftImageUrl"
       :class-owner="classOwner"
       :is-collectable="nftIsCollectable"
       button-theme="glow"

src/components/NFTBook/CrossSellDialog.vue

@@ -265,7 +265,7 @@ export default {
         const purchaseEventParams = {
           items: [
             {
-              name: this.NFTName,
+              name: this.nftName,
               price: edition.price,
               classId: this.classId,
               priceIndex,

src/components/NFTBook/ItemCard.vue

@@ -15,24 +15,24 @@
         <NFTCover
           v-if="videoSrc"
           :is-nft-book="true"
-          :src="imageSrc || NFTImageUrl"
+          :src="imageSrc || nftImageUrl"
           :video-src="videoSrc"
           :should-resize-src="shouldResizeSrc"
           :size="200"
           :theme="theme"
-          :alt="NFTName"
+          :alt="nftName"
         />
         <NFTBookCover
           v-else
           :class="coverClasses"
-          :src="imageSrc || NFTImageUrl"
-          :alt="NFTName"
+          :src="imageSrc || nftImageUrl"
+          :alt="nftName"
           :resize="200"
         />
       </component>
     </div>
     <template v-if="!isCoverPreset">
-      <Label :class="[titleStyle, 'mt-[20px]']" preset="p5" :text="NFTName" />
+      <Label :class="[titleStyle, 'mt-[20px]']" preset="p5" :text="nftName" />
       <Label
         class="text-medium-gray mt-[6px] mb-[12px]"
         preset="p6"
@@ -106,18 +106,18 @@
             v-if="videoSrc"
             :class="['mt-[-48px]', coverClasses]"
             :is-nft-book="true"
-            :src="imageSrc || NFTImageUrl"
+            :src="imageSrc || nftImageUrl"
             :should-resize-src="shouldResizeSrc"
             :video-src="videoSrc"
             :size="200"
             :theme="theme"
-            :alt="NFTName"
+            :alt="nftName"
           />
           <NFTBookCover
             v-else
             :class="['mt-[-48px]', coverClasses]"
-            :src="imageSrc || NFTImageUrl"
-            :alt="NFTName"
+            :src="imageSrc || nftImageUrl"
+            :alt="nftName"
             :resize="200"
           />
 
@@ -150,7 +150,7 @@
           />
           <h1
             :class="['text-[24px]', 'font-600', titleStyle]"
-            v-text="NFTName"
+            v-text="nftName"
           />
           <p
             v-if="!isDetailsPreset"
@@ -473,7 +473,7 @@ export default {
     isNew() {
       // True if within 30 days
       return (
-        new Date().getTime() - new Date(this.iscnData?.recordTimestamp) <
+        new Date().getTime() - new Date(this.contentMetadata.recordTimestamp) <
         1000 * 60 * 60 * 24 * 30
       );
     },
@@ -551,11 +551,12 @@ export default {
     },
     bookDescriptionTrimmed() {
       if (this.preset === PRESET_TYPE.CAMPAIGN) {
-        return this.NFTDescription.replaceAll('\n', '')
+        return this.nftDescription
+          .replaceAll('\n', '')
           .trim()
           .substring(0, 100);
       }
-      return this.NFTDescription.trim();
+      return this.nftDescription.trim();
     },
   },
   mounted() {

src/components/NFTCampaign/Item.vue

@@ -8,10 +8,10 @@
     </client-only>
     <NFTCampaignItemBase
       :class-id="classId"
-      :title="NFTName"
-      :description="NFTDescription"
-      :img-src="NFTImageUrl"
-      :img-bg-color="NFTImageBackgroundColor"
+      :title="nftName"
+      :description="nftDescription"
+      :img-src="nftImageUrl"
+      :img-bg-color="nftImageBackgroundColor"
       :price="NFTPrice"
       :base-price="nftBasePrice"
       :owner-address="classOwner"

src/components/NFTPortfolio/Item.vue

@@ -7,7 +7,7 @@
       />
     </client-only>
     <NFTPortfolioBase
-      :title="NFTName"
+      :title="nftName"
       :price="NFTPrice"
       :is-free="nftIsFree"
       :class-id="classId"
@@ -17,7 +17,7 @@
       :user-display-name="creatorDisplayNameFull"
       :user-avatar-src="creatorAvatar"
       :is-user-civic-liker="isCreatorCivicLiker"
-      :image-src="NFTImageUrl"
+      :image-src="nftImageUrl"
       :is-collecting="uiIsOpenCollectModal && isCollecting"
       :own-count="ownCount"
       :display-state="nftDisplayState"

src/mixins/iscn.js

@@ -0,0 +1,30 @@
+import { mapActions, mapGetters } from 'vuex';
+import { APP_LIKE_CO_VIEW } from '~/constant';
+
+export default {
+  computed: {
+    ...mapGetters(['getISCNMetadataById']),
+    iscnId() {
+      return (
+        this.NFTClassMetadata.parent?.iscnIdPrefix ||
+        this.NFTClassMetadata.parent?.iscn_id_prefix
+      );
+    },
+    iscnURL() {
+      if (!this.iscnId) return '';
+      return `${APP_LIKE_CO_VIEW}/${encodeURIComponent(this.iscnId)}`;
+    },
+    iscnData() {
+      if (!this.iscnId) return undefined;
+      const data = this.getISCNMetadataById(this.iscnId);
+      if (data instanceof Promise) return undefined;
+      return data;
+    },
+  },
+  methods: {
+    ...mapActions(['lazyGetISCNMetadataById']),
+    async fetchISCNMetadata() {
+      await this.lazyGetISCNMetadataById(this.iscnId);
+    },
+  },
+};

src/mixins/nft-or-collection.js

@@ -1,5 +1,4 @@
 import { formatNumberWithUSD } from '~/util/ui';
-import { parseNFTMetadataURL } from '~/util/nft';
 import nftMixin from './nft';
 import collectionMixin from './nft-collection';
 
@@ -16,10 +15,10 @@ export default {
       return this.collectionId || this.classId;
     },
     productMetadata() {
-      return this.isCollection ? this.collection : this.NFTClassMetadata;
+      return this.isCollection ? this.collection : this.contentMetadata;
     },
     productName() {
-      const name = this.NFTName || this.productMetadata?.name;
+      const name = this.nftName || this.productMetadata?.name;
       const hasLocalizedName = name?.[this.collectionLocale] !== undefined;
       return hasLocalizedName ? name[this.collectionLocale] : name;
     },
@@ -31,12 +30,12 @@ export default {
       return description;
     },
     productImageUrl() {
-      return this.isCollection ? this.collectionImageUrl : this.NFTImageUrl;
+      return this.isCollection ? this.collectionImageUrl : this.nftImageUrl;
     },
     productOwner() {
       return this.isCollection
         ? this.productMetadata?.ownerWallet
-        : this.productMetadata?.iscn_owner;
+        : this.classOwner;
     },
     productAvailablePriceLabel() {
       return this.isCollection