Hi, I'm hoping someone might be able to resolve this...
I'm trying to build a Uniswap Clone with React & Tailwind CSS, and I have created a "Connect Wallet" button that triggers a MetaMask popup to connect wallet. Everything else seems to be working fine, but...
My issue is, when I fully refresh the web application page, my cursor pointer becomes disabled when I hover over the "Connect Wallet" button. Basically, my cursor stays at the default arrow pointer mode, doesn't change to cursor pointer, and I am unable to click the button.
Interestingly enough, when I refresh the page and quickly place my mouse over the Connect Wallet button, I am briefly able to click the button and open the the MetaMask Pop-up as usual. But, when the page is fully refreshed, the cursor goes back to the normal/default arrow pointer and I am unable to click the button.
Anybody have any idea of what might be causing this, and how I may be able to resolve it?
_PS: I tried to add "cursor-pointer" class to my button. I thought it would force the cursor to change to pointer on hover, but this didn't fix the problem. _
Here's my React code block for the button function:
const WalletButton = () => {
const [rendered, setRendered] = useState('');
const {ens} = useLookupAddress();
const {account, activateBrowserWallet, deactivate} = useEthers();
return (
<button
onClick={() => {
if (!account) {
activateBrowserWallet();
} else {
deactivate();
}
}}
className={styles.walletButton}
>
{rendered === "" && "Connect Wallet"}
{rendered !== "" && rendered}
</button>
);
};
export default WalletButton
And here is the tailwind css styles that are currently applied to the button:
// WalletButton
walletButton:
"bg-site-pink border-none outline-none px-6 py-2 font-poppins font-bold text-lg text-white rounded-3xl leading-[24px] hover:bg-pink-600 transition-all",
I hope I have given enough context and details. Any help or suggestions would be much appreciated. Thank you.
Top comments (0)