akkounts/app/views/wallet/index.html.erb
Sebastian Kippe f1d3e3d8ec
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
Add button for copying lndhub setup code
closes #37
2021-12-15 14:54:44 +01:00

76 lines
2.6 KiB
Plaintext

<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>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.
</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" style="display: none;">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>
<p id="setup-code" style="display: none;">
<%= raw @svg %>
</p>
</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.style.display = 'block';
buttonShow.style.display = 'none';
buttonHide.style.display = 'inline-block';
window.scrollTo(0, document.body.scrollHeight);
});
buttonHide.addEventListener('click', function(ev) {
ev.preventDefault();
const el = document.querySelector('#setup-code');
setupCode.style.display = 'none';
buttonShow.style.display = 'inline-block';
buttonHide.style.display = 'none';
});
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>