EVM Kit uses thirdweb’s Wallet SDK to enable users to connect their wallets and interact with smart contracts. It powers all kinds of onboarding flows for users, including browser wallets, ERC-4337 account abstraction, email login, and more.

The application is wrapped in the ThirdwebProvider component; which is where you define which wallet connection options you want to support. You can see this in the _app.tsx file.

pages/_app.tsx
<ThirdwebProvider
  // Provide an array of supported wallets to this prop.
  supportedWallets={[metamaskWallet()]}
>
  <YourApp />
</ThirdwebProvider>

The app comes with a WalletConnection component to demonstrate how the ConnectWallet component behaves with various options enabled.

Configuring Wallet Connection Options

Inside the pages/_app.tsx file, configure the supportedWallets option of the ThirdwebProvider context provider component. This is an array of wallet connection options that will be presented to the user when you render the ConnectWallet component.

By default, no supportedWallets prop is defined, which defaults to support browser wallets only. More information on available options is listed below.

Browser Wallets

Use the thirdweb documentation to add browser wallets to the supportedWallets array:

Local Wallet (Guest Flow)

Abstract away the wallet connection flow by creating wallets for user’s under the hood.

Follow the Local Wallet Documentation.

Account Abstraction

Create new smart wallets for user’s that follow the EIP-4337 account abstraction standard and interact with smart contracts using this new wallet. thirdweb provides the infrastructure such as the paymaster and bundler for you to use this feature.

Note: this is not available on mainnet environments at this time. See supported chains.

View Jarrod’s full guide on setting up account abstraction.

Email / Phone Number Wallets

To create a “web2” onboarding experience with email/phone number, you can use Magic.Link or Paper Wallet to create a wallet associated with this email/phone for the user.

Sign up for Magic Link Auth and get an API key.

Inside an .env file, add your API key:

# Magic Link (Email Wallets)
NEXT_PUBLIC_MAGIC_LINK_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Then, follow the Magic.Link documentation.

Paper Wallet

Sign up for Paper and get a client ID.

Inside an .env file, add your client ID:

# Paper Wallet (Email Wallets)
NEXT_PUBLIC_PAPER_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Then, follow the Paper Wallet documentation.

Safe Wallets

View documentation for Safe Wallets.