Skip to main content

​
Overview

The useEmbeddedWallet hook provides access to the user’s Privy embedded wallet. It returns the connected wallet instance with the privy wallet client type, which is used for signing transactions and managing the user’s account.

​
Import

import { useEmbeddedWallet } from '@/lib/hooks';

​
Signature

const useEmbeddedWallet: () => ConnectedWallet | null

​
Return Value

​
wallet
ConnectedWallet | null
The Privy embedded wallet instance, or null if no wallet is connected.

​
Usage Examples

​
Basic Usage

import { useEmbeddedWallet } from '@/lib/hooks';

function WalletInfo() {
  const wallet = useEmbeddedWallet();

  if (!wallet) {
    return <div>No wallet connected</div>;
  }

  return (
    <div>
      <p>Wallet Address: {wallet.address}</p>
      <p>Chain ID: {wallet.chainId}</p>
      <p>Wallet Type: {wallet.walletClientType}</p>
    </div>
  );
}

​
Check Wallet Connection

import { useEmbeddedWallet } from '@/lib/hooks';
import { usePrivy } from '@privy-io/react-auth';

function ConnectWallet() {
  const { authenticated, login } = usePrivy();
  const wallet = useEmbeddedWallet();

  if (!authenticated) {
    return (
      <button onClick={login}>
        Connect Wallet
      </button>
    );
  }

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

  return (
    <div>
      Connected: {wallet.address.slice(0, 6)}...{wallet.address.slice(-4)}
    </div>
  );
}

​
Use Wallet in Quote Requests

import { useEmbeddedWallet } from '@/lib/hooks';
import { useQuotes } from '@/lib/hooks';
import { usePrivy } from '@privy-io/react-auth';

function SwapForm() {
  const { authenticated } = usePrivy();
  const wallet = useEmbeddedWallet();
  const { getQuote } = useQuotes();

  const handleGetQuote = async () => {
    if (!authenticated || !wallet) {
      console.error('Wallet not connected');
      return;
    }

    await getQuote({
      fromTokenAmount: '1000000',
      fromAggregatedAssetId: 'ob:usdc',
      toAggregatedAssetId: 'ob:eth'
    });
  };

  return (
    <button
      onClick={handleGetQuote}
      disabled={!wallet}
    >
      Get Quote
    </button>
  );
}

​
Display Wallet Address

import { useEmbeddedWallet } from '@/lib/hooks';

function WalletAddress() {
  const wallet = useEmbeddedWallet();

  if (!wallet) return null;

  const shortenAddress = (address: string) => {
    return `${address.slice(0, 6)}...${address.slice(-4)}`;
  };

  return (
    <div className="flex items-center gap-2">
      <div className="w-2 h-2 bg-green-500 rounded-full" />
      <span className="font-mono text-sm">
        {shortenAddress(wallet.address)}
      </span>
    </div>
  );
}

​
Conditional Rendering Based on Wallet

import { useEmbeddedWallet } from '@/lib/hooks';

function TransactionButton() {
  const wallet = useEmbeddedWallet();

  const handleTransaction = async () => {
    if (!wallet) {
      console.error('No wallet available');
      return;
    }

    // Proceed with transaction
    console.log('Executing transaction with wallet:', wallet.address);
  };

  return (
    <button
      onClick={handleTransaction}
      disabled={!wallet}
      className={!wallet ? 'opacity-50 cursor-not-allowed' : ''}
    >
      {wallet ? 'Execute Transaction' : 'Connect Wallet First'}
    </button>
  );
}

​
Wallet Status Indicator

import { useEmbeddedWallet } from '@/lib/hooks';
import { usePrivy } from '@privy-io/react-auth';

function WalletStatus() {
  const { authenticated, login, logout } = usePrivy();
  const wallet = useEmbeddedWallet();

  if (!authenticated) {
    return (
      <button onClick={login} className="btn-primary">
        Login
      </button>
    );
  }

  if (!wallet) {
    return (
      <div className="flex items-center gap-2">
        <div className="animate-spin h-4 w-4 border-2 border-primary rounded-full" />
        <span>Loading wallet...</span>
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2">
      <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
      <span className="font-mono">
        {wallet.address.slice(0, 6)}...{wallet.address.slice(-4)}
      </span>
      <button onClick={logout} className="btn-secondary">
        Disconnect
      </button>
    </div>
  );
}

​
Types

​
ConnectedWallet

interface ConnectedWallet {
  address: string;
  walletClientType: string;
  chainId: string;
  connectorType: string;
  // ... additional Privy wallet properties
}

​
Notes

  • The hook returns the first wallet with walletClientType === 'privy'
  • Falls back to the first wallet in the list if no Privy wallet is found
  • Returns null if no wallets are connected
  • The wallet is automatically available after Privy authentication
  • The embedded wallet is managed by Privy and doesn’t require browser extensions
  • Use this hook whenever you need to access the wallet address or sign transactions

​
Implementation Details

The hook is implemented as a simple wrapper around Privy’s useWallets hook:
/lib/hooks/useEmbeddedWallet.ts
import { useWallets } from '@privy-io/react-auth';
import { ConnectedWallet } from '@privy-io/react-auth';

export const useEmbeddedWallet = (): ConnectedWallet | null => {
  const { wallets } = useWallets();
  return wallets.find(wallet => wallet.walletClientType === 'privy') || wallets[0] || null;
};
  • useQuotes - Uses embedded wallet for signing quotes
  • useBalances - Requires wallet address for balance queries

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us