akkounts/app/views/settings/_nostr.html.erb

<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="w-full" />
      <%= link_to nostr_pubkey_settings_path,
            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> -->
    <!--   Pubkey present -->
    <!-- </div> -->
    <% else %>
    <p class="my-4">
      Verify your Nostr public key with us in order to enable Nostr-specific
      features for your account.
    </p>
    <% end %>

    <div data-settings--nostr-pubkey-target="noExtension"
         class="hidden 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">
          <h3 class="mb-0 text-sm font-bold text-blue-800">
            No browser extension found
          </h3>
          <div class="mt-2 mb-0 text-sm text-blue-800">
            <p>
              We recommend Alby, which you can also use a wallet for your
              Lightning account.
            </p>
          </div>
          <div class="mt-4">
            <div class="-mx-2 -my-1.5 flex">
              <a href="https://getalby.com" target="_blank"
                 class="rounded-md bg-blue-50 px-2 py-1.5 text-sm
                        font-bold text-blue-800 hover:bg-blue-100
                        focus:outline-none focus:ring-2 focus:ring-blue-600
                        focus:ring-offset-2 focus:ring-offset-blue-50">
                Get Alby
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <% unless current_user.nostr_pubkey.present? %>
    <p class="mt-8">
      <button class="btn-md btn-gray w-full sm:w-auto" disabled
              data-settings--nostr-pubkey-target="setPubkey"
              data-action="settings--nostr-pubkey#setPubkey">
        Get public key from browser extension
      </button>
    </p>
    <% end %>
  </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>