Quickstart

Install packages

Install the following packages:

# install basic packages in your frontend.
npm i @coinbase/waas-sdk-web @coinbase/waas-sdk-viem viem 

# if using react, install our react package.
npm i @coinbase/waas-sdk-web-react

Integrate the WalletProvider

• Wrap your root app component in WalletProvider and configure it with your project ID.
• Disable StrictMode if you're using it.

//////////////// [frontend] main.tsx - 1. wrap your app in the WalletProvider
import { WalletProvider } from "@coinbase/waas-sdk-web-react";

const PROJECT_ID = process.env.PROJECT_ID; // pass your project ID in using your env var setup.

const TopLevelComponent = () => {
  return (
    <WalletProvider projectId={PROJECT_ID} verbose collectAndReportMetrics enableHostedBackups>
      <App />
    </WalletProvider>
  );
};

Start using wallets

Login your user with waas.login(), and create or restore a wallet using the user.hasWallet flag.

//////////////// [frontend] component.tsx - 2. Use `useWalletContext` to login and setup your user!
import { useWalletContext, useEVMAddress } from "@coinbase/waas-sdk-web-react";

// a button to login your user.
// this will trigger Coinbase Managed Auth
const LoginButton = () => {
  const { waas, user } = useWalletContext();
  return (
    <button
      disabled={!waas || !!user}
      onClick={() => {
        waas!.login();
      }}
    >
      Login
    </button>
  );
};

const CreateOrResumeWalletButton = () => {
  const { waas, user, wallet, isCreatingWallet } = useWalletContext();

  return (
    <button
      disabled={!waas || !user || isCreatingWallet || !!wallet}
      onClick={async () => {
        // check if your user has a wallet, and restore it if they do!
        if (user!.hasWallet) {
          // restores the user's existing wallet.
          user!.restoreFromHostedBackup!();
        } else {
          // creates a new wallet.
          user!.create();
        }
      }}
    >
      {isCreatingWallet ? "Creating wallet..." : "Create/Resume Wallet"}
    </button>
  );
};

// a <p> to see your user's address.
const ViewMyAddressLabel = () => {
  const { wallet } = useWalletContext();
  const address = useEVMAddress(wallet);
  return (
    <div>
      {address && <p>Your address is: {address.address}</p>}
      {!address && <p>No wallet.</p>}
    </div>
  );
};

// a button to logout your user.
const LogoutButton = () => {
  const { waas, user } = useWalletContext();
  return (
    <button
      onClick={async () => {
        await waas?.logout();
      }}
      disabled={!user}
    >
      Logout
    </button>
  );
};

Use Address to interact onchain

• Turn your Wallet into an Address using useEVMAddress(wallet).
• Turn your Address into a viem account, for interacting onchain.

import { useEVMAddress, useWalletContext } from "@coinbase/waas-sdk-web-react";
import { toViem } from "@coinbase/waas-sdk-viem";
import { createWalletClient, http } from "viem";
import { baseSepolia } from "viem/chains";
import { useEffect } from "react";


// a button to sign a transaction.
const SignTransactionButton = () => {
  const { wallet } = useWalletContext();
  const address = useEVMAddress(wallet);

  useEffect(() => {
    console.log(wallet);
  }, [wallet]);

  return (
    <button
      disabled={!address}
      onClick={async () => {
        // get a viem account.
        const account = toViem(address!);

        // use viem to send eth.
        const walletClient = createWalletClient({
          account,
          chain: baseSepolia,
          transport: http(),
        });

        // send the transaction!
        const txHash = await walletClient.sendTransaction({
          account,
          to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
          value: 1000000000000000000n,
        });

        console.log("Sent ETH!", txHash);
      }}
    >
      Send ETH
    </button>
  );
};

Putting it all together

import { useEVMAddress, useWalletContext } from "@coinbase/waas-sdk-web-react";

// some component in your dapp which needs an embedded wallet.
//
// NOTE: You can use `address` to check whether your user is signed in + has an address.
const DappWalletView = () => {
  const {wallet} = useWalletContext();
  const address = useEVMAddress(address);
 
  return (
    <>
      {!address && <LoginButton />}
      {address && <>
        <ViewMyAddressLabel />
        <SignTransactionButton />
        <LogoutButton />
      </>}
    </>
  )
}