116 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
			
		
		
	
	
			116 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
| <%= 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>
 |