full-width
Connect Metamask Wallet With Ethers JS
import { useEffect, useRef, useState } from 'react'
import { providers } from "ethers";
import Web3Modal from "web3modal";
import './App.css'
import Button from './components/Button'
function App() {
const web3ModalRef = useRef();
const [connected, setConnected] = useState(false);
const [walletId, setWalletId] = useState('');
//connect wallet
const connectWallet = async() => {
try {
const wallet = await getProviderOrSigner();
setWalletId(wallet.selectedAddress.slice(0,7))
setConnected(true);
} catch (error) {
console.error(error);
}
}
// Get Provider or Signer
const getProviderOrSigner = async (needSigner = false) => {
//Provider for connect metamask wallet
const provider = await web3ModalRef.current.connect();
const web3Provider = new providers.Web3Provider(provider);
// If user not connect to right network then switch to right network
const { chainId } = await web3Provider.getNetwork();
if (chainId !== 4) {
alert("Please Switch to Rinkeby Network");
throw new Error("Incorrect Network");
}
// Signer for read and write data on blockchain
if (needSigner) {
const signer = web3Provider.getSigner();
return signer;
}
return provider; // return provider if not need signer
};
useEffect(() => {
if (!connected) {
web3ModalRef.current = new Web3Modal({
network: "rinkeby",
providerOptions: {},
disableInjectedProvider: false,
});
connectWallet();
}
}, [])
return (
<>
{
!connected ? <Button btnName="Connect Wallet"/> : <Button btnName={`Wallet : ${walletId}`}/>
}
</>
)
}
export default App
