@loafmarkets/ui 0.1.100 → 0.1.102
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.d.mts +4 -32
- package/dist/index.d.ts +4 -32
- package/dist/index.js +609 -1122
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +611 -1124
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React5 from 'react';
|
|
2
|
-
import React5__default, { createContext, useState,
|
|
2
|
+
import React5__default, { createContext, useState, useEffect, useCallback, useContext, useMemo, useRef } from 'react';
|
|
3
3
|
import { Slot } from '@radix-ui/react-slot';
|
|
4
4
|
import { cva } from 'class-variance-authority';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
|
|
|
7
7
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
8
|
import styled25, { keyframes, css } from 'styled-components';
|
|
9
9
|
import * as ReactDOM from 'react-dom';
|
|
10
|
-
import { Newspaper } from 'lucide-react';
|
|
10
|
+
import { Newspaper, BedDouble, Bath, CarFront } from 'lucide-react';
|
|
11
11
|
import * as LightweightCharts from 'lightweight-charts';
|
|
12
12
|
import { BiChevronUp, BiChevronDown, BiX, BiCoin, BiWallet, BiCreditCard, BiCalendar, BiInfoCircle, BiPencil, BiImages, BiVideo, BiMap } from 'react-icons/bi';
|
|
13
13
|
import { FaChartLine, FaBitcoin } from 'react-icons/fa';
|
|
@@ -1770,11 +1770,6 @@ function useViewportCompact(breakpoint) {
|
|
|
1770
1770
|
return isCompact;
|
|
1771
1771
|
}
|
|
1772
1772
|
var formatNumber = (value, precision) => value.toFixed(precision);
|
|
1773
|
-
var formatTradeTime = (time) => {
|
|
1774
|
-
const d = new Date(time);
|
|
1775
|
-
if (Number.isNaN(d.getTime())) return time;
|
|
1776
|
-
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
|
|
1777
|
-
};
|
|
1778
1773
|
var FLASH_DURATION_MS = 450;
|
|
1779
1774
|
var FLASH_UP_COLOR = "rgba(14, 203, 129, 0.35)";
|
|
1780
1775
|
var FLASH_DOWN_COLOR = "rgba(246, 70, 93, 0.35)";
|
|
@@ -1844,12 +1839,14 @@ function TradeRow({
|
|
|
1844
1839
|
{
|
|
1845
1840
|
ref: rowRef,
|
|
1846
1841
|
className: "grid items-center",
|
|
1847
|
-
style: { gridTemplateColumns: "
|
|
1842
|
+
style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.2rem 0", fontSize: "0.8rem" },
|
|
1848
1843
|
children: [
|
|
1849
|
-
/* @__PURE__ */
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1844
|
+
/* @__PURE__ */ jsxs("div", { style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d", fontWeight: 500 }, children: [
|
|
1845
|
+
"$",
|
|
1846
|
+
formatNumber(trade.price, precision)
|
|
1847
|
+
] }),
|
|
1848
|
+
/* @__PURE__ */ jsxs("div", { style: { textAlign: "right", paddingRight: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "4px" }, children: [
|
|
1849
|
+
formatNumber(trade.amount, amountPrecision),
|
|
1853
1850
|
explorerUrl && /* @__PURE__ */ jsx(
|
|
1854
1851
|
"a",
|
|
1855
1852
|
{
|
|
@@ -1870,22 +1867,24 @@ function TradeRow({
|
|
|
1870
1867
|
"div",
|
|
1871
1868
|
{
|
|
1872
1869
|
ref: rowRef,
|
|
1873
|
-
className: "
|
|
1874
|
-
style: { height: `${DEPTH_ROW_HEIGHT_PX}px` },
|
|
1870
|
+
className: "grid grid-cols-3 items-center gap-3 px-3 py-1.5",
|
|
1875
1871
|
children: [
|
|
1876
|
-
/* @__PURE__ */
|
|
1872
|
+
/* @__PURE__ */ jsxs(
|
|
1877
1873
|
"div",
|
|
1878
1874
|
{
|
|
1879
1875
|
className: cn(
|
|
1880
1876
|
"tabular-nums",
|
|
1881
1877
|
trade.type === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]"
|
|
1882
1878
|
),
|
|
1883
|
-
children:
|
|
1879
|
+
children: [
|
|
1880
|
+
"$",
|
|
1881
|
+
formatNumber(trade.price, precision)
|
|
1882
|
+
]
|
|
1884
1883
|
}
|
|
1885
1884
|
),
|
|
1886
1885
|
/* @__PURE__ */ jsx("div", { className: "text-right tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) }),
|
|
1887
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1.5
|
|
1888
|
-
trade.time != null && /* @__PURE__ */ jsx("span", { children: trade.time }),
|
|
1886
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [
|
|
1887
|
+
trade.time != null && /* @__PURE__ */ jsx("span", { className: "tabular-nums text-white/50 text-xs", children: trade.time }),
|
|
1889
1888
|
explorerUrl && /* @__PURE__ */ jsx(
|
|
1890
1889
|
"a",
|
|
1891
1890
|
{
|
|
@@ -1953,8 +1952,8 @@ function DepthRow({
|
|
|
1953
1952
|
);
|
|
1954
1953
|
}
|
|
1955
1954
|
var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
1956
|
-
var LEVEL_ROWS_VISIBLE =
|
|
1957
|
-
var DEPTH_ROW_HEIGHT_PX =
|
|
1955
|
+
var LEVEL_ROWS_VISIBLE = 6;
|
|
1956
|
+
var DEPTH_ROW_HEIGHT_PX = 26;
|
|
1958
1957
|
var COMPACT_ROWS_VISIBLE = 5;
|
|
1959
1958
|
var COMPACT_ROW_HEIGHT_PX = 30;
|
|
1960
1959
|
var COMPACT_BREAKPOINT_PX = 1024;
|
|
@@ -1978,8 +1977,6 @@ var Orderbook = React5.forwardRef(
|
|
|
1978
1977
|
onPriceClick,
|
|
1979
1978
|
onLoafLiquidityClick,
|
|
1980
1979
|
tradeExplorerUrl,
|
|
1981
|
-
maxLevels,
|
|
1982
|
-
fillHeight = false,
|
|
1983
1980
|
className,
|
|
1984
1981
|
...props
|
|
1985
1982
|
}, ref) => {
|
|
@@ -2024,10 +2021,8 @@ var Orderbook = React5.forwardRef(
|
|
|
2024
2021
|
onTabChange?.(next);
|
|
2025
2022
|
};
|
|
2026
2023
|
const isCompact = variant === "compact" || variant === "auto" && viewportCompact;
|
|
2027
|
-
const
|
|
2028
|
-
const
|
|
2029
|
-
const sectionHeight = isCompact ? effectiveCompactLevels * COMPACT_ROW_HEIGHT_PX : effectiveLevels * DEPTH_ROW_HEIGHT_PX;
|
|
2030
|
-
const rowCount = isCompact ? effectiveCompactLevels : effectiveLevels;
|
|
2024
|
+
const sectionHeight = isCompact ? COMPACT_ROWS_VISIBLE * COMPACT_ROW_HEIGHT_PX : LEVEL_ROWS_VISIBLE * DEPTH_ROW_HEIGHT_PX;
|
|
2025
|
+
const rowCount = isCompact ? COMPACT_ROWS_VISIBLE : LEVEL_ROWS_VISIBLE;
|
|
2031
2026
|
const askVisibleLevels = asks.slice(-rowCount);
|
|
2032
2027
|
const bidVisibleLevels = bids.slice(0, rowCount);
|
|
2033
2028
|
const askCumDepths = new Array(askVisibleLevels.length);
|
|
@@ -2046,8 +2041,7 @@ var Orderbook = React5.forwardRef(
|
|
|
2046
2041
|
bidCumDepths[i] = acc;
|
|
2047
2042
|
}
|
|
2048
2043
|
}
|
|
2049
|
-
const
|
|
2050
|
-
const bidMaxCumDepth = Math.max(1, ...bidCumDepths);
|
|
2044
|
+
const combinedMaxCumDepth = Math.max(1, ...askCumDepths, ...bidCumDepths);
|
|
2051
2045
|
const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
|
|
2052
2046
|
const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
|
|
2053
2047
|
const layoutProps = {
|
|
@@ -2067,8 +2061,7 @@ var Orderbook = React5.forwardRef(
|
|
|
2067
2061
|
bidVisibleLevels,
|
|
2068
2062
|
askCumDepths,
|
|
2069
2063
|
bidCumDepths,
|
|
2070
|
-
|
|
2071
|
-
bidMaxCumDepth,
|
|
2064
|
+
combinedMaxCumDepth,
|
|
2072
2065
|
midPrice,
|
|
2073
2066
|
midChangePercent,
|
|
2074
2067
|
midClass,
|
|
@@ -2078,19 +2071,15 @@ var Orderbook = React5.forwardRef(
|
|
|
2078
2071
|
isLoading,
|
|
2079
2072
|
seenTradeKeysRef,
|
|
2080
2073
|
tradeExplorerUrl,
|
|
2081
|
-
onPriceClick
|
|
2082
|
-
levelCount: effectiveLevels,
|
|
2083
|
-
compactLevelCount: effectiveCompactLevels,
|
|
2084
|
-
fillHeight
|
|
2074
|
+
onPriceClick
|
|
2085
2075
|
};
|
|
2086
2076
|
return /* @__PURE__ */ jsx(
|
|
2087
2077
|
Card,
|
|
2088
2078
|
{
|
|
2089
2079
|
ref,
|
|
2090
2080
|
className: cn(
|
|
2091
|
-
"w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col",
|
|
2081
|
+
"w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col h-full",
|
|
2092
2082
|
isCompact && "max-w-none",
|
|
2093
|
-
fillHeight && "h-full",
|
|
2094
2083
|
className
|
|
2095
2084
|
),
|
|
2096
2085
|
...props,
|
|
@@ -2139,8 +2128,7 @@ function DesktopOrderbookLayout({
|
|
|
2139
2128
|
bidVisibleLevels,
|
|
2140
2129
|
askCumDepths,
|
|
2141
2130
|
bidCumDepths,
|
|
2142
|
-
|
|
2143
|
-
bidMaxCumDepth,
|
|
2131
|
+
combinedMaxCumDepth,
|
|
2144
2132
|
midPrice,
|
|
2145
2133
|
midChangePercent,
|
|
2146
2134
|
midClass,
|
|
@@ -2150,10 +2138,7 @@ function DesktopOrderbookLayout({
|
|
|
2150
2138
|
isLoading,
|
|
2151
2139
|
seenTradeKeysRef,
|
|
2152
2140
|
tradeExplorerUrl,
|
|
2153
|
-
onPriceClick
|
|
2154
|
-
levelCount: effectiveLevels,
|
|
2155
|
-
compactLevelCount: _compactLevelCount,
|
|
2156
|
-
fillHeight
|
|
2141
|
+
onPriceClick
|
|
2157
2142
|
}) {
|
|
2158
2143
|
const midRef = React5.useRef(null);
|
|
2159
2144
|
useMidPriceFlash(midRef, midPrice, "#0b1a24");
|
|
@@ -2241,7 +2226,7 @@ function DesktopOrderbookLayout({
|
|
|
2241
2226
|
{
|
|
2242
2227
|
className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
|
|
2243
2228
|
style: { scrollbarGutter: "stable" },
|
|
2244
|
-
children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { children: Array.from({ length:
|
|
2229
|
+
children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: tradeFiltered.map((trade, i) => {
|
|
2245
2230
|
const tradeKey = getTradeKey(trade, i);
|
|
2246
2231
|
const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
|
|
2247
2232
|
return /* @__PURE__ */ jsx(
|
|
@@ -2258,20 +2243,20 @@ function DesktopOrderbookLayout({
|
|
|
2258
2243
|
);
|
|
2259
2244
|
}) })
|
|
2260
2245
|
}
|
|
2261
|
-
) : /* @__PURE__ */ jsxs("div", { className:
|
|
2246
|
+
) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [
|
|
2262
2247
|
/* @__PURE__ */ jsx(
|
|
2263
2248
|
"div",
|
|
2264
2249
|
{
|
|
2265
|
-
className:
|
|
2266
|
-
style:
|
|
2267
|
-
children: isLoading ? Array.from({ length:
|
|
2250
|
+
className: "flex flex-col justify-end divide-y divide-white/5 overflow-hidden",
|
|
2251
|
+
style: { height: `${sectionHeight}px` },
|
|
2252
|
+
children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).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(
|
|
2268
2253
|
DepthRow,
|
|
2269
2254
|
{
|
|
2270
2255
|
side: "ask",
|
|
2271
2256
|
price: l.price,
|
|
2272
2257
|
amount: l.amount,
|
|
2273
2258
|
cumDepth: askCumDepths[i],
|
|
2274
|
-
depthPct: askCumDepths[i] /
|
|
2259
|
+
depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
|
|
2275
2260
|
precision,
|
|
2276
2261
|
amountPrecision,
|
|
2277
2262
|
hasUserOrder: userAskPrices.has(l.price),
|
|
@@ -2285,7 +2270,7 @@ function DesktopOrderbookLayout({
|
|
|
2285
2270
|
"div",
|
|
2286
2271
|
{
|
|
2287
2272
|
ref: midRef,
|
|
2288
|
-
className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2
|
|
2273
|
+
className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2",
|
|
2289
2274
|
children: [
|
|
2290
2275
|
/* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2291
2276
|
"$",
|
|
@@ -2303,16 +2288,16 @@ function DesktopOrderbookLayout({
|
|
|
2303
2288
|
/* @__PURE__ */ jsx(
|
|
2304
2289
|
"div",
|
|
2305
2290
|
{
|
|
2306
|
-
className:
|
|
2307
|
-
style:
|
|
2308
|
-
children: isLoading ? Array.from({ length:
|
|
2291
|
+
className: "divide-y divide-white/5 overflow-hidden",
|
|
2292
|
+
style: { height: `${sectionHeight}px` },
|
|
2293
|
+
children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).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(
|
|
2309
2294
|
DepthRow,
|
|
2310
2295
|
{
|
|
2311
2296
|
side: "bid",
|
|
2312
2297
|
price: l.price,
|
|
2313
2298
|
amount: l.amount,
|
|
2314
2299
|
cumDepth: bidCumDepths[i],
|
|
2315
|
-
depthPct: bidCumDepths[i] /
|
|
2300
|
+
depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
|
|
2316
2301
|
precision,
|
|
2317
2302
|
amountPrecision,
|
|
2318
2303
|
hasUserOrder: userBidPrices.has(l.price),
|
|
@@ -2341,8 +2326,7 @@ function MobileOrderbookLayout({
|
|
|
2341
2326
|
bidVisibleLevels: visibleBids,
|
|
2342
2327
|
askCumDepths,
|
|
2343
2328
|
bidCumDepths,
|
|
2344
|
-
|
|
2345
|
-
bidMaxCumDepth,
|
|
2329
|
+
combinedMaxCumDepth,
|
|
2346
2330
|
midPrice,
|
|
2347
2331
|
midChangePercent,
|
|
2348
2332
|
midClass,
|
|
@@ -2352,9 +2336,7 @@ function MobileOrderbookLayout({
|
|
|
2352
2336
|
isLoading,
|
|
2353
2337
|
seenTradeKeysRef,
|
|
2354
2338
|
tradeExplorerUrl,
|
|
2355
|
-
onPriceClick
|
|
2356
|
-
levelCount: _levelCount,
|
|
2357
|
-
compactLevelCount: effectiveCompactLevels
|
|
2339
|
+
onPriceClick
|
|
2358
2340
|
}) {
|
|
2359
2341
|
const midRef = React5.useRef(null);
|
|
2360
2342
|
useMidPriceFlash(midRef, midPrice, "transparent");
|
|
@@ -2426,13 +2408,13 @@ function MobileOrderbookLayout({
|
|
|
2426
2408
|
]
|
|
2427
2409
|
}
|
|
2428
2410
|
),
|
|
2429
|
-
/* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column"
|
|
2411
|
+
/* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No asks" }) : visibleAsks.map((l, i) => /* @__PURE__ */ jsx(
|
|
2430
2412
|
MobileDepthRow,
|
|
2431
2413
|
{
|
|
2432
2414
|
side: "ask",
|
|
2433
2415
|
price: l.price,
|
|
2434
2416
|
amount: l.amount,
|
|
2435
|
-
depthPct: askCumDepths[i] /
|
|
2417
|
+
depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
|
|
2436
2418
|
precision,
|
|
2437
2419
|
amountPrecision,
|
|
2438
2420
|
hasUserOrder: userAskPrices.has(l.price),
|
|
@@ -2473,13 +2455,13 @@ function MobileOrderbookLayout({
|
|
|
2473
2455
|
]
|
|
2474
2456
|
}
|
|
2475
2457
|
),
|
|
2476
|
-
/* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column"
|
|
2458
|
+
/* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No bids" }) : visibleBids.map((l, i) => /* @__PURE__ */ jsx(
|
|
2477
2459
|
MobileDepthRow,
|
|
2478
2460
|
{
|
|
2479
2461
|
side: "bid",
|
|
2480
2462
|
price: l.price,
|
|
2481
2463
|
amount: l.amount,
|
|
2482
|
-
depthPct: bidCumDepths[i] /
|
|
2464
|
+
depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
|
|
2483
2465
|
precision,
|
|
2484
2466
|
amountPrecision,
|
|
2485
2467
|
hasUserOrder: userBidPrices.has(l.price),
|
|
@@ -2499,7 +2481,7 @@ function MobileOrderbookLayout({
|
|
|
2499
2481
|
]
|
|
2500
2482
|
}
|
|
2501
2483
|
),
|
|
2502
|
-
/* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: isLoading && tradeFiltered.length === 0 ? Array.from({ length:
|
|
2484
|
+
/* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: isLoading && tradeFiltered.length === 0 ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-trade-skel-${i}`)) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-[0.7rem] text-white/50", children: "No trades" }) : tradeFiltered.map((trade, i) => {
|
|
2503
2485
|
const tradeKey = getTradeKey(trade, i);
|
|
2504
2486
|
const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
|
|
2505
2487
|
return /* @__PURE__ */ jsx(
|
|
@@ -2539,8 +2521,7 @@ function MobileDepthRow({
|
|
|
2539
2521
|
style: {
|
|
2540
2522
|
display: "grid",
|
|
2541
2523
|
gridTemplateColumns: "1.2fr 0.8fr",
|
|
2542
|
-
|
|
2543
|
-
alignItems: "center",
|
|
2524
|
+
padding: "0.2rem 0",
|
|
2544
2525
|
fontSize: "0.8rem",
|
|
2545
2526
|
position: "relative",
|
|
2546
2527
|
cursor: onPriceClick ? "pointer" : void 0
|
|
@@ -2683,7 +2664,7 @@ var PropertyTour = React5.forwardRef(
|
|
|
2683
2664
|
}
|
|
2684
2665
|
);
|
|
2685
2666
|
PropertyTour.displayName = "PropertyTour";
|
|
2686
|
-
var ITEMS_PER_PAGE =
|
|
2667
|
+
var ITEMS_PER_PAGE = 4;
|
|
2687
2668
|
var ensureAnimationsInjected = () => {
|
|
2688
2669
|
if (typeof document === "undefined") return;
|
|
2689
2670
|
if (document.getElementById("property-news-updates-animations")) return;
|
|
@@ -2728,22 +2709,6 @@ var formatDate = (value) => {
|
|
|
2728
2709
|
if (!(value instanceof Date) || Number.isNaN(value.getTime())) return "";
|
|
2729
2710
|
return value.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
|
|
2730
2711
|
};
|
|
2731
|
-
var formatDateShort = (value) => {
|
|
2732
|
-
const d = typeof value === "string" ? new Date(value) : value;
|
|
2733
|
-
if (!(d instanceof Date) || Number.isNaN(d.getTime())) {
|
|
2734
|
-
if (typeof value === "string") {
|
|
2735
|
-
return value.replace(/\s*\d{4}\s*$/, "");
|
|
2736
|
-
}
|
|
2737
|
-
return "";
|
|
2738
|
-
}
|
|
2739
|
-
const diffMs = Date.now() - d.getTime();
|
|
2740
|
-
const diffS = diffMs / 1e3;
|
|
2741
|
-
if (diffS < 60) return "Just now";
|
|
2742
|
-
if (diffS < 3600) return `${Math.floor(diffS / 60)}m ago`;
|
|
2743
|
-
if (diffS < 86400) return `${Math.floor(diffS / 3600)}h ago`;
|
|
2744
|
-
const time = d.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit", hour12: true });
|
|
2745
|
-
return `${time} \xB7 ${d.toLocaleDateString(void 0, { month: "short", day: "numeric" })}`;
|
|
2746
|
-
};
|
|
2747
2712
|
var formatTimeAgo = (timestamp) => {
|
|
2748
2713
|
const diff = (Date.now() - new Date(timestamp).getTime()) / 1e3;
|
|
2749
2714
|
if (diff < 60) return `${Math.floor(diff)}s ago`;
|
|
@@ -2754,7 +2719,7 @@ function getSentimentInfo(score) {
|
|
|
2754
2719
|
if (score == null) return null;
|
|
2755
2720
|
if (score > 0.15) return { arrow: "\u25B2", label: "Bullish", color: "#0ecb81" };
|
|
2756
2721
|
if (score < -0.15) return { arrow: "\u25BC", label: "Bearish", color: "#f6465d" };
|
|
2757
|
-
return { arrow: "", label: "Neutral", color: "#848e9c" };
|
|
2722
|
+
return { arrow: "\u2014", label: "Neutral", color: "#848e9c" };
|
|
2758
2723
|
}
|
|
2759
2724
|
function NewsArticleModal({ item, onClose }) {
|
|
2760
2725
|
const sentimentInfo = getSentimentInfo(item.sentimentScore);
|
|
@@ -2836,7 +2801,8 @@ function NewsArticleModal({ item, onClose }) {
|
|
|
2836
2801
|
border: `1px solid ${sentimentInfo.color}40`
|
|
2837
2802
|
},
|
|
2838
2803
|
children: [
|
|
2839
|
-
sentimentInfo.arrow
|
|
2804
|
+
sentimentInfo.arrow,
|
|
2805
|
+
" ",
|
|
2840
2806
|
sentimentInfo.label
|
|
2841
2807
|
]
|
|
2842
2808
|
}
|
|
@@ -2876,35 +2842,7 @@ function NewsArticleModal({ item, onClose }) {
|
|
|
2876
2842
|
)
|
|
2877
2843
|
] }),
|
|
2878
2844
|
/* @__PURE__ */ jsx("div", { style: { height: "1px", background: "rgba(255,255,255,0.08)", marginBottom: "1.25rem" } }),
|
|
2879
|
-
item.summary ? /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "rgba(255,255,255,0.8)", lineHeight: 1.75, margin: 0 }, children: item.summary }) : /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." })
|
|
2880
|
-
item.url && /* @__PURE__ */ jsx("div", { style: { marginTop: "1.25rem", paddingTop: "1rem", borderTop: "1px solid rgba(255,255,255,0.08)" }, children: /* @__PURE__ */ jsxs(
|
|
2881
|
-
"a",
|
|
2882
|
-
{
|
|
2883
|
-
href: item.url,
|
|
2884
|
-
target: "_blank",
|
|
2885
|
-
rel: "noopener noreferrer",
|
|
2886
|
-
style: {
|
|
2887
|
-
display: "inline-flex",
|
|
2888
|
-
alignItems: "center",
|
|
2889
|
-
gap: "0.4rem",
|
|
2890
|
-
fontSize: "0.8rem",
|
|
2891
|
-
fontWeight: 600,
|
|
2892
|
-
color: "var(--color-accent, #f0b90b)",
|
|
2893
|
-
textDecoration: "none",
|
|
2894
|
-
transition: "opacity 0.15s"
|
|
2895
|
-
},
|
|
2896
|
-
onMouseEnter: (e) => {
|
|
2897
|
-
e.currentTarget.style.opacity = "0.8";
|
|
2898
|
-
},
|
|
2899
|
-
onMouseLeave: (e) => {
|
|
2900
|
-
e.currentTarget.style.opacity = "1";
|
|
2901
|
-
},
|
|
2902
|
-
children: [
|
|
2903
|
-
"Read full article",
|
|
2904
|
-
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" }) })
|
|
2905
|
-
]
|
|
2906
|
-
}
|
|
2907
|
-
) })
|
|
2845
|
+
item.summary ? /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "rgba(255,255,255,0.8)", lineHeight: 1.75, margin: 0 }, children: item.summary }) : /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." })
|
|
2908
2846
|
]
|
|
2909
2847
|
}
|
|
2910
2848
|
)
|
|
@@ -2936,7 +2874,6 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
2936
2874
|
const [homeTab, setHomeTab] = React5.useState("all");
|
|
2937
2875
|
const [homePage, setHomePage] = React5.useState(0);
|
|
2938
2876
|
const purchaseItems = purchasesProp ?? [];
|
|
2939
|
-
const [page, setPage] = React5.useState(0);
|
|
2940
2877
|
const [selectedItem, setSelectedItem] = React5.useState(null);
|
|
2941
2878
|
React5.useEffect(() => {
|
|
2942
2879
|
ensureAnimationsInjected();
|
|
@@ -2945,14 +2882,6 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
2945
2882
|
setHomePage(0);
|
|
2946
2883
|
}, [homeTab]);
|
|
2947
2884
|
const hasItems = Array.isArray(items) && items.length > 0;
|
|
2948
|
-
const totalPages = React5.useMemo(
|
|
2949
|
-
() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1,
|
|
2950
|
-
[hasItems, items.length]
|
|
2951
|
-
);
|
|
2952
|
-
React5.useEffect(() => {
|
|
2953
|
-
setPage((prev) => Math.min(prev, totalPages - 1));
|
|
2954
|
-
}, [totalPages]);
|
|
2955
|
-
const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
|
|
2956
2885
|
const homeFilteredItems = React5.useMemo(
|
|
2957
2886
|
() => hasItems ? items.filter((it) => homeTab === "all" || it.type === homeTab) : [],
|
|
2958
2887
|
[hasItems, items, homeTab]
|
|
@@ -2974,10 +2903,10 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
2974
2903
|
children: [
|
|
2975
2904
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
2976
2905
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2977
|
-
isHomeVariant && /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "
|
|
2906
|
+
isHomeVariant && /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", style: { color: "var(--color-text, #fff)" }, children: /* @__PURE__ */ jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z" }) }),
|
|
2978
2907
|
isPurchaseVariant && /* @__PURE__ */ jsx("span", { style: { display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#0ecb81", boxShadow: "0 0 8px rgba(14,203,129,0.8)", animation: "propertyNewsPulse 1.5s infinite" } }),
|
|
2979
2908
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
2980
|
-
/* @__PURE__ */ jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white",
|
|
2909
|
+
/* @__PURE__ */ jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white", children: resolvedHeading }),
|
|
2981
2910
|
subheading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
|
|
2982
2911
|
] })
|
|
2983
2912
|
] }),
|
|
@@ -2992,7 +2921,7 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
2992
2921
|
"LIVE"
|
|
2993
2922
|
] }) : null
|
|
2994
2923
|
] }),
|
|
2995
|
-
isHomeVariant && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap:
|
|
2924
|
+
isHomeVariant && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 0, marginTop: "0.75rem", marginBottom: "0.25rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsx(
|
|
2996
2925
|
"button",
|
|
2997
2926
|
{
|
|
2998
2927
|
type: "button",
|
|
@@ -3001,8 +2930,7 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3001
2930
|
background: "transparent",
|
|
3002
2931
|
border: "none",
|
|
3003
2932
|
borderBottom: homeTab === tab ? "2px solid var(--color-accent, #f0b90b)" : "2px solid transparent",
|
|
3004
|
-
padding: "0
|
|
3005
|
-
marginBottom: "-1px",
|
|
2933
|
+
padding: "0.5rem 0.75rem",
|
|
3006
2934
|
fontSize: "0.75rem",
|
|
3007
2935
|
fontWeight: homeTab === tab ? 600 : 400,
|
|
3008
2936
|
color: homeTab === tab ? "var(--color-text, #fff)" : "var(--color-text-secondary, #848e9c)",
|
|
@@ -3016,8 +2944,7 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3016
2944
|
/* @__PURE__ */ jsx(
|
|
3017
2945
|
"div",
|
|
3018
2946
|
{
|
|
3019
|
-
className:
|
|
3020
|
-
style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 86}px` } : void 0,
|
|
2947
|
+
className: "mt-4 flex flex-1 flex-col gap-3 overflow-hidden",
|
|
3021
2948
|
children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
|
|
3022
2949
|
const maxAmount = 6e4;
|
|
3023
2950
|
const barPercent = Math.min(85, Math.max(15, purchase.amount / maxAmount * 100));
|
|
@@ -3055,7 +2982,7 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3055
2982
|
style: {
|
|
3056
2983
|
width: "100%",
|
|
3057
2984
|
textAlign: "left",
|
|
3058
|
-
|
|
2985
|
+
background: "transparent",
|
|
3059
2986
|
border: "none",
|
|
3060
2987
|
cursor: "pointer",
|
|
3061
2988
|
padding: "0.75rem 0",
|
|
@@ -3064,28 +2991,18 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3064
2991
|
justifyContent: "space-between",
|
|
3065
2992
|
alignItems: "flex-start",
|
|
3066
2993
|
gap: "0.5rem",
|
|
3067
|
-
color: "inherit"
|
|
3068
|
-
transition: "background-color 0.15s"
|
|
3069
|
-
},
|
|
3070
|
-
onMouseEnter: (e) => {
|
|
3071
|
-
e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.04)";
|
|
3072
|
-
const title = e.currentTarget.querySelector("h3");
|
|
3073
|
-
if (title) title.style.color = "var(--color-accent, #E6C87E)";
|
|
3074
|
-
},
|
|
3075
|
-
onMouseLeave: (e) => {
|
|
3076
|
-
e.currentTarget.style.backgroundColor = "transparent";
|
|
3077
|
-
const title = e.currentTarget.querySelector("h3");
|
|
3078
|
-
if (title) title.style.color = "#f8f9fa";
|
|
2994
|
+
color: "inherit"
|
|
3079
2995
|
},
|
|
3080
2996
|
children: [
|
|
3081
2997
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
3082
|
-
/* @__PURE__ */ jsx("h3", { style: { fontSize: "0.
|
|
2998
|
+
/* @__PURE__ */ jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
|
|
3083
2999
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
|
|
3084
|
-
/* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children:
|
|
3000
|
+
/* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
|
|
3085
3001
|
item.source && /* @__PURE__ */ jsx("span", { style: { padding: "0.1rem 0.4rem", borderRadius: "3px", fontSize: "0.62rem", fontWeight: 500, backgroundColor: "rgba(255,255,255,0.07)", color: "#848e9c", whiteSpace: "nowrap" }, children: item.source }),
|
|
3086
3002
|
/* @__PURE__ */ jsx("span", { style: { padding: "0.15rem 0.4rem", borderRadius: "2px", fontSize: "0.65rem", fontWeight: 500, backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)", color: isProperty ? "#0ecb81" : "#f0b90b" }, children: isProperty ? "Property Update" : "Market News" }),
|
|
3087
3003
|
sentimentInfo && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
|
|
3088
|
-
sentimentInfo.arrow
|
|
3004
|
+
sentimentInfo.arrow,
|
|
3005
|
+
" ",
|
|
3089
3006
|
sentimentInfo.label
|
|
3090
3007
|
] })
|
|
3091
3008
|
] })
|
|
@@ -3095,12 +3012,11 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3095
3012
|
},
|
|
3096
3013
|
key
|
|
3097
3014
|
);
|
|
3098
|
-
}) : emptyState ?? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ?
|
|
3099
|
-
const
|
|
3100
|
-
const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
|
|
3015
|
+
}) : emptyState ?? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? /* @__PURE__ */ jsx("div", { style: { overflowY: "auto", maxHeight: "520px", display: "flex", flexDirection: "column", gap: "0" }, children: items.map((item, index) => {
|
|
3016
|
+
const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
|
|
3101
3017
|
const catStyle = categoryStyles[item.type] ?? categoryStyles.market;
|
|
3102
|
-
const dateLabel = item.isNew ?? (highlightFirst &&
|
|
3103
|
-
const isHighlighted = item.isNew ?? (highlightFirst &&
|
|
3018
|
+
const dateLabel = item.isNew ?? (highlightFirst && index === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
|
|
3019
|
+
const isHighlighted = item.isNew ?? (highlightFirst && index === 0);
|
|
3104
3020
|
const sentimentInfo = getSentimentInfo(item.sentimentScore);
|
|
3105
3021
|
return /* @__PURE__ */ jsx(
|
|
3106
3022
|
"button",
|
|
@@ -3142,7 +3058,8 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3142
3058
|
] }),
|
|
3143
3059
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.3rem", flexShrink: 0 }, children: [
|
|
3144
3060
|
sentimentInfo && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: [
|
|
3145
|
-
sentimentInfo.arrow
|
|
3061
|
+
sentimentInfo.arrow,
|
|
3062
|
+
" ",
|
|
3146
3063
|
sentimentInfo.label
|
|
3147
3064
|
] }),
|
|
3148
3065
|
/* @__PURE__ */ jsx("span", { style: { padding: "0.25rem 0.6rem", borderRadius: "4px", border: `1px solid ${catStyle.borderColor}`, backgroundColor: catStyle.backgroundColor, color: catStyle.color, fontSize: "0.68rem", fontWeight: 600, textTransform: "uppercase", whiteSpace: "nowrap" }, children: item.type === "property" ? catStyle.label : "Market News" })
|
|
@@ -3154,7 +3071,7 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3154
3071
|
},
|
|
3155
3072
|
key
|
|
3156
3073
|
);
|
|
3157
|
-
}) : emptyState ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
|
|
3074
|
+
}) }) : emptyState ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
|
|
3158
3075
|
/* @__PURE__ */ jsx(Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
|
|
3159
3076
|
"No property news yet. Updates will land here as soon as we receive new intelligence."
|
|
3160
3077
|
] })
|
|
@@ -3167,8 +3084,8 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3167
3084
|
type: "button",
|
|
3168
3085
|
onClick: () => setHomePage((p) => Math.max(0, p - 1)),
|
|
3169
3086
|
disabled: homePage === 0,
|
|
3170
|
-
style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "
|
|
3171
|
-
children:
|
|
3087
|
+
style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "999px", padding: "0.2rem 0.75rem", fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: "0.15em", cursor: homePage === 0 ? "not-allowed" : "pointer", opacity: homePage === 0 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
|
|
3088
|
+
children: "Prev"
|
|
3172
3089
|
}
|
|
3173
3090
|
),
|
|
3174
3091
|
/* @__PURE__ */ jsxs("span", { style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.5)" }, children: [
|
|
@@ -3182,38 +3099,8 @@ var PropertyNewsUpdates = React5.forwardRef(
|
|
|
3182
3099
|
type: "button",
|
|
3183
3100
|
onClick: () => setHomePage((p) => Math.min(homeTotalPages - 1, p + 1)),
|
|
3184
3101
|
disabled: homePage >= homeTotalPages - 1,
|
|
3185
|
-
style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "
|
|
3186
|
-
children:
|
|
3187
|
-
}
|
|
3188
|
-
)
|
|
3189
|
-
] }),
|
|
3190
|
-
!isPurchaseVariant && !isHomeVariant && hasItems && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
|
|
3191
|
-
/* @__PURE__ */ jsx(
|
|
3192
|
-
"button",
|
|
3193
|
-
{
|
|
3194
|
-
type: "button",
|
|
3195
|
-
onClick: () => setPage((p) => Math.max(0, p - 1)),
|
|
3196
|
-
disabled: page === 0,
|
|
3197
|
-
className: cn("rounded-full border border-white/15 flex items-center justify-center", page === 0 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"),
|
|
3198
|
-
style: { width: "28px", height: "28px", padding: 0, background: "transparent", color: "rgba(255,255,255,0.6)" },
|
|
3199
|
-
children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
|
|
3200
|
-
}
|
|
3201
|
-
),
|
|
3202
|
-
/* @__PURE__ */ jsxs("span", { className: "font-medium text-white/70", children: [
|
|
3203
|
-
"Page ",
|
|
3204
|
-
page + 1,
|
|
3205
|
-
" / ",
|
|
3206
|
-
totalPages
|
|
3207
|
-
] }),
|
|
3208
|
-
/* @__PURE__ */ jsx(
|
|
3209
|
-
"button",
|
|
3210
|
-
{
|
|
3211
|
-
type: "button",
|
|
3212
|
-
onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
|
|
3213
|
-
disabled: page >= totalPages - 1,
|
|
3214
|
-
className: cn("rounded-full border border-white/15 flex items-center justify-center", page >= totalPages - 1 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"),
|
|
3215
|
-
style: { width: "28px", height: "28px", padding: 0, background: "transparent", color: "rgba(255,255,255,0.6)" },
|
|
3216
|
-
children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
|
|
3102
|
+
style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "999px", padding: "0.2rem 0.75rem", fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: "0.15em", cursor: homePage >= homeTotalPages - 1 ? "not-allowed" : "pointer", opacity: homePage >= homeTotalPages - 1 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
|
|
3103
|
+
children: "Next"
|
|
3217
3104
|
}
|
|
3218
3105
|
)
|
|
3219
3106
|
] }),
|
|
@@ -4716,16 +4603,14 @@ var PropertyHeroHeader = React5.forwardRef(
|
|
|
4716
4603
|
imageUrl,
|
|
4717
4604
|
imageAlt,
|
|
4718
4605
|
name,
|
|
4719
|
-
address,
|
|
4720
4606
|
location,
|
|
4721
4607
|
price,
|
|
4722
4608
|
currencySymbol = "$",
|
|
4723
4609
|
changePercent,
|
|
4724
|
-
|
|
4725
|
-
|
|
4726
|
-
|
|
4727
|
-
|
|
4728
|
-
propertyTypeLabel: _propertyTypeLabel,
|
|
4610
|
+
beds,
|
|
4611
|
+
baths,
|
|
4612
|
+
cars,
|
|
4613
|
+
propertyTypeLabel,
|
|
4729
4614
|
onTrade,
|
|
4730
4615
|
onMakeOffer,
|
|
4731
4616
|
tradeButtonLabel = "Trade",
|
|
@@ -4741,6 +4626,7 @@ var PropertyHeroHeader = React5.forwardRef(
|
|
|
4741
4626
|
const tradeHoverColor = "#f5dd9a";
|
|
4742
4627
|
const [isTradeInteracting, setIsTradeInteracting] = React5.useState(false);
|
|
4743
4628
|
const [isOfferInteracting, setIsOfferInteracting] = React5.useState(false);
|
|
4629
|
+
const hasAmenities = isLoading || beds != null || baths != null || cars != null || propertyTypeLabel != null;
|
|
4744
4630
|
const isTradeDisabled = !onTrade;
|
|
4745
4631
|
const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
|
|
4746
4632
|
const showMakeOfferButton = !hideMakeOfferButton;
|
|
@@ -4753,112 +4639,201 @@ var PropertyHeroHeader = React5.forwardRef(
|
|
|
4753
4639
|
setIsOfferInteracting(state);
|
|
4754
4640
|
};
|
|
4755
4641
|
const headingStyle = {
|
|
4756
|
-
fontSize: "clamp(1.
|
|
4757
|
-
marginBottom: "0",
|
|
4642
|
+
fontSize: "clamp(1.6rem, 4vw, 2.5rem)",
|
|
4643
|
+
marginBottom: "0.5rem",
|
|
4758
4644
|
color: "#ffffff",
|
|
4759
4645
|
textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
|
|
4760
4646
|
fontWeight: 600,
|
|
4761
4647
|
lineHeight: 1.2
|
|
4762
4648
|
};
|
|
4763
|
-
return /* @__PURE__ */
|
|
4764
|
-
/* @__PURE__ */
|
|
4765
|
-
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
statusBadge
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
/* @__PURE__ */ jsx(
|
|
4777
|
-
|
|
4778
|
-
/* @__PURE__ */
|
|
4779
|
-
/* @__PURE__ */
|
|
4780
|
-
/* @__PURE__ */
|
|
4781
|
-
|
|
4782
|
-
|
|
4649
|
+
return /* @__PURE__ */ jsxs(OuterWrapper, { ref, className: cn(className), ...props, children: [
|
|
4650
|
+
/* @__PURE__ */ jsxs(HeroContainer, { children: [
|
|
4651
|
+
/* @__PURE__ */ jsx(
|
|
4652
|
+
HeroImage,
|
|
4653
|
+
{
|
|
4654
|
+
src: imageUrl,
|
|
4655
|
+
alt: imageAlt ?? name
|
|
4656
|
+
}
|
|
4657
|
+
),
|
|
4658
|
+
statusBadge ? /* @__PURE__ */ jsxs(StatusBadge, { $isLive: statusBadge.variant === "live", children: [
|
|
4659
|
+
statusBadge.variant === "live" ? /* @__PURE__ */ jsx(PulsingDot, {}) : null,
|
|
4660
|
+
statusBadge.label
|
|
4661
|
+
] }) : null,
|
|
4662
|
+
/* @__PURE__ */ jsx(HeroGradient, { "aria-hidden": "true" }),
|
|
4663
|
+
/* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[1800px] flex-wrap items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
|
|
4664
|
+
/* @__PURE__ */ jsxs(InfoCard, { children: [
|
|
4665
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
|
|
4666
|
+
/* @__PURE__ */ jsx("h1", { style: headingStyle, className: "break-words", children: name }),
|
|
4667
|
+
/* @__PURE__ */ jsxs(InfoRow, { className: "mb-3 max-[768px]:mb-[0.6rem] max-[480px]:mb-[0.5rem]", children: [
|
|
4668
|
+
/* @__PURE__ */ jsx(LocationText, { children: location }),
|
|
4669
|
+
isLoading ? /* @__PURE__ */ jsx(PriceBlock, { children: /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 18 }) }) : price == null ? null : /* @__PURE__ */ jsxs(PriceBlock, { children: [
|
|
4670
|
+
formatPrice3(price, currencySymbol),
|
|
4671
|
+
changePercent == null ? null : /* @__PURE__ */ jsxs(
|
|
4672
|
+
"span",
|
|
4673
|
+
{
|
|
4674
|
+
className: cn(
|
|
4675
|
+
"ml-2 flex items-center text-[0.875rem] font-medium",
|
|
4676
|
+
isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
|
|
4677
|
+
),
|
|
4678
|
+
children: [
|
|
4679
|
+
/* @__PURE__ */ jsx(
|
|
4680
|
+
"svg",
|
|
4681
|
+
{
|
|
4682
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
4683
|
+
width: "12",
|
|
4684
|
+
height: "12",
|
|
4685
|
+
viewBox: "0 0 24 24",
|
|
4686
|
+
fill: "currentColor",
|
|
4687
|
+
className: "mr-[0.15rem]",
|
|
4688
|
+
children: /* @__PURE__ */ jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
|
|
4689
|
+
}
|
|
4690
|
+
),
|
|
4691
|
+
Math.abs(changePercent).toFixed(2),
|
|
4692
|
+
"%"
|
|
4693
|
+
]
|
|
4694
|
+
}
|
|
4695
|
+
)
|
|
4696
|
+
] })
|
|
4697
|
+
] })
|
|
4698
|
+
] }),
|
|
4699
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4700
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
4701
|
+
/* @__PURE__ */ jsx(BedDouble, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
|
|
4702
|
+
/* @__PURE__ */ jsx(Skeleton, { width: 52, height: 14 })
|
|
4783
4703
|
] }),
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 24 }) : price == null ? null : /* @__PURE__ */ jsxs(PriceRow, { children: [
|
|
4788
|
-
/* @__PURE__ */ jsx(CurrencyLabel, { children: "USD" }),
|
|
4789
|
-
changePercent != null ? /* @__PURE__ */ jsx(PriceArrow, { $isPositive: isPositive, children: isPositive ? "\u25B2" : "\u25BC" }) : null,
|
|
4790
|
-
formatPrice3(price, "")
|
|
4704
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
4705
|
+
/* @__PURE__ */ jsx(Bath, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
|
|
4706
|
+
/* @__PURE__ */ jsx(Skeleton, { width: 56, height: 14 })
|
|
4791
4707
|
] }),
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
|
|
4798
|
-
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
|
|
4859
|
-
|
|
4860
|
-
|
|
4861
|
-
|
|
4708
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
4709
|
+
/* @__PURE__ */ jsx(CarFront, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
|
|
4710
|
+
/* @__PURE__ */ jsx(Skeleton, { width: 50, height: 14 })
|
|
4711
|
+
] }),
|
|
4712
|
+
/* @__PURE__ */ jsx(Skeleton, { width: 60, height: 14 })
|
|
4713
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4714
|
+
beds == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
4715
|
+
/* @__PURE__ */ jsx(BedDouble, { className: "mr-2 h-[18px] w-[18px]" }),
|
|
4716
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
4717
|
+
beds,
|
|
4718
|
+
" Beds"
|
|
4719
|
+
] })
|
|
4720
|
+
] }),
|
|
4721
|
+
baths == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
4722
|
+
/* @__PURE__ */ jsx(Bath, { className: "mr-2 h-[18px] w-[18px]" }),
|
|
4723
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
4724
|
+
baths,
|
|
4725
|
+
" Baths"
|
|
4726
|
+
] })
|
|
4727
|
+
] }),
|
|
4728
|
+
cars == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
4729
|
+
/* @__PURE__ */ jsx(CarFront, { className: "mr-2 h-[18px] w-[18px]" }),
|
|
4730
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
4731
|
+
cars,
|
|
4732
|
+
" Cars"
|
|
4733
|
+
] })
|
|
4734
|
+
] }),
|
|
4735
|
+
propertyTypeLabel == null ? null : /* @__PURE__ */ jsx("div", { children: propertyTypeLabel })
|
|
4736
|
+
] }) })
|
|
4737
|
+
] }),
|
|
4738
|
+
/* @__PURE__ */ jsxs(ActionButtons, { children: [
|
|
4739
|
+
/* @__PURE__ */ jsx(
|
|
4740
|
+
"button",
|
|
4741
|
+
{
|
|
4742
|
+
type: "button",
|
|
4743
|
+
onClick: isTradeDisabled ? void 0 : onTrade,
|
|
4744
|
+
className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
|
|
4745
|
+
style: {
|
|
4746
|
+
backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
|
|
4747
|
+
color: "black",
|
|
4748
|
+
padding: "0.75rem 1.5rem",
|
|
4749
|
+
borderColor: isTradeInteracting ? accentColor : "transparent",
|
|
4750
|
+
boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
|
|
4751
|
+
opacity: isTradeDisabled ? 0.5 : 1,
|
|
4752
|
+
cursor: isTradeDisabled ? "not-allowed" : "pointer"
|
|
4753
|
+
},
|
|
4754
|
+
onMouseEnter: () => setTradeInteraction(true),
|
|
4755
|
+
onMouseLeave: () => setTradeInteraction(false),
|
|
4756
|
+
onMouseDown: () => setTradeInteraction(true),
|
|
4757
|
+
onMouseUp: () => setTradeInteraction(false),
|
|
4758
|
+
onFocus: () => setTradeInteraction(true),
|
|
4759
|
+
onBlur: () => setTradeInteraction(false),
|
|
4760
|
+
onTouchStart: () => setTradeInteraction(true),
|
|
4761
|
+
onTouchEnd: () => setTradeInteraction(false),
|
|
4762
|
+
disabled: isTradeDisabled,
|
|
4763
|
+
"aria-disabled": isTradeDisabled,
|
|
4764
|
+
children: tradeButtonLabel
|
|
4765
|
+
}
|
|
4766
|
+
),
|
|
4767
|
+
showMakeOfferButton ? /* @__PURE__ */ jsx(
|
|
4768
|
+
"button",
|
|
4769
|
+
{
|
|
4770
|
+
type: "button",
|
|
4771
|
+
onClick: isMakeOfferButtonDisabled ? void 0 : onMakeOffer,
|
|
4772
|
+
className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
|
|
4773
|
+
style: {
|
|
4774
|
+
backgroundColor: isOfferInteracting ? accentColor : "transparent",
|
|
4775
|
+
borderColor: accentColor,
|
|
4776
|
+
color: isOfferInteracting ? "black" : accentColor,
|
|
4777
|
+
padding: "0.75rem 1.5rem",
|
|
4778
|
+
boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
|
|
4779
|
+
opacity: isMakeOfferButtonDisabled ? 0.5 : 1,
|
|
4780
|
+
cursor: isMakeOfferButtonDisabled ? "not-allowed" : "pointer"
|
|
4781
|
+
},
|
|
4782
|
+
onMouseEnter: () => setOfferInteraction(true),
|
|
4783
|
+
onMouseLeave: () => setOfferInteraction(false),
|
|
4784
|
+
onMouseDown: () => setOfferInteraction(true),
|
|
4785
|
+
onMouseUp: () => setOfferInteraction(false),
|
|
4786
|
+
onFocus: () => setOfferInteraction(true),
|
|
4787
|
+
onBlur: () => setOfferInteraction(false),
|
|
4788
|
+
onTouchStart: () => setOfferInteraction(true),
|
|
4789
|
+
onTouchEnd: () => setOfferInteraction(false),
|
|
4790
|
+
disabled: isMakeOfferButtonDisabled,
|
|
4791
|
+
"aria-disabled": isMakeOfferButtonDisabled,
|
|
4792
|
+
children: makeOfferButtonLabel
|
|
4793
|
+
}
|
|
4794
|
+
) : null
|
|
4795
|
+
] })
|
|
4796
|
+
] }) })
|
|
4797
|
+
] }),
|
|
4798
|
+
hasAmenities ? /* @__PURE__ */ jsx(MobileAmenities, { children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4799
|
+
/* @__PURE__ */ jsxs(MobileAmenity, { children: [
|
|
4800
|
+
/* @__PURE__ */ jsx(BedDouble, { className: "h-4 w-4 opacity-60" }),
|
|
4801
|
+
/* @__PURE__ */ jsx(Skeleton, { width: 40, height: 12 })
|
|
4802
|
+
] }),
|
|
4803
|
+
/* @__PURE__ */ jsxs(MobileAmenity, { children: [
|
|
4804
|
+
/* @__PURE__ */ jsx(Bath, { className: "h-4 w-4 opacity-60" }),
|
|
4805
|
+
/* @__PURE__ */ jsx(Skeleton, { width: 44, height: 12 })
|
|
4806
|
+
] }),
|
|
4807
|
+
/* @__PURE__ */ jsxs(MobileAmenity, { children: [
|
|
4808
|
+
/* @__PURE__ */ jsx(CarFront, { className: "h-4 w-4 opacity-60" }),
|
|
4809
|
+
/* @__PURE__ */ jsx(Skeleton, { width: 42, height: 12 })
|
|
4810
|
+
] }),
|
|
4811
|
+
/* @__PURE__ */ jsx(MobileAmenity, { children: /* @__PURE__ */ jsx(Skeleton, { width: 52, height: 12 }) })
|
|
4812
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4813
|
+
beds == null ? null : /* @__PURE__ */ jsxs(MobileAmenity, { children: [
|
|
4814
|
+
/* @__PURE__ */ jsx(BedDouble, { className: "h-4 w-4" }),
|
|
4815
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
4816
|
+
beds,
|
|
4817
|
+
" Beds"
|
|
4818
|
+
] })
|
|
4819
|
+
] }),
|
|
4820
|
+
baths == null ? null : /* @__PURE__ */ jsxs(MobileAmenity, { children: [
|
|
4821
|
+
/* @__PURE__ */ jsx(Bath, { className: "h-4 w-4" }),
|
|
4822
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
4823
|
+
baths,
|
|
4824
|
+
" Baths"
|
|
4825
|
+
] })
|
|
4826
|
+
] }),
|
|
4827
|
+
cars == null ? null : /* @__PURE__ */ jsxs(MobileAmenity, { children: [
|
|
4828
|
+
/* @__PURE__ */ jsx(CarFront, { className: "h-4 w-4" }),
|
|
4829
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
4830
|
+
cars,
|
|
4831
|
+
" Cars"
|
|
4832
|
+
] })
|
|
4833
|
+
] }),
|
|
4834
|
+
propertyTypeLabel == null ? null : /* @__PURE__ */ jsx(MobileAmenity, { children: propertyTypeLabel })
|
|
4835
|
+
] }) }) : null
|
|
4836
|
+
] });
|
|
4862
4837
|
}
|
|
4863
4838
|
);
|
|
4864
4839
|
PropertyHeroHeader.displayName = "PropertyHeroHeader";
|
|
@@ -4901,6 +4876,32 @@ var HeroContainer = styled25.div`
|
|
|
4901
4876
|
border-radius: 6px;
|
|
4902
4877
|
}
|
|
4903
4878
|
`;
|
|
4879
|
+
var MobileAmenities = styled25.div`
|
|
4880
|
+
display: none;
|
|
4881
|
+
align-items: center;
|
|
4882
|
+
justify-content: space-between;
|
|
4883
|
+
gap: 0.5rem;
|
|
4884
|
+
padding: 0.5rem 0.75rem;
|
|
4885
|
+
background: rgba(8, 8, 12, 0.85);
|
|
4886
|
+
border-radius: 12px;
|
|
4887
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
4888
|
+
color: rgba(255, 255, 255, 0.85);
|
|
4889
|
+
font-size: 0.85rem;
|
|
4890
|
+
|
|
4891
|
+
@media (max-width: 768px) {
|
|
4892
|
+
display: flex;
|
|
4893
|
+
flex-wrap: wrap;
|
|
4894
|
+
}
|
|
4895
|
+
`;
|
|
4896
|
+
var MobileAmenity = styled25.span`
|
|
4897
|
+
display: inline-flex;
|
|
4898
|
+
align-items: center;
|
|
4899
|
+
gap: 0.35rem;
|
|
4900
|
+
padding: 0.35rem 0.5rem;
|
|
4901
|
+
border-radius: 999px;
|
|
4902
|
+
background: rgba(255, 255, 255, 0.08);
|
|
4903
|
+
font-weight: 500;
|
|
4904
|
+
`;
|
|
4904
4905
|
var HeroImage = styled25.img`
|
|
4905
4906
|
width: 100%;
|
|
4906
4907
|
height: 100%;
|
|
@@ -4915,6 +4916,15 @@ var HeroImage = styled25.img`
|
|
|
4915
4916
|
transform: scale(1.0);
|
|
4916
4917
|
transform-origin: center;
|
|
4917
4918
|
`;
|
|
4919
|
+
var HeroGradient = styled25.div`
|
|
4920
|
+
position: absolute;
|
|
4921
|
+
bottom: 0;
|
|
4922
|
+
left: 0;
|
|
4923
|
+
right: 0;
|
|
4924
|
+
width: 100%;
|
|
4925
|
+
z-index: 1;
|
|
4926
|
+
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
|
|
4927
|
+
`;
|
|
4918
4928
|
var ActionButtons = styled25.div`
|
|
4919
4929
|
display: flex;
|
|
4920
4930
|
flex-wrap: wrap;
|
|
@@ -4930,42 +4940,13 @@ var ActionButtons = styled25.div`
|
|
|
4930
4940
|
display: none;
|
|
4931
4941
|
}
|
|
4932
4942
|
`;
|
|
4933
|
-
var CardLayout = styled25.div`
|
|
4934
|
-
display: flex;
|
|
4935
|
-
align-items: center;
|
|
4936
|
-
gap: 1rem;
|
|
4937
|
-
|
|
4938
|
-
@media (max-width: 480px) {
|
|
4939
|
-
gap: 0.75rem;
|
|
4940
|
-
}
|
|
4941
|
-
`;
|
|
4942
|
-
var Thumbnail = styled25.img`
|
|
4943
|
-
width: 72px;
|
|
4944
|
-
height: 72px;
|
|
4945
|
-
border-radius: 8px;
|
|
4946
|
-
object-fit: cover;
|
|
4947
|
-
flex-shrink: 0;
|
|
4948
|
-
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
4949
|
-
|
|
4950
|
-
@media (max-width: 768px) {
|
|
4951
|
-
width: 56px;
|
|
4952
|
-
height: 56px;
|
|
4953
|
-
border-radius: 6px;
|
|
4954
|
-
}
|
|
4955
|
-
|
|
4956
|
-
@media (max-width: 480px) {
|
|
4957
|
-
width: 48px;
|
|
4958
|
-
height: 48px;
|
|
4959
|
-
}
|
|
4960
|
-
`;
|
|
4961
|
-
var CardContent2 = styled25.div`
|
|
4962
|
-
min-width: 0;
|
|
4963
|
-
flex: 1;
|
|
4964
|
-
`;
|
|
4965
4943
|
var InfoCard = styled25.div`
|
|
4944
|
+
display: inline-block;
|
|
4945
|
+
width: fit-content;
|
|
4946
|
+
max-width: 70%;
|
|
4966
4947
|
border-radius: 12px;
|
|
4967
|
-
background: rgba(0, 0, 0, 0.
|
|
4968
|
-
padding: 1rem
|
|
4948
|
+
background: rgba(0, 0, 0, 0.12);
|
|
4949
|
+
padding: 0.75rem 1rem;
|
|
4969
4950
|
color: #fff;
|
|
4970
4951
|
backdrop-filter: blur(6px);
|
|
4971
4952
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
|
|
@@ -4973,92 +4954,45 @@ var InfoCard = styled25.div`
|
|
|
4973
4954
|
min-width: 0;
|
|
4974
4955
|
|
|
4975
4956
|
@media (max-width: 768px) {
|
|
4976
|
-
|
|
4957
|
+
max-width: 85%;
|
|
4958
|
+
}
|
|
4959
|
+
|
|
4960
|
+
@media (max-width: 640px) {
|
|
4961
|
+
max-width: 92%;
|
|
4977
4962
|
}
|
|
4978
4963
|
|
|
4979
4964
|
@media (max-width: 480px) {
|
|
4980
|
-
|
|
4965
|
+
max-width: 95%;
|
|
4981
4966
|
}
|
|
4982
4967
|
`;
|
|
4983
|
-
var
|
|
4984
|
-
display:
|
|
4968
|
+
var InfoRow = styled25.div`
|
|
4969
|
+
display: grid;
|
|
4970
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
4985
4971
|
align-items: center;
|
|
4986
4972
|
gap: 0.75rem;
|
|
4987
|
-
|
|
4988
|
-
|
|
4973
|
+
width: 100%;
|
|
4974
|
+
|
|
4975
|
+
@media (max-width: 640px) {
|
|
4976
|
+
gap: 0.5rem;
|
|
4977
|
+
}
|
|
4989
4978
|
`;
|
|
4990
|
-
var
|
|
4991
|
-
|
|
4992
|
-
|
|
4993
|
-
|
|
4994
|
-
|
|
4995
|
-
|
|
4996
|
-
font-weight: 600;
|
|
4997
|
-
letter-spacing: 0.03em;
|
|
4998
|
-
text-transform: uppercase;
|
|
4999
|
-
line-height: 1;
|
|
5000
|
-
color: #E6C87E;
|
|
5001
|
-
background: rgba(230, 200, 126, 0.12);
|
|
4979
|
+
var LocationText = styled25.span`
|
|
4980
|
+
font-size: clamp(1rem, 2.6vw, 1.25rem);
|
|
4981
|
+
color: rgba(255, 255, 255, 0.9);
|
|
4982
|
+
font-weight: 500;
|
|
4983
|
+
overflow: hidden;
|
|
4984
|
+
text-overflow: ellipsis;
|
|
5002
4985
|
white-space: nowrap;
|
|
5003
|
-
flex-shrink: 0;
|
|
5004
4986
|
`;
|
|
5005
|
-
var
|
|
4987
|
+
var PriceBlock = styled25.span`
|
|
5006
4988
|
display: flex;
|
|
5007
|
-
align-items: baseline;
|
|
5008
|
-
justify-content: space-between;
|
|
5009
|
-
gap: 1rem;
|
|
5010
|
-
`;
|
|
5011
|
-
var PriceGroup = styled25.div`
|
|
5012
|
-
display: flex;
|
|
5013
|
-
flex-direction: column;
|
|
5014
|
-
align-items: flex-end;
|
|
5015
|
-
flex-shrink: 0;
|
|
5016
|
-
`;
|
|
5017
|
-
var PriceRow = styled25.span`
|
|
5018
|
-
display: inline-flex;
|
|
5019
|
-
align-items: baseline;
|
|
5020
|
-
font-size: clamp(1.3rem, 3vw, 1.8rem);
|
|
5021
|
-
font-weight: 600;
|
|
5022
|
-
color: #fff;
|
|
5023
|
-
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
|
|
5024
|
-
font-variant-numeric: tabular-nums;
|
|
5025
|
-
white-space: nowrap;
|
|
5026
|
-
flex-shrink: 0;
|
|
5027
|
-
`;
|
|
5028
|
-
var CurrencyLabel = styled25.span`
|
|
5029
|
-
font-size: 0.55em;
|
|
5030
|
-
font-weight: 500;
|
|
5031
|
-
color: rgba(255, 255, 255, 0.4);
|
|
5032
|
-
margin-right: 0.3em;
|
|
5033
|
-
`;
|
|
5034
|
-
var PriceArrow = styled25.span`
|
|
5035
|
-
color: ${({ $isPositive }) => $isPositive ? "#0ecb81" : "#f6465d"};
|
|
5036
|
-
font-size: 0.65em;
|
|
5037
|
-
margin: 0 0.1em;
|
|
5038
|
-
`;
|
|
5039
|
-
var AddressText = styled25.p`
|
|
5040
|
-
font-size: 1.1rem;
|
|
5041
|
-
color: rgba(255, 255, 255, 0.7);
|
|
5042
|
-
font-weight: 400;
|
|
5043
|
-
margin: 0.1rem 0 0;
|
|
5044
|
-
|
|
5045
|
-
@media (max-width: 768px) {
|
|
5046
|
-
font-size: 1rem;
|
|
5047
|
-
}
|
|
5048
|
-
|
|
5049
|
-
@media (max-width: 480px) {
|
|
5050
|
-
font-size: 0.9rem;
|
|
5051
|
-
}
|
|
5052
|
-
`;
|
|
5053
|
-
var PriceChangeRow = styled25.span`
|
|
5054
|
-
display: inline-flex;
|
|
5055
4989
|
align-items: center;
|
|
5056
|
-
|
|
5057
|
-
|
|
5058
|
-
|
|
5059
|
-
|
|
5060
|
-
|
|
5061
|
-
|
|
4990
|
+
font-size: clamp(1rem, 2.2vw, 1.25rem);
|
|
4991
|
+
font-weight: 600;
|
|
4992
|
+
color: var(--color-accent, #f0b90b);
|
|
4993
|
+
padding-left: 1rem;
|
|
4994
|
+
border-left: 1px solid rgba(255, 255, 255, 0.25);
|
|
4995
|
+
min-height: 1.5rem;
|
|
5062
4996
|
`;
|
|
5063
4997
|
var StatusBadge = styled25.div`
|
|
5064
4998
|
position: absolute;
|
|
@@ -5135,45 +5069,13 @@ var Header = ({
|
|
|
5135
5069
|
onProfileNavigate: _onProfileNavigate,
|
|
5136
5070
|
onOrdersNavigate: _onOrdersNavigate,
|
|
5137
5071
|
onWalletNavigate: _onWalletNavigate,
|
|
5138
|
-
showTradeTab = true
|
|
5139
|
-
portfolioSummary
|
|
5072
|
+
showTradeTab = true
|
|
5140
5073
|
}) => {
|
|
5141
5074
|
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
|
5142
5075
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
5143
5076
|
const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
|
|
5144
5077
|
const [showLoginPopup, setShowLoginPopup] = useState(false);
|
|
5145
5078
|
const [loginPopupInitialView, setLoginPopupInitialView] = useState(void 0);
|
|
5146
|
-
const [isPortfolioBarVisible, setIsPortfolioBarVisible] = useState(() => {
|
|
5147
|
-
if (typeof localStorage === "undefined") return false;
|
|
5148
|
-
return localStorage.getItem("portfolioBarVisible") !== "false";
|
|
5149
|
-
});
|
|
5150
|
-
const portfolioPillRef = useRef(null);
|
|
5151
|
-
const [portfolioArrowLeft, setPortfolioArrowLeft] = useState(null);
|
|
5152
|
-
const togglePortfolioBar = useCallback(() => {
|
|
5153
|
-
setIsPortfolioBarVisible((prev) => {
|
|
5154
|
-
const next = !prev;
|
|
5155
|
-
try {
|
|
5156
|
-
localStorage.setItem("portfolioBarVisible", String(next));
|
|
5157
|
-
} catch {
|
|
5158
|
-
}
|
|
5159
|
-
return next;
|
|
5160
|
-
});
|
|
5161
|
-
}, []);
|
|
5162
|
-
const updatePortfolioArrow = useCallback(() => {
|
|
5163
|
-
const eye = document.getElementById("portfolio-eye-toggle");
|
|
5164
|
-
const pill = portfolioPillRef.current;
|
|
5165
|
-
if (!eye || !pill) return;
|
|
5166
|
-
const eyeRect = eye.getBoundingClientRect();
|
|
5167
|
-
const pillRect = pill.getBoundingClientRect();
|
|
5168
|
-
const offset = eyeRect.left + eyeRect.width / 2 - pillRect.left - 7;
|
|
5169
|
-
setPortfolioArrowLeft(offset);
|
|
5170
|
-
}, []);
|
|
5171
|
-
useEffect(() => {
|
|
5172
|
-
if (!isPortfolioBarVisible || !portfolioSummary) return;
|
|
5173
|
-
updatePortfolioArrow();
|
|
5174
|
-
window.addEventListener("resize", updatePortfolioArrow);
|
|
5175
|
-
return () => window.removeEventListener("resize", updatePortfolioArrow);
|
|
5176
|
-
}, [isPortfolioBarVisible, portfolioSummary, updatePortfolioArrow]);
|
|
5177
5079
|
useEffect(() => {
|
|
5178
5080
|
if (typeof window === "undefined") return;
|
|
5179
5081
|
const ua = navigator.userAgent;
|
|
@@ -5551,17 +5453,6 @@ var Header = ({
|
|
|
5551
5453
|
}
|
|
5552
5454
|
),
|
|
5553
5455
|
isAuthenticated ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
|
|
5554
|
-
portfolioSummary && /* @__PURE__ */ jsx(
|
|
5555
|
-
PortfolioEyeButton,
|
|
5556
|
-
{
|
|
5557
|
-
id: "portfolio-eye-toggle",
|
|
5558
|
-
type: "button",
|
|
5559
|
-
onClick: togglePortfolioBar,
|
|
5560
|
-
$active: isPortfolioBarVisible,
|
|
5561
|
-
title: isPortfolioBarVisible ? "Hide portfolio" : "Show portfolio",
|
|
5562
|
-
children: isPortfolioBarVisible ? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 001 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" }) })
|
|
5563
|
-
}
|
|
5564
|
-
),
|
|
5565
5456
|
/* @__PURE__ */ jsxs(UserMenu, { children: [
|
|
5566
5457
|
/* @__PURE__ */ jsxs(
|
|
5567
5458
|
UserButton,
|
|
@@ -5633,51 +5524,6 @@ var Header = ({
|
|
|
5633
5524
|
] })
|
|
5634
5525
|
] }),
|
|
5635
5526
|
/* @__PURE__ */ jsx(HeaderSpacer, {}),
|
|
5636
|
-
isAuthenticated && portfolioSummary && isPortfolioBarVisible && (() => {
|
|
5637
|
-
const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
5638
|
-
const isPLPositive = portfolioSummary.pnl >= 0;
|
|
5639
|
-
return /* @__PURE__ */ jsx(PortfolioBarContainer, { children: /* @__PURE__ */ jsxs(PortfolioBarPill, { ref: portfolioPillRef, children: [
|
|
5640
|
-
portfolioArrowLeft !== null && /* @__PURE__ */ jsx(PortfolioBarArrow, { style: { left: `${portfolioArrowLeft}px` } }),
|
|
5641
|
-
/* @__PURE__ */ jsxs(PBMetric, { children: [
|
|
5642
|
-
/* @__PURE__ */ jsx(PBMetricLabel, { children: "Holdings" }),
|
|
5643
|
-
/* @__PURE__ */ jsxs(PBMetricValue, { children: [
|
|
5644
|
-
"$",
|
|
5645
|
-
fmt(portfolioSummary.holdings)
|
|
5646
|
-
] })
|
|
5647
|
-
] }),
|
|
5648
|
-
/* @__PURE__ */ jsx(PBOperator, { children: "+" }),
|
|
5649
|
-
/* @__PURE__ */ jsxs(PBMetric, { children: [
|
|
5650
|
-
/* @__PURE__ */ jsx(PBMetricLabel, { children: "Cash" }),
|
|
5651
|
-
/* @__PURE__ */ jsxs(PBMetricValue, { children: [
|
|
5652
|
-
"$",
|
|
5653
|
-
fmt(portfolioSummary.cash)
|
|
5654
|
-
] })
|
|
5655
|
-
] }),
|
|
5656
|
-
/* @__PURE__ */ jsx(PBOperator, { children: "=" }),
|
|
5657
|
-
/* @__PURE__ */ jsxs(PBMetric, { children: [
|
|
5658
|
-
/* @__PURE__ */ jsx(PBMetricLabel, { children: "Portfolio" }),
|
|
5659
|
-
/* @__PURE__ */ jsxs(PBMetricValue, { style: { color: "#D4AF37", fontWeight: 700 }, children: [
|
|
5660
|
-
"$",
|
|
5661
|
-
fmt(portfolioSummary.portfolioValue)
|
|
5662
|
-
] })
|
|
5663
|
-
] }),
|
|
5664
|
-
/* @__PURE__ */ jsx(PBDot, {}),
|
|
5665
|
-
/* @__PURE__ */ jsxs(PBMetric, { children: [
|
|
5666
|
-
/* @__PURE__ */ jsx(PBMetricLabel, { children: "P&L" }),
|
|
5667
|
-
/* @__PURE__ */ jsxs(PBMetricValue, { $positive: isPLPositive, $negative: !isPLPositive, children: [
|
|
5668
|
-
isPLPositive ? "+" : "",
|
|
5669
|
-
"$",
|
|
5670
|
-
fmt(Math.abs(portfolioSummary.pnl)),
|
|
5671
|
-
/* @__PURE__ */ jsxs("span", { style: { fontSize: "0.6rem", marginLeft: "2px", opacity: 0.7 }, children: [
|
|
5672
|
-
"(",
|
|
5673
|
-
isPLPositive ? "+" : "",
|
|
5674
|
-
portfolioSummary.pnlPercent.toFixed(2),
|
|
5675
|
-
"%)"
|
|
5676
|
-
] })
|
|
5677
|
-
] })
|
|
5678
|
-
] })
|
|
5679
|
-
] }) });
|
|
5680
|
-
})(),
|
|
5681
5527
|
LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsx(
|
|
5682
5528
|
LoginPopupComponent,
|
|
5683
5529
|
{
|
|
@@ -5763,19 +5609,8 @@ var HeaderContainer = styled25.header`
|
|
|
5763
5609
|
box-sizing: border-box;
|
|
5764
5610
|
|
|
5765
5611
|
@media (max-width: 768px) {
|
|
5766
|
-
|
|
5767
|
-
|
|
5768
|
-
right: 0.75rem;
|
|
5769
|
-
width: calc(100% - 1.5rem);
|
|
5770
|
-
height: 46px;
|
|
5771
|
-
min-height: 46px;
|
|
5772
|
-
padding: 0 0.75rem;
|
|
5773
|
-
border-radius: 12px;
|
|
5774
|
-
background-color: rgba(13, 17, 23, 0.92);
|
|
5775
|
-
backdrop-filter: blur(12px);
|
|
5776
|
-
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
5777
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
5778
|
-
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
5612
|
+
padding: 0 1rem;
|
|
5613
|
+
padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
|
|
5779
5614
|
}
|
|
5780
5615
|
`;
|
|
5781
5616
|
var HeaderSpacer = styled25.div`
|
|
@@ -5783,10 +5618,6 @@ var HeaderSpacer = styled25.div`
|
|
|
5783
5618
|
min-height: 56px;
|
|
5784
5619
|
min-height: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
|
|
5785
5620
|
flex-shrink: 0;
|
|
5786
|
-
|
|
5787
|
-
@media (max-width: 768px) {
|
|
5788
|
-
min-height: calc(46px + 0.5rem);
|
|
5789
|
-
}
|
|
5790
5621
|
`;
|
|
5791
5622
|
var Logo = styled25.div`
|
|
5792
5623
|
display: flex;
|
|
@@ -6120,151 +5951,6 @@ var MobileNavItem = styled25.div`
|
|
|
6120
5951
|
padding-left: 24px;
|
|
6121
5952
|
}
|
|
6122
5953
|
`;
|
|
6123
|
-
var pbShimmer = keyframes`
|
|
6124
|
-
0% { background-position: -200% 0; }
|
|
6125
|
-
100% { background-position: 200% 0; }
|
|
6126
|
-
`;
|
|
6127
|
-
var PortfolioEyeButton = styled25.button`
|
|
6128
|
-
background: ${(p) => p.$active ? "rgba(212, 175, 55, 0.15)" : "transparent"};
|
|
6129
|
-
border: none;
|
|
6130
|
-
border-radius: 6px;
|
|
6131
|
-
cursor: pointer;
|
|
6132
|
-
padding: 6px;
|
|
6133
|
-
display: flex;
|
|
6134
|
-
align-items: center;
|
|
6135
|
-
justify-content: center;
|
|
6136
|
-
color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.5)"};
|
|
6137
|
-
transition: all 0.2s ease;
|
|
6138
|
-
margin-right: 4px;
|
|
6139
|
-
|
|
6140
|
-
&:hover {
|
|
6141
|
-
background: rgba(212, 175, 55, 0.2);
|
|
6142
|
-
color: #D4AF37;
|
|
6143
|
-
}
|
|
6144
|
-
|
|
6145
|
-
@media (max-width: 768px) {
|
|
6146
|
-
padding: 4px;
|
|
6147
|
-
margin-right: 2px;
|
|
6148
|
-
}
|
|
6149
|
-
`;
|
|
6150
|
-
var PortfolioBarContainer = styled25.div`
|
|
6151
|
-
position: fixed;
|
|
6152
|
-
top: 56px;
|
|
6153
|
-
top: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
|
|
6154
|
-
left: 0;
|
|
6155
|
-
right: 0;
|
|
6156
|
-
z-index: 999;
|
|
6157
|
-
display: flex;
|
|
6158
|
-
justify-content: flex-end;
|
|
6159
|
-
align-items: flex-start;
|
|
6160
|
-
padding: 0 5%;
|
|
6161
|
-
pointer-events: none;
|
|
6162
|
-
overflow: visible;
|
|
6163
|
-
|
|
6164
|
-
&::before {
|
|
6165
|
-
content: '';
|
|
6166
|
-
position: absolute;
|
|
6167
|
-
top: 0;
|
|
6168
|
-
left: 40%;
|
|
6169
|
-
right: 0;
|
|
6170
|
-
height: 2px;
|
|
6171
|
-
background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.25) 100%);
|
|
6172
|
-
pointer-events: none;
|
|
6173
|
-
}
|
|
6174
|
-
|
|
6175
|
-
@media (max-width: 768px) {
|
|
6176
|
-
top: calc(46px + 0.5rem);
|
|
6177
|
-
padding: 0 0.75rem;
|
|
6178
|
-
justify-content: center;
|
|
6179
|
-
|
|
6180
|
-
&::before {
|
|
6181
|
-
left: 0;
|
|
6182
|
-
right: 0;
|
|
6183
|
-
background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.4) 30%, rgba(212, 175, 55, 0.4) 70%, transparent 100%);
|
|
6184
|
-
}
|
|
6185
|
-
}
|
|
6186
|
-
`;
|
|
6187
|
-
var PortfolioBarPill = styled25.div`
|
|
6188
|
-
pointer-events: auto;
|
|
6189
|
-
display: flex;
|
|
6190
|
-
align-items: center;
|
|
6191
|
-
gap: 1.25rem;
|
|
6192
|
-
padding: 0.5rem 1.5rem;
|
|
6193
|
-
border-radius: 0 0 20px 20px;
|
|
6194
|
-
background: linear-gradient(135deg, rgba(24, 26, 34, 0.98) 0%, rgba(32, 34, 42, 0.97) 100%);
|
|
6195
|
-
backdrop-filter: blur(16px);
|
|
6196
|
-
border: 1px solid rgba(212, 175, 55, 0.25);
|
|
6197
|
-
border-top: none;
|
|
6198
|
-
box-shadow:
|
|
6199
|
-
0 4px 16px rgba(0, 0, 0, 0.3),
|
|
6200
|
-
0 0 0 1px rgba(255, 255, 255, 0.03) inset,
|
|
6201
|
-
0 1px 0 rgba(212, 175, 55, 0.06) inset;
|
|
6202
|
-
position: relative;
|
|
6203
|
-
overflow: visible;
|
|
6204
|
-
|
|
6205
|
-
&::before {
|
|
6206
|
-
content: '';
|
|
6207
|
-
position: absolute;
|
|
6208
|
-
top: 0;
|
|
6209
|
-
left: 0;
|
|
6210
|
-
right: 0;
|
|
6211
|
-
height: 1px;
|
|
6212
|
-
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
|
|
6213
|
-
background-size: 200% 100%;
|
|
6214
|
-
animation: ${pbShimmer} 4s linear infinite;
|
|
6215
|
-
}
|
|
6216
|
-
|
|
6217
|
-
@media (max-width: 768px) {
|
|
6218
|
-
gap: 0.75rem;
|
|
6219
|
-
padding: 0.4rem 1rem;
|
|
6220
|
-
border-radius: 0 0 16px 16px;
|
|
6221
|
-
}
|
|
6222
|
-
`;
|
|
6223
|
-
var PortfolioBarArrow = styled25.div`
|
|
6224
|
-
position: absolute;
|
|
6225
|
-
top: -7px;
|
|
6226
|
-
width: 14px;
|
|
6227
|
-
height: 14px;
|
|
6228
|
-
background: linear-gradient(135deg, rgba(26, 28, 36, 1) 0%, rgba(30, 32, 40, 1) 100%);
|
|
6229
|
-
border-left: 1px solid rgba(212, 175, 55, 0.3);
|
|
6230
|
-
border-top: 1px solid rgba(212, 175, 55, 0.3);
|
|
6231
|
-
transform: rotate(45deg);
|
|
6232
|
-
box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.25);
|
|
6233
|
-
pointer-events: none;
|
|
6234
|
-
`;
|
|
6235
|
-
var PBMetric = styled25.div`
|
|
6236
|
-
display: flex;
|
|
6237
|
-
flex-direction: column;
|
|
6238
|
-
align-items: center;
|
|
6239
|
-
gap: 1px;
|
|
6240
|
-
white-space: nowrap;
|
|
6241
|
-
`;
|
|
6242
|
-
var PBMetricLabel = styled25.span`
|
|
6243
|
-
font-size: 0.55rem;
|
|
6244
|
-
color: rgba(255, 255, 255, 0.6);
|
|
6245
|
-
text-transform: uppercase;
|
|
6246
|
-
letter-spacing: 0.5px;
|
|
6247
|
-
font-weight: 500;
|
|
6248
|
-
`;
|
|
6249
|
-
var PBMetricValue = styled25.span`
|
|
6250
|
-
font-size: 0.75rem;
|
|
6251
|
-
font-weight: 600;
|
|
6252
|
-
color: ${(p) => p.$positive ? "#0ecb81" : p.$negative ? "#f6465d" : "#eaecef"};
|
|
6253
|
-
font-variant-numeric: tabular-nums;
|
|
6254
|
-
`;
|
|
6255
|
-
var PBDot = styled25.div`
|
|
6256
|
-
width: 3px;
|
|
6257
|
-
height: 3px;
|
|
6258
|
-
border-radius: 50%;
|
|
6259
|
-
background: rgba(212, 175, 55, 0.25);
|
|
6260
|
-
flex-shrink: 0;
|
|
6261
|
-
`;
|
|
6262
|
-
var PBOperator = styled25.span`
|
|
6263
|
-
font-size: 0.7rem;
|
|
6264
|
-
font-weight: 500;
|
|
6265
|
-
color: rgba(255, 255, 255, 0.35);
|
|
6266
|
-
flex-shrink: 0;
|
|
6267
|
-
`;
|
|
6268
5954
|
var PropertySubheader = React5.forwardRef(
|
|
6269
5955
|
({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
|
|
6270
5956
|
const tabsContainerRef = React5.useRef(null);
|
|
@@ -6388,8 +6074,193 @@ var PropertySubheader = React5.forwardRef(
|
|
|
6388
6074
|
}
|
|
6389
6075
|
);
|
|
6390
6076
|
}
|
|
6391
|
-
);
|
|
6392
|
-
PropertySubheader.displayName = "PropertySubheader";
|
|
6077
|
+
);
|
|
6078
|
+
PropertySubheader.displayName = "PropertySubheader";
|
|
6079
|
+
var slideIn = keyframes`
|
|
6080
|
+
from { transform: translateX(110%); opacity: 0; }
|
|
6081
|
+
to { transform: translateX(0); opacity: 1; }
|
|
6082
|
+
`;
|
|
6083
|
+
var slideOut = keyframes`
|
|
6084
|
+
from { transform: translateX(0); opacity: 1; }
|
|
6085
|
+
to { transform: translateX(110%); opacity: 0; }
|
|
6086
|
+
`;
|
|
6087
|
+
var progressShrink = keyframes`
|
|
6088
|
+
from { width: 100%; }
|
|
6089
|
+
to { width: 0%; }
|
|
6090
|
+
`;
|
|
6091
|
+
var VARIANT_COLORS = {
|
|
6092
|
+
success: { accent: "#0ecb81", icon: "\u2713" },
|
|
6093
|
+
error: { accent: "#f6465d", icon: "\u2715" },
|
|
6094
|
+
info: { accent: "#E6C656", icon: "\u2139" },
|
|
6095
|
+
pending: { accent: "#7EB3E6", icon: "\u25CC" }
|
|
6096
|
+
};
|
|
6097
|
+
var Wrapper = styled25.div`
|
|
6098
|
+
position: relative;
|
|
6099
|
+
display: flex;
|
|
6100
|
+
flex-direction: column;
|
|
6101
|
+
gap: 0;
|
|
6102
|
+
width: 340px;
|
|
6103
|
+
background: #0d0f1a;
|
|
6104
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
6105
|
+
border-radius: 10px;
|
|
6106
|
+
overflow: hidden;
|
|
6107
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
|
|
6108
|
+
animation: ${({ $exiting }) => $exiting ? css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
|
|
6109
|
+
pointer-events: all;
|
|
6110
|
+
`;
|
|
6111
|
+
var Body = styled25.div`
|
|
6112
|
+
display: flex;
|
|
6113
|
+
align-items: flex-start;
|
|
6114
|
+
gap: 12px;
|
|
6115
|
+
padding: 14px 16px 12px;
|
|
6116
|
+
`;
|
|
6117
|
+
var IconDot = styled25.div`
|
|
6118
|
+
flex-shrink: 0;
|
|
6119
|
+
width: 28px;
|
|
6120
|
+
height: 28px;
|
|
6121
|
+
border-radius: 50%;
|
|
6122
|
+
background: ${({ $color }) => $color}1a;
|
|
6123
|
+
border: 1px solid ${({ $color }) => $color}55;
|
|
6124
|
+
display: flex;
|
|
6125
|
+
align-items: center;
|
|
6126
|
+
justify-content: center;
|
|
6127
|
+
font-size: 0.75rem;
|
|
6128
|
+
font-weight: 700;
|
|
6129
|
+
color: ${({ $color }) => $color};
|
|
6130
|
+
margin-top: 1px;
|
|
6131
|
+
`;
|
|
6132
|
+
var Content = styled25.div`
|
|
6133
|
+
flex: 1;
|
|
6134
|
+
min-width: 0;
|
|
6135
|
+
`;
|
|
6136
|
+
var Title = styled25.p`
|
|
6137
|
+
margin: 0 0 2px;
|
|
6138
|
+
font-size: 0.8rem;
|
|
6139
|
+
font-weight: 600;
|
|
6140
|
+
color: #fff;
|
|
6141
|
+
letter-spacing: 0.01em;
|
|
6142
|
+
`;
|
|
6143
|
+
var Amount = styled25.p`
|
|
6144
|
+
margin: 0 0 6px;
|
|
6145
|
+
font-size: 1.05rem;
|
|
6146
|
+
font-weight: 700;
|
|
6147
|
+
color: #E6C656;
|
|
6148
|
+
letter-spacing: -0.01em;
|
|
6149
|
+
`;
|
|
6150
|
+
var TxRow = styled25.a`
|
|
6151
|
+
display: inline-flex;
|
|
6152
|
+
align-items: center;
|
|
6153
|
+
gap: 5px;
|
|
6154
|
+
font-family: 'IBM Plex Mono', 'Space Mono', monospace;
|
|
6155
|
+
font-size: 0.68rem;
|
|
6156
|
+
color: rgba(255, 255, 255, 0.4);
|
|
6157
|
+
text-decoration: none;
|
|
6158
|
+
transition: color 0.15s;
|
|
6159
|
+
&:hover {
|
|
6160
|
+
color: #7EB3E6;
|
|
6161
|
+
}
|
|
6162
|
+
`;
|
|
6163
|
+
var TxArrow = styled25.span`
|
|
6164
|
+
font-size: 0.6rem;
|
|
6165
|
+
opacity: 0.6;
|
|
6166
|
+
`;
|
|
6167
|
+
var CloseBtn = styled25.button`
|
|
6168
|
+
flex-shrink: 0;
|
|
6169
|
+
background: none;
|
|
6170
|
+
border: none;
|
|
6171
|
+
padding: 2px 4px;
|
|
6172
|
+
cursor: pointer;
|
|
6173
|
+
color: rgba(255, 255, 255, 0.25);
|
|
6174
|
+
font-size: 0.9rem;
|
|
6175
|
+
line-height: 1;
|
|
6176
|
+
transition: color 0.15s;
|
|
6177
|
+
&:hover { color: rgba(255, 255, 255, 0.7); }
|
|
6178
|
+
`;
|
|
6179
|
+
var ProgressBar = styled25.div`
|
|
6180
|
+
height: 2px;
|
|
6181
|
+
background: rgba(255, 255, 255, 0.06);
|
|
6182
|
+
position: relative;
|
|
6183
|
+
&::after {
|
|
6184
|
+
content: '';
|
|
6185
|
+
position: absolute;
|
|
6186
|
+
left: 0;
|
|
6187
|
+
top: 0;
|
|
6188
|
+
height: 100%;
|
|
6189
|
+
background: ${({ $color }) => $color};
|
|
6190
|
+
animation: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
|
|
6191
|
+
}
|
|
6192
|
+
`;
|
|
6193
|
+
var Container = styled25.div`
|
|
6194
|
+
position: fixed;
|
|
6195
|
+
bottom: 24px;
|
|
6196
|
+
right: 24px;
|
|
6197
|
+
z-index: 9999;
|
|
6198
|
+
display: flex;
|
|
6199
|
+
flex-direction: column-reverse;
|
|
6200
|
+
gap: 10px;
|
|
6201
|
+
pointer-events: none;
|
|
6202
|
+
`;
|
|
6203
|
+
var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
|
|
6204
|
+
function truncateHash(hash) {
|
|
6205
|
+
return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
|
|
6206
|
+
}
|
|
6207
|
+
function ToastItem({ toast, onDismiss }) {
|
|
6208
|
+
const [exiting, setExiting] = useState(false);
|
|
6209
|
+
const timerRef = useRef(null);
|
|
6210
|
+
const dismiss = useCallback(() => {
|
|
6211
|
+
setExiting(true);
|
|
6212
|
+
setTimeout(() => onDismiss(toast.id), 280);
|
|
6213
|
+
}, [onDismiss, toast.id]);
|
|
6214
|
+
useEffect(() => {
|
|
6215
|
+
const duration2 = toast.duration ?? 6e3;
|
|
6216
|
+
if (duration2 > 0) {
|
|
6217
|
+
timerRef.current = setTimeout(dismiss, duration2);
|
|
6218
|
+
}
|
|
6219
|
+
return () => {
|
|
6220
|
+
if (timerRef.current) clearTimeout(timerRef.current);
|
|
6221
|
+
};
|
|
6222
|
+
}, [dismiss, toast.duration]);
|
|
6223
|
+
const { accent, icon } = VARIANT_COLORS[toast.variant];
|
|
6224
|
+
const duration = toast.duration ?? 6e3;
|
|
6225
|
+
const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
|
|
6226
|
+
const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
|
|
6227
|
+
return /* @__PURE__ */ jsxs(Wrapper, { $exiting: exiting, children: [
|
|
6228
|
+
/* @__PURE__ */ jsxs(Body, { children: [
|
|
6229
|
+
/* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
|
|
6230
|
+
/* @__PURE__ */ jsxs(Content, { children: [
|
|
6231
|
+
/* @__PURE__ */ jsx(Title, { children: toast.title }),
|
|
6232
|
+
toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
|
|
6233
|
+
toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
|
|
6234
|
+
truncateHash(toast.txHash),
|
|
6235
|
+
/* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
|
|
6236
|
+
] })
|
|
6237
|
+
] }),
|
|
6238
|
+
/* @__PURE__ */ jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
|
|
6239
|
+
] }),
|
|
6240
|
+
duration > 0 && /* @__PURE__ */ jsx(ProgressBar, { $color: accent, $duration: duration })
|
|
6241
|
+
] });
|
|
6242
|
+
}
|
|
6243
|
+
var ToastContext = createContext(null);
|
|
6244
|
+
function ToastProvider({ children }) {
|
|
6245
|
+
const [toasts, setToasts] = useState([]);
|
|
6246
|
+
const addToast = useCallback((data) => {
|
|
6247
|
+
const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
|
6248
|
+
setToasts((prev) => [...prev, { ...data, id }]);
|
|
6249
|
+
return id;
|
|
6250
|
+
}, []);
|
|
6251
|
+
const dismiss = useCallback((id) => {
|
|
6252
|
+
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
6253
|
+
}, []);
|
|
6254
|
+
return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
|
|
6255
|
+
children,
|
|
6256
|
+
/* @__PURE__ */ jsx(Container, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
|
|
6257
|
+
] });
|
|
6258
|
+
}
|
|
6259
|
+
function useToast() {
|
|
6260
|
+
const ctx = useContext(ToastContext);
|
|
6261
|
+
if (!ctx) throw new Error("useToast must be used within a ToastProvider");
|
|
6262
|
+
return ctx;
|
|
6263
|
+
}
|
|
6393
6264
|
var DEFAULT_LOGO_SRC = Loaf_logo_Banner_default;
|
|
6394
6265
|
var DEFAULT_LOGO_ALT = "Loaf";
|
|
6395
6266
|
var OTP_INPUT_LENGTH = 6;
|
|
@@ -6417,6 +6288,7 @@ var LoginPopup = ({
|
|
|
6417
6288
|
const [error, setError] = useState("");
|
|
6418
6289
|
const [loading, setLoading] = useState(false);
|
|
6419
6290
|
const [isSignUp, setIsSignUp] = useState(false);
|
|
6291
|
+
const { toast } = useToast();
|
|
6420
6292
|
const [fundingAmount] = useState("");
|
|
6421
6293
|
const [kycLoading, setKycLoading] = useState(false);
|
|
6422
6294
|
const [showKycWidget, setShowKycWidget] = useState(false);
|
|
@@ -6430,6 +6302,11 @@ var LoginPopup = ({
|
|
|
6430
6302
|
setView(initialView);
|
|
6431
6303
|
}
|
|
6432
6304
|
}, [initialView]);
|
|
6305
|
+
useEffect(() => {
|
|
6306
|
+
if (view === "kyc" && renderKycWidget) {
|
|
6307
|
+
setShowKycWidget(true);
|
|
6308
|
+
}
|
|
6309
|
+
}, [view, renderKycWidget]);
|
|
6433
6310
|
useEffect(() => {
|
|
6434
6311
|
if (!transakWidgetUrl) return;
|
|
6435
6312
|
const handleTransakMessage = (event) => {
|
|
@@ -6632,10 +6509,19 @@ var LoginPopup = ({
|
|
|
6632
6509
|
};
|
|
6633
6510
|
const handleKycWidgetResult = (result) => {
|
|
6634
6511
|
setShowKycWidget(false);
|
|
6512
|
+
onClose();
|
|
6635
6513
|
if (result.passed) {
|
|
6636
|
-
|
|
6514
|
+
toast({
|
|
6515
|
+
variant: "success",
|
|
6516
|
+
title: "KYC submitted \u2014 pending review",
|
|
6517
|
+
amount: "Your documents are under review. Please check back in a few minutes."
|
|
6518
|
+
});
|
|
6637
6519
|
} else {
|
|
6638
|
-
|
|
6520
|
+
toast({
|
|
6521
|
+
variant: "error",
|
|
6522
|
+
title: "Verification unsuccessful",
|
|
6523
|
+
amount: "Your identity check didn't pass. Please contact support if you believe this is an error."
|
|
6524
|
+
});
|
|
6639
6525
|
}
|
|
6640
6526
|
};
|
|
6641
6527
|
const handleKycWidgetClose = () => {
|
|
@@ -6726,7 +6612,7 @@ var LoginPopup = ({
|
|
|
6726
6612
|
if (view === "main") {
|
|
6727
6613
|
return /* @__PURE__ */ jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
|
|
6728
6614
|
/* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
|
|
6729
|
-
/* @__PURE__ */ jsxs(
|
|
6615
|
+
/* @__PURE__ */ jsxs(Title2, { children: [
|
|
6730
6616
|
/* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
|
|
6731
6617
|
"Welcome to Loaf"
|
|
6732
6618
|
] }),
|
|
@@ -6787,7 +6673,7 @@ var LoginPopup = ({
|
|
|
6787
6673
|
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
|
|
6788
6674
|
"Back"
|
|
6789
6675
|
] }),
|
|
6790
|
-
/* @__PURE__ */ jsxs(
|
|
6676
|
+
/* @__PURE__ */ jsxs(Title2, { children: [
|
|
6791
6677
|
/* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
|
|
6792
6678
|
isSignUp ? "Sign up with Email" : "Sign in with Email"
|
|
6793
6679
|
] }),
|
|
@@ -6826,7 +6712,7 @@ var LoginPopup = ({
|
|
|
6826
6712
|
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
|
|
6827
6713
|
"Back"
|
|
6828
6714
|
] }),
|
|
6829
|
-
/* @__PURE__ */ jsxs(
|
|
6715
|
+
/* @__PURE__ */ jsxs(Title2, { children: [
|
|
6830
6716
|
/* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
|
|
6831
6717
|
"Enter Verification Code"
|
|
6832
6718
|
] }),
|
|
@@ -6942,7 +6828,7 @@ var LoginPopup = ({
|
|
|
6942
6828
|
] }) });
|
|
6943
6829
|
}
|
|
6944
6830
|
if (view === "funding") {
|
|
6945
|
-
return /* @__PURE__ */ jsx(Overlay2, { children: /* @__PURE__ */ jsxs(
|
|
6831
|
+
return /* @__PURE__ */ jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxs(
|
|
6946
6832
|
FundingPopupContainer,
|
|
6947
6833
|
{
|
|
6948
6834
|
onClick: (event) => event.stopPropagation(),
|
|
@@ -7012,16 +6898,6 @@ var Overlay2 = styled25.div`
|
|
|
7012
6898
|
justify-content: center;
|
|
7013
6899
|
align-items: center;
|
|
7014
6900
|
z-index: 10000;
|
|
7015
|
-
animation: fadeIn 0.2s ease-in-out;
|
|
7016
|
-
|
|
7017
|
-
@keyframes fadeIn {
|
|
7018
|
-
from {
|
|
7019
|
-
opacity: 0;
|
|
7020
|
-
}
|
|
7021
|
-
to {
|
|
7022
|
-
opacity: 1;
|
|
7023
|
-
}
|
|
7024
|
-
}
|
|
7025
6901
|
`;
|
|
7026
6902
|
var PopupContainer = styled25.div`
|
|
7027
6903
|
background-color: var(--color-background, #0a0a0a);
|
|
@@ -7031,20 +6907,8 @@ var PopupContainer = styled25.div`
|
|
|
7031
6907
|
max-width: 440px;
|
|
7032
6908
|
width: 90%;
|
|
7033
6909
|
position: relative;
|
|
7034
|
-
animation: slideUp 0.3s ease-out;
|
|
7035
6910
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
7036
6911
|
|
|
7037
|
-
@keyframes slideUp {
|
|
7038
|
-
from {
|
|
7039
|
-
transform: translateY(20px);
|
|
7040
|
-
opacity: 0;
|
|
7041
|
-
}
|
|
7042
|
-
to {
|
|
7043
|
-
transform: translateY(0);
|
|
7044
|
-
opacity: 1;
|
|
7045
|
-
}
|
|
7046
|
-
}
|
|
7047
|
-
|
|
7048
6912
|
@media (max-width: 768px) {
|
|
7049
6913
|
padding: 2rem;
|
|
7050
6914
|
max-width: 90%;
|
|
@@ -7058,21 +6922,9 @@ var KycPopupContainer = styled25.div`
|
|
|
7058
6922
|
max-width: ${(props) => props.$expanded ? "680px" : "440px"};
|
|
7059
6923
|
width: 90%;
|
|
7060
6924
|
position: relative;
|
|
7061
|
-
animation: slideUp 0.3s ease-out;
|
|
7062
6925
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
7063
6926
|
transition: max-width 0.3s ease;
|
|
7064
6927
|
|
|
7065
|
-
@keyframes slideUp {
|
|
7066
|
-
from {
|
|
7067
|
-
transform: translateY(20px);
|
|
7068
|
-
opacity: 0;
|
|
7069
|
-
}
|
|
7070
|
-
to {
|
|
7071
|
-
transform: translateY(0);
|
|
7072
|
-
opacity: 1;
|
|
7073
|
-
}
|
|
7074
|
-
}
|
|
7075
|
-
|
|
7076
6928
|
@media (max-width: 768px) {
|
|
7077
6929
|
padding: 1.5rem;
|
|
7078
6930
|
max-width: 95%;
|
|
@@ -7131,7 +6983,7 @@ var CloseButton = styled25.button`
|
|
|
7131
6983
|
color: var(--color-accent, #e6c656);
|
|
7132
6984
|
}
|
|
7133
6985
|
`;
|
|
7134
|
-
var
|
|
6986
|
+
var Title2 = styled25.h2`
|
|
7135
6987
|
font-size: 1.75rem;
|
|
7136
6988
|
font-weight: 600;
|
|
7137
6989
|
color: var(--color-text, #eaecef);
|
|
@@ -7400,21 +7252,9 @@ var FundingPopupContainer = styled25.div`
|
|
|
7400
7252
|
max-width: ${(props) => props.$hasWidget ? "900px" : "440px"};
|
|
7401
7253
|
width: 90%;
|
|
7402
7254
|
position: relative;
|
|
7403
|
-
animation: slideUp 0.3s ease-out;
|
|
7404
7255
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
7405
7256
|
overflow: hidden;
|
|
7406
7257
|
|
|
7407
|
-
@keyframes slideUp {
|
|
7408
|
-
from {
|
|
7409
|
-
transform: translateY(20px);
|
|
7410
|
-
opacity: 0;
|
|
7411
|
-
}
|
|
7412
|
-
to {
|
|
7413
|
-
transform: translateY(0);
|
|
7414
|
-
opacity: 1;
|
|
7415
|
-
}
|
|
7416
|
-
}
|
|
7417
|
-
|
|
7418
7258
|
@media (max-width: 768px) {
|
|
7419
7259
|
padding: ${(props) => props.$hasWidget ? "0" : "2rem"};
|
|
7420
7260
|
max-width: 95%;
|
|
@@ -7703,7 +7543,7 @@ var PropertyCompareBar = React5.forwardRef(
|
|
|
7703
7543
|
void 0,
|
|
7704
7544
|
pricePercentFormat
|
|
7705
7545
|
)}%`;
|
|
7706
|
-
const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxs(
|
|
7546
|
+
const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxs(PriceBlock2, { $variant: propertyValueVariant, children: [
|
|
7707
7547
|
/* @__PURE__ */ jsx(PriceAmount, { children: formattedPriceValue }),
|
|
7708
7548
|
formattedPriceChange || formattedPricePercent ? /* @__PURE__ */ jsxs(
|
|
7709
7549
|
PriceChange,
|
|
@@ -8016,7 +7856,7 @@ var PropertyValueChange = styled25.span`
|
|
|
8016
7856
|
font-size: 0.65rem;
|
|
8017
7857
|
}
|
|
8018
7858
|
`;
|
|
8019
|
-
var
|
|
7859
|
+
var PriceBlock2 = styled25.div`
|
|
8020
7860
|
display: none;
|
|
8021
7861
|
|
|
8022
7862
|
${({ $variant }) => $variant === "pill" && css`
|
|
@@ -8110,7 +7950,7 @@ function GalleryMapSection({
|
|
|
8110
7950
|
/* @__PURE__ */ jsxs(ThumbStrip, { children: [
|
|
8111
7951
|
/* @__PURE__ */ jsx(ThumbScroll, { children: images.filter((img) => img.category !== "Floorplan").map((img) => {
|
|
8112
7952
|
const actualIndex = images.indexOf(img);
|
|
8113
|
-
return /* @__PURE__ */ jsx(
|
|
7953
|
+
return /* @__PURE__ */ jsx(Thumbnail, { "data-active": !showVideo && carouselIndex === actualIndex, onClick: () => {
|
|
8114
7954
|
stopAutoPlay();
|
|
8115
7955
|
setShowVideo(false);
|
|
8116
7956
|
setCarouselIndex(actualIndex);
|
|
@@ -8250,7 +8090,7 @@ var ThumbScroll = styled25.div`
|
|
|
8250
8090
|
scrollbar-width: none;
|
|
8251
8091
|
&::-webkit-scrollbar { display: none; }
|
|
8252
8092
|
`;
|
|
8253
|
-
var
|
|
8093
|
+
var Thumbnail = styled25.div`
|
|
8254
8094
|
min-width: 60px; height: 45px; border-radius: 4px; overflow: hidden;
|
|
8255
8095
|
cursor: pointer; border: 2px solid transparent; opacity: 0.6;
|
|
8256
8096
|
transition: all 0.2s ease; flex-shrink: 0;
|
|
@@ -8781,7 +8621,7 @@ function PropertyHistory() {
|
|
|
8781
8621
|
/* @__PURE__ */ jsx("span", { className: "text-[0.9rem] font-normal ml-3 opacity-80", children: loafListing.date.replace(/\d+,\s|\s\d+$/, "") })
|
|
8782
8622
|
] }) }),
|
|
8783
8623
|
/* @__PURE__ */ jsx(SalesTable, { children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs(HistoryRow, { $isOwnershipStart: true, children: [
|
|
8784
|
-
/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
|
|
8624
|
+
/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(TypeBadge, { $type: loafListing.type, children: loafListing.type === "Sale" ? "Sold" : loafListing.type }) }),
|
|
8785
8625
|
/* @__PURE__ */ jsx("td", { children: loafListing.saleType ?? "-" }),
|
|
8786
8626
|
/* @__PURE__ */ jsx("td", { children: loafListing.agent })
|
|
8787
8627
|
] }) }) }),
|
|
@@ -8843,7 +8683,7 @@ function PropertyHistory() {
|
|
|
8843
8683
|
/* @__PURE__ */ jsx("span", { className: "text-[0.9rem] font-normal ml-3 opacity-80", children: ownershipSale.date.replace(/\d+,\s|\s\d+$/, "") })
|
|
8844
8684
|
] }) }),
|
|
8845
8685
|
ownershipSale && (historyFilter === "all" || historyFilter === "sales") && /* @__PURE__ */ jsx(SalesTable, { children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs(HistoryRow, { $isOwnershipStart: true, children: [
|
|
8846
|
-
/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
|
|
8686
|
+
/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(TypeBadge, { $type: ownershipSale.type, children: ownershipSale.type === "Sale" ? "Sold" : ownershipSale.type }) }),
|
|
8847
8687
|
/* @__PURE__ */ jsx("td", { children: ownershipSale.saleType ?? "-" }),
|
|
8848
8688
|
/* @__PURE__ */ jsx("td", { children: ownershipSale.agent })
|
|
8849
8689
|
] }) }) }),
|
|
@@ -8852,7 +8692,7 @@ function PropertyHistory() {
|
|
|
8852
8692
|
/* @__PURE__ */ jsx("div", { className: "py-2", children: events.map((event) => /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(EventDetails, { event }) }, event.id)) })
|
|
8853
8693
|
] }),
|
|
8854
8694
|
otherSales.length > 0 && (historyFilter === "all" || historyFilter === "sales") && /* @__PURE__ */ jsx(SalesTable, { children: /* @__PURE__ */ jsx("tbody", { children: otherSales.map((sale) => /* @__PURE__ */ jsxs(HistoryRow, { children: [
|
|
8855
|
-
/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
|
|
8695
|
+
/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(TypeBadge, { $type: sale.type, children: sale.type === "Sale" ? "Sold" : sale.type }) }),
|
|
8856
8696
|
/* @__PURE__ */ jsx("td", { children: sale.saleType ?? "-" }),
|
|
8857
8697
|
/* @__PURE__ */ jsx("td", { children: sale.agent })
|
|
8858
8698
|
] }, sale.id)) }) })
|
|
@@ -8995,7 +8835,7 @@ function EventDetails({ event }) {
|
|
|
8995
8835
|
onClick: toggleExpand,
|
|
8996
8836
|
children: [
|
|
8997
8837
|
/* @__PURE__ */ jsx("div", { className: "flex justify-between items-center flex-1 gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
8998
|
-
/* @__PURE__ */ jsx(
|
|
8838
|
+
/* @__PURE__ */ jsx(TypeBadge, { $type: event.type, children: event.type === "Sale" ? "Sold" : event.type }),
|
|
8999
8839
|
/* @__PURE__ */ jsx("span", { className: "ml-2", children: event.date })
|
|
9000
8840
|
] }) }),
|
|
9001
8841
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-[var(--color-text-secondary)] w-6 h-6 rounded-full transition-colors duration-200 hover:bg-white/10", children: expanded ? /* @__PURE__ */ jsx(BiChevronUp, { size: 20 }) : /* @__PURE__ */ jsx(BiChevronDown, { size: 20 }) })
|
|
@@ -9239,7 +9079,7 @@ var HistoryRow = styled25.tr`
|
|
|
9239
9079
|
background-color: rgba(255, 255, 255, 0.08);
|
|
9240
9080
|
}
|
|
9241
9081
|
`;
|
|
9242
|
-
var
|
|
9082
|
+
var TypeBadge = styled25.span`
|
|
9243
9083
|
display: inline-block;
|
|
9244
9084
|
padding: 0.25rem 0.5rem;
|
|
9245
9085
|
border-radius: 4px;
|
|
@@ -9649,9 +9489,7 @@ function AssetSelectorBar({
|
|
|
9649
9489
|
metrics: metricsProp,
|
|
9650
9490
|
currentTokenName,
|
|
9651
9491
|
selectorItems,
|
|
9652
|
-
onSelect
|
|
9653
|
-
trailing,
|
|
9654
|
-
imageUrl
|
|
9492
|
+
onSelect
|
|
9655
9493
|
}) {
|
|
9656
9494
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
9657
9495
|
const hasItems = selectorItems && selectorItems.length > 0;
|
|
@@ -9660,7 +9498,6 @@ function AssetSelectorBar({
|
|
|
9660
9498
|
...offeringValuation != null ? [{ label: "Offering Valuation", value: `$${offeringValuation.toLocaleString()}` }] : []
|
|
9661
9499
|
];
|
|
9662
9500
|
return /* @__PURE__ */ jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxs(IPOAssetSelector, { children: [
|
|
9663
|
-
imageUrl && /* @__PURE__ */ jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
|
|
9664
9501
|
/* @__PURE__ */ jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxs(AssetName, { children: [
|
|
9665
9502
|
propertyName,
|
|
9666
9503
|
hasItems && /* @__PURE__ */ jsx(
|
|
@@ -9681,7 +9518,7 @@ function AssetSelectorBar({
|
|
|
9681
9518
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
9682
9519
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
9683
9520
|
/* @__PURE__ */ jsx(MetricLabel2, { children: m.label }),
|
|
9684
|
-
/* @__PURE__ */ jsx(MetricValue, { $accent: !!m.accent,
|
|
9521
|
+
/* @__PURE__ */ jsx(MetricValue, { $accent: !!m.accent, children: m.value })
|
|
9685
9522
|
] }),
|
|
9686
9523
|
m.change != null && /* @__PURE__ */ jsxs(MetricChange, { $positive: m.change >= 0, children: [
|
|
9687
9524
|
m.change >= 0 ? "\u2191" : "\u2193",
|
|
@@ -9690,7 +9527,6 @@ function AssetSelectorBar({
|
|
|
9690
9527
|
] })
|
|
9691
9528
|
] })
|
|
9692
9529
|
] }, m.label)) }),
|
|
9693
|
-
trailing,
|
|
9694
9530
|
isDropdownOpen && hasItems && /* @__PURE__ */ jsx(IPODropdown, { children: selectorItems.map((item) => {
|
|
9695
9531
|
const isCurrent = item.tokenName === currentTokenName;
|
|
9696
9532
|
const status = item.status?.toUpperCase();
|
|
@@ -9750,20 +9586,6 @@ var IPOAssetSelector = styled25.div`
|
|
|
9750
9586
|
padding: 0.6rem 0.75rem;
|
|
9751
9587
|
}
|
|
9752
9588
|
`;
|
|
9753
|
-
var AssetThumbnail = styled25.img`
|
|
9754
|
-
width: 40px;
|
|
9755
|
-
height: 40px;
|
|
9756
|
-
border-radius: 8px;
|
|
9757
|
-
object-fit: cover;
|
|
9758
|
-
flex-shrink: 0;
|
|
9759
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
9760
|
-
|
|
9761
|
-
@media (max-width: 768px) {
|
|
9762
|
-
width: 32px;
|
|
9763
|
-
height: 32px;
|
|
9764
|
-
border-radius: 6px;
|
|
9765
|
-
}
|
|
9766
|
-
`;
|
|
9767
9589
|
var AssetSelectorDropdown = styled25.div`
|
|
9768
9590
|
display: flex;
|
|
9769
9591
|
align-items: center;
|
|
@@ -9831,16 +9653,16 @@ var MetricLabel2 = styled25.span`
|
|
|
9831
9653
|
}
|
|
9832
9654
|
`;
|
|
9833
9655
|
var MetricValue = styled25.span`
|
|
9834
|
-
font-size:
|
|
9835
|
-
font-weight:
|
|
9836
|
-
color: ${(p) => p.$accent ? "#D4AF37" :
|
|
9656
|
+
font-size: 1.25rem;
|
|
9657
|
+
font-weight: 700;
|
|
9658
|
+
color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
|
|
9837
9659
|
|
|
9838
9660
|
@media (max-width: 768px) {
|
|
9839
|
-
font-size:
|
|
9661
|
+
font-size: 1.05rem;
|
|
9840
9662
|
}
|
|
9841
9663
|
|
|
9842
9664
|
@media (max-width: 480px) {
|
|
9843
|
-
font-size:
|
|
9665
|
+
font-size: 0.95rem;
|
|
9844
9666
|
}
|
|
9845
9667
|
`;
|
|
9846
9668
|
var MetricChange = styled25.span`
|
|
@@ -9937,7 +9759,6 @@ function OfferingProgressCard({
|
|
|
9937
9759
|
raisedAmount,
|
|
9938
9760
|
targetAmount,
|
|
9939
9761
|
isPrivateClient = false,
|
|
9940
|
-
variant = "default",
|
|
9941
9762
|
style,
|
|
9942
9763
|
className
|
|
9943
9764
|
}) {
|
|
@@ -9969,109 +9790,7 @@ function OfferingProgressCard({
|
|
|
9969
9790
|
const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
|
|
9970
9791
|
return () => clearInterval(interval);
|
|
9971
9792
|
}, [opensAt]);
|
|
9972
|
-
|
|
9973
|
-
return /* @__PURE__ */ jsxs(CompactContainer, { style, className, children: [
|
|
9974
|
-
/* @__PURE__ */ jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
|
|
9975
|
-
/* @__PURE__ */ jsxs(ProgressInfo, { children: [
|
|
9976
|
-
/* @__PURE__ */ jsxs(ProgressSubscribers, { children: [
|
|
9977
|
-
"Subscribers: ",
|
|
9978
|
-
subscriberCount.toLocaleString()
|
|
9979
|
-
] }),
|
|
9980
|
-
/* @__PURE__ */ jsxs(ProgressAmounts, { children: [
|
|
9981
|
-
/* @__PURE__ */ jsx("span", { className: "raised", children: formatCurrency3(computedRaised) }),
|
|
9982
|
-
/* @__PURE__ */ jsxs("span", { className: "target", children: [
|
|
9983
|
-
" / ",
|
|
9984
|
-
formatCurrency3(computedTarget)
|
|
9985
|
-
] })
|
|
9986
|
-
] })
|
|
9987
|
-
] })
|
|
9988
|
-
] });
|
|
9989
|
-
}
|
|
9990
|
-
if (variant === "home") {
|
|
9991
|
-
const isPreLive = !ipoStarted && ipoStatus !== "CLOSED" && ipoStatus !== "CANCELLED";
|
|
9992
|
-
return /* @__PURE__ */ jsxs(Container, { style, className, children: [
|
|
9993
|
-
/* @__PURE__ */ jsxs(Header2, { children: [
|
|
9994
|
-
/* @__PURE__ */ jsxs("h3", { children: [
|
|
9995
|
-
/* @__PURE__ */ jsx(FaChartLine, {}),
|
|
9996
|
-
" Offering Progress"
|
|
9997
|
-
] }),
|
|
9998
|
-
/* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStarted ? /* @__PURE__ */ jsxs(StatusSpan, { $color: "#0ecb81", children: [
|
|
9999
|
-
/* @__PURE__ */ jsx(StatusDot, { $color: "#0ecb81", $pulse: true }),
|
|
10000
|
-
"LIVE"
|
|
10001
|
-
] }) : /* @__PURE__ */ jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
|
|
10002
|
-
/* @__PURE__ */ jsx(StatusDot, { $color: statusColor || "#D4AF37" }),
|
|
10003
|
-
statusLabel || "Preparing"
|
|
10004
|
-
] }) })
|
|
10005
|
-
] }),
|
|
10006
|
-
isPreLive ? /* @__PURE__ */ jsxs(HomePreLiveRow, { children: [
|
|
10007
|
-
countdown ? /* @__PURE__ */ jsxs(HomeCountdownSide, { children: [
|
|
10008
|
-
/* @__PURE__ */ jsx(CountdownLabel, { children: "Opens In" }),
|
|
10009
|
-
/* @__PURE__ */ jsxs(CountdownDigits, { children: [
|
|
10010
|
-
/* @__PURE__ */ jsx(CountdownNumber, { children: String(countdown.days).padStart(2, "0") }),
|
|
10011
|
-
/* @__PURE__ */ jsx(CountdownUnitLabel, { children: "D" }),
|
|
10012
|
-
/* @__PURE__ */ jsx(CountdownSeparator, { children: ":" }),
|
|
10013
|
-
/* @__PURE__ */ jsx(CountdownNumber, { children: String(countdown.hours).padStart(2, "0") }),
|
|
10014
|
-
/* @__PURE__ */ jsx(CountdownUnitLabel, { children: "H" }),
|
|
10015
|
-
/* @__PURE__ */ jsx(CountdownSeparator, { children: ":" }),
|
|
10016
|
-
/* @__PURE__ */ jsx(CountdownNumber, { children: String(countdown.minutes).padStart(2, "0") }),
|
|
10017
|
-
/* @__PURE__ */ jsx(CountdownUnitLabel, { children: "M" }),
|
|
10018
|
-
/* @__PURE__ */ jsx(CountdownSeparator, { children: ":" }),
|
|
10019
|
-
/* @__PURE__ */ jsx(CountdownNumber, { children: String(countdown.seconds).padStart(2, "0") }),
|
|
10020
|
-
/* @__PURE__ */ jsx(CountdownUnitLabel, { children: "S" })
|
|
10021
|
-
] })
|
|
10022
|
-
] }) : /* @__PURE__ */ jsx(HomeCountdownSide, { children: /* @__PURE__ */ jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }) }),
|
|
10023
|
-
/* @__PURE__ */ jsxs(HomeUnitsSide, { children: [
|
|
10024
|
-
/* @__PURE__ */ jsx(HomeUnitsLabel, { children: "Units Subscribed" }),
|
|
10025
|
-
/* @__PURE__ */ jsxs(HomeUnitsValue, { children: [
|
|
10026
|
-
/* @__PURE__ */ jsx(HomeSpinner, {}),
|
|
10027
|
-
/* @__PURE__ */ jsxs("span", { children: [
|
|
10028
|
-
" / ",
|
|
10029
|
-
supplyToSell.toLocaleString()
|
|
10030
|
-
] })
|
|
10031
|
-
] })
|
|
10032
|
-
] })
|
|
10033
|
-
] }) : /* @__PURE__ */ jsxs(LiveBody, { children: [
|
|
10034
|
-
/* @__PURE__ */ jsxs(LiveTopRow, { children: [
|
|
10035
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
10036
|
-
/* @__PURE__ */ jsxs(LiveLabel, { children: [
|
|
10037
|
-
"Offering Subscribed ",
|
|
10038
|
-
/* @__PURE__ */ jsx("span", { children: "\u24D8" })
|
|
10039
|
-
] }),
|
|
10040
|
-
/* @__PURE__ */ jsxs(LivePercent, { children: [
|
|
10041
|
-
percentSold.toFixed(1),
|
|
10042
|
-
"%",
|
|
10043
|
-
/* @__PURE__ */ jsx("span", { className: "arrow", children: "\u2191" })
|
|
10044
|
-
] })
|
|
10045
|
-
] }),
|
|
10046
|
-
/* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
|
|
10047
|
-
/* @__PURE__ */ jsx(LiveLabel, { children: "Units Subscribed" }),
|
|
10048
|
-
/* @__PURE__ */ jsxs(UnitsValue, { children: [
|
|
10049
|
-
/* @__PURE__ */ jsx("span", { children: totalSold.toLocaleString() }),
|
|
10050
|
-
/* @__PURE__ */ jsxs("small", { children: [
|
|
10051
|
-
"/ ",
|
|
10052
|
-
supplyToSell.toLocaleString()
|
|
10053
|
-
] })
|
|
10054
|
-
] })
|
|
10055
|
-
] })
|
|
10056
|
-
] }),
|
|
10057
|
-
/* @__PURE__ */ jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
|
|
10058
|
-
/* @__PURE__ */ jsxs(ProgressInfo, { children: [
|
|
10059
|
-
/* @__PURE__ */ jsxs(ProgressSubscribers, { children: [
|
|
10060
|
-
"Subscribers: ",
|
|
10061
|
-
subscriberCount.toLocaleString()
|
|
10062
|
-
] }),
|
|
10063
|
-
/* @__PURE__ */ jsxs(ProgressAmounts, { children: [
|
|
10064
|
-
/* @__PURE__ */ jsx("span", { className: "raised", children: formatCurrency3(computedRaised) }),
|
|
10065
|
-
/* @__PURE__ */ jsxs("span", { className: "target", children: [
|
|
10066
|
-
" / ",
|
|
10067
|
-
formatCurrency3(computedTarget)
|
|
10068
|
-
] })
|
|
10069
|
-
] })
|
|
10070
|
-
] })
|
|
10071
|
-
] })
|
|
10072
|
-
] });
|
|
10073
|
-
}
|
|
10074
|
-
return /* @__PURE__ */ jsxs(Container, { style, className, children: [
|
|
9793
|
+
return /* @__PURE__ */ jsxs(Container2, { style, className, children: [
|
|
10075
9794
|
/* @__PURE__ */ jsxs(Header2, { children: [
|
|
10076
9795
|
/* @__PURE__ */ jsxs("h3", { children: [
|
|
10077
9796
|
/* @__PURE__ */ jsx(FaChartLine, {}),
|
|
@@ -10139,7 +9858,7 @@ function OfferingProgressCard({
|
|
|
10139
9858
|
/* @__PURE__ */ jsx("span", { children: "\u24D8" })
|
|
10140
9859
|
] }),
|
|
10141
9860
|
/* @__PURE__ */ jsxs(LivePercent, { children: [
|
|
10142
|
-
percentSold.toFixed(1),
|
|
9861
|
+
percentSold < 0.1 && percentSold > 0 ? percentSold.toFixed(3) : percentSold.toFixed(1),
|
|
10143
9862
|
"%",
|
|
10144
9863
|
/* @__PURE__ */ jsx("span", { className: "arrow", children: "\u2191" })
|
|
10145
9864
|
] })
|
|
@@ -10172,7 +9891,7 @@ function OfferingProgressCard({
|
|
|
10172
9891
|
] })
|
|
10173
9892
|
] });
|
|
10174
9893
|
}
|
|
10175
|
-
var
|
|
9894
|
+
var Container2 = styled25.div`
|
|
10176
9895
|
background-color: var(--color-card-darker, #111);
|
|
10177
9896
|
border-radius: 8px;
|
|
10178
9897
|
padding: 1.5rem;
|
|
@@ -10372,59 +10091,6 @@ var ProgressAmounts = styled25.div`
|
|
|
10372
10091
|
.raised { color: #D4AF37; }
|
|
10373
10092
|
.target { color: rgba(255,255,255,0.3); }
|
|
10374
10093
|
`;
|
|
10375
|
-
var CompactContainer = styled25.div`
|
|
10376
|
-
width: 100%;
|
|
10377
|
-
margin: 1.5rem 0;
|
|
10378
|
-
display: flex;
|
|
10379
|
-
flex-direction: column;
|
|
10380
|
-
gap: 0.5rem;
|
|
10381
|
-
`;
|
|
10382
|
-
var HomePreLiveRow = styled25.div`
|
|
10383
|
-
display: flex;
|
|
10384
|
-
align-items: center;
|
|
10385
|
-
justify-content: space-between;
|
|
10386
|
-
padding-top: 1rem;
|
|
10387
|
-
`;
|
|
10388
|
-
var HomeCountdownSide = styled25.div`
|
|
10389
|
-
display: flex;
|
|
10390
|
-
flex-direction: column;
|
|
10391
|
-
align-items: center;
|
|
10392
|
-
flex: 1;
|
|
10393
|
-
`;
|
|
10394
|
-
var HomeUnitsSide = styled25.div`
|
|
10395
|
-
text-align: center;
|
|
10396
|
-
flex-shrink: 0;
|
|
10397
|
-
`;
|
|
10398
|
-
var HomeUnitsLabel = styled25.div`
|
|
10399
|
-
font-size: 0.6rem;
|
|
10400
|
-
color: var(--color-text-secondary);
|
|
10401
|
-
text-transform: uppercase;
|
|
10402
|
-
letter-spacing: 0.1em;
|
|
10403
|
-
margin-bottom: 0.2rem;
|
|
10404
|
-
`;
|
|
10405
|
-
var HomeUnitsValue = styled25.div`
|
|
10406
|
-
font-size: 1.1rem;
|
|
10407
|
-
font-weight: 700;
|
|
10408
|
-
font-family: monospace;
|
|
10409
|
-
span {
|
|
10410
|
-
color: var(--color-text-secondary);
|
|
10411
|
-
font-weight: 400;
|
|
10412
|
-
}
|
|
10413
|
-
`;
|
|
10414
|
-
var HomeSpinner = styled25.span`
|
|
10415
|
-
display: inline-block;
|
|
10416
|
-
width: 14px;
|
|
10417
|
-
height: 14px;
|
|
10418
|
-
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
10419
|
-
border-top-color: var(--color-accent, #f0b90b);
|
|
10420
|
-
border-radius: 50%;
|
|
10421
|
-
animation: homeSpin 1s linear infinite;
|
|
10422
|
-
vertical-align: middle;
|
|
10423
|
-
margin-right: 0.15rem;
|
|
10424
|
-
@keyframes homeSpin {
|
|
10425
|
-
to { transform: rotate(360deg); }
|
|
10426
|
-
}
|
|
10427
|
-
`;
|
|
10428
10094
|
var MAX_DISPLAY_AMOUNT = 6e4;
|
|
10429
10095
|
var formatCurrency4 = (amount) => {
|
|
10430
10096
|
if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;
|
|
@@ -10761,191 +10427,6 @@ var LiveIndicatorDot = styled25.span`
|
|
|
10761
10427
|
100% { box-shadow: 0 0 0 0 rgba(14,203,129,0); }
|
|
10762
10428
|
}
|
|
10763
10429
|
`;
|
|
10764
|
-
var slideIn = keyframes`
|
|
10765
|
-
from { transform: translateX(110%); opacity: 0; }
|
|
10766
|
-
to { transform: translateX(0); opacity: 1; }
|
|
10767
|
-
`;
|
|
10768
|
-
var slideOut = keyframes`
|
|
10769
|
-
from { transform: translateX(0); opacity: 1; }
|
|
10770
|
-
to { transform: translateX(110%); opacity: 0; }
|
|
10771
|
-
`;
|
|
10772
|
-
var progressShrink = keyframes`
|
|
10773
|
-
from { width: 100%; }
|
|
10774
|
-
to { width: 0%; }
|
|
10775
|
-
`;
|
|
10776
|
-
var VARIANT_COLORS = {
|
|
10777
|
-
success: { accent: "#0ecb81", icon: "\u2713" },
|
|
10778
|
-
error: { accent: "#f6465d", icon: "\u2715" },
|
|
10779
|
-
info: { accent: "#E6C656", icon: "\u2139" },
|
|
10780
|
-
pending: { accent: "#7EB3E6", icon: "\u25CC" }
|
|
10781
|
-
};
|
|
10782
|
-
var Wrapper = styled25.div`
|
|
10783
|
-
position: relative;
|
|
10784
|
-
display: flex;
|
|
10785
|
-
flex-direction: column;
|
|
10786
|
-
gap: 0;
|
|
10787
|
-
width: 340px;
|
|
10788
|
-
background: #0d0f1a;
|
|
10789
|
-
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
10790
|
-
border-radius: 10px;
|
|
10791
|
-
overflow: hidden;
|
|
10792
|
-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
|
|
10793
|
-
animation: ${({ $exiting }) => $exiting ? css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
|
|
10794
|
-
pointer-events: all;
|
|
10795
|
-
`;
|
|
10796
|
-
var Body = styled25.div`
|
|
10797
|
-
display: flex;
|
|
10798
|
-
align-items: flex-start;
|
|
10799
|
-
gap: 12px;
|
|
10800
|
-
padding: 14px 16px 12px;
|
|
10801
|
-
`;
|
|
10802
|
-
var IconDot = styled25.div`
|
|
10803
|
-
flex-shrink: 0;
|
|
10804
|
-
width: 28px;
|
|
10805
|
-
height: 28px;
|
|
10806
|
-
border-radius: 50%;
|
|
10807
|
-
background: ${({ $color }) => $color}1a;
|
|
10808
|
-
border: 1px solid ${({ $color }) => $color}55;
|
|
10809
|
-
display: flex;
|
|
10810
|
-
align-items: center;
|
|
10811
|
-
justify-content: center;
|
|
10812
|
-
font-size: 0.75rem;
|
|
10813
|
-
font-weight: 700;
|
|
10814
|
-
color: ${({ $color }) => $color};
|
|
10815
|
-
margin-top: 1px;
|
|
10816
|
-
`;
|
|
10817
|
-
var Content = styled25.div`
|
|
10818
|
-
flex: 1;
|
|
10819
|
-
min-width: 0;
|
|
10820
|
-
`;
|
|
10821
|
-
var Title2 = styled25.p`
|
|
10822
|
-
margin: 0 0 2px;
|
|
10823
|
-
font-size: 0.8rem;
|
|
10824
|
-
font-weight: 600;
|
|
10825
|
-
color: #fff;
|
|
10826
|
-
letter-spacing: 0.01em;
|
|
10827
|
-
`;
|
|
10828
|
-
var Amount = styled25.p`
|
|
10829
|
-
margin: 0 0 6px;
|
|
10830
|
-
font-size: 1.05rem;
|
|
10831
|
-
font-weight: 700;
|
|
10832
|
-
color: #E6C656;
|
|
10833
|
-
letter-spacing: -0.01em;
|
|
10834
|
-
`;
|
|
10835
|
-
var TxRow = styled25.a`
|
|
10836
|
-
display: inline-flex;
|
|
10837
|
-
align-items: center;
|
|
10838
|
-
gap: 5px;
|
|
10839
|
-
font-family: 'IBM Plex Mono', 'Space Mono', monospace;
|
|
10840
|
-
font-size: 0.68rem;
|
|
10841
|
-
color: rgba(255, 255, 255, 0.4);
|
|
10842
|
-
text-decoration: none;
|
|
10843
|
-
transition: color 0.15s;
|
|
10844
|
-
&:hover {
|
|
10845
|
-
color: #7EB3E6;
|
|
10846
|
-
}
|
|
10847
|
-
`;
|
|
10848
|
-
var TxArrow = styled25.span`
|
|
10849
|
-
font-size: 0.6rem;
|
|
10850
|
-
opacity: 0.6;
|
|
10851
|
-
`;
|
|
10852
|
-
var CloseBtn = styled25.button`
|
|
10853
|
-
flex-shrink: 0;
|
|
10854
|
-
background: none;
|
|
10855
|
-
border: none;
|
|
10856
|
-
padding: 2px 4px;
|
|
10857
|
-
cursor: pointer;
|
|
10858
|
-
color: rgba(255, 255, 255, 0.25);
|
|
10859
|
-
font-size: 0.9rem;
|
|
10860
|
-
line-height: 1;
|
|
10861
|
-
transition: color 0.15s;
|
|
10862
|
-
&:hover { color: rgba(255, 255, 255, 0.7); }
|
|
10863
|
-
`;
|
|
10864
|
-
var ProgressBar = styled25.div`
|
|
10865
|
-
height: 2px;
|
|
10866
|
-
background: rgba(255, 255, 255, 0.06);
|
|
10867
|
-
position: relative;
|
|
10868
|
-
&::after {
|
|
10869
|
-
content: '';
|
|
10870
|
-
position: absolute;
|
|
10871
|
-
left: 0;
|
|
10872
|
-
top: 0;
|
|
10873
|
-
height: 100%;
|
|
10874
|
-
background: ${({ $color }) => $color};
|
|
10875
|
-
animation: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
|
|
10876
|
-
}
|
|
10877
|
-
`;
|
|
10878
|
-
var Container2 = styled25.div`
|
|
10879
|
-
position: fixed;
|
|
10880
|
-
bottom: 24px;
|
|
10881
|
-
right: 24px;
|
|
10882
|
-
z-index: 9999;
|
|
10883
|
-
display: flex;
|
|
10884
|
-
flex-direction: column-reverse;
|
|
10885
|
-
gap: 10px;
|
|
10886
|
-
pointer-events: none;
|
|
10887
|
-
`;
|
|
10888
|
-
var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
|
|
10889
|
-
function truncateHash(hash) {
|
|
10890
|
-
return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
|
|
10891
|
-
}
|
|
10892
|
-
function ToastItem({ toast, onDismiss }) {
|
|
10893
|
-
const [exiting, setExiting] = useState(false);
|
|
10894
|
-
const timerRef = useRef(null);
|
|
10895
|
-
const dismiss = useCallback(() => {
|
|
10896
|
-
setExiting(true);
|
|
10897
|
-
setTimeout(() => onDismiss(toast.id), 280);
|
|
10898
|
-
}, [onDismiss, toast.id]);
|
|
10899
|
-
useEffect(() => {
|
|
10900
|
-
const duration2 = toast.duration ?? 6e3;
|
|
10901
|
-
if (duration2 > 0) {
|
|
10902
|
-
timerRef.current = setTimeout(dismiss, duration2);
|
|
10903
|
-
}
|
|
10904
|
-
return () => {
|
|
10905
|
-
if (timerRef.current) clearTimeout(timerRef.current);
|
|
10906
|
-
};
|
|
10907
|
-
}, [dismiss, toast.duration]);
|
|
10908
|
-
const { accent, icon } = VARIANT_COLORS[toast.variant];
|
|
10909
|
-
const duration = toast.duration ?? 6e3;
|
|
10910
|
-
const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
|
|
10911
|
-
const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
|
|
10912
|
-
return /* @__PURE__ */ jsxs(Wrapper, { $exiting: exiting, children: [
|
|
10913
|
-
/* @__PURE__ */ jsxs(Body, { children: [
|
|
10914
|
-
/* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
|
|
10915
|
-
/* @__PURE__ */ jsxs(Content, { children: [
|
|
10916
|
-
/* @__PURE__ */ jsx(Title2, { children: toast.title }),
|
|
10917
|
-
toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
|
|
10918
|
-
toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
|
|
10919
|
-
truncateHash(toast.txHash),
|
|
10920
|
-
/* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
|
|
10921
|
-
] })
|
|
10922
|
-
] }),
|
|
10923
|
-
/* @__PURE__ */ jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
|
|
10924
|
-
] }),
|
|
10925
|
-
duration > 0 && /* @__PURE__ */ jsx(ProgressBar, { $color: accent, $duration: duration })
|
|
10926
|
-
] });
|
|
10927
|
-
}
|
|
10928
|
-
var ToastContext = createContext(null);
|
|
10929
|
-
function ToastProvider({ children }) {
|
|
10930
|
-
const [toasts, setToasts] = useState([]);
|
|
10931
|
-
const addToast = useCallback((data) => {
|
|
10932
|
-
const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
|
10933
|
-
setToasts((prev) => [...prev, { ...data, id }]);
|
|
10934
|
-
return id;
|
|
10935
|
-
}, []);
|
|
10936
|
-
const dismiss = useCallback((id) => {
|
|
10937
|
-
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
10938
|
-
}, []);
|
|
10939
|
-
return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
|
|
10940
|
-
children,
|
|
10941
|
-
/* @__PURE__ */ jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
|
|
10942
|
-
] });
|
|
10943
|
-
}
|
|
10944
|
-
function useToast() {
|
|
10945
|
-
const ctx = useContext(ToastContext);
|
|
10946
|
-
if (!ctx) throw new Error("useToast must be used within a ToastProvider");
|
|
10947
|
-
return ctx;
|
|
10948
|
-
}
|
|
10949
10430
|
function OrderPanel({
|
|
10950
10431
|
statusLabel,
|
|
10951
10432
|
statusColor,
|
|
@@ -11963,7 +11444,7 @@ function PortfolioActivityPanel({
|
|
|
11963
11444
|
] }),
|
|
11964
11445
|
/* @__PURE__ */ jsxs(HoldingsQuantity, { children: [
|
|
11965
11446
|
/* @__PURE__ */ jsxs("span", { children: [
|
|
11966
|
-
|
|
11447
|
+
pos.quantity.toFixed(2),
|
|
11967
11448
|
" ",
|
|
11968
11449
|
pos.tokenName
|
|
11969
11450
|
] }),
|
|
@@ -11975,7 +11456,8 @@ function PortfolioActivityPanel({
|
|
|
11975
11456
|
/* @__PURE__ */ jsxs(HoldingsPnL, { children: [
|
|
11976
11457
|
/* @__PURE__ */ jsxs(PnLAmount, { $positive: isPositive, children: [
|
|
11977
11458
|
isPositive ? "+" : "-",
|
|
11978
|
-
|
|
11459
|
+
"$",
|
|
11460
|
+
Math.abs(pnl).toFixed(2)
|
|
11979
11461
|
] }),
|
|
11980
11462
|
/* @__PURE__ */ jsxs(PnLPercentage, { $positive: isPositive, children: [
|
|
11981
11463
|
isPositive ? "+" : "",
|
|
@@ -12101,14 +11583,7 @@ function PortfolioActivityPanel({
|
|
|
12101
11583
|
formatTimestamp(trade.executedAt)
|
|
12102
11584
|
] })
|
|
12103
11585
|
] }),
|
|
12104
|
-
/* @__PURE__ */ jsx(
|
|
12105
|
-
ActivityTag,
|
|
12106
|
-
{
|
|
12107
|
-
$color: trade.side === "SELL" ? "#f6465d" : "#0ecb81",
|
|
12108
|
-
$bg: trade.side === "SELL" ? "rgba(246,70,93,0.12)" : "rgba(14,203,129,0.12)",
|
|
12109
|
-
children: sideLabel(trade.side)
|
|
12110
|
-
}
|
|
12111
|
-
),
|
|
11586
|
+
trade.status === "SETTLEMENT_FAILED" ? /* @__PURE__ */ jsx(ActivityTag, { $color: "#f6465d", $bg: "rgba(246,70,93,0.12)", children: "Failed" }) : trade.status === "SETTLED" ? /* @__PURE__ */ jsx(ActivityTag, { $color: "#0ecb81", $bg: "rgba(14,203,129,0.12)", children: "Settled" }) : /* @__PURE__ */ jsx(ActivityTag, { $color: "#f0b90b", $bg: "rgba(240,185,11,0.15)", children: "Settling" }),
|
|
12112
11587
|
/* @__PURE__ */ jsx(ActivityAmount, { children: formatCurrency5(trade.price * trade.quantity) })
|
|
12113
11588
|
] }, trade.tradeId))
|
|
12114
11589
|
] }),
|
|
@@ -12286,8 +11761,8 @@ var ActivityPrimary = styled25.span`
|
|
|
12286
11761
|
font-weight: 500;
|
|
12287
11762
|
`;
|
|
12288
11763
|
var ActivitySecondary = styled25.span`
|
|
12289
|
-
font-size: 0.
|
|
12290
|
-
color: rgba(255, 255, 255, 0.
|
|
11764
|
+
font-size: 0.7rem;
|
|
11765
|
+
color: rgba(255, 255, 255, 0.5);
|
|
12291
11766
|
`;
|
|
12292
11767
|
var ActivityTag = styled25.span`
|
|
12293
11768
|
font-size: 0.58rem;
|
|
@@ -14180,7 +13655,7 @@ function PropertyValuation({
|
|
|
14180
13655
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
14181
13656
|
/* @__PURE__ */ jsxs(PricingModelDetail, { children: [
|
|
14182
13657
|
/* @__PURE__ */ jsx(PropertyDetailLabel, { children: "Last Price" }),
|
|
14183
|
-
/* @__PURE__ */ jsx(PricingDetailValue, { children:
|
|
13658
|
+
/* @__PURE__ */ jsx(PricingDetailValue, { children: formatCompact(lastPrice) })
|
|
14184
13659
|
] }),
|
|
14185
13660
|
/* @__PURE__ */ jsxs(PricingModelDetail, { children: [
|
|
14186
13661
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }, children: [
|
|
@@ -14191,11 +13666,11 @@ function PropertyValuation({
|
|
|
14191
13666
|
] })
|
|
14192
13667
|
] }),
|
|
14193
13668
|
/* @__PURE__ */ jsxs(PricingDetailValue, { style: { color: "var(--color-accent)", fontWeight: "bold" }, children: [
|
|
14194
|
-
|
|
13669
|
+
formatCompact(fairValue),
|
|
14195
13670
|
" ",
|
|
14196
13671
|
/* @__PURE__ */ jsxs("span", { style: { fontSize: "0.85em", fontWeight: "normal", opacity: 0.8 }, children: [
|
|
14197
13672
|
"(",
|
|
14198
|
-
|
|
13673
|
+
formatCompact(fairValue * tokensOutstanding),
|
|
14199
13674
|
")"
|
|
14200
13675
|
] })
|
|
14201
13676
|
] })
|
|
@@ -14212,7 +13687,7 @@ function PropertyValuation({
|
|
|
14212
13687
|
/* @__PURE__ */ jsx(GaugeIndicator, { type: "fairValue", position: 50 }),
|
|
14213
13688
|
/* @__PURE__ */ jsxs(GaugePriceTag, { position: gaugePosition, children: [
|
|
14214
13689
|
/* @__PURE__ */ jsx("span", { children: "Last Price" }),
|
|
14215
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
13690
|
+
/* @__PURE__ */ jsx("span", { children: formatCompact(lastPrice) })
|
|
14216
13691
|
] }),
|
|
14217
13692
|
/* @__PURE__ */ jsx(GaugeIndicator, { type: "lastPrice", position: gaugePosition })
|
|
14218
13693
|
] }),
|
|
@@ -14220,36 +13695,36 @@ function PropertyValuation({
|
|
|
14220
13695
|
/* @__PURE__ */ jsx(ValuationItem, { children: /* @__PURE__ */ jsxs(ValuationValue, { style: { color: "#4CAF50" }, children: [
|
|
14221
13696
|
/* @__PURE__ */ jsxs("span", { children: [
|
|
14222
13697
|
"< ",
|
|
14223
|
-
|
|
13698
|
+
formatCompact(undervaluedThreshold)
|
|
14224
13699
|
] }),
|
|
14225
13700
|
/* @__PURE__ */ jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
|
|
14226
13701
|
"(",
|
|
14227
|
-
|
|
13702
|
+
formatCompact(undervaluedThreshold * tokensOutstanding),
|
|
14228
13703
|
")"
|
|
14229
13704
|
] })
|
|
14230
13705
|
] }) }),
|
|
14231
13706
|
/* @__PURE__ */ jsx(ValuationItem, { children: /* @__PURE__ */ jsxs(ValuationValue, { style: { color: "var(--color-accent)" }, children: [
|
|
14232
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
13707
|
+
/* @__PURE__ */ jsx("span", { children: formatCompact(fairValue) }),
|
|
14233
13708
|
/* @__PURE__ */ jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
|
|
14234
13709
|
"(",
|
|
14235
|
-
|
|
13710
|
+
formatCompact(fairValue * tokensOutstanding),
|
|
14236
13711
|
")"
|
|
14237
13712
|
] })
|
|
14238
13713
|
] }) }),
|
|
14239
13714
|
/* @__PURE__ */ jsx(ValuationItem, { children: /* @__PURE__ */ jsxs(ValuationValue, { style: { color: "#F44336" }, children: [
|
|
14240
13715
|
/* @__PURE__ */ jsxs("span", { children: [
|
|
14241
13716
|
"> ",
|
|
14242
|
-
|
|
13717
|
+
formatCompact(overvaluedThreshold)
|
|
14243
13718
|
] }),
|
|
14244
13719
|
/* @__PURE__ */ jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
|
|
14245
13720
|
"(",
|
|
14246
|
-
|
|
13721
|
+
formatCompact(overvaluedThreshold * tokensOutstanding),
|
|
14247
13722
|
")"
|
|
14248
13723
|
] })
|
|
14249
13724
|
] }) })
|
|
14250
13725
|
] })
|
|
14251
13726
|
] }),
|
|
14252
|
-
/* @__PURE__ */ jsxs(
|
|
13727
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
14253
13728
|
/* @__PURE__ */ jsx("h3", { style: { marginBottom: "1rem", fontSize: "1.1rem", color: "#fff" }, children: "Historical Valuation" }),
|
|
14254
13729
|
/* @__PURE__ */ jsx(ChartContainer, { children: /* @__PURE__ */ jsxs(ChartBackground, { children: [
|
|
14255
13730
|
axisLabels.map((label, index) => /* @__PURE__ */ jsx(YAxisLabel, { style: { top: `${10 + index * 22}%` }, children: label }, `${label}-${index}`)),
|
|
@@ -14368,15 +13843,7 @@ function PropertyValuation({
|
|
|
14368
13843
|
] })
|
|
14369
13844
|
] }) })
|
|
14370
13845
|
] })
|
|
14371
|
-
] })
|
|
14372
|
-
/* @__PURE__ */ jsx("h3", { className: "desktop-only-historical-chart", style: { marginBottom: "1rem", fontSize: "1.1rem", color: "#fff" }, children: "Historical Valuation" }),
|
|
14373
|
-
/* @__PURE__ */ jsx(ChartContainer, { className: "desktop-only-historical-chart", children: /* @__PURE__ */ jsxs(ChartBackground, { children: [
|
|
14374
|
-
axisLabels.map((label, index) => /* @__PURE__ */ jsx(YAxisLabel, { style: { top: `${10 + index * 22}%` }, children: label }, `${label}-${index}`)),
|
|
14375
|
-
/* @__PURE__ */ jsxs(ValuationSvg, { viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`, preserveAspectRatio: "none", children: [
|
|
14376
|
-
valuationPath ? /* @__PURE__ */ jsx("path", { d: valuationPath, fill: "none", stroke: "#D4AF37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null,
|
|
14377
|
-
fairValuePath ? /* @__PURE__ */ jsx("path", { d: fairValuePath, fill: "none", stroke: "#FFFFFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null
|
|
14378
|
-
] })
|
|
14379
|
-
] }) })
|
|
13846
|
+
] })
|
|
14380
13847
|
] })
|
|
14381
13848
|
] }),
|
|
14382
13849
|
/* @__PURE__ */ jsxs(RecentSalesSection, { children: [
|
|
@@ -14450,6 +13917,14 @@ function formatMillions(value) {
|
|
|
14450
13917
|
}
|
|
14451
13918
|
return `$${(value / 1e6).toFixed(2)}m`;
|
|
14452
13919
|
}
|
|
13920
|
+
function formatCompact(value) {
|
|
13921
|
+
if (value == null || !Number.isFinite(value)) return "\u2014";
|
|
13922
|
+
const abs = Math.abs(value);
|
|
13923
|
+
if (abs >= 1e9) return `$${(value / 1e9).toFixed(2)}B`;
|
|
13924
|
+
if (abs >= 1e6) return `$${(value / 1e6).toFixed(2)}M`;
|
|
13925
|
+
if (abs >= 1e3) return `$${(value / 1e3).toFixed(1)}K`;
|
|
13926
|
+
return formatCurrency6(value);
|
|
13927
|
+
}
|
|
14453
13928
|
function formatBedroomLabel(bedrooms) {
|
|
14454
13929
|
if (!Number.isFinite(bedrooms)) return "\u2014";
|
|
14455
13930
|
return `${bedrooms} Bed`;
|
|
@@ -14573,12 +14048,6 @@ var GaugePriceTag = styled25.div`
|
|
|
14573
14048
|
color: var(--color-accent);
|
|
14574
14049
|
}
|
|
14575
14050
|
`;
|
|
14576
|
-
var HiddenMobileChart = styled25.div`
|
|
14577
|
-
display: none;
|
|
14578
|
-
@media (max-width: 480px) {
|
|
14579
|
-
display: block;
|
|
14580
|
-
}
|
|
14581
|
-
`;
|
|
14582
14051
|
var ValuationWrapper = styled25.div`
|
|
14583
14052
|
display: flex;
|
|
14584
14053
|
flex-direction: column;
|
|
@@ -14630,9 +14099,10 @@ var PricingModelCard = styled25.div`
|
|
|
14630
14099
|
var PricingModelHeader = styled25.div`
|
|
14631
14100
|
display: flex;
|
|
14632
14101
|
justify-content: space-between;
|
|
14633
|
-
align-items:
|
|
14102
|
+
align-items: flex-start;
|
|
14634
14103
|
margin-bottom: 1.5rem;
|
|
14635
14104
|
gap: 1rem;
|
|
14105
|
+
flex-wrap: wrap;
|
|
14636
14106
|
|
|
14637
14107
|
.valuation-info {
|
|
14638
14108
|
display: flex;
|
|
@@ -14640,6 +14110,7 @@ var PricingModelHeader = styled25.div`
|
|
|
14640
14110
|
gap: 0.25rem;
|
|
14641
14111
|
font-size: 0.85rem;
|
|
14642
14112
|
color: rgba(255, 255, 255, 0.75);
|
|
14113
|
+
flex-shrink: 0;
|
|
14643
14114
|
}
|
|
14644
14115
|
`;
|
|
14645
14116
|
var PricingModelTitle = styled25.h3`
|
|
@@ -14706,15 +14177,31 @@ var ValuationDetails = styled25.div`
|
|
|
14706
14177
|
display: flex;
|
|
14707
14178
|
justify-content: space-between;
|
|
14708
14179
|
margin-top: 1rem;
|
|
14180
|
+
gap: 0.25rem;
|
|
14709
14181
|
`;
|
|
14710
14182
|
var ValuationItem = styled25.div`
|
|
14711
14183
|
display: flex;
|
|
14712
14184
|
flex-direction: column;
|
|
14185
|
+
min-width: 0;
|
|
14186
|
+
overflow: hidden;
|
|
14713
14187
|
`;
|
|
14714
14188
|
var ValuationValue = styled25.div`
|
|
14715
14189
|
font-size: 1rem;
|
|
14716
14190
|
font-weight: 600;
|
|
14717
14191
|
color: #fff;
|
|
14192
|
+
display: flex;
|
|
14193
|
+
flex-direction: column;
|
|
14194
|
+
gap: 2px;
|
|
14195
|
+
overflow-wrap: break-word;
|
|
14196
|
+
word-break: break-word;
|
|
14197
|
+
|
|
14198
|
+
@media (max-width: 480px) {
|
|
14199
|
+
font-size: 0.72rem;
|
|
14200
|
+
|
|
14201
|
+
.valuation-amount-span {
|
|
14202
|
+
display: none;
|
|
14203
|
+
}
|
|
14204
|
+
}
|
|
14718
14205
|
`;
|
|
14719
14206
|
var ChartContainer = styled25.div`
|
|
14720
14207
|
width: 100%;
|
|
@@ -15127,7 +14614,7 @@ var ThumbnailStrip = styled25.div`
|
|
|
15127
14614
|
display: none;
|
|
15128
14615
|
}
|
|
15129
14616
|
`;
|
|
15130
|
-
var
|
|
14617
|
+
var Thumbnail2 = styled25.button`
|
|
15131
14618
|
width: 86px;
|
|
15132
14619
|
height: 64px;
|
|
15133
14620
|
border-radius: 6px;
|
|
@@ -15463,7 +14950,7 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
|
|
|
15463
14950
|
]
|
|
15464
14951
|
}
|
|
15465
14952
|
),
|
|
15466
|
-
/* @__PURE__ */ jsx(ThumbnailStrip, { onClick: (event) => event.stopPropagation(), children: galleryImages.map((image, idx) => /* @__PURE__ */ jsx(
|
|
14953
|
+
/* @__PURE__ */ jsx(ThumbnailStrip, { onClick: (event) => event.stopPropagation(), children: galleryImages.map((image, idx) => /* @__PURE__ */ jsx(Thumbnail2, { $active: idx === currentIndex, onClick: () => setCurrentIndex(idx), "aria-label": `Preview ${image.label}`, children: /* @__PURE__ */ jsx("img", { src: image.src, alt: image.alt }) }, image.alt)) })
|
|
15467
14954
|
]
|
|
15468
14955
|
}
|
|
15469
14956
|
);
|