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

fix: token list exception #927

Merged
merged 6 commits into from
Jul 11, 2022
Merged

fix: token list exception #927

merged 6 commits into from
Jul 11, 2022

Conversation

simonheys
Copy link
Collaborator

@simonheys simonheys commented Jul 8, 2022

Fixes (for me) issues with the token list vs error handling.

Root cause was a mix of swr suspense, and an issue with caching an error as an empty object. The suspense implementation was using a possibly undefined key (not allowed in suspense[1]) and returning empty data with a cached error (also not allowed in suspense[1]).

This causes an unrecoverable swr suspense error - reloading the component retrieves the same error from the cache. The error gets written to the cache at some point when reloading the extension, so reloading does not resolve it either. I was not able to identify where the empty object originates as it happens while reloading the extension and the debugger is closed.

I chose to always show the first token 'ETH' while the others are still initially loading as it made the app feel more responsive, however this could be changed to hide all until fetched. Previously no loading state was shown as the first token resolved the suspense immediately.

Some zustand selectors were memoized and shallow compare added to reduce chance of re-renders.

Adds yarn dev:ui which adds permanent 'reload' and 'Reset cache' buttons to the extension window.

[1] vercel/swr#357 (comment)

dev-ui.mov

chore: add dev ui

chore: ignore empty object error

chore: comment
@simonheys simonheys force-pushed the bugfix/token-list-exception branch from 2beddb2 to 68beaae Compare July 8, 2022 15:35

// shallow compare objects and arrays
const tokensInNetwork = useTokens(tokensInNetworkSelector, shallow)
const tokenAddresses = useTokens(tokenAddressesSelector, shallow)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mix of memoized selectors and shallow compare should prevent new-but-same-array-of-tokens from triggering re-render

@simonheys simonheys changed the title chore: token state fix: token list exceptions Jul 8, 2022
@simonheys simonheys changed the title fix: token list exceptions fix: token list exception Jul 8, 2022
@simonheys simonheys marked this pull request as ready for review July 8, 2022 15:52
@simonheys simonheys force-pushed the bugfix/token-list-exception branch from 005a6a4 to 46b1db5 Compare July 10, 2022 15:13
@simonheys simonheys marked this pull request as draft July 11, 2022 07:52
@simonheys simonheys marked this pull request as ready for review July 11, 2022 10:14
Copy link
Collaborator

@janek26 janek26 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good

@simonheys simonheys merged commit 52f0090 into develop Jul 11, 2022
@simonheys simonheys deleted the bugfix/token-list-exception branch July 11, 2022 13:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants