@coinbase/cdp-react 0.0.36 → 0.0.37

package/README.md

@@ -54,20 +54,15 @@ Update your main application file (e.g., `main.tsx` or `App.tsx`) to include the
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App'; // Your main App component
-import { CDPReactProvider, type Theme } from '@coinbase/cdp-react';
+import { CDPReactProvider, type Config, type Theme } from '@coinbase/cdp-react';
 
-// Your CDP config
-const cdpConfig = {
+// Config for your dapp
+const config: Config = {
   projectId: "your-project-id", // Copy your Project ID here.
+  appName: "My app", // the name of your application
+  appLogoUrl: "https://picsum.photos/64", // logo will be displayed in select components
 }
 
-// Global config for your dapp
-const appConfig = {
-  name: "My app", // the name of your application
-  logoUrl: "https://picsum.photos/64", // logo will be displayed in select components
-}
-
-
 // You can customize the theme by overriding theme variables
 const themeOverrides: Partial<Theme> = {
   "colors-bg-default": "black",
@@ -78,7 +73,7 @@ const themeOverrides: Partial<Theme> = {
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
+    <CDPReactProvider config={config} theme={themeOverrides}>
       <App />
     </CDPReactProvider>
   </React.StrictMode>,

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

@@ -1,15 +1,16 @@
-import { CDPHooksProviderProps } from '@coinbase/cdp-hooks';
+import { Config as CDPHooksConfig } from '@coinbase/cdp-hooks';
 import { ThemeProviderProps } from '../ThemeProvider';
 export declare const AUTH_METHODS: readonly ["email", "sms"];
 export type AuthMethod = (typeof AUTH_METHODS)[number];
 export interface AppConfig {
-    name: string;
-    logoUrl?: string;
+    appName?: string;
+    appLogoUrl?: string;
     showCoinbaseFooter?: boolean;
     authMethods?: AuthMethod[];
 }
+export type Config = AppConfig & CDPHooksConfig;
 export type CDPReactProviderProps = {
-    app?: AppConfig;
-} & CDPHooksProviderProps & ThemeProviderProps;
-export declare const CDPReactProvider: ({ children, config, theme, app }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
+    config: Config;
+} & ThemeProviderProps;
+export declare const CDPReactProvider: ({ children, config, theme }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useAppConfig: () => AppConfig;

package/dist/components/CDPReactProvider/index.js

@@ -1,39 +1,63 @@
 import { jsx as t } from "react/jsx-runtime";
-import { CDPContext as c, CDPHooksProvider as C } from "@coinbase/cdp-hooks";
-import { createContext as d, useContext as i, useMemo as m } from "react";
-import { ThemeProvider as u } from "../ThemeProvider/index.js";
-const A = [
+import { CDPContext as v, CDPHooksProvider as A } from "@coinbase/cdp-hooks";
+import { createContext as b, useMemo as n, useContext as g } from "react";
+import { ThemeProvider as w } from "../ThemeProvider/index.js";
+const E = [
   /** Email OTP method */
   "email",
   /** SMS OTP method */
   "sms"
-], g = ({ children: o, config: e, theme: r, app: p }) => {
-  const n = /* @__PURE__ */ t(f, { app: p, children: /* @__PURE__ */ t(u, { theme: r, children: o }) });
-  return i(c) ? n : /* @__PURE__ */ t(C, { config: e, children: n });
-}, s = d(void 0), a = {
-  name: "",
-  logoUrl: "",
+], F = ({ children: o, config: e, theme: r }) => {
+  const {
+    appName: p,
+    appLogoUrl: s,
+    showCoinbaseFooter: i,
+    authMethods: a,
+    projectId: c,
+    useMock: d,
+    debugging: u,
+    basePath: C,
+    ethereum: m,
+    solana: h
+  } = e, P = n(
+    () => ({
+      projectId: c,
+      useMock: d,
+      debugging: u,
+      basePath: C,
+      ethereum: m || {},
+      solana: h || {}
+    }),
+    [c, d, u, C, m, h]
+  ), x = n(
+    () => ({ appName: p, appLogoUrl: s, showCoinbaseFooter: i, authMethods: a }),
+    [p, s, i, a]
+  ), f = /* @__PURE__ */ t(M, { config: x, children: /* @__PURE__ */ t(w, { theme: r, children: o }) });
+  return g(v) ? f : /* @__PURE__ */ t(A, { config: P, children: f });
+}, l = b(void 0), D = {
+  appName: "",
+  appLogoUrl: "",
   showCoinbaseFooter: !0,
   authMethods: ["email"]
-}, f = ({ children: o, app: e }) => {
-  const r = m(
+}, M = ({ children: o, config: e }) => {
+  const r = n(
     () => ({
       app: {
-        ...a,
+        ...D,
         ...e
       }
     }),
     [e]
   );
-  return /* @__PURE__ */ t(s.Provider, { value: r, children: o });
-}, D = () => {
-  const o = i(s);
+  return /* @__PURE__ */ t(l.Provider, { value: r, children: o });
+}, L = () => {
+  const o = g(l);
   if (!o)
     throw new Error("useAppConfig must be used within an AppConfigProvider");
   return o.app;
 };
 export {
-  A as AUTH_METHODS,
-  g as CDPReactProvider,
-  D as useAppConfig
+  E as AUTH_METHODS,
+  F as CDPReactProvider,
+  L as useAppConfig
 };

package/dist/components/SignIn/SignInImage.js

@@ -1,15 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useAppConfig as m } from "../CDPReactProvider/index.js";
-import '../../assets/SignInImage.css';const p = "SignInImage-module__logo___rlzt-", c = {
-  logo: p
-}, n = (t) => /^https?:\/\//.test(t), f = ({ className: t = "", alt: s, src: l }) => {
-  const o = m(), r = o.logoUrl && n(o.logoUrl) ? o.logoUrl : void 0, g = l && n(l) ? l : r, i = s || o.name;
-  return g ? /* @__PURE__ */ e(
+import { jsx as i } from "react/jsx-runtime";
+import { useAppConfig as e } from "../CDPReactProvider/index.js";
+import '../../assets/SignInImage.css';const a = "SignInImage-module__logo___rlzt-", m = {
+  logo: a
+}, p = (t) => /^https?:\/\//.test(t), f = ({ className: t = "", alt: n, src: g }) => {
+  const o = e(), s = o.appLogoUrl && p(o.appLogoUrl) ? o.appLogoUrl : void 0, l = g && p(g) ? g : s, r = n || o.appName || "";
+  return l ? /* @__PURE__ */ i(
     "img",
     {
-      src: g,
-      alt: i || "",
-      className: `${c.logo} ${t}`,
+      src: l,
+      alt: r || "",
+      className: `${m.logo} ${t}`,
       width: 64,
       height: 64
     }

package/dist/theme/theme.d.ts

@@ -410,7 +410,7 @@ export type ComponentColors = Flattened<{
 export type FontTokens = Flattened<{
     font: typeof font;
 }>;
-export type ColorTokens = SemanticColors | ComponentColors;
+export type ColorTokens = SemanticColors & ComponentColors;
 export type Theme = ColorTokens & FontTokens;
 export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary" | "control";
 export type Size = "lg" | "md" | "sm" | "xs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -14,8 +14,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.36",
-    "@coinbase/cdp-hooks": "^0.0.36"
+    "@coinbase/cdp-core": "^0.0.37",
+    "@coinbase/cdp-hooks": "^0.0.37"
   },
   "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.36",
-    "@coinbase/cdp-hooks": "^0.0.36"
+    "@coinbase/cdp-core": "^0.0.37",
+    "@coinbase/cdp-hooks": "^0.0.37"
   },
   "size-limit": [
     {