feat: button to copy deeplink wallets’ URL (#142)

tien · Oct 8, 2024 · 065ede4 · 065ede4
1 parent 484fdf1
commit 065ede4
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 2 deletions.
diff --git a/.changeset/empty-impalas-leave.md b/.changeset/empty-impalas-leave.md
@@ -0,0 +1,5 @@
+---
+"dot-connect": minor
+---
+
+Added a button to copy deeplink wallets’ URL.
diff --git a/packages/dot-connect/src/elements/components/element.ts b/packages/dot-connect/src/elements/components/element.ts
@@ -93,13 +93,19 @@ export abstract class DotConnectElement extends SignalWatcher(LitElement) {
         background-color: var(--surface-container-color);
       }
 
-      &.text {
+      &.text,
+      &.icon {
         background-color: transparent;
       }
 
       &:hover {
         scale: 1.04;
       }
+
+      &:active {
+        scale: 1;
+        filter: brightness(1.125);
+      }
     }
 
     ul {

diff --git a/packages/dot-connect/src/elements/connection-dialog.ts b/packages/dot-connect/src/elements/connection-dialog.ts
@@ -1,4 +1,8 @@
-import { users as usersIcon, wallet as walletIcon } from "../icons/index.js";
+import {
+  copy as copyIcon,
+  users as usersIcon,
+  wallet as walletIcon,
+} from "../icons/index.js";
 import {
   observableSignal,
   type ObservableSignal,
@@ -319,6 +323,25 @@ export class DeepLinkWalletConnection extends BaseWalletConnection<DeepLinkWalle
     </button>`;
   }
 
+  static override styles = [
+    super.styles,
+    css`
+      #url-container {
+        display: flex;
+        justify-content: center;
+
+        button {
+          padding: 0;
+          cursor: copy;
+
+          svg {
+            vertical-align: -0.125em;
+          }
+        }
+      }
+    `,
+  ];
+
   protected override render() {
     return html`<div style="display: content;">
       ${super.render()}
@@ -342,6 +365,15 @@ export class DeepLinkWalletConnection extends BaseWalletConnection<DeepLinkWalle
                   return `data:image/svg+xml;base64,${globalThis.btoa(svg)}`;
                 })()}
               ></dc-qr-code>
+              <div id="url-container">
+                <button
+                  class="text info"
+                  @click=${() =>
+                    globalThis.navigator.clipboard.writeText(this.#uri.value!)}
+                >
+                  Copy link ${copyIcon({ size: "1em" })}
+                </button>
+              </div>
             </div>
           </dc-dialog>`}
     </div>`;

diff --git a/packages/dot-connect/src/icons/copy.ts b/packages/dot-connect/src/icons/copy.ts
@@ -0,0 +1,21 @@
+import type { IconProps } from "./types.js";
+import { html } from "lit";
+
+export function copy({ size = 24 }: IconProps = {}) {
+  return html`<svg
+    width=${size}
+    height=${size}
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke="currentcolor"
+  >
+    <g>
+      <path d="M8.99414 8.5V2H25.9941V19H19.4941"></path>
+      <path d="M18.9941 9H1.99414V26H18.9941V9Z"></path>
+    </g>
+  </svg>`;
+}
diff --git a/packages/dot-connect/src/icons/index.ts b/packages/dot-connect/src/icons/index.ts
@@ -6,3 +6,4 @@ export { qrCode } from "./qr-code.js";
 export { users } from "./users.js";
 export { wallet } from "./wallet.js";
 export { wallets } from "./wallets.js";
+export { copy } from "./copy.js";