🚸 Enable users to mint NFTs on nft-book-press page (#423)

* 🚸 Enable users to mint NFTs on nft-book-press page * 🎨 Move download JSON outside isShowMintBtn * 🥅 Hide mint button if user is not iscn owner * 🥅 Add preminted check for books * 🚨 Fix lint error * 🔥 Remove unused code * 🎨 Fix formatting --------- Co-authored-by: William Chong <6198816+williamchong@users.noreply.github.com>
likecoin · Dec 23, 2023 · f83c214 · f83c214
1 parent a0d2931
commit f83c214
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 18 deletions.
diff --git a/constant/index.ts b/constant/index.ts
@@ -120,3 +120,5 @@ export const LIKECOIN_CHAIN_STAKING_ENDPOINT = IS_TESTNET
   : 'https://dao.like.co/validators';
 
 export const UPLOAD_FILESIZE_MAX = 200 * 1024 * 1024; // 200MB
+
+export const NFT_BOOK_PRESS_URL = IS_TESTNET ? 'https://likecoin-nft-book-press-testnet.netlify.app/' : 'https://likecoin.github.io/nft-book-press/';
diff --git a/locales/en.json b/locales/en.json
@@ -271,6 +271,7 @@
   "NFTPortal.button.convertToIscn": "Convert Content to Writing NFT",
   "NFTPortal.button.download.iscn": "Download JSON",
   "NFTPortal.button.mint": "Mint NFT",
+  "NFTPortal.button.mint.book": "Mint Book",
   "NFTPortal.button.next":"Next",
   "NFTPortal.button.mintContinueLong": "Continue to mint Writing NFTs",
   "NFTPortal.button.mintContinue": "Continue to mint NFT",

diff --git a/pages/view/_iscnId/index.vue b/pages/view/_iscnId/index.vue
@@ -25,7 +25,7 @@
     />
     <IscnUploadedInfo
       class="w-full"
-      :owner="owner"
+      :owner="iscnOwner"
       :iscn-id="iscnId"
       :iscn-hash="txHash"
       :record="record"
@@ -83,7 +83,6 @@
     ]"
   >
     <div
-      v-if="isShowMintButton"
       :class="[
         'flex',
         'justify-end',
@@ -99,6 +98,14 @@
         </template>
       </Button>
       <Button
+        v-if="isShowMintButton && isNFTBook"
+        preset="secondary"
+        class="w-full lg:w-auto"
+        :text="$t('NFTPortal.button.mint.book')"
+        @click="clickMintNFTBook"
+      />
+      <Button
+        v-if="isShowMintButton && !isNFTBook"
         preset="secondary"
         class="w-full lg:w-auto"
         :to="localeLocation({ name: 'nft-iscn-iscnId', params: { iscnId: iscnId }, query: mintQueries })"
@@ -204,7 +211,7 @@
             {{ metadata.description }}
           </FormField>
           <FormField
-            v-if="owner"
+            v-if="iscnOwner"
             :label="$t('iscn.meta.owner')"
             class="mb-[12px]"
           >
@@ -214,8 +221,8 @@
                 'break-all',
                 'cursor-pointer',
               ]"
-              :to="localeLocation({ name: 'search-keyword', query: { owner } })">
-              {{ owner }}
+              :to="localeLocation({ name: 'search-keyword', query: { owner: iscnOwner } })">
+              {{ iscnOwner }}
             </Link>
           </FormField>
           <FormField :label="$t('iscn.meta.transaction')" class="mb-[12px]">
@@ -490,13 +497,14 @@ import qs from 'querystring'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MetaInfo } from 'vue-meta'
 import { API_LIKER_NFT_MINT } from '~/constant/api'
-import { isCosmosTransactionHash } from '~/utils/cosmos'
+import { isCosmosTransactionHash, getExistingClassCount } from '~/utils/cosmos'
 import { getIPFSUrlFromISCN } from '~/utils/cosmos/iscn'
 import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type'
 import { downloadJSON } from '~/utils/misc'
 import { logTrackerEvent } from '~/utils/logger'
 import { ellipsis, copyToClipboard, extractIscnIdPrefix } from '~/utils/ui'
 import {
+  NFT_BOOK_PRESS_URL,
   ISCN_PREFIX,
   BIG_DIPPER_TX_BASE_URL,
   ISCN_RAW_DATA_ENDPOINT,
@@ -506,7 +514,10 @@ import {
   LIKER_LAND_URL,
 } from '~/constant'
 
+
+
 const iscnModule = namespace('iscn')
+const walletModule = namespace('wallet')
 
 export enum ErrorMessage {
   statusCode400 = 'not iscn id or tx hash',
@@ -535,8 +546,8 @@ export enum ExifList {
     }
     const description =
       (this as ViewIscnIdPage).metadata?.description || this.$t('page.iscnId.default.description')
-    const iscnOwner = (this as ViewIscnIdPage).owner;
-    const iscnOwnerPerson =iscnOwner
+    const { iscnOwner } = this as ViewIscnIdPage;
+    const iscnOwnerPerson = iscnOwner
       ? {
           '@context': 'http://www.schema.org',
           '@type': 'Person',
@@ -595,7 +606,7 @@ export enum ExifList {
           if (res) {
             return {
               iscnId: res.records[0].id,
-              owner: res.owner,
+              iscnOwner: res.owner,
             };
           }
         } else {
@@ -611,7 +622,7 @@ export enum ExifList {
   },
 })
 export default class ViewIscnIdPage extends Vue {
-  owner = ''
+  iscnOwner = ''
   iscnId = ''
   txHash = ''
   url = ''
@@ -640,8 +651,10 @@ export default class ViewIscnIdPage extends Vue {
     arg0: string
   ) => Promise<{ records: ISCNRecordWithID[] }>
 
+  @walletModule.Getter('getWalletAddress') currentAddress!: string
+
   get isShowMintButton() {
-    return !this.isPreminted
+    return !this.isPreminted && this.iscnOwner === this.currentAddress
   }
 
   get isPopupLayout() {
@@ -668,6 +681,10 @@ export default class ViewIscnIdPage extends Vue {
     return this.metadata && this.metadata['@type']
   }
 
+  get isNFTBook() {
+    return this.type === 'Book'
+  }
+
   get imgSrc() {
     return (
       getIPFSUrlFromISCN(this.getISCNById(this.iscnId))
@@ -738,12 +755,21 @@ export default class ViewIscnIdPage extends Vue {
       this.iscnId = res.records[0].id
       this.$router.replace({ params: { iscnId: this.iscnId } })
     }
-    this.getMintInfo()
-    if (!this.getISCNById(this.iscnId) || !this.owner) {
+    if (this.isNFTBook) {
+      const premintClassCount = await getExistingClassCount(
+        extractIscnIdPrefix(this.iscnId),
+      )
+      this.isPreminted = Boolean(premintClassCount > 0)
+    } else {
+      this.getMintInfo()
+    }
+
+
+    if (!this.getISCNById(this.iscnId) || !this.iscnOwner) {
       const res = await this.fetchISCNById(this.iscnId)
       if (res) {
         this.iscnId = res.records[0].id // To replace prefix with full id
-        this.owner = res.owner
+        this.iscnOwner = res.owner
       }
     }
     if (!this.getISCNById(this.iscnId)) {
@@ -770,7 +796,12 @@ export default class ViewIscnIdPage extends Vue {
 
   onClickViewContent() {
     logTrackerEvent(this, 'ISCNView', 'ViewContent', this.iscnId, 1);
-    window.open(this.viewContentURL, '_blank');
+    window.open(this.viewContentURL, '_blank', 'noopener');
+  }
+
+  clickMintNFTBook() {
+    logTrackerEvent(this, 'ISCNView', 'RedirectToBookPress', this.iscnId, 1);
+    window.open(`${NFT_BOOK_PRESS_URL}/mint-nft?iscn_id=${this.iscnId}`, '_blank', 'noopener');
   }
 
   showExifInfo() {

diff --git a/utils/cosmos/index.ts b/utils/cosmos/index.ts
@@ -2,12 +2,14 @@
 import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
 import { QueryClient, BankExtension, Coin } from "@cosmjs/stargate";
 import BigNumber from 'bignumber.js';
+import { ISCNQueryClient } from "@likecoin/iscn-js";
 
-import config from '~/constant/network';
-import { COSMOS_DENOM } from '~/constant';
+import config from "../../constant/network";
+import { COSMOS_DENOM, LIKECOIN_CHAIN_NFT_RPC } from '../../constant';
 
 let cosmRpcLib: any = null
 let cosmLib: any = null;
+let iscnQueryClient: any = null;
 
 async function getCosmRpcLib() {
   if (!cosmRpcLib) {
@@ -46,6 +48,29 @@ export async function getQueryClient() {
   return queryClient;
 }
 
+export async function getISCNQueryClient() {
+  if (!iscnQueryClient) {
+    const pendingClient = new ISCNQueryClient();
+    await pendingClient.connect(LIKECOIN_CHAIN_NFT_RPC);
+    iscnQueryClient = pendingClient;
+  }
+  return iscnQueryClient;
+}
+
+export async function getExistingClassCount(iscnPrefix: any) {
+  const newIscnQueryClient = await getISCNQueryClient();
+  const cosmosQueryClient = await newIscnQueryClient.getQueryClient();
+  try {
+    const { classes } = await cosmosQueryClient.likenft.classesByISCN(iscnPrefix)
+    return classes.length;
+  } catch (error) {
+    if (error.message === 'Query failed with (18): rpc error: code = InvalidArgument desc = not found: invalid request') {
+      return 0;
+    }
+      throw error;
+  }
+}
+
 function LIKEToNanolike(value: string|number): string {
   return (new BigNumber(value)).multipliedBy(1e9).toFixed();
 }

diff --git a/utils/ui.js b/utils/ui.js
@@ -23,7 +23,6 @@ export function ellipsisDescription(value) {
   }
   return value;
 }
-
 export function copyToClipboard(text){
   const copyText = document.createElement('p');
   copyText.textContent = text;