From e0ab9e56c8ee371be1d6426a77d989dd8a01a72e Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Thu, 16 Sep 2021 11:36:27 -0500
Subject: [PATCH 01/18] implementCustomFees - Change to fungible

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/FungibleComposer.vue  | 9 +++------
 src/components/TokenCreateDialog.vue | 1 -
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/FungibleComposer.vue b/src/components/FungibleComposer.vue
index ca8a8a9..b09eec0 100644
--- a/src/components/FungibleComposer.vue
+++ b/src/components/FungibleComposer.vue
@@ -5,10 +5,7 @@
         Name
       </v-stepper-step>
       <v-divider></v-divider>
-      <v-stepper-step
-        :complete="step > STEP_FRACTIONAL"
-        :step="STEP_FRACTIONAL"
-      >
+      <v-stepper-step :complete="step > STEP_FRACTIONAL" :step="STEP_FRACTIONAL">
         Fractional
       </v-stepper-step>
       <v-divider></v-divider>
@@ -347,7 +344,7 @@
 <script>
 import { EventBus } from "../eventBus";
 import { getAccountDetails } from "@/utils";
-import { PrivateKey } from "@hashgraph/sdk";
+import { PrivateKey, TokenType } from "@hashgraph/sdk";
 import { tokenCreate } from "@/service/tokenService";
 
 export default {
@@ -382,7 +379,6 @@ export default {
       symbolRules: [
         v => !!v || "Input required",
         v => v.length <= 100 || "Max length 100"
-        // v => /^[a-zA-Z]*$/.test(v) || "Only letters are allowed"
       ],
       name: "",
       symbol: "",
@@ -461,6 +457,7 @@ export default {
       const token = {
         name: this.name,
         symbol: this.symbol,
+        type: TokenType.FungibleCommon,
         decimals: this.decimals === "" ? 0 : this.decimals,
         initialSupply: this.initialSupply,
         adminKey: this.mutable === "yes" ? privateKey.toString() : undefined,
diff --git a/src/components/TokenCreateDialog.vue b/src/components/TokenCreateDialog.vue
index f34487f..f300be8 100644
--- a/src/components/TokenCreateDialog.vue
+++ b/src/components/TokenCreateDialog.vue
@@ -151,7 +151,6 @@ export default {
       symbolRules: [
         v => !!v || "Input required",
         v => v.length <= 100 || "Max length 100"
-        // v => /^[a-zA-Z]*$/.test(v) || "Only letters are allowed"
       ]
     };
   },

From a221e5a943b15ec255f6cc5fed3e754deb1ff842 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Thu, 16 Sep 2021 11:54:46 -0500
Subject: [PATCH 02/18] implementCustomFees - change tokenType to type

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/FungibleComposer.vue    |  2 +-
 src/components/NonFungibleComposer.vue | 13 ++++---------
 src/service/tokenService.js            |  4 +++-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/FungibleComposer.vue b/src/components/FungibleComposer.vue
index b09eec0..4227bed 100644
--- a/src/components/FungibleComposer.vue
+++ b/src/components/FungibleComposer.vue
@@ -408,6 +408,7 @@ export default {
       this.step = 1;
       //
       this.name = "";
+      this.type = TokenType.FungibleCommon,
       this.symbol = "";
       this.decimals = "";
       this.initialSupply = "0";
@@ -457,7 +458,6 @@ export default {
       const token = {
         name: this.name,
         symbol: this.symbol,
-        type: TokenType.FungibleCommon,
         decimals: this.decimals === "" ? 0 : this.decimals,
         initialSupply: this.initialSupply,
         adminKey: this.mutable === "yes" ? privateKey.toString() : undefined,
diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index 316ab7e..953ddb6 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -27,10 +27,7 @@
           Template
         </v-stepper-step>
         <v-divider></v-divider>
-        <v-stepper-step
-          :complete="step > STEP_PROPERTIES"
-          :step="STEP_PROPERTIES"
-        >
+        <v-stepper-step :complete="step > STEP_PROPERTIES" :step="STEP_PROPERTIES">
           Properties
         </v-stepper-step>
         <v-divider></v-divider>
@@ -38,10 +35,7 @@
           KYC
         </v-stepper-step>
         <v-divider></v-divider>
-        <v-stepper-step
-          :complete="step > STEP_FREEZABLE"
-          :step="STEP_FREEZABLE"
-        >
+        <v-stepper-step :complete="step > STEP_FREEZABLE" :step="STEP_FREEZABLE">
           Freezable
         </v-stepper-step>
         <v-divider></v-divider>
@@ -235,7 +229,7 @@
 <script>
 import { EventBus } from "../eventBus";
 import { getAccountDetails } from "@/utils";
-import { PrivateKey } from "@hashgraph/sdk";
+import { PrivateKey, TokenType } from "@hashgraph/sdk";
 import { tokenCreate } from "@/service/tokenService";
 import VJsf from "@koumoul/vjsf/lib/VJsf.js";
 import "@koumoul/vjsf/lib/VJsf.css";
@@ -300,6 +294,7 @@ export default {
       this.step = 1;
       //
       this.name = "";
+      this.type = TokenType.NonFungibleUnique,
       this.symbol = "";
       this.defaultFreezeStatus = false;
       this.template = "";
diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index bd63f0b..fcb5757 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -52,8 +52,9 @@ export async function tokenCreate(token) {
   try {
     let additionalSig = false;
     let sigKey;
-    const tx = await new TokenCreateTransaction();
+    const tx = new TokenCreateTransaction();
     tx.setTokenName(token.name);
+    tx.setType(token.type)
     tx.setTokenSymbol(token.symbol.toUpperCase());
     tx.setDecimals(token.decimals);
     tx.setInitialSupply(token.initialSupply);
@@ -128,6 +129,7 @@ export async function tokenCreate(token) {
       tokenResponse = {
         tokenId: token.tokenId.toString(),
         symbol: token.symbol.toUpperCase(),
+        type: token.tokenType,
         name: token.name,
         totalSupply: token.initialSupply,
         decimals: token.decimals,

From cdf756cd2c5007c664aae69462ae8f4abe5d4fb9 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Fri, 17 Sep 2021 08:59:49 -0500
Subject: [PATCH 03/18] nativeNft - wrong name

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 package.json                           | 4 ++--
 src/components/FungibleComposer.vue    | 3 ++-
 src/components/NonFungibleComposer.vue | 2 +-
 src/service/tokenService.js            | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e4c0c6b..900c017 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@hashgraph/sdk": "^2.0.15",
+    "@hashgraph/sdk": "^2.0.30",
     "@koumoul/vjsf": "^1.17.1",
     "bignumber.js": "^9.0.0",
     "core-js": "^3.6.5",
@@ -30,7 +30,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
     "prettier": "^1.19.1",
-    "sass": "^1.19.0",
+    "sass": "^1.41.1",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.7",
     "vue-template-compiler": "^2.6.11",
diff --git a/src/components/FungibleComposer.vue b/src/components/FungibleComposer.vue
index 4227bed..8937d7e 100644
--- a/src/components/FungibleComposer.vue
+++ b/src/components/FungibleComposer.vue
@@ -408,7 +408,7 @@ export default {
       this.step = 1;
       //
       this.name = "";
-      this.type = TokenType.FungibleCommon,
+      this.tokenType = TokenType.FungibleCommon,
       this.symbol = "";
       this.decimals = "";
       this.initialSupply = "0";
@@ -457,6 +457,7 @@ export default {
       const issuerAccount = getAccountDetails("Issuer");
       const token = {
         name: this.name,
+        tokenType: TokenType.FungibleCommon,
         symbol: this.symbol,
         decimals: this.decimals === "" ? 0 : this.decimals,
         initialSupply: this.initialSupply,
diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index 953ddb6..1d39727 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -294,7 +294,7 @@ export default {
       this.step = 1;
       //
       this.name = "";
-      this.type = TokenType.NonFungibleUnique,
+      this.tokenType = TokenType.NonFungibleUnique,
       this.symbol = "";
       this.defaultFreezeStatus = false;
       this.template = "";
diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index fcb5757..aab90c1 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -54,7 +54,7 @@ export async function tokenCreate(token) {
     let sigKey;
     const tx = new TokenCreateTransaction();
     tx.setTokenName(token.name);
-    tx.setType(token.type)
+    tx.setTokenType(token.tokenType);
     tx.setTokenSymbol(token.symbol.toUpperCase());
     tx.setDecimals(token.decimals);
     tx.setInitialSupply(token.initialSupply);

From 04509072ed662c9f467916350af26ecf03d0fca5 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Tue, 21 Sep 2021 09:09:10 -0500
Subject: [PATCH 04/18] nativeNFt - fix schema not being set

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/MintBurnDialog.vue      |  9 +++------
 src/components/NonFungibleComposer.vue | 15 +++++++++++++--
 src/service/tokenService.js            | 14 +++++++++-----
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/MintBurnDialog.vue b/src/components/MintBurnDialog.vue
index 759e581..af63f7c 100644
--- a/src/components/MintBurnDialog.vue
+++ b/src/components/MintBurnDialog.vue
@@ -5,8 +5,7 @@
         <v-card>
           <v-card-title>
             <span v-if="operation === 'mint'" class="headline"
-              >Mint additional tokens</span
-            >
+              >Mint additional tokens</span>
             <span v-else class="headline">Burn tokens</span>
           </v-card-title>
           <v-card-text>
@@ -34,8 +33,7 @@
               text
               @click="mint"
               :disabled="!valid"
-              v-if="operation === 'mint'"
-            >
+              v-if="operation === 'mint'">
               Mint
             </v-btn>
             <v-btn
@@ -43,8 +41,7 @@
               text
               @click="burn"
               :disabled="!valid"
-              v-if="operation === 'burn'"
-            >
+              v-if="operation === 'burn'">
               Burn
             </v-btn>
           </v-card-actions>
diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index 1d39727..bd180c6 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -236,6 +236,7 @@ import "@koumoul/vjsf/lib/VJsf.css";
 import "@koumoul/vjsf/lib/deps/third-party.js";
 import { fileCreate } from "@/service/fileService";
 import { loadTokenTemplates } from "@/service/tokenProperties";
+import { tokenMint } from '../service/tokenService';
 
 export default {
   name: "NonFungibleComposer",
@@ -298,6 +299,7 @@ export default {
       this.symbol = "";
       this.defaultFreezeStatus = false;
       this.template = "";
+      this.metadata = "";
       this.photoSize = 0;
       this.tokenTemplates = loadTokenTemplates();
       this.tokenTemplatesForSelection = [];
@@ -379,14 +381,23 @@ export default {
           kycKey: this.kyc === "yes" ? privateKey.toString() : undefined,
           freezeKey: this.freeze === "yes" ? privateKey.toString() : undefined,
           wipeKey: undefined,
-          supplyKey: undefined,
+          supplyKey: privateKey.toString(),
           defaultFreezeStatus: this.defaultFreezeStatus,
           autoRenewAccount: issuerAccount.accountId,
           treasury: issuerAccount.accountId,
           deleted: false,
           key: privateKey.toString()
         };
-        const newToken = await tokenCreate(token);
+        let newToken = await tokenCreate(token);
+
+        newToken.isNFT =
+          newToken.symbol.includes("HEDERA://") ||
+          newToken.symbol.includes("IPFS://");
+
+       if (newToken.isNFT) {
+          await tokenMint(newToken);
+        }
+
         if (typeof newToken.tokenId !== "undefined") {
           this.$store.commit("setToken", newToken);
           EventBus.$emit("dialogClose");
diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index aab90c1..00a8b84 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -46,13 +46,14 @@ export async function tokenGetInfo(token) {
 }
 
 export async function tokenCreate(token) {
+
   let tokenResponse = {};
   const autoRenewPeriod = 7776000; // set to default 3 months
   const issuerAccount = getAccountDetails("Issuer").accountId.toString();
   try {
     let additionalSig = false;
     let sigKey;
-    const tx = new TokenCreateTransaction();
+    const tx = await new TokenCreateTransaction();
     tx.setTokenName(token.name);
     tx.setTokenType(token.tokenType);
     tx.setTokenSymbol(token.symbol.toUpperCase());
@@ -91,7 +92,7 @@ export async function tokenCreate(token) {
       tx.setSupplyKey(sigKey.publicKey);
     }
     const client = issuerClient();
-
+    tx.freezeWith(client);
     await tx.signWithOperator(client);
 
     if (additionalSig) {
@@ -280,12 +281,15 @@ export async function tokenBurn(instruction) {
 }
 
 export async function tokenMint(instruction) {
+  console.log(instruction);
   instruction.successMessage =
     "Minted " + instruction.amount + " for token " + instruction.tokenId;
-  const token = state.getters.getTokens[instruction.tokenId];
-  const supplyKey = PrivateKey.fromString(token.supplyKey);
-  const tx = await new TokenMintTransaction();
+    console.log(instruction);
+    
+  const supplyKey = PrivateKey.fromString(instruction.supplyKey);
+  const tx = new TokenMintTransaction();
   const client = issuerClient();
+  
   const result = await tokenTransactionWithAmount(
     client,
     tx,

From ec425dc32a26a27a94c32363e89e018e7ea3aecc Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Tue, 21 Sep 2021 09:12:24 -0500
Subject: [PATCH 05/18] whitespace

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/service/tokenService.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index 00a8b84..187fced 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -281,7 +281,6 @@ export async function tokenBurn(instruction) {
 }
 
 export async function tokenMint(instruction) {
-  console.log(instruction);
   instruction.successMessage =
     "Minted " + instruction.amount + " for token " + instruction.tokenId;
     console.log(instruction);

From 87d9b47f6df08454ebf00f87cea02fa347b21e20 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Wed, 22 Sep 2021 12:14:25 -0500
Subject: [PATCH 06/18] nativeNft - add nft functionality

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/NonFungibleComposer.vue | 63 +++++++++++++++++++++-----
 src/service/tokenService.js            | 28 +++++++-----
 2 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index bd180c6..5d208ed 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -2,16 +2,14 @@
   <v-container>
     <v-alert
       type="warning"
-      v-if="photoSize > 4096 && this.model.Storage === 'HEDERA'"
-    >
+      v-if="photoSize > 4096 && this.model.Storage === 'HEDERA'">
       This is a large image (size greater than 4kb) - A smaller size is
       preferable for Hedera File Service. Alternatively, use IPFS.
     </v-alert>
 
     <v-alert
       type="warning"
-      v-if="this.model.Storage === 'IPFS' && !NFT_STORAGE_API_KEY"
-    >
+      v-if="this.model.Storage === 'IPFS' && !NFT_STORAGE_API_KEY">
       You don't seem to have an NFT.STORAGE API key in your .env file. Please
       get a new API key at https://nft.storage/, add it to .env file and restart
       the server.
@@ -31,6 +29,10 @@
           Properties
         </v-stepper-step>
         <v-divider></v-divider>
+        <v-stepper-step :complete="step > STEP_CUSTOMFEES" :step="STEP_CUSTOMFEES">
+          Custom Fees
+        </v-stepper-step>
+        <v-divider></v-divider>
         <v-stepper-step :complete="step > STEP_KYC" :step="STEP_KYC">
           KYC
         </v-stepper-step>
@@ -144,6 +146,35 @@
           </v-row>
         </v-stepper-content>
 
+        <v-stepper-content :step="STEP_CUSTOMFEES">
+          <v-card class="mb-12" :height="cardHeight" flat>
+            <v-card-text>
+              <v-form ref="customFeeForm" v-model="customFeeValid">
+                <v-row>
+                  <v-col cols="12">
+                    <v-text-field
+                      label="Custom Fees*"
+                      :rules="customFeeRules"
+                      v-model="customFees"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-form>
+            </v-card-text>
+          </v-card>
+          <v-row>
+            <v-col>
+              <v-btn text @click="cancel"> Cancel </v-btn>
+            </v-col>
+            <v-spacer></v-spacer>
+            <v-col>
+              <v-btn color="primary" @click="nextStep" :disabled="!customFeeValid">
+                Continue
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-stepper-content>
+
         <v-stepper-content :step="STEP_KYC">
           <v-card class="mb-12" :height="cardHeight" flat>
             <v-card-text>
@@ -246,10 +277,12 @@ export default {
       STEP_NAME: 1,
       STEP_TEMPLATE: 2,
       STEP_PROPERTIES: 3,
-      STEP_KYC: 4,
-      STEP_FREEZABLE: 5,
-      STEP_CREATE: 6,
+      STEP_CUSTOMFEES: 4,
+      STEP_KYC: 5,
+      STEP_FREEZABLE: 6,
+      STEP_CREATE: 7,
       nameValid: false,
+      customFeeValid: false,
       step: 1,
       kyc: "no",
       freeze: "no",
@@ -261,7 +294,12 @@ export default {
         v => !!v || "Input required",
         v => v.length <= 100 || "Max length 100"
       ],
+      customFeeRules: [
+        n => !!n || "Please enter an integer",
+        n => !isNaN(parseInt(n)) || "Please enter a number"
+      ],
       name: "",
+      customFees: 0,
       symbol: "",
       defaultFreezeStatus: false,
       ///
@@ -290,6 +328,7 @@ export default {
   methods: {
     init() {
       this.nameValid = false;
+      this.customFeeValid = false;
       this.kyc = "no";
       this.freeze = "no";
       this.step = 1;
@@ -301,6 +340,7 @@ export default {
       this.template = "";
       this.metadata = "";
       this.photoSize = 0;
+      this.customFees = 0;
       this.tokenTemplates = loadTokenTemplates();
       this.tokenTemplatesForSelection = [];
       for (const templateItem in this.tokenTemplates) {
@@ -373,8 +413,8 @@ export default {
         const token = {
           name: this.name,
           symbol:
-            (this.model.Storage === "HEDERA" ? "hedera://" : "ipfs://") +
-            fileId,
+            (this.model.Storage === "HEDERA" ? "hedera://" : "ipfs://") + fileId,
+          customFees: this.customFees,
           decimals: 0,
           initialSupply: 1,
           adminKey: undefined,
@@ -388,14 +428,15 @@ export default {
           deleted: false,
           key: privateKey.toString()
         };
-        let newToken = await tokenCreate(token);
 
+        let newToken = await tokenCreate(token);
+        
         newToken.isNFT =
           newToken.symbol.includes("HEDERA://") ||
           newToken.symbol.includes("IPFS://");
 
        if (newToken.isNFT) {
-          await tokenMint(newToken);
+          await tokenMint(token);
         }
 
         if (typeof newToken.tokenId !== "undefined") {
diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index 187fced..12efe46 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -21,6 +21,7 @@ const {
   TokenUnfreezeTransaction,
   TokenWipeTransaction,
   Hbar,
+  CustomFixedFee,
   Status
 } = require("@hashgraph/sdk");
 
@@ -46,7 +47,6 @@ export async function tokenGetInfo(token) {
 }
 
 export async function tokenCreate(token) {
-
   let tokenResponse = {};
   const autoRenewPeriod = 7776000; // set to default 3 months
   const issuerAccount = getAccountDetails("Issuer").accountId.toString();
@@ -62,6 +62,13 @@ export async function tokenCreate(token) {
     tx.setTreasuryAccountId(token.treasury);
     tx.setAutoRenewAccountId(token.autoRenewAccount);
     tx.setAutoRenewPeriod(autoRenewPeriod);
+    
+    if(token.customFees) {
+      let fee = new CustomFixedFee();
+      fee.setAmount(Number(token.customFees));
+      fee.setFeeCollectorAccountId(issuerAccount);
+      tx.setCustomFees([fee]);
+    }
 
     if (token.adminKey) {
       sigKey = PrivateKey.fromString(token.key);
@@ -96,13 +103,13 @@ export async function tokenCreate(token) {
     await tx.signWithOperator(client);
 
     if (additionalSig) {
-      // TODO: should sign with every key (check docs)
-      // since the admin/kyc/... keys are all the same, a single sig is sufficient
       await tx.sign(sigKey);
     }
+
     const response = await tx.execute(client);
     const transactionReceipt = await response.getReceipt(client);
-
+    
+    console.log(transactionReceipt);
     if (transactionReceipt.status !== Status.Success) {
       notifyError(transactionReceipt.status.toString());
     } else {
@@ -132,6 +139,7 @@ export async function tokenCreate(token) {
         symbol: token.symbol.toUpperCase(),
         type: token.tokenType,
         name: token.name,
+        customFees: token.customFees,
         totalSupply: token.initialSupply,
         decimals: token.decimals,
         autoRenewAccount: issuerAccount,
@@ -172,6 +180,7 @@ export async function tokenCreate(token) {
     }
     return tokenResponse;
   } catch (err) {
+    console.log("error!!!!");
     notifyError(err.message);
     return {};
   }
@@ -183,12 +192,10 @@ async function tokenTransactionWithAmount(
   instruction,
   key
 ) {
+  
   try {
-    transaction.setTokenId(instruction.tokenId);
-    if (typeof instruction.accountId !== "undefined") {
-      transaction.setAccountId(instruction.accountId);
-    }
-    transaction.setAmount(instruction.amount);
+    transaction.setTokenId(instruction.tokenId.toString());
+    transaction.setAmount(1);
 
     await transaction.signWithOperator(client);
     await transaction.sign(key);
@@ -283,7 +290,6 @@ export async function tokenBurn(instruction) {
 export async function tokenMint(instruction) {
   instruction.successMessage =
     "Minted " + instruction.amount + " for token " + instruction.tokenId;
-    console.log(instruction);
     
   const supplyKey = PrivateKey.fromString(instruction.supplyKey);
   const tx = new TokenMintTransaction();
@@ -300,7 +306,7 @@ export async function tokenMint(instruction) {
       id: result.transactionId,
       type: "tokenMint",
       inputs:
-        "tokenId=" + instruction.tokenId + ", Amount=" + instruction.amount
+        "tokenId=" + instruction.tokenId + ", Amount=" + 1
     };
     EventBus.$emit("addTransaction", transaction);
   }

From bc29f5152a52616ba8b9bc718321303976a69663 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Wed, 29 Sep 2021 15:53:46 -0500
Subject: [PATCH 07/18] nativeNft - add custom fee type dropdown

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/NonFungibleComposer.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index 5d208ed..75977d6 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -152,6 +152,18 @@
               <v-form ref="customFeeForm" v-model="customFeeValid">
                 <v-row>
                   <v-col cols="12">
+                    Custom fees are fees that are distributed to the specified accounts each time the token is transferred programmatically. 
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="4">
+                    <v-select
+                      label="Custom Fee Type:"
+                      :items="customFeeOptions">
+                    </v-select>
+                  </v-col>
+
+                  <v-col cols="8">
                     <v-text-field
                       label="Custom Fees*"
                       :rules="customFeeRules"
@@ -298,6 +310,8 @@ export default {
         n => !!n || "Please enter an integer",
         n => !isNaN(parseInt(n)) || "Please enter a number"
       ],
+      customFeeOptions: ['Custom', 'Fixed', 'Royalty'],
+      selectedFeeOption: "",
       name: "",
       customFees: 0,
       symbol: "",

From 368386b4595b20bae04d54b3ed89cb8eb01f4a5b Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Thu, 30 Sep 2021 08:17:50 -0500
Subject: [PATCH 08/18] nativeNft - naming

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/ComposerDialog.vue   | 4 ++--
 src/components/FungibleComposer.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ComposerDialog.vue b/src/components/ComposerDialog.vue
index 2538b6d..86eec1b 100644
--- a/src/components/ComposerDialog.vue
+++ b/src/components/ComposerDialog.vue
@@ -3,8 +3,8 @@
     <v-dialog v-model="dialog" persistent max-width="800px">
       <v-toolbar>
         <v-tabs centered v-model="tabs">
-          <v-tab>Fungible</v-tab>
-          <v-tab>Non Fungible</v-tab>
+          <v-tab>Fungible Common</v-tab>
+          <v-tab>Non Fungible Unique</v-tab>
         </v-tabs>
       </v-toolbar>
       <v-tabs-items v-model="tabs">
diff --git a/src/components/FungibleComposer.vue b/src/components/FungibleComposer.vue
index 8937d7e..b1b77d4 100644
--- a/src/components/FungibleComposer.vue
+++ b/src/components/FungibleComposer.vue
@@ -305,7 +305,7 @@
       <v-stepper-content :step="STEP_CREATE">
         <v-card class="mb-12" height="200px" flat>
           <v-card-title>
-            You're about to create a fungible token named {{ name }} ({{
+            You're about to create a fungible common token named {{ name }} ({{
               symbol.toUpperCase()
             }})
           </v-card-title>

From 29f2d0db5bd689e5f7b7ecf41b6153b3291e93df Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Mon, 4 Oct 2021 10:06:08 -0500
Subject: [PATCH 09/18] nativeNft - change initialsupply

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/NonFungibleComposer.vue | 62 +++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 6 deletions(-)

diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index 75977d6..7fdb2d7 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -29,6 +29,10 @@
           Properties
         </v-stepper-step>
         <v-divider></v-divider>
+        <v-stepper-step :complete="step > STEP_MAXSUPPLY" :step="STEP_MAXSUPPLY">
+          Supply
+        </v-stepper-step>
+        <v-divider></v-divider>
         <v-stepper-step :complete="step > STEP_CUSTOMFEES" :step="STEP_CUSTOMFEES">
           Custom Fees
         </v-stepper-step>
@@ -146,6 +150,40 @@
           </v-row>
         </v-stepper-content>
 
+        <v-stepper-content :step="STEP_MAXSUPPLY">
+          <v-card class="mb-12" :height="cardHeight" flat>
+            <v-card-text>
+              <v-form ref="supplyForm" v-model="supplyValid">
+                <v-row>
+                  <v-col cols="12">
+                    The maximum number of NFTs that can be minted. 
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="8">
+                    <v-text-field
+                      label="Maximum Supply*"
+                      :rules="supplyRules"
+                      v-model="maxSupply"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-form>
+            </v-card-text>
+          </v-card>
+          <v-row>
+            <v-col>
+              <v-btn text @click="cancel"> Cancel </v-btn>
+            </v-col>
+            <v-spacer></v-spacer>
+            <v-col>
+              <v-btn color="primary" @click="nextStep" :disabled="!supplyValid">
+                Continue
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-stepper-content>
+
         <v-stepper-content :step="STEP_CUSTOMFEES">
           <v-card class="mb-12" :height="cardHeight" flat>
             <v-card-text>
@@ -289,12 +327,14 @@ export default {
       STEP_NAME: 1,
       STEP_TEMPLATE: 2,
       STEP_PROPERTIES: 3,
-      STEP_CUSTOMFEES: 4,
-      STEP_KYC: 5,
-      STEP_FREEZABLE: 6,
-      STEP_CREATE: 7,
+      STEP_MAXSUPPLY: 4,
+      STEP_CUSTOMFEES: 5,
+      STEP_KYC: 6,
+      STEP_FREEZABLE: 7,
+      STEP_CREATE: 8,
       nameValid: false,
       customFeeValid: false,
+      supplyValid: false,
       step: 1,
       kyc: "no",
       freeze: "no",
@@ -310,10 +350,15 @@ export default {
         n => !!n || "Please enter an integer",
         n => !isNaN(parseInt(n)) || "Please enter a number"
       ],
+      supplyRules: [
+        n => !!n || "Please enter an integer",
+        n => !isNaN(parseInt(n)) || "Please enter a number"
+      ],
       customFeeOptions: ['Custom', 'Fixed', 'Royalty'],
       selectedFeeOption: "",
       name: "",
       customFees: 0,
+      maxSupply: 0,
       symbol: "",
       defaultFreezeStatus: false,
       ///
@@ -343,6 +388,7 @@ export default {
     init() {
       this.nameValid = false;
       this.customFeeValid = false;
+      this.supplyValid = false;
       this.kyc = "no";
       this.freeze = "no";
       this.step = 1;
@@ -355,6 +401,7 @@ export default {
       this.metadata = "";
       this.photoSize = 0;
       this.customFees = 0;
+      this.maxSupply = 0;
       this.tokenTemplates = loadTokenTemplates();
       this.tokenTemplatesForSelection = [];
       for (const templateItem in this.tokenTemplates) {
@@ -429,9 +476,11 @@ export default {
           symbol:
             (this.model.Storage === "HEDERA" ? "hedera://" : "ipfs://") + fileId,
           customFees: this.customFees,
+          maxSupply: this.maxSupply,
           decimals: 0,
-          initialSupply: 1,
+          initialSupply: 0,
           adminKey: undefined,
+          tokenType: TokenType.NonFungibleUnique,
           kycKey: this.kyc === "yes" ? privateKey.toString() : undefined,
           freezeKey: this.freeze === "yes" ? privateKey.toString() : undefined,
           wipeKey: undefined,
@@ -440,7 +489,8 @@ export default {
           autoRenewAccount: issuerAccount.accountId,
           treasury: issuerAccount.accountId,
           deleted: false,
-          key: privateKey.toString()
+          key: privateKey.toString(),
+          schema: this.schema
         };
 
         let newToken = await tokenCreate(token);

From 76ef8202d5f6708a8240012a1fe52c60e96d80e3 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Tue, 5 Oct 2021 13:15:59 -0500
Subject: [PATCH 10/18] nativeNft - refactor

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/NonFungibleComposer.vue |  3 ++-
 src/components/TokenCard.vue           |  4 ++++
 src/components/Wallet.vue              | 11 ++++++-----
 src/service/tokenService.js            | 22 +++++++++++++++-------
 src/store/store.js                     |  3 ++-
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index 7fdb2d7..a8ba36a 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -500,7 +500,8 @@ export default {
           newToken.symbol.includes("IPFS://");
 
        if (newToken.isNFT) {
-          await tokenMint(token);
+          let tokenInfo = await tokenMint(token);
+          newToken.serialNumber = tokenInfo.serialNumber;
         }
 
         if (typeof newToken.tokenId !== "undefined") {
diff --git a/src/components/TokenCard.vue b/src/components/TokenCard.vue
index dde674a..89ff9ae 100644
--- a/src/components/TokenCard.vue
+++ b/src/components/TokenCard.vue
@@ -35,6 +35,10 @@
         <v-col cols="6">Supply</v-col>
         <v-col cols="6">{{ totalSupply }}</v-col>
       </v-row>
+      <v-row>
+        <v-col cols="6">Serial Number</v-col>
+        <v-col cols="6">{{ serial }}</v-col>
+      </v-row>
     </v-card-text>
     <v-card-actions class="justify-center">
       <v-btn color="blue darken-1" icon @click="showAccounts">
diff --git a/src/components/Wallet.vue b/src/components/Wallet.vue
index 2b24b19..f3646cc 100644
--- a/src/components/Wallet.vue
+++ b/src/components/Wallet.vue
@@ -9,7 +9,7 @@
             class="elevation-1"
             hide-default-footer
           >
-            <template v-slot:item.image="{ item }">
+            <template v-slot:[`item.image`]="{ item }">
               <v-img
                 v-if="item.imageData"
                 :src="item.imageData"
@@ -18,26 +18,26 @@
               ></v-img>
             </template>
 
-            <template v-slot:item.tokenName="{ item }">
+            <template v-slot:[`item.tokenName`]="{ item }">
               {{ item.tokenName }} (<a :href="mirrorURL" target="_blank">{{
                 item.tokenId
               }}</a
               >)
             </template>
 
-            <template v-slot:item.freezeStatus="{ item }">
+            <template v-slot:[`item.freezeStatus`]="{ item }">
               <v-chip :color="getColor(item.freezeStatus, true)" dark>
                 {{ item.freezeStatus }}
               </v-chip>
             </template>
 
-            <template v-slot:item.kycStatus="{ item }">
+            <template v-slot:[`item.kycStatus`]="{ item }">
               <v-chip :color="getColor(item.kycStatus, false)" dark>
                 {{ item.kycStatus }}
               </v-chip>
             </template>
 
-            <template v-slot:item.related="{ item }">
+            <template v-slot:[`item.related`]="{ item }">
               <v-chip :color="getColor(item.related, false)" dark>
                 {{ item.related }}
               </v-chip>
@@ -357,6 +357,7 @@ export default {
         .tokenRelationships;
       // cycle all available tokens
       const tokens = this.$store.getters.getTokens;
+
       for (const oneTokenId in tokens) {
         const oneToken = {
           tokenId: oneTokenId,
diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index 12efe46..c46fd36 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -39,6 +39,8 @@ export async function tokenGetInfo(token) {
 
     tokenResponse.totalSupply = info.totalSupply;
     tokenResponse.expiry = info.expirationTime.toDate();
+    tokenResponse.customFees = info.customFees;
+
   } catch (err) {
     notifyError(err.message);
   }
@@ -109,7 +111,6 @@ export async function tokenCreate(token) {
     const response = await tx.execute(client);
     const transactionReceipt = await response.getReceipt(client);
     
-    console.log(transactionReceipt);
     if (transactionReceipt.status !== Status.Success) {
       notifyError(transactionReceipt.status.toString());
     } else {
@@ -194,15 +195,21 @@ async function tokenTransactionWithAmount(
 ) {
   
   try {
+    if(instruction.initialSupply > 0){
+      transaction.setAmount(instruction.amount);
+    }
+    else {
+      transaction.setMetadata([[Buffer.from(instruction.symbol)]]);
+    }
     transaction.setTokenId(instruction.tokenId.toString());
-    transaction.setAmount(1);
-
+    
     await transaction.signWithOperator(client);
     await transaction.sign(key);
 
     const response = await transaction.execute(client);
-
+  
     const transactionReceipt = await response.getReceipt(client);
+
     if (transactionReceipt.status !== Status.Success) {
       notifyError(transactionReceipt.status.toString());
       return {
@@ -214,7 +221,8 @@ async function tokenTransactionWithAmount(
     notifySuccess(instruction.successMessage);
     return {
       status: true,
-      transactionId: response.transactionId.toString()
+      transactionId: response.transactionId.toString(),
+      serialNumber: transactionReceipt.serials[0]
     };
   } catch (err) {
     notifyError(err.message);
@@ -306,11 +314,11 @@ export async function tokenMint(instruction) {
       id: result.transactionId,
       type: "tokenMint",
       inputs:
-        "tokenId=" + instruction.tokenId + ", Amount=" + 1
+        "tokenId=" + instruction.tokenId + ", Amount=" + 1 + "Serial Number=" + result.serial
     };
     EventBus.$emit("addTransaction", transaction);
   }
-  return result.status;
+  return result;
 }
 
 export async function tokenWipe(instruction) {
diff --git a/src/store/store.js b/src/store/store.js
index 23ccaba..666250b 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -3,7 +3,7 @@ import Vuex from "vuex";
 import createPersistedState from "vuex-persistedstate";
 import { accountCreate } from "../service/accountCreate";
 import { accountGetInfo } from "../service/accountGetInfo";
-import { tokenGetInfo } from "../service/tokenService";
+import { tokenGetInfo, nftGetInfo } from "../service/tokenService";
 import { notifySuccess } from "../utils";
 import { EventBus } from "../eventBus";
 Vue.use(Vuex);
@@ -177,6 +177,7 @@ export default new Vuex.Store({
           return;
         }
         const token = state.tokens[key];
+        
         const tokenUpdate = await tokenGetInfo(token);
         commit("setToken", tokenUpdate);
       }

From a323a5ce9e58b367b3793d9aadcc3c054a61c46c Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Tue, 5 Oct 2021 13:32:23 -0500
Subject: [PATCH 11/18] nativenft - autoformat, remove console log

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/NonFungibleComposer.vue | 83 ++++++++++++++++----------
 src/components/TokenCard.vue           |  2 +-
 src/service/tokenService.js            |  1 -
 src/store/store.js                     |  2 +-
 4 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index a8ba36a..9782817 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -2,14 +2,16 @@
   <v-container>
     <v-alert
       type="warning"
-      v-if="photoSize > 4096 && this.model.Storage === 'HEDERA'">
+      v-if="photoSize > 4096 && this.model.Storage === 'HEDERA'"
+    >
       This is a large image (size greater than 4kb) - A smaller size is
       preferable for Hedera File Service. Alternatively, use IPFS.
     </v-alert>
 
     <v-alert
       type="warning"
-      v-if="this.model.Storage === 'IPFS' && !NFT_STORAGE_API_KEY">
+      v-if="this.model.Storage === 'IPFS' && !NFT_STORAGE_API_KEY"
+    >
       You don't seem to have an NFT.STORAGE API key in your .env file. Please
       get a new API key at https://nft.storage/, add it to .env file and restart
       the server.
@@ -25,15 +27,24 @@
           Template
         </v-stepper-step>
         <v-divider></v-divider>
-        <v-stepper-step :complete="step > STEP_PROPERTIES" :step="STEP_PROPERTIES">
+        <v-stepper-step
+          :complete="step > STEP_PROPERTIES"
+          :step="STEP_PROPERTIES"
+        >
           Properties
         </v-stepper-step>
         <v-divider></v-divider>
-        <v-stepper-step :complete="step > STEP_MAXSUPPLY" :step="STEP_MAXSUPPLY">
+        <v-stepper-step
+          :complete="step > STEP_MAXSUPPLY"
+          :step="STEP_MAXSUPPLY"
+        >
           Supply
         </v-stepper-step>
         <v-divider></v-divider>
-        <v-stepper-step :complete="step > STEP_CUSTOMFEES" :step="STEP_CUSTOMFEES">
+        <v-stepper-step
+          :complete="step > STEP_CUSTOMFEES"
+          :step="STEP_CUSTOMFEES"
+        >
           Custom Fees
         </v-stepper-step>
         <v-divider></v-divider>
@@ -41,7 +52,10 @@
           KYC
         </v-stepper-step>
         <v-divider></v-divider>
-        <v-stepper-step :complete="step > STEP_FREEZABLE" :step="STEP_FREEZABLE">
+        <v-stepper-step
+          :complete="step > STEP_FREEZABLE"
+          :step="STEP_FREEZABLE"
+        >
           Freezable
         </v-stepper-step>
         <v-divider></v-divider>
@@ -156,7 +170,7 @@
               <v-form ref="supplyForm" v-model="supplyValid">
                 <v-row>
                   <v-col cols="12">
-                    The maximum number of NFTs that can be minted. 
+                    The maximum number of NFTs that can be minted.
                   </v-col>
                 </v-row>
                 <v-row>
@@ -190,14 +204,17 @@
               <v-form ref="customFeeForm" v-model="customFeeValid">
                 <v-row>
                   <v-col cols="12">
-                    Custom fees are fees that are distributed to the specified accounts each time the token is transferred programmatically. 
+                    Custom fees are fees that are distributed to the specified
+                    accounts each time the token is transferred
+                    programmatically.
                   </v-col>
                 </v-row>
                 <v-row>
                   <v-col cols="4">
                     <v-select
                       label="Custom Fee Type:"
-                      :items="customFeeOptions">
+                      :items="customFeeOptions"
+                    >
                     </v-select>
                   </v-col>
 
@@ -218,7 +235,11 @@
             </v-col>
             <v-spacer></v-spacer>
             <v-col>
-              <v-btn color="primary" @click="nextStep" :disabled="!customFeeValid">
+              <v-btn
+                color="primary"
+                @click="nextStep"
+                :disabled="!customFeeValid"
+              >
                 Continue
               </v-btn>
             </v-col>
@@ -317,12 +338,12 @@ import "@koumoul/vjsf/lib/VJsf.css";
 import "@koumoul/vjsf/lib/deps/third-party.js";
 import { fileCreate } from "@/service/fileService";
 import { loadTokenTemplates } from "@/service/tokenProperties";
-import { tokenMint } from '../service/tokenService';
+import { tokenMint } from "../service/tokenService";
 
 export default {
   name: "NonFungibleComposer",
   components: { VJsf },
-  data: function() {
+  data: function () {
     return {
       STEP_NAME: 1,
       STEP_TEMPLATE: 2,
@@ -343,18 +364,18 @@ export default {
       cardHeight: 300,
       NFT_STORAGE_API_KEY: process.env.VUE_APP_NFT_STORAGE_API_KEY,
       nameRules: [
-        v => !!v || "Input required",
-        v => v.length <= 100 || "Max length 100"
+        (v) => !!v || "Input required",
+        (v) => v.length <= 100 || "Max length 100",
       ],
       customFeeRules: [
-        n => !!n || "Please enter an integer",
-        n => !isNaN(parseInt(n)) || "Please enter a number"
+        (n) => !!n || "Please enter an integer",
+        (n) => !isNaN(parseInt(n)) || "Please enter a number",
       ],
       supplyRules: [
-        n => !!n || "Please enter an integer",
-        n => !isNaN(parseInt(n)) || "Please enter a number"
+        (n) => !!n || "Please enter an integer",
+        (n) => !isNaN(parseInt(n)) || "Please enter a number",
       ],
-      customFeeOptions: ['Custom', 'Fixed', 'Royalty'],
+      customFeeOptions: ["Custom", "Fixed", "Royalty"],
       selectedFeeOption: "",
       name: "",
       customFees: 0,
@@ -366,11 +387,11 @@ export default {
       model: {},
       schema: {
         type: "object",
-        properties: {}
+        properties: {},
       },
       tokenTemplates: {},
       tokenTemplate: "",
-      tokenTemplatesForSelection: []
+      tokenTemplatesForSelection: [],
     };
   },
   created() {
@@ -382,7 +403,7 @@ export default {
   computed: {
     imageData() {
       return this.imageBase64();
-    }
+    },
   },
   methods: {
     init() {
@@ -394,8 +415,7 @@ export default {
       this.step = 1;
       //
       this.name = "";
-      this.tokenType = TokenType.NonFungibleUnique,
-      this.symbol = "";
+      (this.tokenType = TokenType.NonFungibleUnique), (this.symbol = "");
       this.defaultFreezeStatus = false;
       this.template = "";
       this.metadata = "";
@@ -415,7 +435,7 @@ export default {
       if (this.tokenTemplate === "") {
         this.schema = {
           type: "object",
-          properties: {}
+          properties: {},
         };
       } else {
         this.schema = this.tokenTemplates[this.tokenTemplate];
@@ -474,7 +494,8 @@ export default {
         const token = {
           name: this.name,
           symbol:
-            (this.model.Storage === "HEDERA" ? "hedera://" : "ipfs://") + fileId,
+            (this.model.Storage === "HEDERA" ? "hedera://" : "ipfs://") +
+            fileId,
           customFees: this.customFees,
           maxSupply: this.maxSupply,
           decimals: 0,
@@ -490,16 +511,16 @@ export default {
           treasury: issuerAccount.accountId,
           deleted: false,
           key: privateKey.toString(),
-          schema: this.schema
+          schema: this.schema,
         };
 
         let newToken = await tokenCreate(token);
-        
+
         newToken.isNFT =
           newToken.symbol.includes("HEDERA://") ||
           newToken.symbol.includes("IPFS://");
 
-       if (newToken.isNFT) {
+        if (newToken.isNFT) {
           let tokenInfo = await tokenMint(token);
           newToken.serialNumber = tokenInfo.serialNumber;
         }
@@ -548,8 +569,8 @@ export default {
     tokenDetails() {
       let details = "It will be non-fractional with a fixed supply of 1.";
       return details;
-    }
-  }
+    },
+  },
 };
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/components/TokenCard.vue b/src/components/TokenCard.vue
index 89ff9ae..7f27e38 100644
--- a/src/components/TokenCard.vue
+++ b/src/components/TokenCard.vue
@@ -37,7 +37,7 @@
       </v-row>
       <v-row>
         <v-col cols="6">Serial Number</v-col>
-        <v-col cols="6">{{ serial }}</v-col>
+        <v-col cols="6">{{ token.serialNumber }}</v-col>
       </v-row>
     </v-card-text>
     <v-card-actions class="justify-center">
diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index c46fd36..eba797e 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -181,7 +181,6 @@ export async function tokenCreate(token) {
     }
     return tokenResponse;
   } catch (err) {
-    console.log("error!!!!");
     notifyError(err.message);
     return {};
   }
diff --git a/src/store/store.js b/src/store/store.js
index 666250b..f43692c 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -3,7 +3,7 @@ import Vuex from "vuex";
 import createPersistedState from "vuex-persistedstate";
 import { accountCreate } from "../service/accountCreate";
 import { accountGetInfo } from "../service/accountGetInfo";
-import { tokenGetInfo, nftGetInfo } from "../service/tokenService";
+import { tokenGetInfo } from "../service/tokenService";
 import { notifySuccess } from "../utils";
 import { EventBus } from "../eventBus";
 Vue.use(Vuex);

From 263a40a70a6c6c2f9b015080df1490582ca50de9 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Tue, 5 Oct 2021 14:25:29 -0500
Subject: [PATCH 12/18] nativeNft - remove redundant logic

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/TokenCard.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/TokenCard.vue b/src/components/TokenCard.vue
index 7f27e38..55bb148 100644
--- a/src/components/TokenCard.vue
+++ b/src/components/TokenCard.vue
@@ -45,7 +45,7 @@
         <v-icon>mdi-account-multiple</v-icon>
       </v-btn>
       <v-btn
-        :disabled="!this.token.supplyKey"
+        :disabled="!this.token.supplyKey || this.token.isNFT"
         color="blue darken-1"
         icon
         @click="mintToken"
@@ -108,9 +108,6 @@ export default {
     this.token = this.$store.getters.getTokens[this.tokenId];
     this.defaultFreezeStatus = this.token.defaultFreezeStatus;
 
-    this.token.isNFT =
-      this.token.symbol.includes("HEDERA://") ||
-      this.token.symbol.includes("IPFS://");
     if (this.token.isNFT) {
       // Check if this NFT token metadata stored on Hedera File Service or on IPFS.
       if (this.token.symbol.includes("HEDERA://")) {

From 4d984feb8879fa133b58df057bad6fc9a813106a Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Mon, 11 Oct 2021 11:44:25 -0500
Subject: [PATCH 13/18] nativeNft - add different fee types

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/NonFungibleComposer.vue | 72 ++++++++++++++++++++++----
 src/service/tokenService.js            | 29 +++++++++--
 2 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index 9782817..d611b10 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -211,22 +211,57 @@
                 </v-row>
                 <v-row>
                   <v-col cols="4">
-                    <v-select
-                      label="Custom Fee Type:"
-                      :items="customFeeOptions"
-                    >
-                    </v-select>
+                    <v-radio-group v-model="customFeeSelected">
+                      <v-radio
+                        name="customFeeSelected"
+                        label="No Custom Fees"
+                        value=" "
+                      ></v-radio>
+                      <v-radio
+                        name="customFeeSelected"
+                        label="Fixed"
+                        value="fixed"
+                      ></v-radio>
+                      <v-radio
+                        name="customFeeSelected"
+                        label="Fractional"
+                        value="fractional"
+                      ></v-radio>
+                      <v-radio
+                        name="customFeeSelected"
+                        label="Royalty"
+                        value="royalty"
+                      ></v-radio>
+                    </v-radio-group>
                   </v-col>
-
-                  <v-col cols="8">
+                  <v-col cols="5">
                     <v-text-field
-                      label="Custom Fees*"
+                      v-if="customFeeSelected === 'fixed'"
+                      label="Fixed Fee*"
                       :rules="customFeeRules"
                       v-model="customFees"
                     ></v-text-field>
                   </v-col>
+                  <v-col cols="4">
+                    <v-text-field
+                      v-if="customFeeSelected === 'fractional' || customFeeSelected === 'royalty'"
+                      label="numerator*"
+                      required
+                      v-model="customFeeNumerator"
+                      :rules="numeratorRules"
+                    ></v-text-field>
+                  </v-col>
+                  <v-col cols="4">
+                    <v-text-field
+                      v-if="customFeeSelected === 'fractional'|| customFeeSelected === 'royalty'"
+                      label="denominator*"
+                      required
+                      v-model="customFeeDenominator"
+                      :rules="denominatorRules"
+                    ></v-text-field>
+                  </v-col>
                 </v-row>
-              </v-form>
+              </v-form> 
             </v-card-text>
           </v-card>
           <v-row>
@@ -371,14 +406,25 @@ export default {
         (n) => !!n || "Please enter an integer",
         (n) => !isNaN(parseInt(n)) || "Please enter a number",
       ],
+      numeratorRules: [
+        (n) => !!n || "Please enter an integer",
+        (n) => !isNaN(parseInt(n)) || "Please enter a valid number less than the denominator",
+      ],
+      denominatorRules: [
+        (n) => !!n || "Please enter an integer",
+        (n) => !isNaN(parseInt(n)) || "Please enter a valid number less than the denominator"
+      ],
       supplyRules: [
         (n) => !!n || "Please enter an integer",
         (n) => !isNaN(parseInt(n)) || "Please enter a number",
       ],
-      customFeeOptions: ["Custom", "Fixed", "Royalty"],
+      customFeeOptions: ["Fractional", "Fixed", "Royalty"],
       selectedFeeOption: "",
       name: "",
       customFees: 0,
+      customFeeSelected: "fixed",
+      customFeeNumerator: 0,
+      customFeeDenominator: 0,
       maxSupply: 0,
       symbol: "",
       defaultFreezeStatus: false,
@@ -421,6 +467,9 @@ export default {
       this.metadata = "";
       this.photoSize = 0;
       this.customFees = 0;
+      this.customFeeNumerator = 0;
+      this.customFeeDenominator = 0;
+      this.customFeesSelected = "";
       this.maxSupply = 0;
       this.tokenTemplates = loadTokenTemplates();
       this.tokenTemplatesForSelection = [];
@@ -497,6 +546,9 @@ export default {
             (this.model.Storage === "HEDERA" ? "hedera://" : "ipfs://") +
             fileId,
           customFees: this.customFees,
+          customFeeNumerator: this.customFeeNumerator,
+          customFeeDenominator: this.customFeeDenominator,
+          customFeeSelected: this.customFeeSelected,
           maxSupply: this.maxSupply,
           decimals: 0,
           initialSupply: 0,
diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index eba797e..d806859 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -22,7 +22,10 @@ const {
   TokenWipeTransaction,
   Hbar,
   CustomFixedFee,
-  Status
+  Status,
+  CustomFractionalFee,
+  CustomRoyaltyFee,
+  CustomFee
 } = require("@hashgraph/sdk");
 
 function issuerClient() {
@@ -65,11 +68,27 @@ export async function tokenCreate(token) {
     tx.setAutoRenewAccountId(token.autoRenewAccount);
     tx.setAutoRenewPeriod(autoRenewPeriod);
     
-    if(token.customFees) {
-      let fee = new CustomFixedFee();
-      fee.setAmount(Number(token.customFees));
+    if(token.customFeeSelected !== " ") {
+      let fee = new CustomFee();
+      if(token.customFeeSelected === "fixed"){
+        fee = new CustomFixedFee();
+        fee.setAmount(Number(token.customFees));
+        tx.setCustomFees([fee]);
+      }
+      else if(token.customFeeSelected === "fractional"){
+        fee = new CustomFractionalFee();
+        fee.setNumerator(parseInt(token.customFeeNumerator))
+        fee.setDenominator(parseInt(token.customFeeDenominator))
+      }
+      else if(token.customFeeSelected === "royalty"){
+        fee = new CustomRoyaltyFee();
+        fee.setNumerator(parseInt(token.customFeeNumerator))
+        fee.setDenominator(parseInt(token.customFeeDenominator))
+      }
+      else {
+        notifyError("Custom Fee Error");
+      }
       fee.setFeeCollectorAccountId(issuerAccount);
-      tx.setCustomFees([fee]);
     }
 
     if (token.adminKey) {

From 30909db014cef0fccee28205c58b8f4f24fb000c Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Tue, 16 Nov 2021 10:06:26 -0600
Subject: [PATCH 14/18] fix kyc

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/service/tokenService.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index d806859..41082c6 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -86,7 +86,7 @@ export async function tokenCreate(token) {
         fee.setDenominator(parseInt(token.customFeeDenominator))
       }
       else {
-        notifyError("Custom Fee Error");
+        //notifyError("Custom Fee Error");
       }
       fee.setFeeCollectorAccountId(issuerAccount);
     }
@@ -182,7 +182,8 @@ export async function tokenCreate(token) {
         if (token.kycKey) {
           const instruction = {
             tokenId: token.tokenId,
-            accountId: marketAccountId
+            accountId: marketAccountId,
+            kycKey: token.kycKey
           };
           tokenGrantKYC(instruction);
         }
@@ -315,7 +316,7 @@ export async function tokenBurn(instruction) {
 
 export async function tokenMint(instruction) {
   instruction.successMessage =
-    "Minted " + instruction.amount + " for token " + instruction.tokenId;
+    "Minted token " + instruction.tokenId;
     
   const supplyKey = PrivateKey.fromString(instruction.supplyKey);
   const tx = new TokenMintTransaction();
@@ -425,8 +426,7 @@ export async function tokenUnFreeze(instruction) {
 }
 
 export async function tokenGrantKYC(instruction) {
-  const token = state.getters.getTokens[instruction.tokenId];
-  const kycKey = PrivateKey.fromString(token.kycKey);
+  const kycKey = PrivateKey.fromString(instruction.kycKey);
   const tx = await new TokenGrantKycTransaction();
   instruction.successMessage =
     "Account " + instruction.accountId + " KYC Granted";

From 528ea6644a2c8634ae46188d1928234abec5b6a6 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Wed, 17 Nov 2021 19:23:33 -0600
Subject: [PATCH 15/18] remove fractional because it's not offered for nfts

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/NonFungibleComposer.vue | 9 ++-------
 src/service/tokenService.js            | 3 +++
 src/utils.js                           | 4 ++++
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index d611b10..1ece89d 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -222,11 +222,6 @@
                         label="Fixed"
                         value="fixed"
                       ></v-radio>
-                      <v-radio
-                        name="customFeeSelected"
-                        label="Fractional"
-                        value="fractional"
-                      ></v-radio>
                       <v-radio
                         name="customFeeSelected"
                         label="Royalty"
@@ -244,7 +239,7 @@
                   </v-col>
                   <v-col cols="4">
                     <v-text-field
-                      v-if="customFeeSelected === 'fractional' || customFeeSelected === 'royalty'"
+                      v-if="customFeeSelected === 'royalty'"
                       label="numerator*"
                       required
                       v-model="customFeeNumerator"
@@ -253,7 +248,7 @@
                   </v-col>
                   <v-col cols="4">
                     <v-text-field
-                      v-if="customFeeSelected === 'fractional'|| customFeeSelected === 'royalty'"
+                      v-if="customFeeSelected === 'royalty'"
                       label="denominator*"
                       required
                       v-model="customFeeDenominator"
diff --git a/src/service/tokenService.js b/src/service/tokenService.js
index 41082c6..e256e1c 100644
--- a/src/service/tokenService.js
+++ b/src/service/tokenService.js
@@ -76,14 +76,17 @@ export async function tokenCreate(token) {
         tx.setCustomFees([fee]);
       }
       else if(token.customFeeSelected === "fractional"){
+        //modify to only allow this for fungible common
         fee = new CustomFractionalFee();
         fee.setNumerator(parseInt(token.customFeeNumerator))
         fee.setDenominator(parseInt(token.customFeeDenominator))
+        tx.setCustomFees([fee]);
       }
       else if(token.customFeeSelected === "royalty"){
         fee = new CustomRoyaltyFee();
         fee.setNumerator(parseInt(token.customFeeNumerator))
         fee.setDenominator(parseInt(token.customFeeDenominator))
+        tx.setCustomFees([fee]);
       }
       else {
         //notifyError("Custom Fee Error");
diff --git a/src/utils.js b/src/utils.js
index 6c61032..a2767ee 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -108,3 +108,7 @@ export function secondsToParts(seconds) {
   }
   return result;
 }
+
+export function amountWithFraction(customFee) {
+  return parseInt(customFee.numerator) + " / " + customFee.denominator;
+}

From ffb79e6a38cc1d84d0e328484363b482e507d5eb Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Wed, 17 Nov 2021 19:33:56 -0600
Subject: [PATCH 16/18] add customFees to fungible tokens

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/FungibleComposer.vue    | 111 +++++++++++++++++++++++--
 src/components/NonFungibleComposer.vue |   2 +-
 src/components/TokenDetailsDialog.vue  |  29 ++++++-
 3 files changed, 135 insertions(+), 7 deletions(-)

diff --git a/src/components/FungibleComposer.vue b/src/components/FungibleComposer.vue
index b1b77d4..5e57e09 100644
--- a/src/components/FungibleComposer.vue
+++ b/src/components/FungibleComposer.vue
@@ -13,6 +13,10 @@
         Supply
       </v-stepper-step>
       <v-divider></v-divider>
+      <v-stepper-step :complete="step > STEP_CUSTOMFEES" :step="STEP_CUSTOMFEES">
+        Custom Fees
+      </v-stepper-step>
+      <v-divider></v-divider>
       <v-stepper-step :complete="step > STEP_MUTABLE" :step="STEP_MUTABLE">
         Mutable
       </v-stepper-step>
@@ -181,6 +185,84 @@
         </v-row>
       </v-stepper-content>
 
+      <v-stepper-content :step="STEP_CUSTOMFEES">
+          <v-card class="mb-12" :height="cardHeight" flat>
+            <v-card-text>
+              <v-form ref="customFeeForm" v-model="customFeeValid">
+                <v-row>
+                  <v-col cols="12">
+                    Custom fees are fees that are distributed to the specified
+                    accounts each time the token is transferred
+                    programmatically.
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="4">
+                    <v-radio-group v-model="customFeeSelected">
+                      <v-radio
+                        name="customFeeSelected"
+                        label="No Custom Fees"
+                        value=" "
+                      ></v-radio>
+                      <v-radio
+                        name="customFeeSelected"
+                        label="Fixed"
+                        value="fixed"
+                      ></v-radio>
+                      <v-radio
+                        name="customFeeSelected"
+                        label="Royalty"
+                        value="royalty"
+                      ></v-radio>
+                    </v-radio-group>
+                  </v-col>
+                  <v-col cols="5">
+                    <v-text-field
+                      v-if="customFeeSelected === 'fixed'"
+                      label="Fixed Fee*"
+                      :rules="customFeeRules"
+                      v-model="customFees"
+                    ></v-text-field>
+                  </v-col>
+                  <v-col cols="4">
+                    <v-text-field
+                      v-if="customFeeSelected === 'royalty'"
+                      label="numerator*"
+                      required
+                      v-model="customFeeNumerator"
+                      :rules="numeratorRules"
+                    ></v-text-field>
+                  </v-col>
+                  <v-col cols="4">
+                    <v-text-field
+                      v-if="customFeeSelected === 'royalty'"
+                      label="denominator*"
+                      required
+                      v-model="customFeeDenominator"
+                      :rules="denominatorRules"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-form> 
+            </v-card-text>
+          </v-card>
+          <v-row>
+            <v-col>
+              <v-btn text @click="cancel"> Cancel </v-btn>
+            </v-col>
+            <v-spacer></v-spacer>
+            <v-col>
+              <v-btn
+                color="primary"
+                @click="nextStep"
+                :disabled="!customFeeValid"
+              >
+                Continue
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-stepper-content>
+
       <v-stepper-content :step="STEP_MUTABLE">
         <v-card class="mb-12" height="200px" flat>
           <v-card-text>
@@ -354,11 +436,12 @@ export default {
       STEP_NAME: 1,
       STEP_FRACTIONAL: 2,
       STEP_SUPPLY: 3,
-      STEP_MUTABLE: 4,
-      STEP_KYC: 5,
-      STEP_WIPEABLE: 6,
-      STEP_FREEZABLE: 7,
-      STEP_CREATE: 8,
+      STEP_CUSTOMFEES: 4,
+      STEP_MUTABLE: 5,
+      STEP_KYC: 6,
+      STEP_WIPEABLE: 7,
+      STEP_FREEZABLE: 8,
+      STEP_CREATE: 9,
       nameValid: false,
       decimalsValid: false,
       supplyValid: false,
@@ -376,11 +459,21 @@ export default {
         v => !!v || "Input required",
         v => v.length <= 100 || "Max length 100"
       ],
+      customFeeRules: [
+        (n) => !!n || "Please enter an integer",
+        (n) => !isNaN(parseInt(n)) || "Please enter a number",
+      ],
       symbolRules: [
         v => !!v || "Input required",
         v => v.length <= 100 || "Max length 100"
       ],
+      customFeeOptions: ["Fixed", "Fractional", "Royalty"],
+      selectedFeeOption: "",
       name: "",
+      customFees: 0,
+      customFeeSelected: "fixed",
+      customFeeNumerator: 0,
+      customFeeDenominator: 0,
       symbol: "",
       decimals: "",
       initialSupply: 0,
@@ -413,6 +506,10 @@ export default {
       this.decimals = "";
       this.initialSupply = "0";
       this.defaultFreezeStatus = false;
+      this.customFees = 0;
+      this.customFeeNumerator = 0;
+      this.customFeeDenominator = 0;
+      this.customFeesSelected = "";
     },
     nextStep() {
       this.step = this.step + 1;
@@ -461,6 +558,10 @@ export default {
         symbol: this.symbol,
         decimals: this.decimals === "" ? 0 : this.decimals,
         initialSupply: this.initialSupply,
+        customFees: this.customFees,
+        customFeeNumerator: this.customFeeNumerator,
+        customFeeDenominator: this.customFeeDenominator,
+        customFeeSelected: this.customFeeSelected,
         adminKey: this.mutable === "yes" ? privateKey.toString() : undefined,
         kycKey: this.kyc === "yes" ? privateKey.toString() : undefined,
         freezeKey: this.freeze === "yes" ? privateKey.toString() : undefined,
diff --git a/src/components/NonFungibleComposer.vue b/src/components/NonFungibleComposer.vue
index 1ece89d..636e0ee 100644
--- a/src/components/NonFungibleComposer.vue
+++ b/src/components/NonFungibleComposer.vue
@@ -413,7 +413,7 @@ export default {
         (n) => !!n || "Please enter an integer",
         (n) => !isNaN(parseInt(n)) || "Please enter a number",
       ],
-      customFeeOptions: ["Fractional", "Fixed", "Royalty"],
+      customFeeOptions: ["Fixed", "Royalty"],
       selectedFeeOption: "",
       name: "",
       customFees: 0,
diff --git a/src/components/TokenDetailsDialog.vue b/src/components/TokenDetailsDialog.vue
index 72e09e8..c8681df 100644
--- a/src/components/TokenDetailsDialog.vue
+++ b/src/components/TokenDetailsDialog.vue
@@ -79,6 +79,18 @@
             </v-col>
           </v-row>
 
+          <v-row v-if="token.customFees" dense>
+            <v-col cols="6"
+              ><v-text-field
+                label="Custom Fees"
+                :value="customFees"
+                outlined
+                dense
+                disabled
+              ></v-text-field>
+            </v-col>
+          </v-row>
+
           <v-row dense>
             <v-col cols="4">
               <v-checkbox
@@ -216,7 +228,7 @@
 </template>
 <script>
 import { EventBus } from "../eventBus";
-import { amountWithDecimals, secondsToParts } from "../utils";
+import { amountWithDecimals, secondsToParts, amountWithFraction } from "../utils";
 import { fileGetContents } from "@/service/fileService";
 
 export default {
@@ -229,6 +241,7 @@ export default {
       initialSupply: 0,
       supply: 0,
       expiry: 0,
+      customFees: undefined,
       autoRenewPeriod: "",
       headingColor: "primary",
       title: "",
@@ -246,6 +259,20 @@ export default {
       vm.token = value;
       vm.supply = amountWithDecimals(value.totalSupply, value.decimals);
       vm.expiry = value.expiry;
+
+      if(value.customFees){
+        vm.customFees = [];
+        for (const key in value.customFees) {
+          const customFee = value.customFees[key];
+
+          if(customFee.amount){
+            vm.customFees.push(parseInt(customFee.amount) + " Hbar");
+          }
+          else{
+            vm.customFees.push(amountWithFraction(value.customFees[key]));
+          }
+        }
+      }
       vm.autoRenewPeriod = secondsToParts(value.autoRenewPeriod);
       vm.headingColor = value.isNFT ? "" : "primary";
       vm.title = value.isNFT

From 264007ac41be3c6bc4253c48f7665c6e8a8c1ba5 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Thu, 18 Nov 2021 07:22:11 -0600
Subject: [PATCH 17/18] nativeNft - add the right customFees for fungible
 common

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 src/components/FungibleComposer.vue   | 9 +++++++--
 src/components/TokenDetailsDialog.vue | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/FungibleComposer.vue b/src/components/FungibleComposer.vue
index 5e57e09..b3b65cc 100644
--- a/src/components/FungibleComposer.vue
+++ b/src/components/FungibleComposer.vue
@@ -209,6 +209,11 @@
                         label="Fixed"
                         value="fixed"
                       ></v-radio>
+                      <v-radio
+                        name="customFeeSelected"
+                        label="Fractional"
+                        value="fractional"
+                      ></v-radio>
                       <v-radio
                         name="customFeeSelected"
                         label="Royalty"
@@ -226,7 +231,7 @@
                   </v-col>
                   <v-col cols="4">
                     <v-text-field
-                      v-if="customFeeSelected === 'royalty'"
+                      v-if="customFeeSelected === 'royalty' || customFeeSelected === 'fractional'"
                       label="numerator*"
                       required
                       v-model="customFeeNumerator"
@@ -235,7 +240,7 @@
                   </v-col>
                   <v-col cols="4">
                     <v-text-field
-                      v-if="customFeeSelected === 'royalty'"
+                      v-if="customFeeSelected === 'royalty' || customFeeSelected === 'fractional'"
                       label="denominator*"
                       required
                       v-model="customFeeDenominator"
diff --git a/src/components/TokenDetailsDialog.vue b/src/components/TokenDetailsDialog.vue
index c8681df..be631fb 100644
--- a/src/components/TokenDetailsDialog.vue
+++ b/src/components/TokenDetailsDialog.vue
@@ -79,7 +79,7 @@
             </v-col>
           </v-row>
 
-          <v-row v-if="token.customFees" dense>
+          <v-row v-if="token.customFees.length > 0" dense>
             <v-col cols="6"
               ><v-text-field
                 label="Custom Fees"

From 67c31e8b084f29575500a2ee9ea1dbbb078442d4 Mon Sep 17 00:00:00 2001
From: Justin Atwell <justin.atwell@hedera.com>
Date: Tue, 30 Nov 2021 06:57:08 -0600
Subject: [PATCH 18/18] nativeNft - cleanup

Signed-off-by: Justin Atwell <justin.atwell@hedera.com>
---
 package.json                          | 2 +-
 src/components/FungibleComposer.vue   | 7 +++----
 src/components/TokenDetailsDialog.vue | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 900c017..47805a4 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@hashgraph/sdk": "^2.0.30",
+    "@hashgraph/sdk": "^2.5.0",
     "@koumoul/vjsf": "^1.17.1",
     "bignumber.js": "^9.0.0",
     "core-js": "^3.6.5",
diff --git a/src/components/FungibleComposer.vue b/src/components/FungibleComposer.vue
index b3b65cc..6419a1e 100644
--- a/src/components/FungibleComposer.vue
+++ b/src/components/FungibleComposer.vue
@@ -202,7 +202,7 @@
                       <v-radio
                         name="customFeeSelected"
                         label="No Custom Fees"
-                        value=" "
+                        value="none"
                       ></v-radio>
                       <v-radio
                         name="customFeeSelected"
@@ -260,7 +260,6 @@
               <v-btn
                 color="primary"
                 @click="nextStep"
-                :disabled="!customFeeValid"
               >
                 Continue
               </v-btn>
@@ -448,6 +447,7 @@ export default {
       STEP_FREEZABLE: 8,
       STEP_CREATE: 9,
       nameValid: false,
+      customFeeValid: false,
       decimalsValid: false,
       supplyValid: false,
       step: 1,
@@ -472,8 +472,6 @@ export default {
         v => !!v || "Input required",
         v => v.length <= 100 || "Max length 100"
       ],
-      customFeeOptions: ["Fixed", "Fractional", "Royalty"],
-      selectedFeeOption: "",
       name: "",
       customFees: 0,
       customFeeSelected: "fixed",
@@ -495,6 +493,7 @@ export default {
   methods: {
     init() {
       this.nameValid = false;
+      this.customFeeValid = false;
       this.decimalsValid = false;
       this.supplyValid = false;
       this.fractional = "no";
diff --git a/src/components/TokenDetailsDialog.vue b/src/components/TokenDetailsDialog.vue
index be631fb..c8681df 100644
--- a/src/components/TokenDetailsDialog.vue
+++ b/src/components/TokenDetailsDialog.vue
@@ -79,7 +79,7 @@
             </v-col>
           </v-row>
 
-          <v-row v-if="token.customFees.length > 0" dense>
+          <v-row v-if="token.customFees" dense>
             <v-col cols="6"
               ><v-text-field
                 label="Custom Fees"