@swype-org/deposit 0.3.16 → 0.3.20

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-import { D as DepositStatus, a as DepositResult, b as DepositError, c as DepositConfig, d as DepositRequest } from './types-DYsZwNXq.js';
-export { C as CheckoutConfig, e as CheckoutError, f as CheckoutErrorCode, g as CheckoutStatus, h as DepositErrorCode, S as SignerFunction, i as SignerRequest, j as SignerResponse, T as TransferSummary, k as getDisplayMessage } from './types-DYsZwNXq.js';
+import { D as DepositStatus, a as DepositResult, b as DepositError, c as DepositConfig, d as DepositRequest } from './types-Ds07N2zN.js';
+export { C as CheckoutConfig, e as CheckoutError, f as CheckoutErrorCode, g as CheckoutStatus, h as DepositErrorCode, S as SignerFunction, i as SignerRequest, j as SignerResponse, T as TransferSummary, k as getDisplayMessage } from './types-Ds07N2zN.js';
 
 declare const DEFAULT_WEBVIEW_BASE_URL = "https://pay.blink.cash";
+declare const SANDBOX_WEBVIEW_BASE_URL = "https://pay-sandbox.blink.cash";
 type EventMap = {
     complete: (result: DepositResult) => void;
     error: (error: DepositError) => void;
@@ -36,6 +37,9 @@ declare class Deposit {
     private _error;
     private flowTimer;
     private lastSignerResponse;
+    private warmIframe;
+    private warmIframeReady;
+    private warmIframeReadyCancel;
     private listeners;
     /** Current phase of the deposit flow. */
     get status(): DepositStatus;
@@ -46,6 +50,25 @@ declare class Deposit {
     /** Whether a deposit flow is currently in progress (signer loading or iframe open). */
     get isActive(): boolean;
     constructor(config: DepositConfig);
+    /**
+     * Warm up the hosted payment flow in a hidden iframe so `requestDeposit`
+     * opens an already-loaded page (JS bundle, auth session restore, and —
+     * when {@link DepositConfig.merchantId} is set — merchant config prefetch
+     * all happen in the background).
+     *
+     * Runs automatically after construction unless `preload: false`; call it
+     * manually to control the timing (e.g. on deposit-button hover). No-op
+     * when a warm iframe already exists or a deposit flow is active.
+     */
+    preload(): void;
+    private schedulePreload;
+    private buildPreloadUrl;
+    /**
+     * Detach the warm iframe for use by a starting flow. Returns null (and
+     * cleans up) when there is none or it was closed in the meantime.
+     */
+    private takeWarmIframe;
+    private discardWarmIframe;
     /**
      * Open the hosted payment flow for the given deposit.
      *
@@ -64,8 +87,21 @@ declare class Deposit {
     /** Tear down the instance and release all resources. */
     destroy(): void;
     private log;
+    /**
+     * Appends `enableFullWidget=false` to the hosted-flow URL when the merchant
+     * integration disables the full widget. Absence of the param means enabled
+     * (the default) — the hosted flow ANDs this with the merchant's backend
+     * config, so the full widget renders only when both allow it.
+     */
+    private applyFullWidgetParam;
     private setStatus;
     private runSignerFlow;
+    /**
+     * Resolves true when the iframe posts `blink:iframe-ready`, false on
+     * timeout. `cancel()` settles the promise as false immediately and releases
+     * the listener + timer — used to reap the generous warm-up wait once it no
+     * longer matters (warm iframe consumed or discarded).
+     */
     private waitForIframeReady;
     private startMessageListener;
     private cleanup;
@@ -232,4 +268,4 @@ declare function attachRpcHost(options: RpcHostOptions): RpcHostHandle;
 
 declare const VERSION = "0.3.0";
 
-export { ALLOWED_RPC_METHODS, type AdvertisedWallet, BRIDGE_PROTOCOL_VERSION, type EIP1193Provider as BridgeEIP1193Provider, type BridgeHelloMessage, type BridgeMessage, Checkout, DEFAULT_WEBVIEW_BASE_URL, Deposit, DepositConfig, DepositError, DepositRequest, DepositResult, DepositStatus, type EIP6963ProviderDetail, type EIP6963ProviderInfo, type RegisteredProvider, type RpcEventMessage, type RpcHostHandle, type RpcHostOptions, type RpcRequestMessage, type RpcResponseMessage, VERSION, type WalletDiscovererHandle, type WalletsAdvertisedMessage, attachRpcHost, createWalletDiscoverer, parseBridgeMessage };
+export { ALLOWED_RPC_METHODS, type AdvertisedWallet, BRIDGE_PROTOCOL_VERSION, type EIP1193Provider as BridgeEIP1193Provider, type BridgeHelloMessage, type BridgeMessage, Checkout, DEFAULT_WEBVIEW_BASE_URL, Deposit, DepositConfig, DepositError, DepositRequest, DepositResult, DepositStatus, type EIP6963ProviderDetail, type EIP6963ProviderInfo, type RegisteredProvider, type RpcEventMessage, type RpcHostHandle, type RpcHostOptions, type RpcRequestMessage, type RpcResponseMessage, SANDBOX_WEBVIEW_BASE_URL, VERSION, type WalletDiscovererHandle, type WalletsAdvertisedMessage, attachRpcHost, createWalletDiscoverer, parseBridgeMessage };

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ALLOWED_RPC_METHODS, BRIDGE_PROTOCOL_VERSION, Checkout, CheckoutError, DEFAULT_WEBVIEW_BASE_URL, Deposit, DepositError, attachRpcHost, createWalletDiscoverer, getDisplayMessage, parseBridgeMessage } from './chunk-WD6DVQHT.js';
+export { ALLOWED_RPC_METHODS, BRIDGE_PROTOCOL_VERSION, Checkout, CheckoutError, DEFAULT_WEBVIEW_BASE_URL, Deposit, DepositError, SANDBOX_WEBVIEW_BASE_URL, attachRpcHost, createWalletDiscoverer, getDisplayMessage, parseBridgeMessage } from './chunk-VMXCXXVN.js';
 
 // src/index.ts
 var VERSION = "0.3.0";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AA2CO,IAAM,OAAA,GAAU","file":"index.js","sourcesContent":["export { Deposit, Checkout, DEFAULT_WEBVIEW_BASE_URL } from './checkout.ts';\nexport { DepositError, CheckoutError, getDisplayMessage } from './errors.ts';\nexport type { DepositErrorCode, CheckoutErrorCode } from './errors.ts';\nexport type {\n  DepositConfig,\n  CheckoutConfig,\n  DepositStatus,\n  CheckoutStatus,\n  DepositRequest,\n  DepositResult,\n  SignerFunction,\n  SignerRequest,\n  SignerResponse,\n  TransferSummary,\n} from './types.ts';\n\n// ── Wallet bridge (advanced) ──────────────────────────────────────────\n// Internal building blocks for the top-frame → iframe wallet bridge.\n// Default merchant integrations don't need these — `createIframe()` wires\n// them automatically. Re-exported so monorepo tests and any merchant\n// custom-iframe wrapper can poke at the protocol shapes.\nexport { createWalletDiscoverer } from './walletBridge/discover.ts';\nexport type { WalletDiscovererHandle, RegisteredProvider } from './walletBridge/discover.ts';\nexport { attachRpcHost } from './walletBridge/rpcHost.ts';\nexport type { RpcHostHandle, RpcHostOptions } from './walletBridge/rpcHost.ts';\nexport {\n  ALLOWED_RPC_METHODS,\n  BRIDGE_PROTOCOL_VERSION,\n  parseBridgeMessage,\n} from './walletBridge/protocol.ts';\nexport type {\n  AdvertisedWallet,\n  BridgeMessage,\n  BridgeHelloMessage,\n  WalletsAdvertisedMessage,\n  RpcRequestMessage,\n  RpcResponseMessage,\n  RpcEventMessage,\n  EIP1193Provider as BridgeEIP1193Provider,\n  EIP6963ProviderInfo,\n  EIP6963ProviderDetail,\n} from './walletBridge/protocol.ts';\n\nexport const VERSION = '0.3.0';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AA2CO,IAAM,OAAA,GAAU","file":"index.js","sourcesContent":["export { Deposit, Checkout, DEFAULT_WEBVIEW_BASE_URL, SANDBOX_WEBVIEW_BASE_URL } from './checkout.ts';\nexport { DepositError, CheckoutError, getDisplayMessage } from './errors.ts';\nexport type { DepositErrorCode, CheckoutErrorCode } from './errors.ts';\nexport type {\n  DepositConfig,\n  CheckoutConfig,\n  DepositStatus,\n  CheckoutStatus,\n  DepositRequest,\n  DepositResult,\n  SignerFunction,\n  SignerRequest,\n  SignerResponse,\n  TransferSummary,\n} from './types.ts';\n\n// ── Wallet bridge (advanced) ──────────────────────────────────────────\n// Internal building blocks for the top-frame → iframe wallet bridge.\n// Default merchant integrations don't need these — `createIframe()` wires\n// them automatically. Re-exported so monorepo tests and any merchant\n// custom-iframe wrapper can poke at the protocol shapes.\nexport { createWalletDiscoverer } from './walletBridge/discover.ts';\nexport type { WalletDiscovererHandle, RegisteredProvider } from './walletBridge/discover.ts';\nexport { attachRpcHost } from './walletBridge/rpcHost.ts';\nexport type { RpcHostHandle, RpcHostOptions } from './walletBridge/rpcHost.ts';\nexport {\n  ALLOWED_RPC_METHODS,\n  BRIDGE_PROTOCOL_VERSION,\n  parseBridgeMessage,\n} from './walletBridge/protocol.ts';\nexport type {\n  AdvertisedWallet,\n  BridgeMessage,\n  BridgeHelloMessage,\n  WalletsAdvertisedMessage,\n  RpcRequestMessage,\n  RpcResponseMessage,\n  RpcEventMessage,\n  EIP1193Provider as BridgeEIP1193Provider,\n  EIP6963ProviderInfo,\n  EIP6963ProviderDetail,\n} from './walletBridge/protocol.ts';\n\nexport const VERSION = '0.3.0';\n"]}

package/dist/react.cjs

@@ -529,15 +529,19 @@ var STYLES = `
 [data-blink-overlay][data-blink-mobile-sheet][data-blink-closing] [data-blink-container]{opacity:1;animation:blink-slide-down-full ${CLOSE_DURATION_MS}ms ease-in forwards}
 @media(max-width:${MOBILE_SHEET_MAX_VIEWPORT_PX}px){[data-blink-overlay]{align-items:flex-end;touch-action:none;overscroll-behavior:contain}[data-blink-container]{width:100%;max-width:100%;height:79vh;border-radius:24px 24px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.25);animation:blink-slide-up-full .35s cubic-bezier(.32,.72,0,1);padding-bottom:env(safe-area-inset-bottom,0px)}[data-blink-overlay][data-blink-closing] [data-blink-container]{opacity:1;animation:blink-slide-down-full ${CLOSE_DURATION_MS}ms ease-in forwards}}
 `;
-function createIframe(url, containerElement) {
+function createIframe(url, containerElement, options) {
   ensureStyles();
   let closed = false;
+  let hidden = options?.hidden === true;
   let closeCallback = null;
   const overlay = document.createElement("div");
   overlay.setAttribute("data-blink-overlay", "");
   if (shouldUseMobileSheetLayout()) {
     overlay.setAttribute("data-blink-mobile-sheet", "");
   }
+  if (hidden) {
+    overlay.style.display = "none";
+  }
   const container = document.createElement("div");
   container.setAttribute("data-blink-container", "");
   const iframe = document.createElement("iframe");
@@ -563,8 +567,8 @@ function createIframe(url, containerElement) {
   };
   attachBridge();
   iframe.addEventListener("load", attachBridge);
-  const savedOverflow = document.body.style.overflow;
-  document.body.style.overflow = "hidden";
+  let savedOverflow = "";
+  let scrollLocked = false;
   const onBackdropClick = (event) => {
     if (event.target === overlay) triggerClose();
   };
@@ -574,15 +578,29 @@ function createIframe(url, containerElement) {
   const onTouchMove = (event) => {
     if (event.target === overlay) event.preventDefault();
   };
-  overlay.addEventListener("click", onBackdropClick);
-  overlay.addEventListener("touchmove", onTouchMove, { passive: false });
-  document.addEventListener("keydown", onKeyDown);
+  function lockScroll() {
+    if (scrollLocked) return;
+    scrollLocked = true;
+    savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  function attachDismissalListeners() {
+    overlay.addEventListener("click", onBackdropClick);
+    overlay.addEventListener("touchmove", onTouchMove, { passive: false });
+    document.addEventListener("keydown", onKeyDown);
+  }
+  if (!hidden) {
+    lockScroll();
+    attachDismissalListeners();
+  }
   function removeListeners() {
     overlay.removeEventListener("click", onBackdropClick);
     overlay.removeEventListener("touchmove", onTouchMove);
     document.removeEventListener("keydown", onKeyDown);
   }
   function unlockScroll() {
+    if (!scrollLocked) return;
+    scrollLocked = false;
     document.body.style.overflow = savedOverflow;
   }
   function triggerClose() {
@@ -620,6 +638,21 @@ function createIframe(url, containerElement) {
     isClosed() {
       return closed;
     },
+    isHidden() {
+      return hidden;
+    },
+    reveal() {
+      if (closed || !hidden) return;
+      hidden = false;
+      if (shouldUseMobileSheetLayout()) {
+        overlay.setAttribute("data-blink-mobile-sheet", "");
+      } else {
+        overlay.removeAttribute("data-blink-mobile-sheet");
+      }
+      overlay.style.display = "";
+      lockScroll();
+      attachDismissalListeners();
+    },
     onClose(callback) {
       closeCallback = callback;
     },
@@ -791,6 +824,13 @@ function buildSignerRequest(request, webviewBaseUrl) {
 
 // src/checkout.ts
 var DEFAULT_WEBVIEW_BASE_URL = "https://pay.blink.cash";
+var SANDBOX_WEBVIEW_BASE_URL = "https://pay-sandbox.blink.cash";
+var IFRAME_READY_TIMEOUT_MS = 2e3;
+var WARM_IFRAME_READY_TIMEOUT_MS = 6e4;
+function resolveWebviewBaseUrl(config) {
+  if (config.webviewBaseUrl) return config.webviewBaseUrl;
+  return config.environment === "sandbox" ? SANDBOX_WEBVIEW_BASE_URL : DEFAULT_WEBVIEW_BASE_URL;
+}
 var Deposit = class {
   config;
   iframe = null;
@@ -803,6 +843,9 @@ var Deposit = class {
   _error = null;
   flowTimer = null;
   lastSignerResponse = null;
+  warmIframe = null;
+  warmIframeReady = null;
+  warmIframeReadyCancel = null;
   listeners = {
     complete: /* @__PURE__ */ new Set(),
     error: /* @__PURE__ */ new Set(),
@@ -833,6 +876,93 @@ var Deposit = class {
     this.log("Deposit instance created", {
       signer: typeof config.signer === "string" ? config.signer : "<function>"
     });
+    if (config.preload !== false) {
+      this.schedulePreload();
+    }
+  }
+  /**
+   * Warm up the hosted payment flow in a hidden iframe so `requestDeposit`
+   * opens an already-loaded page (JS bundle, auth session restore, and —
+   * when {@link DepositConfig.merchantId} is set — merchant config prefetch
+   * all happen in the background).
+   *
+   * Runs automatically after construction unless `preload: false`; call it
+   * manually to control the timing (e.g. on deposit-button hover). No-op
+   * when a warm iframe already exists or a deposit flow is active.
+   */
+  preload() {
+    if (this.destroyed || this.isActive) return;
+    if (this.warmIframe && !this.warmIframe.isClosed()) return;
+    if (typeof document === "undefined" || typeof window === "undefined") return;
+    const webviewBaseUrl = resolveWebviewBaseUrl(this.config);
+    this.hostedOrigin = this.config.hostedFlowOrigin ?? new URL(webviewBaseUrl).origin;
+    const preloadUrl = this.buildPreloadUrl(webviewBaseUrl);
+    const iframe = createIframe(preloadUrl, this.config.containerElement, { hidden: true });
+    const ready = this.waitForIframeReady(iframe, WARM_IFRAME_READY_TIMEOUT_MS);
+    this.warmIframe = iframe;
+    this.warmIframeReady = ready.promise;
+    this.warmIframeReadyCancel = ready.cancel;
+    this.log("Warm-up iframe created", { url: preloadUrl });
+  }
+  // Defer the automatic warm-up until the host page has finished its own
+  // load and the main thread is idle — constructing a Deposit instance must
+  // never slow the merchant page down.
+  schedulePreload() {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    const start = () => {
+      if (!this.destroyed && !this.isActive) this.preload();
+    };
+    const whenIdle = () => {
+      const w = window;
+      if (typeof w.requestIdleCallback === "function") {
+        w.requestIdleCallback(start, { timeout: 3e3 });
+      } else {
+        setTimeout(start, 250);
+      }
+    };
+    if (document.readyState === "complete") {
+      whenIdle();
+    } else {
+      window.addEventListener("load", whenIdle, { once: true });
+    }
+  }
+  buildPreloadUrl(webviewBaseUrl) {
+    const preloadUrl = new URL(webviewBaseUrl);
+    preloadUrl.searchParams.set("preload", "true");
+    if (this.config.merchantId) {
+      preloadUrl.searchParams.set("merchantId", this.config.merchantId);
+    }
+    this.applyFullWidgetParam(preloadUrl);
+    return preloadUrl.toString();
+  }
+  /**
+   * Detach the warm iframe for use by a starting flow. Returns null (and
+   * cleans up) when there is none or it was closed in the meantime.
+   */
+  takeWarmIframe() {
+    const iframe = this.warmIframe;
+    const ready = this.warmIframeReady;
+    const cancelReady = this.warmIframeReadyCancel ?? (() => {
+    });
+    this.warmIframe = null;
+    this.warmIframeReady = null;
+    this.warmIframeReadyCancel = null;
+    if (!iframe || !ready) return null;
+    if (iframe.isClosed()) {
+      cancelReady();
+      iframe.destroy();
+      return null;
+    }
+    return { iframe, ready, cancelReady };
+  }
+  discardWarmIframe() {
+    this.warmIframeReadyCancel?.();
+    this.warmIframeReadyCancel = null;
+    this.warmIframeReady = null;
+    if (this.warmIframe) {
+      this.warmIframe.destroy();
+      this.warmIframe = null;
+    }
   }
   /**
    * Open the hosted payment flow for the given deposit.
@@ -920,9 +1050,10 @@ var Deposit = class {
   /** Tear down the instance and release all resources. */
   destroy() {
     this.log("destroy() called");
+    this.destroyed = true;
     this.cleanup();
+    this.discardWarmIframe();
     this.setStatus("idle");
-    this.destroyed = true;
     for (const set of Object.values(this.listeners)) {
       set.clear();
     }
@@ -936,6 +1067,17 @@ var Deposit = class {
       console.debug(`[BlinkDeposit] ${message}`);
     }
   }
+  /**
+   * Appends `enableFullWidget=false` to the hosted-flow URL when the merchant
+   * integration disables the full widget. Absence of the param means enabled
+   * (the default) — the hosted flow ANDs this with the merchant's backend
+   * config, so the full widget renders only when both allow it.
+   */
+  applyFullWidgetParam(url) {
+    if (this.config.enableFullWidget === false) {
+      url.searchParams.set("enableFullWidget", "false");
+    }
+  }
   setStatus(status) {
     if (this._status === status) return;
     this.log(`Status: ${this._status} \u2192 ${status}`);
@@ -944,15 +1086,35 @@ var Deposit = class {
   }
   async runSignerFlow(request, requestId, onComplete, onError) {
     try {
-      const webviewBaseUrl = this.config.webviewBaseUrl ?? DEFAULT_WEBVIEW_BASE_URL;
+      const webviewBaseUrl = resolveWebviewBaseUrl(this.config);
       this.hostedOrigin = this.config.hostedFlowOrigin ?? new URL(webviewBaseUrl).origin;
       this.log("Calling signer", {
         signer: typeof this.config.signer === "string" ? this.config.signer : "<function>"
       });
       const signerRequest = buildSignerRequest(request, webviewBaseUrl);
-      const preloadUrl = new URL(webviewBaseUrl);
-      preloadUrl.searchParams.set("preload", "true");
-      const preloadIframe = createIframe(preloadUrl.toString(), this.config.containerElement);
+      let preloadIframe;
+      let iframeReadyPromise;
+      const warm = this.takeWarmIframe();
+      if (warm) {
+        warm.iframe.reveal();
+        preloadIframe = warm.iframe;
+        iframeReadyPromise = Promise.race([
+          warm.ready,
+          new Promise(
+            (resolve) => setTimeout(() => resolve(false), IFRAME_READY_TIMEOUT_MS)
+          )
+        ]).then((ready) => {
+          warm.cancelReady();
+          return ready;
+        });
+        this.log("Reusing warm preload iframe");
+      } else {
+        preloadIframe = createIframe(
+          this.buildPreloadUrl(webviewBaseUrl),
+          this.config.containerElement
+        );
+        iframeReadyPromise = this.waitForIframeReady(preloadIframe).promise;
+      }
       this.iframe = preloadIframe;
       preloadIframe.onClose(() => {
         onError(
@@ -969,7 +1131,6 @@ var Deposit = class {
         signerRequest,
         this.config.signerTimeoutMs
       );
-      const iframeReadyPromise = this.waitForIframeReady(preloadIframe);
       const [signerResponse, iframeReady] = await Promise.all([
         signerPromise,
         iframeReadyPromise
@@ -1001,6 +1162,7 @@ var Deposit = class {
         hostedUrl.searchParams.set("merchantId", signerResponse.merchantId);
         hostedUrl.searchParams.set("payload", signerResponse.payload);
         hostedUrl.searchParams.set("signature", signerResponse.signature);
+        this.applyFullWidgetParam(hostedUrl);
         const targetUrl = hostedUrl.toString();
         const iframeHandle = createIframe(targetUrl, this.config.containerElement);
         this.iframe = iframeHandle;
@@ -1033,24 +1195,38 @@ var Deposit = class {
       }
     }
   }
-  waitForIframeReady(iframeHandle) {
-    return new Promise((resolve) => {
+  /**
+   * Resolves true when the iframe posts `blink:iframe-ready`, false on
+   * timeout. `cancel()` settles the promise as false immediately and releases
+   * the listener + timer — used to reap the generous warm-up wait once it no
+   * longer matters (warm iframe consumed or discarded).
+   */
+  waitForIframeReady(iframeHandle, timeoutMs = IFRAME_READY_TIMEOUT_MS) {
+    let finish = () => {
+    };
+    const promise = new Promise((resolve) => {
       const handler = (event) => {
         if (event.origin !== this.hostedOrigin) return;
         if (event.source !== iframeHandle.contentWindow) return;
         if (parseIframeReady(event.data)) {
-          window.removeEventListener("message", handler);
-          clearTimeout(timeout);
-          resolve(true);
+          finish(true);
         }
       };
       window.addEventListener("message", handler);
       const timeout = setTimeout(() => {
-        window.removeEventListener("message", handler);
         this.log("Iframe ready timeout \u2014 falling back to URL params");
-        resolve(false);
-      }, 2e3);
+        finish(false);
+      }, timeoutMs);
+      let settled = false;
+      finish = (ready) => {
+        if (settled) return;
+        settled = true;
+        window.removeEventListener("message", handler);
+        clearTimeout(timeout);
+        resolve(ready);
+      };
     });
+    return { promise, cancel: () => finish(false) };
   }
   startMessageListener(iframeHandle, onComplete) {
     const handler = (event) => {
@@ -1110,6 +1286,9 @@ var Deposit = class {
     }
     this.hostedOrigin = null;
     this.lastSignerResponse = null;
+    if (!this.destroyed && this.config.preload !== false) {
+      this.schedulePreload();
+    }
   }
   emit(event, ...args) {
     for (const handler of this.listeners[event]) {
@@ -1120,6 +1299,119 @@ var Deposit = class {
     }
   }
 };
+function svgToDataUri(svg) {
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+var USDC_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
+<path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/>
+<path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/>
+<path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/>
+</svg>`;
+var TETHER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
+<circle fill="#009393" cx="400" cy="400" r="400"/>
+<path fill="#fff" fill-rule="evenodd" d="M400.49,428.59c68.79,0,126.28-11.63,140.33-27.17-11.93-13.18-55.08-23.56-109.88-26.4v32.83c-9.81.51-20.01.76-30.46.76s-20.65-.25-30.48-.76v-32.83c-54.78,2.84-97.95,13.22-109.88,26.4,14.07,15.54,71.57,27.17,140.36,27.17ZM522.71,274.06v45.21h-91.77v31.35c64.46,3.35,112.83,17.13,113.19,33.62v34.38c-.36,16.49-48.73,30.24-113.19,33.6v76.94h-60.93v-76.94c-64.46-3.35-112.81-17.11-113.17-33.6v-34.38c.36-16.49,48.71-30.27,113.17-33.62v-31.35h-91.77v-45.21h244.48ZM242.15,202.11h322.16c7.7,0,14.79,4.05,18.63,10.63l93.85,161.16c4.86,8.36,3.42,18.91-3.52,25.68l-258.34,252.18c-8.38,8.17-21.84,8.17-30.2,0L126.71,399.92c-7.09-6.94-8.43-17.79-3.2-26.19l100.33-161.49c3.91-6.28,10.85-10.12,18.32-10.12Z"/>
+</svg>`;
+var USDC_LOGO = svgToDataUri(USDC_SVG);
+var TETHER_LOGO = svgToDataUri(TETHER_SVG);
+function BlinkDepositButton({
+  onClick,
+  disabled,
+  loading
+}) {
+  const [hovered, setHovered] = react.useState(false);
+  const [pressed, setPressed] = react.useState(false);
+  const inactive = !!disabled || !!loading;
+  return react.createElement(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: inactive,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => {
+        setHovered(false);
+        setPressed(false);
+      },
+      onMouseDown: () => setPressed(true),
+      onMouseUp: () => setPressed(false),
+      style: pillStyle({ hovered, pressed, inactive, loading: !!loading })
+    },
+    react.createElement(
+      "span",
+      { style: labelStackStyle },
+      react.createElement("span", { style: titleStyle }, "Deposit stablecoins"),
+      react.createElement("span", { style: subtitleStyle }, "In a Blink")
+    ),
+    react.createElement(
+      "span",
+      { style: coinsStyle },
+      // The left (USDC) coin paints over the right one, against DOM paint order.
+      react.createElement("img", {
+        src: USDC_LOGO,
+        alt: "",
+        "aria-hidden": "true",
+        style: { ...coinStyle, marginRight: -8, position: "relative", zIndex: 1 }
+      }),
+      react.createElement("img", { src: TETHER_LOGO, alt: "", "aria-hidden": "true", style: coinStyle })
+    )
+  );
+}
+var pillStyle = (state) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 8,
+  width: "100%",
+  height: 56,
+  padding: "12px 15px 12px 22px",
+  backgroundColor: "#000000",
+  // A faint white film on hover rather than `filter: brightness()` — a
+  // brightness multiply leaves pure black unchanged.
+  backgroundImage: !state.inactive && state.hovered ? "linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12))" : void 0,
+  color: "#fafafa",
+  border: "none",
+  borderRadius: 36,
+  cursor: state.inactive ? state.loading ? "progress" : "not-allowed" : "pointer",
+  opacity: state.inactive ? 0.72 : 1,
+  boxSizing: "border-box",
+  // Explicit stack so the button is self-sufficient on any host page.
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  textAlign: "left",
+  transform: !state.inactive && state.pressed ? "scale(0.98)" : void 0,
+  transition: "background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease"
+});
+var labelStackStyle = {
+  display: "flex",
+  flexDirection: "column",
+  minWidth: 0
+};
+var titleStyle = {
+  fontSize: 16,
+  fontWeight: 700,
+  lineHeight: "normal",
+  whiteSpace: "nowrap"
+};
+var subtitleStyle = {
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: "italic",
+  lineHeight: "normal",
+  whiteSpace: "nowrap"
+};
+var coinsStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  flexShrink: 0,
+  // Scope the front coin's z-index so it can't escape over host page layers.
+  isolation: "isolate"
+};
+var coinStyle = {
+  width: 29,
+  height: 29,
+  borderRadius: "50%",
+  objectFit: "cover",
+  display: "block"
+};
 
 // src/react.ts
 function useBlinkDeposit(config) {
@@ -1163,6 +1455,7 @@ function useBlinkDeposit(config) {
 var useBlinkCheckout = useBlinkDeposit;
 var useSwypeCheckout = useBlinkDeposit;
 
+exports.BlinkDepositButton = BlinkDepositButton;
 exports.DepositError = DepositError;
 exports.getDisplayMessage = getDisplayMessage;
 exports.useBlinkCheckout = useBlinkCheckout;