From 23b6b6e642e60e1caecfd94adbd6886b5cdbbaeb Mon Sep 17 00:00:00 2001
From: snoopy1412 <snoopy1412.su@gmail.com>
Date: Fri, 13 Sep 2024 12:53:58 +0800
Subject: [PATCH] fix: fix bugs

---
 src/components/balance-description.tsx      |  2 +-
 src/components/formatted-number-tooltip.tsx |  2 +-
 src/view/claim/_components/item.tsx         | 16 ++++++++--------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/balance-description.tsx b/src/components/balance-description.tsx
index b1de9f5..2dad8cc 100644
--- a/src/components/balance-description.tsx
+++ b/src/components/balance-description.tsx
@@ -15,7 +15,7 @@ const BalanceDescription = ({
   balance,
   symbol,
   isLoading,
-  fractionDigits = 2,
+  fractionDigits = 3,
   text = 'Balance'
 }: BalanceDescriptionProps) => {
   const balanceBN = new BigNumber(balance || '0');
diff --git a/src/components/formatted-number-tooltip.tsx b/src/components/formatted-number-tooltip.tsx
index fe008a8..60d280a 100644
--- a/src/components/formatted-number-tooltip.tsx
+++ b/src/components/formatted-number-tooltip.tsx
@@ -10,7 +10,7 @@ interface FormattedNumberTooltipProps {
 }
 
 const FormattedNumberTooltip = React.forwardRef<HTMLDivElement, FormattedNumberTooltipProps>(
-  ({ value, fractionDigits = 2, className, children }, ref) => {
+  ({ value, fractionDigits = 3, className, children }, ref) => {
     const formattedValue = formatNumericValue(value, fractionDigits);
     const renderContent = children || ((formattedValue: string) => formattedValue);
 
diff --git a/src/view/claim/_components/item.tsx b/src/view/claim/_components/item.tsx
index e413fa5..f2fe85d 100644
--- a/src/view/claim/_components/item.tsx
+++ b/src/view/claim/_components/item.tsx
@@ -3,8 +3,9 @@ import { Button, Skeleton } from '@nextui-org/react';
 
 import Avatar from '@/components/avatar';
 import { StakingAccountWithStatus } from '@/hooks/useStakingAccountWithStatus';
-import { formatNumericValue, toShortAddress } from '@/utils';
+import { toShortAddress } from '@/utils';
 import { formatEther } from 'viem';
+import FormattedNumberTooltip from '@/components/formatted-number-tooltip';
 
 export interface ClaimableReward extends StakingAccountWithStatus {
   reward: bigint;
@@ -36,10 +37,7 @@ function ClaimableRewardCard({
     }
   }, [onClick]);
 
-  const formattedBalance = formatNumericValue(
-    reward?.reward ? formatEther(reward?.reward) : '0',
-    2
-  );
+  const formattedBalance = reward?.reward ? formatEther(reward?.reward) : '0';
 
   return (
     <div style={style}>
@@ -61,9 +59,11 @@ function ClaimableRewardCard({
             {rewardIsLoading ? (
               <Skeleton className="h-[0.875rem] w-[0.875rem] rounded-medium" />
             ) : (
-              <span className="text-[0.875rem] font-bold text-primary">
-                {formattedBalance.fixed}
-              </span>
+              <FormattedNumberTooltip value={formattedBalance}>
+                {(formattedValue) => (
+                  <span className="text-[0.875rem] font-bold text-primary">{formattedValue}</span>
+                )}
+              </FormattedNumberTooltip>
             )}
           </div>
           <Button