Adding statistics SummaryCards component #50

henrypalacios · 2022-04-05T01:25:58Z

Summary

Closes #38

Adding statistics SummaryCards component in order to achieve 👇

To Test

Go to Home page

Observations

These components are UI only, which will be available to connect to real data.
Originally reported in gnosis/gp-ui/#1069

coveralls · 2022-04-05T01:28:17Z

Pull Request Test Coverage Report for Build 2106063322

0 of 0 changed or added relevant lines in 0 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 44.106%

Totals
Change from base Build 2086337745:	0.0%
Covered Lines:	2155
Relevant Lines:	4150

💛 - Coveralls

github-actions · 2022-04-05T01:30:33Z

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

elena-zh · 2022-04-12T11:02:28Z

Hey @henrypalacios , great job!
However, some notes from my side:

Some cards in the Storybook show huge text on them:
Cards displaying does not support responsive views (in Storybook)
Based on the mock-up, cards should be placed under the header, but they are displayed under the search field. Is this expected for now?
Cards might be better aligned in a tablet views:
Besides, seems that cards take a lot of room on the page in a tablet view, so I personally would love to make them a bit more compact
it would be great to make card's text font brighter when highlight it: currently, it is almost invisible
Again, in comparison with the mock-up, 2 small cards with a margin between them should correspond to the height of one bigger card. In our current implementation it does not work this way.

Were these changes discussed somewhere/OR we have an updated mock-uo of the Home page about which accidentally I'm not aware of?

Thank you!

henrypalacios · 2022-04-12T13:01:13Z

Thanks for the feedback @elena-zh!

I'll start by giving you the context of your last question, since we won't have the card with the surdplus yet and while the token table at the bottom of the mock up is being built. Agustin proposed a temporary layout while some of the first ones are executed.

Regarding your notes:

1 .Some cards in the Storybook show huge text on them:
2. Cards displaying does not support responsive views (in Storybook)
I will work on it.

Based on the mock-up, cards should be placed under the header, but they are displayed under the search field. Is this expected for now?
yes, but this would be provisional in the proposed layout.

4, 5, 6
@alongoni here maybe you can help me

... 2 small cards with a margin between them should correspond to the height of one
I'll review it.

…U layout

elena-zh · 2022-04-13T10:50:13Z

Hey @henrypalacios , storybook cards look great now!
Maybe a nitpick, but it would be great to enhance text displaying on the last card when a screen width in [320-349] px

Cards on Explorer started to look much-much better. Maybe we could increase the graph widget's height to correspond to the neighboring card's height? WDYT?

Again, when a screen width is less than 349 px, cards start to overlap each other

Thanks!

alfetopito

Looking great, loved the shimmer effect

Have some small comments in the code and same comment as Elena in regards to the graph view

It's a bit shorter than the rest of the cards

src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx

src/apps/explorer/components/SummaryCardsWidget/index.tsx

alongoni · 2022-04-13T21:35:50Z

hey @elena-zh I've fixed some issues:
Selection color: (It will affect all the app)

Card on storybook. 340px width resolution:

…to 38-stats-card-ui

elena-zh

@henrypalacios , @alongoni , LGTM now!

ramirotw

Really nice!

src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx

src/utils/mediaQueries.ts

alfetopito

Approved with minor comments

src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json

src/apps/explorer/components/SummaryCardsWidget/index.tsx

alfetopito · 2022-04-14T11:40:21Z

src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json

+  "batchInfo": { "lastBatchDate":1649881035, "batchId": "0x0003723b9eb1598e12d15c69206bf13c971be0310fa5744cf9601ed79f89e29c" },
+  "dailyTransactions": {"now": 612, "before": 912},
+  "totalTokens": 193,
+  "dailyFees": {"now": 55225.61205047748511254485049406426, "before": 40361.20651840192742698089787142249}


One more thing about the shape of the data.

Usually it's not a good idea to work with floats in JS and also if working with big numbers JS number type won't be able to handle it.

Having said that, it might not be a problem for this use case as:

We are simply displaying data without any further calculations, so loss of precision won't be really a problem

I expect fees to not be large enough to go over JS number limit

It mostly depends on how the graph response will look like, which might not be yet known

So, keep that in mind for the future, but does not need necessarily to change anything at this point

Yes, I have it in mind! I would think they come as a string and may need to be formatted, but we can define it in #40 when integrating the SDK.

…sp.json formatting Co-authored-by: Leandro Boscariol <[email protected]>

…to 38-stats-card-ui

Adding grid for only 3 cards

c7bf5b2

henrypalacios added app:Explorer Explorer App Protofire labels Apr 5, 2022

henrypalacios self-assigned this Apr 5, 2022

Changing layout style

66d9126

henrypalacios changed the base branch from develop to 35-epic-home-page April 7, 2022 14:00

alongoni and others added 7 commits April 7, 2022 14:36

fix desktop layout

c888621

fix column

0ea42a8

fix mobile layout v1

942eeef

Merge branch '35-epic-home-page' into 38-stats-card-ui

7f780ea

fix mobile layout v2

477448f

Know the resolution

d5e173c

render when is mobile

2d93399

henrypalacios requested review from ramirotw, elena-zh and alongoni April 12, 2022 05:13

remove console line

8a0a585

Fix Storybook, use double size on batchInfoCard, reuse grid system MI…

900509d

…U layout

alfetopito reviewed Apr 13, 2022

View reviewed changes

src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx Outdated Show resolved Hide resolved

src/apps/explorer/components/SummaryCardsWidget/index.tsx Outdated Show resolved Hide resolved

henrypalacios and others added 4 commits April 13, 2022 15:05

volume chart height and fix overlap on 349px size

ad4698d

Fix Tx Card

fd53370

fix card width on mobile

5e5bd86

fix selection bg color

64b47aa

typescript typed using raw data

8497f33

henrypalacios added 2 commits April 13, 2022 23:53

Merge branch '38-stats-card-ui' of github.com:cowprotocol/explorer in…

5d389fc

…to 38-stats-card-ui

Adding $ symbol

ce1b42f

elena-zh approved these changes Apr 14, 2022

View reviewed changes

ramirotw approved these changes Apr 14, 2022

View reviewed changes

alfetopito approved these changes Apr 14, 2022

View reviewed changes

henrypalacios and others added 4 commits April 14, 2022 12:42

Update src/apps/explorer/components/SummaryCardsWidget/summaryGraphRe…

d15d6b9

…sp.json formatting Co-authored-by: Leandro Boscariol <[email protected]>

Adding useMediaBreakpoint

0c5260d

Merge branch '38-stats-card-ui' of github.com:cowprotocol/explorer in…

0e02d5c

…to 38-stats-card-ui

fix types

c94978b

henrypalacios added the Auto-merge PRs with this tag will be automatically merged when approved and CI succeeds label Apr 14, 2022

alfetopito merged commit 5347984 into 35-epic-home-page Apr 18, 2022

alfetopito deleted the 38-stats-card-ui branch April 18, 2022 11:35

This was referenced Apr 18, 2022

Homepage cards: 'fees' starts with a lower-case letter on the 24h Fees card #65

Closed

Add a copy feature and navigation to the last batch card #66

Closed

henrypalacios mentioned this pull request Jun 23, 2022

Release v2.9.0 #137

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding statistics SummaryCards component #50

Adding statistics SummaryCards component #50

henrypalacios commented Apr 5, 2022 •

edited

Loading

coveralls commented Apr 5, 2022 •

edited

Loading

github-actions bot commented Apr 5, 2022

elena-zh commented Apr 12, 2022 •

edited

Loading

henrypalacios commented Apr 12, 2022

elena-zh commented Apr 13, 2022

alfetopito left a comment

alongoni commented Apr 13, 2022

elena-zh left a comment

ramirotw left a comment

alfetopito left a comment

alfetopito Apr 14, 2022

henrypalacios Apr 14, 2022

Adding statistics SummaryCards component #50

Adding statistics SummaryCards component #50

Conversation

henrypalacios commented Apr 5, 2022 • edited Loading

Summary

To Test

Observations

coveralls commented Apr 5, 2022 • edited Loading

Pull Request Test Coverage Report for Build 2106063322

💛 - Coveralls

github-actions bot commented Apr 5, 2022

elena-zh commented Apr 12, 2022 • edited Loading

henrypalacios commented Apr 12, 2022

elena-zh commented Apr 13, 2022

alfetopito left a comment

Choose a reason for hiding this comment

alongoni commented Apr 13, 2022

elena-zh left a comment

Choose a reason for hiding this comment

ramirotw left a comment

Choose a reason for hiding this comment

alfetopito left a comment

Choose a reason for hiding this comment

alfetopito Apr 14, 2022

Choose a reason for hiding this comment

henrypalacios Apr 14, 2022

Choose a reason for hiding this comment

henrypalacios commented Apr 5, 2022 •

edited

Loading

coveralls commented Apr 5, 2022 •

edited

Loading

elena-zh commented Apr 12, 2022 •

edited

Loading