From 3fe4c34d1538601e3c890b73750912d26047f398 Mon Sep 17 00:00:00 2001
From: Zouheir Layine <58786497+zlayine@users.noreply.github.com>
Date: Tue, 12 Dec 2023 09:48:20 +0300
Subject: [PATCH] [PLA-1480] fix negative number (#66)

---
 package-lock.json                             | 147 ++++++++++++++++++
 package.json                                  |   6 +-
 resources/js/components/FormInput.vue         |  16 +-
 resources/js/components/FormSelect.vue        |   2 +-
 .../components/batch/forms/BatchMintForm.vue  |   1 -
 .../components/fueltank/DispatchRuleForm.vue  |   7 +-
 resources/js/components/pages/Collections.vue |   6 +-
 resources/js/components/pages/Tokens.vue      |   1 +
 .../pages/create/CreateCollection.vue         |  12 +-
 .../pages/create/CreateFuelTank.vue           |   1 +
 .../components/pages/create/CreateListing.vue |   1 +
 .../components/pages/create/CreateToken.vue   |   2 +-
 .../common/DetailsTransactionSlideover.vue    |   1 -
 .../common/DetailsWalletSlideover.vue         |  10 +-
 .../token/DetailsTokenSlideover.vue           |  10 +-
 .../slideovers/token/MintTokenSlideover.vue   |   3 +-
 16 files changed, 198 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a02a707..0fb3032 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
                 "vue": "^3.3.4",
                 "vue-loader": "^17.2.2",
                 "vue-router": "^4.2.2",
+                "vue-tsc": "^1.8.25",
                 "vue3-popper": "^1.5.0",
                 "yup": "^1.0.2"
             },
@@ -4332,6 +4333,31 @@
                 "vue": "^3.2.25"
             }
         },
+        "node_modules/@volar/language-core": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
+            "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
+            "dependencies": {
+                "@volar/source-map": "1.11.1"
+            }
+        },
+        "node_modules/@volar/source-map": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
+            "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
+            "dependencies": {
+                "muggle-string": "^0.3.1"
+            }
+        },
+        "node_modules/@volar/typescript": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
+            "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+            "dependencies": {
+                "@volar/language-core": "1.11.1",
+                "path-browserify": "^1.0.1"
+            }
+        },
         "node_modules/@vue/cli-overlay": {
             "version": "5.0.8",
             "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-5.0.8.tgz",
@@ -4775,6 +4801,52 @@
                 }
             }
         },
+        "node_modules/@vue/language-core": {
+            "version": "1.8.25",
+            "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.25.tgz",
+            "integrity": "sha512-NJk/5DnAZlpvXX8BdWmHI45bWGLViUaS3R/RMrmFSvFMSbJKuEODpM4kR0F0Ofv5SFzCWuNiMhxameWpVdQsnA==",
+            "dependencies": {
+                "@volar/language-core": "~1.11.1",
+                "@volar/source-map": "~1.11.1",
+                "@vue/compiler-dom": "^3.3.0",
+                "@vue/shared": "^3.3.0",
+                "computeds": "^0.0.1",
+                "minimatch": "^9.0.3",
+                "muggle-string": "^0.3.1",
+                "path-browserify": "^1.0.1",
+                "vue-template-compiler": "^2.7.14"
+            },
+            "peerDependencies": {
+                "typescript": "*"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vue/language-core/node_modules/brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "node_modules/@vue/language-core/node_modules/minimatch": {
+            "version": "9.0.3",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+            "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
@@ -6713,6 +6785,11 @@
             "dev": true,
             "peer": true
         },
+        "node_modules/computeds": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+            "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q=="
+        },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -7232,6 +7309,11 @@
                 "date-fns": ">=2.0.0"
             }
         },
+        "node_modules/de-indent": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+            "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
+        },
         "node_modules/debounce": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@@ -11182,6 +11264,11 @@
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
             "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
+        "node_modules/muggle-string": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
+            "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg=="
+        },
         "node_modules/multicast-dns": {
             "version": "7.2.5",
             "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
@@ -11876,6 +11963,11 @@
             "dev": true,
             "peer": true
         },
+        "node_modules/path-browserify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+            "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+        },
         "node_modules/path-exists": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -15752,6 +15844,15 @@
             "dev": true,
             "peer": true
         },
+        "node_modules/vue-template-compiler": {
+            "version": "2.7.15",
+            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz",
+            "integrity": "sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==",
+            "dependencies": {
+                "de-indent": "^1.0.2",
+                "he": "^1.2.0"
+            }
+        },
         "node_modules/vue-template-es2015-compiler": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
@@ -15759,6 +15860,52 @@
             "dev": true,
             "peer": true
         },
+        "node_modules/vue-tsc": {
+            "version": "1.8.25",
+            "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.25.tgz",
+            "integrity": "sha512-lHsRhDc/Y7LINvYhZ3pv4elflFADoEOo67vfClAfF2heVHpHmVquLSjojgCSIwzA4F0Pc4vowT/psXCYcfk+iQ==",
+            "dependencies": {
+                "@volar/typescript": "~1.11.1",
+                "@vue/language-core": "1.8.25",
+                "semver": "^7.5.4"
+            },
+            "bin": {
+                "vue-tsc": "bin/vue-tsc.js"
+            },
+            "peerDependencies": {
+                "typescript": "*"
+            }
+        },
+        "node_modules/vue-tsc/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/vue-tsc/node_modules/semver": {
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/vue-tsc/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        },
         "node_modules/vue3-popper": {
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.5.0.tgz",
diff --git a/package.json b/package.json
index d29657e..baf4e17 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,11 @@
     "scripts": {
         "serve": "vite",
         "serve-laravel": "vite -c vite.config.laravel.ts",
+        "vue-tsc": "vue-tsc",
         "dev": "vite build --mode staging",
         "dev-laravel": "vite build -c vite.config.laravel.ts --mode staging",
-        "prod": "vite build",
-        "prod-laravel": "vite build -c vite.config.laravel.ts",
+        "prod": "vue-tsc && vite build",
+        "prod-laravel": "vue-tsc && vite build -c vite.config.laravel.ts",
         "lint": "eslint ./resources/js --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --cache",
         "lint:fix": "eslint ./resources/js --ext.vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore --fix --cache",
         "pretty:check": "prettier --check ./resources/js",
@@ -64,6 +65,7 @@
         "vue": "^3.3.4",
         "vue-loader": "^17.2.2",
         "vue-router": "^4.2.2",
+        "vue-tsc": "^1.8.25",
         "vue3-popper": "^1.5.0",
         "yup": "^1.0.2"
     }
diff --git a/resources/js/components/FormInput.vue b/resources/js/components/FormInput.vue
index 072e4c6..030544e 100644
--- a/resources/js/components/FormInput.vue
+++ b/resources/js/components/FormInput.vue
@@ -37,7 +37,8 @@
                             `block flex-1 flex-shrink-0 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary text-sm leading-6 overflow-hidden transition-all disabled:bg-gray-100 ${inputClass}`,
                         ]"
                         :placeholder="placeholder"
-                        @input="emit('inputChange', $event)"
+                        oninput="validity.valid||(value=value.replace(/\D+/g, ''))"
+                        @input="inputChange"
                         @keyup.enter="emit('submit')"
                         @focusout="hasFocus && emit('submit')"
                     />
@@ -94,6 +95,10 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue', 'inputChange', 'submit']);
 
+const inputChange = (e: Event) => {
+    emit('inputChange', e);
+};
+
 const localModelValue = computed({
     get() {
         return props.modelValue;
@@ -105,3 +110,12 @@ const localModelValue = computed({
     },
 });
 </script>
+<style scoped>
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+}
+</style>
diff --git a/resources/js/components/FormSelect.vue b/resources/js/components/FormSelect.vue
index 8bfb4b6..196514e 100644
--- a/resources/js/components/FormSelect.vue
+++ b/resources/js/components/FormSelect.vue
@@ -30,7 +30,7 @@
                         @after-leave="query = ''"
                     >
                         <ComboboxOptions
-                            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-30"
+                            class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-30 py-1 w-full"
                         >
                             <div
                                 v-if="filteredOptions.length === 0 && query !== ''"
diff --git a/resources/js/components/batch/forms/BatchMintForm.vue b/resources/js/components/batch/forms/BatchMintForm.vue
index 0e01aed..0eb111b 100644
--- a/resources/js/components/batch/forms/BatchMintForm.vue
+++ b/resources/js/components/batch/forms/BatchMintForm.vue
@@ -171,7 +171,6 @@
                                 name="mintUnitPrice"
                                 label="Unit Price"
                                 description="Leave as null if you want to keep the same unitPrice. You can also put a value if you want to change the unitPrice. Please note you can only increase it and a deposit to the difference of every token previously minted will also be needed."
-                                type="number"
                                 :prefix="currencySymbol"
                             />
                         </div>
diff --git a/resources/js/components/fueltank/DispatchRuleForm.vue b/resources/js/components/fueltank/DispatchRuleForm.vue
index aabdd1c..22a9dc1 100644
--- a/resources/js/components/fueltank/DispatchRuleForm.vue
+++ b/resources/js/components/fueltank/DispatchRuleForm.vue
@@ -51,6 +51,7 @@
                                     class="col-span-1"
                                     v-model="collectionId"
                                     name="collectionId"
+                                    type="number"
                                     placeholder="Collection ID"
                                 />
                                 <TokenIdInput class="col-span-1" v-model="tokenId" placeholder="Token ID" />
@@ -79,11 +80,11 @@
                             </template>
                             <template #inputs="{ inputs, index }">
                                 <div class="flex-1">
-                                    <input
+                                    <FormInput
                                         v-model="inputs.collection"
-                                        :dusk="`input__collection-id-${index + 1}`"
+                                        :name="`collection-${index + 1}`"
                                         type="number"
-                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                                        :dusk="`input__collection-id-${index + 1}`"
                                     />
                                 </div>
                             </template>
diff --git a/resources/js/components/pages/Collections.vue b/resources/js/components/pages/Collections.vue
index 6b87917..c764ced 100644
--- a/resources/js/components/pages/Collections.vue
+++ b/resources/js/components/pages/Collections.vue
@@ -7,6 +7,7 @@
                         <div class="relative rounded-md shadow-sm">
                             <FormInput
                                 v-model="searchInput"
+                                type="number"
                                 name="searchInput"
                                 label="Collection ID"
                                 placeholder="Search by collection ID"
@@ -218,11 +219,6 @@ const getCollection = async () => {
         collections.value = DTOFactory.forCollection(res);
     } catch (e) {
         collections.value.items = [];
-        if (snackbarErrors(e)) return;
-        snackbar.error({
-            title: 'Collection',
-            text: 'Error while fetching collection',
-        });
     } finally {
         isLoading.value = false;
     }
diff --git a/resources/js/components/pages/Tokens.vue b/resources/js/components/pages/Tokens.vue
index 0fb238d..df4d391 100644
--- a/resources/js/components/pages/Tokens.vue
+++ b/resources/js/components/pages/Tokens.vue
@@ -10,6 +10,7 @@
                                     v-model="searchCollectionInput"
                                     name="searchInput"
                                     label="Collection ID"
+                                    type="number"
                                     placeholder="Search by collection ID"
                                     @input-change="searchCollectionChange"
                                 />
diff --git a/resources/js/components/pages/create/CreateCollection.vue b/resources/js/components/pages/create/CreateCollection.vue
index fd24801..6cfad2f 100644
--- a/resources/js/components/pages/create/CreateCollection.vue
+++ b/resources/js/components/pages/create/CreateCollection.vue
@@ -118,12 +118,12 @@
                         </template>
                         <template #inputs="{ inputs, index }">
                             <div class="flex-1">
-                                <input
-                                    v-model="inputs.collectionId"
-                                    :dusk="`input__collection-id-${index + 1}`"
-                                    type="number"
-                                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
-                                />
+                                <FormInput
+                                        v-model="inputs.collectionId"
+                                        type="number"
+                                        :name="`collection-${index + 1}`"
+                                        :dusk="`input__collection-id-${index + 1}`"
+                                    />
                             </div>
                             <div class="flex-1">
                                 <TokenIdInput
diff --git a/resources/js/components/pages/create/CreateFuelTank.vue b/resources/js/components/pages/create/CreateFuelTank.vue
index c58ec87..c76af5f 100644
--- a/resources/js/components/pages/create/CreateFuelTank.vue
+++ b/resources/js/components/pages/create/CreateFuelTank.vue
@@ -103,6 +103,7 @@
                                         class="col-span-1"
                                         v-model="collectionId"
                                         name="collectionId"
+                                        type="number"
                                         placeholder="Collection ID"
                                     />
                                     <TokenIdInput class="col-span-1" v-model="tokenId" placeholder="Token ID" />
diff --git a/resources/js/components/pages/create/CreateListing.vue b/resources/js/components/pages/create/CreateListing.vue
index a069b15..60df64f 100644
--- a/resources/js/components/pages/create/CreateListing.vue
+++ b/resources/js/components/pages/create/CreateListing.vue
@@ -71,6 +71,7 @@
                                             v-model="takeCollectionId"
                                             name="takeCollectionId"
                                             placeholder="Collection ID"
+                                            type="number"
                                         />
                                         <TokenIdInput
                                             class="col-span-1"
diff --git a/resources/js/components/pages/create/CreateToken.vue b/resources/js/components/pages/create/CreateToken.vue
index 0c892f8..13f2187 100644
--- a/resources/js/components/pages/create/CreateToken.vue
+++ b/resources/js/components/pages/create/CreateToken.vue
@@ -54,7 +54,6 @@
                                     name="unitPrice"
                                     label="Unit Price"
                                     description="Leave as null if you want to keep the same unitPrice. You can also put a value if you want to change the unitPrice. Please note you can only increase it and a deposit to the difference of every token previously minted will also be needed."
-                                    type="number"
                                     :prefix="currencySymbol"
                                     required
                                     tooltip="The backing of the token necessary for it to exist in the blockchain, not to be mistaken by the reserve value, once the token is burned, the Unit Price returns to the creator and not the holder."
@@ -288,6 +287,7 @@ const validation = yup.object({
     tokenId: stringRequiredSchema,
     recipient: addressRequiredSchema,
     initialSupply: numberRequiredSchema.typeError('Initial Supply must be a number').min(1),
+    unitPrice: numberRequiredSchema.typeError('Unit Price must be a number').min(0),
     capType: stringRequiredSchema,
     capAmount: yup.number().when('capType', {
         is: TokenCapType.SUPPLY,
diff --git a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
index 4f47ef5..f1c3922 100644
--- a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
+++ b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
@@ -170,7 +170,6 @@ import { ref, computed, watch } from 'vue';
 import { TransactionApi } from '~/api/transaction';
 import Address from '~/components/Address.vue';
 import Btn from '~/components/Btn.vue';
-import CopyTextIcon from '~/components/CopyTextIcon.vue';
 import LoadingCircle from '~/components/LoadingCircle.vue';
 import SignTransaction from '~/components/SignTransaction.vue';
 import TransactionResultChip from '~/components/TransactionResultChip.vue';
diff --git a/resources/js/components/slideovers/common/DetailsWalletSlideover.vue b/resources/js/components/slideovers/common/DetailsWalletSlideover.vue
index 7fffa09..d42d8dc 100644
--- a/resources/js/components/slideovers/common/DetailsWalletSlideover.vue
+++ b/resources/js/components/slideovers/common/DetailsWalletSlideover.vue
@@ -18,10 +18,10 @@
                         <dt class="text-base font-medium text-gray-500">Balances</dt>
                         <dt class="text-sm font-medium text-gray-500">Free</dt>
                         <dd class="mt-1 text-sm text-gray-900 break-words">
-                            {{ formatPriceFromENJ(item.balances.free) }} RFI
+                            {{ formatPriceFromENJ(item.balances.free) }} {{ currencySymbol }}
                         </dd>
                         <dt class="text-sm font-medium text-gray-500">Reserved</dt>
-                        <dd class="mt-1 text-sm text-gray-900">{{ formatPriceFromENJ(item.balances.reserved) }} RFI</dd>
+                        <dd class="mt-1 text-sm text-gray-900">{{ formatPriceFromENJ(item.balances.reserved) }}</dd>
                     </div>
 
                     <div class="space-y-2 pt-4 pb-3" v-if="item.externalId">
@@ -45,8 +45,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import Address from '~/components/Address.vue';
-import { formatPriceFromENJ } from '~/util';
+import { useAppStore } from '~/store';
+import { currencySymbolByNetwork, formatPriceFromENJ } from '~/util';
 
 defineProps<{
     item?: {
@@ -61,4 +63,6 @@ defineProps<{
         network: string;
     };
 }>();
+
+const currencySymbol = computed(() => currencySymbolByNetwork(useAppStore().config.network));
 </script>
diff --git a/resources/js/components/slideovers/token/DetailsTokenSlideover.vue b/resources/js/components/slideovers/token/DetailsTokenSlideover.vue
index f0e4d96..c495b46 100644
--- a/resources/js/components/slideovers/token/DetailsTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/DetailsTokenSlideover.vue
@@ -21,7 +21,9 @@
 
                     <div class="space-y-2 pt-4 pb-3">
                         <dt class="text-base font-medium text-gray-500">Unit Price</dt>
-                        <dd class="mt-1 text-sm text-gray-900">{{ formatPriceFromENJ(item.unitPrice) }} RFI</dd>
+                        <dd class="mt-1 text-sm text-gray-900">
+                            {{ formatPriceFromENJ(item.unitPrice) }} {{ currencySymbol }}
+                        </dd>
                     </div>
 
                     <div class="space-y-2 pt-4 pb-3">
@@ -116,9 +118,11 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import Address from '~/components/Address.vue';
 import CopyTextIcon from '~/components/CopyTextIcon.vue';
-import { formatPriceFromENJ } from '~/util';
+import { useAppStore } from '~/store';
+import { currencySymbolByNetwork, formatPriceFromENJ } from '~/util';
 import Royalty from '~/util/royalty';
 
 defineProps<{
@@ -145,4 +149,6 @@ defineProps<{
         };
     };
 }>();
+
+const currencySymbol = computed(() => currencySymbolByNetwork(useAppStore().config.network));
 </script>
diff --git a/resources/js/components/slideovers/token/MintTokenSlideover.vue b/resources/js/components/slideovers/token/MintTokenSlideover.vue
index 05cc93f..ca7aec3 100644
--- a/resources/js/components/slideovers/token/MintTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/MintTokenSlideover.vue
@@ -49,7 +49,6 @@
                             label="Unit Price"
                             description="Leave as null if you want to keep the same unitPrice. You can also put a value if you want to change the unitPrice. Please note you can only increase it and a deposit to the difference of every token previously minted will also be needed."
                             :prefix="currencySymbol"
-                            type="number"
                         />
 
                         <FormInput
@@ -140,7 +139,7 @@ const validation = yup.object({
     tokenId: stringRequiredSchema,
     recipient: addressRequiredSchema,
     amount: numberRequiredSchema.typeError('Amount must be a number'),
-    unitPrice: numberRequiredSchema.min(0.01).typeError('Amount must be a number'),
+    unitPrice: numberRequiredSchema.min(0.01).typeError('Unit price must be a number'),
     idempotencyKey: stringNotRequiredSchema,
     skipValidation: booleanNotRequiredSchema,
 });