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 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 (
Wallet Address:{walletAddress123}
)
}
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
Chapter 2 – Build a Contact Form Using React Props and Components
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.
Chapter 3 – React and Node.JS Virtual Environment Set in Macbook
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.
Chapter 5 – Refresh Content without Reloading Page using Fetch JS API and Python
Content refresh and loading is one of key parts influencing user experiences through an entire web browsing journey. Except for saving dollars by using client side async with server side, the web experience can be enhanced to the next level. In this piece, I would walk through briefly how to use fetch js working with your Python app to refresh content with reloading the page.
Financial Ratio TTM Generator Function Script Applied in Google App Scripts
Google Sheets is one of the most popular platforms to manage data, such as performance trackers, financial models, and so on. In this article, I would walk through how to integrate with Easy2Digital API with Google Apps scripts to create a function. I would take the financial ratio TTM API as an example. By the end of this article, you can use this function to fetch API data based on your needs.
Chapter 4 – Build a Server Function Loading Progress Bar Using Ajax, jquery and Python
Some server functions loading time takes much longer than others. For engaging with the audiences who are waiting for the response, we necessarily notify the users that the app is still running instead of having crashed. In this piece, I would walk you through briefly how to add a progress bar using Ajax, and jquery on the client side interacting with the Python server side.