From 41e59b4e806ba30fda988c9bd2cfa419e265ab4a Mon Sep 17 00:00:00 2001
From: blazh <medenicablazo@gmail.com>
Date: Wed, 11 Dec 2024 13:37:48 +0100
Subject: [PATCH 1/3] enhancement: add better transition for numbers in rewards
 pool

---
 .../Rewards/components/TotalRewardsInfo/index.tsx      |  6 +++---
 .../Contest/components/RewardsInfo/Mobile/index.tsx    |  2 +-
 .../_pages/Contest/components/RewardsInfo/index.tsx    |  6 +++---
 packages/react-app-revamp/helpers/formatBalance.ts     | 10 ++++++++--
 packages/react-app-revamp/tailwind.config.js           |  6 ++++++
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/react-app-revamp/components/_pages/Contest/Rewards/components/TotalRewardsInfo/index.tsx b/packages/react-app-revamp/components/_pages/Contest/Rewards/components/TotalRewardsInfo/index.tsx
index c9e376c93..bd0cf3c18 100644
--- a/packages/react-app-revamp/components/_pages/Contest/Rewards/components/TotalRewardsInfo/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/Rewards/components/TotalRewardsInfo/index.tsx
@@ -17,10 +17,10 @@ const TotalRewardsInfo: FC<TotalRewardsInfoProps> = ({ totalRewards }) => {
         setCurrentIndex(prevIndex => {
           const nextIndex = (prevIndex + 1) % totalRewards.length;
           setAnimate(true);
-          setTimeout(() => setAnimate(false), 1000);
+          setTimeout(() => setAnimate(false), 500);
           return nextIndex;
         });
-      }, 1500);
+      }, 1000);
 
       return () => clearInterval(interval);
     } else if (totalRewards.length === 1) {
@@ -33,7 +33,7 @@ const TotalRewardsInfo: FC<TotalRewardsInfoProps> = ({ totalRewards }) => {
   return (
     <div className="w-fit max-w-full">
       <div className="flex h-8 px-2 md:px-4 items-center bg-transparent border border-neutral-10 rounded-[10px] text-[16px] font-bold text-positive-11">
-        <div className={`flex items-center gap-1 ${animate ? "animate-reveal" : ""}`}>
+        <div className={`flex items-center gap-1 ${animate ? "animate-flicker-number" : ""}`}>
           <p>{formatBalance(formatUnits(currentReward.totalAmount, currentReward.decimals).toString())}</p>{" "}
           <p className="uppercase">${currentReward.symbol}</p>
         </div>
diff --git a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/Mobile/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/Mobile/index.tsx
index c54e9b6dc..8e50039f5 100644
--- a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/Mobile/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/Mobile/index.tsx
@@ -120,7 +120,7 @@ const ContestRewardsInfoMobile: FC<ContestRewardsInfoMobileProps> = ({ rewardsMo
       className={`flex shrink-0 h-8 p-2 justify-center items-center bg-transparent border border-neutral-10 rounded-[10px] text-[16px] font-bold text-positive-11 overflow-hidden`}
     >
       <span className="truncate flex items-center">
-        <div className={`flex items-center ${animate ? "animate-reveal" : ""}`}>
+        <div className={`flex items-center ${animate ? "animate-flicker-number" : ""}`}>
           {formatBalance(currentRewardAmount)} $
           <span className="uppercase mr-1 truncate inline-block overflow-hidden">{currentReward.symbol}</span>
         </div>
diff --git a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx
index f005cbb00..82211beda 100644
--- a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx
@@ -81,10 +81,10 @@ const ContestRewardsInfo: FC<ContestRewardsInfoProps> = ({ rewardsModuleAddress,
         setCurrentIndex(prevIndex => {
           const nextIndex = (prevIndex + 1) % flattenedRewards.length;
           setAnimate(true);
-          setTimeout(() => setAnimate(false), 1000);
+          setTimeout(() => setAnimate(false), 500);
           return nextIndex;
         });
-      }, 1500);
+      }, 1000);
 
       return () => clearInterval(interval);
     } else if (flattenedRewards.length === 1) {
@@ -117,7 +117,7 @@ const ContestRewardsInfo: FC<ContestRewardsInfoProps> = ({ rewardsModuleAddress,
       className={`flex shrink-0 h-8 min-w-60 p-4 justify-center items-center bg-transparent border border-neutral-10 rounded-[10px] text-[16px] font-bold text-positive-11 overflow-hidden`}
     >
       <span className="truncate flex items-center">
-        <div className={`flex items-center ${animate ? "animate-reveal" : ""}`}>
+        <div className={`flex items-center ${animate ? "animate-flicker-number" : ""}`}>
           {formatBalance(currentRewardAmount)} $
           <span className="uppercase mr-1 truncate inline-block overflow-hidden">{currentReward.symbol}</span>
         </div>
diff --git a/packages/react-app-revamp/helpers/formatBalance.ts b/packages/react-app-revamp/helpers/formatBalance.ts
index 410e4bb42..5c693a3fa 100644
--- a/packages/react-app-revamp/helpers/formatBalance.ts
+++ b/packages/react-app-revamp/helpers/formatBalance.ts
@@ -19,6 +19,12 @@ export function formatBalance(balance: string): string {
   }
 
   // handle numbers >= 0.001
-  // truncate to 3 decimal places without rounding
-  return num.decimalPlaces(3, BigNumber.ROUND_FLOOR).toString();
+  const truncated = num.decimalPlaces(3, BigNumber.ROUND_FLOOR);
+
+  // add comma separators only for numbers >= 1000
+  if (truncated.abs().isGreaterThanOrEqualTo(1000)) {
+    return truncated.toFormat();
+  }
+
+  return truncated.toString();
 }
diff --git a/packages/react-app-revamp/tailwind.config.js b/packages/react-app-revamp/tailwind.config.js
index 3055c8c8e..81f5896bb 100644
--- a/packages/react-app-revamp/tailwind.config.js
+++ b/packages/react-app-revamp/tailwind.config.js
@@ -313,6 +313,11 @@ module.exports = {
             opacity: "1",
           },
         },
+        "flicker-number": {
+          "0%": { opacity: "1" },
+          "50%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
       },
       scale: {
         120: "1.1",
@@ -335,6 +340,7 @@ module.exports = {
         flicker: "flicker 1s linear",
         "flicker-infinite": "flicker 1s linear infinite",
         reveal: "reveal 1s ease-in-out",
+        "flicker-number": "flicker-number 0.5s infinite",
       },
 
       height: {

From e437fe7b0b96539a14032ec93b19571f23e37827 Mon Sep 17 00:00:00 2001
From: blazh <medenicablazo@gmail.com>
Date: Wed, 11 Dec 2024 13:38:44 +0100
Subject: [PATCH 2/3] enhancement: add min value as const

---
 packages/react-app-revamp/helpers/formatBalance.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-app-revamp/helpers/formatBalance.ts b/packages/react-app-revamp/helpers/formatBalance.ts
index 5c693a3fa..c01a0b1ec 100644
--- a/packages/react-app-revamp/helpers/formatBalance.ts
+++ b/packages/react-app-revamp/helpers/formatBalance.ts
@@ -1,5 +1,7 @@
 import BigNumber from "bignumber.js";
 
+const MIN_VALUE_FOR_COMMA_SEPARATION = 1000;
+
 export function formatBalance(balance: string): string {
   const num = new BigNumber(balance);
 
@@ -22,7 +24,7 @@ export function formatBalance(balance: string): string {
   const truncated = num.decimalPlaces(3, BigNumber.ROUND_FLOOR);
 
   // add comma separators only for numbers >= 1000
-  if (truncated.abs().isGreaterThanOrEqualTo(1000)) {
+  if (truncated.abs().isGreaterThanOrEqualTo(MIN_VALUE_FOR_COMMA_SEPARATION)) {
     return truncated.toFormat();
   }
 

From f49373d67ca9550d531bfeed0f3aef548af669ea Mon Sep 17 00:00:00 2001
From: blazh <medenicablazo@gmail.com>
Date: Wed, 11 Dec 2024 13:43:25 +0100
Subject: [PATCH 3/3] enhancement: adjust styling

---
 .../Contest/components/RewardsInfo/Mobile/index.tsx    | 10 +++++-----
 .../_pages/Contest/components/RewardsInfo/index.tsx    |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/Mobile/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/Mobile/index.tsx
index 8e50039f5..d3d1033c5 100644
--- a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/Mobile/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/Mobile/index.tsx
@@ -91,10 +91,10 @@ const ContestRewardsInfoMobile: FC<ContestRewardsInfoMobileProps> = ({ rewardsMo
         setCurrentIndex(prevIndex => {
           const nextIndex = (prevIndex + 1) % totalRewards.length;
           setAnimate(true);
-          setTimeout(() => setAnimate(false), 1000);
+          setTimeout(() => setAnimate(false), 500);
           return nextIndex;
         });
-      }, 1500);
+      }, 1000);
 
       return () => clearInterval(interval);
     } else if (totalRewards.length === 1) {
@@ -120,9 +120,9 @@ const ContestRewardsInfoMobile: FC<ContestRewardsInfoMobileProps> = ({ rewardsMo
       className={`flex shrink-0 h-8 p-2 justify-center items-center bg-transparent border border-neutral-10 rounded-[10px] text-[16px] font-bold text-positive-11 overflow-hidden`}
     >
       <span className="truncate flex items-center">
-        <div className={`flex items-center ${animate ? "animate-flicker-number" : ""}`}>
-          {formatBalance(currentRewardAmount)} $
-          <span className="uppercase mr-1 truncate inline-block overflow-hidden">{currentReward.symbol}</span>
+        <div className={`flex items-center gap-1 ${animate ? "animate-flicker-number" : ""}`}>
+          <p>{formatBalance(currentRewardAmount)}</p>
+          <p className="uppercase">${currentReward.symbol}</p>
         </div>
       </span>
     </div>
diff --git a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx
index 82211beda..2a7c7673b 100644
--- a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx
@@ -117,11 +117,11 @@ const ContestRewardsInfo: FC<ContestRewardsInfoProps> = ({ rewardsModuleAddress,
       className={`flex shrink-0 h-8 min-w-60 p-4 justify-center items-center bg-transparent border border-neutral-10 rounded-[10px] text-[16px] font-bold text-positive-11 overflow-hidden`}
     >
       <span className="truncate flex items-center">
-        <div className={`flex items-center ${animate ? "animate-flicker-number" : ""}`}>
-          {formatBalance(currentRewardAmount)} $
-          <span className="uppercase mr-1 truncate inline-block overflow-hidden">{currentReward.symbol}</span>
+        <div className={`flex items-center gap-1 ${animate ? "animate-flicker-number" : ""}`}>
+          <p>{formatBalance(currentRewardAmount)}</p>
+          <p className="uppercase">${currentReward.symbol}</p>
         </div>
-        <span>
+        <span className="ml-1">
           {currentReward.isReleased ? "paid to" : "to"} {currentReward.ranking}
           {returnOnlySuffix(currentReward.ranking)}
         </span>{" "}