From 5ba05bb0616be0230b0cc4e1d3306920e3506bcd Mon Sep 17 00:00:00 2001
From: zlayine <zlayine@enjin.io>
Date: Fri, 3 Nov 2023 18:36:58 +0300
Subject: [PATCH] add price format

---
 resources/js/components/Handbook.vue                  |  2 +-
 resources/js/components/fueltank/DispatchRuleForm.vue | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/Handbook.vue b/resources/js/components/Handbook.vue
index 01ffa37..1808f90 100644
--- a/resources/js/components/Handbook.vue
+++ b/resources/js/components/Handbook.vue
@@ -187,7 +187,7 @@ const contents = [
             'In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application.',
             ' As an example, This is a highly helpful quality since it allows an operation to be repeated or done as many times as required without having any unexpected consequences. The algorithm might need to keep track of whether a non-idempotent operation has previously been carried out or not.',
             '**Where is this applied in the Enjin Platform API?**',
-            'As an example, we can imagine a situation where a game dev runs a function that will transfer 0.1 ENJ or EFI tokens to one of his users if he does not have an idempotent code logic implemented on the API, in case the platform returns an error but the tokens still got transferred, he would not be able to actually know if this operation worked as expected or not, and he would not be able to retry that specific transaction without risking sending another 0.1 ENJ or EFI tokens to one of his users. By implementing an idempotent code key in the Enjin Platform API, we solve this issue by returning an idempotency key after every transaction, where in case he tries to run the transaction with the same idempotency key, the platform will actually check the result of the transaction that was performed using that key and prevent it from getting executed.',
+            'As an example, we can imagine a situation where a game dev runs a function that will transfer 0.1 ENJ tokens to one of his users if he does not have an idempotent code logic implemented on the API, in case the platform returns an error but the tokens still got transferred, he would not be able to actually know if this operation worked as expected or not, and he would not be able to retry that specific transaction without risking sending another 0.1 ENJ tokens to one of his users. By implementing an idempotent code key in the Enjin Platform API, we solve this issue by returning an idempotency key after every transaction, where in case he tries to run the transaction with the same idempotency key, the platform will actually check the result of the transaction that was performed using that key and prevent it from getting executed.',
         ],
     },
     {
diff --git a/resources/js/components/fueltank/DispatchRuleForm.vue b/resources/js/components/fueltank/DispatchRuleForm.vue
index 2ed1802..ae7fc39 100644
--- a/resources/js/components/fueltank/DispatchRuleForm.vue
+++ b/resources/js/components/fueltank/DispatchRuleForm.vue
@@ -105,6 +105,7 @@
                                     name="userFuelAmount"
                                     placeholder="Amount"
                                     type="number"
+                                    :prefix="currencySymbol"
                                 />
                                 <FormInput
                                     class="col-span-1"
@@ -128,6 +129,7 @@
                                     name="tankFuelAmount"
                                     placeholder="Amount"
                                     type="number"
+                                    :prefix="currencySymbol"
                                 />
                                 <FormInput
                                     class="col-span-1"
@@ -150,13 +152,14 @@ import { ref, computed, watch } from 'vue';
 import { Form } from 'vee-validate';
 import * as yup from 'yup';
 import FormInput from '~/components/FormInput.vue';
-import { formatData, formatToken, parseFormatedTokenId } from '~/util';
+import { currencySymbolByNetwork, formatData, formatPriceToENJ, formatToken, parseFormatedTokenId } from '~/util';
 import { TokenIdSelectType } from '~/types/types.enums';
 import TokenIdInput from '~/components/TokenIdInput.vue';
 import FormList from '../FormList.vue';
 import { formatWhitelistedCallers, formatWhitelistedCollections } from '~/util';
 import { DispatchRulesValuesInterface } from '~/types/types.interface';
 import { numberNotRequiredSchema, stringNotRequiredSchema } from '~/util/schemas';
+import { useAppStore } from '~/store';
 
 const emit = defineEmits(['update:modelValue', 'validation', 'close']);
 
@@ -189,6 +192,7 @@ const tankFuelAmount = ref(props.modelValue.tankFuelBudget?.amount ?? null);
 const tankFuelresetPeriod = ref(props.modelValue.tankFuelBudget?.resetPeriod ?? null);
 
 const validForm = computed(() => formRef.value.getMeta().valid);
+const currencySymbol = computed(() => currencySymbolByNetwork(useAppStore().config.network));
 
 const validation = yup.object({
     whitelistedCallers: yup.array().of(
@@ -232,11 +236,11 @@ const hasChanged = computed(() =>
         whitelistedCollections: whitelistedCollections.value.map((item: any) => item.collection),
         maxFuelBurnPerTransaction: maxFuelBurnPerTransaction.value,
         userFuelBudget: {
-            amount: userFuelAmount.value,
+            amount: formatPriceToENJ(userFuelAmount.value),
             resetPeriod: userFuelresetPeriod.value,
         },
         tankFuelBudget: {
-            amount: tankFuelAmount.value,
+            amount: formatPriceToENJ(tankFuelAmount.value),
             resetPeriod: tankFuelresetPeriod.value,
         },
     })