Overview
Wagmi is a TypeScript library for Ethereum development that provides a collection of React Hooks for interacting with Ethereum-compatible blockchains. It’s built on top ofviem
and offers a modern, developer-friendly API for building dapps.
The NPM package @coinbase/cdp-wagmi is a bridge that connects Coinbase’s CDP (Coinbase Developer Platform) Wallets to the wagmi ecosystem—bringing CDP-powered smart wallet functionality into React apps using wagmi hooks.
You’ll learn how to install the package, set up the provider, and render your first component.
Check out the CDP Web SDK reference for comprehensive method signatures, types, and examples.
Prerequisites
- Node.js 22+ installed
- A node package manager installed (i.e.,
npm
,pnpm
, oryarn
) - A free CDP Portal account
- Basic familiarity with React and Wagmi
1. Install Wagmi and CDP packages
Add the required packages to your project using your preferred package manager.2. Get your CDP Project ID
- Sign in to your CDP Portal account
- Select a project from the dropdown menu in the top-left
- Click the gear icon to view project settings
- Copy the Project ID for use in the next step
3. Configure WagmiProvider
Configure your WagmiProvider with the CDPEmbeddedWalletConnector.CDPEmbeddedWalletConnector
provides the necessary context for Wagmi to work correctly with the CDP Frontend SDK. The providerConfig
must be provided and is responsible for configuring the EIP-1193 provider’s transports which are used to broadcast non-Base transactions.
main.tsx
4. Sign in the user
Before using Wagmi hooks, users need to be signed in using either CDP React components or hooks. When the user verifies their OTP and is signed in, they will automatically be connected with wagmi. You can use either approach: Option 1: Using React Components5. Use Wagmi hooks
Your application can now call Wagmi hooks. Here’s an example component that demonstrates wagmi’suseSendTransaction
hook:
WagmiTransaction.tsx
What's different from standard Wagmi setup?
What's different from standard Wagmi setup?
The main difference is using
CDPEmbeddedWalletConnector
instead of traditional wallet connectors. This connector:- Handles CDP wallet creation and authentication
- Manages the secure connection to CDP’s infrastructure
- Provides seamless integration with CDP’s embedded wallet features
- Eliminates the need for browser extensions or external wallet apps
What to read next
- CDP Web SDK Documentation: Comprehensive API reference for the CDP Web SDK
- Embedded Wallets - React Hooks: Learn about available CDP hooks that complement Wagmi
- Wagmi Documentation: Explore the full Wagmi documentation for advanced usage