Native app facelift, extension UI tweaks, bug fixes.

Show/Hide Button for private key in Options page. Move experimental page into separate sub-folder. Move delegation wizard to sub-folder. Move permission page into separate folder. Basic functional SwiftUI look for the app. Beginning to define the main app view. NavigationStack and Privacy Policy Show App Icon on main screen. Getting Started: macOS Getting Started: iPhone Getting Started: iPad Removing old default UIKit code. Added "No Thanks" toggle to the relay reminder. Clearly indicate in the Settings page when a profile is a delegated profile. Changed recommended relays to all public relays. Use x-cloak in all the places. Fix bundle display name to use capital N. Added copy button to pubkey in settings. Window default size. Updating event kind list. Allow events to be copied by clicking on them in the event log. Tweaking the colors for a more purple-ish look. Added Tips and Tricks view to native app. Move utilities modules into separate folder. Rename event_log files to event_history to escape some content blockers. Renamed Event Log to Event History in the UI as well.
2023-02-16 21:48:47 -05:00
parent 75274aed27
commit 8322aca674
56 changed files with 849 additions and 481 deletions
--- a/(Extension)/Resources/background.js
+++ b/(Extension)/Resources/background.js
@@ -15,8 +15,8 @@ import {
    getPermission,
    setPermission,
    feature,
-} from './utils';
-import { saveEvent } from './db';
+} from './utilities/utils';
+import { saveEvent } from './utilities/db';

 const storage = browser.storage.local;
 const log = msg => console.log('Background: ', msg);
@@ -51,6 +51,8 @@ browser.runtime.onMessage.addListener((message, _sender, sendResponse) => {
            return createDelegation(message.payload);
        case 'calcPubKey':
            return Promise.resolve(getPublicKey(message.payload));
+        case 'npubEncode':
+            return Promise.resolve(nip19.npubEncode(message.payload));

        // window.nostr
        case 'getPubKey':
@@ -116,7 +118,7 @@ async function ask(uuid, { kind, host, payload }) {
    });
    let tab = await browser.tabs.getCurrent();
    let p = await browser.tabs.create({
-        url: `/permission.html?${qs.toString()}`,
+        url: `/permission/permission.html?${qs.toString()}`,
        openerTabId: tab.id,
    });
    prompt.tabId = p.id;
--- a/(Extension)/Resources/event_history/event_history.html
+++ b/(Extension)/Resources/event_history/event_history.html
@@ -5,9 +5,9 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script defer src="event_log.build.js"></script>
-  <link rel="stylesheet" href="options.build.css">
-  <title>Event Log</title>
+  <script defer src="event_history.build.js"></script>
+  <link rel="stylesheet" href="/options.build.css">
+  <title>Event History</title>

  <style>
    label {
@@ -18,10 +18,10 @@

 <body class="text-fuchsia-900 p-3.5 lg:p-32" x-data="eventLog">
  <p>
-    <a href="options.html" class="border-none hover:underline">← Back</a>
+    <a href="/options.html" class="border-none hover:underline">← Back</a>
  </p>

-  <h1 class="section-header">Event Log</h1>
+  <h1 class="section-header">Event History</h1>

  <div class="section">
    <div class="section-header">Filters</div>
@@ -52,17 +52,17 @@

      <div></div>

-      <div x-show="view === 'created_at'">
+      <div x-show="view === 'created_at'" x-cloak>
        <label for="fromCreatedAt">From</label>
        <input type="date" id="fromCreatedAt" x-model="fromCreatedAt" class="input" @change="reload">
      </div>

-      <div x-show="view === 'created_at'">
+      <div x-show="view === 'created_at'" x-cloak>
        <label for="toCreatedAt">To</label>
        <input type="date" id="toCreatedAt" x-model="toCreatedAt" class="input" @change="reload">
      </div>

-      <div x-show="view === 'kind'">
+      <div x-show="view === 'kind'" x-cloak>
        <label for="kindShortcut">Quick Select</label>
        <select id="kindShortcut" class="input" @change="quickKindSelect" x-model="quickKind">
          <option></option>
@@ -72,17 +72,17 @@
        </select>
      </div>

-      <div x-show="view === 'kind'">
+      <div x-show="view === 'kind'" x-cloak>
        <label for="fromKind">From</label>
        <input type="number" id="fromKind" x-model.number="fromKind" class="input" @change="reload">
      </div>

-      <div x-show="view === 'kind'">
+      <div x-show="view === 'kind'" x-cloak>
        <label for="toKind">To</label>
        <input type="number" id="toKind" x-model.number="toKind" class="input" @change="reload">
      </div>

-      <div x-show="view === 'host'">
+      <div x-show="view === 'host'" x-cloak>
        <label for="host">Host</label>
        <select id="host" class="input" x-model="host" @change="reload">
          <option value=""></option>
@@ -92,7 +92,7 @@
        </select>
      </div>

-      <div x-show="view === 'pubkey'">
+      <div x-show="view === 'pubkey'" x-cloak>
        <label for="profiles">Profiles</label>
        <select id="profiles" class="input" x-model="profile" @change="pkFromProfile">
          <option value=""></option>
@@ -102,7 +102,7 @@
        </select>
      </div>

-      <div x-show="view === 'pubkey'">
+      <div x-show="view === 'pubkey'" x-cloak>
        <label for="pubkey">Pubkey</label>
        <input type="text" class="input" x-model="pubkey" @input.debounce="reload">
      </div>
@@ -114,6 +114,7 @@
    </div>
  </div>

+  <div class="text-sm italic mt-1 text-right">Click/tap event body to copy the raw event.</div>

  <template x-for="(event, index) in events">
    <div class="mt-3 border-solid border border-fuchsia-700 rounded-lg">
@@ -125,11 +126,17 @@
        <div class="flex-1 w-64 p-4" x-text="formatKind(event.event.kind)"></div>
      </div>

-      <pre class="rounded-b-lg bg-slate-200 text-sm md:text-xl" x-html="highlight(event)" x-show="selected === index"
-        x-transition:enter.opacity.delay.75ms x-transition:leave.opacity>
-      </pre>
+      <div @click.prevent="copyEvent(index)" class="cursor-pointer">
+        <pre class="rounded-b-lg bg-slate-200 text-sm md:text-xl" x-html="highlight(event)" x-show="selected === index"
+          x-transition:enter.opacity.delay.75ms x-transition:leave.opacity x-cloak>
+        </pre>
+
+      </div>
    </div>
  </template>
+  <div class="fixed top-0 right-0 bg-fuchsia-800 rounded-md p-4 text-white m-8 drop-shadow-md" x-show="copied" x-cloack>
+    Event copied!
+  </div>
 </body>

 </html>
--- a/(Extension)/Resources/event_history/event_history.js
+++ b/(Extension)/Resources/event_history/event_history.js
@@ -1,9 +1,8 @@
 import Alpine from 'alpinejs';
 import { deleteDB } from 'idb';
 import jsonFormatHighlight from 'json-format-highlight';
-import { getPublicKey } from 'nostr-tools';
-import { downloadAllContents, getHosts, sortByIndex } from './db';
-import { getProfiles, KINDS } from './utils';
+import { downloadAllContents, getHosts, sortByIndex } from '../utilities/db';
+import { getProfiles, KINDS } from '../utilities/utils';

 const TOMORROW = new Date();
 TOMORROW.setDate(TOMORROW.getDate() + 1);
@@ -20,6 +19,7 @@ Alpine.data('eventLog', () => ({
    profile: '',
    pubkey: '',
    selected: null,
+    copied: false,

    // date view
    fromCreatedAt: '2008-10-31',
@@ -41,14 +41,19 @@ Alpine.data('eventLog', () => ({
            this.sort === 'asc',
            this.max
        );
-        this.events = events;
+        this.events = events.map(e => ({ ...e, copied: false }));
        getHosts().then(hosts => (this.allHosts = hosts));
        const profiles = await getProfiles();
        console.log(profiles);
-        this.allProfiles = profiles.map(profile => ({
-            name: profile.name,
-            pubkey: getPublicKey(profile.privKey),
-        }));
+        this.allProfiles = await Promise.all(
+            profiles.map(async profile => ({
+                name: profile.name,
+                pubkey: await browser.runtime.sendMessage({
+                    kind: 'calcPubKey',
+                    payload: profile.privKey,
+                }),
+            }))
+        );
    },

    async saveAll() {
@@ -94,6 +99,13 @@ Alpine.data('eventLog', () => ({
        return k ? `${k[1]} (${kind})` : `Unknown (${kind})`;
    },

+    async copyEvent(index) {
+        let event = JSON.stringify(this.events[index]);
+        this.copied = true;
+        setTimeout(() => (this.copied = false), 1000);
+        await navigator.clipboard.writeText(event);
+    },
+
    // Properties

    get fromTime() {
--- a/(Extension)/Resources/experimental/experimental.html
+++ b/(Extension)/Resources/experimental/experimental.html
@@ -5,14 +5,14 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="options.build.css">
-  <script src="experimental.build.js" defer></script>
+  <link rel="stylesheet" href="/options.build.css">
+  <script src="/experimental/experimental.build.js" defer></script>
  <title>Experimental Features</title>
 </head>

 <body class="text-fuchsia-900 p-3.5 lg:p-32" x-data="experimental">
  <p>
-    <a href="options.html" class="border-none hover:underline">← Back</a>
+    <a href="/options.html" class="border-none hover:underline">← Back</a>
  </p>
  <h1 class="text-3xl lg:text-6xl font-bold md:text-center">Experimental Features</h1>
  <p class="mt-3 text-center font-bold italic">
--- a/(Extension)/Resources/experimental/experimental.js
+++ b/(Extension)/Resources/experimental/experimental.js
--- a/(Extension)/Resources/manifest.json
+++ b/(Extension)/Resources/manifest.json
@@ -50,9 +50,13 @@
                "options.build.js",
                "options.build.css",
                "options.html",
-                "delegation_wizard.html",
-                "delegation_wizard.build.js",
-                "delegation_wizard.build.css"
+                "wizards/delegation/delegation.html",
+                "wizards/delegation/delegation.build.js",
+                "wizards/delegation/delegation.build.css",
+                "experimental/experimental.html",
+                "experimental/experimental.build.js",
+                "event_history/event_history.html",
+                "event_history/event_history.build.js"
            ],
            "matches": [
                "<all_urls>"
--- a/(Extension)/Resources/options.css
+++ b/(Extension)/Resources/options.css
@@ -2,6 +2,8 @@
@tailwind components;
@tailwind utilities;

+[x-cloak] { display: none; }
+
@layer components {
  .button {
    /* Colors */
--- a/(Extension)/Resources/options.html
+++ b/(Extension)/Resources/options.html
@@ -23,7 +23,7 @@
    </select>
    <div class="block md:inline p-3 pl-0 md:p-0">
      <button class="button" @click.prevent="newProfile">New</button>
-      <button class="button" @click.prevent="newDelegated" x-show="delegationActive">New Delegate</button>
+      <button class="button" @click.prevent="newDelegated" x-show="delegationActive" x-cloak>New Delegate</button>
      <button class="button" @click.prevent="deleteProfile">Delete</button>
    </div>
  </div>
@@ -40,17 +40,30 @@
        <input x-model="profileName" type="text" class="input" autocapitalize="off" autocomplete="off" spellcheck="off">
      </div>

+      <div class="mt-3" x-show="delegate" x-cloak>
+        <div class="mb-1">
+          <span class="text-red-700 font-bold">This is is a delegated profile.</span>
+        </div>
+
+        <label for="delegator-pub-key">Delegator Public Key</label>
+        <br>
+        <input id="delegator-pub-key" x-model="delegator" class="input" autocapitalize="off" autocomplete="off"
+          spellcheck="off" :disabled="delegate">
+      </div>
+
      <div class="mt-3">
        <label for="priv-key">Private Key</label>
        <br>
-        <input x-model="privKey" type="text" class="input" :class="validKeyClass" autocapitalize="off"
-          autocomplete="off" spellcheck="off">
+        <input x-model="privKey" :type="visibilityClass" class="input" :class="validKeyClass" autocapitalize="off"
+          autocomplete="off" spellcheck="off" :disabled="delegate">
+        <a href="" @click.prevent="visible = !visible" x-text="(visible && 'Hide') || 'Show'" class="border-none"></a>
      </div>

      <div class="mt-3">
        <label for="pub-key">Public Key</label>
        <br>
        <input x-model="pubKey" type="text" class="input" disabled>
+        <a href="" class="border-none" @click.prevent="copyPubKey" x-text="copied ? 'Copied!' : 'Copy'"></a>
      </div>

      <div class="mt-3">
@@ -95,7 +108,7 @@
      </div>
    </template>

-    <div class="mt-3" x-show="hasRecommendedRelays">
+    <div class="mt-3" x-show="hasRecommendedRelays" x-cloak>
      <select x-model="recommendedRelay" class="input">
        <option value="" disabled selected>Recommended Relays</option>
        <template x-for="relay in recommendedRelays">
@@ -109,7 +122,7 @@
    <div class="block md:inline p-3 pl-0 md:p-0">
      <button class="button" @click="await addRelay()">Add</button>
    </div>
-    <div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError"></div>
+    <div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError" x-cloak></div>
  </div>


@@ -132,9 +145,9 @@
      </select>
    </div>

-    <p x-show="permHosts.length === 0" class="font-bold mt-3">You have not remembered any app requests yet.</p>
+    <p x-show="permHosts.length === 0" x-cloak class="font-bold mt-3">You have not remembered any app requests yet.</p>

-    <table class="mt-3 text-xs md:text-base table-fixed" x-show="hostPerms.length > 0">
+    <table class="mt-3 text-xs md:text-base table-fixed" x-show="hostPerms.length > 0" x-cloak>
      <thead class="font-bold text-lg">
        <td class="p-2 text-center">App Request</td>
        <td class="p-2 text-center">Action</td>
@@ -161,9 +174,10 @@
  </div>

  <div class="mt-6">
-    <a href="experimental.html" class="border-none hover:underline">Experimental features →</a>
+    <a href="experimental/experimental.html" class="border-none hover:underline">Experimental
+      features →</a>
    <br>
-    <a href="event_log.html" class="border-none hover:underline">Event log →</a>
+    <a href="event_history/event_history.html" class="border-none hover:underline">Event history →</a>
  </div>
 </body>

--- a/(Extension)/Resources/options.js
+++ b/(Extension)/Resources/options.js
@@ -17,10 +17,15 @@ import {
    humanPermission,
    validateKey,
    feature,
-} from './utils';
+    getDelegator,
+} from './utilities/utils';

 const log = console.log;

+function go(url) {
+    browser.tabs.update({ url: browser.runtime.getURL(url) });
+}
+
 Alpine.data('options', () => ({
    profileNames: ['---'],
    profileIndex: 0,
@@ -38,7 +43,12 @@ Alpine.data('options', () => ({
    permHosts: [],
    hostPerms: [],
    delegationActive: false,
+    visible: false,
+    delegate: false,
+    delegator: '',
+    copied: false,
    setPermission,
+    go,

    async init(watch = true) {
        log('Initialize backend.');
@@ -78,6 +88,7 @@ Alpine.data('options', () => ({
        await this.getNpub();
        await this.getRelays();
        await this.getPermissions();
+        await this.getDelegate();
    },

    // Profile functions
@@ -106,6 +117,15 @@ Alpine.data('options', () => ({
        this.profileIndex = await getProfileIndex();
    },

+    async getDelegate() {
+        let [delegate, delegator] = await getDelegator(this.profileIndex);
+        this.delegate = delegate;
+        this.delegator = await browser.runtime.sendMessage({
+            kind: 'npubEncode',
+            payload: delegator,
+        });
+    },
+
    async newProfile() {
        let newIndex = await newProfile();
        await this.getProfileNames();
@@ -113,7 +133,9 @@ Alpine.data('options', () => ({
    },

    newDelegated() {
-        window.location = browser.runtime.getURL('delegation_wizard.html');
+        window.location = browser.runtime.getURL(
+            'wizards/delegation/delegation.html'
+        );
    },

    async deleteProfile() {
@@ -127,6 +149,14 @@ Alpine.data('options', () => ({
        }
    },

+    async copyPubKey() {
+        await navigator.clipboard.writeText(this.pubKey);
+        this.copied = true;
+        setTimeout(() => {
+            this.copied = false;
+        }, 1500);
+    },
+
    // Key functions

    async saveProfile() {
@@ -292,6 +322,10 @@ Alpine.data('options', () => ({
            ? ''
            : 'ring-2 ring-rose-500 focus:ring-2 focus:ring-rose-500 border-transparent focus:border-transparent';
    },
+
+    get visibilityClass() {
+        return this.visible ? 'text' : 'password';
+    },
 }));

 Alpine.start();
--- a/(Extension)/Resources/permission/permission.html
+++ b/(Extension)/Resources/permission/permission.html
@@ -6,7 +6,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="permission.build.js"></script>
-  <link rel="stylesheet" href="options.build.css">
+  <link rel="stylesheet" href="/options.build.css">
  <title>Permission Requested</title>
 </head>

@@ -35,7 +35,7 @@
      <button class="button" @click="await allow()">Allow</button>
      <button class="button" @click="await deny()">Deny</button>
      <input class="checkbox" type="checkbox" id="remember" x-model="remember">
-      <label for="remember">Remeber selection<span x-show="isSigningEvent"> (by event kind)</span></label>
+      <label for="remember">Remeber selection<span x-show="isSigningEvent" x-cloak> (by event kind)</span></label>
    </div>
  </div>
 </body>
--- a/(Extension)/Resources/permission/permission.js
+++ b/(Extension)/Resources/permission/permission.js
@@ -1,6 +1,6 @@
 import Alpine from 'alpinejs';
 import jsonFormatHighlight from 'json-format-highlight';
-import { KINDS } from './utils';
+import { KINDS } from '../utilities/utils';

 storage = browser.storage.local;

--- a/(Extension)/Resources/popup.html
+++ b/(Extension)/Resources/popup.html
@@ -21,13 +21,14 @@
        </div>
    </div>

-    <div class="relay" x-show="relayCount < 1">
+    <div class="relay" x-show="relayCount < 1 && showRelayReminder" x-cloak>
        <span>
            You do not have any relays setup for this profile. Would you like to add some recommended
            relays now?
        </span>
        <br>
        <button class="button" @click="await addRelays()">Add Relays</button>
+        <button class="button" @click="noThanks">No Thanks</button>
    </div>

    <div class="help">
--- a/(Extension)/Resources/popup.js
+++ b/(Extension)/Resources/popup.js
@@ -6,7 +6,9 @@ import {
    RECOMMENDED_RELAYS,
    saveRelays,
    initialize,
-} from './utils';
+    relayReminder,
+    toggleRelayReminder,
+} from './utilities/utils';
 import Alpine from 'alpinejs';
 window.Alpine = Alpine;

@@ -16,6 +18,7 @@ Alpine.data('popup', () => ({
    profileNames: ['Default'],
    profileIndex: 0,
    relayCount: 0,
+    showRelayReminder: true,

    async init() {
        log('Initializing backend.');
@@ -25,6 +28,7 @@ Alpine.data('popup', () => ({
            await this.loadNames();
            await this.setProfileIndex();
            await this.countRelays();
+            await this.checkRelayReminder();
        });

        // Even though loadProfileIndex will immediately trigger a profile refresh, we still
@@ -35,6 +39,7 @@ Alpine.data('popup', () => ({
        await this.loadNames();
        await this.loadProfileIndex();
        await this.countRelays();
+        await this.checkRelayReminder();
    },

    async setProfileIndex() {
@@ -63,6 +68,10 @@ Alpine.data('popup', () => ({
        this.relayCount = relays.length;
    },

+    async checkRelayReminder() {
+        this.showRelayReminder = await relayReminder();
+    },
+
    async addRelays() {
        let relays = RECOMMENDED_RELAYS.map(r => ({
            url: r.href,
@@ -72,6 +81,11 @@ Alpine.data('popup', () => ({
        await saveRelays(this.profileIndex, relays);
        await this.countRelays();
    },
+
+    async noThanks() {
+        await toggleRelayReminder();
+        this.showRelayReminder = false;
+    },
 }));

 Alpine.start();
--- a/(Extension)/Resources/utilities/db.js
+++ b/(Extension)/Resources/utilities/db.js
--- a/(Extension)/Resources/utilities/utils.js
+++ b/(Extension)/Resources/utilities/utils.js
@@ -1,25 +1,31 @@
-const DB_VERSION = 2;
+const DB_VERSION = 3;
 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'),
+    new URL('wss://nos.lol'),
+    new URL('wss://brb.io'),
+    new URL('wss://nostr.orangepill.dev'),
 ];
 // prettier-ignore
 export const KINDS = [
-    [0,  'Metadata',                    'https://github.com/nostr-protocol/nips/blob/master/01.md'],
-    [1,  'Text',                        'https://github.com/nostr-protocol/nips/blob/master/01.md'],
-    [2,  'Recommend Relay',             'https://github.com/nostr-protocol/nips/blob/master/01.md'],
-    [3,  'Contacts',                    'https://github.com/nostr-protocol/nips/blob/master/02.md'],
-    [4,  'Encrypted Direct Messages',   'https://github.com/nostr-protocol/nips/blob/master/04.md'],
-    [5,  'Event Deletion',              'https://github.com/nostr-protocol/nips/blob/master/09.md'],
-    [7,  'Reaction',                    'https://github.com/nostr-protocol/nips/blob/master/25.md'],
-    [40, 'Channel Creation',            'https://github.com/nostr-protocol/nips/blob/master/28.md'],
-    [41, 'Channel Metadata',            'https://github.com/nostr-protocol/nips/blob/master/28.md'],
-    [42, 'Channel Message',             'https://github.com/nostr-protocol/nips/blob/master/28.md'],
-    [43, 'Channel Hide Message',        'https://github.com/nostr-protocol/nips/blob/master/28.md'],
-    [44, 'Channel Mute User',           'https://github.com/nostr-protocol/nips/blob/master/28.md'],
+    [0,         'Metadata',                    'https://github.com/nostr-protocol/nips/blob/master/01.md'],
+    [1,         'Text',                        'https://github.com/nostr-protocol/nips/blob/master/01.md'],
+    [2,         'Recommend Relay',             'https://github.com/nostr-protocol/nips/blob/master/01.md'],
+    [3,         'Contacts',                    'https://github.com/nostr-protocol/nips/blob/master/02.md'],
+    [4,         'Encrypted Direct Messages',   'https://github.com/nostr-protocol/nips/blob/master/04.md'],
+    [5,         'Event Deletion',              'https://github.com/nostr-protocol/nips/blob/master/09.md'],
+    [7,         'Reaction',                    'https://github.com/nostr-protocol/nips/blob/master/25.md'],
+    [40,        'Channel Creation',            'https://github.com/nostr-protocol/nips/blob/master/28.md'],
+    [41,        'Channel Metadata',            'https://github.com/nostr-protocol/nips/blob/master/28.md'],
+    [42,        'Channel Message',             'https://github.com/nostr-protocol/nips/blob/master/28.md'],
+    [43,        'Channel Hide Message',        'https://github.com/nostr-protocol/nips/blob/master/28.md'],
+    [44,        'Channel Mute User',           'https://github.com/nostr-protocol/nips/blob/master/28.md'],
+    [1984,      'Reporting',                   'https://github.com/nostr-protocol/nips/blob/master/56.md'],
+    [9734,      'Zap Request',                 'https://github.com/nostr-protocol/nips/blob/master/57.md'],
+    [9735,      'Zap',                         'https://github.com/nostr-protocol/nips/blob/master/57.md'],
+    [22242,     'Client Authentication',       'https://github.com/nostr-protocol/nips/blob/master/42.md'],
+    [30023,     'Long-Form Content',           'https://github.com/nostr-protocol/nips/blob/master/23.md'],
 ];

 export async function initialize() {
@@ -49,6 +55,14 @@ async function migrate(version, goal) {
        await storage.set({ profiles });
        return version + 1;
    }
+
+    if (version === 2) {
+        console.log('Migrating to version 3.');
+        let profiles = await getProfiles();
+        profiles.forEach(profile => (profile.relayReminder = true));
+        await storage.set({ profiles });
+        return version + 1;
+    }
 }

 export async function getProfiles() {
@@ -107,6 +121,7 @@ export async function generateProfile(name = 'Default') {
        hosts: {},
        relays: [],
        delegate: false,
+        relayReminder: true,
    };
 }

@@ -228,3 +243,23 @@ export async function feature(name) {
    let f = await browser.storage.local.get({ [fname]: false });
    return f[fname];
 }
+
+export async function relayReminder() {
+    let index = await getProfileIndex();
+    let profile = await getProfile(index);
+    return profile.relayReminder;
+}
+
+export async function toggleRelayReminder() {
+    let index = await getProfileIndex();
+    let profiles = await getProfiles();
+    profiles[index].relayReminder = false;
+    await storage.set({ profiles });
+}
+
+export async function getDelegator(index) {
+    let profiles = await getProfiles();
+    let profile = profiles[index];
+    console.log(profile);
+    return [profile.delegate, profile.delegator];
+}
--- a/(Extension)/Resources/wizards/delegation/delegation.html
+++ b/(Extension)/Resources/wizards/delegation/delegation.html
@@ -5,8 +5,8 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script defer src="delegation_wizard.build.js"></script>
-  <link rel="stylesheet" href="options.build.css">
+  <script defer src="delegation.build.js"></script>
+  <link rel="stylesheet" href="/options.build.css">

  <title>Delegation Wizard</title>
 </head>
--- a/(Extension)/Resources/wizards/delegation/delegation.js
+++ b/(Extension)/Resources/wizards/delegation/delegation.js
@@ -1,5 +1,9 @@
 import Alpine from 'alpinejs';
-import { generateProfile, getProfiles, validateKey } from './utils';
+import {
+    generateProfile,
+    getProfiles,
+    validateKey,
+} from '../../utilities/utils';
 import { getPublicKey, nip26, nip19 } from 'nostr-tools';

 const storage = browser.storage.local;