From f1d3e3d8ecefa24884bb360541fd8f7886093ba6 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Wed, 15 Dec 2021 14:54:44 +0100
Subject: [PATCH 1/2] Add button for copying lndhub setup code

closes #37
---
 app/views/wallet/index.html.erb | 38 ++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/app/views/wallet/index.html.erb b/app/views/wallet/index.html.erb
index 13ff82d..1b9f7db 100644
--- a/app/views/wallet/index.html.erb
+++ b/app/views/wallet/index.html.erb
@@ -20,16 +20,18 @@
 
 <section>
   <h3>Blue Wallet</h3>
-  <p>
+  <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>
-    <a id="show-setup-code" class="ks-text-link cursor-pointer">Show setup code</a>
-    <a id="hide-setup-code" class="ks-text-link cursor-pointer" style="display: none;">Hide setup code</a>
+  <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 %>
@@ -38,24 +40,36 @@
 
 <script type="text/javascript">
   (function () {
-    const linkShow = document.querySelector('#show-setup-code');
-    const linkHide = document.querySelector('#hide-setup-code');
+    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');
 
-    linkShow.addEventListener('click', function(ev) {
+    buttonShow.addEventListener('click', function(ev) {
       ev.preventDefault();
       setupCode.style.display = 'block';
-      linkShow.style.display = 'none';
-      linkHide.style.display = 'block';
+      buttonShow.style.display = 'none';
+      buttonHide.style.display = 'inline-block';
       window.scrollTo(0, document.body.scrollHeight);
     });
 
-    linkHide.addEventListener('click', function(ev) {
+    buttonHide.addEventListener('click', function(ev) {
       ev.preventDefault();
       const el = document.querySelector('#setup-code');
       setupCode.style.display = 'none';
-      linkShow.style.display = 'block';
-      linkHide.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>

From 78aea5d608c25f4098f329c463c5980115fceb3b Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 16 Dec 2021 15:18:37 +0100
Subject: [PATCH 2/2] Use Tailwind classes to hide/show elements

---
 app/javascript/stylesheets/application.scss |  2 +-
 app/views/wallet/index.html.erb             | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
index 66d7945..dc76e0f 100644
--- a/app/javascript/stylesheets/application.scss
+++ b/app/javascript/stylesheets/application.scss
@@ -1,4 +1,4 @@
-// version 4
+// version 5
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
diff --git a/app/views/wallet/index.html.erb b/app/views/wallet/index.html.erb
index 1b9f7db..f87771e 100644
--- a/app/views/wallet/index.html.erb
+++ b/app/views/wallet/index.html.erb
@@ -29,11 +29,11 @@
   </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>
+    <button id="hide-setup-code" class="btn-sm btn-blue hidden">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;">
+  <p id="setup-code" class="hidden">
     <%= raw @svg %>
   </p>
 </section>
@@ -47,18 +47,18 @@
 
     buttonShow.addEventListener('click', function(ev) {
       ev.preventDefault();
-      setupCode.style.display = 'block';
-      buttonShow.style.display = 'none';
-      buttonHide.style.display = 'inline-block';
+      setupCode.classList.remove('hidden');
+      buttonHide.classList.remove('hidden');
+      buttonShow.classList.add('hidden');
       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';
+      setupCode.classList.add('hidden');
+      buttonHide.classList.add('hidden');
+      buttonShow.classList.remove('hidden');
     });
 
     buttonCopy.addEventListener('click', function(ev) {