[PLA-1399] fuel tank accounts (#47)

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.',
         ],
     },
     {

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,
         },
     })

resources/js/components/slideovers/fueltank/AccountsFuelTankSlideover.vue

@@ -72,6 +72,12 @@
                         <table class="min-w-full divide-y divide-gray-300" v-if="accounts.items?.length">
                             <thead>
                                 <tr>
+                                    <th
+                                        scope="col"
+                                        class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3"
+                                    >
+                                        ID
+                                    </th>
                                     <th
                                         scope="col"
                                         class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3"
@@ -87,7 +93,10 @@
                                     :class="idx % 2 === 0 ? undefined : 'bg-gray-50'"
                                 >
                                     <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                        {{ account.owner }}
+                                        {{ account.id }}
+                                    </td>
+                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                        {{ account.account }}
                                     </td>
                                 </tr>
                             </tbody>
@@ -170,7 +179,8 @@ const actions = ref([
 const isPaginationLoading = ref(false);
 const accounts: Ref<{
     items: {
-        owner: string;
+        id: string;
+        account: string;
     }[];
     cursor: string | null;
 }> = ref({
@@ -289,6 +299,7 @@ const getAccounts = async () => {
         const res = await FuelTankApi.getAccounts(addressToPublicKey(tankId.value) ?? '');
         accounts.value = DTOFactory.forAccounts(res);
     } catch (e) {
+        console.log(e);
         // Do nothing
     } finally {
         isLoading.value = false;

resources/js/factory/account.ts

@@ -4,7 +4,6 @@ export class DTOAccountFactory {
     public static buildAccount(account: any): any {
         return {
             ...account,
-            owner: publicKeyToAddress(account.owner.account.publicKey),
             account: publicKeyToAddress(account.account.publicKey),
         };
     }