From 8a87ae84e8a7eba822e5bf1de7a5cb1bfbd83a7b Mon Sep 17 00:00:00 2001
From: Zouheir Layine <58786497+zlayine@users.noreply.github.com>
Date: Tue, 28 Nov 2023 15:37:26 +0300
Subject: [PATCH] [PLA-1452] fix loading with connect wallet (#56)

---
 resources/js/components/WalletConnectButton.vue |  8 +++++++-
 resources/js/components/pages/Settings.vue      |  3 ++-
 resources/js/store/connection.ts                | 12 +++++++++---
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/WalletConnectButton.vue b/resources/js/components/WalletConnectButton.vue
index 582583b..499a8c9 100644
--- a/resources/js/components/WalletConnectButton.vue
+++ b/resources/js/components/WalletConnectButton.vue
@@ -2,6 +2,7 @@
     <Menu as="div" class="relative">
         <div>
             <MenuButton
+                id="wallet-connect-button"
                 class="flex items-center space-x-2 rounded-md bg-primary py-2 px-3 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-light focus:ring-offset-2 text-white transition-all"
             >
                 <WalletIcon class="h-6 w-6" />
@@ -16,6 +17,7 @@
                 <template v-if="!walletSession">
                     <MenuItem v-slot="{ active }">
                         <button
+                            id="wallet-connect-button__enjin"
                             :class="[
                                 active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                                 'block px-4 py-2 text-sm w-full text-center transition-all',
@@ -27,6 +29,7 @@
                     </MenuItem>
                     <MenuItem v-slot="{ active }">
                         <button
+                            id="wallet-connect-button__polkadot"
                             :class="[
                                 active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                                 'block px-4 py-2 text-sm w-full text-center transition-all',
@@ -40,6 +43,7 @@
                 <template v-else>
                     <MenuItem v-slot="{ active }">
                         <button
+                            id="wallet-connect-button__disconnect"
                             :class="[
                                 active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                                 'block px-4 py-2 text-sm w-full text-center transition-all',
@@ -83,7 +87,9 @@ const walletSession = computed(() => connectionStore.wallet);
 const connectWallet = async (provider: string) => {
     try {
         loading.value = true;
-        await connectionStore.connectWallet(provider);
+        await connectionStore.connectWallet(provider, () => {
+            loading.value = false;
+        });
         if (connectionStore.accounts) {
             showAccountsModal.value = true;
         }
diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
index 1788030..60c5b3d 100644
--- a/resources/js/components/pages/Settings.vue
+++ b/resources/js/components/pages/Settings.vue
@@ -28,6 +28,7 @@
                                 placeholder="Enter token name"
                             />
                             <Btn
+                                id="create-api-token-button"
                                 primary
                                 class="py-2.5 disabled:!bg-primary"
                                 @click="createApiToken"
@@ -67,7 +68,7 @@
                                         />
                                     </span>
                                 </div>
-                                <Btn error @click="revokeToken(token.name)">Revoke</Btn>
+                                <Btn :id="`revoke-api-button__${token.name}`" error @click="revokeToken(token.name)">Revoke</Btn>
                             </div>
                         </div>
                     </div>
diff --git a/resources/js/store/connection.ts b/resources/js/store/connection.ts
index efbdc9c..0405e2a 100644
--- a/resources/js/store/connection.ts
+++ b/resources/js/store/connection.ts
@@ -44,9 +44,9 @@ export const useConnectionStore = defineStore('connection', {
         getWeb3Modal() {
             return new Web3Modal(walletConnectWeb3modalConfig);
         },
-        async connectWallet(provider) {
+        async connectWallet(provider: string, endLoading: Function) {
             if (provider === 'wc') {
-                await this.connectWC();
+                await this.connectWC(endLoading);
             }
 
             if (provider === 'polkadot.js') {
@@ -74,7 +74,7 @@ export const useConnectionStore = defineStore('connection', {
                 this.walletSession = this.walletClient.session.get(this.walletClient.session.keys[lastKeyIndex]);
             }
         },
-        async connectWC() {
+        async connectWC(endLoading: Function) {
             const walletConnect = this.getWeb3Modal();
             await this.initWalletClient();
 
@@ -86,6 +86,12 @@ export const useConnectionStore = defineStore('connection', {
                 requiredNamespaces: wcRequiredNamespaces(useAppStore().config.network),
             });
 
+            walletConnect.subscribeModal(async (event) => {
+                if (event.open === false) {
+                    endLoading();
+                }
+            });
+
             await walletConnect.openModal({
                 uri,
             });