Integrate Tokens table data from the subgraph

[ramirotw]

Summary

[github-actions]

• 🔭 Explorer: Explorer test app
• 🔒 Safe Swap App: Trade test app (add to your safe apps)
• 📈 Trade: Trade test app
• 📚 Storybook: Component stories

[ramirotw]

@elena-zh FYI the Gnosis Chain tokens data is broken. @GabrielCamba pushed the updated changes for the mainnet and gc subgraphs but only the gc subgraph finished indexing, I need to push the updates to fix the queries but I'll do it once the mainnet subgraph is done.

[elena-zh]

@ramirotw , I have left a few notes in the #93 (comment) PR, so the issues I found there are also related to the current PR.

In addition, I have noticed that some data cannot be loaded here

And for 1 token I noticed '-infinity%' for rETH

So it would be nice to change the percentage to '0' of '-' (dash) when it shows 'infinity'

Then, I noticed that 0 price can have different amount of decimals (Rinkeby)

Thanks!

[ramirotw]

@alfetopito we have a problem:

Context: With the introduction of the ipfs-only-hash lib in cowprotocol/cow-sdk@0708de8#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R34 there's now an incompatibility of node versions as a dependency of ipfs-only-hash expects node to be >= 14. I have tested everything locally and the only thing I needed to bump because it was causing issues was favicons-webpack-plugin, the rest worked fine. Maybe this PR is a good moment to test moving to node 16.

[alfetopito]

@alfetopito we have a problem:

Context: With the introduction of the ipfs-only-hash lib in cowprotocol/cow-sdk@0708de8#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R34 there's now an incompatibility of node versions as a dependency of ipfs-only-hash expects node to be >= 14. I have tested everything locally and the only thing I needed to bump because it was causing issues was favicons-webpack-plugin, the rest worked fine. Maybe this PR is a good moment to test moving to node 16.

Indeed, I see no reason to stay on node 14.
Likely it made sense when it was introduced, but shouldn't be needed to stay on it anymore

[ramirotw]

Thanks @elena-zh for the feedback!

The dash is the absence of data from the subgraph.

2. I wonder what's the difference between '0%' and '-' in the table's values?

Same as above, the dash is the absence of data. The chart uses 7 data points max, but if we have less data points than that, we still show the chart, hence different charts with different sizes.

6. Again, what is the difference in the 'dash' and in the horizontal graph if everywhere 0-s are displayed? Also, I see graphs have a different size

[ramirotw]

@elena-zh please take a look, all but the Rinkeby stuff should be good now.

[henrypalacios]

@ramirotw removing the row selector was intentional?

[ramirotw]

@ramirotw removing the row selector was intentional?

no, probably when fixing something related to the pagination it got hidden/removed. Good catch

[elena-zh]

Hey @ramirotw , the recent changes look great to me!
I have created #115 issue for the 8th point related to Rinkeby network.

However, I think we need to fix the 9th issue with no token name and no token icon for a native currency, as users are able to but ETH/XDAI in CowSwap.

A new tiny issue is to write 'Volume' from a lower-case letter

And might be a nitpick, but it would be nice to scroll to the table top when flip pages in a mobile view.

Also, it would great to address @henrypalacios 's issue reported above.

Thanks!

[elena-zh]

Hey @ramirotw , great job!
I have created a separate enhancement for the scroll to top action in a mobile view cowprotocol/cowswap#3729 .

Also, it would be great to fix 'Total volume' column name in a desktop view ('volume' should start with a lowercase letter)

[elena-zh]

I have also found an issue that is related to the difference in data in BARN and PROD APIs. I assume, end users can face it, so I reported it: #118
@ramirotw , @alfetopito , please review it and let me know if we need to fix or close it. Thanks

[elena-zh]

Approved now!