Web3 Wallet Connection in React-TypeScript without Web3 Library.

Are you developing a React-TypeScript app and looking to integrate Web3 wallet connection? This blog is for you! In this step-by-step tutorial, I will guide you through the process of connecting a Web3 wallet to your React-TypeScript app without using any Web3 library. My approach involves using the window object and React hooks to make the integration process smoother and more straightforward. By the end of this tutorial, you will be able to connect a Web3 wallet to your app and interact with the blockchain in no time. Start building your decentralized application today!

Before you start

Before starting the project you have to have a basic knowledge of ReactJS and Typescript and a generalized idea about what web3 and blockchain are.

In this project, I will be using create-react-app with a typescript template and MaterialUI for styling. You can include these packages by typing the following commands.

npx create-react-app my-app --template typescript
npm install @mui/material @emotion/react @emotion/styled

Note: You can also use CSS rather than MaterialUI or any other CSS library

Let's begin.

Firstly we will be creating a file name ConnectionWallet.tsx

import React from "react";

function ConnectionWallet(): JSX.Element{
  return <div>ConnectionWallet</div>;
};

export default ConnectionWallet;

Now we are checking for metamask is installed or not using hooks useState hook for managing the state and using useEffect hook to check whether metamask is installed or not.

const [isMetamaskInstalled, setIsMetamaskInstalled] =
    useState<boolean>(false);
  const [ethereumAccount, setEthereumAccount] = useState<string | null>(null);

  useEffect(() => {
    if ((window as any).ethereum) {
      //check if Metamask wallet is installed
      setIsMetamaskInstalled(true);
    }
  }, []);

Now we are checking whether the wallet has an account setup or not.

//Does the User have an Ethereum wallet/account?
  async function connectMetamaskWallet(): Promise<void> {
    //to get around type checking
    (window as any).ethereum
      .request({
        method: "eth_requestAccounts",
      })
      .then((accounts: string[]) => {
        setEthereumAccount(accounts[0]);
      })
      .catch((error: any) => {
        alert(`Something went wrong: ${error}`);
      });
  }

Now we implement the UI part of the button which will initiate a web3 request to connect to injected wallet.

<div>
      {ethereumAccount !== null && !!isMetamaskInstalled ? (
        <Button
          variant="outlined"
          aria-disabled={true}
          sx={{
            backgroundColor: "#222629",
            textTransform: "unset",
            ":hover": {
              bgcolor: "#222629",
              color: "white",
            },
          }}
          onClick={connectMetamaskWallet}
        >
          {ethereumAccount.slice(0, 6) + ".." + ethereumAccount.slice(38, 42)}
        </Button>
      ) : isMetamaskInstalled && ethereumAccount === null ? (
        <Button
          variant="outlined"
          aria-disabled={true}
          sx={{
            backgroundColor: "#222629",
            ":hover": {
              bgcolor: "#222629",
              color: "white",
            },
          }}
          onClick={connectMetamaskWallet}
        >
          Connect
        </Button>
      ) : (
        <p>Please install wallet</p>
      )}
    </div>

Here is the full example:

import { useEffect, useState } from "react";
import { Button } from "@mui/material";
// import "./styles/App.css";

function ConnectionWallet(): JSX.Element {
  const [isMetamaskInstalled, setIsMetamaskInstalled] =
    useState<boolean>(false);
  const [ethereumAccount, setEthereumAccount] = useState<string | null>(null);

  useEffect(() => {
    if ((window as any).ethereum) {
      //check if Metamask wallet is installed
      setIsMetamaskInstalled(true);
    }
  }, []);

  //Does the User have an Ethereum wallet/account?
  async function connectMetamaskWallet(): Promise<void> {
    //to get around type checking
    (window as any).ethereum
      .request({
        method: "eth_requestAccounts",
      })
      .then((accounts: string[]) => {
        setEthereumAccount(accounts[0]);
      })
      .catch((error: any) => {
        alert(`Something went wrong: ${error}`);
      });
  }

  return (
    <div>
      {ethereumAccount !== null && !!isMetamaskInstalled ? (
        <Button
          variant="outlined"
          aria-disabled={true}
          sx={{
            backgroundColor: "#222629",
            textTransform: "unset",
            ":hover": {
              bgcolor: "#222629",
              color: "white",
            },
          }}
          onClick={connectMetamaskWallet}
        >
          {ethereumAccount.slice(0, 6) + ".." + ethereumAccount.slice(38, 42)}
        </Button>
      ) : isMetamaskInstalled && ethereumAccount === null ? (
        <Button
          variant="outlined"
          aria-disabled={true}
          sx={{
            backgroundColor: "#222629",
            ":hover": {
              bgcolor: "#222629",
              color: "white",
            },
          }}
          onClick={connectMetamaskWallet}
        >
          Connect
        </Button>
      ) : (
        <p>Please install wallet</p>
      )}
    </div>
  );
}

export default ConnectionWallet;

Thank you :) for reading this blog. If You have any doubt please feel free to comment or contact me on my socials.