@seams/wallet 0.22.0 → 0.24.0

package/dist/esm/sdk/tx-confirm-ui.js

@@ -1648,6 +1648,7 @@ function normalizeConfirmationModel(input) {
       appearance: input.appearance,
       content: {
         kind: "transaction",
+        capture: source.authMethodCapture ?? null,
         review: { model: source.model ?? null, tree: input.tree },
         header: {
           heading: confirmationHeading(source),
@@ -1670,7 +1671,8 @@ function normalizeConfirmationModel(input) {
           cancelText,
           errorMessage,
           onCancel: input.callbacks.cancel,
-          onBack: source.onBack
+          onBack: source.onBack,
+          authMethodApprovalMessage: source.authMethodApprovalMessage
         }
       }
     }
@@ -2273,6 +2275,26 @@ var walletMessages = [
   ["Creating your wallet", "ウォレットを作成中"],
   ["Continue with your passkey", "パスキーで続ける"],
   ["Accounts", "アカウント"],
+  ["View or add accounts", "アカウントの表示・追加"],
+  ["Add EVM account", "EVM アカウントを追加"],
+  ["Adding EVM account…", "EVM アカウントを追加中…"],
+  ["EVM account added.", "EVM アカウントを追加しました。"],
+  [
+    "Account added. Open this wallet again to finish setup.",
+    "アカウントを追加しました。このウォレットを開き直して設定を完了してください。"
+  ],
+  [
+    "Enable this app’s EVM networks with your passkey.",
+    "パスキーでこのアプリの EVM ネットワークを有効にします。"
+  ],
+  [
+    "Add a passkey in Authentication methods first.",
+    "先に「認証方法」でパスキーを追加してください。"
+  ],
+  [
+    "The account could not be added. Try again.",
+    "アカウントを追加できませんでした。もう一度お試しください。"
+  ],
   ["View accounts on block explorers", "ブロックエクスプローラーでアカウントを表示"],
   ["Export keys", "鍵をエクスポート"],
   ["Export wallet signing keys", "ウォレットの署名鍵をエクスポート"],
@@ -2725,8 +2747,6 @@ var walletMessages = [
   ["Adding Email OTP…", "メール認証を追加中…"],
   ["Passkey added.", "パスキーを追加しました。"],
   ["Email OTP added.", "メール認証を追加しました。"],
-  ["Unlocking wallet management…", "ウォレット管理のロックを解除中…"],
-  ["Wallet management unlocked.", "ウォレット管理のロックを解除しました。"],
   ["Checking authentication methods…", "認証方法を確認中…"],
   ["Unable to load authentication methods:", "認証方法を読み込めません："],
   ["Active authentication methods", "有効な認証方法"],
@@ -2743,11 +2763,19 @@ var walletMessages = [
     "このデバイスのパスキーでウォレットのロックを解除します。"
   ],
   ["Add Email OTP", "メール認証を追加"],
-  ["Unlock to manage methods", "ロックを解除して認証方法を管理"],
+  ["Add", "追加"],
+  [
+    "Use a one-time code from your email to unlock the wallet.",
+    "メールに届くワンタイムコードでウォレットのロックを解除します。"
+  ],
   [
-    "Confirm your current authentication method to add or remove methods.",
-    "認証方法を追加・削除するには、現在の認証方法を確認してください。"
+    "Next, confirm with your passkey. Then enter the code that we email to this address.",
+    "次にパスキーで確認します。その後、このアドレスに届くコードを入力してください。"
   ],
+  ["Send code", "コードを送信"],
+  ["Sending code…", "コードを送信中…"],
+  ["Enter a valid email address.", "有効なメールアドレスを入力してください。"],
+  ["Codes go to the email address you verified.", "確認済みのメールアドレスにコードを送信します。"],
   ["Transfer", "送金"],
   ["Warnings", "警告"],
   ["No operations", "操作なし"],
@@ -3507,6 +3535,7 @@ var LANDING_CONFIRM_FRAMES = 3;
 var HUG_TOLERANCE_CSS_PX = 1;
 var ANNOUNCE_SAFETY_MS = 1500;
 var MIN_ANNOUNCED_DELTA_CSS_PX = 1;
+var OWN_RESIZE_MS = 200;
 function announceSurfaceResize(target, announcement) {
   const { fromCssPx, toCssPx } = announcement;
   if (!Number.isFinite(fromCssPx) || !Number.isFinite(toCssPx))
@@ -3601,13 +3630,25 @@ function createSurfaceHeightReflow(args) {
             clampedElement = null;
           }
         });
-        if (!claimed)
-          release();
+        if (claimed)
+          return;
+        release();
+        easeOwnHeight(element, fromCssPx, toCssPx);
       });
     },
     dispose: release
   };
 }
+function easeOwnHeight(element, fromCssPx, toCssPx) {
+  if (Math.abs(toCssPx - fromCssPx) < MIN_ANNOUNCED_DELTA_CSS_PX)
+    return;
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+    return;
+  element.animate([{ height: `${fromCssPx}px` }, { height: `${toCssPx}px` }], {
+    duration: OWN_RESIZE_MS,
+    easing: "cubic-bezier(0.32, 0.72, 0, 1)"
+  });
+}
 function announceClampedSurfaceResize(args) {
   const { element, fromCssPx, toCssPx } = args;
   if (!Number.isFinite(fromCssPx) || !Number.isFinite(toCssPx))
@@ -4759,6 +4800,12 @@ class ConfirmContent extends C {
               onCopy: this.props.onCopy
             })
           }),
+          this.props.authMethodApprovalMessage && /* @__PURE__ */ u3("p", {
+            class: "seams-voiceid-instructions",
+            "data-seams-voice-id": "required",
+            role: "status",
+            children: this.props.authMethodApprovalMessage
+          }),
           /* @__PURE__ */ u3("div", {
             class: "actions",
             children: [
@@ -5465,11 +5512,23 @@ class ReviewDisclosure extends C {
     confirmationDocumentStyles(details.ownerDocument).setDynamicDeclarations(this.id, `#${this.id}`, { "--seams-review-disclosure-height": `${height}px` });
   };
   finish = () => {
+    const local = this.motion?.kind === "local";
     if (this.root.current && this.motion) {
       this.root.current.open = this.motion.opening;
       this.root.current.removeAttribute("data-closing");
     }
     this.clearMotion();
+    if (local) {
+      const surface = this.root.current?.closest(".seams-confirmation-surface");
+      const focused = surface?.ownerDocument.activeElement;
+      if (focused instanceof HTMLElement && focused.tabIndex >= 0 && surface?.contains(focused)) {
+        const bounds = focused.getBoundingClientRect();
+        const viewportHeight = focused.ownerDocument.documentElement.clientHeight;
+        if (bounds.top < 0 || bounds.bottom > viewportHeight) {
+          focused.scrollIntoView({ block: "center", inline: "nearest" });
+        }
+      }
+    }
   };
   toggle = (event) => {
     const details = this.root.current;
@@ -5586,7 +5645,6 @@ function ReviewIcon({
     minimize: "M5 12h14",
     check: "m5 12 4 4L19 6",
     arrow: "M7 17 17 7M7 7h10v10",
-    shield: "M12 3 4.5 6v5.5c0 4.2 2.7 7.4 7.5 9.5 4.8-2.1 7.5-5.3 7.5-9.5V6L12 3Z M8.5 11.5l2.5 2.5 4.5-5",
     copy: "M8 8h12v12H8ZM4 16V4h12",
     loader: "M12 3a9 9 0 1 1-9 9",
     alert: "M12 8v5m0 3v.1M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0",
@@ -5608,6 +5666,10 @@ function ReviewIcon({
 function reviewNetwork(model) {
   if (!model)
     return "Wallet transaction";
+  if (model.chain === "evm" && model.chainId === 5042)
+    return "Arc";
+  if (model.chain === "evm" && model.chainId === 5042002)
+    return "Arc Testnet";
   if (model.chain === "evm" && model.chainId === 8453)
     return "Base";
   if (model.chain === "evm" && model.chainId === 84532)
@@ -5644,6 +5706,31 @@ function ReviewMiddleTruncated({
   });
 }
 function TokenIcon({ symbol }) {
+  if (symbol === "NEAR")
+    return /* @__PURE__ */ u3("svg", {
+      class: "seams-review-token",
+      viewBox: "0 0 48 48",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ u3("circle", {
+          cx: "24",
+          cy: "24",
+          r: "24",
+          fill: "#000"
+        }),
+        /* @__PURE__ */ u3("svg", {
+          x: "9",
+          y: "9",
+          width: "30",
+          height: "30",
+          viewBox: "108 108 351 351",
+          children: /* @__PURE__ */ u3("path", {
+            d: "m421.61,108c-13,0-25.07,6.74-31.88,17.82l-73.37,108.93c-2.39,3.59-1.42,8.43,2.17,10.82,2.91,1.94,6.76,1.7,9.41-.58l72.22-62.64c1.2-1.08,3.05-.97,4.13.23.49.55.75,1.26.75,1.99v196.12c0,1.62-1.31,2.92-2.93,2.92-.87,0-1.69-.38-2.24-1.05L181.56,121.24c-7.11-8.39-17.55-13.23-28.54-13.24h-7.63c-20.65,0-37.39,16.74-37.39,37.39v276.22c0,20.65,16.74,37.39,37.39,37.39,13,0,25.07-6.74,31.88-17.82l73.37-108.93c2.39-3.59,1.42-8.43-2.17-10.82-2.91-1.94-6.76-1.7-9.41.58l-72.22,62.64c-1.2,1.08-3.05.97-4.13-.23-.49-.55-.75-1.26-.74-1.99v-196.17c0-1.62,1.31-2.92,2.93-2.92.86,0,1.69.38,2.24,1.05l218.28,261.37c7.11,8.39,17.55,13.23,28.54,13.24h7.63c20.65.01,37.4-16.72,37.42-37.37V145.39c0-20.65-16.74-37.39-37.39-37.39Z",
+            fill: "#fff"
+          })
+        })
+      ]
+    });
   if (symbol === "ETH")
     return /* @__PURE__ */ u3("svg", {
       class: "seams-review-token",
@@ -5673,20 +5760,25 @@ function TokenIcon({ symbol }) {
   if (symbol === "USDC")
     return /* @__PURE__ */ u3("svg", {
       class: "seams-review-token",
-      viewBox: "0 0 42 42",
+      viewBox: "0 0 96 96",
+      fill: "none",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ u3("circle", {
-          cx: "21",
-          cy: "21",
-          r: "21",
-          fill: "#2775ca"
+        /* @__PURE__ */ u3("path", {
+          d: "M48 95C73.9574 95 95 73.9574 95 48C95 22.0426 73.9574 1 48 1C22.0426 1 1 22.0426 1 48C1 73.9574 22.0426 95 48 95Z",
+          fill: "#0B53BF"
         }),
         /* @__PURE__ */ u3("path", {
-          d: "M17 8a14 14 0 0 0 0 26M25 8a14 14 0 0 1 0 26M26 15c-1-4-10-4-10 1 0 5 10 3 10 8 0 5-9 5-11 1M21 10v4m0 14v4",
-          fill: "none",
-          stroke: "white",
-          "stroke-width": "2"
+          d: "M56.4609 13.7778V19.8291C68.5341 23.4716 77.3759 34.6928 77.3759 47.9997C77.3759 61.3066 68.5341 72.5278 56.4609 76.1703V82.2216C71.8534 78.4616 83.2509 64.5672 83.2509 47.9997C83.2509 31.4322 71.8534 17.5378 56.4609 13.7778Z",
+          fill: "white"
+        }),
+        /* @__PURE__ */ u3("path", {
+          d: "M18.625 47.9997C18.625 34.6928 27.4669 23.4716 39.54 19.8291V13.7778C24.1475 17.5378 12.75 31.4322 12.75 47.9997C12.75 64.5672 24.1475 78.4616 39.54 82.2216V76.1703C27.4669 72.5572 18.625 61.3066 18.625 47.9997Z",
+          fill: "white"
+        }),
+        /* @__PURE__ */ u3("path", {
+          d: "M60.6319 54.5506C60.6319 42.5362 41.8025 47.4713 41.8025 40.8325C41.8025 38.4531 43.7119 36.9256 47.3544 36.9256C51.7019 36.9256 53.2 39.0406 53.67 41.89H59.6625C59.1279 36.5426 56.0588 33.1662 50.9382 32.1604V27.4375H45.0632V31.9918C39.4534 32.7062 35.9275 35.973 35.9275 40.8325C35.9275 52.9056 54.7863 48.3819 54.7863 54.9031C54.7863 57.3706 52.4069 59.0156 48.3825 59.0156C43.1244 59.0156 41.3913 56.695 40.745 53.4931H34.8994C35.2781 59.3502 38.8897 63.0159 45.0632 63.9307V68.5625H50.9382V63.9923C56.9633 63.2139 60.6319 59.7089 60.6319 54.5506Z",
+          fill: "white"
         })
       ]
     });
@@ -5706,7 +5798,7 @@ function ReviewAmount({
   return /* @__PURE__ */ u3("div", {
     class: `seams-review-amount${compact ? " seams-review-amount--compact" : ""}`,
     children: [
-      !compact && /* @__PURE__ */ u3(TokenIcon, {
+      /* @__PURE__ */ u3(TokenIcon, {
         symbol: amount.symbol
       }),
       /* @__PURE__ */ u3("div", {
@@ -5727,10 +5819,6 @@ function WalletReceiptFooter() {
   return /* @__PURE__ */ u3("div", {
     class: "seams-receipt-footer",
     children: [
-      /* @__PURE__ */ u3(ReviewIcon, {
-        kind: "shield"
-      }),
-      " ",
       /* @__PURE__ */ u3("span", {
         children: /* @__PURE__ */ u3(WalletText, {
           message: "Secured by"
@@ -5754,6 +5842,8 @@ function reviewAmount(model) {
     return null;
   if (total.nativeSymbol === "yoctoNEAR")
     return { value: decimalUnits(total.nativeValue, 24), symbol: "NEAR" };
+  if (model?.chain === "evm" && (model.chainId === 5042 || model.chainId === 5042002) && total.nativeSymbol === "wei")
+    return { value: decimalUnits(total.nativeValue, 18), symbol: "USDC" };
   return { value: total.nativeValue, symbol: total.nativeSymbol ?? "" };
 }
 
@@ -6095,44 +6185,28 @@ class ConfirmationContent extends C {
   renderTransaction(model) {
     const contentClass = this.props.variant === "drawer" ? "seams-confirmation-content seams-confirmation-content--drawer" : "seams-confirmation-content";
     const decision = model.prompt.kind === "email" && model.transaction.decision.kind === "ready" ? { kind: "form", formId: this.otpFormId } : model.transaction.decision;
+    if (model.capture)
+      return /* @__PURE__ */ u3("div", {
+        ref: this.root,
+        class: contentClass,
+        children: /* @__PURE__ */ u3("div", {
+          class: "seams-review-content seams-review-content--capture",
+          children: [
+            this.props.variant !== "drawer" && this.renderToolbar(model, decision),
+            /* @__PURE__ */ u3(AuthMethodCapture, {
+              element: model.capture
+            }),
+            /* @__PURE__ */ u3(WalletReceiptFooter, {})
+          ]
+        })
+      });
     return /* @__PURE__ */ u3("div", {
       ref: this.root,
       class: contentClass,
       children: /* @__PURE__ */ u3("div", {
         class: "seams-review-content",
         children: [
-          this.props.variant !== "drawer" && /* @__PURE__ */ u3("div", {
-            class: "seams-review-toolbar",
-            children: [
-              /* @__PURE__ */ u3("div", {
-                class: "seams-review-origin",
-                children: [
-                  model.transaction.onBack && /* @__PURE__ */ u3("button", {
-                    type: "button",
-                    "aria-label": walletText(this.context, "Back to review"),
-                    title: walletText(this.context, "Back to review"),
-                    disabled: decision.kind === "preparing",
-                    onClick: model.transaction.onBack,
-                    children: /* @__PURE__ */ u3(ReviewIcon, {
-                      kind: "back"
-                    })
-                  }),
-                  /* @__PURE__ */ u3(PadlockIcon, {}),
-                  model.header.website.kind === "ready" ? model.header.website.text : /* @__PURE__ */ u3(LoadingStatus, {
-                    label: walletText(this.context, "Loading website")
-                  })
-                ]
-              }),
-              /* @__PURE__ */ u3("button", {
-                type: "button",
-                "aria-label": walletDisplayText(this.context, model.transaction.cancelText),
-                onClick: model.transaction.onCancel,
-                children: /* @__PURE__ */ u3(ReviewIcon, {
-                  kind: "close"
-                })
-              })
-            ]
-          }),
+          this.props.variant !== "drawer" && this.renderToolbar(model, decision),
           model.review.model && /* @__PURE__ */ u3("div", {
             class: "seams-review-eyebrow",
             children: model.review.model.operations.length === 1 ? /* @__PURE__ */ u3(WalletText, {
@@ -6178,12 +6252,67 @@ class ConfirmationContent extends C {
       })
     });
   }
+  renderToolbar(model, decision) {
+    return /* @__PURE__ */ u3("div", {
+      class: "seams-review-toolbar",
+      children: [
+        /* @__PURE__ */ u3("div", {
+          class: "seams-review-origin",
+          children: [
+            model.transaction.onBack && /* @__PURE__ */ u3("button", {
+              type: "button",
+              "aria-label": walletText(this.context, "Back to review"),
+              title: walletText(this.context, "Back to review"),
+              disabled: decision.kind === "preparing",
+              onClick: model.transaction.onBack,
+              children: /* @__PURE__ */ u3(ReviewIcon, {
+                kind: "back"
+              })
+            }),
+            /* @__PURE__ */ u3(PadlockIcon, {}),
+            model.header.website.kind === "ready" ? model.header.website.text : /* @__PURE__ */ u3(LoadingStatus, {
+              label: walletText(this.context, "Loading website")
+            })
+          ]
+        }),
+        /* @__PURE__ */ u3("button", {
+          type: "button",
+          "aria-label": walletDisplayText(this.context, model.transaction.cancelText),
+          onClick: model.transaction.onCancel,
+          children: /* @__PURE__ */ u3(ReviewIcon, {
+            kind: "close"
+          })
+        })
+      ]
+    });
+  }
 }
 function ignoreCopyFailure() {}
 function assertNever4(value) {
   throw new Error(`Unexpected confirmation content: ${String(value)}`);
 }
 
+class AuthMethodCapture extends C {
+  container = M();
+  componentDidMount() {
+    this.container.current?.append(this.props.element);
+    this.props.element.querySelector("button")?.focus();
+  }
+  componentDidUpdate(previous) {
+    if (previous.element !== this.props.element)
+      this.container.current?.replaceChildren(this.props.element);
+  }
+  componentWillUnmount() {
+    this.props.element.remove();
+  }
+  render() {
+    return /* @__PURE__ */ u3("div", {
+      ref: this.container,
+      class: "seams-auth-method-capture"
+    });
+  }
+}
+
 // src/core/signingEngine/uiConfirm/ui/preact/ConfirmationModal.tsx
 var nextModalId = 0;
 function ConfirmationModal(props) {
@@ -7212,12 +7341,21 @@ function ReceiptStep(props) {
 }
 
 // src/core/signingEngine/uiConfirm/ui/preact/mountConfirmationSurface.tsx
-var RECEIPT_MORPH_DURATION_MS = 360;
+var RECEIPT_MORPH_DURATION_MS = 640;
+var CAPTURE_FADE_MS = 160;
+var SEGMENT_DELAY_MS = 120;
+var SEGMENT_TRAVEL_MS = 800;
+var SEGMENT_EASING = "cubic-bezier(0.65, 0, 0.35, 1)";
+var HANDED_DETAIL_DELAY_MS = 200;
+var HANDED_DETAIL_STAGGER_MS = 40;
+var HANDED_DETAIL_FADE_MS = 360;
+var HANDED_STEPS_DELAY_MS = SEGMENT_DELAY_MS + SEGMENT_TRAVEL_MS - HANDED_DETAIL_FADE_MS;
 var RECEIPT_MORPH_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
 var RECEIPT_ANCHORS = [
   ".seams-receipt-symbol",
   '[role="status"]',
-  ".seams-review-amount"
+  ".seams-review-amount",
+  ".seams-receipt-footer"
 ];
 function captureReceiptAnchors(surface) {
   const anchors = [];
@@ -7234,6 +7372,31 @@ function captureReceiptAnchors(surface) {
   }
   return anchors;
 }
+function progressSegments(capture) {
+  const line = capture.querySelector("[data-seams-progress-line]");
+  if (!line)
+    return [];
+  const color = getComputedStyle(line).color;
+  const drawn = Array.from(line.querySelectorAll("[data-seams-progress-segment]"));
+  if (drawn.length === 3 && drawn.every(isPainted)) {
+    return drawn.map((segment) => ({
+      bounds: segment.getBoundingClientRect(),
+      opacity: segment.getAttribute("opacity") ?? "1",
+      color
+    })).sort((a, b) => a.bounds.left - b.bounds.left);
+  }
+  const box = line.getBoundingClientRect();
+  const width = box.width / 3;
+  return [0, 1, 2].map((index) => ({
+    bounds: new DOMRect(box.left + index * width, box.top + box.height / 2, width, 0),
+    opacity: "0.55",
+    color
+  }));
+}
+function ignoreCancelledMotion() {}
+function isPainted(segment) {
+  return segment.getAttribute("opacity") !== "0";
+}
 var nextSurfaceId = 0;
 
 class MountedConfirmationSurface {
@@ -7244,12 +7407,20 @@ class MountedConfirmationSurface {
   receipt = null;
   receiptMotion = [];
   receiptShell = null;
+  receiptGhost = null;
+  receiptSegments = [];
   clearReceiptMotion = () => {
     for (const animation of this.receiptMotion)
       animation.cancel();
     this.receiptMotion = [];
     this.receiptShell?.remove();
     this.receiptShell = null;
+    this.receiptGhost?.remove();
+    this.receiptGhost = null;
+    for (const segment of this.receiptSegments)
+      segment.remove();
+    this.receiptSegments = [];
+    this.element.removeAttribute("data-receipt-segments");
     this.element.removeAttribute("data-receipt-morphing");
   };
   constructor(input) {
@@ -7301,6 +7472,7 @@ class MountedConfirmationSurface {
     const previousShell = this.receiptShell ?? this.element.querySelector(".modal-container-root");
     const previousBounds = previousShell?.getBoundingClientRect();
     const anchors = viewChanged ? captureReceiptAnchors(this.element) : [];
+    const leaving = viewChanged ? this.liveCapture() : null;
     const previousRadius = previousShell ? getComputedStyle(previousShell).borderRadius : "26px";
     if (viewChanged)
       this.clearReceiptMotion();
@@ -7335,6 +7507,7 @@ class MountedConfirmationSurface {
         }
       ], { duration: RECEIPT_MORPH_DURATION_MS, easing: RECEIPT_MORPH_EASING, fill: "both" });
       this.receiptMotion = [morph];
+      const handedOver = leaving ? this.handOverCapture(leaving, target) : false;
       const shared = new Set;
       for (const anchor of anchors) {
         const element = target.querySelector(anchor.selector);
@@ -7359,19 +7532,97 @@ class MountedConfirmationSurface {
       for (const detail of details) {
         if (shared.has(detail))
           continue;
-        this.receiptMotion.push(detail.animate([
+        const toolbar = leaving !== null && detail.matches(".seams-review-toolbar");
+        this.receiptMotion.push(detail.animate(toolbar ? [{ opacity: 0 }, { opacity: 1 }] : [
           { opacity: 0, transform: "translateY(8px)" },
           { opacity: 1, transform: "translateY(0)" }
-        ], {
+        ], leaving ? {
+          duration: HANDED_DETAIL_FADE_MS,
+          delay: toolbar ? 0 : handedOver && detail.matches(".seams-receipt-steps") ? HANDED_STEPS_DELAY_MS : HANDED_DETAIL_DELAY_MS + Math.min(order, 6) * HANDED_DETAIL_STAGGER_MS,
+          fill: "backwards",
+          easing: "cubic-bezier(0.2, 0, 0, 1)"
+        } : {
           duration: 120,
           delay: model.view === "toast" ? 240 : 180 + Math.min(order, 4) * 15,
           fill: "backwards",
           easing: "ease-out"
         }));
-        order += 1;
+        if (!toolbar)
+          order += 1;
       }
-      morph.onfinish = this.clearReceiptMotion;
+      const motion = this.receiptMotion;
+      Promise.all(motion.map((animation) => animation.finished)).then(() => {
+        if (this.receiptMotion === motion)
+          this.clearReceiptMotion();
+      }, ignoreCancelledMotion);
+    }
+  }
+  liveCapture() {
+    if (this.state.kind !== "mounted" || this.state.model.content.kind !== "transaction")
+      return null;
+    const element = this.state.model.content.capture;
+    if (!element?.isConnected)
+      return null;
+    return { element, bounds: element.getBoundingClientRect(), segments: progressSegments(element) };
+  }
+  handOverCapture(leaving, target) {
+    const ghost = this.element.ownerDocument.createElement("div");
+    ghost.className = "seams-receipt-capture-ghost";
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.append(leaving.element);
+    this.element.appendChild(ghost);
+    this.receiptGhost = ghost;
+    const place = {
+      left: `${leaving.bounds.left}px`,
+      top: `${leaving.bounds.top}px`,
+      width: `${leaving.bounds.width}px`,
+      height: `${leaving.bounds.height}px`
+    };
+    this.receiptMotion.push(ghost.animate([{ ...place, opacity: 1 }, { ...place, opacity: 0 }], {
+      duration: CAPTURE_FADE_MS,
+      easing: "ease-out",
+      fill: "both"
+    }));
+    const tracks = target.querySelectorAll(".seams-receipt-track");
+    if (leaving.segments.length === 0 || tracks.length !== leaving.segments.length)
+      return false;
+    this.element.setAttribute("data-receipt-segments", "");
+    for (const [index, track] of tracks.entries()) {
+      const from = leaving.segments[index];
+      const to = track.getBoundingClientRect();
+      const complete = track.closest(".seams-receipt-step")?.dataset.state === "complete";
+      const segment = this.element.ownerDocument.createElement("div");
+      segment.className = "seams-receipt-segment";
+      segment.setAttribute("aria-hidden", "true");
+      this.element.appendChild(segment);
+      this.receiptSegments.push(segment);
+      this.receiptMotion.push(segment.animate([
+        {
+          left: `${from.bounds.left}px`,
+          top: `${from.bounds.top + from.bounds.height / 2 - 0.5}px`,
+          width: `${from.bounds.width}px`,
+          height: "1px",
+          borderRadius: "1px",
+          opacity: from.opacity,
+          backgroundColor: from.color
+        },
+        {
+          left: `${to.left}px`,
+          top: `${to.top}px`,
+          width: `${to.width}px`,
+          height: `${to.height}px`,
+          borderRadius: getComputedStyle(track).borderRadius,
+          opacity: 1,
+          backgroundColor: getComputedStyle(track, complete ? "::after" : null).backgroundColor
+        }
+      ], {
+        duration: SEGMENT_TRAVEL_MS,
+        delay: SEGMENT_DELAY_MS,
+        easing: SEGMENT_EASING,
+        fill: "both"
+      }));
     }
+    return true;
   }
   dispose = () => {
     if (this.state.kind === "disposed")
@@ -7476,6 +7727,7 @@ class MountedConfirmationSurface {
       case "transaction":
         return {
           kind: "transaction",
+          capture: source.capture,
           header: source.header,
           body: source.body,
           review: source.review,
@@ -7573,6 +7825,8 @@ function mergeConfirmationPresentation(current, update) {
     preparing: Object.hasOwn(update, "preparing") ? update.preparing : current.preparing,
     title: Object.hasOwn(update, "title") ? update.title : current.title,
     body: Object.hasOwn(update, "body") ? update.body : current.body,
+    authMethodCapture: Object.hasOwn(update, "authMethodCapture") ? update.authMethodCapture : current.authMethodCapture,
+    authMethodApprovalMessage: Object.hasOwn(update, "authMethodApprovalMessage") ? update.authMethodApprovalMessage : current.authMethodApprovalMessage,
     errorMessage: Object.hasOwn(update, "errorMessage") ? update.errorMessage : current.errorMessage,
     confirmText: Object.hasOwn(update, "confirmText") ? update.confirmText : current.confirmText,
     cancelText: Object.hasOwn(update, "cancelText") ? update.cancelText : current.cancelText,
@@ -7603,7 +7857,8 @@ function sizeFromRect(rect) {
   return { widthCssPx, heightCssPx };
 }
 function sizeFromEntryOrElement(element, entry) {
-  return sizeFromRect(entry?.contentRect ?? element.getBoundingClientRect());
+  const box = entry?.borderBoxSize[0];
+  return sizeFromRect(box ? { width: box.inlineSize, height: box.blockSize } : element.getBoundingClientRect());
 }
 function sizeForReporter(options, entry) {
   if (options.kind === "request_scroll_surface") {
@@ -7663,7 +7918,7 @@ class SurfaceMeasurementReporter {
     this.options = options;
     if (typeof ResizeObserver === "function") {
       this.observer = new ResizeObserver(this.onResize);
-      this.observer.observe(options.element);
+      this.observer.observe(options.element, { box: "border-box" });
       if (options.kind === "request_scroll_surface" && options.element.firstElementChild) {
         this.observer.observe(options.element.firstElementChild);
       }
@@ -7970,58 +8225,110 @@ function returnToApplicationReview(admission, navigation) {
   if (navigation.kind === "review_available")
     admission.returnToReview();
 }
-function createConfirmationDecisionChannel(admission) {
-  const navigation = { kind: "review_available" };
-  const queuedDecisions = [];
-  const decisionWaiters = [];
-  const cancelListeners = new Set;
-  const publishDecision = (decision) => {
-    navigation.kind = "decision_published";
-    const waiter = decisionWaiters.shift();
+
+class ConfirmationDecisionQueue {
+  admission;
+  view = null;
+  navigation = { kind: "review_available" };
+  queuedDecisions = [];
+  decisionWaiters = [];
+  phase = "pending";
+  cancelListeners = new Set;
+  onBack;
+  callbacks = {
+    confirm: this.confirm.bind(this),
+    cancel: this.cancel.bind(this),
+    submitEmail: this.submitEmail.bind(this)
+  };
+  constructor(admission) {
+    this.admission = admission;
+    this.onBack = admission ? this.back.bind(this) : undefined;
+  }
+  attachView(view) {
+    this.view = view;
+  }
+  publishDecision(decision) {
+    if (this.phase === "published")
+      return;
+    this.phase = "published";
+    this.navigation.kind = "decision_published";
+    const waiter = this.decisionWaiters.shift();
     if (waiter) {
       waiter(decision);
       return;
     }
-    queuedDecisions.push(decision);
-  };
-  const cancel = (error) => {
-    publishDecision({ kind: "cancelled", error: error ?? null });
-    for (const listener of cancelListeners)
+    this.queuedDecisions.push(decision);
+  }
+  back() {
+    if (this.phase === "checking")
+      this.cancel("Voice approval was cancelled.");
+    else if (this.admission)
+      returnToApplicationReview(this.admission, this.navigation);
+  }
+  cancel(error) {
+    if (this.phase === "published")
+      return;
+    this.publishDecision({ kind: "cancelled", error: error ?? null });
+    this.admission?.cancel(new Error(error ?? "Wallet approval was cancelled."));
+    for (const listener of this.cancelListeners)
       listener({ ...error ? { error } : {} });
-  };
-  return {
-    cancelListeners,
-    onBack: admission ? returnToApplicationReview.bind(null, admission, navigation) : undefined,
-    callbacks: {
-      confirm: () => {
-        if (admission && !admission.allowInteraction())
-          return;
-        publishDecision({ kind: "confirmed", emailOtp: { kind: "absent" } });
-      },
-      cancel: () => cancel(),
-      submitEmail: (code, challengeId) => {
-        if (admission && !admission.allowInteraction())
-          return;
-        const otpCode = code.trim();
-        const emailOtpChallengeId = challengeId.trim();
-        if (!otpCode || !emailOtpChallengeId) {
-          cancel("Email OTP challenge is missing.");
-          return;
-        }
-        publishDecision({
-          kind: "confirmed",
-          emailOtp: { kind: "provided", code: otpCode, challengeId: emailOtpChallengeId }
+  }
+  confirm() {
+    this.approve({ kind: "confirmed", emailOtp: { kind: "absent" } });
+  }
+  submitEmail(code, challengeId) {
+    const otpCode = code.trim();
+    const emailOtpChallengeId = challengeId.trim();
+    if (!otpCode || !emailOtpChallengeId) {
+      this.cancel("Email OTP challenge is missing.");
+      return;
+    }
+    this.approve({
+      kind: "confirmed",
+      emailOtp: { kind: "provided", code: otpCode, challengeId: emailOtpChallengeId }
+    });
+  }
+  async approve(decision) {
+    if (this.phase !== "pending" || this.admission && !this.admission.allowInteraction())
+      return;
+    this.phase = "checking";
+    try {
+      if (this.admission?.authMethodApprovalMessages) {
+        this.view?.update({
+          preparing: true,
+          authMethodCapture: this.admission.authMethodApprovalSurface
         });
       }
-    },
-    takeDecision: async () => {
-      const queued = queuedDecisions.shift();
-      if (queued)
-        return queued;
-      return await new Promise((resolve) => {
-        decisionWaiters.push(resolve);
-      });
+      const approval = await this.admission?.approveAuthMethod();
+      if (approval?.kind === "retry") {
+        this.phase = "pending";
+        this.view?.update({
+          preparing: false,
+          authMethodCapture: null,
+          authMethodApprovalMessage: approval.message
+        });
+        return;
+      }
+      if (this.admission?.authMethodApprovalMessages)
+        this.view?.update({
+          preparing: false,
+          authMethodApprovalMessage: this.admission.authMethodApprovalMessages.approved
+        });
+      this.publishDecision(decision);
+    } catch (error) {
+      this.cancel(error instanceof Error ? error.message : "Authentication method approval failed.");
     }
+  }
+  async takeDecision() {
+    const queued = this.queuedDecisions.shift();
+    if (queued)
+      return queued;
+    if (this.phase === "published")
+      this.phase = "pending";
+    return await new Promise(this.waitForDecision);
+  }
+  waitForDecision = (resolve) => {
+    this.decisionWaiters.push(resolve);
   };
 }
 function createHostConfirmHandle(host, channel, binding) {
@@ -8284,7 +8591,7 @@ function mountHostElement({
   });
   const portal = ensureConfirmPortal();
   const explorerOverrides = resolveExplorerUrlsFromModel(ctx, model);
-  const channel = createConfirmationDecisionChannel(reviewAdmissionForBinding(ctx.surfaceMeasurementBinding));
+  const channel = new ConfirmationDecisionQueue(reviewAdmissionForBinding(ctx.surfaceMeasurementBinding));
   let host;
   host = createConfirmationSurfaceController({
     parent: portal,
@@ -8298,6 +8605,7 @@ function mountHostElement({
       loading,
       title: summary?.title ?? (summary?.delegate ? "Sign Delegate Action" : undefined),
       body: summary?.body,
+      confirmText: reviewAdmissionForBinding(ctx.surfaceMeasurementBinding)?.authMethodApprovalMessages?.confirm,
       signingAuthMode,
       emailOtpPrompt,
       nearExplorerUrl: ctx.nearExplorerUrl ?? explorerOverrides.nearExplorerUrl,
@@ -8311,6 +8619,7 @@ function mountHostElement({
       postWalletUiClosedIfPortalEmpty();
     }
   });
+  channel.attachView(host);
   confirmationHosts.set(host.element, host);
   confirmationChannels.set(host.element, channel);
   updateConfirmPortalState(portal);