feat(ui): introduce number-flow animation library

package.json

@@ -16,6 +16,7 @@
     "dependencies": {
         "@floating-ui/react": "^0.26.28",
         "@lottiefiles/dotlottie-react": "^0.10.1",
+        "@number-flow/react": "^0.4.4",
         "@sentry/react": "^8.42.0",
         "@tauri-apps/api": "^2.1.1",
         "@tauri-apps/plugin-os": "^2.0.0",
@@ -70,4 +71,4 @@
         "typescript-eslint": "^8.17.0",
         "vite": "^5.4.11"
     }
-}
+}

src/containers/main/Airdrop/AirdropGiftTracker/components/Gems/Gems.tsx

@@ -1,15 +1,15 @@
 import { Wrapper, Number, Label, GemImage, GemsAnimation, GemAnimatedImage } from './styles';
 import gemImage from '../../images/gem.png';
-import { AnimatePresence, useSpring } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import { useEffect, useState } from 'react';
+import NumberFlow from '@number-flow/react';
 
 interface Props {
     number: number;
     label: string;
 }
 
 export default function Gems({ number, label }: Props) {
-    const [displayValue, setDisplayValue] = useState(number);
     const [animate, setAnimate] = useState(false);
 
     const getRandomX = (() => {
@@ -28,28 +28,18 @@ export default function Gems({ number, label }: Props) {
         };
     })();
 
-    const spring = useSpring(0, { mass: 0.8, stiffness: 50, damping: 20 });
-
-    spring.on('change', (latest: number) => {
-        setDisplayValue(Math.round(latest));
-    });
-
-    useEffect(() => {
-        spring.set(number);
-    }, [spring, number]);
-
     useEffect(() => {
         setAnimate(true);
-        const timer = setTimeout(() => setAnimate(false), 1000);
+        const timer = setTimeout(() => setAnimate(false), 2000);
         return () => clearTimeout(timer);
-    }, [displayValue]);
+    }, [number]);
 
     return (
         <Wrapper>
             <Number>
                 <GemImage src={gemImage} alt="" />
 
-                {displayValue.toLocaleString()}
+                <NumberFlow value={number} continuous={true} willChange={true} />
 
                 <AnimatePresence>
                     {animate && (

src/containers/main/ShellOfSecrets/SoSWidget/segments/Timer/Timer.tsx

@@ -11,6 +11,7 @@ import {
 } from './styles';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
+import NumberFlow from '@number-flow/react';
 
 export default function Timer() {
     const { t } = useTranslation('sos', { useSuspense: false });
@@ -37,12 +38,38 @@ export default function Timer() {
 
             <TimerColumn>
                 <NumberGroup>
-                    <Number>{reminingTime.days}</Number>
+                    <Number>
+                        <NumberFlow
+                            value={reminingTime.days}
+                            willChange={true}
+                            continuous={true}
+                            trend={-1}
+                            format={{
+                                style: 'decimal',
+                                minimumIntegerDigits: 2,
+                                minimumFractionDigits: 0,
+                                maximumFractionDigits: 0,
+                            }}
+                        />
+                    </Number>
                     <Label>{t('widget.timer.days')}</Label>
                 </NumberGroup>
 
                 <NumberGroup>
-                    <Number>{reminingTime.hours}</Number>
+                    <Number>
+                        <NumberFlow
+                            value={reminingTime.hours}
+                            willChange={true}
+                            continuous={true}
+                            trend={-1}
+                            format={{
+                                style: 'decimal',
+                                minimumIntegerDigits: 2,
+                                minimumFractionDigits: 0,
+                                maximumFractionDigits: 0,
+                            }}
+                        />
+                    </Number>
                     <Label>{t('widget.timer.hours')}</Label>
                 </NumberGroup>
             </TimerColumn>

src/containers/main/ShellOfSecrets/SoSWidget/segments/Timer/styles.ts

@@ -58,23 +58,29 @@ export const TimerColumn = styled('div')`
     display: flex;
     flex-direction: column;
     padding-left: 30px;
-    gap: 4px;
+    gap: 6px;
 `;
 
 export const NumberGroup = styled('div')`
     display: flex;
-    gap: 2px;
     align-items: flex-end;
+    height: 50px;
+    position: relative;
 `;
 
 export const Number = styled('div')`
     font-size: 64px;
-    line-height: 80%;
-    text-transform: uppercase;
+    line-height: 100%;
+    height: 50px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-22px);
 `;
 
 export const Label = styled('div')`
     font-size: 16px;
     line-height: 100%;
     text-transform: uppercase;
+    padding-left: 79px;
 `;

src/containers/phase/Setup/components/SetupProgress.tsx

@@ -1,6 +1,7 @@
 import { LinearProgress } from '@app/components/elements/LinearProgress';
 import { Typography } from '@app/components/elements/Typography';
 import { useAppStateStore } from '@app/store/appStateStore';
+import NumberFlow from '@number-flow/react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -29,7 +30,9 @@ export default function SetupProgress() {
 
     return (
         <Wrapper>
-            <Percentage>{progressPercentage}%</Percentage>
+            <Percentage>
+                <NumberFlow value={setupProgress} willChange={true} continuous={true} format={{ style: 'percent' }} />
+            </Percentage>
             <InfoText variant="p">{setupTitle ? t(`setup-view:title.${setupTitle}`, setupTitleParams) : ''}</InfoText>
             <LinearProgress value={progressPercentage} variant="small" />
         </Wrapper>