@loafmarkets/ui 0.1.97 → 0.1.99

package/dist/index.mjs

@@ -1979,6 +1979,7 @@ var Orderbook = React5.forwardRef(
     onLoafLiquidityClick,
     tradeExplorerUrl,
     maxLevels,
+    fillHeight = false,
     className,
     ...props
   }, ref) => {
@@ -2079,7 +2080,8 @@ var Orderbook = React5.forwardRef(
       tradeExplorerUrl,
       onPriceClick,
       levelCount: effectiveLevels,
-      compactLevelCount: effectiveCompactLevels
+      compactLevelCount: effectiveCompactLevels,
+      fillHeight
     };
     return /* @__PURE__ */ jsx(
       Card,
@@ -2088,6 +2090,7 @@ var Orderbook = React5.forwardRef(
         className: cn(
           "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col",
           isCompact && "max-w-none",
+          fillHeight && "h-full",
           className
         ),
         ...props,
@@ -2149,7 +2152,8 @@ function DesktopOrderbookLayout({
   tradeExplorerUrl,
   onPriceClick,
   levelCount: effectiveLevels,
-  compactLevelCount: _compactLevelCount
+  compactLevelCount: _compactLevelCount,
+  fillHeight
 }) {
   const midRef = React5.useRef(null);
   useMidPriceFlash(midRef, midPrice, "#0b1a24");
@@ -2254,12 +2258,12 @@ function DesktopOrderbookLayout({
             );
           }) })
         }
-      ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0 overflow-hidden", children: [
+      ) : /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex flex-col justify-end overflow-hidden flex-shrink-0",
-            style: { height: `${sectionHeight}px` },
+            className: cn("flex flex-col justify-end overflow-hidden", !fillHeight && "flex-shrink-0"),
+            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
             children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsx(
               DepthRow,
               {
@@ -2299,8 +2303,8 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex flex-col overflow-hidden flex-shrink-0",
-            style: { height: `${sectionHeight}px` },
+            className: cn("flex flex-col overflow-hidden", !fillHeight && "flex-shrink-0"),
+            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
             children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsx(
               DepthRow,
               {
@@ -9645,7 +9649,8 @@ function AssetSelectorBar({
   currentTokenName,
   selectorItems,
   onSelect,
-  trailing
+  trailing,
+  imageUrl
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -9654,6 +9659,7 @@ function AssetSelectorBar({
     ...offeringValuation != null ? [{ label: "Offering Valuation", value: `$${offeringValuation.toLocaleString()}` }] : []
   ];
   return /* @__PURE__ */ jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxs(IPOAssetSelector, { children: [
+    imageUrl && /* @__PURE__ */ jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
     /* @__PURE__ */ jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxs(AssetName, { children: [
       propertyName,
       hasItems && /* @__PURE__ */ jsx(
@@ -9743,6 +9749,20 @@ var IPOAssetSelector = styled25.div`
     padding: 0.6rem 0.75rem;
   }
 `;
+var AssetThumbnail = styled25.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  @media (max-width: 768px) {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+  }
+`;
 var AssetSelectorDropdown = styled25.div`
   display: flex;
   align-items: center;
@@ -11942,7 +11962,7 @@ function PortfolioActivityPanel({
           ] }),
           /* @__PURE__ */ jsxs(HoldingsQuantity, { children: [
             /* @__PURE__ */ jsxs("span", { children: [
-              pos.quantity.toFixed(2),
+              formatNumber2(pos.quantity),
               " ",
               pos.tokenName
             ] }),
@@ -11954,8 +11974,7 @@ function PortfolioActivityPanel({
           /* @__PURE__ */ jsxs(HoldingsPnL, { children: [
             /* @__PURE__ */ jsxs(PnLAmount, { $positive: isPositive, children: [
               isPositive ? "+" : "-",
-              "$",
-              Math.abs(pnl).toFixed(2)
+              formatCurrency5(Math.abs(pnl))
             ] }),
             /* @__PURE__ */ jsxs(PnLPercentage, { $positive: isPositive, children: [
               isPositive ? "+" : "",