Skip to main content

Coinbase Wallet

A wallet configurator for Coinbase Wallet which allows integrating the wallet with React Native

import { coinbaseWallet } from "@thirdweb-dev/react-native";

const coinbaseConfig = coinbaseWallet(options);
customize (optional)

coinbaseConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const coinbaseConfig = coinbaseWallet({ ... });

// override metadata
coinbaseConfig.meta.name = "..."; // change the name
coinbaseConfig.meta.iconURL = "..."; // change the icon

// override connection UI
coinbaseConfig.connectUI = CoinbaseConnectUI; // react component

// custom selection UI
coinbaseConfig.selectUI = CoinbaseSelectUI; // react component

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[coinbaseConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(coinbaseConfig, { ... });

options​

callbackURL

Coinbase Wallet Mobile SDK uses Universal Links to communicate between Coinbase Wallet and your application.

See the Coinbase setup.

coinbaseWallet({
  callbackURL: new URL("your-app-id://"),
});
recommended (optional)

Show this wallet as "recommended" in the ConnectWallet Modal.

coinbaseWallet({
  recommended: true,
});

Setup​

To configure the Coinbase Wallet you need to follow the steps outlined in their Setup Guide. A few caveats before going through the guide:

  1. For Android, you only need to declare the <queries> tag in the AndroidManifest.xml if your app targets Android 11 (API level 30)
  2. For iOS, you need to setup UniversalLinks to allow the wallet to communicate back to your app, otherwise the wallet will not redirect you back to the app. You can pass your app's UniversalLink when you create the Coinbase Wallet:

Usage with ConnectWallet​

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  supportedWallets={[coinbaseWallet()]}
  clientId="your-client-id"
>
  <YourApp />
</ThirdwebProvider>

Usage with useConnect​

you can use the useConnect hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

const coinbaseConfig = coinbaseWallet();

function App() {
  const connect = useConnect();

  const handleConnect = async () => {
    await connect(coinbaseConfig, connectOptions);
  };

  return <div> ... </div>;
}

connectOptions​

{ chainId?: number } | undefined
chainId (optional)

If chainId is provided, wallet will be connected and immediately switch to network with given chainId.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified in ThirdwebProvider's supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}