DEV Community

Cover image for How To Build an Ethereum wallet?
Block Experts
Block Experts

Posted on β€’ Edited on

3 3 3 3 2

How To Build an Ethereum wallet?

Building an Ethereum Wallet App with Expo and TypeScript

In this guide, we'll walk through the creation of an Ethereum wallet app using Expo, TypeScript, and the ethers.js library. We'll focus on generating a mnemonic, accessing an Ethereum address, and checking balances from the blockchain, inspired by the X-Wallet example, which leverages Domain-Driven Design (DDD) principles.

Understanding Ethereum Wallets

Ethereum wallets serve as gateways to interact with the Ethereum blockchain, allowing users to manage their Ether (ETH) and other tokens. They come in various forms:

  • Hot Wallets: These are software or online wallets (like MetaMask) that offer convenience at the cost of security.
  • Cold Wallets: Physical or hardware wallets (like Ledger or Trezor) provide enhanced security since they are not connected to the internet when not in use.

Key Concepts:

  • Private Key: Used to sign transactions and prove ownership of cryptocurrencies.
  • Public Key: Generated from the private key, used for receiving ETH.
  • Address: Derived from the public key, an address where ETH can be sent.

πŸ›  Prerequisites and Setup

Software Requirements:

  • Node.js: Installed on your development machine.
  • Expo CLI: Install globally via npm install -g expo-cli.
  • React Native: Familiarity is beneficial, though not mandatory for this guide.
  • TypeScript: Ensure your Expo project supports TypeScript.

Installation Commands:

expo init ethereum-wallet-app --template expo-template-blank-typescript
cd ethereum-wallet-app
npm install ethers react-native-get-random-values @ethersproject/shims @dawar2151/bip39-expo
Enter fullscreen mode Exit fullscreen mode

πŸš€ Step 1: Initialize Your Expo Project
Begin by setting up a new Expo project with TypeScript:

bash
expo init ethereum-wallet-app --template expo-template-blank-typescript
cd ethereum-wallet-app
expo start

πŸ” Step 2: Wallet Management Services
Create WalletService.ts for handling wallet operations:

import 'react-native-get-random-values';
import '@ethersproject/shims';
import { Wallet, JsonRpcProvider, Contract, BigNumberish } from 'ethers';
import { hdkey } from 'ethereumjs-wallet';
import Bip39 from '@dawar2151/bip39-expo';
import { ERC20_ABI, PATH_DERIVE } from '@x/global/config/constants'; // Assuming these constants exist
import { NETWORKS, ANKR_KEY, INFURA_SECRET } from '@/global/constants'; // Assuming these are defined elsewhere
import { type Token } from '@/domain/tickers/models/token'; // Assuming this type is defined
import { type Network } from '@/global/types.constants'; // Assuming this type is defined

// Generate a new mnemonic
export const generateNewMnemonic = async (): Promise<string> => Bip39.generateMnemonic();

// Derive wallet from mnemonic
export async function getWallet(phrase: string, currentNetwork: Network): Promise<Wallet> {
  const seed = await Bip39.mnemonicToSeed(phrase);
  const hdwallet = hdkey.fromMasterSeed(seed);
  const wallet = hdwallet.derivePath(PATH_DERIVE).getWallet();
  return new Wallet(wallet.getPrivateKeyString(), getProvider(currentNetwork));
}

// Fetch native token balance
export const getNativeTokenBalance = async (
  currentNetwork: Network,
  account: string
): Promise<BigNumberish> => {
  const provider = getProvider(currentNetwork);
  return provider.getBalance(account);
};

// Fetch ERC20 token balance
export const getTokenBalance = async (
  currentNetwork: Network,
  tokenAddress: string,
  account: string
): Promise<BigNumberish> => {
  const provider = getProvider(currentNetwork);
  const contract = new Contract(tokenAddress, ERC20_ABI, provider);
  return contract.balanceOf(account);
};

// Select provider based on network
export function getProvider(currentNetwork: Network = 'sepolia'): JsonRpcProvider {
  switch (currentNetwork) {
    case NETWORKS.bsc:
      return new JsonRpcProvider(`https://rpc.ankr.com/bsc/${ANKR_KEY}`);
    case NETWORKS.base:
      return new JsonRpcProvider(`https://rpc.ankr.com/base/${ANKR_KEY}`);
    default:
      return new JsonRpcProvider(`https://${currentNetwork}.infura.io/v3/${INFURA_SECRET}`);
  }
}

// Get balance for supported tokens
export async function getBalance(
  tokenId: string,
  supportedTokens: { [key: string]: Token },
  currentNetwork: Network,
  currentAddress: string
): Promise<BigNumberish> {
  const token = supportedTokens[tokenId];
  if (token.isNative) {
    return getNativeTokenBalance(currentNetwork, currentAddress);
  } else {
    return getTokenBalance(currentNetwork, token.address, currentAddress);
  }
}
Enter fullscreen mode Exit fullscreen mode

πŸ“² Step 3: Crafting the User Interface
Update Wallet.tsx for basic wallet functionalities:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import XButton from '@x/global/components/X/XButton';
import { useSelector, useDispatch } from 'react-redux';
import { generatePhrase, setUpWallet } from '@x/wallets/XReducer';
import { removeValue, saveValue } from '../../../infra/secureStorage';
import { XContainer } from '@x/global/components/styled/Container';
import { generateNewMnemonic } from '../../../infra/helpers';
import { type AppDispatch, type RootState } from '@x/global/state/store';
import { XActivityIndicator } from '@/global/components/X/XActiveIndicator';
import { Routes } from '@/global/navigation/RouteNames';
import { PHRASE_KEY } from '../constants';
import { useNavigation } from '@react-navigation/native';
import XLogo from '@/domain/authorizations/components/XLogo';
import { useXWalletHelper } from '../hooks/useXWalletHelper';

export function Wallet(): JSX.Element {
  const navigation = useNavigation();
  const loading = useSelector((state: RootState) => state.x.loading);
  const { setLocalLoading } = useXWalletHelper();
  const dispatch = useDispatch<AppDispatch>();

  const generateMnemonic = async () => {
    setLocalLoading();
    try {
      const phrase = await generateNewMnemonic();
      await saveValue(PHRASE_KEY, phrase);
      await removeValue('password');
      dispatch(generatePhrase(phrase));
      dispatch(setUpWallet({ phrase }));
      setLocalLoading();
      navigation.navigate(Routes.DEFINE_PASSWORD as never);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <XContainer>
      {!loading ? (
        <View style={styles.walletContainer}>
          <XLogo />
          <XButton onPress={generateMnemonic} title="Generate new seed phrase" icon="wallet" />
          <XButton icon="import" onPress={() => navigation.navigate(Routes.IMPORT_MNEMONIC as never)} title="Import existing seed phrase" />
        </View>
      ) : (
        <XActivityIndicator />
      )}
    </XContainer>
  );
}

const styles = StyleSheet.create({
  walletContainer: { marginHorizontal: 50, gap: 20 },
});
Enter fullscreen mode Exit fullscreen mode


`

πŸ”‘ Key Features of X-Wallet

  • Token Distribution: Bulk sending of native and ERC20 tokens with optimized gas fees.
  • Wallet Management: Create, import, and export wallets using BIP-39 mnemonics.
  • Network Switching: Support for various networks including testnets.
  • User Interface: Balance display, QR code address sharing, and transaction history.
  • Security: Password-protected access, enhanced gas settings, and token swapping.

πŸ”— Accessing Full Source Code

For the complete implementation of X-Wallet with advanced features, you can explore CodeCrayon

This guide provides a foundation for building your own Ethereum wallet app. Happy coding! πŸš€

🌟 Useful Tools for Blockchain Users


Billboard image

Monitoring as code

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (1)

Collapse
 
steph_john_40744dd profile image
Steph John β€’

I used the x-wallet as a wallet boilerplate ethereum, the code is well designed with domain driven design which make really easy to understand by any one even if you're not developer.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay