Deveab Blog

Creating a Basic Ethereum Wallet App with Ethers.js and SolidJS

Written by

deveab

in

In this guide, we’ll walk through building a secure Ethereum wallet application using Ethers.js and SolidJS. This project will enable users to generate wallet mnemonics, view balances, and send transactions – perfect for developers looking to understand blockchain integration in modern web apps.

Understanding Ethereum Wallet Fundamentals

Mnemonic Phrases Explained

A mnemonic phrase (or seed phrase) is a critical security element in cryptocurrency wallets. These 12-24 randomly generated words serve as:

  • A human-readable backup of your wallet
  • The root for generating cryptographic keys
  • A recovery method if your wallet becomes inaccessible

👉 Learn more about wallet security best practices

Why Ethers.js and SolidJS?

Ethers.js offers:

  • Comprehensive Ethereum blockchain interaction
  • Secure key management
  • Simplified transaction handling

SolidJS provides:

  • Exceptional performance
  • Reactive state management
  • TypeScript support

Project Setup and Configuration

Initializing the SolidJS Project

Begin by creating a new SolidJS TypeScript project using Vite:

bash
npm create vite@latest my-wallet -- --template solid-ts

This command scaffolds a new project with:

  • TypeScript configuration
  • SolidJS core dependencies
  • Vite build system

Installing Essential Dependencies

Install the required packages:

bash
npm i ethers crypto-js

These provide:

  • ethers: Blockchain interaction
  • crypto-js: Encryption utilities

Building the Wallet Core Functionality

Wallet Creation Flow

“`typescript
import { createSignal } from ‘solid-js’;
import { Wallet, HDNodeWallet } from ‘ethers’;

function App() {
const [step, setStep] = createSignal(1);
const [password, setPassword] = createSignal(”);
const [phrase, setPhrase] = createSignal(”);
const [wallet, setWallet] = createSignal(null);

return (

Ethereum Wallet App

{step() === 1 && (

setPassword(e.target.value)}
/>

)}

);
}
“`

Secure Key Management

“`typescript
const createWallet = () => {
const mnemonic = Wallet.createRandom().mnemonic;
setPhrase(mnemonic.phrase);

const wallet = HDNodeWallet.fromMnemonic(mnemonic!);
wallet.connect(provider);
setWallet(wallet);

encryptAndStorePrivateKey();
setStep(2);
};

const encryptAndStorePrivateKey = () => {
const encryptedPrivateKey = CryptoJS.AES.encrypt(
wallet()!.privateKey,
password()
).toString();

localStorage.setItem(‘encryptedPrivateKey’, encryptedPrivateKey);
};
“`

👉 Explore advanced encryption techniques

Implementing Wallet Operations

Transaction Handling

“`typescript
const transfer = async () => {
try {
const transaction = await wallet().sendTransaction({
to: recipientAddress(),
value: parseEther(amount()),
});

setEtherscanLink(
  `https://sepolia.etherscan.io/tx/${transaction.hash}`
);

} catch (error) {
console.error(‘Transaction error:’, error);
}
};
“`

Wallet Recovery System

“`typescript
const loadWallet = async () => {
const bytes = CryptoJS.AES.decrypt(key!, password());
const privateKey = bytes.toString(CryptoJS.enc.Utf8);

const wallet = new Wallet(privateKey, provider);
setWallet(wallet);

const balance = await wallet.provider.getBalance(wallet.address);
setBalance(formatEther(balance!));
setStep(3);
};
“`

Enhancing the User Experience

UI Component Structure

Component Functionality
Password Input Secure wallet access
Phrase Display Backup instructions
Balance Viewer Real-time ETH balance
Transfer Form Transaction creation
Transaction Log History with Etherscan links

Security Considerations

  1. Always use HTTPS connections
  2. Implement proper password hashing
  3. Never expose private keys in client-side code
  4. Use environment variables for API keys
  5. Consider hardware wallet integration for production

Frequently Asked Questions

Is this wallet as secure as MetaMask?

While this demonstrates core concepts, MetaMask has additional security layers and audits. For production use, consider established solutions or extensive security testing.

Can I deploy this to mainnet?

Technically yes, but we recommend using testnets like Sepolia for development due to the irreversible nature of mainnet transactions.

How do I add token support?

You would need to:
1. Add ERC-20 contract interfaces
2. Implement token balance checking
3. Create token transfer methods

What’s the best way to store mnemonics?

Never digitally. Write on paper and store securely. Consider metal backups for long-term storage.

Can I make this a browser extension?

Yes! The Chrome Extension API can wrap this functionality with some additional permissions.

How do I handle different networks?

Ethers.js supports network switching via:

typescript
const provider = new JsonRpcProvider(NETWORK_URL);
wallet.connect(provider);

Next Steps for Development

  1. Implement multi-chain support
  2. Add transaction history
  3. Create a proper session management system
  4. Develop browser extension packaging
  5. Add hardware wallet integration

Remember, blockchain development carries significant responsibility. Always prioritize security and thoroughly test all functionality before deployment.

More posts