Why is my cursor pointer disabled on

C S — Fri, 10 Feb 2023 09:52:33 +0000

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.

DEV Community: C S

Why is my cursor pointer disabled on after refresh? | React App

Why is my cursor pointer disabled on