1

I'm trying to build an 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 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.

Image of app in Chrome Browser

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 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 an idea of what might be causing this, and how I may be able to resolve it?

PS: I have 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:

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

Here are 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",
W3Charles
  • 11
  • 2
  • 3
    i think there's a problem with `useEthers` that keeps you from pressing the button. if your node is back to default node then tailwind can't compile the style you may need to add it to something like windicss `safelist` – Tachibana Shin Feb 10 '23 at 09:55
  • 2
    Can you provide a codesandbox that reproduce the problem ? – Johan Feb 10 '23 at 10:39
  • 1
    Can you console.log `account` and test to see what values you get? – Kostas Minaidis Feb 10 '23 at 17:02
  • 1
    Yes, thank you I can see if I can provide codesandbox, and try the console.log as well. Bear with me – W3Charles Feb 11 '23 at 08:18
  • 1
    Hi Kostas, so I console.logged (account) and it says "{account: undefined}" – W3Charles Feb 11 '23 at 09:21
  • My apologies, I'm trying to reproduce just the button error in codesandbox.io and it's giving me: "find module in path" errors. It shouldn't though. Also I have one hand now, because I injured my left hand (not related to coding). I might have to try in replit instead. Thank you for your patience – W3Charles Feb 13 '23 at 01:22

1 Answers1

0

I found a solution to this. In fact, this issue is very similar to this:

https://stackoverflow.com/a/70807924/20237510

I ended up using Fix #2 in the solution provided in the thread above:

iframe {
  pointer-events: none;
}

Hope that helps someone else!

W3Charles
  • 11
  • 2