Merge pull request 'Add button for copying lndhub setup code' (#55) from feature/37-copy_setup_code into master

Reviewed-on: #55

app/javascript/stylesheets/application.scss

@@ -1,4 +1,4 @@
-// version 4
+// version 5
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

app/views/wallet/index.html.erb

@@ -20,42 +20,56 @@
 
 <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>
+  <p class="mb-6">
-    <a id="show-setup-code" class="ks-text-link cursor-pointer">Show setup code</a>
+    <button id="show-setup-code" class="btn-sm btn-blue">Show setup code</button>
-    <a id="hide-setup-code" class="ks-text-link cursor-pointer" style="display: none;">Hide setup code</a>
+    <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>
 
 <script type="text/javascript">
   (function () {
-    const linkShow = document.querySelector('#show-setup-code');
+    const buttonShow = document.querySelector('#show-setup-code');
-    const linkHide = document.querySelector('#hide-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';
+      setupCode.classList.remove('hidden');
-      linkShow.style.display = 'none';
+      buttonHide.classList.remove('hidden');
-      linkHide.style.display = 'block';
+      buttonShow.classList.add('hidden');
       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';
+      setupCode.classList.add('hidden');
-      linkShow.style.display = 'block';
+      buttonHide.classList.add('hidden');
-      linkHide.style.display = 'none';
+      buttonShow.classList.remove('hidden');
+    });
+
+    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>