In this article, I would walk through the up-to-date steps to create a virtual development environment for React and Node.js. By the end of this piece, you are able to deploy your Web3 Dapp, or React App in this environment without interrupting your main system.
Walk you through how to leverage React components and props to develop a contact form. Basically the concept is likely similar to the Flask app Jinja, which can efficiently communicate with database and personalise the content in frontend.
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 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 (
)
}
Then, we can directly add this function to the App function like the sample as follows:
function App() {
return (
Edit src/App.js and save to reload.
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
