DRAFT: add pnl to dashboard

package.json

@@ -17,7 +17,7 @@
     "pnpm": ">=10.4.0"
   },
   "dependencies": {
-    "@compolabs/spark-orderbook-ts-sdk": "https://registry.npmjs.org/@compolabs/spark-orderbook-ts-sdk/-/spark-orderbook-ts-sdk-1.16.2.tgz",
+    "@compolabs/spark-orderbook-ts-sdk": "https://registry.npmjs.org/@compolabs/spark-orderbook-ts-sdk/-/spark-orderbook-ts-sdk-1.16.3.tgz",
     "@compolabs/tradingview-chart": "^1.0.21",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",

src/blockchain/FuelNetwork.ts

@@ -269,4 +269,8 @@ export class FuelNetwork {
   getCompetition = async (...params: Parameters<typeof this.orderbookSdk.getCompetition>) => {
     return await this.orderbookSdk.getCompetition(...params);
   };
+
+  fetchBalancePnl = async (...params: Parameters<typeof this.orderbookSdk.getBalancePnlByUser>) => {
+    return await this.orderbookSdk.getBalancePnlByUser(...params);
+  };
 }

src/components/SelectAssets/SelectAssetsInput.tsx

@@ -24,6 +24,8 @@ export interface AssetBlockData {
   balance: string;
   assetId: string;
   price?: string;
+  pnl: string;
+  pnlPrecent: string;
 }
 
 interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {

src/screens/Dashboard/Dashboard.tsx

@@ -7,7 +7,6 @@ import { DashboardPoints } from "@components/Points/DashboardPoints";
 import { SmartFlex } from "@components/SmartFlex";
 import { media } from "@themes/breakpoints";
 
-import AssetsDashboard from "@screens/Dashboard/AssetsDashboard";
 import InfoDataGraph from "@screens/Dashboard/InfoDataGraph";
 import BottomTables from "@screens/SpotScreen/BottomTables";
 import StatusBar from "@screens/SpotScreen/StatusBar";
@@ -25,9 +24,9 @@ const Dashboard = observer(() => {
           <MarketDataSection />
           <InfoDataGraph />
         </UserInfoData>
-        <BottomTables isShowBalance={false} />
+        <BottomTables />
       </DashboardColumn>
-      <AssetsDashboard />
+      {/*<AssetsDashboard />*/}
       <StatusBarStyled />
       <StatusBar />
     </DashboardContainer>

src/screens/Dashboard/InfoDataGraph/index.tsx

@@ -62,9 +62,18 @@ const NoDataTrading = observer(() => {
 
 const InfoDataGraph: React.FC = observer(() => {
   const { dashboardStore } = useStores();
-  const data = dashboardStore.activeUserStat
-    ? generateTradingData(dashboardStore.getChartDataTrading())
-    : generateTradingData(dashboardStore.getChartDataPortfolio());
+  const data = (() => {
+    switch (dashboardStore.activeUserStat) {
+      case 0:
+        return generateTradingData(dashboardStore.getChartDataTrading());
+      case 1:
+        return [];
+      case 2:
+        return generateTradingData(dashboardStore.getChartDataPortfolio());
+      default:
+        throw new Error(`Unexpected activeUserStat: ${dashboardStore.activeUserStat}`);
+    }
+  })();
   return data.length > 0 ? <TradingViewScoreboardWidget data={data} /> : <NoDataTrading />;
 });
 

src/screens/Dashboard/MarketDataSection/MarketAttribute.tsx

@@ -37,7 +37,7 @@ export const MarketAttribute: React.FC<MarketAttributeProps> = observer(
           <ChangeContainer>
             {isHaveRange && (
               <>
-                <Text primary>{change.value}</Text>
+                {change.value !== "hide" && <Text primary>{change.value}</Text>}
                 <MetricsPercentage>
                   <DirectionIcon direction={change.direction} />
                   <TextPercentage direction={change.direction}>{change.percentage}</TextPercentage>

src/screens/Dashboard/MarketDataSection/index.tsx

@@ -18,6 +18,17 @@ const marketData = [
     },
     isShowDetails: true,
   },
+  {
+    title: "PNL",
+    value: "$0",
+    period: "24h",
+    change: {
+      value: "none",
+      percentage: "0",
+      direction: "up",
+    },
+    isShowDetails: true,
+  },
   {
     title: "Trading Volume",
     value: "$0",
@@ -36,6 +47,7 @@ export const MarketDataSection: React.FC = observer(() => {
   const { dashboardStore } = useStores();
   const portfolioVolume = dashboardStore.getChartDataPortfolio();
   const tradingVolume = dashboardStore.getChartDataTrading();
+  const totalBalancePnl = dashboardStore.totalPnl;
   useEffect(() => {
     if (dashboardStore.rowSnapshots.length === 0) {
       setUserStats(structuredClone(marketData));
@@ -47,9 +59,10 @@ export const MarketDataSection: React.FC = observer(() => {
     const updatedStats = structuredClone(marketData);
     updatedStats[0].period = dashboardStore.activeFilter.description ?? dashboardStore.activeFilter.title;
     updatedStats[1].period = dashboardStore.activeFilter.description ?? dashboardStore.activeFilter.title;
-
+    updatedStats[2].period = dashboardStore.activeFilter.description ?? dashboardStore.activeFilter.title;
     updatedStats[0].value = `$${sumStatsUser?.value?.toFixed(2)}`;
-    updatedStats[1].value = `$${sumStatsTrading?.toFixed(2) ?? "0.00"}`;
+    updatedStats[1].value = `$${Number(totalBalancePnl?.pnl ?? 0)?.toFixed(2) ?? "0.00"}`;
+    updatedStats[2].value = `$${sumStatsTrading?.toFixed(2) ?? "0.00"}`;
     const calculateChange = (data: DataPoint[]) => {
       if (data.length === 0) {
         return {
@@ -70,9 +83,19 @@ export const MarketDataSection: React.FC = observer(() => {
       };
     };
     updatedStats[0].change = calculateChange(portfolioVolume);
-    updatedStats[1].change = calculateChange(tradingVolume);
+    updatedStats[1].change = {
+      value: "hide",
+      percentage: Number(totalBalancePnl?.pnlInPercent ?? 0).toFixed(2) + "%",
+      direction: Number(totalBalancePnl?.pnlInPercent) > 0 ? "up" : "down",
+    };
+    updatedStats[2].change = calculateChange(tradingVolume);
     setUserStats(updatedStats);
-  }, [dashboardStore.rowSnapshots, dashboardStore.activeFilter, dashboardStore.tradeEvents]);
+  }, [
+    dashboardStore.rowSnapshots,
+    dashboardStore.activeFilter,
+    dashboardStore.tradeEvents,
+    dashboardStore.balancePnlByUser,
+  ]);
 
   return <MarketDataCard attributes={userStats} />;
 });

src/screens/SpotScreen/BottomTables/BottomTables.tsx

@@ -4,14 +4,12 @@ import { observer } from "mobx-react";
 
 import { media } from "@themes/breakpoints";
 
-import { SpotTableImplProps } from "@screens/SpotScreen/BottomTables/SpotTable/SpotTableImpl";
-
 import SpotTable from "./SpotTable";
 
-const BottomTables: React.FC<SpotTableImplProps> = observer(({ isShowBalance }) => {
+const BottomTables = observer(() => {
   return (
     <StyledBottomTables>
-      <SpotTable isShowBalance={isShowBalance} />
+      <SpotTable />
     </StyledBottomTables>
   );
 });

src/screens/SpotScreen/BottomTables/SpotTable/SpotTable.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import SpotTableImpl, { SpotTableImplProps } from "./SpotTableImpl";
+import SpotTableImpl from "./SpotTableImpl";
 import { SpotTableVMProvider } from "./SpotTableVM";
 
-const SpotTable: React.FC<SpotTableImplProps> = ({ isShowBalance }) => (
+const SpotTable = () => (
   <SpotTableVMProvider>
-    <SpotTableImpl isShowBalance={isShowBalance} />
+    <SpotTableImpl />
   </SpotTableVMProvider>
 );
 

src/screens/SpotScreen/BottomTables/SpotTable/SpotTableImpl.tsx

@@ -32,6 +32,30 @@ const orderColumnHelper = createColumnHelper<SpotMarketOrder>();
 const tradeColumnHelper = createColumnHelper<SpotMarketOrder>();
 const balanceColumnHelper = createColumnHelper<AssetBlockData>();
 
+const generatePnl = (pnl: string, theme: Theme, isCoin: boolean = true) => {
+  const bnPnl = new BN(pnl ?? 0).decimalPlaces(2, BN.ROUND_UP);
+  const isPositive = bnPnl.isGreaterThan(0);
+  const isNegative = bnPnl.isLessThan(0);
+  const sign = isPositive ? "+" : isNegative ? "-" : "";
+  const displayValue = bnPnl.abs().toString();
+
+  const color = bnPnl.isGreaterThan(0)
+    ? theme.colors.greenLight
+    : bnPnl.isLessThan(0)
+      ? theme.colors.redLight
+      : undefined;
+
+  return isCoin ? (
+    <Text color={color} primary={bnPnl.eq(BN.ZERO)} type="BODY">
+      {`${sign}$${displayValue}`}
+    </Text>
+  ) : (
+    <Text color={color} primary={bnPnl.eq(BN.ZERO)} type="BODY">
+      {`(${sign}${displayValue}%)`}
+    </Text>
+  );
+};
+
 const ORDER_COLUMNS = (vm: ReturnType<typeof useSpotTableVMProvider>, theme: Theme) => [
   orderColumnHelper.accessor("timestamp", {
     header: "Date",
@@ -181,6 +205,18 @@ const BALANCE_COLUMNS = (
       );
     },
   }),
+  balanceColumnHelper.accessor("pnl", {
+    header: "PnL",
+    cell: (props) => {
+      const pnlPrecent = props.row.original.pnlPrecent;
+      return (
+        <SmartFlex gap="6px">
+          {generatePnl(props.getValue(), theme) ?? 0}
+          {generatePnl(pnlPrecent, theme, false)}
+        </SmartFlex>
+      );
+    },
+  }),
   balanceColumnHelper.accessor("contractBalance", {
     header: () => {
       return;
@@ -210,10 +246,8 @@ const BALANCE_COLUMNS = (
 const minNeedLengthPagination = 10;
 const startPage = 1;
 // todo: Упростить логику разделить формирование данных и рендер для декстопа и мобилок
-export interface SpotTableImplProps {
-  isShowBalance?: boolean;
-}
-const SpotTableImpl: React.FC<SpotTableImplProps> = observer(({ isShowBalance = true }) => {
+
+const SpotTableImpl = observer(() => {
   const { accountStore, settingsStore, balanceStore } = useStores();
   const [isLoading, setLoading] = useState<string | null>(null);
   const vm = useSpotTableVMProvider();
@@ -245,7 +279,7 @@ const SpotTableImpl: React.FC<SpotTableImplProps> = observer(({ isShowBalance =
   const TABS = [
     { title: "ORDERS", disabled: false, rowCount: openOrdersCount },
     { title: "HISTORY", disabled: false, rowCount: historyOrdersCount },
-    ...(isShowBalance ? [{ title: "BALANCES", disabled: false, rowCount: balancesInfoList.length }] : []),
+    { title: "BALANCES", disabled: false, rowCount: balancesInfoList.length },
   ];
 
   useEffect(() => {

src/stores/BalanceStore.ts

@@ -17,6 +17,11 @@ import RootStore from "./RootStore";
 
 const UPDATE_INTERVAL = 5 * 1000;
 
+interface PnlFormatted {
+  pnl: BN;
+  pnlPrecent: BN;
+}
+
 export class BalanceStore {
   public balances: Map<string, BN> = new Map();
   public contractBalances: Map<string, BN> = new Map();
@@ -57,17 +62,36 @@ export class BalanceStore {
   };
 
   get formattedBalanceInfoList() {
-    const { oracleStore } = this.rootStore;
+    const { oracleStore, dashboardStore } = this.rootStore;
 
     const bcNetwork = FuelNetwork.getInstance();
     const tokens = bcNetwork.getTokenList();
+    const pnls = dashboardStore.balancePnlByUser;
+    const pnlsFormatted: Record<string, PnlFormatted> = pnls.reduce(
+      (acc, el) => {
+        const asset = CONFIG.ALL_MARKETS.find((item) => item.contractId === el.market)?.baseAssetId;
+        if (!asset) return acc;
+
+        if (!acc[asset]) {
+          acc[asset] = { pnl: new BN(0), pnlPrecent: new BN(0) };
+        }
+
+        acc[asset].pnl = acc[asset].pnl.plus(el.pnlAllTime);
+        acc[asset].pnlPrecent = acc[asset].pnlPrecent.plus(el.pnlInPersentAllTime);
+
+        return acc;
+      },
+      {} as Record<string, PnlFormatted>,
+    );
 
     return tokens.map((token) => {
       const balance = this.getWalletBalance(token.assetId);
       const contractBalance = this.getContractBalance(token.assetId);
       const orderBalance = this.getOrderBalances(token.assetId);
       const totalBalance = balance.plus(contractBalance);
       return {
+        pnl: pnlsFormatted[token.assetId]?.pnl.toFixed(2),
+        pnlPrecent: pnlsFormatted[token.assetId]?.pnlPrecent.toFixed(2),
         assetId: token.assetId,
         asset: token,
         walletBalance: BN.formatUnits(balance, token.decimals).toString(),