akkounts/app/views/services/lightning/index.html.erb

<%= render HeaderComponent.new(title: "Lightning Network") %>

<%= render MainSimpleComponent.new do %>
  <%= render WalletSummaryComponent.new(balance: @balance) %>

  <%= render partial: "shared/tabnav_lightning" %>

  <section>
    <h3>Lightning Address</h3>
    <p class="mb-6">
      Your Kosmos user address is also a
      <a class="ks-text-link" href="https://lightningaddress.com/" target="_blank">Lightning Address</a>!
      The easiest way to receive sats is by just giving out your address:
    </p>
    <p data-controller="clipboard" class="flex gap-1 sm:w-2/5">
      <input type="text" id="user_address" class="grow"
             value=<%= current_user.address %> disabled="disabled"
             data-clipboard-target="source" />
      <button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
              data-clipboard-target="trigger" data-action="clipboard#copy"
              title="Copy to clipboard">
        <span class="content-initial">
          <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
        </span>
        <span class="content-active hidden">
          <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
        </span>
      </button>
    </p>
  </section>

  <section data-controller="modal" data-action="keydown.esc->modal#close">
    <h3>Wallet Apps</h3>
    <p>
      You can connect various wallet apps to your Kosmos account. This allows
      you to both receive and send sats. Any wallet that supports
      <a href="https://bluewallet.io/lndhub/" class="ks-text-link" target="_blank">LNDHub</a>
      accounts should be able to add/import your account using our setup
      code/URL:
    </p>
    <p data-controller="clipboard" class="my-6 text-center md:text-left">
      <input type="text" disabled class="hidden" aria-hidden=true
             value="<%= @wallet_setup_url %>" data-clipboard-target="source" />
      <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto"
              data-action="clipboard#copy" data-clipboard-target="trigger">
        <span class="content-initial">Copy setup code/URL</span>
        <span class="content-active hidden">Copied ✔</span>
      </button>
      <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
      <button data-action="click->modal#open" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
    </p>
    <%= render QrCodeModalComponent.new(qr_content: @wallet_setup_url) %>
  </section>

  <section>
    <h3>Recommended Apps</h3>
    <div class="w-full grid grid-cols-1 gap-y-4 md:grid-cols-12
                md:gap-y-6 md:gap-x-4 md:items-center">
      <h4 class="md:col-span-3">
        <a href="https://getalby.com/" class="ks-text-link text-xl"
           title="Alby" target="_blank">
          <%= image_tag("/img/logos/alby.svg", class: 'h-16') %>
        </a>
      </h4>
      <p class="md:col-span-4 mb-0 text-gray-500">
        Firefox / Chrome (Opera, Brave, Chromium-based browsers)
      </p>
      <p class="md:col-span-5 mb-0">
        Choose "LNDHub (Bluewallet)" in the connect dialog and paste the setup
        URL in the "LNDHub Export URI" field.
      </p>
      <h4 class="md:col-span-3 mt-4 mb:mt-0">
        <a href="https://bluewallet.io" class="ks-text-link text-xl"
           title="Blue Wallet" target="_blank">
          <%= image_tag("/img/logos/bluewallet.svg", class: 'h-16') %>
        </a>
      </h4>
      <p class="md:col-span-4 mb-0 text-gray-500">
        Android / iOS / macOS
      </p>
      <p class="md:col-span-5 mb-0">
        When adding a wallet, choose "Import wallet" on the bottom of the screen,
        then scan the setup QR code.
      </p>
      <h4 class="md:col-span-3 mt-4 mb:mt-0">
        <a href="https://zeusln.app" class="ks-text-link text-xl"
           title="Zeus" target="_blank">
          <%= image_tag("/img/logos/zeus.svg", class: 'h-16') %>
        </a>
      </h4>
      <p class="md:col-span-4 mb-0 text-gray-500">
        Android / iOS
      </p>
      <p class="md:col-span-5 mb-0">
        On first launch, tap "Scan node config" and scan the setup QR code.
        Add your Lightning address as a nickname, then "Save node config".
      </p>
    </div>
  </section>

  <section class="mb-12">
    <h3>QR Code for Donations/Tips</h3>
    <p>
      You can print out or publish a QR code for people to scan with their
      wallet apps, so they can send you sats without a direct personal
      interaction (for example at a concert, or on your website).
    </p>
    <p class="my-6 text-center md:text-left">
      <%= link_to "Download SVG file",
                  qr_lnurlp_services_lightning_index_path(format: "svg"),
                  class: "btn-md btn-blue w-full sm:w-auto"%>
      <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
      <%= link_to "Download PNG file",
                  qr_lnurlp_services_lightning_index_path(format: "png"),
                  class: "btn-md btn-blue w-full sm:w-auto"%>
    </p>
  </section>
<% end %>