@loafmarkets/ui 0.1.97 → 0.1.99

package/dist/index.d.mts

@@ -107,6 +107,8 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     tradeExplorerUrl?: (txHash: string) => string;
     /** Override the number of visible price levels per side (default 5). */
     maxLevels?: number;
+    /** When true, asks/bids sections stretch to fill the container instead of using fixed pixel heights. */
+    fillHeight?: boolean;
 }
 declare const Orderbook: React$1.ForwardRefExoticComponent<OrderbookProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -913,8 +915,9 @@ type AssetSelectorBarProps = {
     selectorItems?: readonly SelectorItem[];
     onSelect?: (tokenName: string) => void;
     trailing?: ReactNode;
+    imageUrl?: string;
 };
-declare function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation, metrics: metricsProp, currentTokenName, selectorItems, onSelect, trailing, }: AssetSelectorBarProps): react_jsx_runtime.JSX.Element;
+declare function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation, metrics: metricsProp, currentTokenName, selectorItems, onSelect, trailing, imageUrl, }: AssetSelectorBarProps): react_jsx_runtime.JSX.Element;
 
 type IpoStatus = 'PENDING' | 'LIVE' | 'CLOSED' | 'CANCELLED';
 type SaleData = {

package/dist/index.d.ts

@@ -107,6 +107,8 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     tradeExplorerUrl?: (txHash: string) => string;
     /** Override the number of visible price levels per side (default 5). */
     maxLevels?: number;
+    /** When true, asks/bids sections stretch to fill the container instead of using fixed pixel heights. */
+    fillHeight?: boolean;
 }
 declare const Orderbook: React$1.ForwardRefExoticComponent<OrderbookProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -913,8 +915,9 @@ type AssetSelectorBarProps = {
     selectorItems?: readonly SelectorItem[];
     onSelect?: (tokenName: string) => void;
     trailing?: ReactNode;
+    imageUrl?: string;
 };
-declare function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation, metrics: metricsProp, currentTokenName, selectorItems, onSelect, trailing, }: AssetSelectorBarProps): react_jsx_runtime.JSX.Element;
+declare function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation, metrics: metricsProp, currentTokenName, selectorItems, onSelect, trailing, imageUrl, }: AssetSelectorBarProps): react_jsx_runtime.JSX.Element;
 
 type IpoStatus = 'PENDING' | 'LIVE' | 'CLOSED' | 'CANCELLED';
 type SaleData = {

package/dist/index.js

@@ -2005,6 +2005,7 @@ var Orderbook = React5__namespace.forwardRef(
     onLoafLiquidityClick,
     tradeExplorerUrl,
     maxLevels,
+    fillHeight = false,
     className,
     ...props
   }, ref) => {
@@ -2105,7 +2106,8 @@ var Orderbook = React5__namespace.forwardRef(
       tradeExplorerUrl,
       onPriceClick,
       levelCount: effectiveLevels,
-      compactLevelCount: effectiveCompactLevels
+      compactLevelCount: effectiveCompactLevels,
+      fillHeight
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Card,
@@ -2114,6 +2116,7 @@ var Orderbook = React5__namespace.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,
@@ -2175,7 +2178,8 @@ function DesktopOrderbookLayout({
   tradeExplorerUrl,
   onPriceClick,
   levelCount: effectiveLevels,
-  compactLevelCount: _compactLevelCount
+  compactLevelCount: _compactLevelCount,
+  fillHeight
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "#0b1a24");
@@ -2280,12 +2284,12 @@ function DesktopOrderbookLayout({
             );
           }) })
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-h-0 overflow-hidden", children: [
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               DepthRow,
               {
@@ -2325,8 +2329,8 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               DepthRow,
               {
@@ -9671,7 +9675,8 @@ function AssetSelectorBar({
   currentTokenName,
   selectorItems,
   onSelect,
-  trailing
+  trailing,
+  imageUrl
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -9680,6 +9685,7 @@ function AssetSelectorBar({
     ...offeringValuation != null ? [{ label: "Offering Valuation", value: `$${offeringValuation.toLocaleString()}` }] : []
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(IPOAssetSelector, { children: [
+    imageUrl && /* @__PURE__ */ jsxRuntime.jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
     /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
       propertyName,
       hasItems && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9769,6 +9775,20 @@ var IPOAssetSelector = styled25__default.default.div`
     padding: 0.6rem 0.75rem;
   }
 `;
+var AssetThumbnail = styled25__default.default.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__default.default.div`
   display: flex;
   align-items: center;
@@ -11968,7 +11988,7 @@ function PortfolioActivityPanel({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(HoldingsQuantity, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              pos.quantity.toFixed(2),
+              formatNumber2(pos.quantity),
               " ",
               pos.tokenName
             ] }),
@@ -11980,8 +12000,7 @@ function PortfolioActivityPanel({
           /* @__PURE__ */ jsxRuntime.jsxs(HoldingsPnL, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs(PnLAmount, { $positive: isPositive, children: [
               isPositive ? "+" : "-",
-              "$",
-              Math.abs(pnl).toFixed(2)
+              formatCurrency5(Math.abs(pnl))
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(PnLPercentage, { $positive: isPositive, children: [
               isPositive ? "+" : "",