Build Your Own EVM-Based Wallet Today!

As web3 developers, we should be less concerned about the current state of the crypto market. Instead, we should focus on the emergence of new chains and layer solutions that are being introduced in the ecosystem. With the advent of these new technologies, we are witnessing a rise in interest in developers entering the web3 space, looking to contribute to the development of this exciting and rapidly growing industry.

Here's the complete demo for the 13x54r-wallet. And, GitHub contributions are much appreciated, here's the repo.

This blog is dedicated to those new developers and anyone exploring the web3 space. We understand that navigating other developers' code can be challenging, and we aim to provide clear and concise guidance.

---

Wallet Architecture

• Server-side: It means that the wallet is handled by the server, making it easier to implement. However, as the private keys are stored on the server, it is less secure than other options.

• Client-side: The wallet runs entirely in the user's browser, making them more secure as private keys are not shared with the server. However, they require advanced cryptography techniques and are more difficult to implement.

• Hybrid: They offer a good balance between security and simplicity. Private keys are stored on the client side, while other data is managed on the server side. This approach provides enhanced security compared to server-side wallets while being easier to implement than client-side wallets.

I want to clarify that in this explanation about web3 integrations, I will not be focusing much on the user interface, or security, or including a lot of features. Instead, I'll only focus on the basic functions required for a web3 wallet. Thus, we'll be choosing client-side wallet architecture.

---

Wallet Workflow

The application's user interface flow will rely on fundamental features such as the ability of a user to create or import an old wallet. This wallet will have a basic string-based authentication, with the password stored in browser storage. Additionally, the key pair associated with the wallet will also be stored in browser storage, but it is important to note that this setup is not suitable for production as it lacks sufficient security layers.

To address this issue, a future article in the same series will be dedicated to exploring ways to enhance the security of the custom wallet. Moving on to the current feature set, the wallet will have basic functionalities such as sending and receiving funds, as well as a secure send feature. Furthermore, the transaction history will be available on the dashboard to provide users with an overview of their wallet's activity.

---

Wallet Authentication

According to our user flow, we have checked if the key pair is stored in the local storage or not. However, we want to make it clear that this is just for educational purposes and should not be used in production as it can compromise security.

Here is the code that we used to check if the key pair exists in the local storage:

If the user has already registered and has a key pair stored, then they will be taken to the dashboard. Otherwise, a new wallet will be created or an existing one will be imported using the Ethers.js library.

Here is the code that handles importing or creating a wallet:

---

Dashboard

As previously mentioned, this is a stripped-down version of the wallet, and as such, I opted out of including a transaction history feature. However, this feature can be added by anyone who wishes to contribute to the project. Adding transaction history is a relatively straightforward process that requires an API key for either Alchemy or Etherscan. Since this is a developer network called "Sepolia", I recommend using the free versions of Alchemy or Infura. Once you have the API key, you can map the data for the transaction history.

---

Sending Transaction

To implement the function for sending Ether or other ERC20 tokens, you can follow these steps. First, navigate to the "Send" page on the wallet dashboard. Here, you can enter the recipient's public address and the amount of Ether or ERC20 tokens you wish to send. Then, click the "Send" button to initiate the transaction.

As for receiving Ether or ERC20 tokens, you don't need to do anything other than provide your public address, which is already displayed on the dashboard. However, if you'd like to contribute to the project, you can add a feature that displays a QR code for your public address. To implement this feature, you can use a text-to-QR code API.

---

Summary

This article discusses basic wallet architecture, workflow and authentication for educational purposes to help new web3 developers. A client-side wallet is chosen due to its higher security.

The wallet has basic features like creating, importing and sending/receiving funds. The private key is stored in browser storage for simplicity but this is not suitable for production due to security risks.

Wallet authentication checks if a key pair exists in local storage. Importing or creating a wallet is done using the Ethers.js library.

A transaction history feature is omitted for simplicity. This feature can be added later using an API key from a provider like Alchemy or Infura.

To send transactions, the recipient's address and amount are entered. Clicking "Send" initiates the transaction. Receiving funds only requires providing your public address displayed on the dashboard.

In summary, the article demonstrates basic wallet concepts to help new web3 developers get started while acknowledging the security limitations of the example code for educational purposes only.