Add a Create Wallet button to your app

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.

Without wagmi

CreateWalletButton.tsx

import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";
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,
};
 
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 = async () => {
        try {
            const [address] = await provider.request<string[]>({
                method: "eth_requestAccounts",
            });
            handleSuccess(address);
        } catch (error) {
            handleError(error);
        }
    };
    return (
        <button style={buttonStyles} onClick={createWallet}>
            <CoinbaseWalletLogo />
            Create Wallet
        </button>
    );
}