akkounts/app/views/wallet/index.html.erb

<section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
  <div class="md:col-span-8">
    <h2>Wallet</h2>
    <p>
      Send and receive sats via the Bitcoin Lightning Network.
    </p>
  </div>
  <div class="md:col-span-4 mt-4 md:mt-0">
    <p class="font-mono md:text-right mb-0 p-4 border border-gray-300 rounded-lg overflow-hidden">
    <% if @balance %>
      <span class="text-xl"><%= number_with_delimiter @balance %> sats</span><br>
      <span class="text-sm text-gray-500">Available balance</span>
    <% else %>
      <span class="text-xl">n/a sats</span><br>
      <span class="text-sm text-gray-500">Balance unavailable</span>
    <% end %>
    </p>
  </div>
</section>

<section>
  <h3>Lightning Address</h3>
  <p>
    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>
    <strong><%= current_user.address %></strong>
  </p>
</section>

<section>
  <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 class="my-6 text-center md:text-left">
    <button id="copy-setup-code" class="btn-md btn-blue">Copy setup code/URL</button>
    <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
    <button id="show-setup-code" class="btn-md btn-blue">Show setup QR code</button>
    <button id="hide-setup-code" class="btn-md btn-blue hidden">Hide setup QR code</button>
  </p>
  <p id="setup-code" class="hidden my-10 w-full text-center">
    <%= raw @svg %>
  </p>
</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://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">
      <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>
  </div>
</section>

<script type="text/javascript">
  (function () {
    const buttonShow = document.querySelector('#show-setup-code');
    const buttonHide = document.querySelector('#hide-setup-code');
    const buttonCopy = document.querySelector('#copy-setup-code');
    const setupCode = document.querySelector('#setup-code');

    buttonShow.addEventListener('click', function(ev) {
      ev.preventDefault();
      setupCode.classList.remove('hidden');
      buttonHide.classList.remove('hidden');
      buttonShow.classList.add('hidden');
      setupCode.scrollIntoView({behavior: "smooth", block: "nearest"});
    });

    buttonHide.addEventListener('click', function(ev) {
      ev.preventDefault();
      const el = document.querySelector('#setup-code');
      setupCode.classList.add('hidden');
      buttonHide.classList.add('hidden');
      buttonShow.classList.remove('hidden');
    });

    buttonCopy.addEventListener('click', function(ev) {
      ev.preventDefault();
      navigator.clipboard.writeText('<%= @wallet_url %>').then(() => {
        const buttonText = buttonCopy.innerText;
        buttonCopy.innerText = 'Copied ✔';
        setTimeout(() => {
          buttonCopy.innerText = buttonText;
        }, 2000);
      });
    });
  })();
</script>