@coinbase/cdp-react 0.0.62 → 0.0.63

package/dist/assets/IframeButton.css

@@ -1 +1 @@
-.IframeButton-module__iframe-button___XeAhH{position:relative;width:min-content;height:3.5em;padding-left:2.5em;padding-right:2.5em}.IframeButton-module__iframe-button___XeAhH>*{grid-area:center}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__full-width___lQWpM{width:100%}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__size-lg___HCOiF{height:4em}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__size-md___p44a4{height:3.5em}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__size-sm___U8ILi{padding-left:2em;padding-right:2em;height:3em}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__size-xs___S2jGa{padding-left:1.5em;padding-right:1.5em;height:2.5em}.IframeButton-module__loading-skeleton___fzBol{border-radius:var(--cdp-web-borderRadius-cta);width:calc(100% - .5em);height:calc(100% - .5em);position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.IframeButton-module__label___Vvl8W{visibility:hidden;white-space:nowrap;position:relative}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__with-icon___KBiq1 .IframeButton-module__label___Vvl8W{padding-left:1em}.IframeButton-module__iframe___0RBLL{border:none;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.IframeButton-module__iframe___0RBLL.IframeButton-module__hidden___LcF1X{display:none}
+.IframeButton-module__iframe-button___XeAhH{position:relative;width:min-content;height:3.5em;padding-left:2.5em;padding-right:2.5em}.IframeButton-module__iframe-button___XeAhH>*{grid-area:center}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__full-width___lQWpM{width:100%}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__size-lg___HCOiF{height:4em}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__size-md___p44a4{height:3.5em}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__size-sm___U8ILi{padding-left:2em;padding-right:2em;height:3em}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__size-xs___S2jGa{padding-left:1.5em;padding-right:1.5em;height:2.5em}.IframeButton-module__loading-skeleton___fzBol{border-radius:var(--cdp-web-borderRadius-cta);width:calc(100% - .5em);height:calc(100% - .5em);position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.IframeButton-module__label___Vvl8W{visibility:hidden;white-space:nowrap;position:relative}.IframeButton-module__iframe-button___XeAhH.IframeButton-module__with-icon___KBiq1 .IframeButton-module__label___Vvl8W{padding-left:1em}.IframeButton-module__iframe___0RBLL{border:none;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.IframeButton-module__iframe___0RBLL.IframeButton-module__hidden___LcF1X{display:none}.IframeButton-module__computed-style___ciB13{position:absolute;visibility:hidden;pointer-events:none;background-color:var(--cdp-web-colors-page-bg-default);border-radius:var(--cdp-web-borderRadius-cta);font-size:var(--cdp-web-font-size-base);font-family:var(--cdp-web-font-family-cta);font-weight:500}

package/dist/components/CopyEvmKeyButton/index.d.ts

@@ -1,5 +1,6 @@
 import { ButtonProps } from '../ui/Button';
-interface CopyEvmKeyButtonProps extends Pick<ButtonProps, "variant" | "size" | "fullWidth"> {
+import { IframeTheme } from '../../types/secureIframe';
+interface CopyEvmKeyButtonProps extends Pick<ButtonProps, "size" | "fullWidth"> {
     address: string;
     className?: string;
     copiedLabel?: string;
@@ -8,6 +9,8 @@ interface CopyEvmKeyButtonProps extends Pick<ButtonProps, "variant" | "size" | "
     onReady?: () => void;
     onSuccess?: () => void;
     onError?: (error?: string) => void;
+    theme?: Partial<IframeTheme>;
+    variant?: Extract<ButtonProps["variant"], "primary" | "secondary">;
 }
-declare const CopyEvmKeyButton: ({ address, className, copiedLabel, icon, fullWidth, label, onReady, onSuccess, onError, size, variant, }: CopyEvmKeyButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const CopyEvmKeyButton: ({ address, className, copiedLabel, icon, fullWidth, label, onReady, onSuccess, onError, size, theme: themeOverrides, variant, }: CopyEvmKeyButtonProps) => import("react/jsx-runtime").JSX.Element;
 export { CopyEvmKeyButton as unstable_CopyEvmKeyButton, type CopyEvmKeyButtonProps as unstable_CopyEvmKeyButtonProps, };

package/dist/components/CopyEvmKeyButton/index.js

@@ -1,58 +1,60 @@
-import { jsx as B } from "react/jsx-runtime";
-import { useConfig as P } from "@coinbase/cdp-hooks";
-import { useRef as v, useCallback as x } from "react";
+import { jsx as x } from "react/jsx-runtime";
+import { useConfig as E } from "@coinbase/cdp-hooks";
+import { useRef as I, useState as K, useCallback as T, useEffect as j } from "react";
 import "../ui/Button/index.js";
-import { IframeButton as I } from "../ui/IframeButton/index.js";
-import { useKeyExportPostMessage as K } from "../../hooks/useKeyExportPostMessage.js";
+import { IframeButton as k } from "../ui/IframeButton/index.js";
+import { useKeyExportPostMessage as w } from "../../hooks/useKeyExportPostMessage.js";
 import "@coinbase/cdp-core";
-import "../../theme/cssVariables.js";
-import "../../theme/theme.js";
-import "../../theme/tokens.js";
 const A = ({
-  address: s,
-  className: a = "",
-  copiedLabel: n = "Copied",
+  address: n,
+  className: p = "",
+  copiedLabel: u = "Copied",
   icon: o = !0,
   fullWidth: c,
-  label: e = "Copy key",
-  onReady: t,
-  onSuccess: m,
+  label: r = "Copy key",
+  onReady: m,
+  onSuccess: s,
   onError: i,
-  size: p,
-  variant: u
+  size: h,
+  theme: d,
+  variant: l
 }) => {
   const {
-    config: { projectId: l, secureIframeBasePath: y }
-  } = P(), f = v(null), d = x(
-    (r, g) => {
-      r === "ready" && t?.(), r === "success" && m?.(), r === "error" && i?.(g);
+    config: { projectId: y, secureIframeBasePath: C }
+  } = E(), f = I(null), [e, g] = K(void 0), b = T(
+    (t, P) => {
+      t === "ready" && m?.(), t === "success" && s?.(), t === "error" && i?.(P);
     },
-    [t, m, i]
-  ), { iframeUrl: C, isPending: b } = K({
-    address: s,
+    [m, s, i]
+  ), { iframeUrl: v, isPending: B, onThemeChange: a } = w({
+    address: n,
     type: "evm",
-    projectId: l,
-    variant: u,
-    size: p,
-    label: e,
-    basePath: y,
-    copiedLabel: n,
+    projectId: y,
+    label: r,
+    basePath: C,
+    copiedLabel: u,
     icon: o,
     iframeRef: f,
-    onStatusUpdate: d
+    onStatusUpdate: b,
+    theme: e
   });
-  return /* @__PURE__ */ B(
-    I,
+  return j(() => {
+    e && a(e);
+  }, [e, a]), /* @__PURE__ */ x(
+    k,
     {
       ref: f,
-      src: C,
+      src: v,
       allow: "clipboard-read; clipboard-write",
-      isPending: b,
-      label: e,
+      isPending: B,
+      label: r,
       icon: o,
       fullWidth: c,
-      size: p,
-      className: a
+      onThemeChange: g,
+      size: h,
+      theme: d,
+      variant: l,
+      className: p
     }
   );
 };

package/dist/components/CopySolanaKeyButton/index.d.ts

@@ -1,5 +1,6 @@
 import { ButtonProps } from '../ui/Button';
-interface CopySolanaKeyButtonProps extends Pick<ButtonProps, "variant" | "size" | "fullWidth"> {
+import { IframeTheme } from '../../types/secureIframe';
+interface CopySolanaKeyButtonProps extends Pick<ButtonProps, "size" | "fullWidth"> {
     address: string;
     className?: string;
     copiedLabel?: string;
@@ -8,6 +9,8 @@ interface CopySolanaKeyButtonProps extends Pick<ButtonProps, "variant" | "size"
     onReady?: () => void;
     onSuccess?: () => void;
     onError?: (error?: string) => void;
+    theme?: Partial<IframeTheme>;
+    variant?: Extract<ButtonProps["variant"], "primary" | "secondary">;
 }
-declare const CopySolanaKeyButton: ({ address, className, copiedLabel, icon, fullWidth, label, onReady, onSuccess, onError, size, variant, }: CopySolanaKeyButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const CopySolanaKeyButton: ({ address, className, copiedLabel, icon, fullWidth, label, onReady, onSuccess, onError, size, theme: themeOverrides, variant, }: CopySolanaKeyButtonProps) => import("react/jsx-runtime").JSX.Element;
 export { CopySolanaKeyButton as unstable_CopySolanaKeyButton, type CopySolanaKeyButtonProps as unstable_CopySolanaKeyButtonProps, };

package/dist/components/CopySolanaKeyButton/index.js

@@ -1,58 +1,60 @@
-import { jsx as B } from "react/jsx-runtime";
-import { useConfig as P } from "@coinbase/cdp-hooks";
-import { useRef as x, useCallback as I } from "react";
+import { jsx as I } from "react/jsx-runtime";
+import { useConfig as K } from "@coinbase/cdp-hooks";
+import { useRef as S, useState as T, useCallback as j, useEffect as k } from "react";
 import "../ui/Button/index.js";
-import { IframeButton as K } from "../ui/IframeButton/index.js";
-import { useKeyExportPostMessage as h } from "../../hooks/useKeyExportPostMessage.js";
+import { IframeButton as w } from "../ui/IframeButton/index.js";
+import { useKeyExportPostMessage as U } from "../../hooks/useKeyExportPostMessage.js";
 import "@coinbase/cdp-core";
-import "../../theme/cssVariables.js";
-import "../../theme/theme.js";
-import "../../theme/tokens.js";
 const A = ({
-  address: s,
-  className: f = "",
-  copiedLabel: n = "Copied",
-  icon: r = !0,
+  address: f,
+  className: p = "",
+  copiedLabel: u = "Copied",
+  icon: t = !0,
   fullWidth: c,
-  label: e = "Copy key",
-  onReady: t,
-  onSuccess: a,
-  onError: i,
-  size: p,
-  variant: l
+  label: r = "Copy key",
+  onReady: a,
+  onSuccess: s,
+  onError: m,
+  size: l,
+  theme: h,
+  variant: d
 }) => {
   const {
-    config: { projectId: u, secureIframeBasePath: y }
-  } = P(), m = x(null), d = I(
-    (o, g) => {
-      o === "ready" && t?.(), o === "success" && a?.(), o === "error" && i?.(g);
+    config: { projectId: y, secureIframeBasePath: C }
+  } = K(), i = S(null), [e, g] = T(void 0), b = j(
+    (o, x) => {
+      o === "ready" && a?.(), o === "success" && s?.(), o === "error" && m?.(x);
     },
-    [t, a, i]
-  ), { iframeUrl: C, isPending: b } = h({
-    address: s,
+    [a, s, m]
+  ), { iframeUrl: B, isPending: P, onThemeChange: n } = U({
+    address: f,
     type: "solana",
-    projectId: u,
-    variant: l,
-    size: p,
-    label: e,
-    basePath: y,
-    copiedLabel: n,
-    icon: r,
-    iframeRef: m,
-    onStatusUpdate: d
+    projectId: y,
+    label: r,
+    basePath: C,
+    copiedLabel: u,
+    icon: t,
+    iframeRef: i,
+    onStatusUpdate: b,
+    theme: e
   });
-  return /* @__PURE__ */ B(
-    K,
+  return k(() => {
+    e && n(e);
+  }, [e, n]), /* @__PURE__ */ I(
+    w,
     {
-      ref: m,
-      src: C,
+      ref: i,
+      src: B,
       allow: "clipboard-read; clipboard-write",
-      isPending: b,
-      label: e,
-      icon: r,
+      isPending: P,
+      label: r,
+      icon: t,
       fullWidth: c,
-      size: p,
-      className: f
+      onThemeChange: g,
+      size: l,
+      theme: h,
+      variant: d,
+      className: p
     }
   );
 };

package/dist/components/ExportWallet/index.js

@@ -1,110 +1,116 @@
-import { jsx as o, jsxs as d, Fragment as _ } from "react/jsx-runtime";
-import { useCurrentUser as W } from "@coinbase/cdp-hooks";
-import { c as i } from "../../chunks/lite.1fxw3LjI.js";
-import { createContext as f, useMemo as c, useContext as C } from "react";
-import { CopyAddress as w } from "../CopyAddress/index.js";
-import { unstable_CopyEvmKeyButton as v } from "../CopyEvmKeyButton/index.js";
-import { unstable_CopySolanaKeyButton as b } from "../CopySolanaKeyButton/index.js";
-import { Banner as h } from "../ui/Banner/index.js";
-import { CoinbaseFooter as A } from "../ui/CoinbaseFooter/index.js";
+import { jsx as o, jsxs as W, Fragment as f } from "react/jsx-runtime";
+import { useCurrentUser as v } from "@coinbase/cdp-hooks";
+import { c as E } from "../../chunks/lite.1fxw3LjI.js";
+import { createContext as C, useMemo as p, useContext as w } from "react";
+import { CopyAddress as b } from "../CopyAddress/index.js";
+import { unstable_CopyEvmKeyButton as h } from "../CopyEvmKeyButton/index.js";
+import { unstable_CopySolanaKeyButton as A } from "../CopySolanaKeyButton/index.js";
+import { Banner as y } from "../ui/Banner/index.js";
+import { CoinbaseFooter as S } from "../ui/CoinbaseFooter/index.js";
 import "../../index.js";
 import { useAppConfig as B } from "../CDPReactProvider/index.js";
-import '../../assets/ExportWallet.css';const F = "ExportWallet-module__footer___NvrFY", u = {
+import '../../assets/ExportWallet.css';const g = "ExportWallet-module__footer___NvrFY", i = {
   "export-wallet": "ExportWallet-module__export-wallet___EyZys",
   "export-wallet-title": "ExportWallet-module__export-wallet-title___MuI09",
-  footer: F
-}, x = f({
+  footer: g
+}, _ = C({
   address: "",
-  type: "evm"
+  type: "evm-eoa"
 }), m = () => {
-  const t = C(x);
+  const t = w(_);
   if (!t)
     throw new Error("useExportWalletContext must be used within a ExportWalletProvider");
   return t;
-}, K = ({
+}, F = ({
   address: t,
-  children: r,
-  onIframeError: e,
+  children: e,
+  onIframeError: r,
   onIframeReady: n,
   onCopySuccess: l
 }) => {
-  const { currentUser: a } = W(), p = c(
-    () => !!a?.solanaAccounts?.find((E) => E === t),
+  const { currentUser: a } = v(), s = p(
+    () => !!a?.solanaAccounts?.find((u) => u === t),
     [a?.solanaAccounts, t]
-  ) ? "solana" : "evm", y = c(
-    () => ({ address: t, type: p, onIframeError: e, onIframeReady: n, onCopySuccess: l }),
-    [t, p, e, n, l]
+  ), c = p(
+    () => !!a?.evmSmartAccounts?.find((u) => u === t),
+    [a?.evmSmartAccounts, t]
+  ), x = s ? "solana" : c ? "evm-smart" : "evm-eoa", d = p(
+    () => ({ address: t, type: x, onIframeError: r, onIframeReady: n, onCopySuccess: l }),
+    [t, x, r, n, l]
   );
-  return /* @__PURE__ */ o(x.Provider, { value: y, children: r });
-}, S = ({
+  return /* @__PURE__ */ o(_.Provider, { value: d, children: e });
+}, K = ({
   children: t,
-  className: r = "",
-  as: e = "h2",
+  className: e = "",
+  as: r = "h2",
   ...n
-}) => /* @__PURE__ */ o(e, { className: i(u["export-wallet-title"], r), ...n, children: t || "Export your wallet" }), g = (t) => /* @__PURE__ */ o(h, { variant: "warning", ...t, children: "Do not share your private key with anyone" }), N = ({
+}) => /* @__PURE__ */ o(r, { className: E(i["export-wallet-title"], e), ...n, children: t || "Export your wallet" }), N = (t) => {
+  const { type: e } = m();
+  return e === "evm-smart" ? /* @__PURE__ */ o(y, { variant: "warning", ...t, children: "Cannot export a smart account's private key" }) : /* @__PURE__ */ o(y, { variant: "warning", ...t, children: "Do not share your private key with anyone" });
+}, P = ({
   label: t = "Your wallet address",
-  ...r
+  ...e
 }) => {
-  const { address: e } = m();
-  return /* @__PURE__ */ o(w, { address: e, label: t, ...r });
-}, P = ({
+  const { address: r } = m();
+  return /* @__PURE__ */ o(b, { address: r, label: t, ...e });
+}, j = ({
   fullWidth: t = !0,
-  ...r
+  ...e
 }) => {
-  const { address: e, type: n, onIframeError: l, onIframeReady: a, onCopySuccess: s } = m();
+  const { address: r, type: n, onIframeError: l, onIframeReady: a, onCopySuccess: s } = m();
   return n === "solana" ? /* @__PURE__ */ o(
-    b,
+    A,
     {
       fullWidth: t,
-      address: e,
+      address: r,
       onError: l,
       onReady: a,
       onSuccess: s,
-      ...r
+      ...e
     }
-  ) : n === "evm" ? /* @__PURE__ */ o(
-    v,
+  ) : n === "evm-eoa" ? /* @__PURE__ */ o(
+    h,
     {
       fullWidth: t,
-      address: e,
+      address: r,
       onError: l,
       onReady: a,
       onSuccess: s,
-      ...r
+      ...e
     }
   ) : null;
-}, j = (t) => /* @__PURE__ */ o(A, { ...t }), z = ({
+}, k = (t) => /* @__PURE__ */ o(S, { ...t }), G = ({
   address: t,
-  children: r,
-  className: e = "",
+  children: e,
+  className: r = "",
   onIframeError: n,
   onIframeReady: l,
   onCopySuccess: a,
   ...s
 }) => {
-  const { showCoinbaseFooter: p } = B();
-  return /* @__PURE__ */ o("div", { className: i(u["export-wallet"], e), ...s, children: /* @__PURE__ */ o(
-    K,
+  const { showCoinbaseFooter: c } = B();
+  return /* @__PURE__ */ o("div", { className: E(i["export-wallet"], r), ...s, children: /* @__PURE__ */ o(
+    F,
     {
       address: t,
       onIframeReady: l,
       onCopySuccess: a,
       onIframeError: n,
-      children: r || /* @__PURE__ */ d(_, { children: [
-        /* @__PURE__ */ o(S, {}),
-        /* @__PURE__ */ o(g, {}),
+      children: e || /* @__PURE__ */ W(f, { children: [
+        /* @__PURE__ */ o(K, {}),
         /* @__PURE__ */ o(N, {}),
         /* @__PURE__ */ o(P, {}),
-        p && /* @__PURE__ */ o(j, { className: u.footer })
+        /* @__PURE__ */ o(j, {}),
+        c && /* @__PURE__ */ o(k, { className: i.footer })
       ] })
     }
   ) });
 };
 export {
-  z as unstable_ExportWallet,
-  N as unstable_ExportWalletCopyAddress,
-  P as unstable_ExportWalletCopyKeyButton,
-  j as unstable_ExportWalletFooter,
-  S as unstable_ExportWalletTitle,
-  g as unstable_ExportWalletWarning
+  G as unstable_ExportWallet,
+  P as unstable_ExportWalletCopyAddress,
+  j as unstable_ExportWalletCopyKeyButton,
+  k as unstable_ExportWalletFooter,
+  K as unstable_ExportWalletTitle,
+  N as unstable_ExportWalletWarning
 };

package/dist/components/ui/IframeButton/index.d.ts

@@ -1,11 +1,15 @@
 import { IframeHTMLAttributes, ReactNode } from 'react';
-import { ButtonSize } from '../../../theme/theme';
+import { ButtonSize, ButtonVariant } from '../../../theme/theme';
+import { IframeTheme } from '../../../types/secureIframe';
 interface IframeButtonProps extends IframeHTMLAttributes<HTMLIFrameElement> {
-    isPending?: boolean;
-    label: ReactNode;
     icon?: boolean;
+    isPending?: boolean;
     fullWidth?: boolean;
+    label: ReactNode;
+    onThemeChange?: (theme: IframeTheme) => void;
     size?: ButtonSize;
+    theme?: Partial<IframeTheme>;
+    variant?: Extract<ButtonVariant, "primary" | "secondary">;
 }
 export declare const IframeButton: import('react').ForwardRefExoticComponent<IframeButtonProps & import('react').RefAttributes<HTMLIFrameElement>>;
 export {};

package/dist/components/ui/IframeButton/index.js

@@ -1,8 +1,11 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { c as t } from "../../../chunks/lite.1fxw3LjI.js";
-import { forwardRef as f } from "react";
-import { LoadingSkeleton as u } from "../LoadingSkeleton/index.js";
-import '../../../assets/IframeButton.css';const c = "IframeButton-module__label___Vvl8W", B = "IframeButton-module__iframe___0RBLL", I = "IframeButton-module__hidden___LcF1X", e = {
+import { jsxs as w, jsx as g } from "react/jsx-runtime";
+import { c as p } from "../../../chunks/lite.1fxw3LjI.js";
+import { forwardRef as y, useRef as x, useMemo as v, useState as T, useEffect as S } from "react";
+import { useTheme as z } from "../../ThemeProvider/index.js";
+import { LoadingSkeleton as $ } from "../LoadingSkeleton/index.js";
+import "../../../theme/theme.js";
+import { colorsBase as u } from "../../../theme/tokens.js";
+import '../../../assets/IframeButton.css';const H = "IframeButton-module__label___Vvl8W", R = "IframeButton-module__iframe___0RBLL", C = "IframeButton-module__hidden___LcF1X", s = {
   "iframe-button": "IframeButton-module__iframe-button___XeAhH",
   "full-width": "IframeButton-module__full-width___lQWpM",
   "size-lg": "IframeButton-module__size-lg___HCOiF",
@@ -10,41 +13,126 @@ import '../../../assets/IframeButton.css';const c = "IframeButton-module__label_
   "size-sm": "IframeButton-module__size-sm___U8ILi",
   "size-xs": "IframeButton-module__size-xs___S2jGa",
   "loading-skeleton": "IframeButton-module__loading-skeleton___fzBol",
-  label: c,
+  label: H,
   "with-icon": "IframeButton-module__with-icon___KBiq1",
-  iframe: B,
-  hidden: I
-}, h = {
-  xs: e["size-xs"],
-  sm: e["size-sm"],
-  md: e["size-md"],
-  lg: e["size-lg"]
-}, z = f(
-  ({ className: l = "", isPending: _, label: i, icon: a, fullWidth: s, size: m, ...n }, r) => /* @__PURE__ */ d(
-    "div",
-    {
-      className: t(
-        e["iframe-button"],
-        a && e["with-icon"],
-        s && e["full-width"],
-        m && h[m]
-      ),
-      children: [
-        /* @__PURE__ */ o("span", { className: e.label, children: i }),
-        _ && /* @__PURE__ */ o(u, { className: t(e["loading-skeleton"]) }),
-        /* @__PURE__ */ o(
-          "iframe",
-          {
-            ref: r,
-            className: t(e.iframe, _ ? e.hidden : void 0, l),
-            ...n
-          }
-        )
-      ]
-    }
-  )
+  iframe: R,
+  hidden: C,
+  "computed-style": "IframeButton-module__computed-style___ciB13"
+}, L = {
+  pageBg: u.white,
+  buttonBg: u.blue500,
+  buttonBgHover: "#0748d6",
+  buttonBgPressed: "#0b3eae",
+  buttonBgFocus: u.blue550,
+  buttonBorder: u.blue550,
+  buttonBorderHover: "#0748d6",
+  buttonBorderPressed: "#0b3eae",
+  buttonBorderFocus: u.blue550,
+  buttonBorderFocusInset: u.white,
+  buttonText: u.white,
+  buttonTextHover: u.white,
+  buttonTextPressed: u.white,
+  buttonTextFocus: u.white,
+  buttonBorderRadius: 99999,
+  buttonFontSize: 16,
+  buttonFontWeight: 500,
+  buttonSize: "md",
+  fontUrl: "",
+  fontFamily: ""
+}, W = Object.keys(L), N = (r) => W.every(
+  (e) => e === "fontUrl" || e === "buttonSize" ? !0 : r[e] !== void 0
+), c = (r, e, t) => (e.style.backgroundColor = `var(--cdp-web-${r})`, P(getComputedStyle(e).backgroundColor, t)), P = (r, e) => {
+  if (!r || typeof r != "string")
+    return console.warn("Invalid color input:", r), "";
+  const t = r.trim();
+  if (t.startsWith("#"))
+    return /^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(t) ? t.toLowerCase() : (console.warn("Invalid hex color:", t), "");
+  if (t === "transparent") return "transparent";
+  if (t === "none") return "none";
+  const o = e.getContext("2d", { willReadFrequently: !0 });
+  if (!o)
+    return console.warn("Could not create canvas context"), "";
+  if (o.fillStyle = t, o.fillStyle.startsWith("#"))
+    return o.fillStyle.toLowerCase();
+  o.fillRect(0, 0, 1, 1);
+  const d = o.getImageData(0, 0, 1, 1), [l, n, m, a] = d.data, i = l.toString(16).padStart(2, "0"), b = n.toString(16).padStart(2, "0"), f = m.toString(16).padStart(2, "0");
+  if (a < 255) {
+    const _ = a.toString(16).padStart(2, "0");
+    return `#${i}${b}${f}${_}`;
+  }
+  return `#${i}${b}${f}`;
+}, k = (r, e, t, o) => {
+  const d = getComputedStyle(t), l = c("colors-page-bg-default", t, o), n = c(`colors-cta-${e}-bg-default`, t, o), m = c(`colors-cta-${e}-bg-hover`, t, o), a = c(`colors-cta-${e}-bg-pressed`, t, o), i = c(`colors-cta-${e}-text-default`, t, o);
+  return {
+    pageBg: l,
+    buttonBg: n,
+    buttonBgHover: m,
+    buttonBgPressed: a,
+    buttonBgFocus: n,
+    buttonBorder: n,
+    buttonBorderHover: m,
+    buttonBorderPressed: a,
+    buttonBorderFocus: c(`colors-cta-${e}-border-focus`, t, o),
+    buttonBorderFocusInset: l,
+    buttonBorderRadius: parseInt(d.borderRadius),
+    buttonFontSize: parseInt(d.fontSize),
+    buttonFontWeight: parseInt(d.fontWeight),
+    buttonText: i,
+    buttonTextHover: c(`colors-cta-${e}-text-hover`, t, o),
+    buttonTextPressed: i,
+    buttonTextFocus: i,
+    buttonSize: (r === "none" ? "md" : r) ?? "md",
+    fontFamily: d.fontFamily,
+    fontUrl: ""
+  };
+}, j = {
+  xs: s["size-xs"],
+  sm: s["size-sm"],
+  md: s["size-md"],
+  lg: s["size-lg"]
+}, U = y(
+  ({ className: r = "", isPending: e, label: t, icon: o, fullWidth: d, size: l, theme: n, onThemeChange: m, ...a }, i) => {
+    const { theme: b } = z(), f = x(null), _ = x(null), B = v(() => !!n && N(n), [n]), [h, I] = T(
+      B ? n : void 0
+    );
+    return S(() => {
+      if (B || !f.current || !_.current) return;
+      const F = k(
+        l ?? "md",
+        a.variant ?? "primary",
+        f.current,
+        _.current
+      );
+      I({ ...F, ...n });
+    }, [a.variant, l, B, n, b]), S(() => {
+      h && m?.(h);
+    }, [h, m]), /* @__PURE__ */ w(
+      "div",
+      {
+        className: p(
+          s["iframe-button"],
+          o && s["with-icon"],
+          d && s["full-width"],
+          l && j[l]
+        ),
+        children: [
+          /* @__PURE__ */ g("span", { className: s.label, children: t }),
+          e && /* @__PURE__ */ g($, { className: p(s["loading-skeleton"]) }),
+          /* @__PURE__ */ g(
+            "iframe",
+            {
+              ref: i,
+              className: p(s.iframe, e ? s.hidden : void 0, r),
+              ...a
+            }
+          ),
+          !B && /* @__PURE__ */ g("div", { ref: f, className: s["computed-style"], children: /* @__PURE__ */ g("canvas", { ref: _ }) })
+        ]
+      }
+    );
+  }
 );
-z.displayName = "IframeButton";
+U.displayName = "IframeButton";
 export {
-  z as IframeButton
+  U as IframeButton
 };

package/dist/hooks/useKeyExportPostMessage.d.ts

@@ -1,11 +1,11 @@
 import { RefObject } from 'react';
-import { ButtonProps } from '../components/ui/Button';
-import { SecureIframeStatus, SecureIframeEventType, SecureIframeIncomingMessage, SecureIframeOutgoingMessage, SecureIframeInitMessage } from '../types/secureIframe';
+import { SecureIframeStatus, SecureIframeEventType, SecureIframeIncomingMessage, SecureIframeOutgoingMessage, SecureIframeInitMessage, IframeTheme } from '../types/secureIframe';
 export declare const SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE: Readonly<{
     GET_PRIVATE_KEY: "CDP_WEB_SECURE_IFRAME_GET_PRIVATE_KEY";
     INIT: "CDP_WEB_SECURE_IFRAME_INIT";
     LISTENING: "CDP_WEB_SECURE_IFRAME_LISTENING";
     STATUS: "CDP_WEB_SECURE_IFRAME_STATUS";
+    THEME: "CDP_WEB_SECURE_IFRAME_THEME";
 }>;
 export type SecureIframeKeyExportEventType = SecureIframeEventType & typeof SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE;
 export type SecureIframeGetPrivateKeyMessage = {
@@ -19,7 +19,7 @@ export type SecureIframeGetPrivateKeyMessage = {
 };
 export type SecureIframeKeyExportIncomingMessage = SecureIframeIncomingMessage | SecureIframeGetPrivateKeyMessage;
 export type SecureIframeKeyExportOutgoingMessage = SecureIframeOutgoingMessage;
-export interface UseKeyExportPostMessageProps extends Pick<ButtonProps, "variant" | "size"> {
+export interface UseKeyExportPostMessageProps {
     address: string;
     type: "evm" | "solana";
     basePath?: string;
@@ -29,10 +29,12 @@ export interface UseKeyExportPostMessageProps extends Pick<ButtonProps, "variant
     icon: boolean;
     iframeRef: RefObject<HTMLIFrameElement | null>;
     onStatusUpdate?: (status: SecureIframeStatus, message?: string) => void;
+    theme?: IframeTheme;
 }
 export declare const sendKeyExportMessage: (el: HTMLIFrameElement | null, message: SecureIframeKeyExportIncomingMessage) => void;
 export declare const isKeyExportMessage: (message: unknown) => message is SecureIframeKeyExportIncomingMessage | SecureIframeKeyExportOutgoingMessage;
-export declare const useKeyExportPostMessage: ({ address, basePath, copiedLabel, icon, iframeRef, label, onStatusUpdate, projectId, size, type, variant, }: UseKeyExportPostMessageProps) => {
+export declare const useKeyExportPostMessage: ({ address, basePath, copiedLabel, icon, iframeRef, label, onStatusUpdate, projectId, theme, type, }: UseKeyExportPostMessageProps) => {
     iframeUrl: string;
     isPending: boolean;
+    onThemeChange: (newTheme: Partial<IframeTheme>) => void;
 };

package/dist/hooks/useKeyExportPostMessage.js

@@ -1,83 +1,90 @@
-import { getAccessToken as M, getAccessTokenExpiration as S } from "@coinbase/cdp-core";
-import { useCurrentUser as k } from "@coinbase/cdp-hooks";
-import { useState as w, useMemo as K, useCallback as l, useEffect as $ } from "react";
-import { useTheme as x } from "../components/ThemeProvider/index.js";
-import "../components/ui/Button/index.js";
-import { SECURE_IFRAME_EVENT_TYPE_PREFIX as h, SECURE_IFRAME_EVENT_TYPE as C } from "../types/secureIframe.js";
+import { getAccessToken as R, getAccessTokenExpiration as w } from "@coinbase/cdp-core";
+import { useCurrentUser as S } from "@coinbase/cdp-hooks";
+import { useState as k, useMemo as C, useCallback as u, useEffect as K } from "react";
+import { SECURE_IFRAME_EVENT_TYPE_PREFIX as f, SECURE_IFRAME_EVENT_TYPE as x } from "../types/secureIframe.js";
 import "libphonenumber-js";
-import { sendIframeMessage as Y } from "../utils/sendIframeMessage.js";
-const A = "https://secure.cdp.coinbase.com", o = Object.freeze({
-  ...C,
-  GET_PRIVATE_KEY: `${h}GET_PRIVATE_KEY`
-}), V = (t, s) => {
-  Y(t, s);
-}, F = (t) => typeof t == "object" && t !== null && "type" in t && typeof t.type == "string" && !!o[t.type.replace(
-  h,
+import { sendIframeMessage as A } from "../utils/sendIframeMessage.js";
+const g = "https://secure-wallet.cdp.coinbase.com", n = Object.freeze({
+  ...x,
+  GET_PRIVATE_KEY: `${f}GET_PRIVATE_KEY`
+}), Y = (t, s) => {
+  A(t, s);
+}, V = (t) => typeof t == "object" && t !== null && "type" in t && typeof t.type == "string" && !!n[t.type.replace(
+  f,
   ""
-)], B = ({
+)], H = ({
   address: t,
-  basePath: s = A,
-  copiedLabel: n,
+  basePath: s = g,
+  copiedLabel: c,
   icon: T,
-  iframeRef: i,
-  label: c,
-  onStatusUpdate: f,
+  iframeRef: o,
+  label: i,
+  onStatusUpdate: _,
   projectId: E,
-  size: a,
-  type: _,
-  variant: p
+  theme: m,
+  type: d
 }) => {
-  const { currentUser: u } = k(), { theme: d } = x(), [I, R] = w(!0), U = K(() => {
+  const { currentUser: a } = S(), [I, U] = k(!0), h = C(() => {
     const e = ["fullWidth"];
-    return E && e.push(`projectId=${E.trim()}`), p && e.push(`variant=${p.trim()}`), a && e.push(`size=${a.trim()}`), c && e.push(`label=${encodeURIComponent(c.trim())}`), n && e.push(`copiedLabel=${encodeURIComponent(n.trim())}`), T && e.push("icon"), `${s}?${e.join("&")}`;
-  }, [E, p, a, c, n, T, s]), y = l(async () => {
-    if (!u || !i.current) return;
-    const e = await M(), r = await S();
-    V(i.current, {
-      type: o.GET_PRIVATE_KEY,
+    return E && e.push(`projectId=${E.trim()}`), i && e.push(`label=${encodeURIComponent(i.trim())}`), c && e.push(`copiedLabel=${encodeURIComponent(c.trim())}`), T && e.push("icon"), `${s}?${e.join("&")}`;
+  }, [E, i, c, T, s]), y = u(async () => {
+    if (!a || !o.current) return;
+    const e = await R(), r = await w();
+    Y(o.current, {
+      type: n.GET_PRIVATE_KEY,
       payload: {
         address: t,
-        type: _,
+        type: d,
         authState: {
           accessToken: e || "",
           expiresAt: r || 0,
-          user: u
+          user: a
         },
-        theme: d
+        theme: m
       }
     });
-  }, [u, t, _, d, i]), g = l(
+  }, [a, t, d, m, o]), l = u(
     (e, r) => {
-      f?.(e, r), R(!1);
+      _?.(e, r), U(!1);
     },
-    [f]
+    [_]
+  ), M = u(
+    (e) => {
+      A(o.current, {
+        type: n.THEME,
+        payload: {
+          theme: e
+        }
+      });
+    },
+    [o]
   );
-  return $(() => {
+  return K(() => {
     const e = (r) => {
-      let m = "";
+      let p = "";
       try {
-        m = new URL(s || A).origin;
+        p = new URL(s || g).origin;
       } catch (P) {
         console.error("Error parsing iframe origin", P);
       }
-      if (!(!m || r.origin !== m) && F(r.data))
+      if (!(!p || r.origin !== p) && V(r.data))
         switch (r.data?.type) {
-          case o.LISTENING:
+          case n.LISTENING:
             y();
             break;
-          case o.STATUS:
-            g(r.data.payload.status, r.data.payload.message);
+          case n.STATUS:
+            l(r.data.payload.status, r.data.payload.message);
             break;
         }
     };
     return window.addEventListener("message", e), () => {
       window.removeEventListener("message", e);
     };
-  }, [y, g, s]), { iframeUrl: U, isPending: I };
+  }, [y, l, s]), { iframeUrl: h, isPending: I, onThemeChange: M };
 };
 export {
-  o as SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE,
-  F as isKeyExportMessage,
-  V as sendKeyExportMessage,
-  B as useKeyExportPostMessage
+  n as SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE,
+  V as isKeyExportMessage,
+  Y as sendKeyExportMessage,
+  H as useKeyExportPostMessage
 };

package/dist/types/secureIframe.d.ts

@@ -1,21 +1,49 @@
 import { AuthManager } from '@coinbase/cdp-core';
-import { Theme } from '../theme';
+export type IframeTheme = {
+    pageBg: string;
+    buttonBg: string;
+    buttonBgHover: string;
+    buttonBgPressed: string;
+    buttonBgFocus: string;
+    buttonBorder: string;
+    buttonBorderHover: string;
+    buttonBorderPressed: string;
+    buttonBorderFocus: string;
+    buttonBorderFocusInset: string;
+    buttonText: string;
+    buttonTextHover: string;
+    buttonTextPressed: string;
+    buttonTextFocus: string;
+    buttonBorderRadius: number;
+    buttonFontSize: number;
+    buttonFontWeight: number;
+    buttonSize: "xs" | "sm" | "md" | "lg";
+    fontUrl: string;
+    fontFamily: string;
+};
 export type SecureIframeAuthState = Parameters<AuthManager["setAuthState"]>[0];
 export declare const SECURE_IFRAME_EVENT_TYPE_PREFIX = "CDP_WEB_SECURE_IFRAME_";
 export declare const SECURE_IFRAME_EVENT_TYPE: {
     readonly INIT: "CDP_WEB_SECURE_IFRAME_INIT";
     readonly LISTENING: "CDP_WEB_SECURE_IFRAME_LISTENING";
     readonly STATUS: "CDP_WEB_SECURE_IFRAME_STATUS";
+    readonly THEME: "CDP_WEB_SECURE_IFRAME_THEME";
 };
 export type SecureIframeEventType = typeof SECURE_IFRAME_EVENT_TYPE;
 export type SecureIframeInitMessage = {
     type: SecureIframeEventType["INIT"];
     payload: {
         authState: SecureIframeAuthState;
-        theme: Theme;
+        theme?: IframeTheme;
+    };
+};
+export type SecureIframeThemeMessage = {
+    type: SecureIframeEventType["THEME"];
+    payload: {
+        theme: Partial<IframeTheme>;
     };
 };
-export type SecureIframeIncomingMessage = SecureIframeInitMessage;
+export type SecureIframeIncomingMessage = SecureIframeInitMessage | SecureIframeThemeMessage;
 export type SecureIframeListeningMessage = {
     type: SecureIframeEventType["LISTENING"];
 };

package/dist/types/secureIframe.js

@@ -1,13 +1,11 @@
 import "@coinbase/cdp-core";
-import "../theme/cssVariables.js";
-import "../theme/theme.js";
-import "../theme/tokens.js";
-const E = "CDP_WEB_SECURE_IFRAME_", N = {
+const E = "CDP_WEB_SECURE_IFRAME_", I = {
   INIT: `${E}INIT`,
   LISTENING: `${E}LISTENING`,
-  STATUS: `${E}STATUS`
+  STATUS: `${E}STATUS`,
+  THEME: `${E}THEME`
 };
 export {
-  N as SECURE_IFRAME_EVENT_TYPE,
+  I as SECURE_IFRAME_EVENT_TYPE,
   E as SECURE_IFRAME_EVENT_TYPE_PREFIX
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -15,8 +15,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0 <19.2.0",
-    "@coinbase/cdp-core": "^0.0.62",
-    "@coinbase/cdp-hooks": "^0.0.62"
+    "@coinbase/cdp-core": "^0.0.63",
+    "@coinbase/cdp-hooks": "^0.0.63"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -46,8 +46,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.62",
-    "@coinbase/cdp-hooks": "^0.0.62"
+    "@coinbase/cdp-core": "^0.0.63",
+    "@coinbase/cdp-hooks": "^0.0.63"
   },
   "size-limit": [
     {