Use modal component for LndHub setup code

This commit is contained in:
Râu Cao 2023-06-27 19:18:05 +02:00
parent c78df9e5f1
commit 8a570ce724
Signed by: raucao
GPG Key ID: 15E65F399D084BA9
2 changed files with 5 additions and 47 deletions

View File

@ -8,8 +8,7 @@ class Services::LightningController < ApplicationController
before_action :fetch_balance before_action :fetch_balance
def index def index
@wallet_url = "lndhub://#{current_user.ln_account}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}" @wallet_setup_url = "lndhub://#{current_user.ln_account}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}"
initialize_lndhub_qr_code
end end
def transactions def transactions
@ -56,20 +55,6 @@ class Services::LightningController < ApplicationController
private 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,
standalone: true,
use_path: true,
svg_attributes: {
class: 'inline-block'
}
)
end
def authenticate_with_lndhub(options={}) def authenticate_with_lndhub(options={})
if session[:ln_auth_token].present? && !options[:force_reauth] if session[:ln_auth_token].present? && !options[:force_reauth]
@ln_auth_token = session[:ln_auth_token] @ln_auth_token = session[:ln_auth_token]

View File

@ -29,7 +29,7 @@
</p> </p>
</section> </section>
<section> <section data-controller="modal">
<h3>Wallet Apps</h3> <h3>Wallet Apps</h3>
<p> <p>
You can connect various wallet apps to your Kosmos account. This allows You can connect various wallet apps to your Kosmos account. This allows
@ -40,19 +40,16 @@
</p> </p>
<p data-controller="clipboard" class="my-6 text-center md:text-left"> <p data-controller="clipboard" class="my-6 text-center md:text-left">
<input type="text" disabled class="hidden" aria-hidden=true <input type="text" disabled class="hidden" aria-hidden=true
value="<%= @wallet_url%>" data-clipboard-target="source" /> value="<%= @wallet_setup_url %>" data-clipboard-target="source" />
<button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto" <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto"
data-action="clipboard#copy" data-clipboard-target="trigger"> data-action="clipboard#copy" data-clipboard-target="trigger">
<span class="content-initial">Copy setup code/URL</span> <span class="content-initial">Copy setup code/URL</span>
<span class="content-active hidden">Copied ✔</span> <span class="content-active hidden">Copied ✔</span>
</button> </button>
<span class="mx-2 my-2 md:my-0 block md:inline">or</span> <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
<button id="show-setup-code" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button> <button data-action="click->modal#open" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
<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 @lndhub_qr_svg %>
</p> </p>
<%= render QrCodeModalComponent.new(qr_content: @wallet_setup_url) %>
</section> </section>
<section> <section>
@ -119,27 +116,3 @@
</p> </p>
</section> </section>
<% end %> <% end %>
<script type="text/javascript">
(function () {
const buttonShow = document.querySelector('#show-setup-code');
const buttonHide = document.querySelector('#hide-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');
});
})();
</script>