website_next: part 5

website_next/wallets/wallet/receive/index.js

@@ -2,25 +2,11 @@ import { createQrDataUrl } from "../../../qr/index.js";
 import { openDialog } from "../../../dialog/index.js";
 import { createGroupedAddress } from "../address/index.js";
 import { createWalletPart } from "../../dom.js";
-import { formatNumber } from "../../format.js";
 
 /**
  * @typedef {import("../../scan/index.js").WalletAddress} ReceiveAddress
  */
 
-/**
- * @param {ReceiveAddress} receiveAddress
- */
-function createReceiveTitle(receiveAddress) {
-  const title = document.createElement("h2");
-
-  title.append(
-    `${receiveAddress.branchLabel.toLowerCase()} #${formatNumber(receiveAddress.index)}`,
-  );
-
-  return title;
-}
-
 /**
  * @param {ReceiveAddress} receiveAddress
  */
@@ -29,7 +15,7 @@ function createReceiveQr(receiveAddress) {
   const uri = `bitcoin:${receiveAddress.address}`;
 
   image.alt = `QR code for ${receiveAddress.address}`;
-  image.src = createQrDataUrl(uri, { scale: 8 });
+  image.src = createQrDataUrl(uri, { scale: 6 });
 
   return image;
 }
@@ -47,11 +33,13 @@ function createReceiveAddress(receiveAddress) {
 
 /**
  * @param {ReceiveAddress} receiveAddress
- * @param {HTMLButtonElement} copy
+ * @param {HTMLElement} content
+ * @param {() => void} onCopied
  */
-async function copyReceiveAddress(receiveAddress, copy) {
+async function copyReceiveAddress(receiveAddress, content, onCopied) {
   await navigator.clipboard.writeText(receiveAddress.address);
-  copy.textContent = "Copied";
+  content.dataset.copied = "";
+  onCopied();
 }
 
 /**
@@ -61,30 +49,31 @@ async function copyReceiveAddress(receiveAddress, copy) {
 function openReceiveDialog(host, receiveAddress) {
   const dialog = createWalletPart("dialog", "receive");
   const content = document.createElement("article");
-  const actions = document.createElement("footer");
-  const copy = document.createElement("button");
-  const closeForm = document.createElement("form");
-  const close = document.createElement("button");
+  let copiedTimeout = 0;
 
-  copy.type = "button";
-  copy.append("Copy");
-  closeForm.method = "dialog";
-  close.type = "submit";
-  close.append("Close");
-  closeForm.append(close);
-  actions.append(copy, closeForm);
+  content.role = "button";
+  content.tabIndex = 0;
   content.append(
-    createReceiveTitle(receiveAddress),
     createReceiveQr(receiveAddress),
     createReceiveAddress(receiveAddress),
-    actions,
   );
   dialog.append(content);
 
-  copy.addEventListener("click", () => {
-    void copyReceiveAddress(receiveAddress, copy).catch(() => {
-      copy.textContent = "Copy failed";
-    });
+  function copy() {
+    void copyReceiveAddress(receiveAddress, content, () => {
+      window.clearTimeout(copiedTimeout);
+      copiedTimeout = window.setTimeout(() => {
+        delete content.dataset.copied;
+      }, 1_000);
+    }).catch(() => {});
+  }
+
+  content.addEventListener("click", copy);
+  content.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+
+    event.preventDefault();
+    copy();
   });
   openDialog(dialog, host);
 }

website_next/wallets/wallet/receive/style.css

@@ -1,40 +1,76 @@
 main[data-page="wallets"] {
   dialog[data-wallet="receive"] {
-    width: min(100% - 2rem, 32rem);
+    --dialog-space: 1rem;
+
+    width: min(100% - 2rem, 10rem);
+    border-radius: 0.125rem;
 
     > article {
+      position: relative;
       display: grid;
-      gap: 1rem;
+      gap: 0.375rem;
+      cursor: pointer;
 
-      > h2 {
-        margin: 0;
-        font-size: var(--font-size-lg);
-        font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-lg);
+      &:focus-visible {
+        outline: 2px solid var(--orange);
+        outline-offset: 0.25rem;
+      }
+
+      &::after {
+        content: "Copied";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        color: var(--black);
+        font-size: var(--font-size-sm);
+        opacity: 0;
+        pointer-events: none;
+        translate: -50% calc(-50% + 0.25rem);
+        transition:
+          opacity 150ms ease,
+          translate 150ms ease;
+        text-transform: uppercase;
+      }
+
+      &[data-copied]::after {
+        opacity: 1;
+        translate: -50% -50%;
+      }
+
+      &[data-copied] > * {
+        opacity: 0.1;
       }
 
       > img {
         justify-self: center;
-        width: min(100%, 18rem);
+        width: 100%;
         aspect-ratio: 1;
-        padding: 1rem;
         background: var(--white);
         image-rendering: pixelated;
       }
 
+      > img,
       > p {
-        margin: 0;
-        font-size: var(--font-size-sm);
-        line-height: var(--line-height-sm);
+        transition: opacity 150ms ease;
       }
 
-      > footer {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        justify-content: end;
-        > form {
-          margin: 0;
+      > p {
+        margin: 0;
+        font-size: var(--font-size-xs);
+        font-style: italic;
+        line-height: var(--line-height-xs);
+
+        [data-wallet="address"] {
+          max-width: 100%;
+          gap: 0 0.25rem;
+
+          > span {
+            color: var(--black);
+
+            > var {
+              color: color-mix(in oklch, var(--black) 75%, var(--gray));
+            }
+          }
         }
       }
     }