Merge pull request #99 from kodadot/one-by-one

Ability to mint single NFT

Author: yangwao

dashboard/src/components/rmrk/Create/CreateCollection.vue

@@ -85,6 +85,7 @@ import { Collection, CollectionMetadata } from '../service/scheme';
 import { pinFile, pinJson, unSanitizeIpfsUrl } from '@/pinata';
 import { decodeAddress } from '@polkadot/keyring';
 import { u8aToHex } from '@polkadot/util';
+import { generateId } from '@/components/rmrk/service/Consolidator'
 
 
 const components = {
@@ -106,7 +107,7 @@ export default class CreateCollection extends Mixins(SubscribeMixin) {
   private password: string = '';
 
   get rmrkId(): string {
-    return this.generateId(this.accountIdToPubKey);
+    return generateId(this.accountId, this.rmrkMint?.symbol || '')
   }
 
   get accountIdToPubKey() {

dashboard/src/components/rmrk/Create/CreateToken.vue

@@ -3,14 +3,25 @@
     <div class="box">
       <b-loading is-full-page v-model="isLoading" :can-cancel="true"></b-loading>
       <AccountSelect :label="$i18n.t('Account')" v-model="accountId" />
-      <b-field grouped v-if="accountId" :label="$i18n.t('Collection')">
+      <template v-if="accountId">
+        <b-switch v-model="oneByOne"
+          passive-type="is-dark"
+          :rounded="false">
+          {{ oneByOne ? 'Single NFT' : 'NFT(s) in collection' }}
+        </b-switch>
+        <b-field grouped v-if="!oneByOne" :label="$i18n.t('Collection')">
         <b-select placeholder="Select a collection" v-model="selectedCollection" expanded>
           <option v-for="option in data" :value="option" :key="option.id">
             {{ option.name }} {{ option.id }}
           </option>
         </b-select>
         <Tooltip :label="$i18n.t('Select collection where do you want mint your token')" />
       </b-field>
+      <b-field v-else grouped :label="$i18n.t('Symbol')">
+        <b-input v-model="symbol" expanded></b-input>
+        <Tooltip :label="$i18n.t('Symbol you want to trade it under')" />
+      </b-field>
+      </template>
       <b-field>
         <PasswordInput v-if="canSubmit" v-model="password" :account="accountId" />
       </b-field>
@@ -28,7 +39,7 @@
       <b-field grouped>
         <b-field position="is-left" expanded>
           <b-button
-            v-if="selectedCollection"
+            v-if="accountId && (selectedCollection || singleNFTValid)"
             type="is-info"
             icon-left="plus"
             @click="handleAdd"
@@ -64,13 +75,13 @@ import {
   Collection,
   NFT,
   NFTMetadata,
-  NFTWithMeta,
-  getNftId
 } from '../service/scheme';
 import { pinFile, pinJson, unSanitizeIpfsUrl } from '@/pinata';
 import PasswordInput from '@/components/shared/PasswordInput.vue';
 import slugify from 'slugify'
 import { fetchCollectionMetadata } from '../utils';
+import { generateId } from '@/components/rmrk/service/Consolidator'
+import NFTUtils from '../service/NftUtils';
 
 const shouldUpdate = (val: string, oldVal: string) => val && val !== oldVal;
 
@@ -97,6 +108,8 @@ export default class CreateToken extends Vue {
   private isLoading: boolean = false;
   private password: string = '';
   private alreadyMinted = 0;
+  private oneByOne: boolean = true;
+  private symbol: string = '';
 
   @Watch('accountId')
   hasAccount(value: string, oldVal: string) {
@@ -136,8 +149,13 @@ export default class CreateToken extends Vue {
     return this.added.length
   }
 
+  get singleNFTValid() {
+    return this.oneByOne && this.symbol
+  }
+
   get disabled() {
-    return this.selectedCollection?.max === this.added.length + this.alreadyMinted;
+    const max = this.oneByOne ? 1 : this.selectedCollection?.max
+    return max === this.added.length + this.alreadyMinted;
   }
 
   private handleUpdate(item: { view: NFTAndMeta; index: number }) {
@@ -162,8 +180,6 @@ export default class CreateToken extends Vue {
       ...nftForMint,
       metadata: metaHash,
       currentOwner: this.accountId,
-      // id,
-      // _id: id,
       transferable: Number(nftForMint.transferable),
       instance: slugify(nftForMint.name, '_').toUpperCase()
     };
@@ -209,16 +225,21 @@ export default class CreateToken extends Vue {
     return unSanitizeIpfsUrl(metaHash);
   }
 
-  private async submit() {
+  protected async submit() {
     this.isLoading = true;
     const { api } = Connector.getInstance();
-    const remarks: string[] = await Promise.all(this.added
-    .map(this.makeItSexy)
-    .map(async mint => this.toMintFormat(await mint)
-    ));
-    console.log('remarks', remarks);
+    const nfts: NFT[] = await Promise.all(this.added.map(this.makeItSexy));
+
+    const remarks: string[] = nfts.map(this.toMintFormat)
+
+    if (!remarks.length) {
+      throw new RangeError('Unable to process empty NFTs!')
+    }
+
+    const firstNFT = nfts[0];
+    const collectionToMint: string[] = this.oneByOne ? [NFTUtils.encodeCollection(NFTUtils.collectionFromNFT(this.symbol, firstNFT, this.version), this.version)] : []
 
-    const batchMethods: any[] = remarks.map(this.toRemark)
+    const batchMethods = [...collectionToMint.map(this.toRemark), ...remarks.map(this.toRemark)]
     console.log('batchMethods', batchMethods)
     const rmrkService = getInstance();
 
@@ -233,7 +254,7 @@ export default class CreateToken extends Vue {
           execResultValue(tx)
           const header = await api.rpc.chain.getHeader(result.status.asFinalized);
           const blockNumber = header.number.toString();
-          remarks.forEach(async (rmrk, index) => {
+          for (const [index, rmrk] of [...collectionToMint, ...remarks].entries()) {
             this.isLoading = true;
             try {
               const res = await rmrkService?.resolve(rmrk, this.accountId, blockNumber)
@@ -243,7 +264,7 @@ export default class CreateToken extends Vue {
               console.warn(`Failed Indexing ${index} with err ${e}`);  
             }
             this.isLoading = false;
-          })    
+          }
         }
       });
       console.warn('TX IN', tx);
@@ -259,7 +280,7 @@ export default class CreateToken extends Vue {
 
   protected handleAdd() {
     const rmrk = emptyObject<NFTAndMeta>();
-    rmrk.collection = this.selectedCollection?.id || '';
+    rmrk.collection = this.oneByOne ? generateId(this.accountId, this.symbol) : this.selectedCollection?.id || '';
     rmrk.sn = this.calculateSerialNumber(this.added.length);
     rmrk.meta = emptyObject<NFTMetadata>();
     rmrk.transferable = 1;

dashboard/src/components/rmrk/Gallery/GalleryItem.vue

@@ -28,7 +28,7 @@
                     class="subtitle is-size-5">
                     {{ nft.description }}
                   </p>
-                  <b-skeleton count="3" size="is-large" :active="isLoading"></b-skeleton>
+                  <b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
                 </p>
               </div>
             </div>

dashboard/src/components/rmrk/service/Consolidator.ts

@@ -105,7 +105,8 @@ function accountIdToPubKey(accountId: string) {
   return (accountId && u8aToHex(decodeAddress(accountId))) || '';
 }
 
-export function generateId(pubkey: string, symbol: string): string {
+export function generateId(caller: string, symbol: string): string {
+  const pubkey = caller.startsWith('0x') ? caller : accountIdToPubKey(caller);
   return (
     pubkey?.substr(2, 10) +
     pubkey?.substring(pubkey.length - 8) +

dashboard/src/components/rmrk/service/NftUtils.ts

@@ -1,6 +1,8 @@
 import { hexToString, isHex } from '@polkadot/util';
 import { RmrkEvent, RMRK, RmrkInteraction } from '../types';
 import { SQUARE } from '../utils'
+import { generateId } from '../service/Consolidator'
+import { Collection, NFT } from './scheme';
 
 class NFTUtils {
   public static decode(value: string) {
@@ -22,8 +24,51 @@ class NFTUtils {
     } catch(e) {
       throw e
     }
+  }
+
+  public static toString(rmrkType: NFT | Collection, version: string = 'RMRK1.0.0'): string {
+    if (NFTUtils.isCollection(rmrkType)) {
+      return NFTUtils.encodeCollection(rmrkType, version)
+    }
+
+    if (NFTUtils.isNFT(rmrkType)) {
+      return NFTUtils.encodeNFT(rmrkType, version)
+    }
+
+    return ''
+  }
 
+  public static encodeCollection(collection: Collection, version: string) {
+    return `RMRK::MINT::${version}::${encodeURIComponent(
+      JSON.stringify(collection)
+    )}`;
+  }
+  
+  protected static encodeNFT(nft: NFT, version: string) {
+    return `RMRK::MINTNFT::${version}::${encodeURIComponent(
+      JSON.stringify(nft)
+    )}`
+  }
+
+  public static collectionFromNFT(symbol: string, nft: NFT, version: string = 'RMRK1.0.0'): Collection {
+    return {
+      id: generateId(nft.currentOwner, symbol),
+      _id: '',
+      symbol,
+      issuer: nft.currentOwner,
+      version,
+      name: nft.name,
+      max: 1,
+      metadata: nft.metadata
+    }
+  }
+
+  public static isCollection(object: Collection | NFT): object is Collection {
+    return 'issuer' in object && 'symbol' in object;
+  }
 
+  public static isNFT(object: Collection | NFT): object is NFT {
+    return 'currentOwner' in object && 'instance' in object;
   }
 
   public static decodeAndConvert(rmrkString: string) {

dashboard/src/components/rmrk/utils.ts

@@ -13,6 +13,16 @@ import { RmrkType } from './service/RmrkService';
 import { NFTMetadata } from './service/scheme';
 
 export const SQUARE = '::'
+export const DEFAULT_IPFS_PROVIDER = 'https://ipfs.io/';
+
+export const ipfsProviders: Record<string, string> = {
+  pinata: 'https://gateway.pinata.cloud/',
+  cloudflare: 'https://cloudflare-ipfs.com/',
+  ipfs: DEFAULT_IPFS_PROVIDER,
+  '': 'https://cloudflare-ipfs.com/'
+}
+
+const resolveProvider = (key?: string) => ipfsProviders[key || '']
 
 export const zip = <T1, T2, T3>(a: T1[], b: T2[], cb?: (el: (T1 | T2)[]) => T3): T3[] | (T1 | T2)[][] => {
   const res = a.map((k, i) => [k, b[i]]);