How to Create Cryptocurrency Wallet Using Web3

In this article, we will be creating a ReactJS app to view your crypto balance and transfer tokens from your account to another account.

Introduction

In my previous article, We created a new ERC-20 based Ethereum crypto token called “Nice token” and this article is a follow-up to it to create a cryptocurrency wallet to send tokens from one account to another.

For this, we will create a small ReactJS application that will allow you to display the tokens in an account and also allow you to transfer tokens from one account to another.

With this let’s get started.

Creating the ReactJs App

Let's create a new React application using the following command

npx create-react-app blockchain-wallet

Note: While creating this app make sure you have nodeJS version 16 or below and after creating the app, update the “react-scripts” version to 4.0.3. There is currently a bug while using version 5.0.3. when running the application locally using webpack.

Next, we will need to copy the compiled smart contract that we built and deployed from the truffle project to the ganache Blockchain. You will find the compiled contract under the build directory of your truffle project.

Let’s copy the NiceToken.json to the root of the ReactJS project.

Next, In order to communicate with the blockchain network, we are going to use Web3. We can install this using npm.

npm install web3

Connecting to the Blockchain Network.

Using Web3, let's connect to the local ganache blockchain network using the following code.

useEffect(() => {const loadWeb3 = async () => {
// Connect to Local blockchain network
window.web3 = new Web3(new Web3.providers. HttpProvider("http://localhost:7545"));
// To Connect to MetaMask
// window.web3 = new Web3(window.ethereum);
};

Once this is done, we can now communicate with the local Ganache Blockchain network using Web3.

Fetching Data from the Blockchain Network

Now, let's fetch all account addresses on our local blockchain network and set the first account details in our cryptocurrency wallet.

const loadBlockchainData = async () => {         const web3 = window.web3;
const accounts = await web3.eth.getAccounts();
const niceContractAddress = "0xdE928AC7259340545Ed8Fa290588a8b0076Ff9F4"; // Contract Address Here
const niceTokenContract = new web3.eth.Contract(NiceToken.abi ,
niceContractAddress
);
setContract(niceTokenContract);
setAccounts(accounts);
setAccountDetails(niceTokenContract, accounts[0]);
};

Note: This code is well foramtted and easier to view on my website https://refactorfirst.com

As you see here, In order to get the smart contract itself, we have specified the address where the smart contract was deployed. Remember, we got this address when we deployed the smart contract on the blockchain. Using this, we can then fetch the account details of the first account and set the details on the screen.

const setAccountDetails = async (niceContract, account) => {     setAccount(account);
const balance = await
niceContract.methods.balanceOf(account).call();
const web3 = window.web3;
setbalance(web3.utils.fromWei(balance.toString()));
};

So this is how you can communicate with the Blockchain network and fetch account details using Web3.

Next, let's look at how we can transfer some tokens from one account to the other.

Transferring Crypto Tokens to another Account Address

For this, I have created a simple form that lists all the account addresses in a drop-down list, displays you the current account balance, and provides you a way to send tokens to another account address using the two text boxes.

Let's look at how we can transfer some tokens to another address.

const transfer = async (recipient, amount) => {        await niceContract.methods
.transfer(recipient, amount)
.send({ from: account });
await setAccountDetails(niceContract, account);};

Now after pasting the recipient’s address and amount in the text boxes, we click on the “Send Nice” button to invoke the above function. Here, using the transfer function from the contract, you can now transfer tokens from the currently displayed account to another.

With this, we just created an Ethereum Cryptocurrency Wallet and send some tokens from one account to another.

Conclusion

In this article, we created a ReactJS App that will allow us to view an account’s token balance and also transfer tokens from one account to another.

You can view the entire source code on my GitHub repo here.

I keep exploring and learning new things. If you want to know the latest trends and improve your software development skills, then subscribe to my newsletter on https://refactorfirst.com and also follow me on Twitter.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amrut Prabhu

Amrut Prabhu

Software Craftsman, Tech Enthusiast. I run https://refactorfirst.com to post all my articles