Add a copy button for the Lightning address

Same as on profile settings page.

Gemfile

@@ -58,6 +58,9 @@ gem 'discourse_api'
 gem "sentry-ruby"
 gem "sentry-rails"
 
+# Lightning
+gem "lnurl"
+
 group :development, :test do
   # Use sqlite3 as the database for Active Record
   gem 'sqlite3', '~> 1.4'

Gemfile.lock

@@ -180,6 +180,8 @@ GEM
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
+    lnurl (1.0.1)
+      bech32 (~> 1.1)
     lockbox (1.1.0)
     loofah (2.19.0)
       crass (~> 1.0.2)
@@ -409,6 +411,7 @@ DEPENDENCIES
   letter_opener
   letter_opener_web
   listen (~> 3.2)
+  lnurl
   lockbox
   net-ldap
   pagy (~> 6.0, >= 6.0.2)

app/controllers/services/lightning_controller.rb

@@ -1,4 +1,5 @@
 require "rqrcode"
+require "lnurl"
 
 class Services::LightningController < ApplicationController
   before_action :authenticate_user!
@@ -8,9 +9,55 @@ class Services::LightningController < ApplicationController
 
   def index
     @wallet_url = "lndhub://#{current_user.ln_account}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}"
+    initialize_lndhub_qr_code
+  end
 
-    qrcode = RQRCode::QRCode.new(@wallet_url)
-    @svg = qrcode.as_svg(
+  def transactions
+    @transactions = fetch_transactions
+  end
+
+  def qr_lnurlp
+    lnurlp_url = "https://kosmos.org/.well-known/lnurlp/#{current_user.cn}"
+    lnurlp_bech32 = Lnurl.new(lnurlp_url).to_bech32
+    qr_code = RQRCode::QRCode.new("lightning:" + lnurlp_bech32)
+
+    if params[:format] == "svg"
+      qr_svg = qr_code.as_svg(
+        color: "000",
+        shape_rendering: "crispEdges",
+        module_size: 6,
+        standalone: true,
+        use_path: true,
+        svg_attributes: {
+          class: 'inline-block'
+        }
+      )
+      send_data(
+        qr_svg,
+        filename: "bitcoin-lightning-#{current_user.address}.svg",
+        type: "image/svg+xml"
+      )
+    elsif params[:format] == "png"
+      qr_png = qr_code.as_png(
+        fill: "white",
+        color: "black",
+        size: 1024,
+      )
+      send_data(
+        qr_png,
+        filename: "bitcoin-lightning-#{current_user.address}.png",
+        type: "image/png"
+      )
+    else
+      http_status :not_found
+    end
+  end
+
+  private
+
+  def initialize_lndhub_qr_code
+    qr_code = RQRCode::QRCode.new(@wallet_url)
+    @lndhub_qr_svg = qr_code.as_svg(
       color: "000",
       shape_rendering: "crispEdges",
       module_size: 6,
@@ -22,12 +69,6 @@ class Services::LightningController < ApplicationController
     )
   end
 
-  def transactions
-    @transactions = fetch_transactions
-  end
-
-  private
-
   def authenticate_with_lndhub(options={})
     if session[:ln_auth_token].present? && !options[:force_reauth]
       @ln_auth_token = session[:ln_auth_token]

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

@@ -7,13 +7,25 @@
 
   <section>
     <h3>Lightning Address</h3>
-    <p>
+    <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>
-      <strong><%= current_user.address %></strong>
+    <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-blue 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-white h-4 w-4 inline" } %>
+        </span>
+        <span class="content-active hidden">
+          <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+        </span>
+      </button>
     </p>
   </section>
 
@@ -39,7 +51,7 @@
       <button id="hide-setup-code" class="hidden btn-md btn-blue w-full sm:w-auto">Hide setup QR code</button>
     </p>
     <p id="setup-code" class="hidden my-10 w-full text-center">
-      <%= raw @svg %>
+      <%= raw @lndhub_qr_svg %>
     </p>
   </section>
 
@@ -88,6 +100,24 @@
       </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 %>
 
 <script type="text/javascript">

config/routes.rb

@@ -24,6 +24,7 @@ Rails.application.routes.draw do
     resources :lightning, only: [:index] do
       collection do
         get 'transactions'
+        get 'qr_lnurlp'
       end
     end
   end