Your example worked however Iām facing additional problems in my codeā¦
Ever since I tried to return the address with: let result = await window.ethereum.request({method: āeth_accountsā}) my project has been crashing atleast every 60 seconds (my computer has froze twice too)ā¦ instead I tried to use: window.ethereum.selectedAddress and that was causing rendering issues as well.
Also my function for returning āMetamaskā as the provider isnāt working even though I followed your example
import React, { useEffect, useState } from "react";
import "./Wallet.css";
import { Button } from "react-bootstrap";
import { useMoralisWeb3Api } from "react-moralis";
const Wallet = () => {
const Moralis = require('moralis')
const web3 = async () =>{ await Moralis.enable()}
const [nativeBalance, setNativeBalance] = useState();
const [metamaskButton, setMetamaskButton] = useState(() => {return(<Button className="meta" onClick={web3}>Metamask</Button>)});
const [nativeAddress, setNativeAddress] = useState('');
const [nativeProvider, setNativeProvider] = useState('');
const Web3Api = useMoralisWeb3Api();
const fetchBalance = async () => {
let result = await Web3Api.account.getNativeBalance({ address: "0xAb97Bf09F0F404f9dc271314bb09Dd0f097C990A"});
result = result.balance;
setNativeBalance(result);
};
const fetchAddress = async () => {
if (window.ethereum._state.accounts > [""]) {
let result = await window.ethereum.request({method: 'eth_accounts'});
setNativeAddress(result);
}};
const fetchProvide = () => {
if (window.ethereum.isMetamask) {
let result = 'MetaMask';
setNativeProvider(result);
}};
const whichbutton = () => {
if (window.ethereum._state.accounts > [""]) {
setMetamaskButton(() =>{return(<Button variant="danger">Disconnect</Button>)})
}
};
useEffect(() => {
whichbutton();
fetchBalance();
fetchAddress();
fetchProvide()
});
return (
<div className="wallet-page">
<h1 className="main-card-title">Wallet: </h1>
<div className="walletmaincard">
<div className="walletdiv">
<div className="wallet-card">
<h4>Current Wallet: </h4>
<ul>
<li>Provider: {nativeProvider} </li>
<li><div className='addydiv'><div className='yaya'>Address: </div><div className='theaddydiv'><i class="fab fa-ethereum" size='xs'></i>{nativeAddress}</div></div></li>
<li>Balance: {nativeBalance}</li>
<div className="gap-2">
<li>
<Button variant="dark" size="lg">
<span>Token Switch</span>
</Button>
</li>
<li>{metamaskButton}</li>
</div>
</ul>
</div>
</div>
</div>
</div>
);
};
export default Wallet;