Add a Create Wallet button to your app

This guide provides copy-pasteable code, to quickly add a Create Wallet button to your app.

Create Wallet Button

With wagmi

CreateWalletButton.tsx

import React, { useCallback } from "react";
import { useConnect } from "wagmi";
import { CoinbaseWalletLogo } from "./CoinbaseWalletLogo";
 
const buttonStyles = {
  background: "transparent",
  border: "1px solid transparent",
  display: "flex",
  alignItems: "center",
  fontFamily: "Arial, sans-serif",
  fontWeight: "bold",
  fontSize: 18,
  backgroundColor: "#0052FF",
  padding: "7px 14px",
  borderRadius: 10,
};
 
export function WagmiCreateWalletButton() {
  const { connectors, connect, data } = useConnect();
 
  const createWallet = useCallback(() => {
    const coinbaseWalletConnector = connectors.find(
      (connector) => connector.id === "coinbaseWalletSDK"
    );
    if (coinbaseWalletConnector) {
      connect({ connector: coinbaseWalletConnector });
    }
  }, [connectors, connect]);
  return (
    <button style={buttonStyles} onClick={createWallet}>
      <CoinbaseWalletLogo />
      Create Wallet
    </button>
  );
}

Notes

For more detail, view the useConnect documentation.
Upon successful connection, account information can be accessed via data returned from useConnect, or via useAccount.

With CoinbaseWalletSDK only

CreateWalletButton.tsx

import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";
import { CoinbaseWalletLogo } from "./CoinbaseWalletLogo";
import { useCallback } from "react";
 
const buttonStyles = {
  background: "transparent",
  border: "1px solid transparent",
  display: "flex",
  alignItems: "center",
  fontFamily: "Arial, sans-serif",
  fontWeight: "bold",
  fontSize: 18,
  backgroundColor: "#0052FF",
  padding: "7px 14px",
  borderRadius: 10,
};
 
const sdk = new CoinbaseWalletSDK({
  appName: "My Dapp",
  appLogoUrl: "https://example.com/logo.png",
  appChainIds: [84532],
});
 
const provider = sdk.makeWeb3Provider();
 
interface CreateWalletButtonProps {
  handleSuccess: (res: any) => void;
  handleError: (error: any) => void;
}
 
export function CreateWalletButton({
  handleSuccess,
  handleError,
}: CreateWalletButtonProps) {
 
  const createWallet = useCallback(async () => {
    try {
      const [address] = await provider.request<string[]>({
        method: "eth_requestAccounts",
      });
      handleSuccess(address);
    } catch (error) {
      handleError(error);
    }
  }, [handleSuccess, handleError]);
 
  return (
    <button style={buttonStyles} onClick={createWallet}>
      <CoinbaseWalletLogo />
      Create Wallet
    </button>
  );
}