-
Notifications
You must be signed in to change notification settings - Fork 1
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
base: main
Are you sure you want to change the base?
Conversation
src/pages/trade/ui/summary.tsx
Outdated
} | ||
const change24h = data && { | ||
positive: data.current_price >= data.price_24h_ago, | ||
change: Number(data.current_price - data.price_24h_ago).toFixed(4), |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
src/pages/trade/ui/summary.tsx
Outdated
const change24h = data && { | ||
positive: data.current_price >= data.price_24h_ago, | ||
change: Number(data.current_price - data.price_24h_ago).toFixed(4), | ||
percent: Number( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here.
src/pages/trade/ui/summary.tsx
Outdated
<SummaryCard title='Price' loading={isLoading}> | ||
{data && ( | ||
<Text detail color='text.primary'> | ||
{Number(data.current_price).toFixed(6)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And here.
src/pages/trade/ui/summary.tsx
Outdated
<SummaryCard title='24h High' loading={isLoading}> | ||
{data && ( | ||
<Text detail color='text.primary'> | ||
{Number(data.high_24h).toFixed(4)} |
There was a problem hiding this comment.
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 => { |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
@JasonMHasperhoven do you mind re-reviewing it? |
Closes #107
Closes #108
Added styles and some neat animations for the stats block. Also, did some preliminary work towards #131
And mobile:
Animations:
shimmer.mp4