@loafmarkets/ui 0.1.50 → 0.1.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +286 -266
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +165 -145
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React5 = require('react');
|
|
4
4
|
var reactSlot = require('@radix-ui/react-slot');
|
|
5
5
|
var classVarianceAuthority = require('class-variance-authority');
|
|
6
6
|
var clsx = require('clsx');
|
|
@@ -33,7 +33,7 @@ function _interopNamespace(e) {
|
|
|
33
33
|
return Object.freeze(n);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
|
|
37
37
|
var styled24__default = /*#__PURE__*/_interopDefault(styled24);
|
|
38
38
|
var LightweightCharts__namespace = /*#__PURE__*/_interopNamespace(LightweightCharts);
|
|
39
39
|
|
|
@@ -75,7 +75,7 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
);
|
|
78
|
-
var Button =
|
|
78
|
+
var Button = React5__namespace.forwardRef(
|
|
79
79
|
({ className, variant, size, radius, asChild = false, ...props }, ref) => {
|
|
80
80
|
const Comp = asChild ? reactSlot.Slot : "button";
|
|
81
81
|
const coercedRadius = radius ?? (variant === "onboarding" || variant === "onboardingOutline" ? "square" : void 0);
|
|
@@ -114,11 +114,11 @@ var badgeVariants = classVarianceAuthority.cva(
|
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
);
|
|
117
|
-
var Badge =
|
|
117
|
+
var Badge = React5__namespace.forwardRef(
|
|
118
118
|
({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
|
|
119
119
|
);
|
|
120
120
|
Badge.displayName = "Badge";
|
|
121
|
-
var Card =
|
|
121
|
+
var Card = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
122
122
|
"div",
|
|
123
123
|
{
|
|
124
124
|
ref,
|
|
@@ -130,11 +130,11 @@ var Card = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
130
130
|
}
|
|
131
131
|
));
|
|
132
132
|
Card.displayName = "Card";
|
|
133
|
-
var CardHeader =
|
|
133
|
+
var CardHeader = React5__namespace.forwardRef(
|
|
134
134
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
|
|
135
135
|
);
|
|
136
136
|
CardHeader.displayName = "CardHeader";
|
|
137
|
-
var CardTitle =
|
|
137
|
+
var CardTitle = React5__namespace.forwardRef(
|
|
138
138
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
139
139
|
"h3",
|
|
140
140
|
{
|
|
@@ -145,15 +145,15 @@ var CardTitle = React9__namespace.forwardRef(
|
|
|
145
145
|
)
|
|
146
146
|
);
|
|
147
147
|
CardTitle.displayName = "CardTitle";
|
|
148
|
-
var CardDescription =
|
|
148
|
+
var CardDescription = React5__namespace.forwardRef(
|
|
149
149
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-slate-500", className), ...props })
|
|
150
150
|
);
|
|
151
151
|
CardDescription.displayName = "CardDescription";
|
|
152
|
-
var CardContent =
|
|
152
|
+
var CardContent = React5__namespace.forwardRef(
|
|
153
153
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("px-6 pb-6 pt-2 text-sm text-slate-600", className), ...props })
|
|
154
154
|
);
|
|
155
155
|
CardContent.displayName = "CardContent";
|
|
156
|
-
var CardFooter =
|
|
156
|
+
var CardFooter = React5__namespace.forwardRef(
|
|
157
157
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center border-t border-slate-100 px-6 py-4", className), ...props })
|
|
158
158
|
);
|
|
159
159
|
CardFooter.displayName = "CardFooter";
|
|
@@ -171,7 +171,7 @@ var defaultFormatSignedCurrency = (value) => {
|
|
|
171
171
|
const sign = value >= 0 ? "+" : "-";
|
|
172
172
|
return `${sign}${defaultFormatCurrency(Math.abs(value))}`;
|
|
173
173
|
};
|
|
174
|
-
var PortfolioSummary =
|
|
174
|
+
var PortfolioSummary = React5__namespace.forwardRef(
|
|
175
175
|
({
|
|
176
176
|
availableCash,
|
|
177
177
|
portfolioValue,
|
|
@@ -321,23 +321,23 @@ function HousePositionSlider({
|
|
|
321
321
|
className,
|
|
322
322
|
...props
|
|
323
323
|
}) {
|
|
324
|
-
const [orderMode, setOrderMode] =
|
|
325
|
-
const [buyTrackingMode, setBuyTrackingMode] =
|
|
326
|
-
const [deltaDollars, setDeltaDollars] =
|
|
327
|
-
const [deltaTokensBuy, setDeltaTokensBuy] =
|
|
328
|
-
const [deltaTokensSell, setDeltaTokensSell] =
|
|
329
|
-
const [_isDragging, setIsDragging] =
|
|
330
|
-
const [visualTargetPct, setVisualTargetPct] =
|
|
331
|
-
const [orderType, setOrderType] =
|
|
332
|
-
const [limitPrice, setLimitPrice] =
|
|
333
|
-
const [limitPriceInput, setLimitPriceInput] =
|
|
334
|
-
const [limitPriceDirty, setLimitPriceDirty] =
|
|
335
|
-
const [ownershipInput, setOwnershipInput] =
|
|
336
|
-
const [tokenAmountInput, setTokenAmountInput] =
|
|
337
|
-
const houseRef =
|
|
324
|
+
const [orderMode, setOrderMode] = React5__namespace.useState("none");
|
|
325
|
+
const [buyTrackingMode, setBuyTrackingMode] = React5__namespace.useState("dollars");
|
|
326
|
+
const [deltaDollars, setDeltaDollars] = React5__namespace.useState(0);
|
|
327
|
+
const [deltaTokensBuy, setDeltaTokensBuy] = React5__namespace.useState(0);
|
|
328
|
+
const [deltaTokensSell, setDeltaTokensSell] = React5__namespace.useState(0);
|
|
329
|
+
const [_isDragging, setIsDragging] = React5__namespace.useState(false);
|
|
330
|
+
const [visualTargetPct, setVisualTargetPct] = React5__namespace.useState(null);
|
|
331
|
+
const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
|
|
332
|
+
const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
|
|
333
|
+
const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
|
|
334
|
+
const [limitPriceDirty, setLimitPriceDirty] = React5__namespace.useState(false);
|
|
335
|
+
const [ownershipInput, setOwnershipInput] = React5__namespace.useState("");
|
|
336
|
+
const [tokenAmountInput, setTokenAmountInput] = React5__namespace.useState("");
|
|
337
|
+
const houseRef = React5__namespace.useRef(null);
|
|
338
338
|
const asks = orderbook?.asks ?? [];
|
|
339
339
|
const bids = orderbook?.bids ?? [];
|
|
340
|
-
|
|
340
|
+
React5__namespace.useEffect(() => {
|
|
341
341
|
if (orderType !== "limit") return;
|
|
342
342
|
if (limitPriceDirty) return;
|
|
343
343
|
setLimitPrice(currentPrice);
|
|
@@ -412,7 +412,7 @@ function HousePositionSlider({
|
|
|
412
412
|
const impliedDisplayTargetOwnership = clamp(targetOwnership + ownershipShift, 0, 100);
|
|
413
413
|
const displayTargetOwnership = visualTargetPct ?? impliedDisplayTargetOwnership;
|
|
414
414
|
const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
|
|
415
|
-
const resetOrder =
|
|
415
|
+
const resetOrder = React5__namespace.useCallback(() => {
|
|
416
416
|
setOrderMode("none");
|
|
417
417
|
setBuyTrackingMode("dollars");
|
|
418
418
|
setDeltaDollars(0);
|
|
@@ -420,7 +420,7 @@ function HousePositionSlider({
|
|
|
420
420
|
setDeltaTokensSell(0);
|
|
421
421
|
setVisualTargetPct(null);
|
|
422
422
|
}, []);
|
|
423
|
-
const updateOrderFromTargetValue =
|
|
423
|
+
const updateOrderFromTargetValue = React5__namespace.useCallback(
|
|
424
424
|
(newTargetValue) => {
|
|
425
425
|
const newDeltaValue = newTargetValue - holdingsValue;
|
|
426
426
|
if (newDeltaValue > 0) {
|
|
@@ -444,7 +444,7 @@ function HousePositionSlider({
|
|
|
444
444
|
},
|
|
445
445
|
[effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, resetOrder, tokensHeld]
|
|
446
446
|
);
|
|
447
|
-
const updateOrderFromOwnership =
|
|
447
|
+
const updateOrderFromOwnership = React5__namespace.useCallback(
|
|
448
448
|
(newOwnershipPercent) => {
|
|
449
449
|
const nextOwnership = clamp(newOwnershipPercent, 0, 100);
|
|
450
450
|
const newTargetTokens = nextOwnership / 100 * totalTokens;
|
|
@@ -453,7 +453,7 @@ function HousePositionSlider({
|
|
|
453
453
|
},
|
|
454
454
|
[effectivePrice, totalTokens, updateOrderFromTargetValue]
|
|
455
455
|
);
|
|
456
|
-
const updateOrderFromTokenAmount =
|
|
456
|
+
const updateOrderFromTokenAmount = React5__namespace.useCallback(
|
|
457
457
|
(tokenAmountSigned) => {
|
|
458
458
|
if (tokenAmountSigned > 0) {
|
|
459
459
|
const maxTokens = effectiveAvailableCash / (effectivePrice || 1);
|
|
@@ -476,7 +476,7 @@ function HousePositionSlider({
|
|
|
476
476
|
},
|
|
477
477
|
[effectiveAvailableCash, effectivePrice, effectiveTokensHeld, resetOrder]
|
|
478
478
|
);
|
|
479
|
-
const updateOrderFromSlider =
|
|
479
|
+
const updateOrderFromSlider = React5__namespace.useCallback(
|
|
480
480
|
(pct) => {
|
|
481
481
|
const normalized = (pct - 50) / 50;
|
|
482
482
|
const magnitude = Math.min(Math.abs(normalized), 1);
|
|
@@ -520,7 +520,7 @@ function HousePositionSlider({
|
|
|
520
520
|
},
|
|
521
521
|
[effectiveAvailableCash, effectiveTokensHeld, resetOrder]
|
|
522
522
|
);
|
|
523
|
-
const handleDragAtClientY =
|
|
523
|
+
const handleDragAtClientY = React5__namespace.useCallback(
|
|
524
524
|
(clientY) => {
|
|
525
525
|
if (!houseRef.current) return;
|
|
526
526
|
const rect = houseRef.current.getBoundingClientRect();
|
|
@@ -1036,18 +1036,18 @@ function HousePositionSliderMobile({
|
|
|
1036
1036
|
className,
|
|
1037
1037
|
...props
|
|
1038
1038
|
}) {
|
|
1039
|
-
const [orderMode, setOrderMode] =
|
|
1040
|
-
const [deltaDollars, setDeltaDollars] =
|
|
1041
|
-
const [deltaTokensSell, setDeltaTokensSell] =
|
|
1042
|
-
const [deltaTokensBuy, setDeltaTokensBuy] =
|
|
1043
|
-
const [buyTrackingMode, setBuyTrackingMode] =
|
|
1044
|
-
const [orderType, setOrderType] =
|
|
1045
|
-
const [limitPrice, setLimitPrice] =
|
|
1046
|
-
const [limitPriceInput, setLimitPriceInput] =
|
|
1047
|
-
const [limitPriceDirty, setLimitPriceDirty] =
|
|
1048
|
-
const [tokenAmountInput, setTokenAmountInput] =
|
|
1049
|
-
const houseRef =
|
|
1050
|
-
|
|
1039
|
+
const [orderMode, setOrderMode] = React5__namespace.useState("none");
|
|
1040
|
+
const [deltaDollars, setDeltaDollars] = React5__namespace.useState(0);
|
|
1041
|
+
const [deltaTokensSell, setDeltaTokensSell] = React5__namespace.useState(0);
|
|
1042
|
+
const [deltaTokensBuy, setDeltaTokensBuy] = React5__namespace.useState(0);
|
|
1043
|
+
const [buyTrackingMode, setBuyTrackingMode] = React5__namespace.useState("dollars");
|
|
1044
|
+
const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
|
|
1045
|
+
const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
|
|
1046
|
+
const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
|
|
1047
|
+
const [limitPriceDirty, setLimitPriceDirty] = React5__namespace.useState(false);
|
|
1048
|
+
const [tokenAmountInput, setTokenAmountInput] = React5__namespace.useState("");
|
|
1049
|
+
const houseRef = React5__namespace.useRef(null);
|
|
1050
|
+
React5__namespace.useEffect(() => {
|
|
1051
1051
|
if (orderType !== "limit") return;
|
|
1052
1052
|
if (limitPriceDirty) return;
|
|
1053
1053
|
setLimitPrice(currentPrice);
|
|
@@ -1089,7 +1089,7 @@ function HousePositionSliderMobile({
|
|
|
1089
1089
|
const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
|
|
1090
1090
|
const targetOwnership = totalTokens > 0 ? targetTokens / totalTokens * 100 : 0;
|
|
1091
1091
|
const estFeeTokens = effectivePrice > 0 ? Math.abs(deltaValue) * 5e-3 / effectivePrice : 0;
|
|
1092
|
-
const updateOrderFromTargetValue =
|
|
1092
|
+
const updateOrderFromTargetValue = React5__namespace.useCallback(
|
|
1093
1093
|
(newTargetValue) => {
|
|
1094
1094
|
const newDeltaValue = newTargetValue - holdingsValue;
|
|
1095
1095
|
if (newDeltaValue > 0.01) {
|
|
@@ -1117,7 +1117,7 @@ function HousePositionSliderMobile({
|
|
|
1117
1117
|
},
|
|
1118
1118
|
[holdingsValue, availableCash, effectivePrice, tokensHeld]
|
|
1119
1119
|
);
|
|
1120
|
-
const updateOrderFromTokenAmount =
|
|
1120
|
+
const updateOrderFromTokenAmount = React5__namespace.useCallback(
|
|
1121
1121
|
(tokenAmount) => {
|
|
1122
1122
|
if (tokenAmount > 0) {
|
|
1123
1123
|
const maxTokens = effectivePrice > 0 ? availableCash / effectivePrice : 0;
|
|
@@ -1144,14 +1144,14 @@ function HousePositionSliderMobile({
|
|
|
1144
1144
|
},
|
|
1145
1145
|
[effectivePrice, availableCash, tokensHeld]
|
|
1146
1146
|
);
|
|
1147
|
-
const handleMarkerClick =
|
|
1147
|
+
const handleMarkerClick = React5__namespace.useCallback(
|
|
1148
1148
|
(pct) => {
|
|
1149
1149
|
const newTargetValue = pct / 100 * totalCapacity;
|
|
1150
1150
|
updateOrderFromTargetValue(newTargetValue);
|
|
1151
1151
|
},
|
|
1152
1152
|
[totalCapacity, updateOrderFromTargetValue]
|
|
1153
1153
|
);
|
|
1154
|
-
const onMouseDown =
|
|
1154
|
+
const onMouseDown = React5__namespace.useCallback(
|
|
1155
1155
|
(e) => {
|
|
1156
1156
|
e.preventDefault();
|
|
1157
1157
|
const move = (ev) => {
|
|
@@ -1171,7 +1171,7 @@ function HousePositionSliderMobile({
|
|
|
1171
1171
|
},
|
|
1172
1172
|
[totalCapacity, updateOrderFromTargetValue]
|
|
1173
1173
|
);
|
|
1174
|
-
const onTouchStart =
|
|
1174
|
+
const onTouchStart = React5__namespace.useCallback(
|
|
1175
1175
|
(e) => {
|
|
1176
1176
|
e.preventDefault();
|
|
1177
1177
|
e.stopPropagation();
|
|
@@ -1729,7 +1729,7 @@ var LiquidityText = styled24__default.default.span`
|
|
|
1729
1729
|
letter-spacing: 0.1px;
|
|
1730
1730
|
}
|
|
1731
1731
|
`;
|
|
1732
|
-
var LoafLiquidityBadge =
|
|
1732
|
+
var LoafLiquidityBadge = React5__namespace.forwardRef(
|
|
1733
1733
|
({ className, isGlowing, onClick, children, ...props }, ref) => {
|
|
1734
1734
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1735
1735
|
LogoContainer,
|
|
@@ -1758,7 +1758,7 @@ var LoafLiquidityBadge = React9__namespace.forwardRef(
|
|
|
1758
1758
|
);
|
|
1759
1759
|
LoafLiquidityBadge.displayName = "LoafLiquidityBadge";
|
|
1760
1760
|
var toSize = (v, fallback) => v == null ? fallback : typeof v === "number" ? `${v}px` : v;
|
|
1761
|
-
var Skeleton =
|
|
1761
|
+
var Skeleton = React5__namespace.forwardRef(
|
|
1762
1762
|
({ width, height, radius, className, style, ...props }, ref) => {
|
|
1763
1763
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1764
1764
|
"div",
|
|
@@ -1783,8 +1783,8 @@ var Skeleton = React9__namespace.forwardRef(
|
|
|
1783
1783
|
);
|
|
1784
1784
|
Skeleton.displayName = "Skeleton";
|
|
1785
1785
|
function useViewportCompact(breakpoint) {
|
|
1786
|
-
const [isCompact, setIsCompact] =
|
|
1787
|
-
|
|
1786
|
+
const [isCompact, setIsCompact] = React5__namespace.useState(false);
|
|
1787
|
+
React5__namespace.useEffect(() => {
|
|
1788
1788
|
if (typeof window === "undefined") return;
|
|
1789
1789
|
const check = () => setIsCompact(window.innerWidth <= breakpoint);
|
|
1790
1790
|
check();
|
|
@@ -1803,8 +1803,8 @@ function getTradeKey(trade, fallbackIndex) {
|
|
|
1803
1803
|
return `idx-${fallbackIndex}-${trade.type}-${trade.price}-${trade.amount}`;
|
|
1804
1804
|
}
|
|
1805
1805
|
function useAmountChangeFlash(ref, amount, side) {
|
|
1806
|
-
const prevAmountRef =
|
|
1807
|
-
|
|
1806
|
+
const prevAmountRef = React5__namespace.useRef(amount);
|
|
1807
|
+
React5__namespace.useEffect(() => {
|
|
1808
1808
|
const prev = prevAmountRef.current;
|
|
1809
1809
|
const node = ref.current;
|
|
1810
1810
|
if (prev !== amount && node && typeof node.animate === "function") {
|
|
@@ -1818,8 +1818,8 @@ function useAmountChangeFlash(ref, amount, side) {
|
|
|
1818
1818
|
}, [amount, ref, side]);
|
|
1819
1819
|
}
|
|
1820
1820
|
function useMidPriceFlash(ref, midPrice, restBgColor) {
|
|
1821
|
-
const prevMidRef =
|
|
1822
|
-
|
|
1821
|
+
const prevMidRef = React5__namespace.useRef(midPrice);
|
|
1822
|
+
React5__namespace.useEffect(() => {
|
|
1823
1823
|
const prev = prevMidRef.current;
|
|
1824
1824
|
const node = ref.current;
|
|
1825
1825
|
if (prev !== midPrice && prev > 0 && midPrice > 0 && node && typeof node.animate === "function") {
|
|
@@ -1840,9 +1840,9 @@ function TradeRow({
|
|
|
1840
1840
|
seenTradeKeysRef,
|
|
1841
1841
|
compact
|
|
1842
1842
|
}) {
|
|
1843
|
-
const rowRef =
|
|
1843
|
+
const rowRef = React5__namespace.useRef(null);
|
|
1844
1844
|
const { type } = trade;
|
|
1845
|
-
|
|
1845
|
+
React5__namespace.useEffect(() => {
|
|
1846
1846
|
if (seenTradeKeysRef.current.has(tradeKey)) return;
|
|
1847
1847
|
seenTradeKeysRef.current.add(tradeKey);
|
|
1848
1848
|
const node = rowRef.current;
|
|
@@ -1904,7 +1904,7 @@ function DepthRow({
|
|
|
1904
1904
|
hasUserOrder
|
|
1905
1905
|
}) {
|
|
1906
1906
|
const isAsk = side === "ask";
|
|
1907
|
-
const rowRef =
|
|
1907
|
+
const rowRef = React5__namespace.useRef(null);
|
|
1908
1908
|
useAmountChangeFlash(rowRef, amount, side);
|
|
1909
1909
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1910
1910
|
"div",
|
|
@@ -1951,7 +1951,7 @@ var DEPTH_ROW_HEIGHT_PX = 26;
|
|
|
1951
1951
|
var COMPACT_ROWS_VISIBLE = 5;
|
|
1952
1952
|
var COMPACT_ROW_HEIGHT_PX = 30;
|
|
1953
1953
|
var COMPACT_BREAKPOINT_PX = 1024;
|
|
1954
|
-
var Orderbook =
|
|
1954
|
+
var Orderbook = React5__namespace.forwardRef(
|
|
1955
1955
|
({
|
|
1956
1956
|
asks,
|
|
1957
1957
|
bids,
|
|
@@ -1973,10 +1973,10 @@ var Orderbook = React9__namespace.forwardRef(
|
|
|
1973
1973
|
...props
|
|
1974
1974
|
}, ref) => {
|
|
1975
1975
|
const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsxRuntime.jsx(LoafLiquidityBadge, { className: "text-[0.6rem]", onClick: onLoafLiquidityClick });
|
|
1976
|
-
const [tab, setTab] =
|
|
1977
|
-
const [tradeFilter, setTradeFilter] =
|
|
1976
|
+
const [tab, setTab] = React5__namespace.useState(defaultTab);
|
|
1977
|
+
const [tradeFilter, setTradeFilter] = React5__namespace.useState("all");
|
|
1978
1978
|
const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
|
|
1979
|
-
const { userAskPrices, userBidPrices } =
|
|
1979
|
+
const { userAskPrices, userBidPrices } = React5__namespace.useMemo(() => {
|
|
1980
1980
|
const ask = /* @__PURE__ */ new Set();
|
|
1981
1981
|
const bid = /* @__PURE__ */ new Set();
|
|
1982
1982
|
if (!userOrderPrices) return { userAskPrices: ask, userBidPrices: bid };
|
|
@@ -1986,15 +1986,15 @@ var Orderbook = React9__namespace.forwardRef(
|
|
|
1986
1986
|
}
|
|
1987
1987
|
return { userAskPrices: ask, userBidPrices: bid };
|
|
1988
1988
|
}, [userOrderPrices]);
|
|
1989
|
-
const seenTradeKeysRef =
|
|
1990
|
-
const initializedRef =
|
|
1989
|
+
const seenTradeKeysRef = React5__namespace.useRef(/* @__PURE__ */ new Set());
|
|
1990
|
+
const initializedRef = React5__namespace.useRef(false);
|
|
1991
1991
|
if (!initializedRef.current && trades.length > 0) {
|
|
1992
1992
|
for (let i = 0; i < trades.length; i++) {
|
|
1993
1993
|
seenTradeKeysRef.current.add(getTradeKey(trades[i], i));
|
|
1994
1994
|
}
|
|
1995
1995
|
initializedRef.current = true;
|
|
1996
1996
|
}
|
|
1997
|
-
|
|
1997
|
+
React5__namespace.useEffect(() => {
|
|
1998
1998
|
if (!initializedRef.current) return;
|
|
1999
1999
|
const live = /* @__PURE__ */ new Set();
|
|
2000
2000
|
for (let i = 0; i < trades.length; i++) {
|
|
@@ -2005,7 +2005,7 @@ var Orderbook = React9__namespace.forwardRef(
|
|
|
2005
2005
|
if (!live.has(key)) seen.delete(key);
|
|
2006
2006
|
}
|
|
2007
2007
|
}, [trades]);
|
|
2008
|
-
|
|
2008
|
+
React5__namespace.useEffect(() => {
|
|
2009
2009
|
setTab(defaultTab);
|
|
2010
2010
|
}, [defaultTab]);
|
|
2011
2011
|
const handleTab = (next) => {
|
|
@@ -2014,8 +2014,26 @@ var Orderbook = React9__namespace.forwardRef(
|
|
|
2014
2014
|
};
|
|
2015
2015
|
const isCompact = variant === "compact" || variant === "auto" && viewportCompact;
|
|
2016
2016
|
const sectionHeight = isCompact ? COMPACT_ROWS_VISIBLE * COMPACT_ROW_HEIGHT_PX : LEVEL_ROWS_VISIBLE * DEPTH_ROW_HEIGHT_PX;
|
|
2017
|
-
const
|
|
2018
|
-
const
|
|
2017
|
+
const rowCount = isCompact ? COMPACT_ROWS_VISIBLE : LEVEL_ROWS_VISIBLE;
|
|
2018
|
+
const askVisibleLevels = asks.slice(-rowCount);
|
|
2019
|
+
const bidVisibleLevels = bids.slice(0, rowCount);
|
|
2020
|
+
const askCumDepths = new Array(askVisibleLevels.length);
|
|
2021
|
+
{
|
|
2022
|
+
let acc = 0;
|
|
2023
|
+
for (let i = askVisibleLevels.length - 1; i >= 0; i--) {
|
|
2024
|
+
acc += askVisibleLevels[i].amount;
|
|
2025
|
+
askCumDepths[i] = acc;
|
|
2026
|
+
}
|
|
2027
|
+
}
|
|
2028
|
+
const bidCumDepths = new Array(bidVisibleLevels.length);
|
|
2029
|
+
{
|
|
2030
|
+
let acc = 0;
|
|
2031
|
+
for (let i = 0; i < bidVisibleLevels.length; i++) {
|
|
2032
|
+
acc += bidVisibleLevels[i].amount;
|
|
2033
|
+
bidCumDepths[i] = acc;
|
|
2034
|
+
}
|
|
2035
|
+
}
|
|
2036
|
+
const combinedMaxCumDepth = Math.max(1, ...askCumDepths, ...bidCumDepths);
|
|
2019
2037
|
const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
|
|
2020
2038
|
const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
|
|
2021
2039
|
const layoutProps = {
|
|
@@ -2031,8 +2049,11 @@ var Orderbook = React9__namespace.forwardRef(
|
|
|
2031
2049
|
amountPrecision,
|
|
2032
2050
|
asks,
|
|
2033
2051
|
bids,
|
|
2034
|
-
|
|
2035
|
-
|
|
2052
|
+
askVisibleLevels,
|
|
2053
|
+
bidVisibleLevels,
|
|
2054
|
+
askCumDepths,
|
|
2055
|
+
bidCumDepths,
|
|
2056
|
+
combinedMaxCumDepth,
|
|
2036
2057
|
midPrice,
|
|
2037
2058
|
midChangePercent,
|
|
2038
2059
|
midClass,
|
|
@@ -2092,10 +2113,11 @@ function DesktopOrderbookLayout({
|
|
|
2092
2113
|
tradeFiltered,
|
|
2093
2114
|
precision,
|
|
2094
2115
|
amountPrecision,
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2116
|
+
askVisibleLevels,
|
|
2117
|
+
bidVisibleLevels,
|
|
2118
|
+
askCumDepths,
|
|
2119
|
+
bidCumDepths,
|
|
2120
|
+
combinedMaxCumDepth,
|
|
2099
2121
|
midPrice,
|
|
2100
2122
|
midChangePercent,
|
|
2101
2123
|
midClass,
|
|
@@ -2105,7 +2127,7 @@ function DesktopOrderbookLayout({
|
|
|
2105
2127
|
isLoading,
|
|
2106
2128
|
seenTradeKeysRef
|
|
2107
2129
|
}) {
|
|
2108
|
-
const midRef =
|
|
2130
|
+
const midRef = React5__namespace.useRef(null);
|
|
2109
2131
|
useMidPriceFlash(midRef, midPrice, "#0b1a24");
|
|
2110
2132
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2111
2133
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
|
|
@@ -2211,13 +2233,13 @@ function DesktopOrderbookLayout({
|
|
|
2211
2233
|
{
|
|
2212
2234
|
className: "flex flex-col justify-end divide-y divide-white/5 overflow-hidden",
|
|
2213
2235
|
style: { height: `${sectionHeight}px` },
|
|
2214
|
-
children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) :
|
|
2236
|
+
children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2215
2237
|
DepthRow,
|
|
2216
2238
|
{
|
|
2217
2239
|
side: "ask",
|
|
2218
2240
|
price: l.price,
|
|
2219
2241
|
amount: l.amount,
|
|
2220
|
-
depthPct:
|
|
2242
|
+
depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
|
|
2221
2243
|
precision,
|
|
2222
2244
|
amountPrecision,
|
|
2223
2245
|
hasUserOrder: userAskPrices.has(l.price)
|
|
@@ -2250,13 +2272,13 @@ function DesktopOrderbookLayout({
|
|
|
2250
2272
|
{
|
|
2251
2273
|
className: "divide-y divide-white/5 overflow-hidden",
|
|
2252
2274
|
style: { height: `${sectionHeight}px` },
|
|
2253
|
-
children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) :
|
|
2275
|
+
children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2254
2276
|
DepthRow,
|
|
2255
2277
|
{
|
|
2256
2278
|
side: "bid",
|
|
2257
2279
|
price: l.price,
|
|
2258
2280
|
amount: l.amount,
|
|
2259
|
-
depthPct:
|
|
2281
|
+
depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
|
|
2260
2282
|
precision,
|
|
2261
2283
|
amountPrecision,
|
|
2262
2284
|
hasUserOrder: userBidPrices.has(l.price)
|
|
@@ -2280,10 +2302,11 @@ function MobileOrderbookLayout({
|
|
|
2280
2302
|
tradeFiltered,
|
|
2281
2303
|
precision,
|
|
2282
2304
|
amountPrecision,
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2305
|
+
askVisibleLevels: visibleAsks,
|
|
2306
|
+
bidVisibleLevels: visibleBids,
|
|
2307
|
+
askCumDepths,
|
|
2308
|
+
bidCumDepths,
|
|
2309
|
+
combinedMaxCumDepth,
|
|
2287
2310
|
midPrice,
|
|
2288
2311
|
midChangePercent,
|
|
2289
2312
|
midClass,
|
|
@@ -2293,10 +2316,8 @@ function MobileOrderbookLayout({
|
|
|
2293
2316
|
isLoading,
|
|
2294
2317
|
seenTradeKeysRef
|
|
2295
2318
|
}) {
|
|
2296
|
-
const midRef =
|
|
2319
|
+
const midRef = React5__namespace.useRef(null);
|
|
2297
2320
|
useMidPriceFlash(midRef, midPrice, "transparent");
|
|
2298
|
-
const visibleAsks = React9__namespace.useMemo(() => asks.slice(-COMPACT_ROWS_VISIBLE), [asks]);
|
|
2299
|
-
const visibleBids = React9__namespace.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
|
|
2300
2321
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2301
2322
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
2302
2323
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
@@ -2365,13 +2386,13 @@ function MobileOrderbookLayout({
|
|
|
2365
2386
|
]
|
|
2366
2387
|
}
|
|
2367
2388
|
),
|
|
2368
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ jsxRuntime.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) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2389
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
|
|
2369
2390
|
MobileDepthRow,
|
|
2370
2391
|
{
|
|
2371
2392
|
side: "ask",
|
|
2372
2393
|
price: l.price,
|
|
2373
2394
|
amount: l.amount,
|
|
2374
|
-
depthPct:
|
|
2395
|
+
depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
|
|
2375
2396
|
precision,
|
|
2376
2397
|
amountPrecision,
|
|
2377
2398
|
hasUserOrder: userAskPrices.has(l.price)
|
|
@@ -2411,13 +2432,13 @@ function MobileOrderbookLayout({
|
|
|
2411
2432
|
]
|
|
2412
2433
|
}
|
|
2413
2434
|
),
|
|
2414
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ jsxRuntime.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) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2435
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
|
|
2415
2436
|
MobileDepthRow,
|
|
2416
2437
|
{
|
|
2417
2438
|
side: "bid",
|
|
2418
2439
|
price: l.price,
|
|
2419
2440
|
amount: l.amount,
|
|
2420
|
-
depthPct:
|
|
2441
|
+
depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
|
|
2421
2442
|
precision,
|
|
2422
2443
|
amountPrecision,
|
|
2423
2444
|
hasUserOrder: userBidPrices.has(l.price)
|
|
@@ -2464,7 +2485,7 @@ function MobileDepthRow({
|
|
|
2464
2485
|
hasUserOrder
|
|
2465
2486
|
}) {
|
|
2466
2487
|
const isAsk = side === "ask";
|
|
2467
|
-
const rowRef =
|
|
2488
|
+
const rowRef = React5__namespace.useRef(null);
|
|
2468
2489
|
useAmountChangeFlash(rowRef, amount, side);
|
|
2469
2490
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2470
2491
|
"div",
|
|
@@ -2521,7 +2542,7 @@ function MobileDepthRow({
|
|
|
2521
2542
|
}
|
|
2522
2543
|
);
|
|
2523
2544
|
}
|
|
2524
|
-
var PropertyTour =
|
|
2545
|
+
var PropertyTour = React5__namespace.forwardRef(
|
|
2525
2546
|
({
|
|
2526
2547
|
className,
|
|
2527
2548
|
title,
|
|
@@ -2534,8 +2555,8 @@ var PropertyTour = React9__namespace.forwardRef(
|
|
|
2534
2555
|
playsInline = true,
|
|
2535
2556
|
...props
|
|
2536
2557
|
}, ref) => {
|
|
2537
|
-
const videoRef =
|
|
2538
|
-
|
|
2558
|
+
const videoRef = React5__namespace.useRef(null);
|
|
2559
|
+
React5__namespace.useEffect(() => {
|
|
2539
2560
|
const video = videoRef.current;
|
|
2540
2561
|
if (!video) return;
|
|
2541
2562
|
const handleFullscreenChange = () => {
|
|
@@ -2667,7 +2688,7 @@ var formatTimeAgo = (timestamp) => {
|
|
|
2667
2688
|
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
|
2668
2689
|
return `${Math.floor(diff / 3600)}h ago`;
|
|
2669
2690
|
};
|
|
2670
|
-
var PropertyNewsUpdates =
|
|
2691
|
+
var PropertyNewsUpdates = React5__namespace.forwardRef(
|
|
2671
2692
|
({
|
|
2672
2693
|
className,
|
|
2673
2694
|
heading,
|
|
@@ -2684,15 +2705,15 @@ var PropertyNewsUpdates = React9__namespace.forwardRef(
|
|
|
2684
2705
|
const isPurchaseVariant = variant === "purchases";
|
|
2685
2706
|
const isHomeVariant = variant === "home";
|
|
2686
2707
|
const resolvedHeading = heading ?? (isPurchaseVariant ? "Live Purchases" : "Property News & Headlines");
|
|
2687
|
-
const [homeTab, setHomeTab] =
|
|
2708
|
+
const [homeTab, setHomeTab] = React5__namespace.useState("all");
|
|
2688
2709
|
const purchaseItems = purchasesProp ?? [];
|
|
2689
|
-
const [page, setPage] =
|
|
2690
|
-
|
|
2710
|
+
const [page, setPage] = React5__namespace.useState(0);
|
|
2711
|
+
React5__namespace.useEffect(() => {
|
|
2691
2712
|
ensureAnimationsInjected();
|
|
2692
2713
|
}, []);
|
|
2693
2714
|
const hasItems = Array.isArray(items) && items.length > 0;
|
|
2694
|
-
const totalPages =
|
|
2695
|
-
|
|
2715
|
+
const totalPages = React5__namespace.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
|
|
2716
|
+
React5__namespace.useEffect(() => {
|
|
2696
2717
|
setPage((prev) => Math.min(prev, totalPages - 1));
|
|
2697
2718
|
}, [totalPages]);
|
|
2698
2719
|
const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
|
|
@@ -3000,7 +3021,7 @@ var defaultFormat = (value) => new Intl.NumberFormat("en-US", {
|
|
|
3000
3021
|
notation: value >= 1e5 ? "compact" : "standard",
|
|
3001
3022
|
maximumFractionDigits: value >= 1e3 ? 0 : 2
|
|
3002
3023
|
}).format(value);
|
|
3003
|
-
var TradingSlider =
|
|
3024
|
+
var TradingSlider = React5__namespace.forwardRef(
|
|
3004
3025
|
({
|
|
3005
3026
|
label = "Trade size",
|
|
3006
3027
|
helperText = "Drag to pick the desired notional.",
|
|
@@ -3018,7 +3039,7 @@ var TradingSlider = React9__namespace.forwardRef(
|
|
|
3018
3039
|
...rest
|
|
3019
3040
|
}, ref) => {
|
|
3020
3041
|
const isControlled = value !== void 0;
|
|
3021
|
-
const [internalValue, setInternalValue] =
|
|
3042
|
+
const [internalValue, setInternalValue] = React5__namespace.useState(
|
|
3022
3043
|
defaultValue ?? (typeof min === "number" ? min : 0)
|
|
3023
3044
|
);
|
|
3024
3045
|
const currentValue = isControlled ? Number(value) : internalValue;
|
|
@@ -3121,7 +3142,7 @@ var MobileToggleButton = styled24__default.default.button`
|
|
|
3121
3142
|
padding: 0.6rem 0.5rem;
|
|
3122
3143
|
}
|
|
3123
3144
|
`;
|
|
3124
|
-
var MobileTradeNav =
|
|
3145
|
+
var MobileTradeNav = React5__namespace.forwardRef(
|
|
3125
3146
|
({ className, items, activeId, onChange, ...props }, ref) => {
|
|
3126
3147
|
return /* @__PURE__ */ jsxRuntime.jsx(MobileToggleContainer, { ref, className: cn(className), ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3127
3148
|
MobileToggleButton,
|
|
@@ -3772,7 +3793,7 @@ var formatPercent = (value, fractionDigits = 2) => {
|
|
|
3772
3793
|
if (value == null || Number.isNaN(value)) return "\u2014";
|
|
3773
3794
|
return `${value.toFixed(fractionDigits)}%`;
|
|
3774
3795
|
};
|
|
3775
|
-
var YourOrders =
|
|
3796
|
+
var YourOrders = React5__namespace.forwardRef(
|
|
3776
3797
|
({
|
|
3777
3798
|
className,
|
|
3778
3799
|
title,
|
|
@@ -3785,10 +3806,10 @@ var YourOrders = React9__namespace.forwardRef(
|
|
|
3785
3806
|
pageSize: pageSizeOverride,
|
|
3786
3807
|
...props
|
|
3787
3808
|
}, ref) => {
|
|
3788
|
-
const [internalActiveTab, setInternalActiveTab] =
|
|
3789
|
-
const [page, setPage] =
|
|
3809
|
+
const [internalActiveTab, setInternalActiveTab] = React5__namespace.useState(tabs?.[0]?.id ?? "portfolio");
|
|
3810
|
+
const [page, setPage] = React5__namespace.useState(0);
|
|
3790
3811
|
const effectiveActiveTabId = activeTabId ?? internalActiveTab;
|
|
3791
|
-
|
|
3812
|
+
React5__namespace.useEffect(() => {
|
|
3792
3813
|
setPage(0);
|
|
3793
3814
|
}, [effectiveActiveTabId]);
|
|
3794
3815
|
const handleTabChange = (tabId) => {
|
|
@@ -4170,7 +4191,7 @@ function createCandlestickSeries(chart, options) {
|
|
|
4170
4191
|
}
|
|
4171
4192
|
throw new Error("Candlestick series API is not available in the current lightweight-charts version.");
|
|
4172
4193
|
}
|
|
4173
|
-
var PriceChart =
|
|
4194
|
+
var PriceChart = React5__namespace.forwardRef(
|
|
4174
4195
|
({
|
|
4175
4196
|
className,
|
|
4176
4197
|
title = "Price Chart",
|
|
@@ -4184,18 +4205,18 @@ var PriceChart = React9__namespace.forwardRef(
|
|
|
4184
4205
|
height = 301.52,
|
|
4185
4206
|
...props
|
|
4186
4207
|
}, ref) => {
|
|
4187
|
-
const containerRef =
|
|
4188
|
-
const chartRef =
|
|
4189
|
-
const seriesRef =
|
|
4190
|
-
const priceLineRef =
|
|
4191
|
-
const [hoveredRange, setHoveredRange] =
|
|
4192
|
-
const [dropdownOpen, setDropdownOpen] =
|
|
4193
|
-
const dropdownRef =
|
|
4194
|
-
const isAutoScrollRef =
|
|
4208
|
+
const containerRef = React5__namespace.useRef(null);
|
|
4209
|
+
const chartRef = React5__namespace.useRef(null);
|
|
4210
|
+
const seriesRef = React5__namespace.useRef(null);
|
|
4211
|
+
const priceLineRef = React5__namespace.useRef(null);
|
|
4212
|
+
const [hoveredRange, setHoveredRange] = React5__namespace.useState(null);
|
|
4213
|
+
const [dropdownOpen, setDropdownOpen] = React5__namespace.useState(false);
|
|
4214
|
+
const dropdownRef = React5__namespace.useRef(null);
|
|
4215
|
+
const isAutoScrollRef = React5__namespace.useRef(true);
|
|
4195
4216
|
const visibleRanges = ranges.slice(0, VISIBLE_RANGE_COUNT);
|
|
4196
4217
|
const dropdownRanges = ranges.slice(VISIBLE_RANGE_COUNT);
|
|
4197
4218
|
const selectedInDropdown = dropdownRanges.includes(selectedRange);
|
|
4198
|
-
|
|
4219
|
+
React5__namespace.useEffect(() => {
|
|
4199
4220
|
const handleClickOutside = (e) => {
|
|
4200
4221
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
4201
4222
|
setDropdownOpen(false);
|
|
@@ -4204,25 +4225,25 @@ var PriceChart = React9__namespace.forwardRef(
|
|
|
4204
4225
|
document.addEventListener("mousedown", handleClickOutside);
|
|
4205
4226
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
4206
4227
|
}, []);
|
|
4207
|
-
const resolvedPrice =
|
|
4228
|
+
const resolvedPrice = React5__namespace.useMemo(() => {
|
|
4208
4229
|
if (price != null) return price;
|
|
4209
4230
|
const last = data.at(-1);
|
|
4210
4231
|
return last?.close;
|
|
4211
4232
|
}, [data, price]);
|
|
4212
|
-
const inferredChangePercent =
|
|
4233
|
+
const inferredChangePercent = React5__namespace.useMemo(() => {
|
|
4213
4234
|
if (changePercent != null) return changePercent;
|
|
4214
4235
|
const first = data[0]?.open;
|
|
4215
4236
|
const last = data.at(-1)?.close;
|
|
4216
4237
|
if (first == null || last == null || first === 0) return void 0;
|
|
4217
4238
|
return (last - first) / first * 100;
|
|
4218
4239
|
}, [changePercent, data]);
|
|
4219
|
-
const dollarChange =
|
|
4240
|
+
const dollarChange = React5__namespace.useMemo(() => {
|
|
4220
4241
|
const first = data[0]?.open;
|
|
4221
4242
|
const last = data.at(-1)?.close;
|
|
4222
4243
|
if (first == null || last == null) return void 0;
|
|
4223
4244
|
return last - first;
|
|
4224
4245
|
}, [data]);
|
|
4225
|
-
|
|
4246
|
+
React5__namespace.useEffect(() => {
|
|
4226
4247
|
const el = containerRef.current;
|
|
4227
4248
|
if (!el) return;
|
|
4228
4249
|
const chart = LightweightCharts__namespace.createChart(el, {
|
|
@@ -4267,7 +4288,7 @@ var PriceChart = React9__namespace.forwardRef(
|
|
|
4267
4288
|
chart.remove();
|
|
4268
4289
|
};
|
|
4269
4290
|
}, []);
|
|
4270
|
-
|
|
4291
|
+
React5__namespace.useEffect(() => {
|
|
4271
4292
|
const chart = chartRef.current;
|
|
4272
4293
|
if (!chart) return;
|
|
4273
4294
|
const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
|
|
@@ -4275,7 +4296,7 @@ var PriceChart = React9__namespace.forwardRef(
|
|
|
4275
4296
|
timeScale: getTimeScaleOptions(effectiveRange)
|
|
4276
4297
|
});
|
|
4277
4298
|
}, [selectedRange, ranges]);
|
|
4278
|
-
|
|
4299
|
+
React5__namespace.useEffect(() => {
|
|
4279
4300
|
const chart = chartRef.current;
|
|
4280
4301
|
const series = seriesRef.current;
|
|
4281
4302
|
if (!chart || !series) return;
|
|
@@ -4480,7 +4501,7 @@ var formatPrice3 = (value, currencySymbol) => {
|
|
|
4480
4501
|
maximumFractionDigits: 3
|
|
4481
4502
|
})}`;
|
|
4482
4503
|
};
|
|
4483
|
-
var PropertyHeroHeader =
|
|
4504
|
+
var PropertyHeroHeader = React5__namespace.forwardRef(
|
|
4484
4505
|
({
|
|
4485
4506
|
className,
|
|
4486
4507
|
imageUrl,
|
|
@@ -4507,8 +4528,8 @@ var PropertyHeroHeader = React9__namespace.forwardRef(
|
|
|
4507
4528
|
const isPositive = changePercent == null ? void 0 : changePercent >= 0;
|
|
4508
4529
|
const accentColor = "#e6c87e";
|
|
4509
4530
|
const tradeHoverColor = "#f5dd9a";
|
|
4510
|
-
const [isTradeInteracting, setIsTradeInteracting] =
|
|
4511
|
-
const [isOfferInteracting, setIsOfferInteracting] =
|
|
4531
|
+
const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
|
|
4532
|
+
const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
|
|
4512
4533
|
const hasAmenities = isLoading || beds != null || baths != null || cars != null || propertyTypeLabel != null;
|
|
4513
4534
|
const isTradeDisabled = !onTrade;
|
|
4514
4535
|
const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
|
|
@@ -4954,12 +4975,12 @@ var Header = ({
|
|
|
4954
4975
|
onWalletNavigate: _onWalletNavigate,
|
|
4955
4976
|
showTradeTab = true
|
|
4956
4977
|
}) => {
|
|
4957
|
-
const [isUserMenuOpen, setIsUserMenuOpen] =
|
|
4958
|
-
const [isMobileMenuOpen, setIsMobileMenuOpen] =
|
|
4959
|
-
const [isMoreMenuOpen, setIsMoreMenuOpen] =
|
|
4960
|
-
const [showLoginPopup, setShowLoginPopup] =
|
|
4961
|
-
const [loginPopupInitialView, setLoginPopupInitialView] =
|
|
4962
|
-
|
|
4978
|
+
const [isUserMenuOpen, setIsUserMenuOpen] = React5.useState(false);
|
|
4979
|
+
const [isMobileMenuOpen, setIsMobileMenuOpen] = React5.useState(false);
|
|
4980
|
+
const [isMoreMenuOpen, setIsMoreMenuOpen] = React5.useState(false);
|
|
4981
|
+
const [showLoginPopup, setShowLoginPopup] = React5.useState(false);
|
|
4982
|
+
const [loginPopupInitialView, setLoginPopupInitialView] = React5.useState(void 0);
|
|
4983
|
+
React5.useEffect(() => {
|
|
4963
4984
|
if (typeof window === "undefined") return;
|
|
4964
4985
|
const ua = navigator.userAgent;
|
|
4965
4986
|
const isTelegram = /Telegram/i.test(ua);
|
|
@@ -4968,7 +4989,7 @@ var Header = ({
|
|
|
4968
4989
|
document.documentElement.style.setProperty("--telegram-safe-top", "59px");
|
|
4969
4990
|
}
|
|
4970
4991
|
}, []);
|
|
4971
|
-
|
|
4992
|
+
React5.useEffect(() => {
|
|
4972
4993
|
const handleClickOutside = (event) => {
|
|
4973
4994
|
const target = event.target;
|
|
4974
4995
|
if (!target) return;
|
|
@@ -4988,7 +5009,7 @@ var Header = ({
|
|
|
4988
5009
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
4989
5010
|
};
|
|
4990
5011
|
}, [isUserMenuOpen, isMobileMenuOpen, isMoreMenuOpen]);
|
|
4991
|
-
|
|
5012
|
+
React5.useEffect(() => {
|
|
4992
5013
|
if (typeof window === "undefined") return;
|
|
4993
5014
|
const handleExternalLoginPopup = (event) => {
|
|
4994
5015
|
const customEvent = event;
|
|
@@ -5118,7 +5139,7 @@ var Header = ({
|
|
|
5118
5139
|
setShowLoginPopup(true);
|
|
5119
5140
|
}
|
|
5120
5141
|
};
|
|
5121
|
-
const handleLoginPopupClose =
|
|
5142
|
+
const handleLoginPopupClose = React5__namespace.default.useCallback(() => {
|
|
5122
5143
|
setShowLoginPopup(false);
|
|
5123
5144
|
setLoginPopupInitialView(void 0);
|
|
5124
5145
|
}, []);
|
|
@@ -5834,10 +5855,10 @@ var MobileNavItem = styled24__default.default.div`
|
|
|
5834
5855
|
padding-left: 24px;
|
|
5835
5856
|
}
|
|
5836
5857
|
`;
|
|
5837
|
-
var PropertySubheader =
|
|
5858
|
+
var PropertySubheader = React5__namespace.forwardRef(
|
|
5838
5859
|
({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
|
|
5839
|
-
const tabsContainerRef =
|
|
5840
|
-
|
|
5860
|
+
const tabsContainerRef = React5__namespace.useRef(null);
|
|
5861
|
+
React5__namespace.useEffect(() => {
|
|
5841
5862
|
const container = tabsContainerRef.current;
|
|
5842
5863
|
if (!container) return;
|
|
5843
5864
|
const isMobile = window.innerWidth <= 768;
|
|
@@ -5979,27 +6000,27 @@ var LoginPopup = ({
|
|
|
5979
6000
|
onFundWallet,
|
|
5980
6001
|
initialView
|
|
5981
6002
|
}) => {
|
|
5982
|
-
const [view, setView] =
|
|
5983
|
-
const [email, setEmail] =
|
|
5984
|
-
const [handle, setHandle] =
|
|
5985
|
-
const [otp, setOtp] =
|
|
5986
|
-
const [error, setError] =
|
|
5987
|
-
const [loading, setLoading] =
|
|
5988
|
-
const [isSignUp, setIsSignUp] =
|
|
5989
|
-
const [fundingAmount] =
|
|
5990
|
-
const [kycLoading, setKycLoading] =
|
|
5991
|
-
const [showKycWidget, setShowKycWidget] =
|
|
5992
|
-
const [cryptoFundingLoading, setCryptoFundingLoading] =
|
|
5993
|
-
const [fiatFundingLoading, setFiatFundingLoading] =
|
|
5994
|
-
const [fundingError, setFundingError] =
|
|
5995
|
-
const [transakWidgetUrl, setTransakWidgetUrl] =
|
|
5996
|
-
const suppressAutoCloseRef =
|
|
5997
|
-
|
|
6003
|
+
const [view, setView] = React5.useState(() => initialView ?? "main");
|
|
6004
|
+
const [email, setEmail] = React5.useState("");
|
|
6005
|
+
const [handle, setHandle] = React5.useState("");
|
|
6006
|
+
const [otp, setOtp] = React5.useState(Array(OTP_INPUT_LENGTH).fill(""));
|
|
6007
|
+
const [error, setError] = React5.useState("");
|
|
6008
|
+
const [loading, setLoading] = React5.useState(false);
|
|
6009
|
+
const [isSignUp, setIsSignUp] = React5.useState(false);
|
|
6010
|
+
const [fundingAmount] = React5.useState("");
|
|
6011
|
+
const [kycLoading, setKycLoading] = React5.useState(false);
|
|
6012
|
+
const [showKycWidget, setShowKycWidget] = React5.useState(false);
|
|
6013
|
+
const [cryptoFundingLoading, setCryptoFundingLoading] = React5.useState(false);
|
|
6014
|
+
const [fiatFundingLoading, setFiatFundingLoading] = React5.useState(false);
|
|
6015
|
+
const [fundingError, setFundingError] = React5.useState("");
|
|
6016
|
+
const [transakWidgetUrl, setTransakWidgetUrl] = React5.useState(null);
|
|
6017
|
+
const suppressAutoCloseRef = React5__namespace.default.useRef(false);
|
|
6018
|
+
React5.useEffect(() => {
|
|
5998
6019
|
if (typeof initialView === "string") {
|
|
5999
6020
|
setView(initialView);
|
|
6000
6021
|
}
|
|
6001
6022
|
}, [initialView]);
|
|
6002
|
-
|
|
6023
|
+
React5.useEffect(() => {
|
|
6003
6024
|
if (!transakWidgetUrl) return;
|
|
6004
6025
|
const handleTransakMessage = (event) => {
|
|
6005
6026
|
if (!event.origin.includes("transak.com") && !event.origin.includes("global.transak.com")) {
|
|
@@ -6024,7 +6045,7 @@ var LoginPopup = ({
|
|
|
6024
6045
|
window.addEventListener("message", handleTransakMessage);
|
|
6025
6046
|
return () => window.removeEventListener("message", handleTransakMessage);
|
|
6026
6047
|
}, [transakWidgetUrl, onClose]);
|
|
6027
|
-
|
|
6048
|
+
React5.useEffect(() => {
|
|
6028
6049
|
if (!autoCloseOnAuth) {
|
|
6029
6050
|
return;
|
|
6030
6051
|
}
|
|
@@ -6245,13 +6266,12 @@ var LoginPopup = ({
|
|
|
6245
6266
|
}
|
|
6246
6267
|
setFundingError("");
|
|
6247
6268
|
setCryptoFundingLoading(true);
|
|
6269
|
+
const fundPromise = onFundWallet({ amount: fundingAmount, mode: "crypto" });
|
|
6270
|
+
onClose();
|
|
6248
6271
|
try {
|
|
6249
|
-
|
|
6250
|
-
if (result?.funded) {
|
|
6251
|
-
onClose();
|
|
6252
|
-
}
|
|
6272
|
+
await fundPromise;
|
|
6253
6273
|
} catch (err) {
|
|
6254
|
-
|
|
6274
|
+
console.error("[LoginPopup] crypto fund flow failed", err);
|
|
6255
6275
|
} finally {
|
|
6256
6276
|
setCryptoFundingLoading(false);
|
|
6257
6277
|
}
|
|
@@ -6996,8 +7016,8 @@ var TransakIframe = styled24__default.default.iframe`
|
|
|
6996
7016
|
border-radius: var(--border-radius, 12px);
|
|
6997
7017
|
`;
|
|
6998
7018
|
var MiniLiveFeed = () => {
|
|
6999
|
-
const [purchases, setPurchases] =
|
|
7000
|
-
|
|
7019
|
+
const [purchases, setPurchases] = React5.useState([]);
|
|
7020
|
+
React5.useEffect(() => {
|
|
7001
7021
|
const handles = [
|
|
7002
7022
|
"Landlord",
|
|
7003
7023
|
"PropertyKing",
|
|
@@ -7173,7 +7193,7 @@ var MiniLiveFeed = () => {
|
|
|
7173
7193
|
);
|
|
7174
7194
|
};
|
|
7175
7195
|
LoginPopup.displayName = "LoginPopup";
|
|
7176
|
-
var PropertyCompareBar =
|
|
7196
|
+
var PropertyCompareBar = React5__namespace.forwardRef(
|
|
7177
7197
|
({
|
|
7178
7198
|
className,
|
|
7179
7199
|
addresses,
|
|
@@ -7184,7 +7204,7 @@ var PropertyCompareBar = React9__namespace.forwardRef(
|
|
|
7184
7204
|
price,
|
|
7185
7205
|
...props
|
|
7186
7206
|
}, ref) => {
|
|
7187
|
-
const normalizedAddresses =
|
|
7207
|
+
const normalizedAddresses = React5__namespace.useMemo(() => {
|
|
7188
7208
|
return addresses.map(
|
|
7189
7209
|
(option) => typeof option === "string" ? { id: option, label: option } : option
|
|
7190
7210
|
);
|
|
@@ -7192,11 +7212,11 @@ var PropertyCompareBar = React9__namespace.forwardRef(
|
|
|
7192
7212
|
const hasAddresses = normalizedAddresses.length > 0;
|
|
7193
7213
|
const firstAddressId = normalizedAddresses[0]?.id;
|
|
7194
7214
|
const isControlled = selectedAddressId !== void 0;
|
|
7195
|
-
const [internalSelectedId, setInternalSelectedId] =
|
|
7215
|
+
const [internalSelectedId, setInternalSelectedId] = React5__namespace.useState(
|
|
7196
7216
|
() => isControlled ? void 0 : firstAddressId
|
|
7197
7217
|
);
|
|
7198
7218
|
const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
|
|
7199
|
-
|
|
7219
|
+
React5__namespace.useEffect(() => {
|
|
7200
7220
|
if (!isControlled) {
|
|
7201
7221
|
setInternalSelectedId((current) => {
|
|
7202
7222
|
if (current != null && normalizedAddresses.some((option) => option.id === current)) {
|
|
@@ -7207,9 +7227,9 @@ var PropertyCompareBar = React9__namespace.forwardRef(
|
|
|
7207
7227
|
}
|
|
7208
7228
|
}, [firstAddressId, isControlled, normalizedAddresses]);
|
|
7209
7229
|
const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
|
|
7210
|
-
const [isDropdownOpen, setIsDropdownOpen] =
|
|
7211
|
-
const dropdownRef =
|
|
7212
|
-
|
|
7230
|
+
const [isDropdownOpen, setIsDropdownOpen] = React5__namespace.useState(false);
|
|
7231
|
+
const dropdownRef = React5__namespace.useRef(null);
|
|
7232
|
+
React5__namespace.useEffect(() => {
|
|
7213
7233
|
if (!isDropdownOpen) return;
|
|
7214
7234
|
const handleClick = (event) => {
|
|
7215
7235
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
@@ -7612,11 +7632,11 @@ function GalleryMapSection({
|
|
|
7612
7632
|
autoPlay = true,
|
|
7613
7633
|
autoPlayInterval = 4e3
|
|
7614
7634
|
}) {
|
|
7615
|
-
const [carouselIndex, setCarouselIndex] =
|
|
7616
|
-
const [showVideo, setShowVideo] =
|
|
7617
|
-
const [autoPlaying, setAutoPlaying] =
|
|
7635
|
+
const [carouselIndex, setCarouselIndex] = React5.useState(0);
|
|
7636
|
+
const [showVideo, setShowVideo] = React5.useState(false);
|
|
7637
|
+
const [autoPlaying, setAutoPlaying] = React5.useState(autoPlay);
|
|
7618
7638
|
const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
|
|
7619
|
-
|
|
7639
|
+
React5.useEffect(() => {
|
|
7620
7640
|
if (!autoPlaying || images.length <= 1) return;
|
|
7621
7641
|
const interval = setInterval(() => {
|
|
7622
7642
|
setCarouselIndex((p) => (p + 1) % images.length);
|
|
@@ -7935,7 +7955,7 @@ function PropertyOverview({
|
|
|
7935
7955
|
tokensIssued: tokensIssuedProp,
|
|
7936
7956
|
isLoading = false
|
|
7937
7957
|
}) {
|
|
7938
|
-
const [isDescExpanded, setDescExpanded] =
|
|
7958
|
+
const [isDescExpanded, setDescExpanded] = React5.useState(false);
|
|
7939
7959
|
const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
|
|
7940
7960
|
const landSize = landProp ?? overviewData?.landSizeSqm ?? null;
|
|
7941
7961
|
const buildingSize = buildingProp ?? overviewData?.buildingSizeSqm ?? null;
|
|
@@ -8282,8 +8302,8 @@ var OfferPricePulse = styled24__default.default.span`
|
|
|
8282
8302
|
`;
|
|
8283
8303
|
var eventTypes = ["Leased", "Renovated", "Extended", "Rebuilt", "Rezoned", "DA Approval"];
|
|
8284
8304
|
function PropertyHistory() {
|
|
8285
|
-
const [historyFilter, setHistoryFilter] =
|
|
8286
|
-
const pastSales =
|
|
8305
|
+
const [historyFilter, setHistoryFilter] = React5.useState("all");
|
|
8306
|
+
const pastSales = React5.useMemo(() => generateMockPastSales(), []);
|
|
8287
8307
|
const loafListing = pastSales.find((sale) => sale.type === "Listed");
|
|
8288
8308
|
const loafEvents = pastSales.filter(
|
|
8289
8309
|
(sale) => sale.ownershipPeriod === "current" && sale.type !== "Listed" && (sale.id === "leased-current" || sale.id === "da-approval")
|
|
@@ -8420,7 +8440,7 @@ function PropertyHistory() {
|
|
|
8420
8440
|
] });
|
|
8421
8441
|
}
|
|
8422
8442
|
function EventDetails({ event }) {
|
|
8423
|
-
const [expanded, setExpanded] =
|
|
8443
|
+
const [expanded, setExpanded] = React5.useState(false);
|
|
8424
8444
|
const toggleExpand = () => {
|
|
8425
8445
|
setExpanded((prev) => !prev);
|
|
8426
8446
|
};
|
|
@@ -9208,7 +9228,7 @@ function AssetSelectorBar({
|
|
|
9208
9228
|
selectorItems,
|
|
9209
9229
|
onSelect
|
|
9210
9230
|
}) {
|
|
9211
|
-
const [isDropdownOpen, setIsDropdownOpen] =
|
|
9231
|
+
const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
|
|
9212
9232
|
const hasItems = selectorItems && selectorItems.length > 0;
|
|
9213
9233
|
const metrics = metricsProp ?? [
|
|
9214
9234
|
...tokenPrice != null ? [{ label: "Unit Price", value: `$${tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, accent: true }] : [],
|
|
@@ -9477,15 +9497,15 @@ function OfferingProgressCard({
|
|
|
9477
9497
|
targetAmount,
|
|
9478
9498
|
isPrivateClient = false
|
|
9479
9499
|
}) {
|
|
9480
|
-
const [currentTime, setCurrentTime] =
|
|
9481
|
-
const [countdown, setCountdown] =
|
|
9500
|
+
const [currentTime, setCurrentTime] = React5.useState(/* @__PURE__ */ new Date());
|
|
9501
|
+
const [countdown, setCountdown] = React5.useState(null);
|
|
9482
9502
|
const computedRaised = raisedAmount ?? totalSold * tokenPrice;
|
|
9483
9503
|
const computedTarget = targetAmount ?? supplyToSell * tokenPrice;
|
|
9484
|
-
|
|
9504
|
+
React5.useEffect(() => {
|
|
9485
9505
|
const timer = setInterval(() => setCurrentTime(/* @__PURE__ */ new Date()), 1e3);
|
|
9486
9506
|
return () => clearInterval(timer);
|
|
9487
9507
|
}, []);
|
|
9488
|
-
|
|
9508
|
+
React5.useEffect(() => {
|
|
9489
9509
|
if (!opensAt) {
|
|
9490
9510
|
setCountdown(null);
|
|
9491
9511
|
return;
|
|
@@ -9828,7 +9848,7 @@ function VideoActivitySection({
|
|
|
9828
9848
|
ordersAllocated = 0,
|
|
9829
9849
|
tokenPrice = 0
|
|
9830
9850
|
}) {
|
|
9831
|
-
const sortedOrders =
|
|
9851
|
+
const sortedOrders = React5.useMemo(
|
|
9832
9852
|
() => [...recentOrders].sort((a, b) => b.timestamp - a.timestamp).slice(0, 7),
|
|
9833
9853
|
[recentOrders]
|
|
9834
9854
|
);
|
|
@@ -10174,10 +10194,10 @@ function OrderPanel({
|
|
|
10174
10194
|
tokenDisplayName,
|
|
10175
10195
|
tokenSymbol
|
|
10176
10196
|
}) {
|
|
10177
|
-
const [payInputValue, setPayInputValue] =
|
|
10178
|
-
const [receiveInputValue, setReceiveInputValue] =
|
|
10179
|
-
const [isPayInputFocused, setIsPayInputFocused] =
|
|
10180
|
-
const [isReceiveInputFocused, setIsReceiveInputFocused] =
|
|
10197
|
+
const [payInputValue, setPayInputValue] = React5.useState("");
|
|
10198
|
+
const [receiveInputValue, setReceiveInputValue] = React5.useState("");
|
|
10199
|
+
const [isPayInputFocused, setIsPayInputFocused] = React5.useState(false);
|
|
10200
|
+
const [isReceiveInputFocused, setIsReceiveInputFocused] = React5.useState(false);
|
|
10181
10201
|
const handlePayBlur = () => {
|
|
10182
10202
|
setIsPayInputFocused(false);
|
|
10183
10203
|
const parsed = parseInt(payInputValue.replace(/[^0-9]/g, ""), 10) || 0;
|
|
@@ -11023,9 +11043,9 @@ function PortfolioActivityPanel({
|
|
|
11023
11043
|
style
|
|
11024
11044
|
}) {
|
|
11025
11045
|
const resolvedDefaultTab = defaultTab ?? (showPositionsTab ? "positions" : "subscriptions");
|
|
11026
|
-
const [activeTab, setActiveTab] =
|
|
11027
|
-
const [activityPage, setActivityPage] =
|
|
11028
|
-
const activeTabTotal =
|
|
11046
|
+
const [activeTab, setActiveTab] = React5.useState(resolvedDefaultTab);
|
|
11047
|
+
const [activityPage, setActivityPage] = React5.useState(0);
|
|
11048
|
+
const activeTabTotal = React5.useMemo(() => {
|
|
11029
11049
|
switch (activeTab) {
|
|
11030
11050
|
case "positions":
|
|
11031
11051
|
return positions.length;
|
|
@@ -11044,15 +11064,15 @@ function PortfolioActivityPanel({
|
|
|
11044
11064
|
}
|
|
11045
11065
|
}, [activeTab, positions.length, offeringOrders.length, openOrders.length, orderHistory.length, tradeHistory.length, transfers.length]);
|
|
11046
11066
|
const positionsCount = positions.length;
|
|
11047
|
-
const openOrdersCount =
|
|
11067
|
+
const openOrdersCount = React5.useMemo(
|
|
11048
11068
|
() => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
|
|
11049
11069
|
[openOrders]
|
|
11050
11070
|
);
|
|
11051
|
-
const pendingHistoryCount =
|
|
11071
|
+
const pendingHistoryCount = React5.useMemo(
|
|
11052
11072
|
() => orderHistory.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
|
|
11053
11073
|
[orderHistory]
|
|
11054
11074
|
);
|
|
11055
|
-
const pendingOfferingsCount =
|
|
11075
|
+
const pendingOfferingsCount = React5.useMemo(
|
|
11056
11076
|
() => offeringOrders.filter((o) => {
|
|
11057
11077
|
const s = o.status.toUpperCase();
|
|
11058
11078
|
return s !== "FILLED" && s !== "ALLOCATED" && s !== "CONFIRMED" && s !== "CANCELLED" && s !== "CANCELED" && s !== "REJECTED";
|
|
@@ -12086,19 +12106,19 @@ function PropertyBuy({
|
|
|
12086
12106
|
onSelectorSelect,
|
|
12087
12107
|
portfolioActivity
|
|
12088
12108
|
}) {
|
|
12089
|
-
const [sliderValue, setSliderValue] =
|
|
12090
|
-
const [availableBalance, setAvailableBalance] =
|
|
12091
|
-
const [manualOrderAmount, setManualOrderAmount] =
|
|
12092
|
-
const [ownedTokens, setOwnedTokens] =
|
|
12093
|
-
const [displayedOwnedTokens, setDisplayedOwnedTokens] =
|
|
12094
|
-
const [ownedTokensJustUpdated, setOwnedTokensJustUpdated] =
|
|
12095
|
-
const [lastOrderQuantity, setLastOrderQuantity] =
|
|
12096
|
-
const [orderPendingAllocation, setOrderPendingAllocation] =
|
|
12097
|
-
const [orderPlacedSuccess, setOrderPlacedSuccess] =
|
|
12098
|
-
const [lastOrderDetails, setLastOrderDetails] =
|
|
12099
|
-
const [showOrderConfirmModal, setShowOrderConfirmModal] =
|
|
12100
|
-
const [, setLiveNewsIndex] =
|
|
12101
|
-
const [newsItems, setNewsItems] =
|
|
12109
|
+
const [sliderValue, setSliderValue] = React5.useState(0);
|
|
12110
|
+
const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 0);
|
|
12111
|
+
const [manualOrderAmount, setManualOrderAmount] = React5.useState(null);
|
|
12112
|
+
const [ownedTokens, setOwnedTokens] = React5.useState(0);
|
|
12113
|
+
const [displayedOwnedTokens, setDisplayedOwnedTokens] = React5.useState(0);
|
|
12114
|
+
const [ownedTokensJustUpdated, setOwnedTokensJustUpdated] = React5.useState(false);
|
|
12115
|
+
const [lastOrderQuantity, setLastOrderQuantity] = React5.useState(0);
|
|
12116
|
+
const [orderPendingAllocation, setOrderPendingAllocation] = React5.useState(false);
|
|
12117
|
+
const [orderPlacedSuccess, setOrderPlacedSuccess] = React5.useState(false);
|
|
12118
|
+
const [lastOrderDetails, setLastOrderDetails] = React5.useState(null);
|
|
12119
|
+
const [showOrderConfirmModal, setShowOrderConfirmModal] = React5.useState(false);
|
|
12120
|
+
const [, setLiveNewsIndex] = React5.useState(0);
|
|
12121
|
+
const [newsItems, setNewsItems] = React5.useState(
|
|
12102
12122
|
() => allNewsItems.slice(0, 4).map((item, index) => ({
|
|
12103
12123
|
...item,
|
|
12104
12124
|
displayId: `${item.id}-initial-${index}`,
|
|
@@ -12125,12 +12145,12 @@ function PropertyBuy({
|
|
|
12125
12145
|
const orderTotal = tokenQuantity * tokenPrice + feeInUsd;
|
|
12126
12146
|
const estExposure = (tokenQuantity / supplyToSell * 100).toFixed(4);
|
|
12127
12147
|
const hasInsufficientFunds = orderTotal > availableBalance;
|
|
12128
|
-
|
|
12148
|
+
React5.useEffect(() => {
|
|
12129
12149
|
if (walletUsdcBalance != null) {
|
|
12130
12150
|
setAvailableBalance(walletUsdcBalance);
|
|
12131
12151
|
}
|
|
12132
12152
|
}, [walletUsdcBalance]);
|
|
12133
|
-
|
|
12153
|
+
React5.useEffect(() => {
|
|
12134
12154
|
if (walletPropertyTokenBalance != null) {
|
|
12135
12155
|
setOwnedTokens(walletPropertyTokenBalance);
|
|
12136
12156
|
setDisplayedOwnedTokens(walletPropertyTokenBalance);
|
|
@@ -12142,13 +12162,13 @@ function PropertyBuy({
|
|
|
12142
12162
|
}
|
|
12143
12163
|
setShowOrderConfirmModal(true);
|
|
12144
12164
|
};
|
|
12145
|
-
|
|
12165
|
+
React5.useEffect(() => {
|
|
12146
12166
|
if (purchaseStatus === "success" && orderPendingAllocation) {
|
|
12147
12167
|
setOrderPendingAllocation(false);
|
|
12148
12168
|
setOrderPlacedSuccess(true);
|
|
12149
12169
|
}
|
|
12150
12170
|
}, [purchaseStatus, orderPendingAllocation]);
|
|
12151
|
-
const handlePlaceAnotherOrder =
|
|
12171
|
+
const handlePlaceAnotherOrder = React5.useCallback(() => {
|
|
12152
12172
|
setOrderPlacedSuccess(false);
|
|
12153
12173
|
setOrderPendingAllocation(false);
|
|
12154
12174
|
}, []);
|
|
@@ -12205,7 +12225,7 @@ function PropertyBuy({
|
|
|
12205
12225
|
setSliderValue(0);
|
|
12206
12226
|
setManualOrderAmount(null);
|
|
12207
12227
|
};
|
|
12208
|
-
|
|
12228
|
+
React5.useEffect(() => {
|
|
12209
12229
|
const newsInterval = setInterval(() => {
|
|
12210
12230
|
setLiveNewsIndex((prev) => {
|
|
12211
12231
|
const nextIndex = (prev + 1) % allNewsItems.length;
|
|
@@ -12503,7 +12523,7 @@ function PaymentPopup({
|
|
|
12503
12523
|
userTokenHoldings,
|
|
12504
12524
|
propertyName
|
|
12505
12525
|
}) {
|
|
12506
|
-
const [selectedPaymentMethod, setSelectedPaymentMethod] =
|
|
12526
|
+
const [selectedPaymentMethod, setSelectedPaymentMethod] = React5.useState(
|
|
12507
12527
|
"tokens"
|
|
12508
12528
|
);
|
|
12509
12529
|
if (!isOpen) return null;
|
|
@@ -12682,20 +12702,20 @@ function PaymentPopup({
|
|
|
12682
12702
|
var payment_popup_default = PaymentPopup;
|
|
12683
12703
|
var SUMMER_MONTHS = /* @__PURE__ */ new Set([11, 0, 1]);
|
|
12684
12704
|
var OwnerBooking = ({ propertyName, token }) => {
|
|
12685
|
-
const today =
|
|
12705
|
+
const today = React5.useMemo(() => {
|
|
12686
12706
|
const base = /* @__PURE__ */ new Date();
|
|
12687
12707
|
base.setHours(0, 0, 0, 0);
|
|
12688
12708
|
return base;
|
|
12689
12709
|
}, []);
|
|
12690
|
-
const [currentYear, setCurrentYear] =
|
|
12691
|
-
const [currentMonth, setCurrentMonth] =
|
|
12692
|
-
const [dateRanges, setDateRanges] =
|
|
12693
|
-
const [selectedDates, setSelectedDates] =
|
|
12694
|
-
const [hoverDate, setHoverDate] =
|
|
12695
|
-
const [isDateSelectorOpen, setIsDateSelectorOpen] =
|
|
12696
|
-
const [selectorYear, setSelectorYear] =
|
|
12697
|
-
const [isPaymentPopupOpen, setIsPaymentPopupOpen] =
|
|
12698
|
-
const dateSelectorRef =
|
|
12710
|
+
const [currentYear, setCurrentYear] = React5.useState(today.getFullYear());
|
|
12711
|
+
const [currentMonth, setCurrentMonth] = React5.useState(today.getMonth());
|
|
12712
|
+
const [dateRanges, setDateRanges] = React5.useState([]);
|
|
12713
|
+
const [selectedDates, setSelectedDates] = React5.useState([]);
|
|
12714
|
+
const [hoverDate, setHoverDate] = React5.useState(null);
|
|
12715
|
+
const [isDateSelectorOpen, setIsDateSelectorOpen] = React5.useState(false);
|
|
12716
|
+
const [selectorYear, setSelectorYear] = React5.useState(today.getFullYear());
|
|
12717
|
+
const [isPaymentPopupOpen, setIsPaymentPopupOpen] = React5.useState(false);
|
|
12718
|
+
const dateSelectorRef = React5.useRef(null);
|
|
12699
12719
|
const tokenPrice = token.price ?? 700;
|
|
12700
12720
|
const userTokenHoldings = 2.2;
|
|
12701
12721
|
const MIN_NIGHTS = 3;
|
|
@@ -12705,25 +12725,25 @@ var OwnerBooking = ({ propertyName, token }) => {
|
|
|
12705
12725
|
{ bg: "rgba(230, 126, 34, 0.25)", border: "rgba(230, 126, 34, 0.6)" },
|
|
12706
12726
|
{ bg: "rgba(46, 204, 113, 0.25)", border: "rgba(46, 204, 113, 0.6)" }
|
|
12707
12727
|
];
|
|
12708
|
-
const calculateTokensPerDayOwner =
|
|
12728
|
+
const calculateTokensPerDayOwner = React5.useCallback(() => {
|
|
12709
12729
|
if (tokenPrice <= 0) return 0;
|
|
12710
12730
|
const target = 650;
|
|
12711
12731
|
const raw = target / tokenPrice;
|
|
12712
12732
|
return Math.ceil(raw * 1e4) / 1e4;
|
|
12713
12733
|
}, [tokenPrice]);
|
|
12714
|
-
const calculateTokensPerDayMarket =
|
|
12734
|
+
const calculateTokensPerDayMarket = React5.useCallback(() => {
|
|
12715
12735
|
if (tokenPrice <= 0) return 0;
|
|
12716
12736
|
const target = 900;
|
|
12717
12737
|
const raw = target / tokenPrice;
|
|
12718
12738
|
return Math.ceil(raw * 1e4) / 1e4;
|
|
12719
12739
|
}, [tokenPrice]);
|
|
12720
12740
|
const qualifiesForOwnerRate = userTokenHoldings >= 0.1;
|
|
12721
|
-
const getTokensPerDay =
|
|
12741
|
+
const getTokensPerDay = React5.useCallback(
|
|
12722
12742
|
() => calculateTokensPerDayOwner() ,
|
|
12723
12743
|
[qualifiesForOwnerRate, calculateTokensPerDayOwner, calculateTokensPerDayMarket]
|
|
12724
12744
|
);
|
|
12725
12745
|
const getRateLabel = () => "Owner's Rate" ;
|
|
12726
|
-
const selectionStats =
|
|
12746
|
+
const selectionStats = React5.useMemo(() => {
|
|
12727
12747
|
if (selectedDates.length !== 2) return null;
|
|
12728
12748
|
const [a, b] = selectedDates;
|
|
12729
12749
|
const start = a < b ? a : b;
|
|
@@ -12734,10 +12754,10 @@ var OwnerBooking = ({ propertyName, token }) => {
|
|
|
12734
12754
|
const usd = tokens * tokenPrice;
|
|
12735
12755
|
return { nights, tokensPerDay, tokens, usd, start, end };
|
|
12736
12756
|
}, [selectedDates, getTokensPerDay, tokenPrice]);
|
|
12737
|
-
const totalNights =
|
|
12738
|
-
const totalTokens =
|
|
12757
|
+
const totalNights = React5.useMemo(() => dateRanges.reduce((sum, r) => sum + r.nights, 0), [dateRanges]);
|
|
12758
|
+
const totalTokens = React5.useMemo(() => dateRanges.reduce((sum, r) => sum + r.tokens, 0), [dateRanges]);
|
|
12739
12759
|
const totalUSD = totalTokens * tokenPrice;
|
|
12740
|
-
const generateCalendarDays =
|
|
12760
|
+
const generateCalendarDays = React5.useCallback(
|
|
12741
12761
|
(year, month) => {
|
|
12742
12762
|
const first = new Date(year, month, 1);
|
|
12743
12763
|
const last = new Date(year, month + 1, 0);
|
|
@@ -12766,11 +12786,11 @@ var OwnerBooking = ({ propertyName, token }) => {
|
|
|
12766
12786
|
},
|
|
12767
12787
|
[today]
|
|
12768
12788
|
);
|
|
12769
|
-
const calendarDays =
|
|
12789
|
+
const calendarDays = React5.useMemo(
|
|
12770
12790
|
() => generateCalendarDays(currentYear, currentMonth),
|
|
12771
12791
|
[currentYear, currentMonth, generateCalendarDays]
|
|
12772
12792
|
);
|
|
12773
|
-
const isDateReserved =
|
|
12793
|
+
const isDateReserved = React5.useCallback(
|
|
12774
12794
|
(date) => dateRanges.some((r) => date >= r.arrival && date <= r.departure),
|
|
12775
12795
|
[dateRanges]
|
|
12776
12796
|
);
|
|
@@ -12864,14 +12884,14 @@ var OwnerBooking = ({ propertyName, token }) => {
|
|
|
12864
12884
|
"December"
|
|
12865
12885
|
];
|
|
12866
12886
|
const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
12867
|
-
const setMonthYear =
|
|
12887
|
+
const setMonthYear = React5.useCallback(
|
|
12868
12888
|
(month, year) => {
|
|
12869
12889
|
setCurrentMonth(month);
|
|
12870
12890
|
setCurrentYear(year);
|
|
12871
12891
|
},
|
|
12872
12892
|
[setCurrentMonth, setCurrentYear]
|
|
12873
12893
|
);
|
|
12874
|
-
const shiftMonth =
|
|
12894
|
+
const shiftMonth = React5.useCallback(
|
|
12875
12895
|
(direction) => {
|
|
12876
12896
|
const delta = direction === "prev" ? -1 : 1;
|
|
12877
12897
|
let newMonth = currentMonth + delta;
|
|
@@ -12888,7 +12908,7 @@ var OwnerBooking = ({ propertyName, token }) => {
|
|
|
12888
12908
|
},
|
|
12889
12909
|
[currentMonth, currentYear, setMonthYear]
|
|
12890
12910
|
);
|
|
12891
|
-
const jumpToNextAvailable =
|
|
12911
|
+
const jumpToNextAvailable = React5.useCallback(() => {
|
|
12892
12912
|
for (let offset = 1; offset <= 12; offset++) {
|
|
12893
12913
|
const candidateMonth = (currentMonth + offset) % 12;
|
|
12894
12914
|
if (!SUMMER_MONTHS.has(candidateMonth)) continue;
|
|
@@ -12905,7 +12925,7 @@ var OwnerBooking = ({ propertyName, token }) => {
|
|
|
12905
12925
|
setMonthYear(month, selectorYear);
|
|
12906
12926
|
setIsDateSelectorOpen(false);
|
|
12907
12927
|
};
|
|
12908
|
-
|
|
12928
|
+
React5.useEffect(() => {
|
|
12909
12929
|
const handleClickOutside = (event) => {
|
|
12910
12930
|
if (dateSelectorRef.current && !dateSelectorRef.current.contains(event.target)) {
|
|
12911
12931
|
setIsDateSelectorOpen(false);
|
|
@@ -13349,21 +13369,21 @@ function PropertyValuation({
|
|
|
13349
13369
|
loading = false,
|
|
13350
13370
|
error = null
|
|
13351
13371
|
}) {
|
|
13352
|
-
const now =
|
|
13353
|
-
const lastPrice =
|
|
13372
|
+
const now = React5.useMemo(() => /* @__PURE__ */ new Date(), []);
|
|
13373
|
+
const lastPrice = React5.useMemo(() => {
|
|
13354
13374
|
const fallback = Number.isFinite(tokenPrice) && tokenPrice > 0 ? tokenPrice : 0;
|
|
13355
13375
|
if (!summary?.lastPrice || summary.lastPrice <= 0) {
|
|
13356
13376
|
return fallback;
|
|
13357
13377
|
}
|
|
13358
13378
|
return summary.lastPrice;
|
|
13359
13379
|
}, [summary, tokenPrice]);
|
|
13360
|
-
const fairValue =
|
|
13380
|
+
const fairValue = React5.useMemo(() => {
|
|
13361
13381
|
if (summary?.fairValue && summary.fairValue > 0) {
|
|
13362
13382
|
return summary.fairValue;
|
|
13363
13383
|
}
|
|
13364
13384
|
return lastPrice || 1;
|
|
13365
13385
|
}, [summary, lastPrice]);
|
|
13366
|
-
const tokensOutstanding =
|
|
13386
|
+
const tokensOutstanding = React5.useMemo(() => {
|
|
13367
13387
|
if (summary?.totalTokens && summary.totalTokens > 0) {
|
|
13368
13388
|
return summary.totalTokens;
|
|
13369
13389
|
}
|
|
@@ -13378,8 +13398,8 @@ function PropertyValuation({
|
|
|
13378
13398
|
const valuationStatus = summary?.valuationStatus ?? (lastPrice < fairValue ? "Undervalued" : lastPrice > fairValue ? "Overvalued" : "Fair Value");
|
|
13379
13399
|
const valuationDelta = summary?.valuationDeltaPercent ?? (lastPrice - fairValue) / fairValue * 100;
|
|
13380
13400
|
const valuationDeltaFormatted = `${valuationDelta >= 0 ? "+" : ""}${valuationDelta.toFixed(1)}%`;
|
|
13381
|
-
const { valuationPath, fairValuePath, axisLabels } =
|
|
13382
|
-
const recentSales =
|
|
13401
|
+
const { valuationPath, fairValuePath, axisLabels } = React5.useMemo(() => buildChartPaths(history, fairValue), [history, fairValue]);
|
|
13402
|
+
const recentSales = React5.useMemo(() => {
|
|
13383
13403
|
if (summary?.recentSales?.length) {
|
|
13384
13404
|
return summary.recentSales;
|
|
13385
13405
|
}
|
|
@@ -14531,19 +14551,19 @@ function PropertyPhotoGallery({
|
|
|
14531
14551
|
);
|
|
14532
14552
|
}
|
|
14533
14553
|
function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose }) {
|
|
14534
|
-
const [currentIndex, setCurrentIndex] =
|
|
14535
|
-
const [activeHotspotId, setActiveHotspotId] =
|
|
14536
|
-
const sliderRef =
|
|
14537
|
-
const [isDragging, setIsDragging] =
|
|
14538
|
-
const wasDraggingRef =
|
|
14539
|
-
const touchStartX =
|
|
14540
|
-
const touchStartY =
|
|
14541
|
-
const isSwiping =
|
|
14542
|
-
const progress =
|
|
14554
|
+
const [currentIndex, setCurrentIndex] = React5.useState(() => clampIndex(startIndex, galleryImages.length));
|
|
14555
|
+
const [activeHotspotId, setActiveHotspotId] = React5.useState(null);
|
|
14556
|
+
const sliderRef = React5.useRef(null);
|
|
14557
|
+
const [isDragging, setIsDragging] = React5.useState(false);
|
|
14558
|
+
const wasDraggingRef = React5.useRef(false);
|
|
14559
|
+
const touchStartX = React5.useRef(null);
|
|
14560
|
+
const touchStartY = React5.useRef(null);
|
|
14561
|
+
const isSwiping = React5.useRef(false);
|
|
14562
|
+
const progress = React5.useMemo(() => {
|
|
14543
14563
|
if (galleryImages.length <= 1) return 0;
|
|
14544
14564
|
return currentIndex / (galleryImages.length - 1) * 100;
|
|
14545
14565
|
}, [currentIndex, galleryImages.length]);
|
|
14546
|
-
|
|
14566
|
+
React5.useEffect(() => {
|
|
14547
14567
|
document.body.style.overflow = "hidden";
|
|
14548
14568
|
document.body.style.touchAction = "none";
|
|
14549
14569
|
return () => {
|
|
@@ -14551,7 +14571,7 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
|
|
|
14551
14571
|
document.body.style.touchAction = "";
|
|
14552
14572
|
};
|
|
14553
14573
|
}, []);
|
|
14554
|
-
|
|
14574
|
+
React5.useEffect(() => {
|
|
14555
14575
|
const handleKey = (event) => {
|
|
14556
14576
|
if (event.key === "Escape") onClose();
|
|
14557
14577
|
if (event.key === "ArrowLeft") setCurrentIndex((i) => i === 0 ? galleryImages.length - 1 : i - 1);
|
|
@@ -14824,13 +14844,13 @@ function truncateHash(hash) {
|
|
|
14824
14844
|
return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
|
|
14825
14845
|
}
|
|
14826
14846
|
function ToastItem({ toast, onDismiss }) {
|
|
14827
|
-
const [exiting, setExiting] =
|
|
14828
|
-
const timerRef =
|
|
14829
|
-
const dismiss =
|
|
14847
|
+
const [exiting, setExiting] = React5.useState(false);
|
|
14848
|
+
const timerRef = React5.useRef(null);
|
|
14849
|
+
const dismiss = React5.useCallback(() => {
|
|
14830
14850
|
setExiting(true);
|
|
14831
14851
|
setTimeout(() => onDismiss(toast.id), 280);
|
|
14832
14852
|
}, [onDismiss, toast.id]);
|
|
14833
|
-
|
|
14853
|
+
React5.useEffect(() => {
|
|
14834
14854
|
const duration2 = toast.duration ?? 6e3;
|
|
14835
14855
|
if (duration2 > 0) {
|
|
14836
14856
|
timerRef.current = setTimeout(dismiss, duration2);
|
|
@@ -14859,15 +14879,15 @@ function ToastItem({ toast, onDismiss }) {
|
|
|
14859
14879
|
duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
|
|
14860
14880
|
] });
|
|
14861
14881
|
}
|
|
14862
|
-
var ToastContext =
|
|
14882
|
+
var ToastContext = React5.createContext(null);
|
|
14863
14883
|
function ToastProvider({ children }) {
|
|
14864
|
-
const [toasts, setToasts] =
|
|
14865
|
-
const addToast =
|
|
14884
|
+
const [toasts, setToasts] = React5.useState([]);
|
|
14885
|
+
const addToast = React5.useCallback((data) => {
|
|
14866
14886
|
const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
|
14867
14887
|
setToasts((prev) => [...prev, { ...data, id }]);
|
|
14868
14888
|
return id;
|
|
14869
14889
|
}, []);
|
|
14870
|
-
const dismiss =
|
|
14890
|
+
const dismiss = React5.useCallback((id) => {
|
|
14871
14891
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
14872
14892
|
}, []);
|
|
14873
14893
|
return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
|
|
@@ -14876,15 +14896,15 @@ function ToastProvider({ children }) {
|
|
|
14876
14896
|
] });
|
|
14877
14897
|
}
|
|
14878
14898
|
function useToast() {
|
|
14879
|
-
const ctx =
|
|
14899
|
+
const ctx = React5.useContext(ToastContext);
|
|
14880
14900
|
if (!ctx) throw new Error("useToast must be used within a ToastProvider");
|
|
14881
14901
|
return ctx;
|
|
14882
14902
|
}
|
|
14883
14903
|
var INTERVALS = [1e3, 2e3, 4e3, 5e3, 7e3, 1e4, 12e3];
|
|
14884
14904
|
function useAdaptivePolling({ enabled, onPoll }) {
|
|
14885
|
-
const onPollRef =
|
|
14905
|
+
const onPollRef = React5.useRef(onPoll);
|
|
14886
14906
|
onPollRef.current = onPoll;
|
|
14887
|
-
|
|
14907
|
+
React5.useEffect(() => {
|
|
14888
14908
|
if (!enabled) return;
|
|
14889
14909
|
let cancelled = false;
|
|
14890
14910
|
let timeoutId = null;
|