bug: external wallet hydration error during wallet selection #43
Description
Is there an existing issue for this?
- I have looked through the existing issues
Which method was used to setup Scaffold-Alchemy?
npx create-web3-dapp@latest
Current Behavior
When you add a walletconnect project ID to a new /nextjs/.env file, it will open the external wallet connect button to the login modal, but the wallet provider list will be duplicated as seen in the image below.
Expected Behavior
We expect the login modal to add the external wallet button and load the modal with no duplications/client-side hydration issues.
Steps To Reproduce
To reproduce:
- copy the /nextjs/.env.sample file as a /nextjs/.env file
- add your walletconnect ID to
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID="<ID HERE>" yarn startthe project- click the "login" button. you will see the external wallet button is now available.
- click on the the external wallet option to see the list of providers
- You will see the list is duplicated
Anything else?
A quick work-around is to change the SSR setting in /nextjs/account.config from true to false.
However, this then creates a login issue where credentials do not refresh the login state and clicking the login button again forces a quick popup-and-close event. I'll describe in a separate issue.