@loafmarkets/ui 0.1.101 → 0.1.103

package/dist/index.d.mts

@@ -876,6 +876,7 @@ type PortfolioActivityPanelProps = {
     positions?: readonly PortfolioPosition[];
     showPositionsTab?: boolean;
     onPositionClick?: (tokenName: string, isIpo: boolean) => void;
+    onClosePosition?: (tokenName: string, type: 'market' | 'limit', quantity: number, marketPrice: number) => void;
     offeringOrders?: readonly OfferingOrder[];
     openOrders?: readonly OrderHistoryItem[];
     orderHistory?: readonly OrderHistoryItem[];
@@ -889,7 +890,7 @@ type PortfolioActivityPanelProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
+declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
 
 type SelectorItem = {
     readonly tokenName: string;
@@ -897,6 +898,7 @@ type SelectorItem = {
     readonly streetAddress: string;
     readonly suburb: string;
     readonly status: string;
+    readonly imageUrl?: string;
 };
 type AssetSelectorMetric = {
     label: string;

package/dist/index.d.ts

@@ -876,6 +876,7 @@ type PortfolioActivityPanelProps = {
     positions?: readonly PortfolioPosition[];
     showPositionsTab?: boolean;
     onPositionClick?: (tokenName: string, isIpo: boolean) => void;
+    onClosePosition?: (tokenName: string, type: 'market' | 'limit', quantity: number, marketPrice: number) => void;
     offeringOrders?: readonly OfferingOrder[];
     openOrders?: readonly OrderHistoryItem[];
     orderHistory?: readonly OrderHistoryItem[];
@@ -889,7 +890,7 @@ type PortfolioActivityPanelProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
+declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
 
 type SelectorItem = {
     readonly tokenName: string;
@@ -897,6 +898,7 @@ type SelectorItem = {
     readonly streetAddress: string;
     readonly suburb: string;
     readonly status: string;
+    readonly imageUrl?: string;
 };
 type AssetSelectorMetric = {
     label: string;

package/dist/index.js

@@ -9721,7 +9721,7 @@ function AssetSelectorBar({
       const isCurrent = item.tokenName === currentTokenName;
       const status = item.status?.toUpperCase();
       const statusLabel = status === "PENDING" ? "Coming Soon" : status === "CLOSED" ? "Closed" : status === "CANCELLED" ? "Cancelled" : null;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         IPOOption,
         {
           onClick: () => {
@@ -9732,16 +9732,19 @@ function AssetSelectorBar({
           },
           $selected: isCurrent,
           style: { cursor: isCurrent ? "default" : "pointer" },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
-              item.streetAddress,
-              item.ticker ? ` (${item.ticker})` : ""
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
-              item.suburb,
-              statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
+          children: /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionInner, { children: [
+            item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: item.streetAddress }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
+                item.streetAddress,
+                item.ticker ? ` (${item.ticker})` : ""
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
+                item.suburb,
+                statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
+              ] })
             ] })
-          ]
+          ] })
         },
         item.tokenName
       );
@@ -9928,6 +9931,19 @@ var IPOOption = styled25__default.default.div`
   &:hover { background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, transparent 100%); }
   ${(p) => p.$selected && `background: linear-gradient(90deg, rgba(56,97,251,0.15) 0%, transparent 100%);`}
 `;
+var IPOOptionInner = styled25__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+var IPOOptionThumb = styled25__default.default.img`
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+`;
 var IPOOptionName = styled25__default.default.div`
   font-weight: 600;
   font-size: 1rem;
@@ -11871,6 +11887,7 @@ function PortfolioActivityPanel({
   positions = [],
   showPositionsTab = false,
   onPositionClick,
+  onClosePosition,
   offeringOrders = [],
   openOrders = [],
   orderHistory = [],
@@ -11969,13 +11986,14 @@ function PortfolioActivityPanel({
     activeTab === "positions" && showPositionsTab && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       positions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "No positions yet. Subscribe to an offering or buy on the secondary market." }),
       positions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(PositionsHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(PositionsHeader, { $hasClose: !!onClosePosition, children: [
           /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Asset" }),
           /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Size" }),
           /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Value" }),
           /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Entry Price" }),
           /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Mark Price" }),
-          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "PNL (%)" })
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "PNL (%)" }),
+          onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Close" })
         ] }),
         pageSlice(positions).map((pos) => {
           const currentValue = pos.quantity * pos.marketPrice;
@@ -11983,7 +12001,7 @@ function PortfolioActivityPanel({
           const pnl = pos.propertyPnl ?? currentValue - costBasis;
           const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
           const isPositive = pnl >= 0;
-          return /* @__PURE__ */ jsxRuntime.jsxs(PositionsRow, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(PositionsRow, { $hasClose: !!onClosePosition, onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
             /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { children: /* @__PURE__ */ jsxRuntime.jsx(HoldingsProperty, { children: pos.tokenName }) }),
             /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatNumber2(pos.quantity) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatCurrency5(currentValue) }) }),
@@ -11999,7 +12017,17 @@ function PortfolioActivityPanel({
                 pnlPercent.toFixed(1),
                 "%"
               ] })
-            ] })
+            ] }),
+            onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsxs(CloseActions, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CloseBtn2, { onClick: (e) => {
+                e.stopPropagation();
+                onClosePosition(pos.tokenName, "limit", pos.quantity, pos.marketPrice);
+              }, children: "Limit" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CloseBtn2, { onClick: (e) => {
+                e.stopPropagation();
+                onClosePosition(pos.tokenName, "market", pos.quantity, pos.marketPrice);
+              }, children: "Market" })
+            ] }) })
           ] }, pos.tokenName);
         })
       ] })
@@ -12386,7 +12414,7 @@ var PaginationLabel = styled25__default.default.span`
 `;
 var PositionsHeader = styled25__default.default.div`
   display: grid;
-  grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr 1.2fr;
+  grid-template-columns: ${(p) => p.$hasClose ? "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr auto" : "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr"};
   gap: 0 0.5rem;
   padding: 0.4rem 0.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
@@ -12400,7 +12428,7 @@ var PositionsHeaderCell = styled25__default.default.div`
 `;
 var PositionsRow = styled25__default.default.div`
   display: grid;
-  grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr 1.2fr;
+  grid-template-columns: ${(p) => p.$hasClose ? "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr auto" : "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr"};
   align-items: center;
   gap: 0 0.5rem;
   padding: 0.5rem 0.5rem;
@@ -12523,6 +12551,28 @@ var CancelConfirmProceed = styled25__default.default.button`
     cursor: not-allowed;
   }
 `;
+var CloseActions = styled25__default.default.div`
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+`;
+var CloseBtn2 = styled25__default.default.button`
+  background: transparent;
+  border: 1px solid rgba(246, 70, 93, 0.25);
+  border-radius: 4px;
+  padding: 0.15rem 0.5rem;
+  font-size: 0.62rem;
+  font-weight: 600;
+  color: #f6465d;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: rgba(246, 70, 93, 0.1);
+    border-color: rgba(246, 70, 93, 0.5);
+  }
+`;
 function NewsOrdersSection({ newsItems, newsConnectionStatus, activityData }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Row2, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(