Web3 Wallet Extension

Here I used the ReactJs+vite to build a web3 wallet extension. This extension is a simple wallet that allows you to create a new wallet, import an existing wallet, and send transactions.

• dev 1: https://web3-wallet-extension.vercel.app
• dev 2: https://web3-wallet.devarif.me
• doc: https://web3-wallet.devarif.me/doc.pdf

Features

• Create a new wallet
• Import an existing wallet
• View wallet balance
• Send transactions
• View transaction history
• Logout (clear wallet data from local storage)

Local storage is used to store the wallet data. So, if you clear the local storage, you will lose your wallet data.

---

Local storage is not secure. Do not use local storage to store sensitive data. Use cookies or secure storage instead.

Tech Stack

• ReactJs (with typescript)
• Vite
• Tailwind CSS
• Ethers.js v6
• Amoy polygon network
• Alchemy API (for polygon network rpc)
• PolygonScan API (for address balance and transaction history)

Run Locally

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:5173 with your browser to see the result.

Load the Extension into Chrome

1. Open Chrome and navigate to chrome://extensions/
2. Enable Developer mode by toggling the switch in the top-right corner.
3. Click Load unpacked and select the out folder generated by the build process.

Test Your Extension: You should see your extension in the Chrome toolbar. Clicking on it should display our output.

Demo accounts

• Account1 (created here)
  • Address: 0x042331667E5b2723688570DF3ceF900032bff9D5
  • Your 12 Phrase Mnemonic: harbor concert spring gun remember replace boil depart concert rather ice fragile
  • Private Key: 0x819148df03587ba6b4c2135fbd68e3bea50bb116bb51feedde595ea7744ae61b
• Account2 (metamask)
  • Address: 0xC541CBBD2d82cc44b38AE5ff7415fE63D0eCDe50
  • Your 12 Phrase Mnemonic: tube ensure egg popular trust dumb lucky collect major burden hidden empower
  • Private Key: 0x7a960b5e35ea0f64271d32957e1d24d27d1e1f7f235f840f0763f1c85b2fbddb

Amoy faucet

• https://faucet.polygon.technology/
• https://www.alchemy.com/faucets/polygon-amoy
• https://faucets.chain.link/polygon-amoy

Screenshots

Contact

• Name: Md Arif Hossain
• Email: devarif.me@gmail.com
• LinkedIn: devarif