Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature]: Recommended way to reload app after chain / wallet switches ? #2289

Open
pellyadolfo opened this issue Sep 16, 2024 · 4 comments
Open
Assignees
Labels
feature New feature or request

Comments

@pellyadolfo
Copy link

Is your request related to a problem?

Not really. Missing a discussion board for best practices so I am opening here to get guidance on where to post usage questions.

Feature Description

What is the recommended way to reload the app after chain / wallet switches / disconnect ?

Alternative Solutions

  • catching window.ethereum events

window.ethereum.on('accountsChanged', (accounts: any) => { console.log('accountsChanged. Reloading') window.location.reload(); }); window.ethereum.on('chainChanged', (chainId: any) => { console.log('chainChanged. Reloading') window.location.reload(); }); window.ethereum.on('disconnect', (accounts: any) => { console.log('disconnect. Reloading') window.location.reload(); });

  • subscride to wallet updates adding a flag to prevent infinite loop of first rendering (React)

    const wallets2 = web3Onboard.state.select('wallets')
    wallets.subscribe(wallet => { ... ))

Anything else?

A discussions board would help adopters. Github has a discussions tab itself. Stackoverflow has only one ticket open https://stackoverflow.com/questions/tagged/web3-onboard

@pellyadolfo pellyadolfo added the feature New feature or request label Sep 16, 2024
@Adamj1232
Copy link
Member

Hi @pellyadolfo can you help me understand why an app would need to reload after wallet state change? Usually specific components would reload and not the whole app.

@pellyadolfo
Copy link
Author

pellyadolfo commented Sep 16, 2024

Uhm, this is what I understood as the best practice because probably everything populated in the UI is corresponding to the specific wallet/chain configuration. So, if the wallet account changes, user disconnects, or chain is switched, probably nothing on the UI would apply after the change, and doing a selective maintenance is very error prone and multiplies the development effort.

Can you figure out any non-default data in a dApp persisting a chain / wallet / account switch?

@Adamj1232
Copy link
Member

@pellyadolfo best practices are not to reload the app. Global state should reflect the chain and specific components of the page should reflect state changes. Reloading the app will reload all libraries and loose any state which is why apps dont reload when a chain is changed or wallet is disconnected/connected. If you are set on reloading there is a browser api to reload but I dont recommend usage in this case (or most cases) for both UX and state management reasons.

@pellyadolfo
Copy link
Author

pellyadolfo commented Sep 16, 2024

Yes, it was the way to go time ago, but now looks to be changed.

MetaMask/metamask-extension#3599

https://medium.com/metamask/no-longer-reloading-pages-on-network-change-fbf041942b44

https://medium.com/metamask/breaking-change-no-longer-reloading-pages-on-network-change-4a3e1fd2f5e7

I can agree that today is not the best practice......... if you have plenty of resources to do it better ($$$$$$)..... which is not my case and this is why I think there is still a use case (e.g. a MVP). Not everybody has the google's cash available.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants