Add more content/help to wallet page

* Lighting Address info
* Improve explanation for wallet apps, add Alby

app/views/wallet/index.html.erb

@@ -19,25 +19,69 @@
 </section>
 
 <section>
-  <h3>Blue Wallet</h3>
-  <p class="mb-6">
-    You can connect
-    <%= link_to "Blue Wallet", "https://bluewallet.io",
-          class: "ks-text-link", target: "_blank" %>
-    (Android or iOS) to your Kosmos lightning wallet. In order to do so,
-    scan the setup QR code from the Import Wallet screen in the app.
+  <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 class="mb-6">
-    <button id="show-setup-code" class="btn-sm btn-blue">Show setup code</button>
-    <button id="hide-setup-code" class="btn-sm btn-blue hidden">Hide setup code</button>
-    <span class="mx-2">or</span>
-    <button id="copy-setup-code" class="btn-sm btn-blue">Copy setup code</button>
+  <p>
+    <strong><%= current_user.address %></strong>
   </p>
-  <p id="setup-code" class="hidden">
+</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("/assets/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">
+      Scan the setup QR code from the Import Wallet screen in the app.
+    </p>
+    <h4 class="md:col-span-3">
+      <a href="https://getalby.com/" class="ks-text-link text-xl"
+         title="Alby" target="_blank">
+        <%= image_tag("/assets/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');
@@ -50,7 +94,7 @@
       setupCode.classList.remove('hidden');
       buttonHide.classList.remove('hidden');
       buttonShow.classList.add('hidden');
-      window.scrollTo(0, document.body.scrollHeight);
+      setupCode.scrollIntoView({behavior: "smooth", block: "nearest"});
     });
 
     buttonHide.addEventListener('click', function(ev) {