@swype-org/deposit 0.3.16 → 0.3.19

package/dist/react.d.cts

@@ -1,5 +1,36 @@
-import { c as DepositConfig, D as DepositStatus, a as DepositResult, b as DepositError, d as DepositRequest } from './types-DYsZwNXq.cjs';
-export { k as getDisplayMessage } from './types-DYsZwNXq.cjs';
+import { c as DepositConfig, D as DepositStatus, a as DepositResult, b as DepositError, d as DepositRequest } from './types-Ds07N2zN.cjs';
+export { k as getDisplayMessage } from './types-Ds07N2zN.cjs';
+import { ReactElement } from 'react';
+
+interface BlinkDepositButtonProps {
+    /** Fired when the user taps the button. Hosts typically call `requestDeposit()` here. */
+    onClick: () => void;
+    /** Disables interaction and dims the button. */
+    disabled?: boolean;
+    /** Non-interactive waiting state (e.g. while the signer request is in flight). Dims like disabled. */
+    loading?: boolean;
+}
+/**
+ * Blink-branded deposit button merchants can drop onto their page instead of
+ * building their own: a black pill with a bold "Deposit stablecoins" line over
+ * an italic "In a Blink" line, and overlapping USDC/USDT coin marks on the
+ * right. Self-contained — inline styles and data-URI icons, no CSS imports.
+ *
+ * ```tsx
+ * import { BlinkDepositButton, useBlinkDeposit } from '@swype-org/deposit/react';
+ *
+ * function Checkout() {
+ *   const { status, requestDeposit } = useBlinkDeposit({ signer: '/api/sign-payment' });
+ *   return (
+ *     <BlinkDepositButton
+ *       onClick={() => requestDeposit({ amount: 50, chainId: 8453, address: '0x…', token: '0x…' })}
+ *       loading={status === 'signer-loading'}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function BlinkDepositButton({ onClick, disabled, loading, }: BlinkDepositButtonProps): ReactElement;
 
 interface UseBlinkDepositReturn {
     /** Current phase of the deposit flow. */
@@ -51,4 +82,4 @@ declare const useBlinkCheckout: typeof useBlinkDeposit;
 /** @deprecated Use {@link useBlinkDeposit} instead. */
 declare const useSwypeCheckout: typeof useBlinkDeposit;
 
-export { DepositConfig, DepositError, DepositRequest, DepositResult, DepositStatus, useBlinkCheckout, useBlinkDeposit, useSwypeCheckout };
+export { BlinkDepositButton, type BlinkDepositButtonProps, DepositConfig, DepositError, DepositRequest, DepositResult, DepositStatus, useBlinkCheckout, useBlinkDeposit, useSwypeCheckout };

package/dist/react.d.ts

@@ -1,5 +1,36 @@
-import { c as DepositConfig, D as DepositStatus, a as DepositResult, b as DepositError, d as DepositRequest } from './types-DYsZwNXq.js';
-export { k as getDisplayMessage } from './types-DYsZwNXq.js';
+import { c as DepositConfig, D as DepositStatus, a as DepositResult, b as DepositError, d as DepositRequest } from './types-Ds07N2zN.js';
+export { k as getDisplayMessage } from './types-Ds07N2zN.js';
+import { ReactElement } from 'react';
+
+interface BlinkDepositButtonProps {
+    /** Fired when the user taps the button. Hosts typically call `requestDeposit()` here. */
+    onClick: () => void;
+    /** Disables interaction and dims the button. */
+    disabled?: boolean;
+    /** Non-interactive waiting state (e.g. while the signer request is in flight). Dims like disabled. */
+    loading?: boolean;
+}
+/**
+ * Blink-branded deposit button merchants can drop onto their page instead of
+ * building their own: a black pill with a bold "Deposit stablecoins" line over
+ * an italic "In a Blink" line, and overlapping USDC/USDT coin marks on the
+ * right. Self-contained — inline styles and data-URI icons, no CSS imports.
+ *
+ * ```tsx
+ * import { BlinkDepositButton, useBlinkDeposit } from '@swype-org/deposit/react';
+ *
+ * function Checkout() {
+ *   const { status, requestDeposit } = useBlinkDeposit({ signer: '/api/sign-payment' });
+ *   return (
+ *     <BlinkDepositButton
+ *       onClick={() => requestDeposit({ amount: 50, chainId: 8453, address: '0x…', token: '0x…' })}
+ *       loading={status === 'signer-loading'}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function BlinkDepositButton({ onClick, disabled, loading, }: BlinkDepositButtonProps): ReactElement;
 
 interface UseBlinkDepositReturn {
     /** Current phase of the deposit flow. */
@@ -51,4 +82,4 @@ declare const useBlinkCheckout: typeof useBlinkDeposit;
 /** @deprecated Use {@link useBlinkDeposit} instead. */
 declare const useSwypeCheckout: typeof useBlinkDeposit;
 
-export { DepositConfig, DepositError, DepositRequest, DepositResult, DepositStatus, useBlinkCheckout, useBlinkDeposit, useSwypeCheckout };
+export { BlinkDepositButton, type BlinkDepositButtonProps, DepositConfig, DepositError, DepositRequest, DepositResult, DepositStatus, useBlinkCheckout, useBlinkDeposit, useSwypeCheckout };

package/dist/react.js

@@ -1,7 +1,122 @@
-import { Deposit, getDisplayMessage } from './chunk-WD6DVQHT.js';
-export { DepositError, getDisplayMessage } from './chunk-WD6DVQHT.js';
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { Deposit, getDisplayMessage } from './chunk-VMXCXXVN.js';
+export { DepositError, getDisplayMessage } from './chunk-VMXCXXVN.js';
+import { useState, createElement, useRef, useEffect, useCallback } from 'react';
 
+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] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const inactive = !!disabled || !!loading;
+  return 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 })
+    },
+    createElement(
+      "span",
+      { style: labelStackStyle },
+      createElement("span", { style: titleStyle }, "Deposit stablecoins"),
+      createElement("span", { style: subtitleStyle }, "In a Blink")
+    ),
+    createElement(
+      "span",
+      { style: coinsStyle },
+      // The left (USDC) coin paints over the right one, against DOM paint order.
+      createElement("img", {
+        src: USDC_LOGO,
+        alt: "",
+        "aria-hidden": "true",
+        style: { ...coinStyle, marginRight: -8, position: "relative", zIndex: 1 }
+      }),
+      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) {
   const depositRef = useRef(null);
   const [status, setStatus] = useState("idle");
@@ -43,6 +158,6 @@ function useBlinkDeposit(config) {
 var useBlinkCheckout = useBlinkDeposit;
 var useSwypeCheckout = useBlinkDeposit;
 
-export { useBlinkCheckout, useBlinkDeposit, useSwypeCheckout };
+export { BlinkDepositButton, useBlinkCheckout, useBlinkDeposit, useSwypeCheckout };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react.ts"],"names":[],"mappings":";;;;AA2DO,SAAS,gBAAgB,MAAA,EAA8C;AAC5E,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAwB,MAAM,CAAA;AAC1D,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAA+B,IAAI,CAAA;AAC/D,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAA8B,IAAI,CAAA;AAE5D,EAAA,IAAI,CAAC,WAAW,OAAA,EAAS;AACvB,IAAA,UAAA,CAAW,OAAA,GAAU,IAAI,OAAA,CAAQ,MAAM,CAAA;AAAA,EACzC;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAE3B,IAAA,MAAM,cAAA,GAAiB,CAAC,CAAA,KAAqB,SAAA,CAAU,CAAC,CAAA;AACxD,IAAA,MAAM,UAAA,GAAa,CAAC,CAAA,KAAqB;AACvC,MAAA,SAAA,CAAU,CAAC,CAAA;AACX,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,IACf,CAAA;AACA,IAAA,MAAM,OAAA,GAAU,CAAC,CAAA,KAAoB,QAAA,CAAS,CAAC,CAAA;AAE/C,IAAA,OAAA,CAAQ,EAAA,CAAG,iBAAiB,cAAc,CAAA;AAC1C,IAAA,OAAA,CAAQ,EAAA,CAAG,YAAY,UAAU,CAAA;AACjC,IAAA,OAAA,CAAQ,EAAA,CAAG,SAAS,OAAO,CAAA;AAE3B,IAAA,OAAO,MAAM;AACX,MAAA,OAAA,CAAQ,GAAA,CAAI,iBAAiB,cAAc,CAAA;AAC3C,MAAA,OAAA,CAAQ,GAAA,CAAI,YAAY,UAAU,CAAA;AAClC,MAAA,OAAA,CAAQ,GAAA,CAAI,SAAS,OAAO,CAAA;AAC5B,MAAA,OAAA,CAAQ,OAAA,EAAQ;AAChB,MAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,OAAA,KAA4B,UAAA,CAAW,OAAA,CAAS,eAAe,OAAO,CAAA;AAAA,IACvE;AAAC,GACH;AAEA,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAAA,EAAC,CAAA,EAAG,EAAE,CAAA;AACtC,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM,UAAA,CAAW,SAAS,KAAA,EAAM,EAAG,EAAE,CAAA;AAE/D,EAAA,MAAM,cAAA,GAAiB,KAAA,GAAQ,iBAAA,CAAkB,KAAK,CAAA,GAAI,IAAA;AAC1D,EAAA,MAAM,QAAA,GAAW,MAAA,KAAW,gBAAA,IAAoB,MAAA,KAAW,eAAA;AAE3D,EAAA,OAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,gBAAgB,QAAA,EAAU,cAAA,EAAgB,OAAO,KAAA,EAAM;AACzF;AAGO,IAAM,gBAAA,GAAmB;AAGzB,IAAM,gBAAA,GAAmB","file":"react.js","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Deposit } from './checkout.ts';\nimport { DepositError, getDisplayMessage } from './errors.ts';\nimport type {\n  DepositConfig,\n  DepositStatus,\n  DepositRequest,\n  DepositResult,\n} from './types.ts';\n\nexport type { DepositConfig, DepositStatus, DepositRequest, DepositResult };\nexport { DepositError, getDisplayMessage };\n\ninterface UseBlinkDepositReturn {\n  /** Current phase of the deposit flow. */\n  status: DepositStatus;\n  /** Last successful deposit result, or `null`. */\n  result: DepositResult | null;\n  /** Last deposit error, or `null`. */\n  error: DepositError | null;\n  /** User-friendly error message derived from the current error, or `null`. */\n  displayMessage: string | null;\n  /** Whether a deposit flow is currently in progress. */\n  isActive: boolean;\n  /** Start a deposit flow. Opens a modal iframe with the hosted deposit. */\n  requestDeposit: (request: DepositRequest) => Promise<DepositResult>;\n  /** No-op — retained for API compatibility. */\n  focus: () => void;\n  /** Close the deposit iframe and reset to idle. */\n  close: () => void;\n}\n\n/**\n * React hook that wraps the {@link Deposit} class with reactive state.\n *\n * ```tsx\n * import { useBlinkDeposit } from '@swype-org/deposit/react';\n *\n * function DepositButton() {\n *   const { status, result, error, displayMessage, requestDeposit } = useBlinkDeposit({\n *     signer: '/api/sign-payment',\n *   });\n *\n *   return (\n *     <>\n *       <button\n *         onClick={() => requestDeposit({ amount: 50, chainId: 8453, address: '0x...', token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' })}\n *         disabled={status === 'signer-loading'}\n *       >\n *         {status === 'signer-loading' ? 'Preparing…' : 'Deposit'}\n *       </button>\n *       {error && <p>{displayMessage}</p>}\n *       {result && <p>Transfer {result.transfer.id} complete!</p>}\n *     </>\n *   );\n * }\n * ```\n */\nexport function useBlinkDeposit(config: DepositConfig): UseBlinkDepositReturn {\n  const depositRef = useRef<Deposit | null>(null);\n  const [status, setStatus] = useState<DepositStatus>('idle');\n  const [result, setResult] = useState<DepositResult | null>(null);\n  const [error, setError] = useState<DepositError | null>(null);\n\n  if (!depositRef.current) {\n    depositRef.current = new Deposit(config);\n  }\n\n  useEffect(() => {\n    const deposit = depositRef.current!;\n\n    const onStatusChange = (s: DepositStatus) => setStatus(s);\n    const onComplete = (r: DepositResult) => {\n      setResult(r);\n      setError(null);\n    };\n    const onError = (e: DepositError) => setError(e);\n\n    deposit.on('status-change', onStatusChange);\n    deposit.on('complete', onComplete);\n    deposit.on('error', onError);\n\n    return () => {\n      deposit.off('status-change', onStatusChange);\n      deposit.off('complete', onComplete);\n      deposit.off('error', onError);\n      deposit.destroy();\n      depositRef.current = null;\n    };\n  }, []);\n\n  const requestDeposit = useCallback(\n    (request: DepositRequest) => depositRef.current!.requestDeposit(request),\n    [],\n  );\n\n  const focus = useCallback(() => {}, []);\n  const close = useCallback(() => depositRef.current?.close(), []);\n\n  const displayMessage = error ? getDisplayMessage(error) : null;\n  const isActive = status === 'signer-loading' || status === 'iframe-active';\n\n  return { status, result, error, displayMessage, isActive, requestDeposit, focus, close };\n}\n\n/** @deprecated Use {@link useBlinkDeposit} instead. */\nexport const useBlinkCheckout = useBlinkDeposit;\n\n/** @deprecated Use {@link useBlinkDeposit} instead. */\nexport const useSwypeCheckout = useBlinkDeposit;\n"]}
+{"version":3,"sources":["../src/BlinkDepositButton.ts","../src/react.ts"],"names":["useState"],"mappings":"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","file":"react.js","sourcesContent":["import { createElement, useState } from 'react';\nimport type { CSSProperties, ReactElement } from 'react';\n\n// Inline data URIs (no asset pipeline) so the button stays dependency-free on\n// merchant pages. Marks mirror swype-sdk/src/assets/logos.ts.\nfunction svgToDataUri(svg: string): string {\n  return `data:image/svg+xml,${encodeURIComponent(svg)}`;\n}\n\nconst USDC_SVG = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2000 2000\">\n<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\"/>\n<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\"/>\n<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\"/>\n</svg>`;\n\nconst TETHER_SVG = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 800 800\">\n<circle fill=\"#009393\" cx=\"400\" cy=\"400\" r=\"400\"/>\n<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\"/>\n</svg>`;\n\nconst USDC_LOGO = svgToDataUri(USDC_SVG);\nconst TETHER_LOGO = svgToDataUri(TETHER_SVG);\n\nexport interface BlinkDepositButtonProps {\n  /** Fired when the user taps the button. Hosts typically call `requestDeposit()` here. */\n  onClick: () => void;\n  /** Disables interaction and dims the button. */\n  disabled?: boolean;\n  /** Non-interactive waiting state (e.g. while the signer request is in flight). Dims like disabled. */\n  loading?: boolean;\n}\n\n/**\n * Blink-branded deposit button merchants can drop onto their page instead of\n * building their own: a black pill with a bold \"Deposit stablecoins\" line over\n * an italic \"In a Blink\" line, and overlapping USDC/USDT coin marks on the\n * right. Self-contained — inline styles and data-URI icons, no CSS imports.\n *\n * ```tsx\n * import { BlinkDepositButton, useBlinkDeposit } from '@swype-org/deposit/react';\n *\n * function Checkout() {\n *   const { status, requestDeposit } = useBlinkDeposit({ signer: '/api/sign-payment' });\n *   return (\n *     <BlinkDepositButton\n *       onClick={() => requestDeposit({ amount: 50, chainId: 8453, address: '0x…', token: '0x…' })}\n *       loading={status === 'signer-loading'}\n *     />\n *   );\n * }\n * ```\n */\nexport function BlinkDepositButton({\n  onClick,\n  disabled,\n  loading,\n}: BlinkDepositButtonProps): ReactElement {\n  const [hovered, setHovered] = useState(false);\n  const [pressed, setPressed] = useState(false);\n  const inactive = !!disabled || !!loading;\n\n  return createElement(\n    'button',\n    {\n      type: 'button',\n      onClick,\n      disabled: inactive,\n      onMouseEnter: () => setHovered(true),\n      onMouseLeave: () => {\n        setHovered(false);\n        setPressed(false);\n      },\n      onMouseDown: () => setPressed(true),\n      onMouseUp: () => setPressed(false),\n      style: pillStyle({ hovered, pressed, inactive, loading: !!loading }),\n    },\n    createElement(\n      'span',\n      { style: labelStackStyle },\n      createElement('span', { style: titleStyle }, 'Deposit stablecoins'),\n      createElement('span', { style: subtitleStyle }, 'In a Blink'),\n    ),\n    createElement(\n      'span',\n      { style: coinsStyle },\n      // The left (USDC) coin paints over the right one, against DOM paint order.\n      createElement('img', {\n        src: USDC_LOGO,\n        alt: '',\n        'aria-hidden': 'true',\n        style: { ...coinStyle, marginRight: -8, position: 'relative', zIndex: 1 },\n      }),\n      createElement('img', { src: TETHER_LOGO, alt: '', 'aria-hidden': 'true', style: coinStyle }),\n    ),\n  );\n}\n\nconst pillStyle = (state: {\n  hovered: boolean;\n  pressed: boolean;\n  inactive: boolean;\n  loading: boolean;\n}): CSSProperties => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 8,\n  width: '100%',\n  height: 56,\n  padding: '12px 15px 12px 22px',\n  backgroundColor: '#000000',\n  // A faint white film on hover rather than `filter: brightness()` — a\n  // brightness multiply leaves pure black unchanged.\n  backgroundImage:\n    !state.inactive && state.hovered\n      ? 'linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12))'\n      : undefined,\n  color: '#fafafa',\n  border: 'none',\n  borderRadius: 36,\n  cursor: state.inactive ? (state.loading ? 'progress' : 'not-allowed') : 'pointer',\n  opacity: state.inactive ? 0.72 : 1,\n  boxSizing: 'border-box',\n  // Explicit stack so the button is self-sufficient on any host page.\n  fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n  textAlign: 'left',\n  transform: !state.inactive && state.pressed ? 'scale(0.98)' : undefined,\n  transition: 'background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease',\n});\n\nconst labelStackStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n};\n\nconst titleStyle: CSSProperties = {\n  fontSize: 16,\n  fontWeight: 700,\n  lineHeight: 'normal',\n  whiteSpace: 'nowrap',\n};\n\nconst subtitleStyle: CSSProperties = {\n  fontSize: 16,\n  fontWeight: 400,\n  fontStyle: 'italic',\n  lineHeight: 'normal',\n  whiteSpace: 'nowrap',\n};\n\nconst coinsStyle: CSSProperties = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  flexShrink: 0,\n  // Scope the front coin's z-index so it can't escape over host page layers.\n  isolation: 'isolate',\n};\n\nconst coinStyle: CSSProperties = {\n  width: 29,\n  height: 29,\n  borderRadius: '50%',\n  objectFit: 'cover',\n  display: 'block',\n};\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Deposit } from './checkout.ts';\nimport { DepositError, getDisplayMessage } from './errors.ts';\nimport type {\n  DepositConfig,\n  DepositStatus,\n  DepositRequest,\n  DepositResult,\n} from './types.ts';\n\nexport type { DepositConfig, DepositStatus, DepositRequest, DepositResult };\nexport { DepositError, getDisplayMessage };\nexport { BlinkDepositButton } from './BlinkDepositButton.ts';\nexport type { BlinkDepositButtonProps } from './BlinkDepositButton.ts';\n\ninterface UseBlinkDepositReturn {\n  /** Current phase of the deposit flow. */\n  status: DepositStatus;\n  /** Last successful deposit result, or `null`. */\n  result: DepositResult | null;\n  /** Last deposit error, or `null`. */\n  error: DepositError | null;\n  /** User-friendly error message derived from the current error, or `null`. */\n  displayMessage: string | null;\n  /** Whether a deposit flow is currently in progress. */\n  isActive: boolean;\n  /** Start a deposit flow. Opens a modal iframe with the hosted deposit. */\n  requestDeposit: (request: DepositRequest) => Promise<DepositResult>;\n  /** No-op — retained for API compatibility. */\n  focus: () => void;\n  /** Close the deposit iframe and reset to idle. */\n  close: () => void;\n}\n\n/**\n * React hook that wraps the {@link Deposit} class with reactive state.\n *\n * ```tsx\n * import { useBlinkDeposit } from '@swype-org/deposit/react';\n *\n * function DepositButton() {\n *   const { status, result, error, displayMessage, requestDeposit } = useBlinkDeposit({\n *     signer: '/api/sign-payment',\n *   });\n *\n *   return (\n *     <>\n *       <button\n *         onClick={() => requestDeposit({ amount: 50, chainId: 8453, address: '0x...', token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' })}\n *         disabled={status === 'signer-loading'}\n *       >\n *         {status === 'signer-loading' ? 'Preparing…' : 'Deposit'}\n *       </button>\n *       {error && <p>{displayMessage}</p>}\n *       {result && <p>Transfer {result.transfer.id} complete!</p>}\n *     </>\n *   );\n * }\n * ```\n */\nexport function useBlinkDeposit(config: DepositConfig): UseBlinkDepositReturn {\n  const depositRef = useRef<Deposit | null>(null);\n  const [status, setStatus] = useState<DepositStatus>('idle');\n  const [result, setResult] = useState<DepositResult | null>(null);\n  const [error, setError] = useState<DepositError | null>(null);\n\n  if (!depositRef.current) {\n    depositRef.current = new Deposit(config);\n  }\n\n  useEffect(() => {\n    const deposit = depositRef.current!;\n\n    const onStatusChange = (s: DepositStatus) => setStatus(s);\n    const onComplete = (r: DepositResult) => {\n      setResult(r);\n      setError(null);\n    };\n    const onError = (e: DepositError) => setError(e);\n\n    deposit.on('status-change', onStatusChange);\n    deposit.on('complete', onComplete);\n    deposit.on('error', onError);\n\n    return () => {\n      deposit.off('status-change', onStatusChange);\n      deposit.off('complete', onComplete);\n      deposit.off('error', onError);\n      deposit.destroy();\n      depositRef.current = null;\n    };\n  }, []);\n\n  const requestDeposit = useCallback(\n    (request: DepositRequest) => depositRef.current!.requestDeposit(request),\n    [],\n  );\n\n  const focus = useCallback(() => {}, []);\n  const close = useCallback(() => depositRef.current?.close(), []);\n\n  const displayMessage = error ? getDisplayMessage(error) : null;\n  const isActive = status === 'signer-loading' || status === 'iframe-active';\n\n  return { status, result, error, displayMessage, isActive, requestDeposit, focus, close };\n}\n\n/** @deprecated Use {@link useBlinkDeposit} instead. */\nexport const useBlinkCheckout = useBlinkDeposit;\n\n/** @deprecated Use {@link useBlinkDeposit} instead. */\nexport const useSwypeCheckout = useBlinkDeposit;\n"]}

package/dist/{types-DYsZwNXq.d.cts → types-Ds07N2zN.d.cts}

@@ -41,11 +41,23 @@ interface DepositConfig {
      * aspect of the signing request.
      */
     signer: string | SignerFunction;
+    /**
+     * Blink environment to target.
+     *
+     * `'sandbox'` points the hosted flow at the public testnet environment
+     * (`https://pay-sandbox.blink.cash`), where deposits run on test networks
+     * with separate merchant credentials. An explicit {@link webviewBaseUrl}
+     * always takes precedence over this option.
+     *
+     * @default 'production'
+     */
+    environment?: 'production' | 'sandbox';
     /**
      * Base URL of the hosted payment webview app.
      *
      * The SDK appends `merchantId`, `payload`, and `signature` query parameters
-     * to this URL and loads the result in a modal iframe.
+     * to this URL and loads the result in a modal iframe. When set, this
+     * overrides {@link environment}.
      *
      * @default 'https://pay.blink.cash'
      */
@@ -75,6 +87,37 @@ interface DepositConfig {
      * with a `FLOW_TIMEOUT` error. `undefined` means no limit.
      */
     flowTimeoutMs?: number;
+    /**
+     * Whether the hosted flow may show the full widget (Deposit Options entry
+     * screen). The full widget only appears when this is enabled (default) AND
+     * the merchant's backend config has it enabled — disabling either turns it
+     * off.
+     *
+     * @default true
+     */
+    enableFullWidget?: boolean;
+    /**
+     * Warm up the hosted payment flow in a hidden iframe as soon as the
+     * `Deposit` instance is constructed (deferred until the host page has
+     * loaded and the main thread is idle). By the time the user starts a
+     * deposit, the flow's JS bundle and auth session are already loaded, so
+     * the payment UI appears near-instantly.
+     *
+     * Costs roughly one page load of bandwidth even if the user never
+     * deposits. Set `false` to opt out and call {@link Deposit.preload}
+     * manually (e.g. on deposit-button hover) — or not at all.
+     *
+     * @default true
+     */
+    preload?: boolean;
+    /**
+     * Optional merchant id, appended to the warm-up URL so the hosted flow can
+     * prefetch the merchant's config and signing public key before the signer
+     * responds. Purely a performance hint: it is never trusted for
+     * authorization, which always comes from the signed payload returned by
+     * {@link signer}.
+     */
+    merchantId?: string;
     /**
      * When `true`, the SDK logs lifecycle events (signer calls, iframe state,
      * message reception, errors) to `console.debug`. Useful during integration.

package/dist/{types-DYsZwNXq.d.ts → types-Ds07N2zN.d.ts}

@@ -41,11 +41,23 @@ interface DepositConfig {
      * aspect of the signing request.
      */
     signer: string | SignerFunction;
+    /**
+     * Blink environment to target.
+     *
+     * `'sandbox'` points the hosted flow at the public testnet environment
+     * (`https://pay-sandbox.blink.cash`), where deposits run on test networks
+     * with separate merchant credentials. An explicit {@link webviewBaseUrl}
+     * always takes precedence over this option.
+     *
+     * @default 'production'
+     */
+    environment?: 'production' | 'sandbox';
     /**
      * Base URL of the hosted payment webview app.
      *
      * The SDK appends `merchantId`, `payload`, and `signature` query parameters
-     * to this URL and loads the result in a modal iframe.
+     * to this URL and loads the result in a modal iframe. When set, this
+     * overrides {@link environment}.
      *
      * @default 'https://pay.blink.cash'
      */
@@ -75,6 +87,37 @@ interface DepositConfig {
      * with a `FLOW_TIMEOUT` error. `undefined` means no limit.
      */
     flowTimeoutMs?: number;
+    /**
+     * Whether the hosted flow may show the full widget (Deposit Options entry
+     * screen). The full widget only appears when this is enabled (default) AND
+     * the merchant's backend config has it enabled — disabling either turns it
+     * off.
+     *
+     * @default true
+     */
+    enableFullWidget?: boolean;
+    /**
+     * Warm up the hosted payment flow in a hidden iframe as soon as the
+     * `Deposit` instance is constructed (deferred until the host page has
+     * loaded and the main thread is idle). By the time the user starts a
+     * deposit, the flow's JS bundle and auth session are already loaded, so
+     * the payment UI appears near-instantly.
+     *
+     * Costs roughly one page load of bandwidth even if the user never
+     * deposits. Set `false` to opt out and call {@link Deposit.preload}
+     * manually (e.g. on deposit-button hover) — or not at all.
+     *
+     * @default true
+     */
+    preload?: boolean;
+    /**
+     * Optional merchant id, appended to the warm-up URL so the hosted flow can
+     * prefetch the merchant's config and signing public key before the signer
+     * responds. Purely a performance hint: it is never trusted for
+     * authorization, which always comes from the signed payload returned by
+     * {@link signer}.
+     */
+    merchantId?: string;
     /**
      * When `true`, the SDK logs lifecycle events (signer calls, iframe state,
      * message reception, errors) to `console.debug`. Useful during integration.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swype-org/deposit",
-  "version": "0.3.16",
+  "version": "0.3.19",
   "description": "Lightweight merchant deposit SDK — open a hosted payment flow, handle completion, zero dependencies",
   "type": "module",
   "main": "dist/index.cjs",
@@ -45,7 +45,10 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^19.2.14",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "tsup": "^8.4.0",
     "typescript": "5.7.3"
   },