I will teach you how to create a button that will interact with MetaMask to let the user connect their wallet on your app.
npx create-react-app wallet-connect
cd wallet-connect
Check the react-scripts version in package.json, the version need to be 4.0.3 to be compatible with web3.js
Run this command line to install everything we need :
yarn add web3 react-bootstrap bootstrap react-bootstrap-icons
add this line in index.js :
import 'bootstrap/dist/css/bootstrap.css';
Final App.js file :
import React from 'react';
import Web3 from "web3";
import { Button } from 'react-bootstrap';
import { Wallet } from 'react-bootstrap-icons';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
web3: null,
currentAccount: null,
ethBalance: 0,
networkId: null
};
}
componentDidMount = async () => {
this.connectWalletHandler();
};
connectWalletHandler = async () => {
try {
const web3 = new Web3(Web3.givenProvider);
this.setState({ web3: web3});
const accounts = await web3.eth.requestAccounts();
if (accounts.length !== 0) {
const networkId = await web3.eth.net.getId();
const ethBalance = await web3.eth.getBalance(accounts[0]);
this.setState({currentAccount: accounts[0], ethBalance: Web3.utils.fromWei(ethBalance), networkId: networkId});
}
} catch (error) {
console.error(error);
}
}
connectedWallet = () => {
return (
<div>
<p>{parseFloat(this.state.ethBalance).toFixed(4)} ETH</p>
<p>{this.state.currentAccount.slice(0,5)+'...'+this.state.currentAccount.slice(38,42)}<br />WALLET CONNECTED</p>
</div>
)
}
connectWalletButton = () => {
return (
<Button variant="outline-primary" onClick={() => this.connectWalletHandler()}><Wallet /> Connect wallet</Button>
)
}
render() {
return (
<div className="App">
{this.state.currentAccount ? this.connectedWallet() : this.connectWalletButton()}
</div>
);
}
}
export default App;
Top comments (0)