Develop a Multi-Token Crypto Wallet for Ethereum with Web3.js

What is a Multi-Token Crypto Wallet?

A multi-token wallet created using crypto wallet development services lets users hold and manage various Ethereum-based tokens (like ERC-20 tokens) all in one place. Instead of separate wallets for each token, a multi-token wallet displays balances, lets users transfer tokens, and connects with the Ethereum blockchain for real-time data.

To interact with Ethereum, you'll need Web3.js. If you're using Node.js, install it with:

npm install web3

we'll use an Infura endpoint (a popular service for Ethereum APIs).

const Web3 = require('web3');

const web3 = new Web3('https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID');

Step 1: Create a Wallet Address

const account = web3.eth.accounts.create();

To use an existing wallet, you can import the private key:

const account = web3.eth.accounts.privateKeyToAccount('YOUR_PRIVATE_KEY');

Step 2: Connect ERC-20 Tokens

To interact with an ERC-20 token, use its contract address and ABI.

const tokenAbi = [ 
// ERC-20 balanceOf function 
{ 'constant': true,
'inputs': [{'name': '_owner', 'type': 'address'}],
'name': 'balanceOf',
'outputs': [{'name': 'balance', 'type': 'uint256'}],
'type': 'function' },
// ERC-20 decimals function
{ 
'constant': true,
'inputs': [],
'name': 'decimals',
'outputs': [{'name': '', 'type': 'uint8'}],
'type': 'function'
}
];
const tokenAddress = 'TOKEN_CONTRACT_ADDRESS';
const tokenContract = new web3.eth.Contract(tokenAbi, tokenAddress);

Also, Read | How to Build a Multi-Chain Account Abstraction Wallet

Step 3: Check Token Balances

To display token balances, call the token's balanceOf function with the user's address:

async function getTokenBalance(walletAddress) {
const balance = await tokenContract.methods.balanceOf(walletAddress).call();
const decimals = await tokenContract.methods.decimals().call();
return balance / Math.pow(10, decimals);
}
getTokenBalance(account.address).then(console.log);

Step 4: Transfer Tokens

Sending tokens is similar to checking balances. However, this requires a signed transaction with the user's private key.

async function transferTokens(toAddress, amount) {
   const decimals = await tokenContract.methods.decimals().call();
   const adjustedAmount = amount * Math.pow(10, decimals);
   const tx = {
       from: account.address,
       to: tokenAddress,
       gas: 200000,
       data: tokenContract.methods.transfer(toAddress, adjustedAmount).encodeABI()
   };
   const signedTx = await web3.eth.accounts.signTransaction(tx, account.privateKey);
   return web3.eth.sendSignedTransaction(signedTx.rawTransaction);
}
transferTokens('RECIPIENT_ADDRESS', 1).then(console.log);

Also, Read | ERC 4337 : Account Abstraction for Ethereum Smart Contract Wallets

Step 5: Viewing ETH Balance

A multi-token wallet should also show the ETH balance. Use Web3's getBalance function to retrieve it:

async function getEthBalance(walletAddress) {
   const balance = await web3.eth.getBalance(walletAddress);
   return web3.utils.fromWei(balance, 'ether');
}
getEthBalance(account.address).then(console.log);

Conclusion

Building a multi-token crypto wallet with Web3.js is straightforward, allowing you to manage ETH and various ERC-20 tokens in one interface. With Web3's tools, you can create a secure, decentralized wallet that handles multiple tokens, enabling users to view balances, make transfers, and more. If you are to build an advanced crypto wallet, connect with our crypto wallet developers for a thorough consultation and get started.