Relays are finally working, thanks to a hacky solution.

Shared (Extension)/Resources/background.js

@@ -6,6 +6,8 @@ import {
     nip19,
 } from 'nostr-tools';
 
+import { getProfileIndex, get, getProfile } from './utils';
+
 const storage = browser.storage.local;
 const log = msg => console.log('Background: ', msg);
 
@@ -116,8 +118,6 @@ async function getPubKey() {
 async function currentProfile() {
     let index = await getProfileIndex();
     let profiles = await get('profiles');
-    let currentProfile = profiles[index];
-    currentProfile.nsecKey = nip19.nsecEncode(currentProfile.privKey);
     return profiles[index];
 }
 
@@ -138,13 +138,14 @@ async function nip04Decrypt({ pubKey, cipherText }) {
     return nip04.decrypt(privKey, pubKey, cipherText);
 }
 
-// Utilities
+async function getRelays() {
-
+    let profile = await currentProfile();
-async function get(item) {
+    let relays = profile.relays;
-    return (await storage.get(item))[item];
+    let relayObj = {};
-}
+    // The getRelays call expects this to be returned as an object, not array
-
+    relays.forEach(relay => {
-async function getProfile(index) {
+        let { url, read, write } = relay;
-    let profiles = await get('profiles');
+        relayObj[url] = { read, write };
-    return profiles[index];
+    });
+    return relayObj;
 }

Shared (Extension)/Resources/options.html

@@ -71,10 +71,10 @@
           <tr>
             <td class="p-2 w-1/3" x-text="relay.url"></td>
             <td class="p-2 text-center">
-              <input class="checkbox" type="checkbox" x-model="relay.read" @change="saveRelays">
+              <input class="checkbox" type="checkbox" x-model="relay.read" @change="await saveRelays()">
             </td>
             <td class="p-2 text-center">
-              <input class="checkbox" type="checkbox" x-model="relay.write" @change="saveRelays">
+              <input class="checkbox" type="checkbox" x-model="relay.write" @change="await saveRelays()">
             </td>
             <td class="p-2 text-center">
               <button class="button" @click="await deleteRelay(index)">Delete</button>

Shared (Extension)/Resources/options.js

@@ -130,10 +130,8 @@ Alpine.data('options', () => ({
     },
 
     async saveRelays() {
-        console.log(this.relays);
         await saveRelays(this.profileIndex, this.relays);
-        await this.getRelays(this.profileIndex);
+        await this.getRelays();
-        this.newRelay = '';
     },
 
     async addRelay(relayToAdd = null) {
@@ -142,17 +140,16 @@ Alpine.data('options', () => ({
             let url = new URL(newRelay);
             if (url.protocol !== 'wss:') {
                 this.setUrlError('Must be a websocket url');
+                return;
             }
             let urls = this.relays.map(v => v.url);
             if (urls.includes(url.href)) {
                 this.setUrlError('URL already exists');
                 return;
             }
-            this.relays = [
+            this.relays.push({ url: url.href, read: true, write: true });
-                ...this.relays,
-                { url: url.href, read: true, write: true },
-            ];
             await this.saveRelays();
+            this.newRelay = '';
         } catch (error) {
             this.setUrlError('Invalid websocket URL');
         }

Shared (Extension)/Resources/utils.js

@@ -12,7 +12,7 @@ export async function getProfiles() {
     return profiles.profiles;
 }
 
-async function getProfile(index) {
+export async function getProfile(index) {
     let profiles = await getProfiles();
     return profiles[index];
 }
@@ -107,8 +107,16 @@ export async function getRelays(profileIndex) {
 }
 
 export async function saveRelays(profileIndex, relays) {
-    let profiles = await getProfile(profileIndex);
+    // Having an Alpine proxy object as a sub-object does not serialize correctly in storage,
-    console.log('saving: ', relays);
+    // so we are pre-serializing here before assigning it to the profile, so the proxy
-    profile.relays = [...relays];
+    // obj doesn't bug out.
+    let fixedRelays = JSON.parse(JSON.stringify(relays));
+    let profiles = await getProfiles();
+    let profile = profiles[profileIndex];
+    profile.relays = fixedRelays;
     await storage.set({ profiles });
 }
+
+export async function get(item) {
+    return (await storage.get(item))[item];
+}