@kodiak-finance/orderly-portfolio 2.8.21-alpha.0 → 2.8.21-rc.2

package/dist/index.mjs

@@ -10641,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) })
               ] })
             ] })
@@ -10661,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),
       "%"
     ] })
@@ -10914,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: [