style: with small decimals (#1653)

PolkaGate · Nov 15, 2024 · 0bf97a5 · 0bf97a5
1 parent d5b66df
commit 0bf97a5
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 22 deletions.
diff --git a/packages/extension-polkagate/src/components/FormatPrice.tsx b/packages/extension-polkagate/src/components/FormatPrice.tsx
@@ -3,13 +3,13 @@
 
 import type { BN } from '@polkadot/util';
 
-import { Grid, Skeleton, Typography } from '@mui/material';
-import React, { useMemo } from 'react';
+import { Grid, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import React, { useCallback, useMemo } from 'react';
 import CountUp from 'react-countup';
 
 import { useCurrency } from '../hooks';
 import { ASSETS_AS_CURRENCY_LIST } from '../util/currencyList';
-import { amountToHuman, fixFloatingPoint } from '../util/utils';
+import { amountToHuman, fixFloatingPoint, getDecimal } from '../util/utils';
 
 interface Props {
   amount?: BN | null;
@@ -29,6 +29,7 @@ interface Props {
   height?: number;
   width?: string;
   withCountUp?: boolean;
+  withSmallDecimal?: boolean;
 }
 
 export function nFormatter (num: number, decimalPoint: number) {
@@ -55,9 +56,11 @@ export function nFormatter (num: number, decimalPoint: number) {
 }
 
 const DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY = 4;
+const SMALL_DECIMALS_FONT_SIZE_REDUCTION = 20;
 
-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> {
+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> {
   const currency = useCurrency();
+  const theme = useTheme();
 
   const total = useMemo(() => {
     if (num !== undefined) {
@@ -72,12 +75,28 @@ function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, f
   }, [amount, decimals, num, price]);
 
   const _decimalPoint = useMemo(() => {
+    if (withSmallDecimal) {
+      return 0;
+    }
+
     if (currency?.code && ASSETS_AS_CURRENCY_LIST.includes(currency.code)) {
       return DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY;
     }
 
     return decimalPoint;
-  }, [currency?.code, decimalPoint]);
+  }, [currency?.code, decimalPoint, withSmallDecimal]);
+
+  const reduceFontSize = useCallback((fontSize: string | undefined, percentage: number) => {
+    if (!fontSize) {
+      return undefined;
+    }
+
+    const numericValue = parseFloat(fontSize);
+
+    const reducedSize = numericValue * (1 - (percentage / 100));
+
+    return `${Math.round(reducedSize)}px`;
+  }, []);
 
   return (
     <Grid
@@ -87,24 +106,48 @@ function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, f
       textAlign={textAlign}
     >
       {total !== undefined
-        ? <Typography
-          fontSize={fontSize}
-          fontWeight={fontWeight}
-          lineHeight={lineHeight}
-          sx={{ color: textColor }}
+        ? <Stack
+          alignItems='baseline'
+          direction='row'
         >
-          {withCountUp
-            ? <CountUp
-              decimals={_decimalPoint}
-              duration={1}
-              end={parseFloat(String(total))}
-              prefix={sign || currency?.sign || ''}
-            />
-            : <>
-              {sign || currency?.sign || ''}{ commify ? fixFloatingPoint(total as number, _decimalPoint, true) : nFormatter(total as number, _decimalPoint)}
-            </>
+          <Typography
+            fontSize={fontSize}
+            fontWeight={fontWeight}
+            lineHeight={lineHeight}
+            sx={{ color: textColor }}
+          >
+            {withCountUp
+              ? <CountUp
+                decimals={_decimalPoint}
+                duration={1}
+                end={parseFloat(String(total))}
+                prefix={sign || currency?.sign || ''}
+              />
+              : <>
+                {sign || currency?.sign || ''}{commify ? fixFloatingPoint(total as number, _decimalPoint, true) : nFormatter(total as number, _decimalPoint)}
+              </>
+            }
+          </Typography>
+          {withSmallDecimal && Number(total) > 0 &&
+            <Typography
+              fontSize={reduceFontSize(fontSize, SMALL_DECIMALS_FONT_SIZE_REDUCTION)}
+              fontWeight={fontWeight}
+              lineHeight={lineHeight}
+              sx={{ color: theme.palette.secondary.contrastText }}
+            >
+              {withCountUp
+                ? <CountUp
+                  duration={1}
+                  end={Number(getDecimal(total))}
+                  prefix={'.'}
+                />
+                : <>
+                  {`.${getDecimal(total)}`}
+                </>
+              }
+            </Typography>
           }
-        </Typography>
+        </Stack>
         : <Skeleton
           animation='wave'
           height={skeletonHeight}

diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx
@@ -144,6 +144,7 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props):
             num={totalWorth}
             skeletonHeight={22}
             withCountUp
+            withSmallDecimal
           />
           <Typography sx={{ color: !totalChange ? 'secondary.contrastText' : totalChange > 0 ? 'success.main' : 'warning.main', fontSize: '15px', fontWeight: 500, mt: '10px' }}>
             <CountUp

diff --git a/.../extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx b/.../extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx
@@ -98,6 +98,7 @@ const AccountTotal = ({ hideNumbers, totalBalance }: { hideNumbers: boolean | un
               num={totalBalance}
               skeletonHeight={28}
               width='180px'
+              withSmallDecimal
             />
         }
       </Grid>

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx
@@ -229,6 +229,7 @@ function TotalBalancePieChart ({ setGroupedAssets }: Props): React.ReactElement
                 num={youHave?.portfolio}
                 textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
                 withCountUp
+                withSmallDecimal
               />
               <Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
                 <CountUp

diff --git a/packages/extension-polkagate/src/popup/home/YouHave.tsx b/packages/extension-polkagate/src/popup/home/YouHave.tsx
@@ -47,6 +47,7 @@ export default function YouHave (): React.ReactElement {
             textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
             width='223px'
             withCountUp
+            withSmallDecimal
           />
         }
         <Grid alignItems='center' item sx={{ position: 'absolute', right: '14px', top: '25px' }}>

diff --git a/packages/extension-polkagate/src/util/utils.ts b/packages/extension-polkagate/src/util/utils.ts
@@ -56,6 +56,12 @@ export function countDecimalPlaces (n: number) {
   return match ? match[1].length : 0;
 }
 
+export function getDecimal (n: string | number, count = 2) {
+  const decimalPart = n.toString().split('.')[1];
+
+  return decimalPart ? decimalPart.slice(0, count) : 0;
+}
+
 export function fixFloatingPoint (_number: number | string, decimalDigit = FLOATING_POINT_DIGIT, commify?: boolean, dynamicDecimal?: boolean): string {
   const MAX_DECIMAL_POINTS = 6;
 
@@ -78,7 +84,7 @@ export function fixFloatingPoint (_number: number | string, decimalDigit = FLOAT
     }
   }
 
-  const fractionalDigits = sNumber.slice(dotIndex, dotIndex + decimalDigit + 1);
+  const fractionalDigits = decimalDigit === 0 ? '' : sNumber.slice(dotIndex, dotIndex + decimalDigit + 1);
 
   integerDigits = commify ? Number(integerDigits).toLocaleString() : integerDigits;