Skip to content

Commit 66af2a8

Browse files
Nick-1979Nick-1979
committed
style: with small decimals
1 parent 1262879 commit 66af2a8

File tree

6 files changed

+72
-21
lines changed

6 files changed

+72
-21
lines changed

‎packages/extension-polkagate/src/components/FormatPrice.tsx

Lines changed: 61 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33

44
import type { BN } from '@polkadot/util';
55

6-
import { Grid, Skeleton, Typography } from '@mui/material';
6+
import { Grid, Skeleton, Stack, Typography, useTheme } from '@mui/material';
77
import React, { useMemo } from 'react';
88
import CountUp from 'react-countup';
99

1010
import { useCurrency } from '../hooks';
1111
import { ASSETS_AS_CURRENCY_LIST } from '../util/currencyList';
12-
import { amountToHuman, fixFloatingPoint } from '../util/utils';
12+
import { amountToHuman, fixFloatingPoint, getDecimal } from '../util/utils';
1313

1414
interface Props {
1515
amount?: BN | null;
@@ -29,6 +29,7 @@ interface Props {
2929
height?: number;
3030
width?: string;
3131
withCountUp?: boolean;
32+
withSmallDecimal?: boolean;
3233
}
3334

3435
export function nFormatter (num: number, decimalPoint: number) {
@@ -56,8 +57,9 @@ export function nFormatter (num: number, decimalPoint: number) {
5657

5758
const DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY = 4;
5859

59-
function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, fontWeight, height, lineHeight = 1, mt = '0px', num, price, sign, skeletonHeight = 15, textAlign = 'left', textColor, width = '90px', withCountUp }: Props): React.ReactElement<Props> {
60+
function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, fontWeight, height, lineHeight = 1, mt = '0px', num, price, sign, skeletonHeight = 15, textAlign = 'left', textColor, width = '90px', withCountUp, withSmallDecimal }: Props): React.ReactElement<Props> {
6061
const currency = useCurrency();
62+
const theme = useTheme();
6163

6264
const total = useMemo(() => {
6365
if (num !== undefined) {
@@ -72,12 +74,28 @@ function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, f
7274
}, [amount, decimals, num, price]);
7375

7476
const _decimalPoint = useMemo(() => {
77+
if (withSmallDecimal) {
78+
return 0;
79+
}
80+
7581
if (currency?.code && ASSETS_AS_CURRENCY_LIST.includes(currency.code)) {
7682
return DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY;
7783
}
7884

7985
return decimalPoint;
80-
}, [currency?.code, decimalPoint]);
86+
}, [currency?.code, decimalPoint, withSmallDecimal]);
87+
88+
function reduceFontSize (fontSize: string | undefined, percentage: number) {
89+
if (!fontSize) {
90+
return undefined;
91+
}
92+
93+
const numericValue = parseFloat(fontSize);
94+
95+
const reducedSize = numericValue * (1 - (percentage / 100));
96+
97+
return `${Math.round(reducedSize)}px`;
98+
}
8199

82100
return (
83101
<Grid
@@ -87,24 +105,47 @@ function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, f
87105
textAlign={textAlign}
88106
>
89107
{total !== undefined
90-
? <Typography
91-
fontSize={fontSize}
92-
fontWeight={fontWeight}
93-
lineHeight={lineHeight}
94-
sx={{ color: textColor }}
108+
? <Stack
109+
alignItems='baseline'
110+
direction='row'
95111
>
96-
{withCountUp
97-
? <CountUp
98-
decimals={_decimalPoint}
99-
duration={1}
100-
end={parseFloat(String(total))}
101-
prefix={sign || currency?.sign || ''}
102-
/>
103-
: <>
104-
{sign || currency?.sign || ''}{ commify ? fixFloatingPoint(total as number, _decimalPoint, true) : nFormatter(total as number, _decimalPoint)}
105-
</>
112+
<Typography
113+
fontSize={fontSize}
114+
fontWeight={fontWeight}
115+
lineHeight={lineHeight}
116+
sx={{ color: textColor }}
117+
>
118+
{withCountUp
119+
? <CountUp
120+
decimals={_decimalPoint}
121+
duration={1}
122+
end={parseFloat(String(total))}
123+
prefix={sign || currency?.sign || ''}
124+
/>
125+
: <>
126+
{sign || currency?.sign || ''}{commify ? fixFloatingPoint(total as number, _decimalPoint, true) : nFormatter(total as number, _decimalPoint)}
127+
</>
128+
}
129+
</Typography>
130+
{withSmallDecimal && Number(total) > 0 &&
131+
<Typography
132+
fontSize={reduceFontSize(fontSize, 20)}
133+
fontWeight={fontWeight}
134+
lineHeight={lineHeight}
135+
sx={{ color: theme.palette.secondary.contrastText }}
136+
>
137+
{withCountUp
138+
? <CountUp
139+
duration={1}
140+
end={Number(getDecimal(total))}
141+
prefix={'.'}
142+
/>
143+
: <>
144+
{`.${getDecimal(total)}`}
145+
</>}
146+
</Typography>
106147
}
107-
</Typography>
148+
</Stack>
108149
: <Skeleton
109150
animation='wave'
110151
height={skeletonHeight}

‎packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props):
144144
num={totalWorth}
145145
skeletonHeight={22}
146146
withCountUp
147+
withSmallDecimal
147148
/>
148149
<Typography sx={{ color: !totalChange ? 'secondary.contrastText' : totalChange > 0 ? 'success.main' : 'warning.main', fontSize: '15px', fontWeight: 500, mt: '10px' }}>
149150
<CountUp

‎packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ const AccountTotal = ({ hideNumbers, totalBalance }: { hideNumbers: boolean | un
9898
num={totalBalance}
9999
skeletonHeight={28}
100100
width='180px'
101+
withSmallDecimal
101102
/>
102103
}
103104
</Grid>

‎packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ function TotalBalancePieChart ({ setGroupedAssets }: Props): React.ReactElement
229229
num={youHave?.portfolio}
230230
textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
231231
withCountUp
232+
withSmallDecimal
232233
/>
233234
<Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
234235
<CountUp

‎packages/extension-polkagate/src/popup/home/YouHave.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export default function YouHave (): React.ReactElement {
4747
textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
4848
width='223px'
4949
withCountUp
50+
withSmallDecimal
5051
/>
5152
}
5253
<Grid alignItems='center' item sx={{ position: 'absolute', right: '14px', top: '25px' }}>

‎packages/extension-polkagate/src/util/utils.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,12 @@ export function countDecimalPlaces (n: number) {
5656
return match ? match[1].length : 0;
5757
}
5858

59+
export function getDecimal (n: string | number, count = 2) {
60+
const decimalPart = n.toString().split('.')[1];
61+
62+
return decimalPart ? decimalPart.slice(0, count) : 0;
63+
}
64+
5965
export function fixFloatingPoint (_number: number | string, decimalDigit = FLOATING_POINT_DIGIT, commify?: boolean, dynamicDecimal?: boolean): string {
6066
const MAX_DECIMAL_POINTS = 6;
6167

@@ -78,7 +84,7 @@ export function fixFloatingPoint (_number: number | string, decimalDigit = FLOAT
7884
}
7985
}
8086

81-
const fractionalDigits = sNumber.slice(dotIndex, dotIndex + decimalDigit + 1);
87+
const fractionalDigits = decimalDigit === 0 ? '' : sNumber.slice(dotIndex, dotIndex + decimalDigit + 1);
8288

8389
integerDigits = commify ? Number(integerDigits).toLocaleString() : integerDigits;
8490

0 commit comments

Comments
 (0)