Skip to main content

​
@coinbase/cdp-solana-standard-wallet

A React hook and wallet implementation that integrates CDP (Coinbase Developer Platform) embedded Solana wallets with the Wallet Standard.

​
Features

  • 🔗 Wallet Standard Integration - Works with any dapp that supports the wallet standard
  • 🔐 CDP Authentication - Uses CDP’s secure embedded wallet infrastructure
  • ⚛️ React Hooks - Easy-to-use hooks for React applications
  • 🎯 TypeScript Support - Full type safety with TypeScript
  • 🚀 Auto-Registration - Automatically registers with wallet standard ecosystem
  • 🔄 Event-Driven - Real-time updates via CDP auth state changes
  • 📱 Multi-Network - Supports both Solana mainnet and devnet

​
Installation

npm install @coinbase/cdp-solana-standard-wallet

​
Peer Dependencies

npm install @coinbase/cdp-core react @wallet-standard/app @wallet-standard/base @wallet-standard/features @solana/wallet-standard bs58

​
Optional Dependencies

Depending on your usage pattern, you may also need: 
# For Option 1 (CDPHooksProvider)
npm install @coinbase/cdp-hooks

# For Option 2 (CDPReactProvider)
npm install @coinbase/cdp-react @coinbase/cdp-hooks

​
Usage

​
Option 1: With CDPHooksProvider

import { CDPHooksProvider } from '@coinbase/cdp-hooks';
import { useCdpSolanaStandardWallet } from '@coinbase/cdp-solana-standard-wallet';

// Wrap your app with CDPHooksProvider
function App() {
  return (
    <CDPHooksProvider config={{ projectId: 'your-project-id' }}>
      <MyWalletComponent />
    </CDPHooksProvider>
  );
}

// Use the hook in your component
function MyWalletComponent() {
  const { ready, wallet } = useCdpSolanaStandardWallet();

  if (!ready) {
    return <div>Loading wallet...</div>;
  }

  return (
    <div>
      <h3>CDP Solana Wallet Ready!</h3>
      <p>Name: {wallet.name}</p>
      <p>Accounts: {wallet.accounts.length}</p>
    </div>
  );
}

​
Option 2: With CDPReactProvider

import { CDPReactProvider } from '@coinbase/cdp-react';
import { useCdpSolanaStandardWallet } from '@coinbase/cdp-solana-standard-wallet';

// Wrap your app with CDPReactProvider
function App() {
  return (
    <CDPReactProvider config={{
      projectId: 'your-project-id',
      solana: { createOnLogin: true }
    }}>
      <MyWalletComponent />
    </CDPReactProvider>
  );
}

// Use the hook in your component
function MyWalletComponent() {
  const { ready, wallet } = useCdpSolanaStandardWallet();

  if (!ready) {
    return <div>Loading wallet...</div>;
  }

  return (
    <div>
      <h3>CDP Solana Wallet Ready!</h3>
      <p>Name: {wallet.name}</p>
      <p>Accounts: {wallet.accounts.length}</p>
    </div>
  );
}

​
Option 3: Standalone Usage

import { useCdpSolanaStandardWallet } from '@coinbase/cdp-solana-standard-wallet';

function MyWalletComponent() {
  // Pass config directly - hook will initialize CDP SDK
  const { ready, wallet } = useCdpSolanaStandardWallet({
    projectId: 'your-project-id'
  });

  if (!ready) {
    return <div>Initializing...</div>;
  }

  return <div>Wallet ready: {wallet.name}</div>;
}

​
Analytics Opt-Out

By default the SDK will emit usage analytics to help us improve the SDK. If you would like to opt-out, you can do so by setting the disableAnalytics configuration option to true. 
<CDPReactProvider config={{
  projectId: "your-project-id",
  disableAnalytics: true,
}}>
Or if you’re using the standalone usage, you can pass the disableAnalytics configuration option to the hook: 
const { ready, wallet } = useCdpSolanaStandardWallet({
  projectId: "your-project-id",
  disableAnalytics: true,
});

​
Using All Standard Wallets

import { useSolanaStandardWallets } from '@coinbase/cdp-solana-standard-wallet';

function WalletSelector() {
  const { wallets } = useSolanaStandardWallets();

  return (
    <div>
      <h3>Available Wallets:</h3>
      {wallets.map((wallet) => (
        <div key={wallet.name}>
          <img src={wallet.icon} alt={wallet.name} width="24" height="24" />
          <span>{wallet.name}</span>
          {wallet.features['cdp:'] && <span> (CDP)</span>}
        </div>
      ))}
    </div>
  );
}

​
Direct Wallet Usage

import { getWallets } from '@wallet-standard/app';

// Find CDP wallet among all registered wallets
const wallets = getWallets();
const cdpWallet = wallets.get().find(w => w.features['cdp:']);

if (cdpWallet) {
  // Connect to the wallet
  const { accounts } = await cdpWallet.features['standard:connect'].connect();

  // Sign a transaction
  const result = await cdpWallet.features['solana:signTransaction'].signTransaction({
    transaction: transactionBytes,
    account: accounts[0],
    chain: 'solana:mainnet'
  });

  // Sign and send a transaction
  const sendResult = await cdpWallet.features['solana:signAndSendTransaction'].signAndSendTransaction({
    transaction: transactionBytes,
    account: accounts[0],
    chain: 'solana:mainnet'
  });
}

​
API Reference

​
useCdpSolanaStandardWallet(config?)

Hook that manages CDP Solana wallet creation and registration. Parameters:
  • config (optional): CDP configuration object with projectId
Returns: 
{
  ready: boolean;           // True when wallet is ready to use
  wallet: CdpSolanaWallet | null;  // The wallet instance
}

​
useSolanaStandardWallets()

Hook that returns all registered Solana wallets in the wallet standard. Returns: 
{
  wallets: readonly Wallet[];  // Array of all registered wallets
}

​
CdpSolanaWallet

The wallet implementation that integrates with CDP. Properties:
  • name: “CDP Solana Wallet”
  • icon: Solana logo as base64 data URI
  • chains: ['solana:mainnet', 'solana:devnet']
  • accounts: Array of ReadonlyWalletAccount
  • features: Supported wallet standard features
Supported Features:
  • standard:connect - Connect to the wallet
  • standard:disconnect - Disconnect from the wallet
  • standard:events - Listen for wallet events
  • solana:signTransaction - Sign transactions
  • solana:signAndSendTransaction - Sign and send transactions
  • solana:signMessage - Sign arbitrary messages
  • cdp: - CDP-specific feature flag

​
Authentication Flow

  1. User Authentication: User signs in via CDP (email/SMS OTP)
  2. Wallet Creation: CDP creates embedded Solana accounts
  3. Hook Activation: useCdpSolanaStandardWallet detects accounts
  4. Wallet Registration: Wallet is registered with wallet standard
  5. Ready State: ready: true indicates wallet is available
  6. Dapp Integration: Dapps can discover and use the wallet

​
Network Support

  • Mainnet: solana:mainnet → CDP network: solana
  • Devnet: solana:devnet → CDP network: solana-devnet

​
Error Handling

The hooks handle various error scenarios gracefully:
  • Unauthenticated User: ready: false, wallet: null
  • No Solana Accounts: ready: false, wallet: null
  • CDP Initialization Failure: Logs error, ready: false
  • Network Errors: Individual operations throw descriptive errors

​
Security

  • All cryptographic operations performed by CDP’s secure infrastructure
  • Private keys never exposed to application code
  • Authentication handled via CDP’s secure auth flow
  • Wallet disconnect clears wallet accounts but does not sign out user (maintains session)
⌘I