@loafmarkets/ui 0.1.101 → 0.1.103

package/dist/index.mjs

@@ -9695,7 +9695,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__ */ jsxs(
+      return /* @__PURE__ */ jsx(
         IPOOption,
         {
           onClick: () => {
@@ -9706,16 +9706,19 @@ function AssetSelectorBar({
           },
           $selected: isCurrent,
           style: { cursor: isCurrent ? "default" : "pointer" },
-          children: [
-            /* @__PURE__ */ jsxs(IPOOptionName, { children: [
-              item.streetAddress,
-              item.ticker ? ` (${item.ticker})` : ""
-            ] }),
-            /* @__PURE__ */ jsxs(IPOOptionLocation, { children: [
-              item.suburb,
-              statusLabel && /* @__PURE__ */ jsx("span", { children: statusLabel })
+          children: /* @__PURE__ */ jsxs(IPOOptionInner, { children: [
+            item.imageUrl && /* @__PURE__ */ jsx(IPOOptionThumb, { src: item.imageUrl, alt: item.streetAddress }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs(IPOOptionName, { children: [
+                item.streetAddress,
+                item.ticker ? ` (${item.ticker})` : ""
+              ] }),
+              /* @__PURE__ */ jsxs(IPOOptionLocation, { children: [
+                item.suburb,
+                statusLabel && /* @__PURE__ */ jsx("span", { children: statusLabel })
+              ] })
             ] })
-          ]
+          ] })
         },
         item.tokenName
       );
@@ -9902,6 +9905,19 @@ var IPOOption = styled25.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.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+var IPOOptionThumb = styled25.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.div`
   font-weight: 600;
   font-size: 1rem;
@@ -11845,6 +11861,7 @@ function PortfolioActivityPanel({
   positions = [],
   showPositionsTab = false,
   onPositionClick,
+  onClosePosition,
   offeringOrders = [],
   openOrders = [],
   orderHistory = [],
@@ -11943,13 +11960,14 @@ function PortfolioActivityPanel({
     activeTab === "positions" && showPositionsTab && /* @__PURE__ */ jsxs(Fragment, { children: [
       positions.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "No positions yet. Subscribe to an offering or buy on the secondary market." }),
       positions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(PositionsHeader, { children: [
+        /* @__PURE__ */ jsxs(PositionsHeader, { $hasClose: !!onClosePosition, children: [
           /* @__PURE__ */ jsx(PositionsHeaderCell, { children: "Asset" }),
           /* @__PURE__ */ jsx(PositionsHeaderCell, { $align: "right", children: "Size" }),
           /* @__PURE__ */ jsx(PositionsHeaderCell, { $align: "right", children: "Value" }),
           /* @__PURE__ */ jsx(PositionsHeaderCell, { $align: "right", children: "Entry Price" }),
           /* @__PURE__ */ jsx(PositionsHeaderCell, { $align: "right", children: "Mark Price" }),
-          /* @__PURE__ */ jsx(PositionsHeaderCell, { $align: "right", children: "PNL (%)" })
+          /* @__PURE__ */ jsx(PositionsHeaderCell, { $align: "right", children: "PNL (%)" }),
+          onClosePosition && /* @__PURE__ */ jsx(PositionsHeaderCell, { $align: "right", children: "Close" })
         ] }),
         pageSlice(positions).map((pos) => {
           const currentValue = pos.quantity * pos.marketPrice;
@@ -11957,7 +11975,7 @@ function PortfolioActivityPanel({
           const pnl = pos.propertyPnl ?? currentValue - costBasis;
           const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
           const isPositive = pnl >= 0;
-          return /* @__PURE__ */ jsxs(PositionsRow, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
+          return /* @__PURE__ */ jsxs(PositionsRow, { $hasClose: !!onClosePosition, onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
             /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsx(HoldingsProperty, { children: pos.tokenName }) }),
             /* @__PURE__ */ jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatNumber2(pos.quantity) }) }),
             /* @__PURE__ */ jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatCurrency5(currentValue) }) }),
@@ -11973,7 +11991,17 @@ function PortfolioActivityPanel({
                 pnlPercent.toFixed(1),
                 "%"
               ] })
-            ] })
+            ] }),
+            onClosePosition && /* @__PURE__ */ jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxs(CloseActions, { children: [
+              /* @__PURE__ */ jsx(CloseBtn2, { onClick: (e) => {
+                e.stopPropagation();
+                onClosePosition(pos.tokenName, "limit", pos.quantity, pos.marketPrice);
+              }, children: "Limit" }),
+              /* @__PURE__ */ jsx(CloseBtn2, { onClick: (e) => {
+                e.stopPropagation();
+                onClosePosition(pos.tokenName, "market", pos.quantity, pos.marketPrice);
+              }, children: "Market" })
+            ] }) })
           ] }, pos.tokenName);
         })
       ] })
@@ -12360,7 +12388,7 @@ var PaginationLabel = styled25.span`
 `;
 var PositionsHeader = styled25.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);
@@ -12374,7 +12402,7 @@ var PositionsHeaderCell = styled25.div`
 `;
 var PositionsRow = styled25.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;
@@ -12497,6 +12525,28 @@ var CancelConfirmProceed = styled25.button`
     cursor: not-allowed;
   }
 `;
+var CloseActions = styled25.div`
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+`;
+var CloseBtn2 = styled25.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__ */ jsxs(Row2, { children: [
     /* @__PURE__ */ jsx(