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

feat: #107: 24h stats design #134

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Conversation

VanishMax
Copy link
Contributor

@VanishMax VanishMax commented Nov 14, 2024

Closes #107

Closes #108

Added styles and some neat animations for the stats block. Also, did some preliminary work towards #131

image

And mobile:

image

Animations:

shimmer.mp4

@VanishMax VanishMax requested a review from a team November 14, 2024 09:24
@VanishMax VanishMax self-assigned this Nov 14, 2024
}
const change24h = data && {
positive: data.current_price >= data.price_24h_ago,
change: Number(data.current_price - data.price_24h_ago).toFixed(4),
Copy link
Contributor

Choose a reason for hiding this comment

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

Better to use round here as fixed doesn't actually round numbers correctly.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, didn't know about this toFixed problem. Changed it everywhere to round, also in the shortify function

const change24h = data && {
positive: data.current_price >= data.price_24h_ago,
change: Number(data.current_price - data.price_24h_ago).toFixed(4),
percent: Number(
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here.

<SummaryCard title='Price' loading={isLoading}>
{data && (
<Text detail color='text.primary'>
{Number(data.current_price).toFixed(6)}
Copy link
Contributor

Choose a reason for hiding this comment

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

And here.

<SummaryCard title='24h High' loading={isLoading}>
{data && (
<Text detail color='text.primary'>
{Number(data.high_24h).toFixed(4)}
Copy link
Contributor

Choose a reason for hiding this comment

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

And here and so forth, we have the round fn in shared/utils

* - 1000000 -> 1M
* - 1000000000 -> 1B
*/
export const shortify = (value: number): string => {
Copy link
Contributor

Choose a reason for hiding this comment

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

There's a package friendly-numbers. Perhaps it's more wise to use that.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

But it does just the same job, only the 'T' case (trillions) is not covered by me. Why would we need a library for that?

@VanishMax VanishMax requested a review from a team November 15, 2024 17:02
@VanishMax
Copy link
Contributor Author

@JasonMHasperhoven do you mind re-reviewing it?

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.

Loading skeleton of 24hr stats Add design to 24hr stats
2 participants