@loafmarkets/ui 0.1.90 → 0.1.92

package/dist/index.d.mts

@@ -902,6 +902,7 @@ type AssetSelectorMetric = {
     value: ReactNode;
     accent?: boolean;
     change?: number;
+    secondary?: boolean;
 };
 type AssetSelectorBarProps = {
     propertyName: string;

package/dist/index.d.ts

@@ -902,6 +902,7 @@ type AssetSelectorMetric = {
     value: ReactNode;
     accent?: boolean;
     change?: number;
+    secondary?: boolean;
 };
 type AssetSelectorBarProps = {
     propertyName: string;

package/dist/index.js

@@ -9700,7 +9700,7 @@ function AssetSelectorBar({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: m.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(MetricValue, { $accent: !!m.accent, children: m.value })
+          /* @__PURE__ */ jsxRuntime.jsx(MetricValue, { $accent: !!m.accent, $secondary: !!m.secondary, children: m.value })
         ] }),
         m.change != null && /* @__PURE__ */ jsxRuntime.jsxs(MetricChange, { $positive: m.change >= 0, children: [
           m.change >= 0 ? "\u2191" : "\u2193",
@@ -9836,16 +9836,16 @@ var MetricLabel2 = styled25__default.default.span`
   }
 `;
 var MetricValue = styled25__default.default.span`
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
+  font-size: ${(p) => p.$secondary ? "0.95rem" : "1.25rem"};
+  font-weight: ${(p) => p.$secondary ? "600" : "700"};
+  color: ${(p) => p.$accent ? "#D4AF37" : p.$secondary ? "rgba(255,255,255,0.7)" : "#fff"};
 
   @media (max-width: 768px) {
-    font-size: 1.05rem;
+    font-size: ${(p) => p.$secondary ? "0.85rem" : "1.05rem"};
   }
 
   @media (max-width: 480px) {
-    font-size: 0.95rem;
+    font-size: ${(p) => p.$secondary ? "0.8rem" : "0.95rem"};
   }
 `;
 var MetricChange = styled25__default.default.span`
@@ -11813,8 +11813,8 @@ var InsufficientFunds = styled25__default.default.div`
 `;
 var ACTIVITY_PAGE_SIZE_DEFAULT = 10;
 var formatCurrency5 = (value, opts) => {
-  const min = 2;
-  const max = 2;
+  const min = opts?.minimumFractionDigits ?? 2;
+  const max = opts?.maximumFractionDigits ?? 2;
   return `$${value.toLocaleString("en-US", { minimumFractionDigits: min, maximumFractionDigits: max })}`;
 };
 var formatNumber2 = (value, maximumFractionDigits = 2) => value.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits });
@@ -11966,15 +11966,16 @@ function PortfolioActivityPanel({
               " of portfolio"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HoldingsQuantity, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              pos.quantity.toFixed(2),
-              " ",
-              pos.tokenName
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(HoldingsAvgEntry, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HoldingsQuantity, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            pos.quantity.toFixed(2),
+            " ",
+            pos.tokenName
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(HoldingsValue, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency5(currentValue) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(HoldingsAvgCost, { children: [
               "Avg ",
-              formatCurrency5(pos.averageEntryPrice)
+              formatCurrency5(costBasis, { maximumFractionDigits: 0 })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(HoldingsPnL, { children: [
@@ -12374,7 +12375,7 @@ var PaginationLabel = styled25__default.default.span`
 `;
 var HoldingsItem = styled25__default.default.div`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
   align-items: center;
   padding: 0.5rem 0;
   min-height: 50px;
@@ -12408,10 +12409,19 @@ var HoldingsQuantity = styled25__default.default.div`
   font-weight: 500;
   color: #fff;
 `;
-var HoldingsAvgEntry = styled25__default.default.div`
-  font-size: 0.7rem;
-  color: var(--color-accent, #E6C87E);
-  font-weight: 500;
+var HoldingsValue = styled25__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #fff;
+`;
+var HoldingsAvgCost = styled25__default.default.div`
+  font-size: 0.65rem;
+  color: rgba(255, 255, 255, 0.4);
+  font-weight: 400;
 `;
 var HoldingsPnL = styled25__default.default.div`
   display: flex;