@coinbase/cdp-react 0.0.63 → 0.0.64

package/README.md

@@ -13,6 +13,11 @@ the CDP frontend SDK.
  - {@link FundModal | FundModal} - a button that triggers a modal with the fund flow
  - {@link LinkAuth | LinkAuth} - a component to link or unlink auth methods
  - {@link LinkAuthModal | LinkAuthModal} - a button that triggers a modal with the link / unlink flow
+ - {@link CopyAddress | CopyAddress} - a component that renders a truncated address with a copy button
+ - {@link CopyEvmKeyButton | CopyEvmKeyButton} - a button for copying the private key of a user's EVM EOA address
+ - {@link CopySolanaKeyButton | CopySolanaKeyButton} - a button for copying the private key of a user's Solana address
+ - {@link ExportWallet | ExportWallet} - a component for exporting a user's wallet; includes a title, a warning about keeping private keys secure, the CopyAddress component, and either the CopyEvmKeyButton or CopySolanaKeyButton depending on the type of address provided
+ - {@link ExportWalletModal | ExportWalletModal} - a button that triggers a modal with the ExportWallet component
 
 ## Quickstart
 

package/dist/assets/ExportWallet.css

@@ -1 +1 @@
-.ExportWallet-module__export-wallet___EyZys{box-sizing:border-box;font:var(--cdp-web-font-size-base) / 1.5 var(--cdp-web-font-family-body);font-optical-sizing:auto;background-color:var(--cdp-web-colors-page-bg-default);color:var(--cdp-web-colors-page-text-default);display:flex;flex-direction:column;max-width:38.25em;gap:1em;padding:1.5em 1.5em 1em;overflow:hidden;width:100%}.ExportWallet-module__export-wallet___EyZys *{box-sizing:border-box}.ExportWallet-module__export-wallet-title___MuI09{font-size:1em;line-height:1.1;font-weight:600;margin:0}.ExportWallet-module__footer___NvrFY{padding-left:0;padding-right:0}
+.ExportWallet-module__export-wallet___EyZys{box-sizing:border-box;font:var(--cdp-web-font-size-base) / 1.5 var(--cdp-web-font-family-body);font-optical-sizing:auto;background-color:var(--cdp-web-colors-page-bg-default);color:var(--cdp-web-colors-page-text-default);display:flex;flex-direction:column;max-width:38.25em;gap:1em;padding:1.5em 1.5em 1em;overflow:hidden;width:100%}.ExportWallet-module__export-wallet___EyZys.ExportWallet-module__no-footer___fzl3R{padding-bottom:1.5em}.ExportWallet-module__export-wallet___EyZys [data-part=iframe-button]{margin:-.25em;width:calc(100% + .5em)}.ExportWallet-module__export-wallet___EyZys *{box-sizing:border-box}.ExportWallet-module__export-wallet-title___MuI09{font-size:1em;line-height:1.1;font-weight:600;margin:0}.ExportWallet-module__footer___NvrFY{padding-left:0;padding-right:0}.ExportWalletModal-module__export-wallet___--L56{height:100%;overflow:hidden;gap:0}.ExportWalletModal-module__trigger___zMk8N{padding-left:2em;padding-right:2em}.ExportWalletModal-module__title-bar___RTPZq{display:flex;justify-content:space-between;align-items:center;margin-bottom:1em;width:100%}.ExportWalletModal-module__content___KzNol{display:flex;flex-direction:column;gap:1em}.ExportWalletModal-module__close-button___ImsDR{padding:0}.ExportWalletModal-module__close-icon___iAfyT{height:1.5em;width:1.5em}.ExportWalletModal-module__footer___byg1T{padding:.75em 0 0}@media (min-width: 450px){.ExportWalletModal-module__modal___pX1AP{max-width:25em}}

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__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}
+.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;top:-999px;left:-999px;width:1px;height:1px}.IframeButton-module__computed-style___ciB13 canvas{width:100%;height:100%}

package/dist/chunks/{LinkAuthFlow.CxSnHF2p.js → LinkAuthFlow.3HN888DV.js}

@@ -104,8 +104,8 @@ const ii = ({ children: t }) => {
   );
 };
 export {
-  ii as L,
-  K as a,
+  K as L,
+  ii as a,
   f as b,
   $ as u
 };

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

@@ -5,4 +5,4 @@ export interface CopyAddressProps extends Omit<HTMLAttributes<HTMLDivElement>, "
     onCopy?: () => void;
     onCopySuccess?: () => void;
 }
-export declare const CopyAddress: ({ className, address, label, onCopy, onCopySuccess, }: CopyAddressProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CopyAddress: ({ className, address, label, onCopy, onCopySuccess, ...props }: CopyAddressProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CopyAddress/index.js

@@ -1,25 +1,26 @@
 import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { c as _ } from "../../chunks/lite.1fxw3LjI.js";
-import { useRef as u, useState as m, useCallback as y } from "react";
-import { Label as C } from "../forms/Label/index.js";
-import { IconCheck as b } from "../../icons/IconCheck.js";
-import { IconCopy as f } from "../../icons/IconCopy.js";
-import '../../assets/CopyAddress.css';const h = "CopyAddress-module__label___O2o5m", e = {
+import { c as u } from "../../chunks/lite.1fxw3LjI.js";
+import { useRef as m, useState as y, useCallback as C } from "react";
+import { Label as b } from "../forms/Label/index.js";
+import { IconCheck as f } from "../../icons/IconCheck.js";
+import { IconCopy as h } from "../../icons/IconCopy.js";
+import '../../assets/CopyAddress.css';const A = "CopyAddress-module__label___O2o5m", e = {
   "address-copy": "CopyAddress-module__address-copy___KpKeI",
-  label: h,
+  label: A,
   "address-input-container": "CopyAddress-module__address-input-container___qq0TH",
   "address-truncated": "CopyAddress-module__address-truncated___kr8St",
   "copy-button": "CopyAddress-module__copy-button___64o2y",
   "success-icon": "CopyAddress-module__success-icon___qXipU",
   "copy-icon": "CopyAddress-module__copy-icon___lUbYG"
-}, w = ({
+}, T = ({
   className: l = "",
   address: s,
   label: r,
   onCopy: t,
-  onCopySuccess: d
+  onCopySuccess: d,
+  ...i
 }) => {
-  const i = u(null), [p, a] = m(!1), n = y(() => {
+  const p = m(null), [_, a] = y(!1), n = C(() => {
     if (s) {
       t?.();
       try {
@@ -28,15 +29,15 @@ import '../../assets/CopyAddress.css';const h = "CopyAddress-module__label___O2o
         else
           throw new Error("Clipboard API not supported");
       } catch {
-        i.current?.select(), document.execCommand("copy");
+        p.current?.select(), document.execCommand("copy");
       }
       a(!0), setTimeout(() => {
         a(!1);
       }, 2e3), d?.();
     }
   }, [s, t, d]);
-  return /* @__PURE__ */ c("div", { className: _(e["address-copy"], l), children: [
-    r && /* @__PURE__ */ o(C, { as: "span", className: e.label, children: r }),
+  return /* @__PURE__ */ c("div", { className: u(e["address-copy"], l), ...i, children: [
+    r && /* @__PURE__ */ o(b, { as: "span", className: e.label, children: r }),
     /* @__PURE__ */ c("div", { className: e["address-input-container"], onClick: n, children: [
       /* @__PURE__ */ c("span", { className: e["address-truncated"], children: [
         s.slice(0, 6),
@@ -50,12 +51,12 @@ import '../../assets/CopyAddress.css';const h = "CopyAddress-module__label___O2o
           "aria-label": "copy address",
           onClick: n,
           className: e["copy-button"],
-          children: p ? /* @__PURE__ */ o(b, { className: e["success-icon"] }) : /* @__PURE__ */ o(f, { className: e["copy-icon"] })
+          children: _ ? /* @__PURE__ */ o(f, { className: e["success-icon"] }) : /* @__PURE__ */ o(h, { className: e["copy-icon"] })
         }
       )
     ] })
   ] });
 };
 export {
-  w as CopyAddress
+  T as CopyAddress
 };

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

@@ -13,4 +13,4 @@ interface CopyEvmKeyButtonProps extends Pick<ButtonProps, "size" | "fullWidth">
     variant?: Extract<ButtonProps["variant"], "primary" | "secondary">;
 }
 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, };
+export { CopyEvmKeyButton, type CopyEvmKeyButtonProps };

package/dist/components/CopyEvmKeyButton/index.js

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

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

@@ -13,4 +13,4 @@ interface CopySolanaKeyButtonProps extends Pick<ButtonProps, "size" | "fullWidth
     variant?: Extract<ButtonProps["variant"], "primary" | "secondary">;
 }
 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, };
+export { CopySolanaKeyButton, type CopySolanaKeyButtonProps };

package/dist/components/CopySolanaKeyButton/index.js

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

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

@@ -1,6 +1,6 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { CopyAddressProps } from '../CopyAddress';
-import { unstable_CopyEvmKeyButtonProps as CopyEvmKeyButtonProps } from '../CopyEvmKeyButton';
+import { CopyEvmKeyButtonProps } from '../CopyEvmKeyButton';
 interface ExportWalletTitleProps extends HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
@@ -18,4 +18,4 @@ declare const ExportWalletCopyAddress: ({ label, ...props }: ExportWalletCopyAdd
 declare const ExportWalletCopyKeyButton: ({ fullWidth, ...props }: ExportWalletCopyKeyButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 declare const ExportWalletFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const ExportWallet: ({ address, children, className, onIframeError, onIframeReady, onCopySuccess, ...props }: ExportWalletProps) => import("react/jsx-runtime").JSX.Element;
-export { ExportWallet as unstable_ExportWallet, ExportWalletCopyAddress as unstable_ExportWalletCopyAddress, ExportWalletCopyKeyButton as unstable_ExportWalletCopyKeyButton, ExportWalletFooter as unstable_ExportWalletFooter, ExportWalletTitle as unstable_ExportWalletTitle, ExportWalletWarning as unstable_ExportWalletWarning, type ExportWalletProps as unstable_ExportWalletProps, type ExportWalletCopyAddressProps as unstable_ExportWalletCopyAddressProps, type ExportWalletCopyKeyButtonProps as unstable_ExportWalletCopyKeyButtonProps, type ExportWalletTitleProps as unstable_ExportWalletTitleProps, };
+export { ExportWallet, ExportWalletCopyAddress, ExportWalletCopyKeyButton, ExportWalletFooter, ExportWalletTitle, ExportWalletWarning, type ExportWalletProps, type ExportWalletCopyAddressProps, type ExportWalletCopyKeyButtonProps, type ExportWalletTitleProps, };