How to create a Stellar wallet?

For creating a Stellar Wallet, we will need the StenciljS toolchain. Stenciljs provides one of the best frameworks, which are modern frontend and puts everything to its effective position quickly and completely based on standardized web components that put up with every web browser. It helps create a convenient way of making web applications allowing you to view all the entries and exits of making a Stellar Wallet from the beginning to end.

Step 1 — Setting Up Project

We will start with the project setup. For this, we will open a terminal and start initializing a new project. For choosing the type of project, a prompt will appear on the screen. Continue by choosing the components as per the modular components. Then run it. This will initialize a script of component generation. Then Stellar-wallet. Use SCSS instead of CSS for styling. Go to stencil.config.ts and modify it after the style packages have been installed. Then save all style files followed by updating wallet.tsx.

Step 2 — Popup Modal Creation

For the creation of the popup modal and the new component, the prompt functionality of the browser will be implemented. Start with generating a new component. Assign the name of stellar-prompter to it. Change the .css file to .scss. after opening src/components/prompt/ . Write in that particular style file. After that, the content of the prompt. tsx will have to be replaced. Before we move ahead, we must make sure that we import the lodash-es.

Step 3 — Creation of Stellar Account Class

Stellar Account can be described as the class that permits the inclusion of the public key. We will start by setting up an account state along with the Stellar Account class. Will do the same with the prompter class and prompter state. After doing this, the imported events and methods’ assignment has to be done. After the componentWillLoad prefills values props and state before it renders the component. Next, add to src/services directory after creating two files, and then the error.ts will hold, which is a normal error handler during the process of API requests.

Step 4 — Key Storage Setup

Start with modifying the storage.ts. Then install and start setting up the new package as @capacitor/core. Initialize the capacitor project, and then the capacitor project is ready to get launched.

Step 5 — Event Handling Setup

Continue with the setting up an event handling. This process is about rendering a normal .tsx file rendering out DOM based on a series of conditional values.

Step 6 — Methods Creation

In ./methods/createAccount.ts file:

import sjcl from “@tinyanvil/sjcl”;
import { Keypair } from “stellar-sdk”;
import { handleError } from “@services/error”;
import { set } from “@services/storage”;
export default async function createAccount(e: Event) {
try {
e.preventDefault();
const pincode_1 = await this.setPrompt(“Enter a keystore pincode”);
const pincode_2 = await this.setPrompt(“Enter keystore pincode again”);
if (!pincode_1 || !pincode_2 || pincode_1 !== pincode_2)
throw “Invalid pincode”;
this.error = null;
const keypair = Keypair.random();
this.account = {
publicKey: keypair.publicKey(),
keystore: sjcl.encrypt(pincode_1, keypair.secret(), {
adata: JSON.stringify({
publicKey: keypair.publicKey(),
}),
}),
};
await set(“keyStore”, btoa(this.account.keystore));
} catch (err) {
this.error = handleError(err);
}
}

Step 7 — Account Creation

All the above steps were done to trigger a prompt modal that will request a pin code. Now will be creating an account finally.

Step 8 — Copying Address and Secret

We will now copy the address and secret followed by Signing out and Setting a prompt.

In ./methods/copyAddress.ts :

import copy from “copy-to-clipboard”;
export default async function copyAddress(e: Event) {
e.preventDefault();
copy(this.account.publicKey);
}

npm i -D copy-to-clipboard

Step 9 — Signing Out and Setting a Prompt

We will finally give the command of signing out,

./methods/signOut.ts

And lastly, the prompt will be set up in the wallet.ts file

is ./methods/setPrompt.ts.

The Stellar blockchain development is rising tremendously based on its built-in books of order, distinct consensus protocol, and connection to the existing financial infrastructure. It has multiple advantages like speedy transaction, reach on an international scale, asset exchange on a universal level, etc. Stellar therefore aims to become the epitome of a standardized method and a blockchain platform for transferring money.

Join Coinmonks Telegram Channel and learn about crypto trading and investing

Also, Read

• Crypto exchanges in India | Bitcoin Savings Account | HitBTC Review
• Binance Fees | Botcrypto Review | Hotbit Review | KuCoin Review
• My Experience with Crypto Copy Trading | AAX Exchange Review
• Bybit Margin Trading | Binance Margin Trading | Overbit Review
• Cryptocurrency Savings Accounts | YoBit Review | Bitbns Review
• Botsfolio vs Napbots vs Mudrex | Gate.io Exchange Review