Add related link to likerland (#430)

* 💄 Add a button that leads to the likerland NFT page

* 💄 Add portfolio link when searching owner

* 💄 Update nftUrl button style

* 🎨 Use classId as condition for displaying the NFT button

* 🎨 Add noopener for ownerPortfolioUrl

locales/en.json

@@ -278,6 +278,7 @@
   "NFTPortal.button.download.iscn": "Download JSON",
   "NFTPortal.button.mint": "Mint NFT",
   "NFTPortal.button.mint.book": "Mint Book",
+  "NFTPortal.button.check.nft": "Check NFT",
   "NFTPortal.button.next":"Next",
   "NFTPortal.button.mintContinueLong": "Continue to mint Writing NFTs",
   "NFTPortal.button.mintContinue": "Continue to mint NFT",
@@ -379,6 +380,7 @@
   "UploadForm.warning": "Oops, file is too large. The file size should not exceed {size}MB",
   "WorksPage.empty.label": "No works",
   "WorksPage.label.search.result": "Search result for :",
+  "WorksPage.label.check.owner.portfolio": "check owner portfolio",
   "WorksPage.label.portfolio": "View my Writing NFT Portfolio",
   "WorksPage.pagination.button.first": "First",
   "WorksPage.pagination.button.last": "Last",

pages/search/_keyword.vue

@@ -54,11 +54,25 @@
         </Button>
       </div>
 
-      <div :class="['flex', 'flex-col', 'items-center', 'flex-shrink']">
+      <div
+        v-if="searchResultText"
+        :class="['flex', 'flex-col', 'items-center', 'flex-shrink','gap-[4px]']"
+      >
         <Label preset="h6" :text="$t('WorksPage.label.search.result')" />
-        <Label class="text-center" preset="h5" align="center">{{
-          keyword
-        }}</Label>
+        <Label
+          class="text-center text-medium-gray"
+          preset="p5"
+          align="center"
+          :text="searchResultText"
+        />
+        <a
+          v-if="owner"
+          :href="ownerPortfolioUrl"
+          target="_blank"
+          rel="noopener"
+          class="flex items-center justify-center cursor-pointer text-like-green text-[14px] underline underline-offset-1"
+          >{{ $t('WorksPage.label.check.owner.portfolio') }}<IconNorthEast/>
+        </a>
       </div>
 
       <div
@@ -107,6 +121,7 @@ import { Vue, Component, Watch } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type'
 import { logTrackerEvent } from '~/utils/logger'
+import { LIKER_LAND_URL } from '~/constant'
 
 const iscnModule = namespace('iscn')
 
@@ -135,17 +150,19 @@ export default class SearchPage extends Vue {
   ) => ISCNRecordWithID[] | PromiseLike<ISCNRecordWithID[]>
 
   @iscnModule.Action queryISCNByField!: (
-    arg0: { 
+    arg0: {
       iscnId?: string,
       owner?: string,
       contentFingerprint?: string,
       stakeholderId?: string,
       stakeholderName?: string,
-      keyword?: string, 
+      keyword?: string,
   }) => ISCNRecordWithID[] | PromiseLike<ISCNRecordWithID[]>
 
   pageNumber = Number(this.$route.query.page) || 0
   closeWarning = false
+  owner: any = ''
+  iscnId: any = ''
 
   get queryAllTerm(): string {
     const { q } = this.$route.query
@@ -161,6 +178,14 @@ export default class SearchPage extends Vue {
     return !!this.errorMessage
   }
 
+  get searchResultText() {
+    return this.owner || this.iscnId
+  }
+
+  get ownerPortfolioUrl() {
+    return `${LIKER_LAND_URL}/en/${this.owner}?tab=created`
+  }
+
   mounted() {
     this.search()
   }
@@ -177,19 +202,21 @@ export default class SearchPage extends Vue {
     });
   }
 
-  async search(){
+  async search() {
     logTrackerEvent(this, 'ISCNSearch', 'ISCNSearchResult', this.queryAllTerm, 1)
     if (this.queryAllTerm)  {
       await this.queryISCNByKeyword(this.queryAllTerm)
     } else {
-      const { 
+      const {
         iscnId,
         owner,
         content_fingerprint: contentFingerprint,
         stakeholder_id: stakeholderId,
-        stakeholder_name: stakeholderName, 
+        stakeholder_name: stakeholderName,
         keyword,
       } = this.$route.query;
+      this.owner = owner;
+      this.iscnId = iscnId
       const searchObject = {
         iscnId: iscnId as string,
         owner: owner as string,

pages/view/_iscnId/index.vue

@@ -86,6 +86,7 @@
       :class="[
         'flex',
         'justify-end',
+        'items-center',
         'w-full',
         'pt-[24px]',
         'gap-[8px]',
@@ -119,6 +120,18 @@
         :to="localeLocation({ name: 'nft-iscn-iscnId', params: { iscnId: iscnId }, query: mintQueries })"
         :text="$t('NFTPortal.button.mint')"
       />
+      <div v-if="!!classId" class="flex justify-center items-center p-[4px] rounded-[12px] border-like-cyan-light border-[2px]">
+        <Button
+          preset="tertiary"
+          :text="$t('NFTPortal.button.check.nft')"
+          :href="likerlandNftUrl"
+          target="_blank"
+        >
+          <template #append>
+            <IconArrowRight />
+          </template>
+        </Button>
+      </div>
     </div>
     <div
       :class="[
@@ -647,6 +660,7 @@ export default class ViewIscnIdPage extends Vue {
   }
 
   isPreminted = !this.isPopupLayout // assume popup is not preminted
+  classId = ''
 
   @iscnModule.Getter getISCNById!: (arg0: string) => ISCNRecordWithID
   @iscnModule.Action fetchISCNById!: (arg0: string) => Promise<{
@@ -746,6 +760,10 @@ export default class ViewIscnIdPage extends Vue {
     )
   }
 
+  get likerlandNftUrl(){
+    return `${LIKER_LAND_URL}/en/nft/class/${this.classId}`
+  }
+
   async mounted() {
     if (!this.iscnId) {
       const param = this.$route.params.iscnId
@@ -768,15 +786,20 @@ export default class ViewIscnIdPage extends Vue {
       this.$router.replace({ params: { iscnId: this.iscnId } })
     }
     if (this.isNFTBook) {
-      const premintClassCount = await getExistingClassCount(
+      const {
+        count: premintClassCount,
+        classes,
+      }: { count: number; classes: any } = await getExistingClassCount(
         extractIscnIdPrefix(this.iscnId),
       )
       this.isPreminted = Boolean(premintClassCount > 0)
+      if (this.isPreminted) {
+        this.classId = classes[0].id
+      }
     } else {
       this.getMintInfo()
     }
 
-
     if (!this.getISCNById(this.iscnId) || !this.iscnOwner) {
       const res = await this.fetchISCNById(this.iscnId)
       if (res) {
@@ -930,6 +953,9 @@ export default class ViewIscnIdPage extends Vue {
         paramsSerializer: (params) => qs.stringify(params),
       })
       this.isPreminted = !!data.classId
+      if(this.isPreminted) {
+        this.classId = data.classId
+      }
     } catch (err) {
       this.isPreminted = false
       if ((err as any).response?.status !== 404) {

utils/cosmos/index.ts

@@ -58,16 +58,19 @@ export async function getISCNQueryClient() {
 }
 
 export async function getExistingClassCount(iscnPrefix: any) {
-  const newIscnQueryClient = await getISCNQueryClient();
-  const cosmosQueryClient = await newIscnQueryClient.getQueryClient();
+  const newIscnQueryClient = await getISCNQueryClient()
+  const cosmosQueryClient = await newIscnQueryClient.getQueryClient()
   try {
     const { classes } = await cosmosQueryClient.likenft.classesByISCN(iscnPrefix)
-    return classes.length;
+    return { count: classes.length, classes }
   } catch (error) {
-    if (error.message === 'Query failed with (18): rpc error: code = InvalidArgument desc = not found: invalid request') {
-      return 0;
+    if (
+      (error as Error).message ===
+      'Query failed with (18): rpc error: code = InvalidArgument desc = not found: invalid request'
+    ) {
+      return { count: 0, classes: null }
     }
-      throw error;
+    throw error
   }
 }