There are various ways to connect metamask wallet but I will show you one of the simplest ways out there. Remember this is not only limited to metamask, you can also connect coinbase wallet, walletConnect, Email Wallet, etc.
Ok, let's make a react app
npx create-react-app metamask-wallet-connect
And start the application to preview
cd metamask-wallet-connect
npm start
You should be seeing a weird emoji rotating for infinite rotations by now.
Install the thirdweb SDK and other packages
npm install @thirdweb-dev/sdk @thirdweb-dev/react ethers
After installing the required packages, add this code in your index.js
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
const activeChainId = ChainId.Mainnet;
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
<React.StrictMode>
<ThirdwebProvider desiredChainId={activeChainId}>
<App />
</ThirdwebProvider>
</React.StrictMode>
);
And add this to your App.js
import { useAddress, useDisconnect, useMetamask } from "@thirdweb-dev/react";
function App() {
const address = useAddress();
const connectWithMetamask = useMetamask();
const disconnectWallet = useDisconnect();
return (
<div>
{address ? (
<>
<button onClick={disconnectWallet}>Disconnect Wallet</button>
<p>Your address: {address}</p>
</>
) : (
<button onClick={connectWithMetamask}>Connect with Metamask</button>
)}
</div>
);
}
export default App;
One thing to notice here is that you will get some warnings here. You can totally ignore those warnings. You will find a button that we just created. When we click on that button, a metamask wallet will prompt asking for the authorized permission.
If you want this template or the code of this project, then you can find it here.
Another way of doing things
If the above thing doesn't work for you or you are getting a lot of warnings then you can go through this technique (method). I want to clarify that the packages has updated 5 months ago last time from the data I am writing this article. But this method is simple and handy.
Install the thirdweb SDK and other packages
npm install @3rdweb/sdk @3rdweb/hooks @3rdweb/react
Let's jump inside App.js. Clear up those codes that are not needed
Now the real thing begins. Just leave index.js on its own condition and start adding a bunch of lines of code on App.js. We import ThirdwebProvider from @3rdweb/react and we need to have arrays of supportedChainIds and some connectors.
import { ThirdwebProvider } from "@3rdweb/react";
const App = () => {
const supportedChainIds = [4];
const connectors = {
injected: {},
};
return (
<ThirdwebProvider
supportedChainIds={supportedChainIds}
connectors={connectors}
>
<h1>Hi</h1>
</ThirdwebProvider>
);
};
export default App;
Use connect wallet to make a connect wallet button. Import ConnectWallet from @3rdweb/react.
import { ConnectWallet } from "@3rdweb/react";
And put it anywhere in the app but inside of the ThirdwebProvider. A typical example would be
import { ThirdwebProvider } from "@3rdweb/react";
import { ConnectWallet } from "@3rdweb/react";
const App = () => {
const supportedChainIds = [4];
const connectors = {
injected: {},
};
return (
<ThirdwebProvider
supportedChainIds={supportedChainIds}
connectors={connectors}
>
<ConnectWallet />
</ThirdwebProvider>
);
};
export default App;
And you will find a button like this:
when you click the button, you will be prompted to connect the metamask wallet. But remember you can also connect to other wallets.
After you connect your wallet you can see the ETH and account address inside of an oval box that looks like a round button. Not only limited to that, but you can also switch between your wallet easily.
All of this is possible only due to thirdweb.com.
