From 29deb84788337f7479ca9c65beba78b3b911f271 Mon Sep 17 00:00:00 2001
From: kim12322222 <jinming0228@qq.com>
Date: Fri, 16 Jan 2026 11:25:34 +0800
Subject: [PATCH] feat: update home pnl

---
 .../components/DashboardPanel/index.tsx       | 21 ++++++++++++++-----
 src/ui/views/Perps/hooks/usePerpsHomePnl.ts   |  8 +++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/ui/views/Dashboard/components/DashboardPanel/index.tsx b/src/ui/views/Dashboard/components/DashboardPanel/index.tsx
index 5647702f768..39088c46d50 100644
--- a/src/ui/views/Dashboard/components/DashboardPanel/index.tsx
+++ b/src/ui/views/Dashboard/components/DashboardPanel/index.tsx
@@ -156,7 +156,7 @@ export const DashboardPanel: React.FC<{ onSettingClick?(): void }> = ({
   const { t } = useTranslation();
   const history = useHistory();
   usePerpsDefaultAccount();
-  const { perpsPositionInfo, isFetching } = usePerpsHomePnl();
+  const { perpsPositionInfo, isFetching, positionPnl } = usePerpsHomePnl();
   // useCheckBridgePendingItem();
 
   const [badgeModalVisible, setBadgeModalVisible] = useState(false);
@@ -392,14 +392,25 @@ export const DashboardPanel: React.FC<{ onSettingClick?(): void }> = ({
           />
         </div>
       ) : perpsPositionInfo?.assetPositions?.length ? (
+        // <div
+        //   className={clsx(
+        //     'absolute bottom-[6px] text-[11px] leading-[13px] font-medium text-r-blue-default'
+        //   )}
+        // >
+        //   {t('page.dashboard.home.panel.perpsPositions', {
+        //     count: perpsPositionInfo?.assetPositions?.length,
+        //   })}
+        // </div>
         <div
           className={clsx(
-            'absolute bottom-[6px] text-[11px] leading-[13px] font-medium text-r-blue-default'
+            'absolute bottom-[6px] text-[11px] leading-[13px] font-medium',
+            positionPnl && positionPnl > 0
+              ? 'text-r-green-default'
+              : 'text-r-red-default'
           )}
         >
-          {t('page.dashboard.home.panel.perpsPositions', {
-            count: perpsPositionInfo?.assetPositions?.length,
-          })}
+          {positionPnl && positionPnl >= 0 ? '+' : '-'}$
+          {splitNumberByStep(Math.abs(positionPnl || 0).toFixed(2))}
         </div>
       ) : +(perpsPositionInfo?.marginSummary?.accountValue || '') ? (
         <div
diff --git a/src/ui/views/Perps/hooks/usePerpsHomePnl.ts b/src/ui/views/Perps/hooks/usePerpsHomePnl.ts
index 93b0c6581d0..543a8734cce 100644
--- a/src/ui/views/Perps/hooks/usePerpsHomePnl.ts
+++ b/src/ui/views/Perps/hooks/usePerpsHomePnl.ts
@@ -1,5 +1,6 @@
 import { useRabbySelector } from '@/ui/store';
 import { usePerpsClearHouseState } from './usePerpsClearingHouseState';
+import { useMemo } from 'react';
 
 export const usePerpsHomePnl = () => {
   const perpsState = useRabbySelector((state) => state.perps);
@@ -9,8 +10,15 @@ export const usePerpsHomePnl = () => {
     address: perpsAccount?.address,
   });
 
+  const pnl = useMemo(() => {
+    return data?.assetPositions.reduce((acc, item) => {
+      return acc + Number(item.position.unrealizedPnl);
+    }, 0);
+  }, [data]);
+
   return {
     perpsPositionInfo: data,
     isFetching,
+    positionPnl: pnl,
   };
 };