Added ability to run add recommended relays from popup.

Shared (Extension)/Resources/options.js

@@ -10,15 +10,9 @@ import {
     savePrivateKey,
     saveProfileName,
     saveRelays,
+    RECOMMENDED_RELAYS,
 } from './utils';
 
-const RECOMMENDED_RELAYS = [
-    new URL('wss://relay.damus.io'),
-    new URL('wss://eden.nostr.land'),
-    new URL('wss://nostr-relay.derekross.me'),
-    new URL('wss://relay.snort.social'),
-];
-
 const log = console.log;
 
 Alpine.data('options', () => ({

Shared (Extension)/Resources/popup.css

@@ -5,61 +5,23 @@
 
 body {
     width: 300px;
-    padding: 10px;
+    padding: 15px;
 
     font-family: system-ui;
 }
 
-label {
+.relay {
-    display: inline-block;
+    margin-top: 10px;
-    width: 200px;
+    font-size: 80%;
-}
+    color: darkred;
-
-input {
-    width: 100%;
-}
-
-.profile-buttons {
-    width: 100%;
-}
-
-#priv-key, #pub-key {
-    font-family: monospace;
-}
-
-.profiles {
-    margin-bottom: 15px;
-}
-
-.profile-name {
-    margin-bottom: 15px;
-}
-
-.key {
-    margin-bottom: 15px;
-}
-
-.buttons {
-    margin-bottom: 15px;
-}
-
-td:first-child {
-    width: 50px;
-}
-
-td:nth-child(2) {
-    width: 100px;
-}
-
-tr {
-    margin-bottom: 10px;
 }
 
 .help {
-    margin-top: 15px;
+    margin-top: 10px;
 }
 
 .disclaimer {
+    margin-top: 10px;
     font-size: 50%;
     color: green;
 }

Shared (Extension)/Resources/popup.html

@@ -20,6 +20,15 @@
         </div>
     </div>
 
+    <div class="relay" x-show="relayCount < 1">
+        <span>
+            You do not have any relays setup for this profile. Would you like to add some recommended
+            relays now?
+        </span>
+        <br>
+        <button @click="await addRelays()">Add Relays</button>
+    </div>
+
     <div class="help">
         <button @click='window.open("https://ursus.camp/nostore", "_blank")'>Get Help</button>
         <button @click="await openOptions()">Advanced</button>

Shared (Extension)/Resources/popup.js

@@ -3,15 +3,19 @@ import {
     getProfileNames,
     setProfileIndex,
     getProfileIndex,
+    getRelays,
+    RECOMMENDED_RELAYS,
+    saveRelays,
 } from './utils';
 import Alpine from 'alpinejs';
 window.Alpine = Alpine;
 
-const log = msg => bglog(msg, 'popup');
+const log = console.log;
 
 Alpine.data('popup', () => ({
     profileNames: ['Default'],
     profileIndex: 0,
+    relayCount: 0,
 
     async init() {
         log('Initializing backend.');
@@ -20,6 +24,7 @@ Alpine.data('popup', () => ({
         this.$watch('profileIndex', async () => {
             await this.loadNames();
             await this.setProfileIndex();
+            await this.countRelays();
         });
 
         // Even though loadProfileIndex will immediately trigger a profile refresh, we still
@@ -29,6 +34,7 @@ Alpine.data('popup', () => ({
         // profile when first loading the popup.
         await this.loadNames();
         await this.loadProfileIndex();
+        await this.countRelays();
     },
 
     async setProfileIndex() {
@@ -51,6 +57,21 @@ Alpine.data('popup', () => ({
         await browser.runtime.openOptionsPage();
         window.close();
     },
+
+    async countRelays() {
+        let relays = await getRelays(this.profileIndex);
+        this.relayCount = relays.length;
+    },
+
+    async addRelays() {
+        let relays = RECOMMENDED_RELAYS.map(r => ({
+            url: r.href,
+            read: true,
+            write: true,
+        }));
+        await saveRelays(this.profileIndex, relays);
+        await this.countRelays();
+    },
 }));
 
 Alpine.start();

Shared (Extension)/Resources/utils.js

@@ -1,4 +1,16 @@
 const storage = browser.storage.local;
+export const RECOMMENDED_RELAYS = [
+    new URL('wss://relay.damus.io'),
+    new URL('wss://eden.nostr.land'),
+    new URL('wss://nostr-relay.derekross.me'),
+    new URL('wss://relay.snort.social'),
+];
+
+export async function initialize() {
+    await getOrSetDefault('profileIndex', 0);
+    await getOrSetDefault('profiles', [await generateProfile()]);
+    await getOrSetDefault('version', 0);
+}
 
 export async function bglog(msg, module = null) {
     await browser.runtime.sendMessage({
@@ -56,11 +68,6 @@ async function generatePrivateKey() {
     return await browser.runtime.sendMessage({ kind: 'generatePrivateKey' });
 }
 
-export async function initialize() {
-    await getOrSetDefault('profileIndex', 0);
-    await getOrSetDefault('profiles', [await generateProfile()]);
-}
-
 export async function generateProfile(name = 'Default') {
     return {
         name,