Add transaction cost (#26)

enjin · Aug 21, 2023 · f0e66e1 · f0e66e1
1 parent 745d63b
commit f0e66e1
Show file tree

Hide file tree

Showing 15 changed files with 326 additions and 190 deletions.
diff --git a/resources/js/components/SideNavbar.vue b/resources/js/components/SideNavbar.vue
@@ -17,7 +17,14 @@
                     </RouterLink>
                 </nav>
             </div>
-            <div class="mt-auto px-2">
+            <div class="mt-auto px-2 flex flex-col space-y-2">
+                <a
+                    href="http://docs.enjin.io"
+                    target="_blank"
+                    class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center rounded-md px-4 sm:px-2 py-2 text-sm font-medium"
+                >
+                    Documentation
+                </a>
                 <a
                     href="http://feedback.enjin.io"
                     target="_blank"

diff --git a/resources/js/components/SignTransaction.vue b/resources/js/components/SignTransaction.vue
@@ -5,21 +5,36 @@
     </Btn>
     <Modal :is-open="showAccountsModal" :close="closeModal" width="max-w-lg">
         <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900 text-center">
-            Select an account to sign
+            Select an account to sign the transaction
         </DialogTitle>
-        <div class="flex flex-col space-y-2 mt-4">
-            <div
-                v-for="account in useAppStore().accounts"
-                :key="account.address"
-                class="px-4 py-3 border border-gray-300 rounded-md cursor-pointer hover:bg-primary/20 transition-all flex items-center space-x-4"
-                @click="selectAccount(account)"
-            >
-                <Identicon :address="account.address" />
-                <div class="flex flex-col">
-                    <span class="font-medium">{{ account.name }} </span>
-                    <span class="text-sm">
-                        {{ addressShortHex(account.address) }}
-                    </span>
+        <div class="flex flex-col space-y-2 mt-4 relative">
+            <div class="inline-flex space-x-2">
+                <span> Transaction fee: </span>
+                <LoadingCircle v-if="loadingApi" :size="20" class="my-auto text-primary" />
+                <span v-else class="font-bold animate-fade-in">
+                    {{ feeCost }}
+                </span>
+            </div>
+            <div v-if="loadingApi" class="py-20 animate-fade-in">
+                <LoadingCircle class="my-auto text-primary" :size="42" />
+            </div>
+            <div v-else class="flex flex-col space-y-2 animate-fade-in">
+                <div
+                    v-for="account in useAppStore().accounts"
+                    :key="account.address"
+                    class="px-4 py-3 border border-gray-300 rounded-md cursor-pointer hover:bg-primary/20 transition-all flex items-center space-x-4"
+                    @click="selectAccount(account)"
+                >
+                    <Identicon :address="account.address" />
+                    <div class="flex flex-col">
+                        <span class="font-medium">{{ account.name }} </span>
+                        <span class="text-sm">
+                            {{ addressShortHex(account.address) }}
+                        </span>
+                    </div>
+                </div>
+                <div v-if="!useAppStore().accounts.length" class="text-center">
+                    <span class="text-sm text-gray-500"> No accounts found. Please connect your wallet. </span>
                 </div>
             </div>
         </div>
@@ -32,6 +47,7 @@ import Btn from './Btn.vue';
 import Modal from './Modal.vue';
 import { addressShortHex } from '~/util/address';
 import { useAppStore } from '~/store';
+import { useTransactionStore } from '~/store/transaction';
 import { ref } from 'vue';
 import LoadingCircle from './LoadingCircle.vue';
 import snackbar from '~/util/snackbar';
@@ -45,10 +61,29 @@ const emit = defineEmits(['success']);
 
 const isLoading = ref(false);
 const showAccountsModal = ref(false);
+const feeCost = ref();
+const loadingApi = ref(false);
+
+const appStore = useAppStore();
+const transactionStore = useTransactionStore();
 
 const signTransaction = async () => {
-    useAppStore().getAccounts();
-    showAccountsModal.value = true;
+    try {
+        if (!appStore.provider) {
+            snackbar.error({ title: 'Please connect your wallet to sign' });
+
+            return;
+        }
+        showAccountsModal.value = true;
+        loadingApi.value = true;
+        appStore.getAccounts();
+        await transactionStore.init();
+        feeCost.value = await transactionStore.getTransactionCost(props.transaction);
+        loadingApi.value = false;
+    } catch (e) {
+        snackbar.error({ title: 'Failed to sign transaction' });
+        loadingApi.value = false;
+    }
 };
 
 const closeModal = () => {
@@ -58,9 +93,9 @@ const closeModal = () => {
 const selectAccount = async (account) => {
     try {
         isLoading.value = true;
-        useAppStore().setAccount(account);
+        appStore.setAccount(account);
         showAccountsModal.value = false;
-        const res = await useAppStore().signTransaction(props.transaction);
+        const res = await transactionStore.signTransaction(props.transaction);
         if (res) {
             emit('success');
         }

diff --git a/resources/js/components/Slideover.vue b/resources/js/components/Slideover.vue
@@ -22,6 +22,10 @@
                                     @close="emit('close')"
                                     @update="($event) => emit('update', $event)"
                                 />
+                                <XMarkIcon
+                                    class="absolute top-0 right-0 w-6 h-6 mt-4 mr-6 text-black cursor-pointer hover:text-gray-500 transition-all"
+                                    @click="emit('close')"
+                                />
                             </DialogPanel>
                         </TransitionChild>
                     </div>
@@ -33,6 +37,7 @@
 
 <script setup lang="ts">
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { XMarkIcon } from '@heroicons/vue/20/solid';
 import { defineAsyncComponent, shallowRef, watch } from 'vue';
 
 const emit = defineEmits(['close', 'update']);
@@ -53,7 +58,7 @@ const props = withDefaults(
 
 const loadComponent = () => {
     component.value = defineAsyncComponent({
-        loader: () => import(`~/components/slideovers/${props.item.componentPath}/${props.item.componentName}.vue`),
+        loader: () => import(`~/components/slideovers/${props.item?.componentPath}/${props.item?.componentName}.vue`),
         timeout: 3000,
         suspensible: false,
     });

diff --git a/resources/js/components/beam/BeamsList.vue b/resources/js/components/beam/BeamsList.vue
@@ -169,7 +169,7 @@ import Slideover from '~/components/Slideover.vue';
 import debounce from 'lodash/debounce';
 import snackbar, { events } from '~/util/snackbar';
 import FormInput from '~/components/FormInput.vue';
-import { CodeType } from '~/types/types.enums';
+import { CodeType, TransactionState } from '~/types/types.enums';
 import { shortCode } from '~/util/address';
 import NoItems from '~/components/NoItems.vue';
 import Btn from '~/components/Btn.vue';
@@ -421,7 +421,7 @@ const openTransactionSlide = async (transactionId: string) => {
     if (modalSlide.value) closeModalSlide();
 
     setTimeout(() => {
-        openModalSlide('DetailsTransactionSlideover', { transactionId });
+        openModalSlide('DetailsTransactionSlideover', { id: transactionId, state: TransactionState.PENDING });
     }, 600);
 };
 

diff --git a/resources/js/components/pages/Collections.vue b/resources/js/components/pages/Collections.vue
@@ -111,6 +111,7 @@ import FormInput from '~/components/FormInput.vue';
 import NoItems from '~/components/NoItems.vue';
 import { snackbarErrors } from '~/util';
 import Btn from '~/components/Btn.vue';
+import { TransactionState } from '~/types/types.enums';
 
 const isLoading = ref(true);
 const isPaginationLoading = ref(false);
@@ -283,7 +284,7 @@ const openTransactionSlide = async (transactionId: string) => {
     if (modalSlide.value) closeModalSlide();
 
     setTimeout(() => {
-        openModalSlide('DetailsTransactionSlideover', { transactionId });
+        openModalSlide('DetailsTransactionSlideover', { id: transactionId, state: TransactionState.PENDING });
     }, 600);
 };
 

diff --git a/resources/js/components/pages/FuelTanks.vue b/resources/js/components/pages/FuelTanks.vue
@@ -115,6 +115,7 @@ import NoItems from '~/components/NoItems.vue';
 import { FuelTankApi } from '~/api/fueltank';
 import { formatData } from '~/util';
 import Btn from '../Btn.vue';
+import { TransactionState } from '~/types/types.enums';
 
 const isLoading = ref(true);
 const isPaginationLoading = ref(false);
@@ -288,7 +289,7 @@ const openTransactionSlide = async (transactionId: string) => {
     if (modalSlide.value) closeModalSlide();
 
     setTimeout(() => {
-        openModalSlide('DetailsTransactionSlideover', { transactionId });
+        openModalSlide('DetailsTransactionSlideover', { id: transactionId, state: TransactionState.PENDING });
     }, 600);
 };
 

diff --git a/resources/js/components/pages/Tokens.vue b/resources/js/components/pages/Tokens.vue
@@ -123,7 +123,7 @@ import LoadingContent from '~/components/LoadingContent.vue';
 import Slideover from '~/components/Slideover.vue';
 import debounce from 'lodash/debounce';
 import { formatTokens, snackbarErrors } from '~/util';
-import { TokenIdSelectType } from '~/types/types.enums';
+import { TokenIdSelectType, TransactionState } from '~/types/types.enums';
 import TokenIdInput from '~/components/TokenIdInput.vue';
 import snackbar, { events } from '~/util/snackbar';
 import FormInput from '~/components/FormInput.vue';
@@ -302,7 +302,7 @@ const openTransactionSlide = async (transactionId: string) => {
     if (modalSlide.value) closeModalSlide();
 
     setTimeout(() => {
-        openModalSlide('DetailsTransactionSlideover', { transactionId });
+        openModalSlide('DetailsTransactionSlideover', { id: transactionId, state: TransactionState.PENDING });
     }, 600);
 };
 

diff --git a/resources/js/components/pages/Transactions.vue b/resources/js/components/pages/Transactions.vue
@@ -301,8 +301,11 @@ const onSuccess = async (id) => {
             p.result = res.result;
             p.transactionId = res.transactionId;
         }
+
         return p;
     });
+
+    openModalSlide('DetailsTransactionSlideover', res);
 };
 
 const getTransaction = async (id) => {

diff --git a/resources/js/components/pages/Wallets.vue b/resources/js/components/pages/Wallets.vue
@@ -97,6 +97,7 @@ import { formatData, snackbarErrors } from '~/util';
 import snackbar, { events } from '~/util/snackbar';
 import FormInput from '~/components/FormInput.vue';
 import NoItems from '~/components/NoItems.vue';
+import { TransactionState } from '~/types/types.enums';
 
 const isLoading = ref(false);
 const isPaginationLoading = ref(false);
@@ -215,7 +216,7 @@ const openTransactionSlide = async (transactionId: string) => {
     if (modalSlide.value) closeModalSlide();
 
     setTimeout(() => {
-        openModalSlide('DetailsTransactionSlideover', { transactionId });
+        openModalSlide('DetailsTransactionSlideover', { id: transactionId, state: TransactionState.PENDING });
     }, 600);
 };