Add NIP07 support to WelcomeBox

src/components/Sidebar/WelcomeBox.vue

@@ -4,20 +4,32 @@
       <h3>New to Nostr?</h3>
     </div>
     <div class="welcome-content">
-      <button class="btn btn-primary" @click="signUp">Create Account</button>
-      <button class="btn" @click="signIn">Log in</button>
+      <button v-if="nip07available" class="btn btn-primary" @click.stop="signInNip07()">Log in with Extension</button>
+      <button class="btn" :class="{'btn-primary': !nip07available}" @click.stop="signUp">
+        Create Account
+      </button>
+      <button v-if="!nip07available" class="btn" @click.stop="signIn">Log in</button>
+      <a v-else @click.stop="signIn">Log in with key</a>
     </div>
   </div>
 </template>
 
 <script>
 import {useAppStore} from 'stores/App'
+import {useSettingsStore} from 'stores/Settings'
+import Nip07 from 'src/utils/Nip07'
 
 export default {
   name: 'WelcomeBox',
   setup() {
     return {
       app: useAppStore(),
+      settings: useSettingsStore(),
+    }
+  },
+  data() {
+    return {
+      nip07available: false,
     }
   },
   methods: {
@@ -27,6 +39,20 @@ export default {
     signIn() {
       this.app.signIn('sign-in')
     },
+    async signInNip07() {
+      const pubkey = await Nip07.getPublicKey()
+
+      const account = {
+        pubkey,
+        useExtension: true,
+      }
+      this.settings.addAccount(account)
+      this.settings.switchAccount(pubkey)
+    },
+  },
+  mounted() {
+    this.nip07available = Nip07.isAvailable()
+    setTimeout(() => this.nip07available = Nip07.isAvailable(), 300)
   }
 }
 </script>
@@ -49,6 +75,7 @@ export default {
   &-content {
     border-top: $border-dark;
     padding: 1rem;
+    text-align: center;
     button {
       width: 100%;
       padding: .5rem;
@@ -56,6 +83,15 @@ export default {
         margin-bottom: 1rem;
       }
     }
+    a {
+      display: inline-block;
+      margin-top: 1rem;
+      cursor: pointer;
+      color: $color-primary;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 }