@loafmarkets/ui 0.1.290 → 0.1.292

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -12828,7 +12828,7 @@ function OrderPanel({
12828
12828
  var Panel = styled9__default.default.div`
12829
12829
  background-color: var(--color-card-darker, #111);
12830
12830
  border-radius: 8px;
12831
- padding: 1.5rem;
12831
+ padding: 1.25rem;
12832
12832
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
12833
12833
  border: 1px solid var(--color-border);
12834
12834
  height: 100%;
@@ -12856,11 +12856,11 @@ var PanelHeader2 = styled9__default.default.div`
12856
12856
  display: flex;
12857
12857
  justify-content: space-between;
12858
12858
  align-items: center;
12859
- margin-bottom: 1rem;
12860
- padding-bottom: 0.75rem;
12859
+ margin-bottom: 0.75rem;
12860
+ padding-bottom: 0.5rem;
12861
12861
  border-bottom: 1px solid var(--color-border);
12862
12862
  span:first-child {
12863
- font-size: 1rem;
12863
+ font-size: 0.9rem;
12864
12864
  font-weight: 600;
12865
12865
  color: var(--color-text);
12866
12866
  }
@@ -12881,18 +12881,18 @@ var StatusBadge2 = styled9__default.default.span`
12881
12881
  var Card2 = styled9__default.default.div`
12882
12882
  background: rgba(0,0,0,0.4);
12883
12883
  border: 1px solid rgba(255,255,255,0.15);
12884
- border-radius: 12px;
12885
- padding: 1rem 1.25rem;
12884
+ border-radius: 10px;
12885
+ padding: 0.75rem 1rem;
12886
12886
 
12887
12887
  @media (max-width: 480px) {
12888
- padding: 0.75rem 1rem;
12889
- border-radius: 10px;
12888
+ padding: 0.6rem 0.85rem;
12889
+ border-radius: 8px;
12890
12890
  }
12891
12891
  `;
12892
12892
  var CardLabel = styled9__default.default.div`
12893
- font-size: 0.75rem;
12893
+ font-size: 0.7rem;
12894
12894
  color: var(--color-text-secondary);
12895
- margin-bottom: 0.5rem;
12895
+ margin-bottom: 0.3rem;
12896
12896
  `;
12897
12897
  var CardInputRow = styled9__default.default.div`
12898
12898
  display: flex;
@@ -12902,17 +12902,17 @@ var CardInputRow = styled9__default.default.div`
12902
12902
  background: transparent;
12903
12903
  border: none;
12904
12904
  outline: none;
12905
- font-size: 1.75rem;
12905
+ font-size: 1.4rem;
12906
12906
  font-weight: 600;
12907
12907
  color: #fff;
12908
12908
  width: 100%;
12909
12909
 
12910
12910
  @media (max-width: 480px) {
12911
- font-size: 1.35rem;
12911
+ font-size: 1.15rem;
12912
12912
  }
12913
12913
  }
12914
12914
  span {
12915
- font-size: 1rem;
12915
+ font-size: 0.9rem;
12916
12916
  color: var(--color-text-secondary);
12917
12917
  font-weight: 500;
12918
12918
  margin-left: 0.75rem;
@@ -12921,14 +12921,14 @@ var CardInputRow = styled9__default.default.div`
12921
12921
  `;
12922
12922
  var QuickSelectRow = styled9__default.default.div`
12923
12923
  display: flex;
12924
- gap: 0.5rem;
12925
- margin-top: 0.75rem;
12924
+ gap: 0.4rem;
12925
+ margin-top: 0.5rem;
12926
12926
  flex-wrap: wrap;
12927
12927
  button {
12928
12928
  flex: 1;
12929
12929
  min-width: 50px;
12930
- padding: 0.4rem 0;
12931
- font-size: 0.75rem;
12930
+ padding: 0.3rem 0;
12931
+ font-size: 0.7rem;
12932
12932
  font-weight: 500;
12933
12933
  background: rgba(255,255,255,0.05);
12934
12934
  border: 1px solid rgba(255,255,255,0.1);
@@ -12971,7 +12971,7 @@ var DepositButton2 = styled9__default.default.button`
12971
12971
  `;
12972
12972
  var Divider2 = styled9__default.default.div`
12973
12973
  text-align: center;
12974
- margin: 0.5rem 0;
12974
+ margin: 0.25rem 0;
12975
12975
  color: var(--color-text-secondary);
12976
12976
  `;
12977
12977
  var CardTopRow = styled9__default.default.div`
@@ -12987,12 +12987,12 @@ var CardHint = styled9__default.default.span`
12987
12987
  `;
12988
12988
  var OrderSummary = styled9__default.default.div`
12989
12989
  border-top: 1px solid rgba(255,255,255,0.08);
12990
- padding-top: 1rem;
12991
- margin-top: 0.5rem;
12992
- font-size: 0.8rem;
12990
+ padding-top: 0.65rem;
12991
+ margin-top: 0.35rem;
12992
+ font-size: 0.75rem;
12993
12993
  display: flex;
12994
12994
  flex-direction: column;
12995
- gap: 0.5rem;
12995
+ gap: 0.35rem;
12996
12996
  `;
12997
12997
  var SummaryRow = styled9__default.default.div`
12998
12998
  display: flex;
@@ -13011,15 +13011,15 @@ var SummaryTotal = styled9__default.default(SummaryRow)`
13011
13011
  var FormBody = styled9__default.default.div`
13012
13012
  display: flex;
13013
13013
  flex-direction: column;
13014
- gap: 0.75rem;
13014
+ gap: 0.5rem;
13015
13015
  `;
13016
13016
  var SubscribeButton = styled9__default.default.button`
13017
13017
  width: 100%;
13018
- margin-top: 1rem;
13019
- padding: 0.875rem;
13018
+ margin-top: 0.75rem;
13019
+ padding: 0.7rem;
13020
13020
  border-radius: 6px;
13021
13021
  font-weight: 600;
13022
- font-size: 0.9rem;
13022
+ font-size: 0.85rem;
13023
13023
  border: none;
13024
13024
  cursor: pointer;
13025
13025
  transition: all 0.2s;
@@ -13040,27 +13040,27 @@ var SubscribeButton = styled9__default.default.button`
13040
13040
  `;
13041
13041
  var BalanceCards = styled9__default.default.div`
13042
13042
  display: flex;
13043
- gap: 1rem;
13044
- margin-top: 1rem;
13043
+ gap: 0.75rem;
13044
+ margin-top: 0.75rem;
13045
13045
  flex-wrap: wrap;
13046
13046
  `;
13047
13047
  var BalanceCard = styled9__default.default.div`
13048
13048
  flex: 1;
13049
13049
  background: rgba(255,255,255,0.03);
13050
- border-radius: 12px;
13051
- padding: 1rem;
13050
+ border-radius: 10px;
13051
+ padding: 0.75rem;
13052
13052
  text-align: center;
13053
13053
  position: relative;
13054
13054
  `;
13055
13055
  var BalanceLabel = styled9__default.default.div`
13056
- font-size: 0.75rem;
13056
+ font-size: 0.7rem;
13057
13057
  color: var(--color-text-secondary);
13058
13058
  text-transform: uppercase;
13059
13059
  letter-spacing: 0.5px;
13060
- margin-bottom: 0.5rem;
13060
+ margin-bottom: 0.35rem;
13061
13061
  `;
13062
13062
  var BalanceValue = styled9__default.default.div`
13063
- font-size: 1.5rem;
13063
+ font-size: 1.25rem;
13064
13064
  font-weight: 700;
13065
13065
  color: #fff;
13066
13066
  span {
@@ -13664,7 +13664,6 @@ function PortfolioActivityPanel({
13664
13664
  }) {
13665
13665
  const resolvedDefaultTab = defaultTab ?? (showPositionsTab ? "positions" : showSubscriptionsTab ? "subscriptions" : "orders");
13666
13666
  const [activeTab, setActiveTab] = React5.useState(resolvedDefaultTab);
13667
- const [activityPage, setActivityPage] = React5.useState(0);
13668
13667
  const [pendingCancelOrderId, setPendingCancelOrderId] = React5.useState(null);
13669
13668
  const [cancelAllConfirmOpen, setCancelAllConfirmOpen] = React5.useState(false);
13670
13669
  const [cancellingAll, setCancellingAll] = React5.useState(false);
@@ -13767,7 +13766,7 @@ function PortfolioActivityPanel({
13767
13766
  }));
13768
13767
  return [...orderHistory, ...mapped].sort((a, b) => b.createdAt - a.createdAt);
13769
13768
  }, [showSubscriptionsTab, offeringOrders, orderHistory]);
13770
- const activeTabTotal = React5.useMemo(() => {
13769
+ React5.useMemo(() => {
13771
13770
  switch (activeTab) {
13772
13771
  case "positions":
13773
13772
  return positions.length;
@@ -13801,11 +13800,8 @@ function PortfolioActivityPanel({
13801
13800
  }).length,
13802
13801
  [offeringOrders]
13803
13802
  );
13804
- const activityTotalPages = Math.ceil(activeTabTotal / pageSize);
13805
- const pageSlice = (arr) => arr.slice(activityPage * pageSize, (activityPage + 1) * pageSize);
13806
13803
  const handleTabChange = (tab) => {
13807
13804
  setActiveTab(tab);
13808
- setActivityPage(0);
13809
13805
  };
13810
13806
  return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { className, style, children: [
13811
13807
  /* @__PURE__ */ jsxRuntime.jsx(PanelTitle, { children: "Activity" }),
@@ -13867,7 +13863,7 @@ function PortfolioActivityPanel({
13867
13863
  onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(CToolbarLink, { onClick: () => setCloseAllOpen(true), children: "Sell All" })
13868
13864
  ] })
13869
13865
  ] }),
13870
- pageSlice(sortedPositions).map((pos) => {
13866
+ sortedPositions.map((pos) => {
13871
13867
  const currentValue = pos.quantity * pos.marketPrice;
13872
13868
  const costBasis = pos.quantity * pos.averageEntryPrice;
13873
13869
  const pnl = pos.propertyPnl ?? currentValue - costBasis;
@@ -13961,7 +13957,7 @@ function PortfolioActivityPanel({
13961
13957
  ] }),
13962
13958
  onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseAllHeaderBtn, { onClick: () => setCloseAllOpen(true), children: "Sell All" }) })
13963
13959
  ] }),
13964
- pageSlice(sortedPositions).map((pos) => {
13960
+ sortedPositions.map((pos) => {
13965
13961
  const currentValue = pos.quantity * pos.marketPrice;
13966
13962
  const costBasis = pos.quantity * pos.averageEntryPrice;
13967
13963
  const pnl = pos.propertyPnl ?? currentValue - costBasis;
@@ -14038,7 +14034,7 @@ function PortfolioActivityPanel({
14038
14034
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14039
14035
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14040
14036
  ] }),
14041
- pageSlice(offeringOrders).map((order) => {
14037
+ offeringOrders.map((order) => {
14042
14038
  const meta = getOrderStatusMeta(order.status);
14043
14039
  return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
14044
14040
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: order.tokenName }) }),
@@ -14065,7 +14061,7 @@ function PortfolioActivityPanel({
14065
14061
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14066
14062
  onCancelOrder && /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, {})
14067
14063
  ] }),
14068
- pageSlice(openOrders).map((order) => {
14064
+ openOrders.map((order) => {
14069
14065
  const meta = getOrderStatusMeta(order.status);
14070
14066
  const isMarket = order.type === "MARKET";
14071
14067
  const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
@@ -14110,7 +14106,7 @@ function PortfolioActivityPanel({
14110
14106
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14111
14107
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14112
14108
  ] }),
14113
- pageSlice(mergedOrderHistory).map((order) => {
14109
+ mergedOrderHistory.map((order) => {
14114
14110
  const meta = getOrderStatusMeta(order.status);
14115
14111
  const isMarket = order.type === "MARKET";
14116
14112
  const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
@@ -14143,7 +14139,7 @@ function PortfolioActivityPanel({
14143
14139
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Fee" }),
14144
14140
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14145
14141
  ] }),
14146
- pageSlice(tradeHistory).map((trade) => /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
14142
+ tradeHistory.map((trade) => /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
14147
14143
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: trade.tokenName }) }),
14148
14144
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }) }),
14149
14145
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatNumber2(trade.quantity) }) }),
@@ -14164,7 +14160,7 @@ function PortfolioActivityPanel({
14164
14160
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14165
14161
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14166
14162
  ] }),
14167
- pageSlice(transfers).map((t, idx) => {
14163
+ transfers.map((t, idx) => {
14168
14164
  const isDeposit = t.type === "DEPOSIT";
14169
14165
  const statusMeta = getOrderStatusMeta(t.status);
14170
14166
  return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
@@ -14179,31 +14175,6 @@ function PortfolioActivityPanel({
14179
14175
  ] }, t.blockchainTxHash ?? `transfer-${idx}`);
14180
14176
  })
14181
14177
  ] })
14182
- ] }),
14183
- activityTotalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(PaginationRow, { children: [
14184
- /* @__PURE__ */ jsxRuntime.jsx(
14185
- PaginationButton,
14186
- {
14187
- type: "button",
14188
- onClick: () => setActivityPage((p) => p - 1),
14189
- disabled: activityPage === 0,
14190
- children: "\u2190 Prev"
14191
- }
14192
- ),
14193
- /* @__PURE__ */ jsxRuntime.jsxs(PaginationLabel, { children: [
14194
- activityPage + 1,
14195
- " / ",
14196
- activityTotalPages
14197
- ] }),
14198
- /* @__PURE__ */ jsxRuntime.jsx(
14199
- PaginationButton,
14200
- {
14201
- type: "button",
14202
- onClick: () => setActivityPage((p) => p + 1),
14203
- disabled: activityPage >= activityTotalPages - 1,
14204
- children: "Next \u2192"
14205
- }
14206
- )
14207
14178
  ] })
14208
14179
  ] }),
14209
14180
  cancelAllConfirmOpen && /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
@@ -14418,33 +14389,6 @@ var EmptyState = styled9__default.default.div`
14418
14389
  font-size: 0.8rem;
14419
14390
  color: rgba(255, 255, 255, 0.45);
14420
14391
  `;
14421
- var PaginationRow = styled9__default.default.div`
14422
- display: flex;
14423
- align-items: center;
14424
- justify-content: center;
14425
- gap: 0.75rem;
14426
- margin-top: 1rem;
14427
- padding-top: 1rem;
14428
- border-top: 1px solid rgba(255, 255, 255, 0.06);
14429
- `;
14430
- var PaginationButton = styled9__default.default.button`
14431
- background: transparent;
14432
- border: 1px solid rgba(255, 255, 255, 0.12);
14433
- border-radius: 8px;
14434
- padding: 0.35rem 0.75rem;
14435
- font-size: 0.8rem;
14436
- cursor: pointer;
14437
- color: rgba(255, 255, 255, 0.7);
14438
-
14439
- &:disabled {
14440
- color: rgba(255, 255, 255, 0.2);
14441
- cursor: default;
14442
- }
14443
- `;
14444
- var PaginationLabel = styled9__default.default.span`
14445
- font-size: 0.8rem;
14446
- color: rgba(255, 255, 255, 0.4);
14447
- `;
14448
14392
  var PositionsHeader = styled9__default.default.div`
14449
14393
  display: grid;
14450
14394
  grid-template-columns: ${(p) => p.$hasClose ? "repeat(6, 1fr) minmax(130px, auto)" : "repeat(6, 1fr)"};