@coinbase/cdp-react 0.0.58 → 0.0.61

package/README.md

@@ -3,14 +3,16 @@ the CDP frontend SDK.
 
 ## Components
 
- - {@link SignInModal | `SignInModal`} - a button that triggers a modal with the sign-in flow
- - {@link SignIn | `SignIn`} - the forms for the sign in flow, a logo, heading, and description text
- - {@link SignOutButton | `SignOutButton`} - a sign out button
- - {@link AuthButton | `AuthButton`} - the `SignOutButton` when logged in, and the `SignInModal` when logged out
- - {@link SendEvmTransactionButton | `SendEvmTransactionButton`} - a button that signs and sends an EVM transaction
- - {@link SendSolanaTransactionButton | `SendSolanaTransactionButton`} - a button that signs and sends a Solana transaction
- - {@link Fund | `Fund`} - the fund flow
- - {@link FundModal | `FundModal`} - a button that triggers a modal with the fund flow
+ - {@link SignInModal | SignInModal} - a button that triggers a modal with the sign-in flow
+ - {@link SignIn | SignIn} - the forms for the sign in flow, a logo, heading, and description text
+ - {@link SignOutButton | SignOutButton} - a sign out button
+ - {@link AuthButton | AuthButton} - the `SignOutButton` when logged in, and the `SignInModal` when logged out
+ - {@link SendEvmTransactionButton | SendEvmTransactionButton} - a button that signs and sends an EVM transaction
+ - {@link SendSolanaTransactionButton | SendSolanaTransactionButton} - a button that signs and sends a Solana transaction
+ - {@link Fund | Fund} - the fund flow
+ - {@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
 
 ## Quickstart
 

package/dist/assets/Banner.css

@@ -0,0 +1 @@
+.Banner-module__banner___vODjX{border-radius:var(--cdp-web-borderRadius-banner);display:flex;gap:.5em;padding:.75em;line-height:1.25em;background-color:var(--cdp-web-colors-bg-alternate);color:var(--cdp-web-colors-page-text-default)}.Banner-module__banner___vODjX[data-variant=error]{background-color:var(--cdp-web-colors-bg-negativeWash);color:var(--cdp-web-colors-fg-onNegativeWash)}.Banner-module__banner___vODjX[data-variant=success]{background-color:var(--cdp-web-colors-bg-positiveWash);color:var(--cdp-web-colors-fg-onPositiveWash)}.Banner-module__banner___vODjX[data-variant=warning]{background-color:var(--cdp-web-colors-bg-warningWash);color:var(--cdp-web-colors-fg-onWarningWash)}.Banner-module__banner___vODjX .Banner-module__icon___wzB6C{width:1.5em;height:1.25em;display:flex;align-items:center;justify-content:center}.Banner-module__banner___vODjX[data-variant=error] .Banner-module__icon___wzB6C{color:var(--cdp-web-colors-fg-negative)}.Banner-module__banner___vODjX[data-variant=success] .Banner-module__icon___wzB6C{color:var(--cdp-web-colors-fg-positive)}.Banner-module__banner___vODjX[data-variant=warning] .Banner-module__icon___wzB6C{color:var(--cdp-web-colors-fg-warning)}.Banner-module__banner___vODjX svg{width:.875em;height:.875em}.Banner-module__banner___vODjX .Banner-module__text___fTYC-{font-size:.875em;padding-right:.25em}

package/dist/assets/CopyAddress.css

@@ -0,0 +1 @@
+.CopyAddress-module__address-copy___KpKeI{display:flex;flex-direction:column;gap:.25em}.CopyAddress-module__label___O2o5m{display:block}.CopyAddress-module__address-input-container___qq0TH{position:relative;background-color:var(--cdp-web-colors-input-bg-readonly);color:var(--cdp-web-colors-input-text-readonly);cursor:pointer;border-radius:var(--cdp-web-borderRadius-input);padding:.75em;display:flex;align-items:center;justify-content:space-between;gap:.5em}.CopyAddress-module__address-truncated___kr8St{font-size:.875em;color:var(--cdp-web-colors-input-text-readonly);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.CopyAddress-module__copy-button___64o2y{align-items:center;background:transparent;border:0;border-radius:var(--cdp-web-borderRadius-cta);color:var(--cdp-web-colors-input-text-readonly);cursor:pointer;display:flex;height:1.5em;line-height:1;justify-content:center;padding:0;width:1.5em}.CopyAddress-module__copy-button___64o2y:focus{outline:none}.CopyAddress-module__copy-button___64o2y:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);box-shadow:inset 0 0 0 2px var(--cdp-web-button-ring-inset-color),0 0 0 2px var(--cdp-web-button-ring-color)}.CopyAddress-module__success-icon___qXipU{display:block;width:1.25em;height:1.25em}.CopyAddress-module__copy-icon___lUbYG{display:block;width:.875em;height:.875em}

package/dist/assets/ExportWallet.css

@@ -0,0 +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}

package/dist/assets/ExportWalletModal.css

@@ -0,0 +1 @@
+.ExportWalletModal-module__export-wallet___--L56{height:100%;overflow:hidden;gap:0}.ExportWalletModal-module__export-wallet___--L56.ExportWalletModal-module__no-footer___J8uj2{padding-bottom:2em}.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:22.5em}}

package/dist/assets/IframeButton.css

@@ -0,0 +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}

package/dist/assets/Input.css

@@ -1 +1 @@
-.Input-module__input___-mK8z{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;font-family:var(--cdp-web-font-family-input);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding:1em;border-radius:var(--cdp-web-borderRadius-input);border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.Input-module__size-lg___IYoRG{padding:1em}.Input-module__size-md___8hkn5{padding:.75em}.Input-module__size-sm___cnynF{padding:.5em .75em}.Input-module__size-xs___aK-NH{padding:.25em .75em}.Input-module__input___-mK8z::placeholder{color:var(--cdp-web-colors-input-placeholder-default)}.Input-module__input___-mK8z:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.Input-module__input___-mK8z[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.Input-module__input___-mK8z[data-success=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}
+.Input-module__input___-mK8z{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;font-family:var(--cdp-web-font-family-input);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding:1em;border-radius:var(--cdp-web-borderRadius-input);border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.Input-module__input___-mK8z[readonly]{--cdp-web-input-ring-color: transparent;background-color:var(--cdp-web-colors-input-bg-readonly);color:var(--cdp-web-colors-input-text-readonly)}.Input-module__size-lg___IYoRG{padding:1em}.Input-module__size-md___8hkn5{padding:.75em}.Input-module__size-sm___cnynF{padding:.5em .75em}.Input-module__size-xs___aK-NH{padding:.25em .75em}.Input-module__input___-mK8z::placeholder{color:var(--cdp-web-colors-input-placeholder-default)}.Input-module__input___-mK8z:focus-visible,.Input-module__input___-mK8z[readonly]:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.Input-module__input___-mK8z[aria-invalid=true],.Input-module__input___-mK8z[readonly][aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.Input-module__input___-mK8z[data-success=true],.Input-module__input___-mK8z[readonly][data-success=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}

package/dist/assets/LinkAuth.css

@@ -0,0 +1 @@
+.LinkAuth-module__link-auth___kPJao{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;gap:1em;max-width:38.25em;overflow:hidden;padding:1.5em 0;width:100%}.LinkAuth-module__link-auth___kPJao *{box-sizing:border-box}.LinkAuth-module__header___0UuxP,.LinkAuth-module__error___XUo4W{padding:0 1.5em}.LinkAuth-module__error___XUo4W:empty{display:none}

package/dist/assets/LinkAuthFlow.css

@@ -0,0 +1 @@
+.LinkAuthFlow-module__sign-in___F2bj7{padding:0 1.5em}.LinkAuthFlow-module__sign-in-title-desc-wrapper___6QeTc{display:flex;flex-direction:column;gap:1.5em;margin-bottom:1.5em}.LinkAuthFlow-module__sign-in-image___XGuJI{flex-grow:1;margin:2em 0}.LinkAuthFlow-module__sign-in-form___REZlP,.LinkAuthFlow-module__sign-in-form___REZlP form{flex-grow:1}.LinkAuthFlow-module__sign-in-footer___KYZNd{margin-top:1.5em}.LinkAuthFlow-module__list___dkNmh{padding-left:1.5em;padding-right:1.5em}@media (min-width: 450px){.LinkAuthFlow-module__sign-in-image___XGuJI{flex-grow:0;margin:0 0 1.5em}.LinkAuthFlow-module__sign-in-image___XGuJI:empty{display:none}}

package/dist/assets/LinkAuthFlowBackButton.css

@@ -0,0 +1 @@
+.LinkAuthFlowBackButton-module__button___wPKfW{padding:0}.LinkAuthFlowBackButton-module__icon___OUmzY{width:1.5em;height:1.5em}

package/dist/assets/LinkAuthItem.css

@@ -0,0 +1 @@
+.LinkAuthItem-module__item___NE3CT{display:flex;align-items:center;justify-content:flex-start;gap:.75em;padding:.5em 1em;margin:0;box-shadow:inset 0 0 0 1px var(--cdp-web-colors-page-border-default);color:var(--cdp-web-colors-page-text-default);border-radius:.75em}.LinkAuthItem-module__item-icon___ZIQny{display:flex;align-items:center;justify-content:center;width:1em;height:1em}.LinkAuthItem-module__item-icon___ZIQny svg{width:.875em;height:.875em}.LinkAuthItem-module__item-text___-5DVL{font-weight:500;font-size:.875em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.LinkAuthItem-module__item-action___4wOIN{display:flex;align-items:center;margin-left:auto;margin-right:0}.LinkAuthItem-module__button___nM5Tc{width:1.5em;height:1.5em;padding:0}.LinkAuthItem-module__button___nM5Tc:disabled{opacity:.5;cursor:not-allowed}.LinkAuthItem-module__button___nM5Tc svg{width:.75em;height:.75em}

package/dist/assets/LinkAuthItems.css

@@ -0,0 +1 @@
+.LinkAuthItems-module__list___5AimM{display:flex;flex-direction:column;gap:.75em;list-style:none;margin:0;padding:0}

package/dist/assets/LinkAuthModal.css

@@ -0,0 +1 @@
+.LinkAuthModal-module__header___qoco6{display:flex;align-items:center;justify-content:space-between;padding:0 1.5em}.LinkAuthModal-module__error___Srl7H{padding:0 1.5em}.LinkAuthModal-module__error___Srl7H:empty{display:none}.LinkAuthModal-module__close-icon___Fe02C{width:1.5em;height:1.5em}.LinkAuthModal-module__close-button___x6j3c{padding:0}.LinkAuthModal-module__trigger___aHDfG{padding-left:2em;padding-right:2em}

package/dist/assets/LinkAuthTitle.css

@@ -0,0 +1 @@
+.LinkAuthTitle-module__title___HIjM6{font-size:var(--cdp-web-font-size-base);font-weight:600;line-height:1.5;margin:0}

package/dist/assets/SwitchSlideTransition.css

@@ -1 +1 @@
-.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status]{width:100%;transition:opacity var(--cdp-web-transition-timeout, .2s),transform var(--cdp-web-transition-timeout, .2s)}.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left],.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right],.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left][data-animate-height=true]>div,.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right][data-animate-height=true]>div{display:flex;position:relative;width:100%}.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left][data-animate-height=true]>div,.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right][data-animate-height=true]>div{align-items:flex-start}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=preEnter]{opacity:0;transform:translate(200%)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=exiting],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=exited]{position:absolute;opacity:0;transform:translate(-200%)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=preEnter]{opacity:0;transform:translate(-200%)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=exiting],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=exited]{position:absolute;opacity:0;transform:translate(200%)}
+.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status]{width:100%;transition:opacity var(--cdp-web-transition-timeout, .2s),transform var(--cdp-web-transition-timeout, .2s)}.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left],.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right],.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left][data-animate-height=true]>div,.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right][data-animate-height=true]>div{display:flex;position:relative;width:100%}.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left][data-animate-height=true]>div,.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right][data-animate-height=true]>div{align-items:flex-start}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=preEnter]{opacity:0;transform:translate3d(200%,0,0)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=exiting],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=exited]{position:absolute;opacity:0;transform:translate3d(-200%,0,0)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=preEnter]{opacity:0;transform:translate3d(-200%,0,0)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=exiting],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=exited]{position:absolute;opacity:0;transform:translate3d(200%,0,0)}

package/dist/chunks/LinkAuthFlow.CxSnHF2p.js

@@ -0,0 +1,111 @@
+import { jsx as i, jsxs as m, Fragment as p } from "react/jsx-runtime";
+import { createContext as S, useContext as I, useMemo as v, forwardRef as A, useRef as L, useImperativeHandle as x, useEffect as N } from "react";
+import { useAppConfig as C } from "../components/CDPReactProvider/index.js";
+import { SignIn as _ } from "../components/SignIn/index.js";
+import "@coinbase/cdp-hooks";
+import { SwitchSlideTransition as T } from "../components/ui/SwitchSlideTransition/index.js";
+import { VisuallyHidden as h } from "../components/ui/VisuallyHidden/index.js";
+import { LinkAuthItems as E } from "../components/LinkAuth/LinkAuthItems.js";
+import { LINK_AUTH_FLOW_VIEWS as R } from "../components/LinkAuth/types.js";
+import { useSignInContext as y } from "../components/SignIn/SignInProvider.js";
+import { SignInImage as b } from "../components/SignIn/SignInImage.js";
+import { SignInForm as H } from "../components/SignIn/SignInForm.js";
+import { SignInTitle as g } from "../components/SignIn/SignInTitle.js";
+import { SignInDescription as w } from "../components/SignIn/SignInDescription.js";
+import { SignInFooter as P } from "../components/SignIn/SignInFooter.js";
+import '../assets/LinkAuthFlow.css';const j = "LinkAuthFlow-module__list___dkNmh", c = {
+  "sign-in": "LinkAuthFlow-module__sign-in___F2bj7",
+  "sign-in-title-desc-wrapper": "LinkAuthFlow-module__sign-in-title-desc-wrapper___6QeTc",
+  "sign-in-image": "LinkAuthFlow-module__sign-in-image___XGuJI",
+  "sign-in-form": "LinkAuthFlow-module__sign-in-form___REZlP",
+  "sign-in-footer": "LinkAuthFlow-module__sign-in-footer___KYZNd",
+  list: j
+}, k = S(null), f = () => {
+  const t = I(k);
+  if (!t)
+    throw new Error("useLinkAuthFlowInternal must be used within a LinkAuthFlowContext.Provider");
+  return t;
+}, $ = () => {
+  const {
+    signInRef: t,
+    transitionRef: u,
+    ...s
+  } = f();
+  return s;
+}, K = ({
+  direction: t = "left",
+  children: u,
+  onBack: s,
+  onLink: e,
+  onLinkSuccess: r,
+  signInRef: a,
+  transitionRef: n
+}) => {
+  const o = v(
+    () => ({
+      direction: t,
+      back: s,
+      link: e,
+      linkSuccess: r,
+      signInRef: a,
+      transitionRef: n
+    }),
+    [s, e, r, n, a, t]
+  );
+  return /* @__PURE__ */ i(k.Provider, { value: o, children: u });
+}, d = A((t, u) => {
+  const { showCoinbaseFooter: s } = C(), { state: e, dispatch: r } = y(), { linkSuccess: a } = f(), n = L(null);
+  return x(
+    u,
+    () => ({
+      canGoBack: e.step === "verification",
+      goBack: () => {
+        r({ type: "RESET_STATE" });
+      }
+    }),
+    [e.step, r]
+  ), N(() => {
+    let o;
+    return e.step === "credentials" && (o = setTimeout(() => {
+      n.current?.querySelector("input[type='email'], input[type='tel']")?.focus();
+    }, 300)), e.step === "verification" && (o = setTimeout(() => {
+      n.current?.querySelector("input[type='text']")?.focus();
+    }, 300)), () => clearTimeout(o);
+  }, [e.step]), /* @__PURE__ */ m(p, { children: [
+    /* @__PURE__ */ i("div", { className: c["sign-in-image"], children: /* @__PURE__ */ i(b, {}) }),
+    /* @__PURE__ */ i(H, { autoFocus: !1, onSuccess: a, children: ({ authMethod: o, step: l, Form: F }) => /* @__PURE__ */ m(p, { children: [
+      /* @__PURE__ */ m("div", { className: c["sign-in-title-desc-wrapper"], children: [
+        l === "verification" ? /* @__PURE__ */ i(h, { as: "div", children: /* @__PURE__ */ i(g, {}) }) : /* @__PURE__ */ i(g, {}),
+        l === "credentials" ? /* @__PURE__ */ i(h, { as: "div", children: /* @__PURE__ */ i(w, { authMethod: o }) }) : /* @__PURE__ */ i(w, { authMethod: o })
+      ] }),
+      /* @__PURE__ */ i("div", { ref: n, className: c["sign-in-form"], children: F })
+    ] }) }),
+    s && /* @__PURE__ */ i(P, { className: c["sign-in-footer"] })
+  ] });
+});
+d.displayName = "SignInContent";
+const ii = ({ children: t }) => {
+  const { direction: u, link: s, linkSuccess: e, signInRef: r, transitionRef: a } = f();
+  return /* @__PURE__ */ i(
+    T,
+    {
+      autoFocus: !1,
+      animateHeight: !0,
+      items: R,
+      initialEntered: !0,
+      timeout: 250,
+      direction: u,
+      transitionRef: a,
+      children: ({ itemKey: n, ...o }) => {
+        let l = null;
+        return n === "list" && (l = /* @__PURE__ */ i(E, { className: c.list, onLink: s })), n === "email" && (l = /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(_, { className: c["sign-in"], authMethods: ["email"], onSuccess: e, children: /* @__PURE__ */ i(d, { ref: r }) }) })), n === "sms" && (l = /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(_, { className: c["sign-in"], authMethods: ["sms"], onSuccess: e, children: /* @__PURE__ */ i(d, { ref: r }) }) })), /* @__PURE__ */ i("div", { ...o, children: t ? t({ view: n, Content: l }) : l });
+      }
+    }
+  );
+};
+export {
+  ii as L,
+  K as a,
+  f as b,
+  $ as u
+};

package/dist/components/CDPReactProvider/index.js

@@ -1,20 +1,20 @@
-import { jsx as c, jsxs as N } from "react/jsx-runtime";
-import { OAuth2ProviderType as T, CDPContext as D, CDPHooksProvider as H } from "@coinbase/cdp-hooks";
-import { lazy as S, createContext as U, useContext as m, useMemo as P } from "react";
-import { ThemeProvider as _ } from "../ThemeProvider/index.js";
-const E = S(() => import("../OAuthStatusModal/index.js")), j = (o) => {
+import { jsx as p, jsxs as H } from "react/jsx-runtime";
+import { OAuth2ProviderType as S, CDPContext as U, CDPHooksProvider as _ } from "@coinbase/cdp-hooks";
+import { lazy as E, createContext as j, useContext as m, useMemo as L } from "react";
+import { ThemeProvider as F } from "../ThemeProvider/index.js";
+const k = E(() => import("../OAuthStatusModal/index.js")), I = (t) => {
   try {
-    return JSON.stringify(o);
+    return JSON.stringify(t);
   } catch {
   }
   return "";
-}, F = Object.keys(T).map((o) => `oauth:${o}`), k = [
+}, J = Object.keys(S).map((t) => `oauth:${t}`), V = [
   /** Email OTP method */
   "email",
   /** SMS OTP method */
   "sms"
-], $ = [...k, ...F], q = ({
-  children: o,
+], G = [...V, ...J], K = ({
+  children: t,
   className: r = "",
   config: n,
   name: s,
@@ -23,51 +23,67 @@ const E = S(() => import("../OAuthStatusModal/index.js")), j = (o) => {
 }) => {
   const {
     appName: h,
-    appLogoUrl: p,
+    appLogoUrl: c,
     showCoinbaseFooter: u,
-    authMethods: t,
+    authMethods: e,
     projectId: d,
-    useMock: C,
-    debugging: l,
-    basePath: f,
-    ethereum: v,
-    solana: x
-  } = n, { createOnLogin: A } = v ?? {}, { createOnLogin: O } = x ?? {}, L = P(
+    secureIframeBasePath: C,
+    useMock: l,
+    debugging: f,
+    basePath: A,
+    ethereum: y,
+    solana: b,
+    disableAnalytics: O,
+    customAuth: P
+  } = n, { createOnLogin: M } = y ?? {}, { createOnLogin: v } = b ?? {}, w = L(
     () => ({
       projectId: d,
-      useMock: C,
-      debugging: l,
-      basePath: f,
-      ethereum: { createOnLogin: A },
-      solana: { createOnLogin: O }
+      useMock: l,
+      debugging: f,
+      basePath: A,
+      secureIframeBasePath: C,
+      disableAnalytics: O,
+      customAuth: P,
+      ethereum: { createOnLogin: M },
+      solana: { createOnLogin: v }
     }),
-    [d, C, l, f, A, O]
-  ), w = { appName: h, appLogoUrl: p, showCoinbaseFooter: u, authMethods: t }, y = t?.some((b) => b.startsWith("oauth:")), M = /* @__PURE__ */ c(J, { name: s, config: w, children: /* @__PURE__ */ N(_, { className: r, style: a, theme: i, children: [
-    o,
-    y && /* @__PURE__ */ c(E, {})
+    [
+      d,
+      l,
+      f,
+      A,
+      C,
+      M,
+      v,
+      O,
+      P
+    ]
+  ), N = { appName: h, appLogoUrl: c, showCoinbaseFooter: u, authMethods: e }, T = e?.some((D) => D.startsWith("oauth:")), x = /* @__PURE__ */ p(z, { name: s, config: N, children: /* @__PURE__ */ H(F, { className: r, style: a, theme: i, children: [
+    t,
+    T && /* @__PURE__ */ p(k, {})
   ] }) });
-  return m(D) ? M : /* @__PURE__ */ c(H, { config: L, children: M });
-}, g = U(
+  return m(U) ? x : /* @__PURE__ */ p(_, { config: w, children: x });
+}, g = j(
   void 0
-), e = {
+), o = {
   appName: "",
   appLogoUrl: "",
   showCoinbaseFooter: !0,
   authMethods: ["email"]
-}, J = ({
-  children: o,
+}, z = ({
+  children: t,
   config: r,
   name: n
 }) => {
   const {
-    appName: s = e.appName,
-    appLogoUrl: a = e.appLogoUrl,
-    showCoinbaseFooter: i = e.showCoinbaseFooter,
-    authMethods: h = e.authMethods
-  } = r ?? {}, p = j(h), u = P(() => {
-    let t = ["email"];
+    appName: s = o.appName,
+    appLogoUrl: a = o.appLogoUrl,
+    showCoinbaseFooter: i = o.showCoinbaseFooter,
+    authMethods: h = o.authMethods
+  } = r ?? {}, c = I(h), u = L(() => {
+    let e = ["email"];
     try {
-      t = JSON.parse(p);
+      e = JSON.parse(c);
     } catch {
     }
     return {
@@ -75,28 +91,28 @@ const E = S(() => import("../OAuthStatusModal/index.js")), j = (o) => {
         appName: s,
         appLogoUrl: a,
         showCoinbaseFooter: i,
-        authMethods: Array.isArray(t) && t?.length ? t : e.authMethods
+        authMethods: Array.isArray(e) && e?.length ? e : o.authMethods
       },
       name: n
     };
-  }, [s, a, i, p, n]);
-  return /* @__PURE__ */ c(g.Provider, { value: u, children: o });
-}, B = () => {
-  const o = m(g);
-  if (!o)
+  }, [s, a, i, c, n]);
+  return /* @__PURE__ */ p(g.Provider, { value: u, children: t });
+}, Q = () => {
+  const t = m(g);
+  if (!t)
     throw new Error("useAppConfig must be used within an AppConfigProvider");
-  return o.app;
-}, G = () => {
-  const o = m(g);
-  if (!o)
+  return t.app;
+}, X = () => {
+  const t = m(g);
+  if (!t)
     throw new Error("useProviderName must be used within an AppConfigProvider");
-  return o.name ?? "";
+  return t.name ?? "";
 };
 export {
-  $ as ALL_AUTH_METHODS,
-  k as AUTH_METHODS,
-  q as CDPReactProvider,
-  F as OAUTH_METHODS,
-  B as useAppConfig,
-  G as useProviderName
+  G as ALL_AUTH_METHODS,
+  V as AUTH_METHODS,
+  K as CDPReactProvider,
+  J as OAUTH_METHODS,
+  Q as useAppConfig,
+  X as useProviderName
 };

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export interface CopyAddressProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    address: string;
+    label?: string;
+    onCopy?: () => void;
+    onCopySuccess?: () => void;
+}
+export declare const CopyAddress: ({ className, address, label, onCopy, onCopySuccess, }: CopyAddressProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CopyAddress/index.js

@@ -0,0 +1,61 @@
+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 = {
+  "address-copy": "CopyAddress-module__address-copy___KpKeI",
+  label: h,
+  "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 = ({
+  className: l = "",
+  address: s,
+  label: r,
+  onCopy: t,
+  onCopySuccess: d
+}) => {
+  const i = u(null), [p, a] = m(!1), n = y(() => {
+    if (s) {
+      t?.();
+      try {
+        if (navigator.clipboard)
+          navigator.clipboard.writeText(s);
+        else
+          throw new Error("Clipboard API not supported");
+      } catch {
+        i.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 }),
+    /* @__PURE__ */ c("div", { className: e["address-input-container"], onClick: n, children: [
+      /* @__PURE__ */ c("span", { className: e["address-truncated"], children: [
+        s.slice(0, 6),
+        "...",
+        s.slice(-4)
+      ] }),
+      /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          "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"] })
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  w as CopyAddress
+};

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

@@ -0,0 +1,13 @@
+import { ButtonProps } from '../ui/Button';
+interface CopyEvmKeyButtonProps extends Pick<ButtonProps, "variant" | "size" | "fullWidth"> {
+    address: string;
+    className?: string;
+    copiedLabel?: string;
+    icon?: boolean;
+    label?: string;
+    onReady?: () => void;
+    onSuccess?: () => void;
+    onError?: (error?: string) => void;
+}
+declare const CopyEvmKeyButton: ({ address, className, copiedLabel, icon, fullWidth, label, onReady, onSuccess, onError, size, variant, }: CopyEvmKeyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { CopyEvmKeyButton as unstable_CopyEvmKeyButton, type CopyEvmKeyButtonProps as unstable_CopyEvmKeyButtonProps, };

package/dist/components/CopyEvmKeyButton/index.js

@@ -0,0 +1,61 @@
+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 "../ui/Button/index.js";
+import { IframeButton as I } from "../ui/IframeButton/index.js";
+import { useKeyExportPostMessage as K } 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",
+  icon: o = !0,
+  fullWidth: c,
+  label: e = "Copy key",
+  onReady: t,
+  onSuccess: m,
+  onError: i,
+  size: p,
+  variant: u
+}) => {
+  const {
+    config: { projectId: l, secureIframeBasePath: y }
+  } = P(), f = v(null), d = x(
+    (r, g) => {
+      r === "ready" && t?.(), r === "success" && m?.(), r === "error" && i?.(g);
+    },
+    [t, m, i]
+  ), { iframeUrl: C, isPending: b } = K({
+    address: s,
+    type: "evm",
+    projectId: l,
+    variant: u,
+    size: p,
+    label: e,
+    basePath: y,
+    copiedLabel: n,
+    icon: o,
+    iframeRef: f,
+    onStatusUpdate: d
+  });
+  return /* @__PURE__ */ B(
+    I,
+    {
+      ref: f,
+      src: C,
+      allow: "clipboard-read; clipboard-write",
+      isPending: b,
+      label: e,
+      icon: o,
+      fullWidth: c,
+      size: p,
+      className: a
+    }
+  );
+};
+export {
+  A as unstable_CopyEvmKeyButton
+};

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

@@ -0,0 +1,13 @@
+import { ButtonProps } from '../ui/Button';
+interface CopySolanaKeyButtonProps extends Pick<ButtonProps, "variant" | "size" | "fullWidth"> {
+    address: string;
+    className?: string;
+    copiedLabel?: string;
+    icon?: boolean;
+    label?: string;
+    onReady?: () => void;
+    onSuccess?: () => void;
+    onError?: (error?: string) => void;
+}
+declare const CopySolanaKeyButton: ({ address, className, copiedLabel, icon, fullWidth, label, onReady, onSuccess, onError, size, variant, }: CopySolanaKeyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { CopySolanaKeyButton as unstable_CopySolanaKeyButton, type CopySolanaKeyButtonProps as unstable_CopySolanaKeyButtonProps, };

package/dist/components/CopySolanaKeyButton/index.js

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

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

@@ -0,0 +1,21 @@
+import { ElementType, HTMLAttributes } from 'react';
+import { CopyAddressProps } from '../CopyAddress';
+import { unstable_CopyEvmKeyButtonProps as CopyEvmKeyButtonProps } from '../CopyEvmKeyButton';
+interface ExportWalletTitleProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+interface ExportWalletProps extends HTMLAttributes<HTMLDivElement> {
+    address: string;
+    onIframeReady?: () => void;
+    onCopySuccess?: () => void;
+    onIframeError?: (error?: string) => void;
+}
+type ExportWalletCopyAddressProps = Omit<CopyAddressProps, "address">;
+type ExportWalletCopyKeyButtonProps = Omit<CopyEvmKeyButtonProps, "address" | "onError" | "onReady" | "onSuccess">;
+declare const ExportWalletTitle: ({ children, className, as: Component, ...props }: ExportWalletTitleProps) => import("react/jsx-runtime").JSX.Element;
+declare const ExportWalletWarning: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const ExportWalletCopyAddress: ({ label, ...props }: ExportWalletCopyAddressProps) => import("react/jsx-runtime").JSX.Element;
+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, };