# How to easily connect Metamask Wallet

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.

![iReact new project](https://cdn.hashnode.com/res/hashnode/image/upload/v1655996180126/mjmIRrrWn.png align="center")

Install the thirdweb SDK and other packages
```shell
npm install @thirdweb-dev/sdk @thirdweb-dev/react ethers
```
After installing the required packages, add this code in your index.js
```javascript
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
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
``` javascript
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.


![Connect metamask wallet option](https://cdn.hashnode.com/res/hashnode/image/upload/v1656004600979/DZmINzI91.png align="center")

If you want this template or the code of this project, then you can [find it here](https://github.com/thirdweb-example/cra-javascript-starter).


## 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
```shell
npm install @3rdweb/sdk @3rdweb/hooks @3rdweb/react
```

Let's jump inside App.js. Clear up those codes that are not needed

![App.js screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1656002317027/H5DIE9F4i.png align="center")

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**.

```javascript
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`.
```javascript
import { ConnectWallet } from "@3rdweb/react";
```
And put it anywhere in the app but inside of the `ThirdwebProvider`. A typical example would be
```javascript
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:

![Connect wallet button](https://cdn.hashnode.com/res/hashnode/image/upload/v1656006105449/mkFyEnlUT.png align="center")

when you click the button, you will be prompted to connect the metamask wallet. But remember you can also connect to other wallets.

![Connect with metamask](https://cdn.hashnode.com/res/hashnode/image/upload/v1656006179550/VDKmAM_55.png align="center")

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.

![Metamask eth account switch](https://cdn.hashnode.com/res/hashnode/image/upload/v1656006476050/-_XNNcjys.png align="center")


All of this is possible only due to [thirdweb.com](https://thirdweb.com). 

![Thirdweb homepage](https://cdn.hashnode.com/res/hashnode/image/upload/v1655995972242/RKxv95Bku.png align="center")