← Guides / Web3 SDKs / How to Build a Wallet Generator for Solana in React

December 27, 2021

How to Build a Wallet Generator for Solana in React

Introduction

In this practical guide you will build a basic Wallet application with React and Web3 that will interact with Solana Network.

This application will do the following operations:

Connect to the Network

You will use Connection to create a connection with Solana Network. There are three options: mainnet-beta, testnet and devnet.

In this example we will use devnet because it is the one that acts like a playground for anyone who wants to start to build with Solana and tokens aren't real.

Generate an Account

In order to interact with Solana Network you will need to create a Keypair that will contain a Public Key and a Secret Key. Public Key will be your address for anyone that want to send you tokens and Secret Key will be used to sign transactions.

Get the balance of the generated Account

You can check at anytime the balance of an account if you know its public key.

Request an Airdrop

Solana devnet allows us to ask for free tokens to be able to do tests while we are building our applications.

These tokens aren't real and you will see them only while you are connected to devnet.

Prerequisites:

In order to follow this guide you will need the following:

NodeJS installed
Expo installed
Some basic React understanding

Setup the Boilerplate

We have prepared a small boilerplate repository to make it easier to build this Wallet application.

It contains:

A basic skeleton with the empty methods that we will implement along the tutorial.
A layout to show the data that we will get from the Solana Network.
@solana/web3.js package to communicate with the Solana Network.

File structure:

App.js The main file of the App and where you will put your code.

app.json This file contains information about the project: name, supported platforms, icon, splash images...

assets This folder will contain the images.

babel.config.js This file is used to extend Babel configuration.

node_modules This folder contains all the dependencies and packages of the application.

package.json This file contains a list of dependencies and some scripts to run or build it.

yarn.lock This file will update automatically every time that add new dependencies. It contains a list of the exact versions for every dependency.

First, you will need to clone the Github repository:

git clone https://github.com/quiknode-labs/QuickNode-solana-wallet

Once cloned, you will need to install dependencies:

cd QuickNode-solana-wallet
yarn install

Last, run it:

expo web

At this point you will see the following:

Terminal

Browser

Press w in your Terminal or Run in web browser in your browser to open the app.

Now that everything is configured and server is running, it's time to start building the wallet app.

Make sure that the Terminal is open and Expo is running while you continue following this guide.

Connect to the Network

Connection to Solana Network is pretty straightforward, we don't need to register to get an account or ask for API keys.

If you open App.js you will realize that we already have the imports and the empty functions that you need to implement:

import {
Connection,
clusterApiUrl,
...
} from "@solana/web3.js";

Connection accepts an endpoint parameter with the url of the fullnode.

In our example we will use devnet that as we mentioned before it is the one intended to act like a playground for anyone who wants to start building in Solana Network and where tokens are not real.

Functions are already defined so the only you will need to do is to implement them.

So, look for createConnection function in your code and modify it to look like this:

const createConnection = () => {
  return new Connection(clusterApiUrl("devnet"));
};

Other valid options for the endpoint parameter are:

testnet
mainnet-beta

Last, we could call this method and print in console to see that is connecting to the Network:

console.log(createConnection());

You should see something like this in your browser's console:

Object{
   "_commitment":"undefined",
   "_confirmTransactionInitialTimeout":"undefined",
   "_rpcEndpoint":"https://api.devnet.solana.com",
   "_rpcWsEndpoint":"wss://api.devnet.solana.com/",
   "_rpcClient":{
      "…"
   },
   "_rpcRequest":"createRpcRequest(method",
   "args)",
   "_rpcBatchRequest":"createRpcBatchRequest(requests)",
   "_rpcWebSocket":{
      "…"
   },
   "_rpcWebSocketConnected":false,
   "_rpcWebSocketHeartbeat":null,
   "…"
}

Generate an Account

To create an account we will need to generate a Keypair that will contains a Public Key and Secret Key.

For that, we already have the import:

import {
...
Keypair
...
} from "@solana/web3.js";

Look for the empty createAccount function in our code and implement it like this:

 const createAccount = () => {
   const keypair = Keypair.generate();
   const initialBalance = 0;
   setAccount({ keypair: keypair, balance: 0 });
 };

Line 1: Define the function.

Line 2: Define a keypair variable with the result of calling the function to generate a random Keypair.

Line 3: Define an initialBalance variable and set to 0.

Line 4: Set the state variable with 2 keys: keypair and balance.

After save, the application should reload and you will able to create new random accounts every time that you press the button Create new account.

Get Balance of the Account

To get the balance of an account you will need to look for the getBalance function in the code and implement it like this:

const getBalance = async (publicKey) => {
 const connection = createConnection();

 const lamports = await connection.getBalance(publicKey).catch((err) => {
   console.error(`Error: ${err}`);
 });

   return lamports / LAMPORTS_PER_SOL;
 };

Line 1: Function receives publicKey as parameter.

Line 2: Defines a connection variable with the result of calling createConnection function.

Line 4: Defines a lamports variable with the result of calling the getBalance function of the connection that we defined before.

Line 8: Instead of return the value in lamports (1000000000) we divide it by the amount of lamports in a SOL to return a more friendly value: 1 SOL.

A lamport is the minimal unit in Solana Network: 1 SOL = 1 billion lamports.

Request Airdrop

As we said before, in devnet tokens are not real. Solana Network let us to request some tokens to be able to do tests while we are building our applications.

Solana Web3 requestAirdrop function accepts two parameters:

to: PublicKey of the account
lamports: number of lamports

For that, we will need to implement the empty requestAirdrop function in our code like this:

  const requestAirdrop = async (publicKey) => {
    setRequestAirdropButton({ text: BUTTON_TEXT_LOADING, loading: true });
    const connection = createConnection();

    const airdropSignature = await connection.requestAirdrop(
      publicKey,
      LAMPORTS_PER_SOL
    );

    const signature = await connection.confirmTransaction(airdropSignature);

    const newBalance = await getBalance(publicKey);

    setAccount({ ...account, balance: newBalance });
    setRequestAirdropButton({ text: BUTTON_TEXT, loading: false });
  };

Line 1: Function receives publicKey as parameter.

Line 2: Set button to loading state.

Line 3: Defines a connection variable with the result of calling createConnection function.

Line 5-8: Defines an airdropSignature variable with the result of calling requestAirdrop function of the connection that we defined before.

Line 10: Defines a signature variable with the result of calling confirmTransaction function.

Line 12: Defines a newBalance variable with the result of calling our getBalance function.

Line 14: Set state variable to update balance key with newBalance.

Line 15: After update balance we set button to initial state.

Conclusion

Congratulations on making it to the end! You've taken your first steps to build a basic Wallet Application that interacts with Solana Network. You learned how to connect to the network, generate random accounts and request airdrops. Also, you learned how to put everything together working with React.

Subscribe to our newsletter for more articles and guides on Ethereum. If you have any feedback, feel free to reach out to us via Twitter. You can always chat with us on our Discord community server, featuring some of the coolest developers you'll ever meet :)

Ready to try QuickNode? Start your 7-day free trial

Introduction
Setup the Boilerplate
Connect to the Network
Generate an Account
Get Balance of the Account
Request Airdrop
Conclusion

Jose Ferrer

Hello! I'm Jose — a developer, author, creator and blogger. I worked as a Full-Stack Developer for the last 20 years.

Want more Web3 tuts?

We'll send you the latest tech and tutorials via our weekly Web3 Vibes newsletter.

Related articles 47

Dec 29, 2021 How to integrate IPFS with Ethereum

It can be costly to store massive files on a blockchain mainnet, and this is where decentralized file storing systems like IPFS can come in handy. Sometimes, NFTs use IPFS as well. In this guide, we’ll cover how we can integrate IPFS with...

Dec 29, 2021 How to generate a new Ethereum address in PHP

PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can generate a new Ethereum address in...

Dec 29, 2021 Estimating gas price using pending transactions in Python

To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas. The transactions are accepted into the block based on the amount of gas they are...

Dec 29, 2021 How to connect to Ethereum network with ethers.js

When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp development has been consistently growing and there are a lot of developers who want to...

Dec 29, 2021 How to connect to the Ethereum network using Ruby

Ruby has a huge fanbase. Ruby was developed by its creator with an intention to create a language people can have fun using. Ruby has been largely accepted by the developers all around the world since it’s launch, in fact, the biggest tech communities in many cities are...

Dec 29, 2021 How to generate a new Ethereum address in Ruby

With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using ruby-eth...

Dec 29, 2021 How to connect to Ethereum network using Java / Web3j

We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In this guide/tutorial, we'll learn how to connect to the Ethereum Blockchain network...

Dec 29, 2021 How to connect to Ethereum using .NET (Nethereum)

Dotnet or .NET is very popular for the development of desktop applications, most Windows desktop applications are built using .NET, and it also contributes largely to web application’s tech stack. In this guide, let’s see how we can connect to Ethereum using .NET and

Dec 29, 2021 How to Setup Local Development Environment for Solidity

The success story of blockchain started with Bitcoin and was given wings by Ethereum. Ethereum was the first blockchain to introduce programmable software to the immutable ledger; these programs that live on the blockchain are called smart contracts. Solidity is the...

Dec 29, 2021 How to deploy a smart contract with Brownie

Python is one of the most versatile programming languages; from researchers running their test models to developers using it in heavy production environments, it has use cases in every possible technical field. In today's guide, we will learn about Brownie, a Python-based...

Jan 27, 2022 How to Set Up a Near Project from Scratch

In this tutorial we will look at how we can setup a basic NEAR project from scratch, installing and configuring dependencies and customizing the project to work well with AssemblyScript.We will first start by initializing our project with a package.json file using...

Dec 29, 2021 Como crear y lanzar un ERC-721 (NFT)

Coleccionables digitales que son compatibles con ERC-721 se han vuelto muy populares desde el lanzamiento de Cryptokitties y han ganado adopción masiva en los últimos meses. Esta guía cubrirá la parte de creación y lanzamiento...

Dec 29, 2021 How to Build Your DApp Using The Modern Ethereum Tech Stack: Hardhat and EthersJs

When building a smart contract on the Ethereum blockchain, new developers tend to reach out to tools like truffle and web3.js in building their smart contracts. This tutorial will look at how to use Hardhat and Ether.js, which are now becoming the standard in building...

Dec 29, 2021 The Web3 Developer Stack

A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are common web developer stacks. Similarly, today we will learn more about the web3...

Jan 10, 2022 How to Send a Transaction On Solana Using JavaScript

Hello reader! Today is an exhilarating day because we are going on an expedition to the Solana Blockchain. Solana is an up-and-coming blockchain seeking to improve upon the current ecosystem's solutions to the complex problem of providing a secure, scalable, decentralized...

Dec 29, 2021 How to do a non-custodial transaction with QuickNode

Private keys are one of the most sensitive pieces of data when it comes to cryptography and the blockchain. However, there has always been debate/confusion about choosing between custodial wallets (where the wallet provider has custody of the user’s private key) and...

Jan 10, 2022 How to Mint An NFT On Solana

Hello reader! Welcome to another Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. In this guide, you will walk through step-by-step how to create an NFT on Solana....

Dec 29, 2021 How to connect to the Ethereum network using Python using Web3.py

You can build Ethereum applications in different programming languages. In this article, we will connect to the Ethereum network using Python.PrerequisiteEthereum Node (We will use QuickNode’s free...

Dec 29, 2021 How to Connect to Terra with JavaScript using Terra.js

Stablecoins have been bridging the gap between traditional currencies and blockchains. Stablecoins offer stable price tokens pegged by a reserve asset which is often a fiat current like USD, EUR, GBP. The Terra protocol provides a framework to work with stablecoins. This...

Dec 29, 2021 Introduction to Scaffold-ETH 🏗

Developing applications involves juggling several moving pieces like front-ends, back-ends, and databases. But developing a decentralized application on a blockchain adds a few more elements like smart contracts and nodes that allow you to connect to the...

Dec 29, 2021 How To Fork Ethereum Mainnet with Hardhat

Forking the chain at an older block of the blockchain is helpful if you want to simulate the blockchain’s state at that block; Hardhat has this functionality built in. In this guide, let’s go through the process of forking the Ethereum Mainnet at an older...

Dec 29, 2021 How to create and deploy a smart contract with Hardhat

Ethereum development environments like Truffle and Hardhat make it easier to work with smart contracts and Ethereum nodes. They provide a set of tools to seamlessly write, test, and deploy...

Dec 29, 2021 How to generate a new Bitcoin address in JavaScript

To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using CyrptoCoinJS.

Dec 29, 2021 How to create your own DAO with Aragon

Blockchain provides us with the power of decentralization. Decentralization means the transfer of power to users/members rather than having a single centralized authority governing everything; it enables various use cases in finance, governance, voting, fundraising, etc....

Dec 29, 2021 How to Send an EIP-1559 Transaction

While Ethereum has been trying to scale, it has encountered some gas price issues. Many layer 2 solutions and sidechains sprang into existence to solve this problem, but Ethereum is the main chain, and at some point, it has to be improved. EIP-1559 was introduced to...

Dec 29, 2021 Como crear un NFT en SOLANA

¡Hola querido lector! Bienvenidos a una nueva guía de Solana.Solana es una blockchain que promete mucho a la hora de intentar resolver los problemas de escalabilidad que podemos apreciar en otras blockchains, como Ethereum por...

Jan 10, 2022 Como crear un Token BEP20

BEP20 es en Binance Smart Chain el equivalente al popular token ERC20 de la red de Ethereum. La diferencia es que el token BEP20 no corre en la red de Ethereum sino en la red de Binance Smart Chain. Más allá de esta diferencia, como BSC (Binance Smart Chain) implementa la...

Jan 10, 2022 How to Create an Address in Solana using JavaScript

Hello reader! Welcome to QuickNode's first Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. You will walk through step-by-step how to create a Solana address using the @solana/web3.js...

Jan 21, 2022 How to send a transaction on Terra using JavaScript and Terra.js

Terra has emerged as the choice of blockchain for developing a stablecoin based dApp. Terra provides a cutting-edge stablecoin framework for modern dApp development. In this guide, we will learn how to send a transaction on Terra using their javascript library...

Jan 21, 2022 How to create a token on Terra using Terra Station

Terra is the stablecoins framework with a pool of tokens to work with. Today in this guide, we will learn how to create our own token on the Terra blockchain network.PrerequisitesA Terra Bombay testnet...

Jan 26, 2022 How to Deploy an NFT on Solana Using Candy Machine V2

Hello readers, in this guide we are going to go into how to set up an NFT mint on Solana using Candy Machine v2. Previously we had a guide up on the V1, but it is now deprecated and is no longer in use for new mints.Candy Machine v2 has some...

Dec 29, 2021 How to Connect Your Dapp With MetaMask Using Ethers.js

In our dApp, we will have a simple react user interface that has a material button asking the user to connect to MetaMask. And if they do not have an account, they can create one or log in to their account. They will then view their wallet balance and address displayed on...

Dec 29, 2021 How to re-send a transaction with higher gas price using ethers.js

Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your transaction. If you have a high priority transaction but low gas, you could end up...

Dec 29, 2021 How to get the balance of an ERC-20 token

When a new token is made on the Ethereum network, it usually follows a specification. The most popular of which is the ERC20 specification. To meet this ERC20 standard, one's token must have a multitude of...

Dec 29, 2021 How to connect to Ethereum network with Web3.js

Libraries and frameworks make the development process a lot easier and faster. When it comes to Ethereum development, Web3.js is the go to library. That's because Web3.js is the official library, from the

Dec 29, 2021 How to Build a One-Click Sign in Using MetaMask with PHP's Laravel

Social logins: we have all seen them, we have all used them. "Login with Facebook". "Login with Github".If you have been around the Web3 community you may have come across a more recent player in the game: "Login with MetaMask". For instance, this is...

Dec 29, 2021 How to Fork Ethereum Blockchain with Ganache.

Forking and running a local simulated Ethereum environment is essential if you want to work with DeFi or do Ethereum development in general. In this guide, we’ll cover how to fork Ethereum Blockchain with

Dec 29, 2021 How to fetch Ethereum event logs in Ruby

Ethereum log records are very useful to understand and keep track of smart contract events. In this guide, we are going to learn how to fetch ethereum event logs in Ruby using ethereum.rb ruby...

Dec 29, 2021 How to generate a new Ethereum address in Go

Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson at Google, then launched in 2009 as...

Dec 29, 2021 How to generate a new Ethereum address in Python

Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we will cover creating an Ethereum address in Python using the

Dec 29, 2021 How to generate a new Ethereum address in JavaScript

When it comes to programming, there’s hardly anyone who has not used or heard about JavaScript. JavaScript was initially created for client-side scripting but has become a full-featured Object-Oriented...

Dec 29, 2021 How to connect to Ethereum network using Go

Go helps you make faster scalable backends and this guide will show you how to connect your backend to Ethereum (and make it even faster, more reliable, and globally accessible, all thanks to QuickNode’s global infrastructure). What is...

Dec 29, 2021 How to connect to Ethereum using PHP

PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the web3.php...

Dec 29, 2021 How to use Subspace with QuickNode

In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.JavaScript is the programming language behind most of the internet apps and websites. JavaScript today has become one of the most used programming languages,...

Dec 29, 2021 Integrate Your Svelte App with a Smart Contract

Today we will be building a sample app in Svelte, and connecting it to a smart contract that we deploy on the Ropsten Network.Our frontend will be able to do the following:Allow the user to send a greeting message along with a wave to the...

Dec 29, 2021 Como crear un NFT en Solana usando Candy Machine

¡Hola querido lector! Hemos recibido un montón de pedidos por otra guía de NFT en Solana. En la guia anterior no llegamos hasta la parte mas jugosa, que es la parte donde enlazamos una...

Jan 17, 2022 How to Mint an NFT on Solana Using Candy Machine

NOTE: This guide is based off of the V1 of Candy Machine. V1 has been deprecated. You can catch an up-to-date guide on V2 here