What is a Mnemonic Phrase?

A mnemonic phrase, also known as a seed phrase or recovery phrase, is a sequence of words that represents a wallet's private keys. It is a human-readable way to store and recover your cryptocurrency wallet.

Mnemonic phrases are generated using a standard called BIP-39 (Bitcoin Improvement Proposal 39). They allow you to derive multiple wallets from a single phrase using a derivation path.

Deriving a Wallet from a Mnemonic in Ethers.js

You can derive a wallet from a mnemonic phrase in Ethers.js using a specific derivation path. The standard derivation path for Ethereum is m/44'/60'/0'/0, where:

  • 44' - Indicates that this is a BIP-44 wallet.
  • 60' - Indicates that this is for Ethereum.
  • 0' - Refers to the first account.
  • 0 - Refers to the address index.

1. Set Up Your Project

If you haven't set up an Ethers.js project yet, you can follow these steps: 

mkdir ethers-derive-wallet-project
cd ethers-derive-wallet-project
npm init -y
npm install ethers

2. Create an HTML File

Create an index.html file in your project directory. You can use the following code as a starting point: 

<!DOCTYPE html>
<html lang=`en`>
<head>
    <meta charset=`UTF-8`>
    <meta name=`viewport` content=`width=device-width, initial-scale=1.0`>
    <title>Derive Wallet from Mnemonic with Ethers.js</title>
    <script src=`https://cdn.jsdelivr.net/npm/ethers@5.7.0/dist/ethers.umd.min.js`></script>
</head>
<body>
    <h1>Derive Wallet from Mnemonic Phrase</h1>
    <input type=`text` id=`mnemonic` placeholder=`Enter your mnemonic phrase` />
    <input type=`text` id=`index` placeholder=`Enter address index (default: 0)` value=`0` />
    <button id=`deriveWalletButton`>Derive Wallet</button>
    <pre id=`walletInfo`>

<script>
document.getElementById('deriveWalletButton').onclick = () => {
const mnemonic = document.getElementById('mnemonic').value;
const index = document.getElementById('index').value || 0;
try {
// Create a wallet from the mnemonic phrase
const wallet = ethers.Wallet.fromMnemonic(mnemonic, `m/44'/60'/0'/0/${index}`);

// Display the wallet address
document.getElementById('walletInfo').innerText =
'Address: ' + wallet.address;
} catch (error) {
document.getElement .getElementById('walletInfo').innerText =
'Error: ' + error.message;
}
};
</script>
</body>
</html>

3. Run a Local Server

To view your project in a browser, you’ll need to serve it over a local server. You can use a simple server like http-server. First, install it globally if you haven't already: 

npm install -g http-server

Then, run the server in your project directory: 

http-server

Open your web browser and navigate to http://localhost:8080 (or the port displayed in your terminal).

How It Works

In the provided code, when you enter your mnemonic phrase and an optional address index, and click the `Derive Wallet` button, the following happens:

  • The mnemonic phrase and index are retrieved from the input fields.
  • A new wallet is derived using ethers.Wallet.fromMnemonic(mnemonic, `m/44'/60'/0'/0/${index}`).
  • The derived wallet's address is displayed on the page.
  • If the mnemonic phrase is invalid or any error occurs, an error message is shown instead.

Conclusion

You have successfully learned how to derive a wallet from a mnemonic phrase using Ethers.js! This allows you to access multiple wallets from a single mnemonic phrase. Always ensure that your mnemonic phrase is kept secure and never shared with anyone, as it can be used to access your wallet and funds.