@kodiak-finance/orderly-portfolio 2.8.20 → 2.8.21-rc.1

package/dist/index.mjs

@@ -7396,6 +7396,12 @@ var PortfolioHandleMobile = (props) => {
       name: t("trading.history")
     });
   };
+  const onGotoSymbolPerformance = () => {
+    props.routerAdapter?.onRouteChange({
+      href: "/portfolio/symbol-performance" /* SymbolPerformance */,
+      name: t("portfolio.symbolPerformance")
+    });
+  };
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -7474,6 +7480,37 @@ var PortfolioHandleMobile = (props) => {
               /* @__PURE__ */ jsx(Text, { className: "oui-text-base-80 oui-text-2xs", children: t("trading.history") })
             ]
           }
+        ),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "column",
+            gapY: 2,
+            itemAlign: "center",
+            className: "oui-flex-1 oui-cursor-pointer",
+            onClick: onGotoSymbolPerformance,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "oui-flex oui-size-[48px] oui-items-center oui-justify-center oui-rounded-xl oui-bg-base-9", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "28",
+                  height: "28",
+                  viewBox: "0 0 18 18",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "oui-text-white",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M13.5 3.75C12.8096 3.75 12.375 4.18467 12.375 4.875V12.375C12.375 13.0654 12.8096 13.5 13.5 13.5H14.625C15.3154 13.5 15.75 13.0654 15.75 12.375V4.875C15.75 4.18467 15.3154 3.75 14.625 3.75H13.5ZM13.5 5.25H14.625V12.375H13.5V5.25ZM8.25 6.75C7.55964 6.75 7.125 7.18467 7.125 7.875V12.375C7.125 13.0654 7.55964 13.5 8.25 13.5H9.375C10.0654 13.5 10.5 13.0654 10.5 12.375V7.875C10.5 7.18467 10.0654 6.75 9.375 6.75H8.25ZM8.25 8.25H9.375V12.375H8.25V8.25ZM3 9.75C2.30964 9.75 1.875 10.1847 1.875 10.875V12.375C1.875 13.0654 2.30964 13.5 3 13.5H4.125C4.81536 13.5 5.25 13.0654 5.25 12.375V10.875C5.25 10.1847 4.81536 9.75 4.125 9.75H3ZM3 11.25H4.125V12.375H3V11.25Z",
+                      fill: "currentColor"
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Text, { className: "oui-text-base-80 oui-text-2xs", children: t("portfolio.symbolPerformance") })
+            ]
+          }
         )
       ]
     }
@@ -10604,13 +10641,13 @@ var PnLRankingChartMobile = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-justify-between oui-gap-2 oui-border-t oui-border-line-4 oui-pt-2", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, className: "oui-mb-0.5", children: t("portfolio.symbolPerformance.pnlRanking.volume") }),
+            /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-justify-between oui-gap-4 oui-border-t oui-border-line-4 oui-pt-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1", children: [
+                /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("portfolio.symbolPerformance.pnlRanking.volume") }),
                 /* @__PURE__ */ jsx(Text, { size: "xs", weight: "semibold", children: formatCurrency2(item.volume) })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "oui-text-right", children: [
-                /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, className: "oui-mb-0.5", children: t("portfolio.symbolPerformance.pnlRanking.fees") }),
+              /* @__PURE__ */ jsxs("div", { className: "oui-text-right oui-flex oui-flex-col oui-gap-1", children: [
+                /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("portfolio.symbolPerformance.pnlRanking.fees") }),
                 /* @__PURE__ */ jsx(Text, { size: "xs", weight: "semibold", intensity: 80, children: formatCurrency2(item.fees) })
               ] })
             ] })
@@ -10624,13 +10661,13 @@ var PnLRankingChartMobile = ({
 };
 var MakerTakerShare2 = ({ makerShare }) => {
   const takerShare = 100 - makerShare;
-  return /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "center", gap: 1, children: [
-    /* @__PURE__ */ jsxs(Text, { weight: "semibold", size: "2xs", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-justify-center oui-gap-4", children: [
+    /* @__PURE__ */ jsxs(Text, { weight: "semibold", children: [
       makerShare.toFixed(1),
       "%"
     ] }),
     /* @__PURE__ */ jsx("span", { className: "oui-text-base-contrast-54", children: "/" }),
-    /* @__PURE__ */ jsxs(Text, { weight: "semibold", size: "2xs", children: [
+    /* @__PURE__ */ jsxs(Text, { weight: "semibold", children: [
       takerShare.toFixed(1),
       "%"
     ] })
@@ -10877,46 +10914,51 @@ var SymbolPerformanceUIMobile = (props) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", gap: 2, mb: 4, children: [
-      /* @__PURE__ */ jsxs(
-        Flex,
+    /* @__PURE__ */ jsxs(Grid, { cols: 2, gap: 2, mb: 2, children: [
+      /* @__PURE__ */ jsx(Card, { className: "oui-bg-base-7 oui-border oui-border-line-4 oui-p-1.5", children: /* @__PURE__ */ jsx(
+        Statistic,
         {
-          gap: 1,
-          direction: "column",
-          itemAlign: "start",
-          className: "oui-w-1/3 oui-rounded-lg oui-bg-base-7 oui-px-2 oui-py-1.5",
-          children: [
-            /* @__PURE__ */ jsx(Text, { className: "oui-truncate", intensity: 36, size: "2xs", children: t("portfolio.symbolPerformance.totalPnL") }),
-            /* @__PURE__ */ jsx(Text.numeral, { size: "sm", weight: "semibold", coloring: true, children: performanceData ? performanceData.totalPnL.toFixed(2) : "--" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Flex,
+          label: `${t("portfolio.symbolPerformance.totalPnL")} (Gross)`,
+          valueProps: { coloring: true, showIdentifier: true, dp: 2 },
+          classNames: { value: "oui-text-sm oui-font-semibold" },
+          children: performanceData?.grossPnL ?? "-"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Card, { className: "oui-bg-base-7 oui-border oui-border-line-4 oui-p-1.5", children: /* @__PURE__ */ jsx(
+        Statistic,
         {
-          gap: 1,
-          direction: "column",
-          itemAlign: "start",
-          className: "oui-w-1/3 oui-rounded-lg oui-bg-base-7 oui-px-2 oui-py-1.5",
-          children: [
-            /* @__PURE__ */ jsx(Text, { className: "oui-truncate", intensity: 36, size: "2xs", children: t("portfolio.symbolPerformance.totalVolume") }),
-            /* @__PURE__ */ jsx(Text.numeral, { size: "sm", coloring: false, children: performanceData ? performanceData.totalVolume.toFixed(2) : "--" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Flex,
+          label: t("portfolio.symbolPerformance.totalFees"),
+          valueProps: { dp: 2 },
+          classNames: { value: "oui-text-sm" },
+          children: performanceData?.totalFees ?? "-"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Card, { className: "oui-bg-base-7 oui-border oui-border-line-4 oui-p-1.5", children: /* @__PURE__ */ jsx(
+        Statistic,
         {
-          gap: 1,
-          direction: "column",
-          itemAlign: "start",
-          className: "oui-w-1/3 oui-rounded-lg oui-bg-base-7 oui-px-2 oui-py-1.5",
-          children: [
-            /* @__PURE__ */ jsx(Text, { className: "oui-truncate", intensity: 36, size: "2xs", children: "Maker / Taker" }),
-            /* @__PURE__ */ jsx("div", { className: "oui-text-sm", children: performanceData ? /* @__PURE__ */ jsx(MakerTakerShare2, { makerShare: performanceData.makerShare }) : /* @__PURE__ */ jsx(Text, { size: "sm", children: "--" }) })
-          ]
+          label: `${t("portfolio.symbolPerformance.totalPnL")} (Net)`,
+          valueProps: { coloring: true, showIdentifier: true, dp: 2 },
+          classNames: { value: "oui-text-sm oui-font-semibold" },
+          children: performanceData?.totalPnL ?? "-"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Card, { className: "oui-bg-base-7 oui-border oui-border-line-4 oui-p-1.5", children: /* @__PURE__ */ jsx(
+        Statistic,
+        {
+          label: t("portfolio.symbolPerformance.totalVolume"),
+          valueProps: { dp: 2 },
+          classNames: { value: "oui-text-sm" },
+          children: performanceData?.totalVolume ?? "-"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Card, { className: "oui-bg-base-7 oui-border oui-border-line-4 oui-p-1.5 oui-col-span-2", children: /* @__PURE__ */ jsx(
+        Statistic,
+        {
+          label: "Maker / Taker",
+          classNames: { value: "oui-text-sm oui-font-semibold" },
+          children: performanceData ? /* @__PURE__ */ jsx(MakerTakerShare2, { makerShare: performanceData.makerShare }) : "--"
         }
-      )
+      ) })
     ] }),
     /* @__PURE__ */ jsxs(Grid, { cols: 1, gap: 4, mb: 4, children: [
       /* @__PURE__ */ jsxs(Box, { children: [