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>