Rename Wallet to Lightning Network, move to Services
This commit is contained in:
Râu Cao
115
app/views/services/lightning/index.html.erb
Normal file
115
app/views/services/lightning/index.html.erb
Normal file
@@ -0,0 +1,115 @@
|
||||
<%= render HeaderComponent.new(title: "Lightning Network") %>
|
||||
|
||||
<%= render MainSimpleComponent.new do %>
|
||||
<%= render WalletSummaryComponent.new(balance: @balance) %>
|
||||
|
||||
<%= render partial: "shared/tabnav_lightning" %>
|
||||
|
||||
<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 data-controller="clipboard" class="my-6 text-center md:text-left">
|
||||
<input type="text" disabled class="hidden" aria-hidden=true
|
||||
value="<%= @wallet_url%>" data-clipboard-target="source" />
|
||||
<button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto"
|
||||
data-action="clipboard#copy" data-clipboard-target="trigger">
|
||||
<span class="content-initial">Copy setup code/URL</span>
|
||||
<span class="content-active hidden">Copied ✔</span>
|
||||
</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 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 @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://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>
|
||||
<h4 class="md:col-span-3 mt-4 mb:mt-0">
|
||||
<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 mt-4 mb:mt-0">
|
||||
<a href="https://zeusln.app" class="ks-text-link text-xl"
|
||||
title="Zeus" target="_blank">
|
||||
<%= image_tag("/img/logos/zeus.svg", class: 'h-16') %>
|
||||
</a>
|
||||
</h4>
|
||||
<p class="md:col-span-4 mb-0 text-gray-500">
|
||||
Android / iOS
|
||||
</p>
|
||||
<p class="md:col-span-5 mb-0">
|
||||
On first launch, tap "Scan node config" and scan the setup QR code.
|
||||
Add your Lightning address as a nickname, then "Save node config".
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<% 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>
|
||||
59
app/views/services/lightning/transactions.html.erb
Normal file
59
app/views/services/lightning/transactions.html.erb
Normal file
@@ -0,0 +1,59 @@
|
||||
<%= render HeaderComponent.new(title: "Lightning Network") %>
|
||||
|
||||
<%= render MainSimpleComponent.new do %>
|
||||
<%= render WalletSummaryComponent.new(balance: @balance) %>
|
||||
|
||||
<%= render partial: "shared/tabnav_lightning" %>
|
||||
|
||||
<section>
|
||||
<h3 class="hidden">Transactions</h3>
|
||||
|
||||
<% if @transactions.any? %>
|
||||
<ul class="list-none">
|
||||
<% @transactions.each do |tx| %>
|
||||
<li class="py-4 md:py-4 grid gap-y-1 gap-x-2 grid-cols-4 border-b border-dotted border-gray-300">
|
||||
<h3 class="col-span-2 md:col-span-3 mb-0">
|
||||
<% if tx["type"] == "bitcoind_tx" %>
|
||||
<span class="inline-block">
|
||||
<%= render partial: "icons/link-2", locals: { custom_class: "text-emerald-500 h-4 w-4 mr-0.5" } %>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="inline-block">
|
||||
<%= render partial: "icons/zap", locals: { custom_class: "text-amber-500 h-4 w-4 mr-0.5" } %>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= tx["title"] %>
|
||||
</h3>
|
||||
<p class="col-span-2 md:col-span-1 mb-0 text-right">
|
||||
<span class="text-xl font-mono <%= tx["received"] ? "text-emerald-600" : "" %>">
|
||||
<%= tx["received"] ? "+" : "" %><%= number_with_delimiter tx["amount_sats"] %>
|
||||
<span class="hidden md:inline">sats</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="col-span-4 md:col-span-3 mb-0 text-gray-500">
|
||||
<%= tx["description"].present? ? tx["description"] : raw("<span class='text-gray-400'>No memo</span>") %>
|
||||
</p>
|
||||
<p class="col-span-4 md:col-span-1 md:text-right mb-0">
|
||||
<span class="col-span-2 md:col-span-1 text-sm text-gray-500">
|
||||
<%= tx["datetime"].strftime("%B %e, %H:%M") -%>
|
||||
<% if tx["fee"] && (tx["fee"] > 0) %>, Fee: <%= tx["fee"] %> sats<% end %>
|
||||
</span>
|
||||
</p>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% else %>
|
||||
<div class="text-center">
|
||||
<p class="mt-4 mb-12 inline-flex align-center items-center">
|
||||
<%= image_tag("/img/illustrations/undraw_digital_currency_qpak.svg", class: 'h-48') %>
|
||||
</p>
|
||||
<h3>
|
||||
No transactions yet
|
||||
</h3>
|
||||
<p class="text-gray-500">
|
||||
As soon as you start receiving sats, you will find some entries here.
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</section>
|
||||
<% end %>
|
||||
Reference in New Issue
Block a user