@coinbase/cdp-react 0.0.29 → 0.0.31

package/README.md

@@ -8,6 +8,8 @@ the CDP frontend SDK.
  - {@link SignOutButton | `SignOutButton`} - a sign out button
  - {@link AuthButton | `AuthButton`} - the `SignOutButton` when logged in, and the `SignInModal` when logged out
  - {@link SendTransactionButton | `SendTransactionButton`} - a button that signs and sends a transaction
+ - {@link Fund | `Fund`} - the fund flow
+ - {@link FundModal | `FundModal`} - a button that triggers a modal with the fund flow
 
 ## Quickstart
 

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

@@ -7,4 +7,4 @@ import { FetchBuyUrlParams } from './hooks/useBuyUrl';
 import { CamelToSnakeCase, CamelToSnakeCaseNested, FundAction, FetchBuyOptions, FetchBuyQuote, FundPaymentMethod, FundPresetAmountInputs, FundProps, FundState, FundStateError, FundStateProps, FundContextType, FundLifecycleStatus, OnrampAmount, OnrampBuyQuoteResponse, OnrampBuyOptionsResponse, OnrampBuyOptionsSnakeCaseResponse, OnrampBuyQuoteSnakeCaseResponse, OnrampError, OnrampNetwork, OnrampPaymentCurrency, OnrampPaymentMethodLimit, OnrampPurchaseCurrency, OnrampSuccessEventData } from './types';
 declare const Fund: ({ className, children, openIn, submitLabel, title, ...props }: FundProps) => import("react/jsx-runtime").JSX.Element;
 declare const FundFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-export { Fund as unstable_Fund, FundFooter as unstable_FundFooter, FundForm as unstable_FundForm, FundTitle as unstable_FundTitle, useFundContext as unstable_useFundContext, type CamelToSnakeCase as unstable_CamelToSnakeCase, type CamelToSnakeCaseNested as unstable_CamelToSnakeCaseNested, type FundAction as unstable_FundAction, type FetchBuyOptions as unstable_FetchBuyOptions, type FetchBuyQuote as unstable_FetchBuyQuote, type FetchBuyUrlParams as unstable_FetchBuyUrlParams, type FundContextType as unstable_FundContextType, type FundFormProps as unstable_FundFormProps, type FundLifecycleStatus as unstable_FundLifecycleStatus, type FundPaymentMethod as unstable_FundPaymentMethod, type FundPresetAmountInputs as unstable_FundPresetAmountInputs, type FundProps as unstable_FundProps, type FundState as unstable_FundState, type FundStateError as unstable_FundStateError, type FundStateProps as unstable_FundStateProps, type FundTitleProps as unstable_FundTitleProps, type InputType as unstable_InputType, type OnrampAmount as unstable_OnrampAmount, type OnrampBuyQuoteResponse as unstable_OnrampBuyQuoteResponse, type OnrampBuyOptionsResponse as unstable_OnrampBuyOptionsResponse, type OnrampBuyOptionsSnakeCaseResponse as unstable_OnrampBuyOptionsSnakeCaseResponse, type OnrampBuyQuoteSnakeCaseResponse as unstable_OnrampBuyQuoteSnakeCaseResponse, type OnrampError as unstable_OnrampError, type OnrampNetwork as unstable_OnrampNetwork, type OnrampPaymentCurrency as unstable_OnrampPaymentCurrency, type OnrampPaymentMethodLimit as unstable_OnrampPaymentMethodLimit, type OnrampPurchaseCurrency as unstable_OnrampPurchaseCurrency, type OnrampSuccessEventData as unstable_OnrampSuccessEventData, };
+export { Fund, FundFooter, FundForm, FundTitle, useFundContext, type CamelToSnakeCase, type CamelToSnakeCaseNested, type FundAction, type FetchBuyOptions, type FetchBuyQuote, type FetchBuyUrlParams, type FundContextType, type FundFormProps, type FundLifecycleStatus, type FundPaymentMethod, type FundPresetAmountInputs, type FundProps, type FundState, type FundStateError, type FundStateProps, type FundTitleProps, type InputType, type OnrampAmount, type OnrampBuyQuoteResponse, type OnrampBuyOptionsResponse, type OnrampBuyOptionsSnakeCaseResponse, type OnrampBuyQuoteSnakeCaseResponse, type OnrampError, type OnrampNetwork, type OnrampPaymentCurrency, type OnrampPaymentMethodLimit, type OnrampPurchaseCurrency, type OnrampSuccessEventData, };

package/dist/components/Fund/index.js

@@ -1,30 +1,30 @@
-import { jsx as t, jsxs as m, Fragment as a } from "react/jsx-runtime";
-import { useId as F } from "react";
-import { useAppConfig as f } from "../CDPReactProvider/index.js";
-import { CoinbaseFooter as l } from "../ui/CoinbaseFooter/index.js";
-import { FundForm as p } from "./FundForm.js";
-import { FundProvider as c, useFundContext as _ } from "./FundProvider.js";
-import { FundTitle as b } from "./FundTitle.js";
-import { useSetupOnrampEventListeners as C } from "./hooks/useSetupOnrampEventListeners.js";
+import { jsx as t, jsxs as m, Fragment as f } from "react/jsx-runtime";
+import { useId as p } from "react";
+import { useAppConfig as F } from "../CDPReactProvider/index.js";
+import { CoinbaseFooter as c } from "../ui/CoinbaseFooter/index.js";
+import { FundForm as a } from "./FundForm.js";
+import { FundProvider as l, useFundContext as C } from "./FundProvider.js";
+import { FundTitle as _ } from "./FundTitle.js";
+import { useSetupOnrampEventListeners as b } from "./hooks/useSetupOnrampEventListeners.js";
 import '../../assets/Fund.css';const x = "Fund-module__fund___6j-Og", g = {
   fund: x
-}, E = ({ className: n = "", children: e, openIn: r, submitLabel: s, title: u, ...o }) => /* @__PURE__ */ t(c, { ...o, children: /* @__PURE__ */ t("div", { className: `${g.fund} ${n}`, children: /* @__PURE__ */ t(h, { openIn: r, submitLabel: s, title: u, children: e }) }) }), h = ({
-  children: n,
-  openIn: e,
-  submitLabel: r,
+}, L = ({ className: o = "", children: r, openIn: e, submitLabel: s, title: u, ...n }) => /* @__PURE__ */ t(l, { ...n, children: /* @__PURE__ */ t("div", { className: `${g.fund} ${o}`, children: /* @__PURE__ */ t(h, { openIn: e, submitLabel: s, title: u, children: r }) }) }), h = ({
+  children: o,
+  openIn: r,
+  submitLabel: e,
   title: s
 }) => {
-  const { state: u } = _(), o = F(), { showCoinbaseFooter: d } = f();
-  return C(), n ? typeof n == "function" ? n(u) : n : /* @__PURE__ */ t(p, { "aria-labelledby": o, openIn: e, submitLabel: r, children: ({ Content: i }) => /* @__PURE__ */ m(a, { children: [
-    /* @__PURE__ */ t(b, { id: o, children: s }),
-    i,
-    d && /* @__PURE__ */ t(j, {})
+  const { state: u } = C(), n = p(), { showCoinbaseFooter: i } = F();
+  return b(), o ? typeof o == "function" ? o(u) : o : /* @__PURE__ */ t(a, { "aria-labelledby": n, openIn: r, submitLabel: e, children: ({ Content: d }) => /* @__PURE__ */ m(f, { children: [
+    /* @__PURE__ */ t(_, { id: n, children: s }),
+    d,
+    i && /* @__PURE__ */ t(j, {})
   ] }) });
-}, j = (n) => /* @__PURE__ */ t(l, { ...n });
+}, j = (o) => /* @__PURE__ */ t(c, { ...o });
 export {
-  E as unstable_Fund,
-  j as unstable_FundFooter,
-  p as unstable_FundForm,
-  b as unstable_FundTitle,
-  _ as unstable_useFundContext
+  L as Fund,
+  j as FundFooter,
+  a as FundForm,
+  _ as FundTitle,
+  C as useFundContext
 };

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

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { unstable_FundProps as FundProps } from '../Fund';
+import { FundProps } from '../Fund';
 interface FundModalProps extends FundProps {
     children?: ReactNode;
     open?: boolean;
     setIsOpen?: (value: boolean) => void;
 }
 declare const FundModal: ({ children, open, setIsOpen, openIn, submitLabel, title, ...fundProps }: FundModalProps) => import("react/jsx-runtime").JSX.Element;
-export { FundModal as unstable_FundModal, type FundModalProps as unstable_FundModalProps };
+export { FundModal, type FundModalProps };

package/dist/components/FundModal/index.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as o, Fragment as x } from "react/jsx-runtime";
-import { useId as O, useState as v, useCallback as h } from "react";
+import { useId as O, useState as v, useCallback as p } from "react";
 import { useAppConfig as T } from "../CDPReactProvider/index.js";
-import { unstable_Fund as j, unstable_FundFooter as I } from "../Fund/index.js";
-import { Button as p } from "../ui/Button/index.js";
+import { Fund as j, FundFooter as I } from "../Fund/index.js";
+import { Button as F } from "../ui/Button/index.js";
 import { Modal as $, ModalTrigger as z, ModalContent as A, ModalTitle as S, ModalClose as k } from "../ui/Modal/index.js";
 import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
 import { IconXMark as U } from "../../icons/IconXMark.js";
@@ -20,7 +20,7 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
   title: q,
   content: B
 }, Y = ({
-  children: b,
+  children: g,
   open: i,
   setIsOpen: c,
   openIn: u,
@@ -28,14 +28,14 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
   title: d,
   ...m
 }) => {
-  const { showCoinbaseFooter: f } = T(), l = O(), r = i !== void 0, [g, F] = v(!1), C = r ? i : g, s = h(
-    (e) => r ? c?.(e) : F(e),
-    [r, c, F]
-  ), N = h(() => {
+  const { showCoinbaseFooter: f } = T(), r = O(), l = i !== void 0, [C, h] = v(!1), b = l ? i : C, s = p(
+    (e) => l ? c?.(e) : h(e),
+    [l, c, h]
+  ), N = p(() => {
     s(!1);
   }, [s]);
-  return /* @__PURE__ */ t($, { open: C, onOpenChange: s, children: [
-    /* @__PURE__ */ o(z, { asChild: !0, children: b || /* @__PURE__ */ t(p, { variant: "primary", className: n.trigger, children: [
+  return /* @__PURE__ */ t($, { open: b, onOpenChange: s, children: [
+    /* @__PURE__ */ o(z, { asChild: !0, children: g || /* @__PURE__ */ t(F, { variant: "primary", className: n.trigger, children: [
       "Deposit ",
       m.cryptoCurrency.toUpperCase()
     ] }) }),
@@ -52,7 +52,7 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
           /* @__PURE__ */ o(
             V,
             {
-              "aria-labelledby": l,
+              "aria-labelledby": r,
               openIn: u,
               unmountOnTransactionSuccess: !0,
               unmount: N,
@@ -63,9 +63,9 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
                   className: `${n["fund-inner"]} ${e === "transaction-status" ? n["tx-status"] : ""}`,
                   children: [
                     /* @__PURE__ */ t("div", { className: n["title-buttons"], children: [
-                      e === "error" ? /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(a, { id: l, children: d }) }) : /* @__PURE__ */ o(a, { className: n.title, id: l, children: d }),
+                      e === "error" ? /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(a, { id: r, children: d }) }) : /* @__PURE__ */ o(a, { className: n.title, id: r, children: d }),
                       /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o(
-                        p,
+                        F,
                         {
                           className: n["close-button"],
                           "aria-label": "Close",
@@ -88,5 +88,5 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
   ] });
 };
 export {
-  Y as unstable_FundModal
+  Y as FundModal
 };

package/dist/index.js

@@ -1,19 +1,19 @@
 import { AUTH_METHODS as e, CDPReactProvider as t, useAppConfig as n } from "./components/CDPReactProvider/index.js";
 import { AuthButton as p } from "./components/AuthButton/index.js";
-import { unstable_Fund as f, unstable_FundFooter as s } from "./components/Fund/index.js";
-import { unstable_FundModal as i } from "./components/FundModal/index.js";
-import { SendTransactionButton as c } from "./components/SendTransactionButton/index.js";
-import { SignIn as I } from "./components/SignIn/index.js";
-import { useSignInReducer as g } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as S } from "./components/SignOutButton/index.js";
+import { Fund as x, FundFooter as i } from "./components/Fund/index.js";
+import { FundModal as s } from "./components/FundModal/index.js";
+import { SendTransactionButton as I } from "./components/SendTransactionButton/index.js";
+import { SignIn as l } from "./components/SignIn/index.js";
+import { useSignInReducer as S } from "./components/SignIn/useSignInReducer.js";
+import { SignOutButton as h } from "./components/SignOutButton/index.js";
 import { SignInModal as C } from "./components/SignInModal/index.js";
-import { ThemeProvider as b, useTheme as k } from "./components/ThemeProvider/index.js";
-import { cssVariables as B } from "./theme/cssVariables.js";
-import { theme as _ } from "./theme/theme.js";
-import { colors as v, colorsBase as w, colorsComponents as D, colorsSemantic as P, font as O, tokens as U } from "./theme/tokens.js";
-import { flattenTokensObject as H, themeToCssVariables as L } from "./theme/utils.js";
-import { IconArrowLeft as j } from "./icons/IconArrowLeft.js";
-import { IconArrowsUpDown as X } from "./icons/IconArrowsUpDown.js";
+import { ThemeProvider as k, useTheme as A } from "./components/ThemeProvider/index.js";
+import { cssVariables as E } from "./theme/cssVariables.js";
+import { theme as v } from "./theme/theme.js";
+import { colors as D, colorsBase as P, colorsComponents as b, colorsSemantic as O, font as U, tokens as V } from "./theme/tokens.js";
+import { flattenTokensObject as L, themeToCssVariables as R } from "./theme/utils.js";
+import { IconArrowLeft as N } from "./icons/IconArrowLeft.js";
+import { IconArrowsUpDown as _ } from "./icons/IconArrowsUpDown.js";
 import { IconCheck as y } from "./icons/IconCheck.js";
 import { IconCheckCircle as G } from "./icons/IconCheckCircle.js";
 import { IconChevronDown as K } from "./icons/IconChevronDown.js";
@@ -23,28 +23,33 @@ import { IconExclamationTriangle as oo } from "./icons/IconExclamationTriangle.j
 import { IconLock as eo } from "./icons/IconLock.js";
 import { IconPhone as no } from "./icons/IconPhone.js";
 import { IconXMark as po } from "./icons/IconXMark.js";
-import { clamp as fo } from "./utils/clamp.js";
-import { getMessageFromUnknownError as ao } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as uo } from "./utils/isApiError.js";
-import { isEmailInvalid as lo } from "./utils/isEmailInvalid.js";
+import { clamp as xo } from "./utils/clamp.js";
+import { getMessageFromUnknownError as co } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as ao } from "./utils/isApiError.js";
+import { isEmailInvalid as uo } from "./utils/isEmailInvalid.js";
 import { parseValuesFromPhoneNumber as go } from "./utils/parseValuesFromPhoneNumber.js";
-import { FundForm as So } from "./components/Fund/FundForm.js";
+import { FundForm as ho } from "./components/Fund/FundForm.js";
 import { FundTitle as Co } from "./components/Fund/FundTitle.js";
-import { useFundContext as bo } from "./components/Fund/FundProvider.js";
-import { SignInAuthMethodButtons as Ao } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as Eo } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as Mo } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as wo } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as Po } from "./components/SignIn/SignInForm.js";
-import { SignInImage as Uo } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as Ho } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as Ro } from "./components/SignIn/SignInProvider.js";
+import { useFundContext as ko } from "./components/Fund/FundProvider.js";
+import { SignInAuthMethodButtons as Bo } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as Mo } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as wo } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as Po } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as Oo } from "./components/SignIn/SignInForm.js";
+import { SignInImage as Vo } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as Lo } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as jo } from "./components/SignIn/SignInProvider.js";
 export {
   e as AUTH_METHODS,
   p as AuthButton,
   t as CDPReactProvider,
-  j as IconArrowLeft,
-  X as IconArrowsUpDown,
+  x as Fund,
+  i as FundFooter,
+  ho as FundForm,
+  s as FundModal,
+  Co as FundTitle,
+  N as IconArrowLeft,
+  _ as IconArrowsUpDown,
   y as IconCheck,
   G as IconCheckCircle,
   K as IconChevronDown,
@@ -54,41 +59,36 @@ export {
   eo as IconLock,
   no as IconPhone,
   po as IconXMark,
-  c as SendTransactionButton,
-  I as SignIn,
-  Ao as SignInAuthMethodButtons,
-  Eo as SignInBackButton,
-  Mo as SignInDescription,
-  wo as SignInFooter,
-  Po as SignInForm,
-  Uo as SignInImage,
+  I as SendTransactionButton,
+  l as SignIn,
+  Bo as SignInAuthMethodButtons,
+  Mo as SignInBackButton,
+  wo as SignInDescription,
+  Po as SignInFooter,
+  Oo as SignInForm,
+  Vo as SignInImage,
   C as SignInModal,
-  Ho as SignInTitle,
-  S as SignOutButton,
-  b as ThemeProvider,
-  fo as clamp,
-  v as colors,
-  w as colorsBase,
-  D as colorsComponents,
-  P as colorsSemantic,
-  B as cssVariables,
-  H as flattenTokensObject,
-  O as font,
-  ao as getMessageFromUnknownError,
-  uo as isApiError,
-  lo as isEmailInvalid,
+  Lo as SignInTitle,
+  h as SignOutButton,
+  k as ThemeProvider,
+  xo as clamp,
+  D as colors,
+  P as colorsBase,
+  b as colorsComponents,
+  O as colorsSemantic,
+  E as cssVariables,
+  L as flattenTokensObject,
+  U as font,
+  co as getMessageFromUnknownError,
+  ao as isApiError,
+  uo as isEmailInvalid,
   go as parseValuesFromPhoneNumber,
-  _ as theme,
-  L as themeToCssVariables,
-  U as tokens,
-  f as unstable_Fund,
-  s as unstable_FundFooter,
-  So as unstable_FundForm,
-  i as unstable_FundModal,
-  Co as unstable_FundTitle,
-  bo as unstable_useFundContext,
+  v as theme,
+  R as themeToCssVariables,
+  V as tokens,
   n as useAppConfig,
-  Ro as useSignInContext,
-  g as useSignInReducer,
-  k as useTheme
+  ko as useFundContext,
+  jo as useSignInContext,
+  S as useSignInReducer,
+  A as useTheme
 };

package/package.json

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