From 36046a2bd6aa126f19d8a575579423e251e19bae Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 19 Sep 2023 23:18:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Prompt=20user=20to=20re-login=20?=
 =?UTF-8?q?when=20not=20ISCN=20owner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Alerts/SignFailed.vue | 74 +++++++++++++++++++++++++-------
 locales/en.json                  |  4 +-
 pages/nft/url/index.vue          |  6 +--
 3 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/components/Alerts/SignFailed.vue b/components/Alerts/SignFailed.vue
index 77cb7762..4cba8b91 100644
--- a/components/Alerts/SignFailed.vue
+++ b/components/Alerts/SignFailed.vue
@@ -1,18 +1,23 @@
 
 <template>
-  <Snackbar
-    :open="isOpenSnackbar"
-    preset="warn"
-    @close="handleSnackbarClose"
-  >
-    {{ errorAlert }}
-    <Link
-      v-if="errorType === 'INSUFFICIENT_BALANCE'"
-      :class="['text-white', 'ml-[2px]']"
-      href="https://go.crisp.chat/chat/embed/?website_id=5c009125-5863-4059-ba65-43f177ca33f7"
-    >
-      , {{ $t('IscnRegisterForm.error.buy') }}
-    </Link>
+  <Snackbar :open="isOpenSnackbar" preset="warn" @close="handleSnackbarClose">
+    <i18n :path="errorAlert" tag="div" class="flex items-center flex-nowrap">
+      <Link
+        place="buy"
+        :class="['text-white', 'ml-[2px]']"
+        href="https://go.crisp.chat/chat/embed/?website_id=5c009125-5863-4059-ba65-43f177ca33f7"
+      >
+        {{ $t('IscnRegisterForm.error.buy') }}
+      </Link>
+      <div
+        place="login"
+        class="flex flex-nowrap items-center gap-[4px] ml-[8px] text-white underline font-bold cursor-pointer"
+        @click="handleReLogin"
+      >
+        {{ $t('IscnRegisterForm.error.reLogIn') }}
+        <IconSignIn />
+      </div>
+    </i18n>
   </Snackbar>
 </template>
 
@@ -20,10 +25,13 @@
 import { Vue, Component } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 
+import logTrackerEvent, { setLoggerUser } from '~/utils/logger'
+
 const walletModule = namespace('wallet')
 
 export enum ErrorType {
-  INSUFFICIENT_BALANCE = 'INSUFFICIENT_BALANCE',
+  INSUFFICIENT_BALANCE = 'Error: INSUFFICIENT_BALANCE',
+  USER_NOT_ISCN_OWNER = 'Error: USER_NOT_ISCN_OWNER',
 }
 
 @Component
@@ -31,11 +39,23 @@ export default class SignFailed extends Vue {
   @walletModule.State isOpenSnackbar!: boolean
   @walletModule.State errorType!: string
   @walletModule.Action closeSnackbar!: () => void
+  @walletModule.Action('disconnectWallet') disconnectWallet!: () => void
+  @walletModule.Action('openConnectWalletModal')
+  openConnectWalletModal!: (params: { language: string }) => Promise<any>
+
+  @walletModule.Action('initWallet') initWallet!: (params: {
+    method: any
+    accounts: any
+    offlineSigner?: any
+  }) => Promise<any>
 
   get errorAlert() {
     switch (this.errorType) {
       case ErrorType.INSUFFICIENT_BALANCE:
-        return this.$t('IscnRegisterForm.error.insufficient')
+        return 'IscnRegisterForm.error.insufficient'
+
+      case ErrorType.USER_NOT_ISCN_OWNER:
+        return 'IscnRegisterForm.error.notIscnOwner'
       default:
         return this.errorType
     }
@@ -44,5 +64,29 @@ export default class SignFailed extends Vue {
   handleSnackbarClose() {
     this.closeSnackbar()
   }
+
+  async handleReLogin() {
+    const { currentRoute } = this.$router
+    await this.disconnectWallet()
+    const connection = await this.openConnectWalletModal({
+      language: this.$i18n.locale.split('-')[0],
+    })
+    if (connection) {
+      const { method, accounts } = connection
+      logTrackerEvent(
+        this,
+        'user',
+        `connected_wallet_${method}`,
+        're-connected_wallet',
+        1,
+      )
+      setLoggerUser(this, {
+        wallet: accounts[0].address,
+        method,
+      })
+      this.$router.push(currentRoute.path);
+    }
+    this.handleSnackbarClose()
+  }
 }
 </script>
diff --git a/locales/en.json b/locales/en.json
index 2328eead..afd9f25e 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -190,8 +190,10 @@
   "IscnRegisterForm.error.buy": "Buy LikeCoin",
   "IscnRegisterForm.error.descriptionIsEmpty": "Please enter the ISCN description",
   "IscnRegisterForm.error.faucet": "Get faucet",
-  "IscnRegisterForm.error.insufficient": "Oops, Insufficient Balance. ",
+  "IscnRegisterForm.error.insufficient": "Oops, Insufficient Balance. {buy} ",
   "IscnRegisterForm.error.missingSigner": "Missing Signer. Please connect your wallet.",
+  "IscnRegisterForm.error.notIscnOwner": "Oops, User is not the current ISCN owner. {login}",
+  "IscnRegisterForm.error.reLogIn": "Re-Login",
   "IscnRegisterForm.error.numbersProtocol": "Oops. Unable to register asset to Numbers Protocol. Please try again later.",
   "IscnRegisterForm.error.requiredField": "This field is required",
   "IscnRegisterForm.error.timeout": "Oops, the server connection timeout, please try again.",
diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index 033150b0..3362f700 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -365,7 +365,7 @@ export default class FetchIndex extends Vue {
         if (res) {
           const iscnOwner = res.owner
           if (iscnOwner !== this.address) {
-            this.toggleSnackbar('USER_NOT_ISCN_OWNER')
+            this.toggleSnackbar(ErrorType.USER_NOT_ISCN_OWNER)
           }
         }
       }
@@ -557,7 +557,7 @@ export default class FetchIndex extends Vue {
         this.balance = (await getAccountBalance(this.address)) as string
       }
       if (this.balance === '0') {
-        throw new Error('INSUFFICIENT_BALANCE')
+        throw new Error(ErrorType.INSUFFICIENT_BALANCE)
       }
       switch (this.state) {
         case State.INIT: {
@@ -754,7 +754,7 @@ export default class FetchIndex extends Vue {
   async registerISCN(): Promise<void> {
     await this.initIfNecessary()
     if (!this.signer) {
-      throw new Error('MISSING_SIGNER')
+      throw new Error(ErrorType.MISSING_SIGNER)
     }
     let res
     try {