@coinbase/create-cdp-app 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/template-nextjs/src/app/globals.css +20 -10
  3. package/template-nextjs/src/app/layout.tsx +5 -3
  4. package/template-nextjs/src/components/Header.tsx +1 -1
  5. package/template-nextjs/src/components/theme.ts +15 -28
  6. package/template-react/src/Header.tsx +1 -1
  7. package/template-react/src/index.css +7 -7
  8. package/template-react/src/theme.ts +15 -28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/create-cdp-app",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
package/template-nextjs/src/app/globals.css CHANGED
@@ -4,8 +4,8 @@
4
4
  --cdp-example-bg-skeleton-color: rgba(0, 0, 0, 0.1);
5
5
  --cdp-example-text-color: #111111;
6
6
  --cdp-example-text-secondary-color: #757575;
7
- --cdp-example-accent-color: #0052ff;
8
- --cdp-example-accent-hover-color: #0044d6;
7
+ --cdp-example-accent-color: #008080;
8
+ --cdp-example-accent-hover-color: #016969;
9
9
  --cdp-example-accent-foreground-color: #ffffff;
10
10
  --cdp-example-bg-low-contrast-color: #eeeeee;
11
11
  --cdp-example-card-bg-color: #ffffff;
@@ -34,8 +34,8 @@
34
34
  --cdp-example-bg-skeleton-color: rgba(255, 255, 255, 0.1);
35
35
  --cdp-example-text-color: #fafafa;
36
36
  --cdp-example-text-secondary-color: #8a919e;
37
- --cdp-example-accent-color: #578bfa;
38
- --cdp-example-accent-hover-color: #3e79f9;
37
+ --cdp-example-accent-color: #00adad;
38
+ --cdp-example-accent-hover-color: #04c0c0;
39
39
  --cdp-example-accent-foreground-color: #0a0b0d;
40
40
  --cdp-example-bg-low-contrast-color: #32353d;
41
41
  --cdp-example-card-bg-color: #141519;
@@ -59,8 +59,8 @@ body {
59
59
  }
60
60
 
61
61
  body,
62
- #root,
63
- #root > div,
62
+ .root,
63
+ .root > div,
64
64
  .flex-col-container {
65
65
  display: flex;
66
66
  flex-direction: column;
@@ -90,6 +90,17 @@ body,
90
90
  width: 1px;
91
91
  }
92
92
 
93
+ .root {
94
+ flex-grow: 1;
95
+ margin: 0;
96
+ padding: 0rem;
97
+ width: 100%;
98
+ }
99
+
100
+ .root > div {
101
+ flex-grow: 1;
102
+ }
103
+
93
104
  p {
94
105
  margin: 0;
95
106
  }
@@ -109,16 +120,15 @@ hr {
109
120
  }
110
121
 
111
122
  .app {
112
- height: 100vh;
123
+ height: 100%;
113
124
  color: var(--cdp-example-text-color);
114
125
  margin: 0 auto;
115
126
  width: 100%;
116
127
  }
117
128
 
118
129
  header {
119
- color: var(--cdp-example-text-color);
120
130
  background-color: var(--cdp-example-card-bg-color);
121
- border-bottom: 1px solid var(--cdp-web-colors-border);
131
+ border-bottom: 1px solid var(--cdp-example-card-border-color);
122
132
  padding: 0.5rem 1rem;
123
133
  width: 100%;
124
134
  }
@@ -185,7 +195,7 @@ header .wallet-address {
185
195
  .card {
186
196
  align-items: center;
187
197
  background-color: var(--cdp-example-card-bg-color);
188
- border: 1px solid var(--cdp-web-colors-border);
198
+ border: 1px solid var(--cdp-example-card-border-color);
189
199
  border-radius: 1rem;
190
200
  display: flex;
191
201
  flex-direction: column;
package/template-nextjs/src/app/layout.tsx CHANGED
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
2
2
  import "./globals.css";
3
3
 
4
4
  export const metadata: Metadata = {
5
- title: "CDP Embedded Wallet Demo",
6
- description: "A demo of the CDP Embedded Wallet",
5
+ title: "CDP Next.js StarterKit",
6
+ description: "The CDP Next.js StarterKit",
7
7
  };
8
8
 
9
9
  /**
@@ -16,7 +16,9 @@ export const metadata: Metadata = {
16
16
  export default function RootLayout({ children }: { children: React.ReactNode }) {
17
17
  return (
18
18
  <html lang="en">
19
- <body>{children}</body>
19
+ <body>
20
+ <div className="root">{children}</div>
21
+ </body>
20
22
  </html>
21
23
  );
22
24
  }
package/template-nextjs/src/components/Header.tsx CHANGED
@@ -33,7 +33,7 @@ export default function Header() {
33
33
  return (
34
34
  <header>
35
35
  <div className="header-inner">
36
- <h1 className="site-title">CDP React StarterKit</h1>
36
+ <h1 className="site-title">CDP Next.js StarterKit</h1>
37
37
  <div className="user-info flex-row-container">
38
38
  {evmAddress && (
39
39
  <button
package/template-nextjs/src/components/theme.ts CHANGED
@@ -1,32 +1,19 @@
1
1
  import { type Theme } from "@coinbase/cdp-react/theme";
2
2
 
3
3
  export const theme: Partial<Theme> = {
4
- "colors-background": "var(--cdp-example-card-bg-color)",
5
- "colors-backgroundOverlay": "var(--cdp-example-bg-overlay-color)",
6
- "colors-backgroundSkeleton": "var(--cdp-example-bg-skeleton-color)",
7
- "colors-text": "var(--cdp-example-text-color)",
8
- "colors-textSecondary": "var(--cdp-example-text-secondary-color)",
9
- "colors-border": "var(--cdp-example-card-border-color)",
10
- "colors-primary": "var(--cdp-example-accent-color)",
11
- "colors-primaryText": "var(--cdp-example-accent-foreground-color)",
12
- "colors-primaryHoverBackground": "var(--cdp-example-accent-hover-color)",
13
- "colors-primaryHoverText": "var(--cdp-example-accent-foreground-color)",
14
- "colors-primaryFocusRing": "var(--cdp-example-accent-color)",
15
- "colors-secondary": "var(--cdp-example-bg-low-contrast-color)",
16
- "colors-secondaryText": "var(--cdp-example-text-color)",
17
- "colors-secondaryHoverBackground": "var(--cdp-example-bg-low-contrast-color)",
18
- "colors-secondaryHoverText": "var(--cdp-example-text-color)",
19
- "colors-secondaryFocusRing": "var(--cdp-example-accent-color)",
20
- "colors-inputBackground": "var(--cdp-example-card-bg-color)",
21
- "colors-inputBorder": "var(--cdp-example-text-secondary-color)",
22
- "colors-inputText": "var(--cdp-example-text-color)",
23
- "colors-inputLabel": "var(--cdp-example-text-color)",
24
- "colors-inputPlaceholder": "var(--cdp-example-text-secondary-color)",
25
- "colors-inputFocusBorder": "var(--cdp-example-accent-color)",
26
- "colors-linkText": "var(--cdp-example-accent-color)",
27
- "colors-linkHover": "var(--cdp-example-accent-hover-color)",
28
- "colors-linkSecondaryText": "var(--cdp-example-text-color)",
29
- "colors-linkSecondaryHover": "var(--cdp-example-text-color)",
30
- "fontFamily-sans": "var(--cdp-example-font-family)",
31
- fontSizeBase: "var(--cdp-example-base-font-size)",
4
+ "colors-bg-default": "var(--cdp-example-card-bg-color)",
5
+ "colors-bg-overlay": "var(--cdp-example-bg-overlay-color)",
6
+ "colors-bg-skeleton": "var(--cdp-example-bg-skeleton-color)",
7
+ "colors-bg-primary": "var(--cdp-example-accent-color)",
8
+ "colors-bg-secondary": "var(--cdp-example-bg-low-contrast-color)",
9
+ "colors-fg-default": "var(--cdp-example-text-color)",
10
+ "colors-fg-muted": "var(--cdp-example-text-secondary-color)",
11
+ "colors-fg-primary": "var(--cdp-example-accent-color)",
12
+ "colors-fg-onPrimary": "var(--cdp-example-accent-foreground-color)",
13
+ "colors-fg-onSecondary": "var(--cdp-example-text-color)",
14
+ "colors-line-default": "var(--cdp-example-card-border-color)",
15
+ "colors-line-heavy": "var(--cdp-example-text-secondary-color)",
16
+ "colors-line-primary": "var(--cdp-example-accent-color)",
17
+ "font-family-sans": "var(--cdp-example-font-family)",
18
+ "font-size-base": "var(--cdp-example-base-font-size)",
32
19
  };
package/template-react/src/Header.tsx CHANGED
@@ -32,7 +32,7 @@ function Header() {
32
32
  return (
33
33
  <header>
34
34
  <div className="header-inner">
35
- <h1 className="site-title">CDP Next.js StarterKit</h1>
35
+ <h1 className="site-title">CDP React StarterKit</h1>
36
36
  <div className="user-info flex-row-container">
37
37
  {evmAddress && (
38
38
  <button
package/template-react/src/index.css CHANGED
@@ -4,8 +4,8 @@
4
4
  --cdp-example-bg-skeleton-color: rgba(0, 0, 0, 0.1);
5
5
  --cdp-example-text-color: #111111;
6
6
  --cdp-example-text-secondary-color: #757575;
7
- --cdp-example-accent-color: #0052ff;
8
- --cdp-example-accent-hover-color: #0044d6;
7
+ --cdp-example-accent-color: #008080;
8
+ --cdp-example-accent-hover-color: #016969;
9
9
  --cdp-example-accent-foreground-color: #ffffff;
10
10
  --cdp-example-bg-low-contrast-color: #eeeeee;
11
11
  --cdp-example-card-bg-color: #ffffff;
@@ -34,8 +34,8 @@
34
34
  --cdp-example-bg-skeleton-color: rgba(255, 255, 255, 0.1);
35
35
  --cdp-example-text-color: #fafafa;
36
36
  --cdp-example-text-secondary-color: #8a919e;
37
- --cdp-example-accent-color: #578bfa;
38
- --cdp-example-accent-hover-color: #3e79f9;
37
+ --cdp-example-accent-color: #00adad;
38
+ --cdp-example-accent-hover-color: #04c0c0;
39
39
  --cdp-example-accent-foreground-color: #0a0b0d;
40
40
  --cdp-example-bg-low-contrast-color: #32353d;
41
41
  --cdp-example-card-bg-color: #141519;
@@ -121,14 +121,14 @@ hr {
121
121
 
122
122
  .app {
123
123
  height: 100%;
124
- color: var(--cdp-web-colors-text);
124
+ color: var(--cdp-example-text-color);
125
125
  margin: 0 auto;
126
126
  width: 100%;
127
127
  }
128
128
 
129
129
  header {
130
130
  background-color: var(--cdp-example-card-bg-color);
131
- border-bottom: 1px solid var(--cdp-web-colors-border);
131
+ border-bottom: 1px solid var(--cdp-example-card-border-color);
132
132
  padding: 0.5rem 1rem;
133
133
  width: 100%;
134
134
  }
@@ -195,7 +195,7 @@ header .wallet-address {
195
195
  .card {
196
196
  align-items: center;
197
197
  background-color: var(--cdp-example-card-bg-color);
198
- border: 1px solid var(--cdp-web-colors-border);
198
+ border: 1px solid var(--cdp-example-card-border-color);
199
199
  border-radius: 1rem;
200
200
  display: flex;
201
201
  flex-direction: column;
package/template-react/src/theme.ts CHANGED
@@ -1,32 +1,19 @@
1
1
  import { type Theme } from "@coinbase/cdp-react/theme";
2
2
 
3
3
  export const theme: Partial<Theme> = {
4
- "colors-background": "var(--cdp-example-card-bg-color)",
5
- "colors-backgroundOverlay": "var(--cdp-example-bg-overlay-color)",
6
- "colors-backgroundSkeleton": "var(--cdp-example-bg-skeleton-color)",
7
- "colors-text": "var(--cdp-example-text-color)",
8
- "colors-textSecondary": "var(--cdp-example-text-secondary-color)",
9
- "colors-border": "var(--cdp-example-card-border-color)",
10
- "colors-primary": "var(--cdp-example-accent-color)",
11
- "colors-primaryText": "var(--cdp-example-accent-foreground-color)",
12
- "colors-primaryHoverBackground": "var(--cdp-example-accent-hover-color)",
13
- "colors-primaryHoverText": "var(--cdp-example-accent-foreground-color)",
14
- "colors-primaryFocusRing": "var(--cdp-example-accent-color)",
15
- "colors-secondary": "var(--cdp-example-bg-low-contrast-color)",
16
- "colors-secondaryText": "var(--cdp-example-text-color)",
17
- "colors-secondaryHoverBackground": "var(--cdp-example-bg-low-contrast-color)",
18
- "colors-secondaryHoverText": "var(--cdp-example-text-color)",
19
- "colors-secondaryFocusRing": "var(--cdp-example-accent-color)",
20
- "colors-inputBackground": "var(--cdp-example-card-bg-color)",
21
- "colors-inputBorder": "var(--cdp-example-text-secondary-color)",
22
- "colors-inputText": "var(--cdp-example-text-color)",
23
- "colors-inputLabel": "var(--cdp-example-text-color)",
24
- "colors-inputPlaceholder": "var(--cdp-example-text-secondary-color)",
25
- "colors-inputFocusBorder": "var(--cdp-example-accent-color)",
26
- "colors-linkText": "var(--cdp-example-accent-color)",
27
- "colors-linkHover": "var(--cdp-example-accent-hover-color)",
28
- "colors-linkSecondaryText": "var(--cdp-example-text-color)",
29
- "colors-linkSecondaryHover": "var(--cdp-example-text-color)",
30
- "fontFamily-sans": "var(--cdp-example-font-family)",
31
- fontSizeBase: "var(--cdp-example-base-font-size)",
4
+ "colors-bg-default": "var(--cdp-example-card-bg-color)",
5
+ "colors-bg-overlay": "var(--cdp-example-bg-overlay-color)",
6
+ "colors-bg-skeleton": "var(--cdp-example-bg-skeleton-color)",
7
+ "colors-bg-primary": "var(--cdp-example-accent-color)",
8
+ "colors-bg-secondary": "var(--cdp-example-bg-low-contrast-color)",
9
+ "colors-fg-default": "var(--cdp-example-text-color)",
10
+ "colors-fg-muted": "var(--cdp-example-text-secondary-color)",
11
+ "colors-fg-primary": "var(--cdp-example-accent-color)",
12
+ "colors-fg-onPrimary": "var(--cdp-example-accent-foreground-color)",
13
+ "colors-fg-onSecondary": "var(--cdp-example-text-color)",
14
+ "colors-line-default": "var(--cdp-example-card-border-color)",
15
+ "colors-line-heavy": "var(--cdp-example-text-secondary-color)",
16
+ "colors-line-primary": "var(--cdp-example-accent-color)",
17
+ "font-family-sans": "var(--cdp-example-font-family)",
18
+ "font-size-base": "var(--cdp-example-base-font-size)",
32
19
  };