[Home Page] Volume chart

[henrypalacios]

Summary

Closes #37

Proposal:

• Create a graph component VolumeChart to display the volume using lightweight-chart

• Create a component VolumeChartWidget for data request logic, change of time periodicity.

• Simulate a query with data and response close to the future implementation.

To Test

• Go to home https://pr62--gpui.review.gnosisdev.com/
• Go to the storybook/?path=/story/explorerapp-chart--default

[github-actions]

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

[alfetopito]

Looking great Henry! Quite a lot of code.

It's fine by me, just asked @fairlighteth for a review too as he's better equipped with the CSS bits.

[alfetopito]

Just realized that on mobile it's not looking so good

[fairlighteth]

Thank you for this PR. Here some comments:

• Is it possible to show generated surplus over the last 24h or 7d?
• Would rename Cow volume => CoW Protocol volume
• Mobile needs to be made responsive

[elena-zh]

Hey @henrypalacios , great job!
Some issues from my side:

1. Could we make somehow an amount at the top not being strike through with the line?
   

2. While loading data on the card, could we use the whole card loading effect instead of only 1 line loaded?
   
   like this
   

3. As @alfetopito and @fairlighteth have mentioned above, it would be nice to make the diagram auto-adjustable when changing a screen width. Also, card's content should be auto-adjustable as well: https://watch.screencastify.com/v/P3ANnXlEwQ8eVFxqzPYu

4. In a real mobile devices horizontal scroll appears on the Home page
   
   I believe, we can remove it

[ramirotw]

Nice!!

Regarding the code review, I'm still trying to understand everything, will probably comment later.

Regarding the functional part there are two things I'd like to comment:

1. Shouldn't the graph color be green here instead of red? From my understanding if the first value of the selected period is $264 and the last $10.267.230 the trend is positive not negative.

2. I believe we should limit how tall the graph can be so the labels don't collide with any line

[ramirotw]

3. Another thing to discuss better: now the Cow Volume label is showing the last data point value, but as we discussed, shouldn't this be the average of the selected period? @alfetopito I summon you

[henrypalacios]

Thank you for you time @fairlighteth,
regarding your comments:

• Is it possible to show generated surplus over the last 24h or 7d?

It is no possible yet because the data is not available in the graph.

• Would rename Cow volume => CoW Protocol volume

Done!

• Mobile needs to be made responsive

@alongoni will work on this!

[ramirotw]

🚢

[henrypalacios]

@elena-zh could you please check again 🙏?

[elena-zh]

Hey @henrypalacios , @alongoni , changes LGTM!
I have created 2 related low-priority issues:

• iOS: Numbers look like broken ones when move the volume chart line #76
• Make volume chart auto-adjustable when changing a screen width #75

Besides, I would update the cards each time when I change a network. However, it must be fixed in another PR.

Thanks