From af8782c62fc2d4b5473071e783da952e6dedac70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Mon, 13 Jan 2025 16:29:07 +0000
Subject: [PATCH] fix(evm): add max 2 decimals places for baby point (#401)

---
 .../evm/src/components/AnimantedAmount/AnimantedAmount.tsx | 6 ++++--
 apps/evm/src/components/BabyPoints/BabyPoints.tsx          | 7 ++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/evm/src/components/AnimantedAmount/AnimantedAmount.tsx b/apps/evm/src/components/AnimantedAmount/AnimantedAmount.tsx
index 85600da0..7602d586 100644
--- a/apps/evm/src/components/AnimantedAmount/AnimantedAmount.tsx
+++ b/apps/evm/src/components/AnimantedAmount/AnimantedAmount.tsx
@@ -12,6 +12,7 @@ type Props = {
   gap?: FlexProps['gap'];
   showAnimation?: boolean;
   shouldRoundDown?: boolean;
+  maximumFractionDigits?: number;
 };
 
 type InheritAttrs = Omit<SpanProps, keyof Props>;
@@ -26,6 +27,7 @@ const AnimantedAmount = ({
   gap = 'xs',
   showAnimation,
   shouldRoundDown,
+  maximumFractionDigits = 0,
   ...props
 }: AnimantedAmountProps) => {
   const [start, setStart] = useState(0);
@@ -36,10 +38,10 @@ const AnimantedAmount = ({
       Intl.NumberFormat(locale, {
         notation: compact ? 'compact' : undefined,
         roundingMode: shouldRoundDown ? 'floor' : undefined,
-        maximumFractionDigits: 0
+        maximumFractionDigits
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } as any).format(value),
-    [compact, shouldRoundDown, locale]
+    [compact, shouldRoundDown, maximumFractionDigits, locale]
   );
 
   const { value, reset } = useCountUp({
diff --git a/apps/evm/src/components/BabyPoints/BabyPoints.tsx b/apps/evm/src/components/BabyPoints/BabyPoints.tsx
index b1f390e1..86099a8e 100644
--- a/apps/evm/src/components/BabyPoints/BabyPoints.tsx
+++ b/apps/evm/src/components/BabyPoints/BabyPoints.tsx
@@ -7,7 +7,12 @@ import { AnimantedAmount, AnimantedAmountProps } from '../AnimantedAmount';
 type BabyPointsProps = Omit<AnimantedAmountProps, 'icon'>;
 
 const BabyPoints = (props: BabyPointsProps) => (
-  <AnimantedAmount shouldRoundDown icon={<Babylon style={{ width: '1em', height: '1em' }} />} {...props} />
+  <AnimantedAmount
+    shouldRoundDown
+    icon={<Babylon style={{ width: '1em', height: '1em' }} />}
+    maximumFractionDigits={2}
+    {...props}
+  />
 );
 
 export { BabyPoints };