cdp-create-app
package.
What is an embedded wallet?
npm
, pnpm
, or yarn
)Access CDP Portal
Add your domain
http://localhost:3000
(the port your demo app will run locally).Save your changes
Create a new demo app
cdp-app
to create a new demo app using your package manager:Copy your Project ID
React
as a template, and enter your CDP Project ID that you copied in the previous step.
Sign in
Enter your email
Verify
View your new wallet
What is Base?
https://sepolia.basescan.org/address/YOUR-WALLET-ADDRESS
.Fund your wallet with testnet ETH
What is a transaction?
What are testnet funds?
Send your first transaction
src/main.tsx
demonstrates how to wrap your app with the CDPReactProvider
to enable CDP functionality throughout the component tree.
More on CDPReactProvider
CDPReactProvider
shares wallet functionality with your entire app, so any component can check if a user is signed in, get a wallet address, or send transactions.Without the Provider wrapping your app, none of your components would be able to use CDP’s wallet features.theme
propCDP_CONFIG
contains your Project ID from setup, stored securely in an environment variable (VITE_CDP_PROJECT_ID
).
The APP_CONFIG
contains metadata about your application:
src/config.ts
file:
"use client"
requirements and common gotchas.src/App.tsx
demonstrates how CDP simplifies wallet state management with two simple hooks:
What are React hooks?
use
(like useIsInitialized
). They let your components:useIsInitialized()
: Know when CDP is ready (no manual provider checks!)useIsSignedIn()
: Instant auth status (no complex wallet connection state)src/SignInScreen.tsx
showcases the power of CDP’s embedded wallets - just one component handles everything:
AuthButton
component handles:
src/SignedInScreen.tsx
shows how CDP makes blockchain interactions as simple as Web2 development.
First, we get the user’s wallet address with a single hook:
useEvmAddress()
: The user’s wallet address (no wallet connection flow needed)useIsSignedIn()
: Auth status, which works just like any Web2 auth system (no complex wallet connection state)What is an Ethereum address?
0x742d35Cc6634C0532925a3b844Bc9e7595f7E123
) that identifies your wallet on the Ethereum network.Think of it like an email address: people can send cryptocurrency to it just like they’d send messages to your inbox. Your Ethereum address is public and shareable, but only you can access the funds sent to it.What is EVM?
useEvmAddress()
or sendEvmTransaction()
, it means these work with any EVM-compatible blockchain, not just Ethereum.useEvmAddress()
hook gives us access to the user’s CDP-managed wallet address. This address is created and secured by CDP’s embedded wallet infrastructure - no seed phrases or private keys to manage.
What are seed phrases and private keys?
Transaction
component uses CDP’s useSendEvmTransaction
hookHeader
includes CDP’s AuthButton
for session managementsrc/Transaction.tsx
demonstrates how to send ETH using CDP’s transaction hooks.
First, we set up the component with CDP hooks and state management:
useSendEvmTransaction()
: Sends transactions using the CDP embedded walletuseEvmAddress()
: Gets the current user’s wallet addresssendEvmTransaction
:
Understanding the transaction code
gas
: The computational fee for processing your transaction. More complex operations = more gas. The actual cost depends on network congestion (like surge pricing).chainId
: A unique identifier for each blockchain network (e.g., 1 for Ethereum mainnet, 84532 for Base Sepolia). This prevents transactions from one network being replayed on another.The n
suffix: JavaScript’s BigInt notation for handling numbers larger than Number.MAX_SAFE_INTEGER
(2^53 - 1). Essential for blockchain math where we deal with 18-decimal precision!What is EIP-1559?
What is transaction signing?
sendEvmTransaction
so you don’t need to understand the cryptography behind it!src/Header.tsx
provides a clean interface for users to view their wallet address and manage their session.
0x1234...5678
)AuthButton
src/UserBalance.tsx
displays the user’s ETH balance with a helpful faucet link.
index.css
, making it easy to rebrand the entire app by updating a few color values.
create-cdp-app
: View the npm
package directlyuseSignInWithEmail
, useEvmAddress
, and useSendEvmTransaction