WIP Nostr onboarding

app/views/settings/_nostr.html.erb

@@ -1,46 +1,32 @@
-<section>
-  <h3>Nostr</h3>
-  <h4 class="mb-0">Public Key</h4>
-  <div data-controller="settings--nostr-pubkey"
-       data-settings--nostr-pubkey-user-address-value="<%= current_user.address %>"
-       data-settings--nostr-pubkey-site-value="<%= Setting.accounts_domain %>"
-       data-settings--nostr-pubkey-shared-secret-value="<%= session[:shared_secret] %>"
-       data-settings--nostr-pubkey-pubkey-hex-value="<%= current_user.nostr_pubkey %>">
-
-    <p class="<%= current_user.nostr_pubkey.present? ? '' : 'hidden' %> mt-2 flex gap-1">
+<div data-controller="settings--nostr-pubkey"
+     data-settings--nostr-pubkey-user-address-value="<%= current_user.address %>"
+     data-settings--nostr-pubkey-site-value="<%= Setting.accounts_domain %>"
+     data-settings--nostr-pubkey-shared-secret-value="<%= session[:shared_secret] %>"
+     data-settings--nostr-pubkey-pubkey-hex-value="<%= current_user.nostr_pubkey %>">
+  <section>
+    <h3>Nostr</h3>
+    <h4 class="mb-0">
+      Public Key
+    </h4>
+    <p class="<%= current_user.nostr_pubkey.present? ? '' : 'hidden' %> mt-2 flex gap-x-1">
       <input type="text" value="<%= current_user.nostr_pubkey_bech32 %>" disabled
              data-settings--nostr-pubkey-target="pubkeyBech32Input"
-             name="nostr_public_key" class="relative grow" />
+             name="nostr_public_key" class="w-full" />
       <%= link_to nostr_pubkey_settings_path,
-            class: 'btn-md btn-outline text-red-700 relative shrink-0',
+            class: 'btn-md btn-outline relative grow-0 shrink-0 text-red-700',
             data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } do %>
         Remove
       <% end %>
     </p>
 
     <% if current_user.nostr_pubkey.present? %>
-    <div class="rounded-md bg-blue-50 p-4">
-      <div class="flex">
-        <div class="flex-shrink-0">
-          <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
-          </svg>
-        </div>
-        <div class="ml-3 flex-1">
-          <p class="text-sm text-blue-800">
-            Your user address <strong><%= current_user.address %></strong> is
-            also a Nostr address now. Use your favorite Nostr app, or for
-            example <a href="http://metadata.nostr.com" target="_blank"
-              class="underline">metadata.nostr.com</a>, to add this
-            <strong>NIP-05</strong> address to your public profile.
-          </p>
-        </div>
-      </div>
-    </div>
+    <!-- <div> -->
+    <!--   Pubkey present -->
+    <!-- </div> -->
     <% else %>
     <p class="my-4">
-      If you use any apps on the Nostr network, you can verify your public key
-      with us in order to enable Nostr-specific features for your account.
+      Verify your Nostr public key with us in order to enable Nostr-specific
+      features for your account.
     </p>
     <% end %>
 
@@ -58,8 +44,8 @@
           </h3>
           <div class="mt-2 mb-0 text-sm text-blue-800">
             <p>
-              We recommend Alby, which you can also use for your Lightning
-              Wallet.
+              We recommend Alby, which you can also use a wallet for your
+              Lightning account.
             </p>
           </div>
           <div class="mt-4">
@@ -86,5 +72,113 @@
       </button>
     </p>
     <% end %>
-  </div>
-</section>
+  </section>
+
+  <% if current_user.nostr_pubkey.present? %>
+    <section>
+      <h3>Profile</h3>
+      <div data-settings--nostr-pubkey-target="profileStatus" class="mb-4">
+        <p class="status-green hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-emerald-500 %>">
+            <%= render "icons/check-circle" %>
+          </span>
+          <span>
+            You already have a profile for your public key
+          </span>
+        </p>
+        <p class="status-orange hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-amber-500 %>">
+            <%= render "icons/alert-octagon" %>
+          </span>
+          <span>
+            <strong><%= current_user.address %></strong> is not set as your Nostr address
+          </span>
+        </p>
+      </div>
+      <div data-settings--nostr-pubkey-target="profileStatusNip05" class="mb-4">
+        <p class="status-green hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-emerald-500 %>">
+            <%= render "icons/check-circle" %>
+          </span>
+          <span>
+            <strong><%= current_user.address %></strong> is set as your Nostr address
+          </span>
+        </p>
+        <p class="status-orange hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-amber-500 %>">
+            <%= render "icons/alert-octagon" %>
+          </span>
+          <span>
+            <strong><%= current_user.address %></strong> is not set as your Nostr address
+          </span>
+        </p>
+        <p class="status-red hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-amber-500 %>">
+            <%= render "icons/alert-octagon" %>
+          </span>
+          <span>
+            Your profile's Nostr address is not set to <strong><%= current_user.address %></strong> yet
+          </span>
+        </p>
+      </div>
+      <div data-settings--nostr-pubkey-target="profileStatusLud16">
+        <p class="status-green hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-emerald-500 %>">
+            <%= render "icons/check-circle" %>
+          </span>
+          <span>
+            <strong><%= current_user.address %></strong> is set as your Lightning address
+          </span>
+        </p>
+        <p class="status-orange hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-amber-500 %>">
+            <%= render "icons/alert-octagon" %>
+          </span>
+          <span>
+            <strong><%= current_user.address %></strong> is not set as your Lightning address yet
+          </span>
+        </p>
+        <p class="status-red hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-amber-500 %>">
+            <%= render "icons/alert-octagon" %>
+          </span>
+          <span>
+            Your profile's Lightning address is not set to <strong><%= current_user.address %></strong> yet
+          </span>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h3>Relays</h3>
+      <div data-settings--nostr-pubkey-target="relayListStatus">
+        <p class="status-green hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-emerald-500 %>">
+            <%= render "icons/check-circle" %>
+          </span>
+          <span>
+            You have a relay list, and the Kosmos relay is part of it
+          </span>
+        </p>
+        <p class="status-orange hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-amber-500 %>">
+            <%= render "icons/alert-octagon" %>
+          </span>
+          <span>
+            The Kosmos relay is missing from your relay list
+          </span>
+        </p>
+        <p class="status-red hidden flex gap-x-4 items-center">
+          <span class="inline-block h-6 w-6 grow-0 text-amber-500 %>">
+            <%= render "icons/alert-octagon" %>
+          </span>
+          <span>
+            We could not find a relay list for your public key
+          </span>
+        </p>
+      </div>
+      <ul data-settings--nostr-pubkey-target="relayList">
+      </ul>
+    </section>
+  <% end %>
+</div>