💩 Add NFT collection temp UI

components/NFTMint/WriterMessage.vue

@@ -40,6 +40,67 @@
         </div>
       </div>
     </div>
+    <div
+      class="flex flex-col justify-start gap-[32px] p-[20px] pb-[24px] border-2 border-[#E6F4F2] rounded-[16px] w-full"
+    >
+      <Label
+        class="w-min text-like-green"
+        :text="$t('NFTPortal.label.message.collections')"
+        tag="div"
+        preset="p6"
+        valign="middle"
+        align="left"
+        content-class="whitespace-nowrap"
+      >
+        <template #prepend>
+          <IconEye />
+        </template>
+      </Label>
+      <Button
+        v-if="selectedNftCollection"
+        preset="tertiary"
+        text-preset="h6"
+        size="mini"
+        align="center"
+        :text="selectedNftCollection.displayName"
+        @click="handleSelectCollections(null)"
+      >
+        <template #append>
+          <IconDelete/>
+        </template>
+      </Button>
+      <template v-else>
+        <Button
+          v-for="n in nftCollections"
+          :key="n.id"
+          preset="tertiary"
+          text-preset="h6"
+          size="mini"
+          align="center"
+          :text="n.displayName"
+          @click="handleSelectCollections(n)"
+        />
+        <Button
+          preset="tertiary"
+          text-preset="h6"
+          size="mini"
+          align="center"
+          @click="handleNewCollections"
+        >
+          <template #prepend>
+            <TextField
+              :value="newCollectionName"
+              :placeholder="$t('NFTPortal.placeholder.newCollectionName')"
+              @click.native.stop="() => {}"
+              @input="(value) => (newCollectionName = value)"
+            />
+          </template>
+          <template #append>
+            <IconAddMini/>
+          </template>
+        </Button>
+      </template>
+    </div>
 
     <div class="flex justify-center">
       <Button
@@ -109,9 +170,14 @@ export default class UploadForm extends Vue {
 
   @Prop(Number) readonly premintAmount!: undefined
 
+  @Prop(Array) readonly nftCollections!: any[]
+
+  @Prop(Object) readonly selectedNftCollection!: any
+
   userInfo: any = undefined
   avatar: string = ''
   displayName: string = this.address
+  newCollectionName: string = '';
   shouldShowSettings = false
 
   async mounted() {
@@ -129,6 +195,14 @@ export default class UploadForm extends Vue {
     }
   }
 
+  handleSelectCollections(collection: any) {
+    this.$emit('select-collection', collection)
+  }
+
+  handleNewCollections() {
+    this.$emit('select-collection', { displayName: this.newCollectionName })
+  }
+
   handleClickSettings() {
     this.shouldShowSettings = !this.shouldShowSettings
   }

constant/api.ts

@@ -30,6 +30,7 @@ export const getNFTMetadata = (iscnId: string) => {
     qsPayload,
   )}`;
 };
+export const getNFTCollectionsApi = (wallet: string, collectionId?: string) => `${LIKE_CO_API_ROOT}/likernft/collections/${collectionId ? `${collectionId}/` : ''}?wallet=${wallet}`;
 export const getChainNFTIdList = (classId: string): string => `${LIKECOIN_CHAIN_API}/likechain/likenft/v1/owner?class_id=${classId}`
 export const getUserInfoMinByAddress = (addr: string) =>
   `${LIKE_CO_API_ROOT}/users/addr/${addr}/min`;

pages/nft/iscn/_iscnId.vue

@@ -34,7 +34,10 @@
         :address="address"
         :placeholder="reservePlaceholder"
         :premint-amount="premintAmount"
+        :nft-collections="nftCollections"
+        :selected-nft-collection="pendingCollection"
         @message-change="(value) => (message = value)"
+        @select-collection="onSelectCollection"
         @update-input="handleInputReserveNft"
       />
 
@@ -95,7 +98,7 @@
                 class="flex items-center underline"
                 href="https://discord.gg/likecoin"
                 target="_blank"
-                @click.native.prevent="onReport"
+                @click.prevent="onReport"
               >
                 <span>{{ $t('NFTPortal.label.report') }}</span>
               </a>
@@ -134,11 +137,12 @@ import {
   getNftUriViaNftId,
   getChainNFTIdList,
   getNftModelApi,
+  getNFTCollectionsApi,
 } from '~/constant/api'
 import { getSigningClient } from '~/utils/cosmos/iscn/sign'
 import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type'
 import { LIKER_LAND_URL, LIKER_NFT_API_WALLET, LIKER_NFT_FEE_WALLET } from '~/constant'
-import sendLIKE from '~/utils/cosmos/sign'
+import { sendLIKE } from '~/utils/cosmos/sign'
 import { getAccountBalance } from '~/utils/cosmos'
 import { logTrackerEvent } from '~/utils/logger'
 
@@ -214,6 +218,7 @@ export default class NFTTestMintPage extends Vue {
 
   @walletModule.Action toggleSnackbar!: (error: string) => void
   @walletModule.Action('initIfNecessary') initIfNecessary!: () => Promise<any>
+  @walletModule.Action('signTextMessage') signTextMessage!: (arg0: { action: string; }) => any
 
   @walletModule.Getter('getType') walletType!: string | null
   @walletModule.Getter('getWalletAddress') address!: string
@@ -242,6 +247,8 @@ export default class NFTTestMintPage extends Vue {
   NftName: string = '';
   NftDescription: string  = '';
 
+  nftCollections: any[] = [];
+  pendingCollection: any = null;
   message: string = ''
 
   isCustomOgimage = false
@@ -465,13 +472,18 @@ export default class NFTTestMintPage extends Vue {
     return `0 - ${this.premintAmount - 1}`
   }
 
+  get shouldCreateNewNFTCollection() {
+    return this.pendingCollection && !(this.pendingCollection.id && this.nftCollections.find(nft => nft.id === this.pendingCollection.id));
+  }
+
   async mounted() {
     try {
       await Promise.all([
         this.getISCNInfo(),
         this.getMintInfo(),
       ])
       await this.getOgImage()
+      await this.getNFTCollections();
       if (this.$route.query.mint_status_id && !this.mintStatusId) {
         this.tryRecoverMintStatus(this.$route.query.mint_status_id as string)
       }
@@ -689,6 +701,17 @@ export default class NFTTestMintPage extends Vue {
     }
   }
 
+  async getNFTCollections() {
+    try {
+      const { data } = await this.$axios.get(getNFTCollectionsApi(this.address))
+      const collections = Object.keys(data).map(id => ({ id, ...data[id] }));
+      this.nftCollections = collections;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
   async checkArweaveIdExistsAndEstimateFee() {
     try {
       logTrackerEvent(this, 'IscnMintNFT', 'CheckArweaveIdExistsAndEstimateFee', this.iscnId, 1);
@@ -827,6 +850,9 @@ export default class NFTTestMintPage extends Vue {
         )
         this.postInfo = data
       }
+      if (this.pendingCollection) {
+        await this.handleNFTCollection();
+      }
       logTrackerEvent(this, 'IscnMintNFT', 'PostMintInfoSuccess', this.classId, 1);
     } catch (error: any) {
       // If the API returns a status of 409, it indicates that the request may have already successful
@@ -939,6 +965,41 @@ export default class NFTTestMintPage extends Vue {
     }
   }
 
+  async handleNFTCollection() {
+    if (this.shouldCreateNewNFTCollection) {
+      const signature = await this.signTextMessage({ action: 'new_collection' });
+      const payload = {
+        ...signature,
+        payload: { displayName: this.pendingCollection.displayName, nfts: [this.classId] },
+      }
+      const { data } = await axios.post(
+        getNFTCollectionsApi(this.address),
+        payload,
+      )
+      this.pendingCollection.id = data.id;
+      logTrackerEvent(this, 'IscnMintNFT', 'PostNewCollectionSuccess', this.classId, 1);
+    } else {
+      const signature = await this.signTextMessage({ action: 'patch_collection' });
+      const {
+        id: collectionId,
+        displayName: collectionDisplayName,
+        nfts: collectionNfts,
+      } = this.pendingCollection
+      const payload = {
+        ...signature,
+        payload: {
+          displayName: collectionDisplayName,
+          nfts: collectionNfts.concat(this.classId),
+        },
+      }
+      await axios.patch(
+        getNFTCollectionsApi(this.address, collectionId),
+        payload,
+      )
+      logTrackerEvent(this, 'IscnMintNFT', 'PatchCollectionSuccess', this.classId, 1);
+    }
+  }
+
   async mintNFT() {
     if (this.isSubscriptionMint) {
       if (!this.mintNFTResult) {
@@ -1032,6 +1093,10 @@ export default class NFTTestMintPage extends Vue {
     logTrackerEvent(this, 'IscnMintNFT', 'ReserveNFT', this.reserveNft.toString(), 1);
   }
 
+  onSelectCollection(collection: any | null) {
+    this.pendingCollection = collection;
+  }
+
   onReport() {
     logTrackerEvent(this, 'IscnMintNFT', 'onClickReportIssue', this.mintState, 1);
   }

pages/nft/url/index.vue

@@ -93,7 +93,7 @@
                 class="flex items-center underline"
                 href="https://discord.gg/likecoin"
                 target="_blank"
-                @click.native.prevent="onReport"
+                @click.prevent="onReport"
               >
                 <span>{{ $t('NFTPortal.label.report') }}</span>
               </a>

store/subscription.ts

@@ -12,7 +12,6 @@ import {
   getSubscriptionPortalApi,
   getUserIsSubscribedMinterApi,
 } from '@/constant/api'
-import signSubscriptionAction from '~/utils/cosmos/subscription'
 
 @Module({
   name: 'subscription',
@@ -86,16 +85,9 @@ export default class SubscriptionStore extends VuexModule {
 
   @Action
   async signSubscriptionPortal() {
-    await this.context.dispatch('wallet/initIfNecessary', null, { root: true })
-    const { address: wallet, signer } = this.context.rootState.wallet
     try {
-      this.context.commit('wallet/setMessageSigningMode', true, { root: true })
-      const payload = await signSubscriptionAction(
-        signer,
-        wallet,
-        'subscription_portal',
-      );
-      this.context.commit('wallet/setMessageSigningMode', false, { root: true })
+      const payload = await this.context.dispatch('wallet/signTextMessage', { action: 'subscription_portal' }, { root: true })
+      const { address: wallet } = this.context.rootState.wallet
       const { data } = await axios.post(
         getSubscriptionPortalApi(wallet),
         payload,
@@ -110,21 +102,15 @@ export default class SubscriptionStore extends VuexModule {
 
   @Action
   async newMintInstance() {
-    await this.context.dispatch('wallet/initIfNecessary', null, { root: true })
-    const { address: wallet, signer } = this.context.rootState.wallet
     let payload;
     try {
-      this.context.commit('wallet/setMessageSigningMode', true, { root: true })
-      payload = await signSubscriptionAction(
-        signer,
-        wallet,
-        'new_mint',
-      );
-      this.context.commit('wallet/setMessageSigningMode', false, { root: true })
+      payload = await this.context.dispatch('wallet/signTextMessage', { action: 'new_mint' }, { root: true })
     } catch (_) {
       // no op
       return null;
     }
+
+    const { address: wallet } = this.context.rootState.wallet
     const { data } = await axios.post(
       getNewSubscriberMintInstanceApi(wallet),
       payload,

store/wallet.ts

@@ -5,6 +5,7 @@ import { OfflineSigner } from '@cosmjs/proto-signing'
 import { catchAxiosError } from '~/utils/misc'
 import { LIKECOIN_WALLET_CONNECTOR_CONFIG } from '~/constant/network'
 import { getUserInfoMinByAddress } from '~/constant/api'
+import { signTextAction } from '~/utils/cosmos/sign'
 
 let likecoinWalletLib: any = null
 let connectorInstance: any = null
@@ -93,6 +94,7 @@ export default class Wallet extends VuexModule {
     };
   }
 
+  @Mutation
   setHasSubmittedEmail(hasSubmittedEmail: boolean) {
     this.hasSubmittedEmail = hasSubmittedEmail
   }
@@ -214,6 +216,20 @@ export default class Wallet extends VuexModule {
     this.context.dispatch('subscription/resetAllStatus', null, { root: true });
   }
 
+  @Action
+  async signTextMessage({ action }: { action: string }) {
+    await this.context.dispatch('initIfNecessary');
+    if (!this.signer) throw new Error('WALLET_NOT_INITED')
+    this.context.commit('setMessageSigningMode', true)
+    const payload = await signTextAction(
+      this.signer,
+      this.address,
+      action,
+    );
+    this.context.commit('setMessageSigningMode', false)
+    return payload;
+  }
+
   get getType() {
     return this.type
   }