Wallets are critical for getting into crypto or developing any dAPP (decentralized app) since they provide various important functions in the Web3 ecosystem. As a result, in this article, we'll go deeper into the Solana ecosystem, which is the world's first web-scale, open-source blockchain protocol, allowing developers all over the globe to build decentralized apps (dApps) on its platform. Solana is now capable of 50,000 TPS (transactions per second), making it the fastest blockchain in the world. Prerequisites Basic JavaScript knowledge
Some experience with React JS (required only for macOS or Linux users) Expo CLI Watchman Git Introduction In this practical guide, you will build a basic Wallet application with React and Web3 that will interact with Solana Network. Setup environment: Let's set up and install Node.js and Npm first. Download node , If you have it installed already, skip this step. here Confirm if you have Node installed node -v Node.js comes with Npm, so you can use the code below to confirm it's installed. npm -v Now that we have our environment set up, let's initialize our project and begin to build. Setting up the Boilerplate I have created a boilerplate repository to make it easier to build this Wallet application. It contains: We will implement a basic skeleton with the empty methods 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. To begin, we would install Watchman to enable us to install Expo (required only for macOS or Linux users): $ brew update
$ brew install watchman Next, we install Expo or check if already installed npm install -g expo-cli Now we're ready to set up our Boilerplate, to proceed you will need to clone the repository: git clone https://github.com/LucidSamuel/solana-wallet.git After cloning the repository, install the essential dependencies on the directory: cd solana-wallet    // the folder directory
yarn install Then lastly, run Expo expo web You should see something like this on your terminal: To complete the process, press as instructed in your Terminal to open the server on your web browser, you should see a screen like this on your browser: w Now that everything is set up and the server is up and running, it's time to commence work on the wallet app. While following this tutorial, make sure not to close the Terminal and always keep Expo running. Connecting to the Solana Network Contrary to other blockchains, where you may need to connect to RPCs or request API keys from third-party services, connecting to the Solana Network is simple and can be accomplished in a few steps. If you open the from the cloned repository, you'll notice that the imports and empty functions you'll need to implement have already been included: App.js import {
  Connection, // connection receives an endpoint argument containing the full node's URL.
  clusterApiUrl,
  Keypair,
  LAMPORTS_PER_SOL,
} from "@solana/web3.js"; We would be using , which is designed to serve as a sandbox for everyone interested in building in the test environment of the Solana Network where tokens are not real. devnet I've already defined the necessary functions; so all that remains is for you to implement them. To do that you would need to locate the function in your code and edit the commented code with the following code: createConnection const createConnection = () => {
  return new Connection(clusterApiUrl("devnet"));
}; Finally, we would call this function and print the following in the console to test if it's connected to the network: console.log(createConnection()); If everything works smoothly, you should see something like this in the console of your browser: 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,
   "…"
} Creating an Account An address is essential for communicating on the blockchain since it acts as a unique identifier as well as a digital point where cryptocurrency can be sent and received. To create an account, we must first generate a Keypair that includes both a secret and public key. You can find the necessary import for that here in the code: import {
  Connection,
  clusterApiUrl,
  Keypair,      // the keypair import
  LAMPORTS_PER_SOL,
} from "@solana/web3.js"; Next, 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. look for the function in our code and implement the following code: createAccount const createAccount = () => {
   const keypair = Keypair.generate();
   const initialBalance = 0;
   setAccount({ keypair: keypair, balance: 0 });
 }; The application should reload and you will be able to create new random accounts every time you click on the button “Create new account”. Get Balance of the Account To get the balance of an account you will need to look for the function in the code and implement it like this: getBalance const getBalance = async (publicKey) => {
 const connection = createConnection();

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

   return lamports / LAMPORTS_PER_SOL; // In the Solana Network, a lamport is the smallest unit: 1 SOL = 1 billion lamports.
 }; Request Airdrop Devnet tokens are not actual tokens. Solana Network allowed us to request tokens in order to conduct testing while developing our applications. Solana Web3 function accepts two parameters: requestAirdrop : PublicKey of the account : number of lamports to lamports For that, we will need to implement the empty function in our code like this: requestAirdrop 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 });
  }; Final Code Here's what our final code should look like: App.js https://gist.github.com/LucidSamuel/ce8e391a841b2c2c22d318c85a9e1fdd Conclusion We were able to successfully develop a Solana wallet-generating web application with basic capabilities. From here, you can proceed to build unique apps with more dynamic user interfaces.

Solana

Dapp

Facebook

2022 - HackerNoon Contributor of the Year - Debugging

2022 - HackerNoon Contributor of the Year - Monitoring

Visit my website

Nominated for 2022 - HackerNoon Contributor of the Year - Monitoring

Nominated for 2022 - HackerNoon Contributor of the Year - Debugging

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

Building a Solana Wallet Generator with React

Building a Solana Wallet Generator with React

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Samuel Akinosho

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building a Solana Wallet Generator with React

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Samuel Akinosho

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES