Format numbers with commas in PortfolioSummary component (#943)

Co-authored-by: William Potin <[email protected]>

components/dashboard/PortfolioSummary.tsx

@@ -12,6 +12,11 @@ import ClaimModal from "../discover/claimModal";
 import SuccessModal from "../discover/successModal";
 import { useHidePortfolio } from "@hooks/useHidePortfolio";
 
+// Format the numbers with commas
+const formatNumberWithCommas = (number: number): string => {
+  return number.toLocaleString(); // Default locale formatting
+};
+
 Chart.register(ArcElement, DoughnutController, Tooltip);
 
 type PortfolioSummaryProps = {
@@ -22,15 +27,18 @@ type PortfolioSummaryProps = {
   minSlicePercentage?: number,
 }
 
-
 const ChartEntry: FunctionComponent<ChartItem> = ({
   color,
   itemLabel,
   itemValue,
   itemValueSymbol,
 }) => {
   const { hidePortfolio } = useHidePortfolio();
-  const value = itemValueSymbol === '%' ? itemValue + itemValueSymbol : itemValueSymbol + itemValue;
+
+  // Use the formatNumberWithCommas function to format the value
+  const formattedValue = formatNumberWithCommas(Number(itemValue));
+  const value = itemValueSymbol === '%' ? formattedValue + itemValueSymbol : itemValueSymbol + formattedValue;
+
   return (
     <div className="flex w-full justify-between my-1">
       <div className="flex flex-row w-full items-center gap-2">
@@ -74,7 +82,9 @@ const PortfolioSummary: FunctionComponent<PortfolioSummaryProps> = ({ title, dat
       tooltip: {
         callbacks: {
           label: function (tooltipItem: TooltipItem<"doughnut">) {
-            return ` ${data[tooltipItem.dataIndex].itemValueSymbol}${data[tooltipItem.dataIndex].itemValue}`;
+            // Format item value with commas here
+            const value = formatNumberWithCommas(Number(data[tooltipItem.dataIndex].itemValue));
+            return ` ${data[tooltipItem.dataIndex].itemValueSymbol}${value}`;
           }
         }
       }
@@ -87,7 +97,7 @@ const PortfolioSummary: FunctionComponent<PortfolioSummaryProps> = ({ title, dat
 
   const [showClaimModal, setShowClaimModal] = useState(false);
   const [showSuccessModal, setShowSuccessModal] = useState(false);
-  
+
   return data.length > 0 ? (
     <div className={styles.dashboard_portfolio_summary}>
       <div className="flex flex-col md:flex-row w-full justify-between items-center mb-4">
@@ -141,4 +151,4 @@ const PortfolioSummary: FunctionComponent<PortfolioSummaryProps> = ({ title, dat
   ) : null;
 }
 
-export default PortfolioSummary;
+export default PortfolioSummary;