🩹 [Portfolio] Fix unable to go to created P.NFT details page

src/components/NFTCampaign/Item.vue

@@ -25,7 +25,7 @@
       :content-preview-props="{
         to: {
           name: 'nft-class-classId-nftId',
-          params: { classId: classId, nftId: nextNewNFTId },
+          params: { classId: classId, nftId: nftIdCollectNext },
         },
         tag: 'NuxtLink',
       }"

src/components/NFTPortfolio/Item.vue

@@ -35,6 +35,10 @@ export default {
       type: String,
       required: true,
     },
+    portfolioWallet: {
+      type: String,
+      required: true,
+    },
     nftId: {
       type: String,
       default: undefined,
@@ -47,13 +51,23 @@ export default {
     };
   },
   computed: {
+    nftIdCollectedFirstByPortfolio() {
+      return this.collectorMap[this.portfolioWallet]?.[0];
+    },
+    nftIdForDetails() {
+      return (
+        this.nftId ||
+        this.nftIdCollectNext ||
+        this.nftIdCollectedFirstByPortfolio
+      );
+    },
     detailsPageRoute() {
-      if (this.nftId || this.nextNewNFTId) {
+      if (this.nftIdForDetails) {
         return {
           name: 'nft-class-classId-nftId',
           params: {
             classId: this.classId,
-            nftId: this.nftId || this.nextNewNFTId,
+            nftId: this.nftIdForDetails,
           },
         };
       }

src/components/NFTPortfolio/MainView.vue

@@ -96,6 +96,7 @@
         >
           <NFTPortfolioItem
             :class-id="nft.classId"
+            :portfolio-wallet="portfolioWallet"
             :nft-id="nft.id"
             @load="updatePortfolioGrid"
           />
@@ -136,6 +137,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    portfolioWallet: {
+      type: String,
+      required: true,
+    },
     portfolioTab: {
       type: String,
       required: true,

src/mixins/nft.js

@@ -255,14 +255,14 @@ export default {
       );
       return collector?.collectedCount || 0;
     },
-    firstCollectedNFTId() {
-      const ownNFT = this.collectorMap[this.getAddress];
-      return ownNFT?.[0];
-    },
     nftClassDetailsPageURL() {
       return `/nft/class/${this.classId}?referrer=${this.getAddress}`;
     },
-    nextNewNFTId() {
+    nftIdCollectedFirstByUser() {
+      const ownNFT = this.collectorMap[this.getAddress];
+      return ownNFT?.[0];
+    },
+    nftIdCollectNext() {
       return this.purchaseInfo?.metadata?.nextNewNFTId;
     },
     canCollectWithoutWallet() {
@@ -296,15 +296,15 @@ export default {
       if (
         newCount === 1 &&
         oldCount === 0 &&
-        !this.firstCollectedNFTId &&
+        !this.nftIdCollectedFirstByUser &&
         !this.nftCollectorsSync
       ) {
         this.nftCollectorsSync = new Promise(async resolve => {
           // `fetchNFTOwners` might take longer to return the most updated collectors
-          // causing `firstCollectedNFTId` to be undefined or collectors list out-sync
+          // causing `nftIdCollectedFirstByUser` to be undefined or collectors list out-sync
           // Should keep fetching if the user just collected the NFT but not found in the collectors list
           let tries = 0;
-          while (!this.firstCollectedNFTId && tries < 10) {
+          while (!this.nftIdCollectedFirstByUser && tries < 10) {
             // eslint-disable-next-line no-await-in-loop
             await this.updateNFTOwners();
             // eslint-disable-next-line no-await-in-loop
@@ -602,7 +602,7 @@ export default {
     },
     async transferNFT({
       toWallet,
-      nftId = this.firstCollectedNFTId,
+      nftId = this.nftIdCollectedFirstByUser,
       memo = '',
     } = {}) {
       try {
@@ -621,7 +621,7 @@ export default {
           return;
         }
 
-        // Wait for collectors sync for getting `firstCollectedNFTId`
+        // Wait for collectors sync for getting `nftIdCollectedFirstByUser`
         if (this.nftCollectorsSync) {
           this.uiSetTxStatus(TX_STATUS.PROCESSING);
           await this.nftCollectorsSync;
@@ -690,7 +690,7 @@ export default {
           1
         );
         await Promise.all([
-          this.updateNFTOwners(), // blocking update firstCollectedNFTId,
+          this.updateNFTOwners(), // blocking update nftIdCollectedFirstByUser,
           this.fetchUserCollectedCount(),
         ]);
         this.uiSetTxStatus(TX_STATUS.COMPLETED);

src/pages/_id/index.vue

@@ -55,6 +55,7 @@
       {{ /* Right Column */ }}
       <NFTPortfolioMainView
         key="portfolio"
+        :portfolio-wallet="wallet"
         :portfolio-tab="currentTab"
         :portfolio-items="currentNFTClassList"
         :portfolio-items-show-count="currentNFTClassListShowCount"

src/pages/dashboard/index.vue

@@ -24,6 +24,7 @@
       <!-- Main -->
       <NFTPortfolioMainView
         key="dashboard"
+        :portfolio-wallet="getAddress"
         :portfolio-tab="currentTab"
         :portfolio-items="currentNFTClassList"
         :portfolio-items-show-count="currentNFTClassListShowCount"