From c80809029813c3e3b1f47582912cec5ddbe4d136 Mon Sep 17 00:00:00 2001
From: zlayine <zouheirlen@gmail.com>
Date: Mon, 7 Aug 2023 18:27:44 +0300
Subject: [PATCH] updated transaction UI flow

---
 package-lock.json                             | 26 ++++++++--
 package.json                                  |  1 +
 resources/js/components/Identicon.vue         | 30 +++++++++++
 resources/js/components/SignTransaction.vue   | 24 ++++++---
 resources/js/components/Slideover.vue         |  9 +++-
 .../js/components/WalletConnectButton.vue     |  5 +-
 .../js/components/pages/Transactions.vue      | 51 ++++++++++++++++---
 .../common/DetailsTransactionSlideover.vue    | 15 ++++--
 resources/js/store/index.ts                   | 15 +++---
 9 files changed, 142 insertions(+), 34 deletions(-)
 create mode 100644 resources/js/components/Identicon.vue

diff --git a/package-lock.json b/package-lock.json
index 2459ea3..10e1866 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
                 "@polkadot/api": "^10.9.1",
                 "@polkadot/keyring": "^12.3.2",
                 "@polkadot/types": "^10.9.1",
+                "@polkadot/ui-shared": "^3.5.1",
                 "@polkadot/util": "^12.3.2",
                 "@polkadot/util-crypto": "^10.4.2",
                 "@tailwindcss/forms": "^0.5.3",
@@ -2721,6 +2722,27 @@
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
             "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
         },
+        "node_modules/@polkadot/ui-shared": {
+            "version": "3.5.1",
+            "resolved": "https://registry.npmjs.org/@polkadot/ui-shared/-/ui-shared-3.5.1.tgz",
+            "integrity": "sha512-YXOVfm4YDbkTOyVPu6duhHN1L6/kntzk4Zx2IM8mPXRAdV7nexKPh9nasG/DJth0oqomCuhAhH+B61UueCmXUQ==",
+            "dependencies": {
+                "colord": "^2.9.3",
+                "tslib": "^2.5.3"
+            },
+            "engines": {
+                "node": ">=16"
+            },
+            "peerDependencies": {
+                "@polkadot/util": "*",
+                "@polkadot/util-crypto": "*"
+            }
+        },
+        "node_modules/@polkadot/ui-shared/node_modules/tslib": {
+            "version": "2.6.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
+            "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
+        },
         "node_modules/@polkadot/util": {
             "version": "12.3.2",
             "resolved": "https://registry.npmjs.org/@polkadot/util/-/util-12.3.2.tgz",
@@ -6105,9 +6127,7 @@
         "node_modules/colord": {
             "version": "2.9.3",
             "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-            "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
-            "dev": true,
-            "peer": true
+            "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
         },
         "node_modules/colorette": {
             "version": "2.0.20",
diff --git a/package.json b/package.json
index 42214ac..018530b 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
         "@polkadot/api": "^10.9.1",
         "@polkadot/keyring": "^12.3.2",
         "@polkadot/types": "^10.9.1",
+        "@polkadot/ui-shared": "^3.5.1",
         "@polkadot/util": "^12.3.2",
         "@polkadot/util-crypto": "^10.4.2",
         "@tailwindcss/forms": "^0.5.3",
diff --git a/resources/js/components/Identicon.vue b/resources/js/components/Identicon.vue
new file mode 100644
index 0000000..c77afc8
--- /dev/null
+++ b/resources/js/components/Identicon.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="relative">
+        <svg :height="44" viewBox="0 0 64 64" :width="44">
+            <circle
+                v-for="(circle, index) in circles"
+                :key="index"
+                :cx="circle.cx"
+                :cy="circle.cy"
+                :fill="circle.fill"
+                :r="circle.r"
+            />
+        </svg>
+    </div>
+</template>
+
+<script setup>
+import { polkadotIcon } from '@polkadot/ui-shared';
+import { ref, h } from 'vue';
+
+const props = defineProps({
+    address: {
+        type: String,
+        required: true,
+    },
+});
+
+const circles = polkadotIcon(props.address, {
+    isAlternative: false,
+}).map(({ cx, cy, fill, r }) => ({ cx, cy, fill, r }));
+</script>
diff --git a/resources/js/components/SignTransaction.vue b/resources/js/components/SignTransaction.vue
index 00a1b68..75bb26d 100644
--- a/resources/js/components/SignTransaction.vue
+++ b/resources/js/components/SignTransaction.vue
@@ -1,20 +1,26 @@
 <template>
-    <Btn primary @click="signTransaction()" class="ml-3">
+    <Btn primary @click="signTransaction" class="px-8" :disabled="isLoading">
         <LoadingCircle v-if="isLoading" class="h-5 w-5 mx-1 ml-0.5 text-white" />
         <span v-else> Sign </span>
     </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 Account
+            Select an account to sign
         </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 text-sm cursor-pointer hover:bg-primary/20 transition-all"
+                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)"
             >
-                {{ publicKeyToAddress(account.address) }}
+                <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>
     </Modal>
@@ -24,16 +30,19 @@
 import { DialogTitle } from '@headlessui/vue';
 import Btn from './Btn.vue';
 import Modal from './Modal.vue';
-import { publicKeyToAddress } from '~/util/address';
+import { addressShortHex } from '~/util/address';
 import { useAppStore } from '~/store';
 import { ref } from 'vue';
 import LoadingCircle from './LoadingCircle.vue';
 import snackbar from '~/util/snackbar';
+import Identicon from './Identicon.vue';
 
 const props = defineProps<{
     transaction: any;
 }>();
 
+const emit = defineEmits(['success']);
+
 const isLoading = ref(false);
 const showAccountsModal = ref(false);
 
@@ -51,7 +60,10 @@ const selectAccount = async (account) => {
         isLoading.value = true;
         useAppStore().setAccount(account);
         showAccountsModal.value = false;
-        await useAppStore().signTransaction(props.transaction);
+        const res = await useAppStore().signTransaction(props.transaction);
+        if (res) {
+            emit('success');
+        }
     } catch (e) {
         snackbar.error({ title: 'Failed to sign transaction' });
     } finally {
diff --git a/resources/js/components/Slideover.vue b/resources/js/components/Slideover.vue
index f1016b6..80fe0c3 100644
--- a/resources/js/components/Slideover.vue
+++ b/resources/js/components/Slideover.vue
@@ -16,7 +16,12 @@
                         >
                             <DialogPanel class="pointer-events-auto w-screen max-w-xs md:max-w-lg transition-all">
                                 <div ref="initialFocusRef"></div>
-                                <component :is="component" @close="emit('close')" :item="item" />
+                                <component
+                                    :is="component"
+                                    :item="item"
+                                    @close="emit('close')"
+                                    @update="($event) => emit('update', $event)"
+                                />
                             </DialogPanel>
                         </TransitionChild>
                     </div>
@@ -30,7 +35,7 @@
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
 import { defineAsyncComponent, shallowRef, watch } from 'vue';
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'update']);
 
 const component = shallowRef();
 const initialFocusRef = shallowRef();
diff --git a/resources/js/components/WalletConnectButton.vue b/resources/js/components/WalletConnectButton.vue
index 0e54b66..afb71c9 100644
--- a/resources/js/components/WalletConnectButton.vue
+++ b/resources/js/components/WalletConnectButton.vue
@@ -53,7 +53,6 @@
             </MenuItems>
         </ScaleTransition>
     </Menu>
-   
 </template>
 
 <script setup lang="ts">
@@ -90,8 +89,7 @@ const getSession = async () => {
     try {
         loading.value = true;
         await appStore.getSession();
-    } catch (e){
-        console.log(e)
+    } catch (e) {
         snackbar.error({ title: 'Failed to get session' });
     } finally {
         loading.value = false;
@@ -104,7 +102,6 @@ const disconnectWallet = async () => {
     loading.value = false;
 };
 
-
 (async () => {
     getSession();
 })();
diff --git a/resources/js/components/pages/Transactions.vue b/resources/js/components/pages/Transactions.vue
index 6fef0e1..a652229 100644
--- a/resources/js/components/pages/Transactions.vue
+++ b/resources/js/components/pages/Transactions.vue
@@ -105,10 +105,6 @@
                                     </td>
                                     <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                         {{ transaction.state }}
-                                        <SignTransaction
-                                            v-if="transaction.state === 'PENDING'"
-                                            :transaction="transaction"
-                                        />
                                     </td>
                                     <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                         <TransactionResultChip v-if="transaction.result" :text="transaction.result" />
@@ -117,12 +113,23 @@
                                         class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3 flex justify-end"
                                     >
                                         <Btn
-                                            v-if="transaction.transactionId"
+                                            v-if="
+                                                transaction.transactionId ||
+                                                transaction.state === TransactionState.BROADCAST
+                                            "
                                             primary
                                             @click="openModalSlide('DetailsTransactionSlideover', transaction)"
                                         >
-                                            {{ transaction.transactionId }}
+                                            <span v-if="transaction.transactionId">
+                                                {{ transaction.transactionId }}
+                                            </span>
+                                            <LoadingCircle v-else class="h-5 w-5 mx-5 text-white" />
                                         </Btn>
+                                        <SignTransaction
+                                            v-if="transaction.state === TransactionState.PENDING"
+                                            :transaction="transaction"
+                                            @success="onSuccess(transaction.id)"
+                                        />
                                     </td>
                                 </tr>
                             </tbody>
@@ -134,7 +141,7 @@
                 <div ref="paginatorRef"></div>
             </div>
         </div>
-        <Slideover :open="modalSlide" @close="closeModalSlide" :item="slideComponent" />
+        <Slideover :open="modalSlide" @close="closeModalSlide" :item="slideComponent" @update="updateTransaction" />
     </div>
 </template>
 
@@ -285,6 +292,36 @@ const getSearchInputs = () => {
     return inputs;
 };
 
+const onSuccess = async (id) => {
+    const res = await getTransaction(id);
+
+    transactions.value.items.map((p) => {
+        if (p.id === id) {
+            p.state = res.state;
+            p.result = res.result;
+            p.transactionId = res.transactionId;
+        }
+        return p;
+    });
+};
+
+const getTransaction = async (id) => {
+    const res = await TransactionApi.getTransaction(id);
+
+    return res.data.GetTransaction;
+};
+
+const updateTransaction = (transaction) => {
+    transactions.value.items.map((p) => {
+        if (p.id === transaction.id) {
+            p.state = transaction.state;
+            p.result = transaction.result;
+            p.transactionId = transaction.transactionId;
+        }
+        return p;
+    });
+};
+
 const getTransactions = async () => {
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
index 3193f32..8cd5956 100644
--- a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
+++ b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl">
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-gray-900">
-            Transaction Details for {{ item?.transactionId }}
+            Transaction Details for {{ item?.transactionId ?? item?.id }}
         </h3>
         <div class="h-0 flex-1 overflow-y-auto">
             <div class="flex flex-1 flex-col justify-between">
                 <div class="px-4 sm:px-6 divide-y divide-gray-200">
-                    <div v-if="!item?.id">
+                    <div>
                         <div v-if="!webSocketEvents && !transaction?.state">
                             <LoadingCircle :size="40" class="pt-10" />
                             <p class="text-center pt-2">Waiting for transaction...</p>
@@ -30,6 +30,9 @@
                             >
                                 Get More Transaction Details
                             </Btn>
+                            <div class="text-xs text-center mx-auto mt-4">
+                                Usually it takes few seconds to finilize the transaction
+                            </div>
                         </div>
                     </div>
 
@@ -145,6 +148,8 @@ const props = withDefaults(
     }
 );
 
+const emit = defineEmits(['update']);
+
 const appStore = useAppStore();
 
 const isLoading = ref(false);
@@ -160,11 +165,13 @@ const isAddressKey = (key) => ['who', 'operator', 'account', 'owner'].includes(k
 
 const getTransaction = async () => {
     try {
-        if (!props.item?.transactionId) return;
         isLoading.value = true;
-        const res = await TransactionApi.getTransaction(props.item.transactionId);
+        const res = await TransactionApi.getTransaction(props.item?.transactionId ?? props.item?.id ?? '');
         const transactionData = res.data.GetTransaction;
         transaction.value = transactionData;
+        if (transactionData.state === TransactionState.FINALIZED) {
+            emit('update', transactionData);
+        }
     } catch (error) {
         // Do notihing
     }
diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
index dbbf388..4956b16 100644
--- a/resources/js/store/index.ts
+++ b/resources/js/store/index.ts
@@ -14,7 +14,6 @@ import { ApiPromise, WsProvider } from '@polkadot/api';
 import { SignerPayloadJSON } from '@polkadot/types/types';
 import { AccountInfoWithTripleRefCount } from '@polkadot/types/interfaces';
 import { TransactionApi } from '~/api/transaction';
-import router from '~/router';
 
 const RPC_URLS = {
     canary: 'wss://rpc.matrix.canary.enjin.io',
@@ -57,19 +56,17 @@ const updateTransaction = async ({
             snackbar.success({
                 title: 'Transaction signed',
                 text: `The transaction was signed successfully`,
-                event: id,
             });
 
-            // TODO: There is probably a better way to refresh it
-            setTimeout(() => router.go(0), 1000);
-
-            return;
+            return true;
         }
 
         snackbar.error({
             title: 'Sign Transaction',
             text: 'Signing transaction failed',
         });
+
+        return false;
     } catch (e) {
         if (snackbarErrors(e)) return;
         snackbar.error({
@@ -143,7 +140,6 @@ export const useAppStore = defineStore('app', {
 
                 return true;
             } catch (error: any) {
-                console.log(error);
                 snackbar.error({ title: error });
             }
 
@@ -330,6 +326,7 @@ export const useAppStore = defineStore('app', {
             const pkjs = new PolkadotjsWallet();
             if (pkjs.installed) {
                 await pkjs.enable('Platform');
+                this.wallet = true;
                 this.provider = 'polkadot.js';
             }
         },
@@ -375,7 +372,7 @@ export const useAppStore = defineStore('app', {
             extrinsic.addSignature(this.account.address, signature, payloadToSign);
 
             const transactionHash = await api.rpc.author.submitExtrinsic(extrinsic.toHex());
-            await updateTransaction({
+            return await updateTransaction({
                 id: transaction.id,
                 transactionHash: transactionHash.toHex(),
                 signingAccount: this.account.address,
@@ -397,9 +394,11 @@ export const useAppStore = defineStore('app', {
                 }
 
                 this.account = null;
+                this.wallet = false;
                 this.provider = '';
             } catch {
                 this.account = null;
+                this.wallet = false;
                 this.provider = '';
             }
         },