Merge pull request #3097 from kodadot/feat-add-nudge-wallet

#2615 Adding nudge in wallet auth
kodadot · Jun 3, 2022 · d96d65c · d96d65c
2 parents b46199b + 268bf8c
commit d96d65c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/components/common/WalletModal.vue b/components/common/WalletModal.vue
@@ -8,10 +8,20 @@
           icon-left="chevron-left"
           @click="hasSelectedWalletProvider = !hasSelectedWalletProvider"
           v-show="hasSelectedWalletProvider" />
-        <p class="modal-card-title">Connect Wallet</p>
+        <p class="modal-card-title">{{ $t('walletConnect.walletHeading') }}</p>
         <button type="button" class="delete" @click="$emit('close')" />
       </header>
-      <section class="modal-card-body">
+      <section class="modal-card-body py-6" v-if="!hasUserWalletAuth">
+        <div class="mb-5">
+          {{ $t('walletConnect.authText') }}
+        </div>
+        <b-field>
+          <b-checkbox v-model="hasUserAuthorized" @input="setUserAuthValue">
+            {{ $t('walletConnect.understand') }}
+          </b-checkbox>
+        </b-field>
+      </section>
+      <section class="modal-card-body" v-if="hasUserWalletAuth">
         <div class="has-text-centered">
           <img
             src="~/assets/Koda_Beta.svg"
@@ -46,7 +56,7 @@
             size="is-medium"
             type="is-info"
             expanded>
-            Lean how to Connect
+            {{ $t('walletConnect.learnText') }}
           </b-button>
           <b-button
             tag="a"
@@ -56,7 +66,7 @@
             outlined
             size="is-medium"
             expanded>
-            Download extension
+            {{ $t('walletConnect.downloadExtension') }}
           </b-button>
         </div>
 
@@ -109,6 +119,7 @@ export default class WalletModal extends Vue {
   protected guideUrl = ''
   protected extensionUrl = ''
   protected walletAccounts: WalletAccount[] = []
+  private hasUserAuthorized = false
 
   set account(account: string) {
     this.$emit('close')
@@ -133,13 +144,26 @@ export default class WalletModal extends Vue {
     return this.chainProperties?.ss58Format
   }
 
+  get hasUserWalletAuth() {
+    return (
+      localStorage.getItem('user_auth_wallet_add') || this.hasUserAuthorized
+    )
+  }
+
   @Watch('walletAccounts', { immediate: true })
   handleAccounts(value: WalletAccount[], oldVal: WalletAccount[]): void {
     if (shouldUpdate(value, oldVal)) {
       this.walletAccounts = value
     }
   }
 
+  protected setUserAuthValue() {
+    localStorage.setItem(
+      'user_auth_wallet_add',
+      (!!this.hasUserAuthorized).toString()
+    )
+  }
+
   protected setWallet(wallet: BaseDotsamaWallet): void {
     this.selectedWalletProvider = wallet
     this.hasSelectedWalletProvider = true
@@ -209,6 +233,10 @@ export default class WalletModal extends Vue {
     background: unset;
   }
 
+  .modal-card-body {
+    display: block;
+  }
+
   .buttons button {
     border-radius: 0;
     justify-content: space-between;

diff --git a/langDir/en.json b/langDir/en.json
@@ -702,5 +702,12 @@
     "loadAllArtworks": "Load all artworks in gallery on default (videos, etc.)",
     "enableGyroEffect": "Enable gyroscopic effect in gallery for 3d NFTs",
     "exploreTabOrder": "Default tab in explore"
+  },
+  "walletConnect": {
+    "walletHeading": "Connect Wallet",
+    "authText": "Kodadot will never ask you to provide your mnemonic phrase or private key.",
+    "understand": "I understand",
+    "learnText": "Learn how to Connect",
+    "downloadExtension": "Download extension"
   }
 }