Metamask® Login*
Connect to MetaMask
You can connect your dapp to users' MetaMask wallets by detecting MetaMask in their browsers and connecting to their accounts. This page provides instructions for connecting to MetaMask using the wallet detection mechanism introduced by EIP-6963. This approach allows you to detect multiple installed wallets and connect to them without conflicts.
info
Learn more about EIP-6963 in Wallet interoperability.
tip
To connect to MetaMask without using EIP-6963, see the Create a simple dapp tutorial.
You can connect to MetaMask using third-party libraries or directly using Vite.
Connect to MetaMask using third-party libraries
You can connect to MetaMask using the following third-party libraries that support EIP-6963:
Connect to MetaMask directly using Vite
To connect to MetaMask directly, we recommend implementing support for EIP-6963 using the Vite build tool with vanilla TypeScript or React TypeScript.
Vanilla TypeScript
Follow these steps for creating a vanilla TypeScript project to connect to MetaMask:
1. Create a project
Create a Vite project using the template for vanilla TypeScript:
2. Set up the project
In your Vite project, update src/vite-env.d.ts
with the EIP-6963 interfaces:
vite-env.d.ts
note
In addition to the EIP-6963 interfaces, you need a EIP1193Provider
interface (defined by EIP-1193), which is the foundational structure for Ethereum wallet providers, and represents the essential properties and methods for interacting with MetaMask and other Ethereum wallets in JavaScript.
3. Update main.ts
Update src/main.ts
with the following code:
main.ts
The querySelector
finds and returns the first HTML element that matches the CSS selector app
, and sets its innerHTML
. You need to include a basic HTML structure with an inner div
to inject a list of buttons, each representing a detected wallet provider.
You'll create the listProviders
function in the next step, and pass an argument which represents the div
element.
4. Connect to wallets
Create a file src/providers.ts
with the following code:
providers.ts
The connectWithProvider
function connects the user to the selected provider using eth_requestAccounts
. The wallet
object is passed as an argument to the function, indicating the argument type.
The listProviders
function uses a simplified approach. Instead of mapping and joining an entire block of HTML, it directly passes the event.detail
object to the connectWithProvider
function when a provider is announced.
5. View the project
Run the following command to view and test the Vite project in your browser:
Example
See the vanilla TypeScript example for more information. You can clone the repository and run the example locally using npm i && npm run dev
.
React TypeScript
Follow these steps for creating a React TypeScript project to connect to MetaMask:
1. Create a project
Create a Vite project using the template for React TypeScript:
2. Set up the project
In your Vite project, update src/vite-env.d.ts
with the EIP-6963 interfaces:
vite-env.d.ts
note
In addition to the EIP-6963 interfaces, you need a EIP1193Provider
interface (defined by EIP-1193), which is the foundational structure for Ethereum wallet providers, and represents the essential properties and methods for interacting with MetaMask and other Ethereum wallets in JavaScript.
3. Update App.tsx
Update src/App.tsx
with the following code:
App.tsx
This code renders the DiscoverWalletProviders
component that you'll create in the next step, which contains the logic for detecting and connecting to wallet providers.
4. Detect and connect to wallets
In the src/components
directory, create a component DiscoverWalletProviders.tsx
with the following code:
DiscoverWalletProviders.tsx
In this code:
selectedWallet
is a state variable that holds the user's most recently selected wallet.userAccount
is a state variable that holds the user's connected wallet's address.useSyncProviders
is a custom hook that returns the providers array (wallets installed in the browser).
The handleConnect
function takes a providerWithInfo
, which is an EIP6963ProviderDetail
object. That object is used to request the user's accounts from the provider using eth_requestAccounts
.
If the request succeeds, the selectedWallet
and userAccount
local state variables are set.
Then, the component maps over the providers array and renders a button for each detected provider.
Finally, if the userAccount
state variable is not empty, the selected wallet icon, name, and address are displayed.
5. Add React hooks
Create a src/hooks
directory and add a store.ts
file with the following code:
hooks/store.ts
Also, add a file useSyncProviders.ts
with the following code to the hooks
directory:
hooks/useSyncProviders.ts
This hook allows you to subscribe to MetaMask events, read updated values, and update components. It uses the store.value
and store.subscribe
methods defined in the store.ts
hook.
6. Create utility functions
Create a src/utils
directory and add a file index.ts
with the following code:
index.ts
This is a good place to store utility functions that you might need to reuse throughout your dapp. This example only uses the formatAddress
function, but the others might be useful for other applications.
Example
See the React TypeScript example for more information. You can clone the repository and run the example locally using npm i && npm run dev
.
Next steps
After connecting to MetaMask directly, you can:
Detect, add, and switch networks.
Send transactions.
Sign data.
Display tokens, contract methods, and icons in MetaMask.
Last updated