From e6861c5e5254346b34d2cc1adef7a12f1f2ae05c Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 18 Sep 2024 21:29:53 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20login=20UX=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AppHeader.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 4fb7d70d..de9b2ee4 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -82,7 +82,13 @@
             ]"
           >
             <div
-              v-if="currentAddress"
+              v-if="isLoading"
+              class="flex items-center justify-center"
+            >
+              <ProgressIndicator />
+            </div>
+            <div
+              v-else-if="sessionWallet"
               :class="[
                 'relative',
                 'w-[180px]',
@@ -90,7 +96,7 @@
             >
               <Button
                 preset="secondary"
-                :title="currentAddress"
+                :title="sessionWallet"
               >
                 <template
                   v-if="isUsingMobileApp"
@@ -104,7 +110,7 @@
                     'overflow-hidden',
                     'overflow-ellipsis',
                   ]"
-                >{{ currentAddress }}</div>
+                >{{ sessionWallet }}</div>
               </Button>
               <Button
                 :class="[
@@ -168,6 +174,7 @@ export default class AppHeader extends Vue {
   @walletModule.Action('signMessageMemo') signMessageMemo!: (action: string, permissions?: string[]) => Promise<any>
   @walletModule.Getter('getWalletAddress') currentAddress!: string
   @walletModule.Getter('getSigner') signer!: any
+  @bookApiModule.Getter('getSessionWallet') sessionWallet!: string
   @bookApiModule.Action('authenticate') authenticate!: ({ inputWallet, signature }: { inputWallet?: string, signature?: any }) => Promise<any>
   @bookApiModule.Action('clearSession') clearSession!: () => void
 
@@ -220,7 +227,7 @@ export default class AppHeader extends Vue {
         'write:nftcollection',
       ])
       if (!signature) { return }
-      await this.authenticate({inputWallet:this.currentAddress, signature})
+      await this.authenticate({ inputWallet: this.currentAddress, signature })
     }
     } catch (error) {
       this.disconnectWallet()
@@ -228,7 +235,9 @@ export default class AppHeader extends Vue {
       // eslint-disable-next-line no-console
       console.error('handleConnectWalletButtonClick error', error)
     }
-    this.isLoading = false
+    finally {
+      this.isLoading = false
+    }
   }
 }
 </script>