Chapter 1 – Detect and Connect Customers with Crypto Wallet Using React.JS

In this piece, I would walk through how to detect and connect with a customer Crypto wallet using React.js. This article would talk MetaMask wallet as an example. By the end of this article, you can add a wallet connection button just by spending 5 mins in your React DApp.

Table of Contents: Detect and Connect Customers with Crypto Wallet Using React.js

• Install Node.js and NPM on your Macbook terminal
• Create a Wallet Button using Components & JSX
• Add onClick function to detect and request connecting with the wallet
• Call back and set the customer wallet address using useState()
• Full Javascript of Detect and Connect with Crypto Wallet Using React.js

Install Node.js, and Yarn and Initiate a react folder on your Macbook

First thing first, we need to download the package of Node.js from Node.js official website. Please google it and download the latest version.

Then, we need to install yarn which is the Node.js running module by just typing this command in your terminal.

Sudo install –globally yarn

Some Mack user’s OS systems might fail to install this because it’s set protection by default. So you need to force it to run it. Here is the code

sudo npm install -g yarn

Last but not least, you open a new folder using VSC and then input this command to create a new React.js App folder. Please be sure to name it without big capital letters.

npx create-react-app abcapp

Create a Wallet Button using Components & JSX

In React.js, we can connect with the App function in App.js using a new function by means of adding components.

For example, we might create a function named MetaMaskLoginButton which returns a set of div with the wallet connection button.

function MetaMaskLoginButton() {

 return (

   <div>

     <h5>Wallet Address:{walletAddress123}</h5>

     <button onClick={requestAccount} >Connect with MetaMask Wallet</button>

   </div>

 )

}

Then, we can directly add this function to the App function like the sample as follows:

function App() {

 return (

   <div className="App">

     <header className="App-header">

       <img src={logo} className="App-logo" alt="logo" />

       <p>

         Edit <code>src/App.js</code> and save to reload.

       </p>

       <MetaMaskLoginButton />

Last but not least, we might decorate the button in the App.css script. However, I’m not going to go into details in this part. Please check other resources.

Add onClick async function to detect and request connecting with the wallet

The 1st step is for any customers to click the wallet button to connect with your shop. Thus, we need to add an onClick function connecting with a wallet request function. Here is the sample

async function requestAccount() {

   console.log('Requesting MetaMask Account')

   // Check if Meta Mask Wallet Extension Exists

   if (window.ethereum) {

     console.log('detected');

     try {

       const accounts = await window.ethereum.request({

         method: "eth_requestAccounts",

       });

Call back and set the customer wallet address using useState()

One of the most important things in the wallet connection is you are able to capture the customer’s public key so you can identify this user. We can import useState from react and set this public key firmly save in some places.

const [walletAddress123, setWalletAddress] = useState("");

Full Javascript of Detect and Connect with Crypto Wallet Using React.js

If you are interested in React JS chapter 1  – Detect and Connect Customers with Crypto Wallet Using React.JS, please subscribe to our newsletter by adding the message “chapter 1 + react js”. We would send you the script immediately to your mailbox.

I hope you enjoy reading React JS chapter 1  – Detect and Connect Customers with Crypto Wallet Using React.JS. If you did, please support us by doing one of the things listed below, because it always helps out our channel.

• Support and donate to my channel through PayPal (paypal.me/Easy2digital)
• Subscribe to my channel and turn on the notification bell Easy2Digital Youtube channel.
• Follow and like my page Easy2Digital Facebook page
• Share the article on your social network with the hashtag #easy2digital
• You sign up for our weekly newsletter to receive Easy2Digital latest articles, videos, and discount codes
• Subscribe to our monthly membership through Patreon to enjoy exclusive benefits (www.patreon.com/louisludigital)