Cross-Platform Crypto Wallet with Web3.js and React

A cross-platform crypto wallet development with React and Web3.js requires multiple steps, ranging from configuring your development environment to using Web3.js to interact with the Ethereum blockchain or other EVM-compatible networks. Below is a general breakdown of the process:

Tools/Technologies Needed:

React: Used for developing the application's front-end.
Web3.js: Facilitates interaction with the Ethereum blockchain.
Node.js & npm: For managing dependencies and setting up the project structure.
Metamask (or another Web3 provider): To integrate user wallets.

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

Steps to Create a Crypto Wallet

Follow these steps in VS Code or any preferred editor.

1. Project Setup
```
npx create-react-app crossplatform-crypto-wallet
cd crossplatform-crypto-wallet
npm install web3
```
2. Create a connection with Ethereum using Web3.js

Install Web3.js in your crossplatform-crypto-wallet
```
npm install web3
```

Now let's initialize Web3.js, in your App.js file so that we can connect to a blockchain provider for eg. Metamask:

//Your react application src/app.js
import React, { useEffect, useState } from 'react';
import Web3 from 'web3';

import React, { useEffect, useState } from 'react';
import Web3 from 'web3';


 
function App() {
const [initializeWeb3, setWeb3] = useState(null);
const [account, setAccount] = useState('');


 
useEffect(() => {
// Checking if MetaMask is installed
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
setWeb3(web3);


 
// Request account access if needed
window.ethereum.enable()
.then(accounts => {
setAccount(accounts[0]);
})
.catch(error => {
console.error('User denied the request !', error);
});


 
} else {
console.error('MetaMask not found. Please install !');
}
}, []);


 
return (

Platform crypto Wallet 
{account ? (
Connected account: {account}
) : (
Please connect your wallet
)}

);
}


 
export default App;

3. Create a New Wallet (if a user has no wallet )

For users without a wallet, We can generate a new one using Web3.js:

const createWallet = () => {
  const wallet = web3.eth.accounts.create();
  console.log('Wallet Address:', wallet.address);
  console.log('User Private Key:', wallet.privateKey);
  return wallet;
};

4. Send and Receive Transactions from the wallet

To create a transaction or interact with a wallet . We need to integrate some methods to perform these operations

Create a utils file with the name utils.js where we will create and export web3 methods

export const sendTransaction = async (from, to, amount) => {
  const transaction = {
    from: from,
    to: to,
    value: web3.utils.toWei(amount, 'ether'),
  };

  try {
    const txHash = await web3.eth.sendTransaction(transaction);
    console.log('Transaction successful with hash:', txHash);
  } catch (error) {
    console.error('Transaction failed:', error);
  }
};

Now to see things in action. Create a component with the name sendEth.js.

export default function SendInput() {
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('');

  const handleSend = () => {
    sendTransaction(account, recipient, amount);
  };

  return (
    
      Send Ether
       setRecipient(e.target.value)}
        placeholder='Recipient address'
      />
       setAmount(e.target.value)}
        placeholder='Amount'
      />
      
    
  );
}

And import it into your app.js

import React, { useEffect, useState } from 'react';
import Web3 from 'web3';
import SendInput from '../components'

function App() {
  const [initializeWeb3, setWeb3] = useState(null);
  const [account, setAccount] = useState('');

  useEffect(() => {
    // Checking  if MetaMask is installed
    if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      setWeb3(web3);
      // Request account access if needed
      window.ethereum.enable()
        .then(accounts => {
          setAccount(accounts[0]);
        })
        .catch(error => {
          console.error('User denied the request !', error);
        });
    } else {
      console.error('MetaMask not found. Please install !');
    }
  }, []);

  return (
    
      Platform crypto Wallet 
      {account ? (
        Connected account: {account}
      ) : (
        Please connect your wallet
      )}
      
    
  );
}

export default App;

Add get balance function in your utils.js file

export const getBalance = async (address) => {
  const balance = await web3.eth.getBalance(address);
  return web3.utils.fromWei(balance, 'ether');
};

Also, Read | How to Build a Real-Time Wallet Tracker

And use it in your app.js to fetch wallet balance

import React, { useEffect, useState } from 'react';
import Web3 from 'web3';
import SendInput from '../components'

function App() {
  const [initializeWeb3, setWeb3] = useState(null);
  const [account, setAccount] = useState('');

  useEffect(() => {
    // Checking  if MetaMask is installed

    if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      setWeb3(web3);

      // Request account access if needed
      window.ethereum.enable()
        .then(accounts => {
          setAccount(accounts[0]);
        })
        .catch(error => {
          console.error('User denied the request !', error);
        });
    } else {
      console.error('MetaMask not found. Please install !');
    }
  }, []);
  useEffect(() => {
    if (account) {
      getBalance(account).then(balance => {
        console.log('Balance:', balance);
      });
    }
  }, [account]);

  return (
    
      Platform crypto Wallet 
      {account ? (
        Connected account: {account}
      ) : (
        Please connect your wallet
      )}
      
    
  );
}

export default App;

Also, Check | Create an Externally Owned Wallet using Web3J and Spring Boot

Conclusion

In summary, building a cross-platform crypto wallet with Web3.js and React enables the creation of secure, accessible, and user-friendly blockchain applications. This approach ensures a seamless user experience across devices, promoting wider engagement and innovation in the crypto space. For more about crypto wallet development, connect with our crypto wallet developers.