[7] fix(tokens): fix tokens list loading state #3201

shoom3301 · 2023-10-10T10:05:48Z

Summary

This is a final PR where I add all fixes after code-review / QA.
I also added test plan for the whole refactoring below:

To Test

Token list

User added tokens

add/import
remove
clear all

Favourite tokens

toggle
reset to defaults

Unsupported tokens

AST token on Gnosis chain should be marked with "unsupported" tag in the list
TODO: since an unsupported token may become supported, we should periodically reset the state

Select a token

all active tokens should be displayed (including user-added and favourite)
tokens should be sorted by balance
search a token by address
search a token by symbol
import token
fast select by pressing Enter

Auto import token

should propose tokens importing if they are not in active lists, example: https://dev.swap.cow.fi/#/1/swap/0x4355fC160f74328f9b383dF2EC589bB3dFd82Ba0/0xcbd55D4fFc43467142761A764763652b48b969ff

Tokens

tokens with decimals=0
permittable tokens should have a tag in tokens list
native token should be displayed first in the list
add to Metamask
token logo displaying in the orders table
token logo displaying in the activities list

Other

google analytics events: libs/analytics/src/events/listEvents.ts

TODO

Add a migration to clean up old localStorage state
Add a migration for user-added tokens from old to the new state

vercel · 2023-10-10T10:05:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
swap-dev	✅ Ready (Inspect)	Visit Preview	Oct 24, 2023 2:25pm

🌃 Cosmos ↗︎

…wprotocol/cowswap into refactor/tokens-post-review-fixes

anxolin · 2023-10-18T16:40:29Z

Thanks for the diagrams in the library!

alfetopito

Nice to finally test everything!
Some comments on the code.

As for testing:

There's no indication of list loading, when searching for a new one:

Screen.Recording.2023-10-19.at.11.25.07.mov

When removing a token that's currently selected, I immediately get a prompt to add the token back

Screen.Recording.2023-10-19.at.11.27.56.mov

GNO has a square logo? I think we used to round them in the UI.

ETH disappears from the list sometimes, apparently while it's loading.

Screen.Recording.2023-10-19.at.11.30.58.mov

There's a test item to reset favourite to defaults. How do I do that?

alfetopito · 2023-10-19T10:02:12Z

libs/tokens/src/hooks/tokens/unsupported/useAreUnsupportedTokens.ts

+import { useCallback } from 'react'
+import { useIsUnsupportedToken } from './useIsUnsupportedToken'
+
+type NullishAddress = string | null | undefined


I assume you don't want to use Nullish because that's in the main app and it would create a circular dependency?

You know my mind :)

I would like to move common types to some a new lib in the future

alfetopito · 2023-10-19T10:03:30Z

libs/tokens/src/hooks/tokens/unsupported/useIsUnsupportedToken.ts

@@ -1,20 +1,16 @@
 import { useUnsupportedTokens } from './useUnsupportedTokens'
 import { useCallback } from 'react'

-export function useIsUnsupportedToken() {
+type NullishAddress = string | null | undefined


Repeated type. What about move it to the token app types?

Don't you mind if I do it in the next iteration?

Sure, no problem

libs/tokens/src/utils/getTokenLogoUrls.ts

alfetopito · 2023-10-19T10:15:19Z

libs/tokens/src/utils/tokenMapToListWithLogo.ts

+ */
+export function tokenMapToListWithLogo(tokenMap: TokensMap): TokenWithLogo[] {
+  return Object.values(tokenMap)
+    .sort((a, b) => (a.symbol > b.symbol ? 1 : -1))


Does it mater it they are lower cased for the comparison?

I don't see any difference, maybe because the majority of tokens have uppercased symbols

shoom3301 · 2023-10-23T07:53:55Z

There's no indication of list loading, when searching for a new one:

@alfetopito added the loader: 6a7a227

shoom3301 · 2023-10-23T07:54:40Z

When removing a token that's currently selected, I immediately get a prompt to add the token back

This is not a new issue (exiting on prod), I would like to fix it in the next iteration if you don't mind

shoom3301 · 2023-10-23T07:54:56Z

GNO has a square logo? I think we used to round them in the UI.

@alfetopito thanks! Fixed

shoom3301 · 2023-10-23T07:59:45Z

There's a test item to reset favourite to defaults. How do I do that?

@alfetopito sorry, I didn't add the scenario:

Add some tokens to favourites
Open tokens page and select "Favourite tokens"

Click "Reset favourites"

The list of the favourite tokens should be reset to defaults

shoom3301 · 2023-10-23T08:00:28Z

ETH disappears from the list sometimes, apparently while it's loading.

@alfetopito hmmm, I can't reproduce it now. Could you give steps on how to get it?

alfetopito · 2023-10-23T10:44:46Z

ETH disappears from the list sometimes, apparently while it's loading.

@alfetopito hmmm, I can't reproduce it now. Could you give steps on how to get it?

I don't know exactly what are the steps.
I am connected with MM on mainnet and I can see it very easily.
I recorded it now with the console logs open:

Screen.Recording.2023-10-23.at.11.40.31.mov

Maybe try to slow down your connection a bit?

Watching the network calls, the ETH price seems to be displayed only when the blocknative call completes:

alfetopito

Tested again, only the ETH disappearing from the list issue remains

shoom3301 · 2023-10-24T14:45:32Z

@alfetopito thank you! Fixed

alfetopito

It's working \o/

alfetopito · 2023-10-26T08:40:25Z

apps/cowswap-frontend/src/modules/tokensList/utils/tokensListSorter.ts

-    if (getIsNativeToken(a) || getIsNativeToken(b)) return 1
+    if (aIsNative || bIsNative) {
+      return aIsNative ? -1 : 1
+    }


Ha, I knew it!

shoom3301 added the Tokens label Oct 10, 2023

shoom3301 self-assigned this Oct 10, 2023

fix: fix tokens list loading state

840af3f

shoom3301 force-pushed the refactor/tokens-post-review-fixes branch from 418081f to 840af3f Compare October 10, 2023 10:06

fix: fix token store updating inconsistency

d1f8851

vercel bot deployed to Preview October 10, 2023 10:14 View deployment

chore: move DEFAULT_FAVOURITE_TOKENS to separate file

70b87f9

vercel bot deployed to Preview October 10, 2023 10:23 View deployment

shoom3301 added 4 commits October 10, 2023 17:31

refactor: refactor useSearchToken() hook

58b890f

chore: fix tokens lib exports

614feea

chore: refactor TokensListsUpdater

b5c1508

fix: remove duplicates from token search results

c3cc4a8

vercel bot deployed to Preview October 10, 2023 12:03 View deployment

shoom3301 added 2 commits October 10, 2023 20:00

fix(tokens): fix lists toggling

e1626e7

fix(tokens): fix list importing

16ef0a0

vercel bot had a problem deploying to Preview October 10, 2023 14:34 Failure

refactor(tokens): refactor tokens state

2a8d3d7

vercel bot deployed to Preview October 11, 2023 06:06 View deployment

Merge branch 'refactor/tokens-remove-legacy' of https://github.com/co…

d8e4330

…wprotocol/cowswap into refactor/tokens-post-review-fixes

vercel bot deployed to Preview October 11, 2023 06:21 View deployment

feat(tokens): lists analytics events

7287a63

vercel bot deployed to Preview October 11, 2023 06:31 View deployment

refactor: group and rename entities

e7573de

vercel bot deployed to Preview October 11, 2023 07:36 View deployment

shoom3301 added 2 commits October 11, 2023 13:41

chore: fix imports

e6be7d3

chore: fix cosmos fixtures

c684d98

vercel bot deployed to Preview October 11, 2023 08:20 View deployment

shoom3301 added 2 commits October 11, 2023 14:28

chore: remove unused code

822d170

Merge branch 'refactor/tokens-remove-legacy' of https://github.com/co…

9701d07

…wprotocol/cowswap into refactor/tokens-post-review-fixes

anxolin approved these changes Oct 18, 2023

View reviewed changes

alfetopito reviewed Oct 19, 2023

View reviewed changes

chore: merge develop

2903c28

vercel bot had a problem deploying to Preview October 23, 2023 07:16 Failure

shoom3301 added 2 commits October 23, 2023 13:18

chore: fix build

40c0d9d

chore: fix build

78dc458

vercel bot had a problem deploying to Preview October 23, 2023 07:20 Failure

vercel bot deployed to Preview October 23, 2023 07:25 View deployment

chore: fix getTokenLogoFallbacks

b3192bd

vercel bot deployed to Preview October 23, 2023 07:32 View deployment

chore: fix lists overriding and search input

3d28e21

vercel bot deployed to Preview October 23, 2023 07:48 View deployment

feat: loader for list search

6a7a227

vercel bot deployed to Preview October 23, 2023 07:55 View deployment

alfetopito reviewed Oct 23, 2023

View reviewed changes

shoom3301 added 2 commits October 24, 2023 18:21

chore: fix token logo rounding

8602757

chore: fix tokens sorting

f4af72b

vercel bot deployed to Preview October 24, 2023 14:25 View deployment

alfetopito approved these changes Oct 26, 2023

View reviewed changes

shoom3301 merged commit 9c4bfdf into refactor/tokens-remove-legacy Oct 26, 2023
6 of 7 checks passed

github-actions bot locked and limited conversation to collaborators Oct 26, 2023

alfetopito deleted the refactor/tokens-post-review-fixes branch October 26, 2023 17:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[7] fix(tokens): fix tokens list loading state #3201

[7] fix(tokens): fix tokens list loading state #3201

shoom3301 commented Oct 10, 2023 •

edited

Loading

vercel bot commented Oct 10, 2023 •

edited by github-actions bot

Loading

anxolin commented Oct 18, 2023

alfetopito left a comment

alfetopito Oct 19, 2023

shoom3301 Oct 23, 2023

shoom3301 Oct 23, 2023

alfetopito Oct 19, 2023

shoom3301 Oct 23, 2023

alfetopito Oct 23, 2023

alfetopito Oct 19, 2023

shoom3301 Oct 24, 2023

shoom3301 commented Oct 23, 2023

shoom3301 commented Oct 23, 2023

shoom3301 commented Oct 23, 2023

shoom3301 commented Oct 23, 2023

shoom3301 commented Oct 23, 2023

alfetopito commented Oct 23, 2023

alfetopito left a comment

shoom3301 commented Oct 24, 2023

alfetopito left a comment

alfetopito Oct 26, 2023

[7] fix(tokens): fix tokens list loading state #3201

[7] fix(tokens): fix tokens list loading state #3201

Conversation

shoom3301 commented Oct 10, 2023 • edited Loading

Summary

To Test

TODO

vercel bot commented Oct 10, 2023 • edited by github-actions bot Loading

anxolin commented Oct 18, 2023

alfetopito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shoom3301 commented Oct 23, 2023

shoom3301 commented Oct 23, 2023

shoom3301 commented Oct 23, 2023

shoom3301 commented Oct 23, 2023

shoom3301 commented Oct 23, 2023

alfetopito commented Oct 23, 2023

alfetopito left a comment

Choose a reason for hiding this comment

shoom3301 commented Oct 24, 2023

alfetopito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shoom3301 commented Oct 10, 2023 •

edited

Loading

vercel bot commented Oct 10, 2023 •

edited by github-actions bot

Loading