🔀 Merge production updates

src/components/NFTPortfolio/MainView.vue

@@ -84,15 +84,19 @@
       <ul
         v-if="!isPortfolioTabCreatedActive || portfolioItemsTrimmed.length"
         ref="portfolioGrid"
-        class="self-stretch -mx-[12px] desktop:w-[668px] transition-all"
+        class="self-stretch -mx-[12px] desktop:w-[668px] transition-all relative"
       >
-        <li v-if="!portfolioItemsTrimmed.length" class="w-full">
+        <li v-if="!portfolioItemsTrimmed.length" class="w-full mx-[12px]">
           <NFTPortfolioEmpty :preset="portfolioTab" />
         </li>
         <li
-          v-for="nft in portfolioItemsTrimmed"
+          v-for="(nft, i) in portfolioItemsTrimmed"
           :key="nft.classId"
-          class="w-[310px] pb-[20px]"
+          :class="[
+            'absolute left-[12px] w-[310px] pb-[20px]',
+            // Let the first item covers the items not ready to be shown
+            i > 0 ? 'z-0' : 'z-[1]',
+          ]"
         >
           <NFTPortfolioItem
             :class-id="nft.classId"
@@ -319,6 +323,8 @@ export default {
         gutter: 24,
         maxColumns: 2,
         useMin: true,
+        // Note: Mitigate the layout issue by disabling transform and use absolute position
+        useTransform: false,
         animate: true,
         center: true,
       });

src/mixins/nft.js

@@ -221,7 +221,9 @@ export default {
       });
     },
     nftCollectorCollectedNFTList() {
-      return this.collectorMap[this.nftCollectorWalletAddress] || [];
+      return [
+        ...(this.collectorMap[this.nftCollectorWalletAddress] || []),
+      ].sort();
     },
     nftCollectorCollectedCount() {
       return this.nftCollectorCollectedNFTList.length || 0;

src/pages/campaign/writing-nft.vue

@@ -50,6 +50,12 @@
           />
         </svg>
       </div>
+      <a
+        class="flex items-center justify-center mt-[24px] text-medium-gray hover:text-like-cyan-dark text-[12px] leading-[5/3] underline transition-colors cursor-pointer"
+        href="https://likecoin.github.io/likecoin-nft-dashboard/"
+        target="_blank"
+        rel="noopener"
+      >{{ $t('campaign_nft_view_nft_dashboard') }}</a>
     </section>
     <section
       class="

src/store/modules/nft.js

@@ -1,11 +1,11 @@
 /* eslint no-param-reassign: "off" */
 import Vue from 'vue';
-import { LIKECOIN_NFT_HIDDEN_ITEMS } from '~/constant';
 import * as api from '@/util/api';
 import {
   NFT_CLASS_LIST_SORTING,
   NFT_CLASS_LIST_SORTING_ORDER,
   checkIsWritingNFT,
+  normalizeNFTList,
   isValidHttpUrl,
   formatOwnerInfoFromChain,
   getNFTsRespectDualPrefix,
@@ -272,38 +272,22 @@ const actions = {
     return owners;
   },
   async fetchNFTListByAddress({ commit }, address) {
-    const [nfts, createdNFTs] = await Promise.all([
+    const [collectedNFTs, createdNFTClasses] = await Promise.all([
       getNFTsRespectDualPrefix(this.$api, address),
       getNFTClassesRespectDualPrefix(this.$api, address),
     ]);
     const timestampMap = {};
-    nfts.forEach(nft => {
+    collectedNFTs.forEach(nft => {
       const { classId, timestamp } = nft;
       if (!timestampMap[classId] || timestampMap[classId] < timestamp) {
         timestampMap[classId] = timestamp;
       }
     });
-    const collected = [
-      ...new Map(
-        [...nfts]
-          .filter(({ classId }) => !LIKECOIN_NFT_HIDDEN_ITEMS.has(classId))
-          .sort((a, b) => b.timestamp - a.timestamp)
-          .map(({ classId, nftId }) => [classId, { classId, id: nftId }])
-      ).values(),
-    ];
-    const created = [
-      ...new Map(
-        [...createdNFTs]
-          .filter(({ classId }) => !LIKECOIN_NFT_HIDDEN_ITEMS.has(classId))
-          .map(({ classId }) => [classId, { classId }])
-      ).values(),
-    ];
-
     commit(TYPES.NFT_SET_USER_CLASSID_LIST_MAP, {
       address,
       nfts: {
-        created,
-        collected,
+        created: normalizeNFTList(createdNFTClasses),
+        collected: normalizeNFTList(collectedNFTs),
       },
     });
     commit(TYPES.NFT_SET_USER_LAST_COLLECTED_TIMESTAMP_MAP, {

src/util/nft.js

@@ -9,6 +9,7 @@ import {
   LIKECOIN_CHAIN_NFT_RPC,
   LIKECOIN_CHAIN_MIN_DENOM,
   LIKECOIN_NFT_API_WALLET,
+  LIKECOIN_NFT_HIDDEN_ITEMS,
 } from '../constant';
 
 let queryClient = null;
@@ -175,6 +176,14 @@ export function checkIsWritingNFT(classMetadata) {
   );
 }
 
+// NOTE: This is a temporary solution to check Writing NFT by NFT ID,
+// should be removed after created NFT list return proper content metadata
+export function checkIsWritingNFTByNFTId(id) {
+  return /^writing-[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
+    id
+  );
+}
+
 export function formatNFTInfo(nftInfo) {
   const {
     class_id: classId,
@@ -265,7 +274,10 @@ const fetchAllNFTClassFromChain = async (axios, owner) => {
   );
   // TODO: getNFTClasses API already contains chain metadata
   // should reuse them instead of dropping
-  return classes.map(c => ({ classId: c.id }));
+  return classes.map(c => ({
+    classId: c.id,
+    timestamp: new Date(c.created_at).getTime(),
+  }));
 };
 
 export const getNFTClassesRespectDualPrefix = async (axios, owner) => {
@@ -298,3 +310,24 @@ export function parseNFTMetadataURL(url) {
   if (schema === 'ipfs') return `${IPFS_VIEW_GATEWAY_URL}/${path}`;
   return url;
 }
+
+export function normalizeNFTList(list) {
+  return [
+    ...new Map(
+      [...list].map(({ classId, nftId, ...data }) => [
+        classId,
+        { ...data, classId, id: nftId },
+      ])
+    ).values(),
+  ]
+    .filter(({ classId }) => !LIKECOIN_NFT_HIDDEN_ITEMS.has(classId))
+    .sort((a, b) => {
+      if (a.id && b.id) {
+        const aIsWritingNFT = checkIsWritingNFTByNFTId(a.id);
+        const bIsWritingNFT = checkIsWritingNFTByNFTId(b.id);
+        if (aIsWritingNFT && !bIsWritingNFT) return -1;
+        if (!aIsWritingNFT && bIsWritingNFT) return 1;
+      }
+      return b.timestamp - a.timestamp;
+    });
+}