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"></pre>
    <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 44'1 (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 44'2.
  • 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.