@coinbase/cdp-react 0.0.24 → 0.0.25

package/dist/icons/IconExclamationTriangle.js

@@ -0,0 +1,14 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as l } from "./SvgIcon.js";
+const n = (e) => /* @__PURE__ */ o(l, { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", ...e, children: /* @__PURE__ */ o(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+    clipRule: "evenodd"
+  }
+) });
+export {
+  n as IconExclamationTriangle
+};

package/dist/icons/index.d.ts

@@ -5,6 +5,7 @@ export * from './IconCheckCircle';
 export * from './IconChevronDown';
 export * from './IconEnvelope';
 export * from './IconExclamationCircle';
+export * from './IconExclamationTriangle';
 export * from './IconLock';
 export * from './IconPhone';
 export * from './IconXMark';

package/dist/icons/index.js

@@ -1,22 +1,24 @@
 import { IconArrowLeft as e } from "./IconArrowLeft.js";
-import { IconArrowsUpDown as n } from "./IconArrowsUpDown.js";
-import { IconCheck as t } from "./IconCheck.js";
-import { IconCheckCircle as m } from "./IconCheckCircle.js";
+import { IconArrowsUpDown as c } from "./IconArrowsUpDown.js";
+import { IconCheck as m } from "./IconCheck.js";
+import { IconCheckCircle as x } from "./IconCheckCircle.js";
 import { IconChevronDown as I } from "./IconChevronDown.js";
-import { IconEnvelope as h } from "./IconEnvelope.js";
-import { IconExclamationCircle as l } from "./IconExclamationCircle.js";
-import { IconLock as a } from "./IconLock.js";
-import { IconPhone as v } from "./IconPhone.js";
-import { IconXMark as D } from "./IconXMark.js";
+import { IconEnvelope as l } from "./IconEnvelope.js";
+import { IconExclamationCircle as C } from "./IconExclamationCircle.js";
+import { IconExclamationTriangle as k } from "./IconExclamationTriangle.js";
+import { IconLock as E } from "./IconLock.js";
+import { IconPhone as A } from "./IconPhone.js";
+import { IconXMark as L } from "./IconXMark.js";
 export {
   e as IconArrowLeft,
-  n as IconArrowsUpDown,
-  t as IconCheck,
-  m as IconCheckCircle,
+  c as IconArrowsUpDown,
+  m as IconCheck,
+  x as IconCheckCircle,
   I as IconChevronDown,
-  h as IconEnvelope,
-  l as IconExclamationCircle,
-  a as IconLock,
-  v as IconPhone,
-  D as IconXMark
+  l as IconEnvelope,
+  C as IconExclamationCircle,
+  k as IconExclamationTriangle,
+  E as IconLock,
+  A as IconPhone,
+  L as IconXMark
 };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export * from './components/CDPReactProvider';
 export * from './components/AuthButton';
+export * from './components/Fund';
+export * from './components/FundModal';
 export * from './components/SendTransactionButton';
 export * from './components/SignIn';
 export * from './components/SignOutButton';

package/dist/index.js

@@ -1,81 +1,94 @@
 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 { SendTransactionButton as x } from "./components/SendTransactionButton/index.js";
-import { SignIn as c } from "./components/SignIn/index.js";
-import { useSignInReducer as I } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as l } from "./components/SignOutButton/index.js";
-import { SignInModal as u } from "./components/SignInModal/index.js";
-import { ThemeProvider as h, useTheme as C } from "./components/ThemeProvider/index.js";
-import { cssVariables as T } from "./theme/cssVariables.js";
-import { theme as A } from "./theme/theme.js";
-import { colors as E, colorsBase as v, colorsComponents as w, colorsSemantic as D, font as M, tokens as P } from "./theme/tokens.js";
-import { flattenTokensObject as F, themeToCssVariables as O } from "./theme/utils.js";
-import { IconArrowLeft as V } from "./icons/IconArrowLeft.js";
-import { IconArrowsUpDown as L } from "./icons/IconArrowsUpDown.js";
-import { IconCheck as j } from "./icons/IconCheck.js";
-import { IconCheckCircle as X } from "./icons/IconCheckCircle.js";
-import { IconChevronDown as q } from "./icons/IconChevronDown.js";
-import { IconEnvelope as z } from "./icons/IconEnvelope.js";
-import { IconExclamationCircle as J } from "./icons/IconExclamationCircle.js";
-import { IconLock as Q } from "./icons/IconLock.js";
-import { IconPhone as Y } from "./icons/IconPhone.js";
-import { IconXMark as $ } from "./icons/IconXMark.js";
-import { clamp as ro } from "./utils/clamp.js";
-import { getMessageFromUnknownError as to } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as mo } from "./utils/isApiError.js";
-import { isEmailInvalid as fo } from "./utils/isEmailInvalid.js";
-import { parseValuesFromPhoneNumber as io } from "./utils/parseValuesFromPhoneNumber.js";
-import { SignInAuthMethodButtons as so } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as ao } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as go } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as So } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as Co } from "./components/SignIn/SignInForm.js";
-import { SignInImage as To } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as Bo } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as vo } from "./components/SignIn/SignInProvider.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 { 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 { IconCheck as y } from "./icons/IconCheck.js";
+import { IconCheckCircle as G } from "./icons/IconCheckCircle.js";
+import { IconChevronDown as K } from "./icons/IconChevronDown.js";
+import { IconEnvelope as W } from "./icons/IconEnvelope.js";
+import { IconExclamationCircle as Z } from "./icons/IconExclamationCircle.js";
+import { IconExclamationTriangle as oo } from "./icons/IconExclamationTriangle.js";
+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 { parseValuesFromPhoneNumber as go } from "./utils/parseValuesFromPhoneNumber.js";
+import { FundForm as So } 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";
 export {
   e as AUTH_METHODS,
   p as AuthButton,
   t as CDPReactProvider,
-  V as IconArrowLeft,
-  L as IconArrowsUpDown,
-  j as IconCheck,
-  X as IconCheckCircle,
-  q as IconChevronDown,
-  z as IconEnvelope,
-  J as IconExclamationCircle,
-  Q as IconLock,
-  Y as IconPhone,
-  $ as IconXMark,
-  x as SendTransactionButton,
-  c as SignIn,
-  so as SignInAuthMethodButtons,
-  ao as SignInBackButton,
-  go as SignInDescription,
-  So as SignInFooter,
-  Co as SignInForm,
-  To as SignInImage,
-  u as SignInModal,
-  Bo as SignInTitle,
-  l as SignOutButton,
-  h as ThemeProvider,
-  ro as clamp,
-  E as colors,
-  v as colorsBase,
-  w as colorsComponents,
-  D as colorsSemantic,
-  T as cssVariables,
-  F as flattenTokensObject,
-  M as font,
-  to as getMessageFromUnknownError,
-  mo as isApiError,
-  fo as isEmailInvalid,
-  io as parseValuesFromPhoneNumber,
-  A as theme,
-  O as themeToCssVariables,
-  P as tokens,
+  j as IconArrowLeft,
+  X as IconArrowsUpDown,
+  y as IconCheck,
+  G as IconCheckCircle,
+  K as IconChevronDown,
+  W as IconEnvelope,
+  Z as IconExclamationCircle,
+  oo as IconExclamationTriangle,
+  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,
+  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,
+  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,
   n as useAppConfig,
-  vo as useSignInContext,
-  I as useSignInReducer,
-  C as useTheme
+  Ro as useSignInContext,
+  g as useSignInReducer,
+  k as useTheme
 };

package/dist/theme/theme.d.ts

@@ -247,6 +247,23 @@ export declare const theme: Flattened<{
                 };
             };
         };
+        readonly code: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.alternate}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+        };
         readonly bg: {
             readonly default: {
                 readonly value: "#ffffff";
@@ -297,6 +314,9 @@ export declare const theme: Flattened<{
             readonly negative: {
                 readonly value: "#cf202f";
             };
+            readonly warning: {
+                readonly value: "#ed702f";
+            };
         };
         readonly line: {
             readonly default: {
@@ -318,6 +338,9 @@ export declare const theme: Flattened<{
     };
     font: {
         readonly family: {
+            readonly mono: {
+                readonly value: "\"DM Mono\", monospace";
+            };
             readonly sans: {
                 readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             };

package/dist/theme/tokens.d.ts

@@ -11,6 +11,7 @@ export declare const colorsBase: {
     readonly gray900: "#1a1d21";
     readonly red500: "#cf202f";
     readonly green500: "#098551";
+    readonly amber500: "#ed702f";
 };
 export declare const colorsSemantic: {
     readonly bg: {
@@ -63,6 +64,9 @@ export declare const colorsSemantic: {
         readonly negative: {
             readonly value: "#cf202f";
         };
+        readonly warning: {
+            readonly value: "#ed702f";
+        };
     };
     readonly line: {
         readonly default: {
@@ -328,6 +332,23 @@ export declare const colorsComponents: {
             };
         };
     };
+    readonly code: {
+        readonly bg: {
+            readonly default: {
+                readonly value: "{colors.bg.alternate}";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly value: "{colors.line.heavy}";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+    };
 };
 export declare const colors: {
     readonly page: {
@@ -575,6 +596,23 @@ export declare const colors: {
             };
         };
     };
+    readonly code: {
+        readonly bg: {
+            readonly default: {
+                readonly value: "{colors.bg.alternate}";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly value: "{colors.line.heavy}";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+    };
     readonly bg: {
         readonly default: {
             readonly value: "#ffffff";
@@ -625,6 +663,9 @@ export declare const colors: {
         readonly negative: {
             readonly value: "#cf202f";
         };
+        readonly warning: {
+            readonly value: "#ed702f";
+        };
     };
     readonly line: {
         readonly default: {
@@ -646,6 +687,9 @@ export declare const colors: {
 };
 export declare const font: {
     readonly family: {
+        readonly mono: {
+            readonly value: "\"DM Mono\", monospace";
+        };
         readonly sans: {
             readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
         };
@@ -903,6 +947,23 @@ export declare const tokens: {
                 };
             };
         };
+        readonly code: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.alternate}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+        };
         readonly bg: {
             readonly default: {
                 readonly value: "#ffffff";
@@ -953,6 +1014,9 @@ export declare const tokens: {
             readonly negative: {
                 readonly value: "#cf202f";
             };
+            readonly warning: {
+                readonly value: "#ed702f";
+            };
         };
         readonly line: {
             readonly default: {
@@ -974,6 +1038,9 @@ export declare const tokens: {
     };
     font: {
         readonly family: {
+            readonly mono: {
+                readonly value: "\"DM Mono\", monospace";
+            };
             readonly sans: {
                 readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             };

package/dist/theme/tokens.js

@@ -13,7 +13,8 @@ const e = {
   gray900: "#1a1d21",
   // contextual
   red500: "#cf202f",
-  green500: "#098551"
+  green500: "#098551",
+  amber500: "#ed702f"
 }, l = {
   bg: {
     default: { value: e.white },
@@ -42,8 +43,10 @@ const e = {
     // text on secondary color
     positive: { value: e.green500 },
     // positive color text
-    negative: { value: e.red500 }
+    negative: { value: e.red500 },
     // negative color text
+    warning: { value: e.amber500 }
+    // warning color text
   },
   line: {
     default: { value: e.gray200 },
@@ -191,12 +194,26 @@ const e = {
         }
       }
     }
+  },
+  code: {
+    bg: {
+      default: { value: "{colors.bg.alternate}" }
+    },
+    border: {
+      default: { value: "{colors.line.heavy}" }
+    },
+    text: {
+      default: { value: "{colors.fg.default}" }
+    }
   }
 }, o = {
   ...l,
   ...a
 }, r = {
   family: {
+    mono: {
+      value: '"DM Mono", monospace'
+    },
     sans: {
       value: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }

package/dist/utils/formatFiat.d.ts

@@ -0,0 +1 @@
+export declare const formatFiat: (value: number, currency?: string, decimalPlaces?: number, locale?: string) => string;

package/dist/utils/formatFiat.js

@@ -0,0 +1,13 @@
+import { DEFAULT_LOCALE as n } from "../data/locale.js";
+const F = (t, i = "USD", r = 2, m = n) => {
+  const o = Math.floor(t) === t;
+  return new Intl.NumberFormat(m, {
+    style: "currency",
+    currency: i,
+    minimumFractionDigits: o ? 0 : r,
+    maximumFractionDigits: o ? 0 : r
+  }).format(t);
+};
+export {
+  F as formatFiat
+};

package/dist/utils/openPopup.d.ts

@@ -0,0 +1,7 @@
+export type OpenPopupParams = {
+    url: string;
+    height: number;
+    width: number;
+    target?: string;
+};
+export declare const openPopup: ({ url, target, height, width }: OpenPopupParams) => Window | null;

package/dist/utils/openPopup.js

@@ -0,0 +1,15 @@
+const l = ({ url: d, target: r, height: e, width: n }) => {
+  const o = window.screenLeft !== void 0 ? window.screenLeft : window.screenX, t = window.screenTop !== void 0 ? window.screenTop : window.screenY, s = o >= 0 && o < window.screen.width && t >= 0 && t < window.screen.height;
+  let i, w;
+  if (s)
+    i = Math.round((window.screen.width - n) / 2), w = Math.round((window.screen.height - e) / 2);
+  else {
+    const h = window.outerWidth || window.innerWidth || document.documentElement.clientWidth || window.screen.width, u = window.outerHeight || window.innerHeight || document.documentElement.clientHeight || window.screen.height;
+    i = Math.round(o + (h - n) / 2), w = Math.round(t + (u - e) / 2);
+  }
+  const c = `width=${n},height=${e},resizable,scrollbars=yes,status=1,left=${i},top=${w}`;
+  return window.open(d, r, c);
+};
+export {
+  l as openPopup
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -14,8 +14,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.24",
-    "@coinbase/cdp-hooks": "^0.0.24"
+    "@coinbase/cdp-core": "^0.0.25",
+    "@coinbase/cdp-hooks": "^0.0.25"
   },
   "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.24",
-    "@coinbase/cdp-hooks": "^0.0.24"
+    "@coinbase/cdp-core": "^0.0.25",
+    "@coinbase/cdp-hooks": "^0.0.25"
   },
   "size-limit": [
     {
@@ -54,7 +54,7 @@
       "path": "./dist/index.js",
       "import": "*",
       "running": false,
-      "limit": "70 KB"
+      "limit": "100 KB"
     },
     {
       "name": "single-component",