@orderly.network/trading-points 1.0.1-alpha.0

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.mjs ADDED
@@ -0,0 +1,1878 @@
1
+ import { createContext, useState, useEffect, useMemo, useCallback, useContext, useRef } from 'react';
2
+ import { useConfig, useQuery, usePrivateQuery, noCacheConfig, useInfiniteQuery } from '@orderly.network/hooks';
3
+ import { commify, numberToHumanStyle } from '@orderly.network/utils';
4
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
+ import { useScreen, Flex, cn, Box, Text, DropdownMenuRoot, DropdownMenuTrigger, ChevronDownIcon, DropdownMenuPortal, DropdownMenuContent, Divider, CopyIcon, Tooltip, Button, toast, usePagination, DataTable, Spinner } from '@orderly.network/ui';
6
+ import { isBefore, addDays, isAfter, isWithinInterval, subDays, differenceInDays, format } from 'date-fns';
7
+ import { useTranslation } from '@orderly.network/i18n';
8
+
9
+ // src/hooks/usePointsData/usePointsData.ts
10
+ function usePointsData() {
11
+ const brokerId = useConfig("brokerId");
12
+ const [currentStage, setCurrentStage] = useState(
13
+ void 0
14
+ );
15
+ const [selectedTimeRange, setSelectedTimeRange] = useState("this_week");
16
+ const { data: stages, isLoading: isStagesLoading } = useQuery(
17
+ brokerId ? `/v1/public/points/stages?broker_id=${brokerId}` : null,
18
+ {
19
+ formatter: (res) => {
20
+ if (res?.rows) {
21
+ res.rows.sort(
22
+ (a, b) => b.epoch_period - a.epoch_period
23
+ );
24
+ }
25
+ return res;
26
+ },
27
+ revalidateOnFocus: false
28
+ }
29
+ );
30
+ useEffect(() => {
31
+ if (!stages?.rows || stages.rows.length === 0 || currentStage !== void 0) {
32
+ return;
33
+ }
34
+ let selectedStage = stages.rows[0];
35
+ const activeStage = stages.rows.find((stage) => stage.status === "active");
36
+ if (activeStage) {
37
+ selectedStage = activeStage;
38
+ } else {
39
+ const pendingStage = [...stages.rows].reverse().find((stage) => stage.status === "pending");
40
+ if (pendingStage) {
41
+ selectedStage = pendingStage;
42
+ } else {
43
+ const completedStage = stages.rows.find(
44
+ (stage) => stage.status === "completed"
45
+ );
46
+ if (completedStage) {
47
+ selectedStage = completedStage;
48
+ }
49
+ }
50
+ }
51
+ setCurrentStage(selectedStage);
52
+ }, [stages, currentStage]);
53
+ const { data: userStatistics, isLoading: isUserStatisticsLoading } = usePrivateQuery(
54
+ currentStage !== void 0 ? `/v1/client/points/user_statistics?stage=${currentStage.stage_id}` : null,
55
+ {
56
+ formatter: (res) => res,
57
+ revalidateOnFocus: false
58
+ }
59
+ );
60
+ const { data: referralInfo } = usePrivateQuery(
61
+ "/v1/referral/info",
62
+ {
63
+ revalidateOnFocus: true,
64
+ errorRetryCount: 3,
65
+ ...noCacheConfig
66
+ }
67
+ );
68
+ const firstCode = useMemo(() => {
69
+ const codes = referralInfo?.referrer_info?.referral_codes;
70
+ if (!codes || codes.length === 0) {
71
+ return void 0;
72
+ }
73
+ return codes[0];
74
+ }, [referralInfo?.referrer_info?.referral_codes]);
75
+ const refCode = useMemo(() => {
76
+ return firstCode?.code || "--";
77
+ }, [firstCode]);
78
+ const refLink = useMemo(() => {
79
+ if (!firstCode || !firstCode.code) {
80
+ return "--";
81
+ }
82
+ const referralLinkUrl = window.location.origin;
83
+ return `${referralLinkUrl}?ref=${firstCode.code}`;
84
+ }, [firstCode]);
85
+ const getRankingUrl = useCallback(
86
+ (args) => {
87
+ if (!currentStage || !brokerId)
88
+ return null;
89
+ const searchParams = new URLSearchParams();
90
+ searchParams.set("page", args.page.toString());
91
+ searchParams.set("size", args.pageSize.toString());
92
+ searchParams.set("stage", String(currentStage.stage_id));
93
+ searchParams.set("period", args.timeRange || selectedTimeRange);
94
+ searchParams.set("broker_id", String(brokerId));
95
+ return `/v1/public/points/rankings?${searchParams.toString()}`;
96
+ },
97
+ [brokerId, currentStage, selectedTimeRange]
98
+ );
99
+ const isLoading = isStagesLoading || isUserStatisticsLoading;
100
+ const isNoCampaign = !isStagesLoading && (!stages?.rows || stages.rows.length === 0);
101
+ const formatPoints = (value) => {
102
+ if (value === void 0 || value === null) {
103
+ return "--";
104
+ }
105
+ return numberToHumanStyle(value, 2);
106
+ };
107
+ const calculateTotalPoints = useCallback(
108
+ (breakdown) => {
109
+ if (!breakdown)
110
+ return void 0;
111
+ return breakdown.trading_point + breakdown.pnl_point + breakdown.referral_point;
112
+ },
113
+ []
114
+ );
115
+ const pointsDisplay = useMemo(() => {
116
+ if (!userStatistics) {
117
+ return {
118
+ currentPointsDisplay: "--",
119
+ tradingPointsDisplay: "--",
120
+ pnlPointsDisplay: "--",
121
+ referralPointsDisplay: "--",
122
+ rankingDisplay: "--"
123
+ };
124
+ }
125
+ const breakdownThisWeek = userStatistics.weekly_breakdown?.this_week;
126
+ const breakdownLastWeek = userStatistics.weekly_breakdown?.last_week;
127
+ let selectedBreakdown;
128
+ let ranking;
129
+ if (selectedTimeRange === "all_time") {
130
+ selectedBreakdown = {
131
+ trading_point: userStatistics.trading_point,
132
+ pnl_point: userStatistics.pnl_point,
133
+ referral_point: userStatistics.referral_point
134
+ };
135
+ ranking = userStatistics.stage_rank;
136
+ } else if (selectedTimeRange === "this_week") {
137
+ selectedBreakdown = breakdownThisWeek;
138
+ ranking = breakdownThisWeek?.rank;
139
+ } else {
140
+ selectedBreakdown = breakdownLastWeek;
141
+ ranking = breakdownLastWeek?.rank;
142
+ }
143
+ const currentPoints = calculateTotalPoints(selectedBreakdown) ?? 0;
144
+ return {
145
+ currentPointsDisplay: formatPoints(currentPoints),
146
+ tradingPointsDisplay: formatPoints(selectedBreakdown?.trading_point),
147
+ pnlPointsDisplay: formatPoints(selectedBreakdown?.pnl_point),
148
+ referralPointsDisplay: formatPoints(selectedBreakdown?.referral_point),
149
+ rankingDisplay: ranking === null || ranking === void 0 ? "--" : commify(ranking)
150
+ };
151
+ }, [userStatistics, selectedTimeRange, calculateTotalPoints]);
152
+ const allTimePointsDisplay = useMemo(() => {
153
+ if (!userStatistics) {
154
+ return {
155
+ currentPointsDisplay: "--",
156
+ tradingPointsDisplay: "--",
157
+ pnlPointsDisplay: "--",
158
+ referralPointsDisplay: "--",
159
+ rankingDisplay: "--"
160
+ };
161
+ }
162
+ const currentPoints = calculateTotalPoints({
163
+ trading_point: userStatistics.trading_point,
164
+ pnl_point: userStatistics.pnl_point,
165
+ referral_point: userStatistics.referral_point
166
+ }) ?? 0;
167
+ return {
168
+ currentPointsDisplay: formatPoints(currentPoints),
169
+ tradingPointsDisplay: formatPoints(userStatistics.trading_point),
170
+ pnlPointsDisplay: formatPoints(userStatistics.pnl_point),
171
+ referralPointsDisplay: formatPoints(userStatistics.referral_point),
172
+ rankingDisplay: userStatistics.stage_rank === null || userStatistics.stage_rank === void 0 ? "--" : commify(userStatistics.stage_rank)
173
+ };
174
+ }, [userStatistics, calculateTotalPoints]);
175
+ return {
176
+ stages,
177
+ userStatistics,
178
+ currentStage,
179
+ setCurrentStage,
180
+ isLoading,
181
+ isStagesLoading,
182
+ isUserStatisticsLoading,
183
+ isNoCampaign,
184
+ refLink,
185
+ refCode,
186
+ selectedTimeRange,
187
+ setSelectedTimeRange,
188
+ getRankingUrl,
189
+ brokerId,
190
+ pointsDisplay,
191
+ allTimePointsDisplay,
192
+ isCurrentStagePending: currentStage?.status === "pending",
193
+ isCurrentStageCompleted: currentStage?.status === "completed"
194
+ };
195
+ }
196
+ var PointsContext = createContext(void 0);
197
+ var PointsProvider = ({ children }) => {
198
+ const value = usePointsData();
199
+ return /* @__PURE__ */ jsx(PointsContext.Provider, { value, children });
200
+ };
201
+ function usePoints() {
202
+ const context = useContext(PointsContext);
203
+ if (context === void 0) {
204
+ throw new Error("usePoints must be used within a PointsProvider");
205
+ }
206
+ return context;
207
+ }
208
+ var getDateRange = (offsetDay) => {
209
+ return {
210
+ from: subDays(/* @__PURE__ */ new Date(), offsetDay - 1),
211
+ to: /* @__PURE__ */ new Date()
212
+ };
213
+ };
214
+ var formatDateRange = (date) => {
215
+ return format(date, "yyyy-MM-dd");
216
+ };
217
+ function splitCampaignByWeeks(campaignDateRange) {
218
+ const startDate = typeof campaignDateRange.start_time === "string" ? new Date(campaignDateRange.start_time) : campaignDateRange.start_time;
219
+ const endDate = typeof campaignDateRange.end_time === "string" ? new Date(campaignDateRange.end_time) : campaignDateRange.end_time;
220
+ const result = [];
221
+ let currentWeekStart = new Date(startDate);
222
+ let weekNumber = 1;
223
+ while (isBefore(currentWeekStart, endDate)) {
224
+ const currentWeekEnd = addDays(currentWeekStart, 6);
225
+ const actualWeekEnd = isAfter(currentWeekEnd, endDate) ? new Date(endDate.getTime() - 1) : currentWeekEnd;
226
+ result.push({
227
+ from: new Date(currentWeekStart),
228
+ to: actualWeekEnd,
229
+ label: `Week ${weekNumber}`
230
+ });
231
+ if (!isBefore(actualWeekEnd, endDate)) {
232
+ break;
233
+ }
234
+ if (weekNumber === 1) {
235
+ const nextDayStart = addDays(currentWeekEnd, 1);
236
+ const year = nextDayStart.getUTCFullYear();
237
+ const month = nextDayStart.getUTCMonth();
238
+ const date = nextDayStart.getUTCDate();
239
+ currentWeekStart = new Date(Date.UTC(year, month, date, 0, 0, 0, 0));
240
+ } else {
241
+ const nextDayStart = addDays(currentWeekEnd, 1);
242
+ const year = nextDayStart.getUTCFullYear();
243
+ const month = nextDayStart.getUTCMonth();
244
+ const date = nextDayStart.getUTCDate();
245
+ currentWeekStart = new Date(Date.UTC(year, month, date, 0, 0, 0, 0));
246
+ }
247
+ weekNumber++;
248
+ if (weekNumber > 100) {
249
+ break;
250
+ }
251
+ }
252
+ return result;
253
+ }
254
+ function getCurrentWeeklyRange(weeklyRanges, targetDate = /* @__PURE__ */ new Date()) {
255
+ const weeklyOnlyRanges = weeklyRanges.filter(
256
+ (range) => range.label !== "All time"
257
+ );
258
+ for (const range of weeklyOnlyRanges) {
259
+ const rangeFrom = new Date(range.from);
260
+ const rangeTo = new Date(range.to);
261
+ if (isWithinInterval(targetDate, { start: rangeFrom, end: rangeTo })) {
262
+ return range;
263
+ }
264
+ }
265
+ const targetTime = targetDate.getTime();
266
+ let closestFutureRange = null;
267
+ let smallestGap = Infinity;
268
+ for (const range of weeklyOnlyRanges) {
269
+ const rangeFrom = new Date(range.from);
270
+ const rangeFromTime = rangeFrom.getTime();
271
+ if (rangeFromTime > targetTime) {
272
+ const gap = rangeFromTime - targetTime;
273
+ if (gap < smallestGap) {
274
+ smallestGap = gap;
275
+ closestFutureRange = range;
276
+ }
277
+ }
278
+ }
279
+ const ONE_DAY_MS = 24 * 60 * 60 * 1e3;
280
+ if (closestFutureRange && smallestGap <= ONE_DAY_MS) {
281
+ return closestFutureRange;
282
+ }
283
+ return null;
284
+ }
285
+ function getCurrentOrAllTimeRange(weeklyRanges, targetDate = /* @__PURE__ */ new Date()) {
286
+ const currentWeekly = getCurrentWeeklyRange(weeklyRanges, targetDate);
287
+ if (currentWeekly) {
288
+ return currentWeekly;
289
+ }
290
+ return weeklyRanges.find((range) => range.label === "All time") || weeklyRanges[weeklyRanges.length - 1];
291
+ }
292
+
293
+ // src/components/leaderboard/generalLeaderboard/generalLeaderboard.script.ts
294
+ function useGeneralLeaderboardScript(options) {
295
+ const { campaignDateRange } = options || {};
296
+ const weeklyRanges = useMemo(() => {
297
+ if (!campaignDateRange)
298
+ return [];
299
+ return splitCampaignByWeeks(campaignDateRange);
300
+ }, [campaignDateRange]);
301
+ const currentOrAllTimeRange = useMemo(() => {
302
+ return getCurrentOrAllTimeRange(weeklyRanges);
303
+ }, [weeklyRanges]);
304
+ const [activeTab, setActiveTab] = useState(
305
+ "volume" /* Volume */
306
+ );
307
+ const filterState = useFilter({ defaultRange: currentOrAllTimeRange });
308
+ const searchState = useSearch();
309
+ const useCampaignDateRange = useMemo(() => {
310
+ return !!campaignDateRange;
311
+ }, [campaignDateRange]);
312
+ return {
313
+ ...filterState,
314
+ ...searchState,
315
+ activeTab,
316
+ onTabChange: setActiveTab,
317
+ useCampaignDateRange,
318
+ weeklyRanges,
319
+ currentOrAllTimeRange
320
+ };
321
+ }
322
+ function useFilter({ defaultRange }) {
323
+ const [filterDay, setFilterDay] = useState(90);
324
+ const [dateRange, setDateRange] = useState(getDateRange(90));
325
+ const updateFilterDay = (day) => {
326
+ setFilterDay(day);
327
+ setDateRange(getDateRange(day));
328
+ };
329
+ useEffect(() => {
330
+ setDateRange(defaultRange ?? getDateRange(90));
331
+ }, [defaultRange]);
332
+ const onFilter = (filter) => {
333
+ if (filter.name === "dateRange") {
334
+ const newDateRange = filter.value;
335
+ setDateRange(newDateRange);
336
+ if (newDateRange.from && newDateRange.to) {
337
+ const offsetDay = Math.abs(differenceInDays(newDateRange.from, newDateRange.to)) + 1;
338
+ const dateRange2 = getDateRange(offsetDay);
339
+ if (formatDateRange(dateRange2.from) === formatDateRange(newDateRange.from) && formatDateRange(dateRange2.to) === formatDateRange(newDateRange.to)) {
340
+ setFilterDay(offsetDay);
341
+ } else {
342
+ setFilterDay(null);
343
+ }
344
+ }
345
+ }
346
+ };
347
+ const filterItems = useMemo(() => {
348
+ const dateRangeFilter = {
349
+ type: "range",
350
+ name: "dateRange",
351
+ value: dateRange,
352
+ max: 90
353
+ };
354
+ return [dateRangeFilter];
355
+ }, [dateRange]);
356
+ return {
357
+ filterItems,
358
+ onFilter,
359
+ dateRange,
360
+ filterDay,
361
+ updateFilterDay,
362
+ setDateRange
363
+ };
364
+ }
365
+ function useSearch() {
366
+ const [searchValue, setSearchValue] = useState("");
367
+ const onSearchValueChange = useCallback((value) => {
368
+ setSearchValue(value);
369
+ }, []);
370
+ const clearSearchValue = useCallback(() => {
371
+ setSearchValue("");
372
+ }, []);
373
+ return {
374
+ searchValue,
375
+ onSearchValueChange,
376
+ clearSearchValue
377
+ };
378
+ }
379
+
380
+ // src/img/first_badge.png
381
+ var first_badge_default = "data:image/png;base64,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";
382
+
383
+ // src/img/second_badge.png
384
+ var second_badge_default = "data:image/png;base64,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";
385
+
386
+ // src/img/third_badge.png
387
+ var third_badge_default = "data:image/png;base64,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";
388
+
389
+ // src/components/ranking/shared/util.ts
390
+ function isSameAddress(address1, address2) {
391
+ return address1.toLowerCase() === address2.toLowerCase();
392
+ }
393
+ function getCurrentAddressRowKey(address) {
394
+ return `current-address-${address?.toLowerCase()}`;
395
+ }
396
+ var useRankingColumns = (fields, address, enableSort, type) => {
397
+ const { t } = useTranslation();
398
+ const { isMobile } = useScreen();
399
+ return useMemo(() => {
400
+ const columns = [
401
+ {
402
+ title: t("tradingLeaderboard.rank"),
403
+ dataIndex: "rank",
404
+ width: 50,
405
+ render: (value, record) => {
406
+ const isYou = record.key === getCurrentAddressRowKey(address);
407
+ let rankIcon;
408
+ let badgeImg = null;
409
+ if (!isYou) {
410
+ if (value === 1) {
411
+ rankIcon = /* @__PURE__ */ jsx(FirstRankIcon, {});
412
+ badgeImg = first_badge_default;
413
+ } else if (value === 2) {
414
+ rankIcon = /* @__PURE__ */ jsx(SecondRankIcon, {});
415
+ badgeImg = second_badge_default;
416
+ } else if (value === 3) {
417
+ rankIcon = /* @__PURE__ */ jsx(ThirdRankIcon, {});
418
+ badgeImg = third_badge_default;
419
+ }
420
+ }
421
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
422
+ badgeImg && /* @__PURE__ */ jsx(
423
+ "img",
424
+ {
425
+ src: badgeImg,
426
+ alt: `${value}th badge`,
427
+ className: cn(
428
+ "oui-z-0 oui-h-[38px] oui-opacity-30 md:oui-h-[46px]",
429
+ "oui-absolute oui-left-0 oui-top-0",
430
+ "oui-mix-blend-luminosity",
431
+ // force create a separate layer in order to fix mix-blend-luminosity not working on ios
432
+ "oui-transform-gpu"
433
+ )
434
+ }
435
+ ),
436
+ /* @__PURE__ */ jsx("div", { className: "oui-relative", children: rankIcon || /* @__PURE__ */ jsx(Box, { width: 20, pl: 2, className: "oui-text-center", children: value }) })
437
+ ] });
438
+ }
439
+ },
440
+ {
441
+ title: t("common.address"),
442
+ dataIndex: "address",
443
+ render: (value, record) => {
444
+ const isYou = record.key === getCurrentAddressRowKey(address);
445
+ if (isMobile && isYou) {
446
+ return /* @__PURE__ */ jsx(Text, { children: "You" });
447
+ }
448
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
449
+ "a",
450
+ {
451
+ className: "oui-flex oui-items-start oui-gap-1",
452
+ href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${record.broker_id}`,
453
+ target: "_blank",
454
+ rel: "noreferrer",
455
+ children: [
456
+ /* @__PURE__ */ jsx(
457
+ Text.formatted,
458
+ {
459
+ rule: "address",
460
+ onCopy: (e) => {
461
+ e.preventDefault();
462
+ e.stopPropagation();
463
+ navigator.clipboard.writeText(value);
464
+ toast.success(t("common.copy.copied"));
465
+ },
466
+ className: "oui-cursor-pointer",
467
+ children: value
468
+ },
469
+ record.rank
470
+ ),
471
+ isYou && /* @__PURE__ */ jsx(Text, { children: " (You)" })
472
+ ]
473
+ }
474
+ ) });
475
+ },
476
+ width: 90
477
+ },
478
+ {
479
+ title: "Points",
480
+ dataIndex: "points",
481
+ align: isMobile ? "right" : "left",
482
+ render: (value) => {
483
+ if (value === void 0 || value === null || value === "") {
484
+ return "-";
485
+ }
486
+ return /* @__PURE__ */ jsx(Text, { children: commify(value, 2) });
487
+ }
488
+ }
489
+ ];
490
+ return columns.filter(
491
+ (column) => fields?.includes(column.dataIndex)
492
+ );
493
+ }, [t, isMobile, address, fields, enableSort, type]);
494
+ };
495
+ var FirstRankIcon = () => {
496
+ return /* @__PURE__ */ jsxs(
497
+ "svg",
498
+ {
499
+ width: "25",
500
+ height: "25",
501
+ viewBox: "0 0 25 25",
502
+ fill: "none",
503
+ xmlns: "http://www.w3.org/2000/svg",
504
+ children: [
505
+ /* @__PURE__ */ jsx(
506
+ "path",
507
+ {
508
+ d: "M3.88281 2.5L7.78711 10.3105C6.38111 11.5855 5.5 13.427 5.5 15.5C5.5 19.4 8.6 22.5 12.5 22.5C16.4 22.5 19.5 19.4 19.5 15.5C19.5 13.427 18.6189 11.5855 17.2129 10.3105L21.1172 2.5H15.5L12.5 8.5L9.5 2.5H3.88281ZM12.5 10.5C15.3 10.5 17.5 12.7 17.5 15.5C17.5 18.3 15.3 20.5 12.5 20.5C9.7 20.5 7.5 18.3 7.5 15.5C7.5 12.7 9.7 10.5 12.5 10.5ZM12.5 12.5C12.4 12.8 11.9 13.6992 11 13.6992V14.6992H12.0996V18.5H13.4004H13.5V12.5H12.5Z",
509
+ fill: "url(#paint0_linear_21940_39199)"
510
+ }
511
+ ),
512
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
513
+ "linearGradient",
514
+ {
515
+ id: "paint0_linear_21940_39199",
516
+ x1: "6.18073",
517
+ y1: "6",
518
+ x2: "20.1338",
519
+ y2: "18.1659",
520
+ gradientUnits: "userSpaceOnUse",
521
+ children: [
522
+ /* @__PURE__ */ jsx("stop", { stopColor: "#8C421D" }),
523
+ /* @__PURE__ */ jsx("stop", { offset: "0.325272", stopColor: "#FBE67B" }),
524
+ /* @__PURE__ */ jsx("stop", { offset: "0.535488", stopColor: "#FCFBE7" }),
525
+ /* @__PURE__ */ jsx("stop", { offset: "0.769917", stopColor: "#F7D14E" }),
526
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#D4A041" })
527
+ ]
528
+ }
529
+ ) })
530
+ ]
531
+ }
532
+ );
533
+ };
534
+ var SecondRankIcon = () => {
535
+ return /* @__PURE__ */ jsxs(
536
+ "svg",
537
+ {
538
+ width: "25",
539
+ height: "25",
540
+ viewBox: "0 0 25 25",
541
+ fill: "none",
542
+ xmlns: "http://www.w3.org/2000/svg",
543
+ children: [
544
+ /* @__PURE__ */ jsx(
545
+ "path",
546
+ {
547
+ d: "M3.88281 2.5L7.78711 10.3105C6.38111 11.5855 5.5 13.427 5.5 15.5C5.5 19.4 8.6 22.5 12.5 22.5C16.4 22.5 19.5 19.4 19.5 15.5C19.5 13.427 18.6189 11.5855 17.2129 10.3105L21.1172 2.5H15.5L12.5 8.5L9.5 2.5H3.88281ZM12.5 10.5C15.3 10.5 17.5 12.7 17.5 15.5C17.5 18.3 15.3 20.5 12.5 20.5C9.7 20.5 7.5 18.3 7.5 15.5C7.5 12.7 9.7 10.5 12.5 10.5ZM12.5469 12.5C10.7729 12.5 10.481 13.901 10.5 14.5H11.6738C11.6738 14.357 11.809 13.5 12.5 13.5C13.163 13.5 13.291 14.0232 13.291 14.2852C13.291 15.0512 12.245 15.7623 10.5 17.6973V18.5L14.4883 18.4766L14.4863 17.5332H12.2285C13.8425 15.8792 14.5 15.1309 14.5 14.1719C14.5 13.4869 14.1149 12.5 12.5469 12.5Z",
548
+ fill: "url(#paint0_linear_21940_39214)"
549
+ }
550
+ ),
551
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
552
+ "linearGradient",
553
+ {
554
+ id: "paint0_linear_21940_39214",
555
+ x1: "6.18073",
556
+ y1: "6",
557
+ x2: "20.1338",
558
+ y2: "18.1659",
559
+ gradientUnits: "userSpaceOnUse",
560
+ children: [
561
+ /* @__PURE__ */ jsx("stop", { stopColor: "#7F7F7F" }),
562
+ /* @__PURE__ */ jsx("stop", { offset: "0.325272", stopColor: "#D9D9D9" }),
563
+ /* @__PURE__ */ jsx("stop", { offset: "0.535488", stopColor: "#F7F6F4" }),
564
+ /* @__PURE__ */ jsx("stop", { offset: "0.769917", stopColor: "#D9D9D9" }),
565
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#7F7F7F" })
566
+ ]
567
+ }
568
+ ) })
569
+ ]
570
+ }
571
+ );
572
+ };
573
+ var ThirdRankIcon = () => {
574
+ return /* @__PURE__ */ jsxs(
575
+ "svg",
576
+ {
577
+ width: "29",
578
+ height: "25",
579
+ viewBox: "0 0 29 25",
580
+ fill: "none",
581
+ xmlns: "http://www.w3.org/2000/svg",
582
+ children: [
583
+ /* @__PURE__ */ jsx(
584
+ "path",
585
+ {
586
+ d: "M5.88281 2.5L9.78711 10.3105C8.38111 11.5855 7.5 13.427 7.5 15.5C7.5 19.4 10.6 22.5 14.5 22.5C18.4 22.5 21.5 19.4 21.5 15.5C21.5 13.427 20.6189 11.5855 19.2129 10.3105L23.1172 2.5H17.5L14.5 8.5L11.5 2.5H5.88281ZM14.5 10.5C17.3 10.5 19.5 12.7 19.5 15.5C19.5 18.3 17.3 20.5 14.5 20.5C11.7 20.5 9.5 18.3 9.5 15.5C9.5 12.7 11.7 10.5 14.5 10.5ZM14.4688 12.5C13.6927 12.5 12.5898 12.9348 12.5898 14.0918H13.7266C13.7266 13.9118 13.8461 13.4336 14.4941 13.4336C14.6251 13.4336 15.2715 13.4767 15.2715 14.1797C15.2715 14.8967 14.7109 14.9844 14.4219 14.9844H13.8145V15.8906H14.4219C14.5659 15.8906 15.3613 15.8537 15.3613 16.7637C15.3613 16.8837 15.3111 17.5625 14.4961 17.5625C13.8081 17.5625 13.6233 17.0284 13.6562 16.8164H12.5195C12.4615 17.4334 12.9757 18.4961 14.4688 18.4961C15.3018 18.4961 16.5 18.0942 16.5 16.7812C16.5 15.8643 15.8621 15.536 15.5391 15.418C15.6781 15.354 16.4082 14.9771 16.4082 14.1641C16.4082 13.7131 16.2127 12.5 14.4688 12.5Z",
587
+ fill: "url(#paint0_linear_21940_39224)"
588
+ }
589
+ ),
590
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
591
+ "linearGradient",
592
+ {
593
+ id: "paint0_linear_21940_39224",
594
+ x1: "8.61159",
595
+ y1: "5.33333",
596
+ x2: "22.7368",
597
+ y2: "20.4383",
598
+ gradientUnits: "userSpaceOnUse",
599
+ children: [
600
+ /* @__PURE__ */ jsx("stop", { stopColor: "#B6947E" }),
601
+ /* @__PURE__ */ jsx("stop", { offset: "0.2", stopColor: "#8F6959" }),
602
+ /* @__PURE__ */ jsx("stop", { offset: "0.475", stopColor: "#F8DAC8" }),
603
+ /* @__PURE__ */ jsx("stop", { offset: "0.67", stopColor: "#AC836E" }),
604
+ /* @__PURE__ */ jsx("stop", { offset: "0.83", stopColor: "#B6947E" }),
605
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#F8DCCB" })
606
+ ]
607
+ }
608
+ ) })
609
+ ]
610
+ }
611
+ );
612
+ };
613
+ var Ranking = (props) => {
614
+ const column = useRankingColumns(
615
+ props.fields,
616
+ props.address,
617
+ false,
618
+ props.type
619
+ );
620
+ const { isMobile } = useScreen();
621
+ const onRow = useCallback(
622
+ (record, index) => {
623
+ const isYou = record.key === getCurrentAddressRowKey(props.address);
624
+ const isFirst = record.rank === 1;
625
+ const isSecond = record.rank === 2;
626
+ const isThird = record.rank === 3;
627
+ const showBg = isFirst || isSecond || isThird;
628
+ return {
629
+ className: cn(
630
+ "oui-h-[40px] md:oui-h-[48px]",
631
+ // use oui-relative to let the background image position based on row
632
+ "oui-relative",
633
+ isYou ? (
634
+ // add 4px extra height to make row has 2px space
635
+ "oui-h-[44px] md:oui-h-[52px]"
636
+ ) : cn(
637
+ showBg && "oui-border-b-2 oui-border-b-transparent",
638
+ isFirst && "oui-bg-[linear-gradient(270deg,rgba(241,215,121,0.0225)_-2.05%,rgba(255,203,70,0.45)_100%)]",
639
+ isSecond && "oui-bg-[linear-gradient(270deg,rgba(255,255,255,0.0225)_-2.05%,rgba(199,199,199,0.45)_100%)]",
640
+ isThird && "oui-bg-[linear-gradient(270deg,rgba(255,233,157,0.0225)_-1.3%,rgba(160,101,46,0.45)_100%)]"
641
+ )
642
+ )
643
+ };
644
+ },
645
+ [props.address]
646
+ );
647
+ const onCell = useCallback(
648
+ (column2, record) => {
649
+ const isFirstColumn = column2.getIsFirstColumn();
650
+ const isLastColumn = column2.getIsLastColumn();
651
+ const isRank = [1, 2, 3].includes(record.rank);
652
+ return {
653
+ className: cn(
654
+ isFirstColumn && isRank && "oui-rounded-l-lg oui-mix-blend-luminosity",
655
+ isLastColumn && isRank && "oui-rounded-r-lg oui-mix-blend-luminosity"
656
+ )
657
+ };
658
+ },
659
+ [props.address]
660
+ );
661
+ if (isMobile) {
662
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
663
+ /* @__PURE__ */ jsx(
664
+ DataTable,
665
+ {
666
+ classNames: {
667
+ root: "oui-trading-leaderboard-ranking-table oui-bg-transparent",
668
+ body: "oui-text-2xs",
669
+ scroll: "oui-overflow-y-hidden oui-h-full"
670
+ },
671
+ loading: props.isLoading,
672
+ columns: column,
673
+ bordered: true,
674
+ dataSource: props.dataList,
675
+ generatedRowKey: (record) => record.key || record.address,
676
+ manualPagination: true,
677
+ manualSorting: true,
678
+ onRow,
679
+ onCell
680
+ }
681
+ ),
682
+ /* @__PURE__ */ jsx(
683
+ "div",
684
+ {
685
+ ref: props.sentinelRef,
686
+ className: "oui-invisible oui-relative oui-top-[-300px] oui-h-px"
687
+ }
688
+ ),
689
+ props.isLoading && props.dataList.length > 0 && /* @__PURE__ */ jsx(Flex, { itemAlign: "center", justify: "center", width: "100%", height: 40, children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) })
690
+ ] });
691
+ }
692
+ return /* @__PURE__ */ jsx(
693
+ DataTable,
694
+ {
695
+ loading: props.isLoading,
696
+ columns: column,
697
+ bordered: true,
698
+ dataSource: props.dataSource,
699
+ generatedRowKey: (record) => record.key || record.address,
700
+ manualPagination: true,
701
+ manualSorting: true,
702
+ pagination: props.pagination,
703
+ classNames: {
704
+ root: cn(
705
+ "oui-trading-leaderboard-ranking-table",
706
+ "oui-bg-transparent",
707
+ "oui-rounded-md",
708
+ "oui-overflow-hidden",
709
+ "!oui-h-[calc(100%_-_53px_-_8px)]"
710
+ ),
711
+ scroll: "oui-min-h-[600px] oui-max-h-[1250px]",
712
+ header: "oui-bg-base-9"
713
+ },
714
+ onRow,
715
+ onCell
716
+ }
717
+ );
718
+ };
719
+ function useEndReached(sentinelRef, onEndReached) {
720
+ const observer = useRef();
721
+ const cb = useRef(onEndReached);
722
+ cb.current = onEndReached;
723
+ useEffect(() => {
724
+ const options = {
725
+ root: null,
726
+ rootMargin: "0px",
727
+ threshold: 0
728
+ };
729
+ const handleObserver = (entries) => {
730
+ entries.forEach((entry) => {
731
+ if (entry.isIntersecting) {
732
+ cb.current?.();
733
+ }
734
+ });
735
+ };
736
+ observer.current = new IntersectionObserver(handleObserver, options);
737
+ return () => {
738
+ observer.current?.disconnect();
739
+ };
740
+ }, []);
741
+ useEffect(() => {
742
+ if (sentinelRef.current) {
743
+ observer.current?.observe(sentinelRef.current);
744
+ }
745
+ }, [sentinelRef.current]);
746
+ }
747
+
748
+ // src/components/ranking/generalRanking/generalRanking.script.ts
749
+ function useGeneralRankingScript(options) {
750
+ const { address: searchValue } = options || {};
751
+ const brokerId = useConfig("brokerId");
752
+ const { currentStage, userStatistics, getRankingUrl, selectedTimeRange } = usePoints();
753
+ const { isMobile } = useScreen();
754
+ const { page, pageSize, setPage, parsePagination } = usePagination({
755
+ pageSize: 10
756
+ });
757
+ const { data, isLoading } = useQuery(
758
+ currentStage && brokerId ? getRankingUrl({ page, pageSize, timeRange: selectedTimeRange }) : null,
759
+ {
760
+ formatter: (res) => res,
761
+ revalidateOnFocus: false
762
+ }
763
+ );
764
+ const {
765
+ data: infiniteData,
766
+ size,
767
+ setSize,
768
+ isValidating
769
+ } = useInfiniteQuery(
770
+ (pageIndex, previousPageData) => {
771
+ if (previousPageData && !previousPageData.rows?.length)
772
+ return null;
773
+ if (!isMobile || !currentStage)
774
+ return null;
775
+ return getRankingUrl({
776
+ page: pageIndex + 1,
777
+ pageSize,
778
+ timeRange: selectedTimeRange
779
+ });
780
+ },
781
+ {
782
+ initialSize: 1,
783
+ formatter: (res) => res,
784
+ revalidateOnFocus: false
785
+ }
786
+ );
787
+ const userDataList = useMemo(() => {
788
+ if (!userStatistics?.address)
789
+ return [];
790
+ let rank = "-";
791
+ let points;
792
+ if (selectedTimeRange === "all_time") {
793
+ rank = userStatistics.stage_rank ?? "-";
794
+ points = userStatistics.stage_points;
795
+ } else if (selectedTimeRange === "this_week") {
796
+ rank = userStatistics.weekly_breakdown?.this_week?.rank ?? "-";
797
+ const breakdown = userStatistics.weekly_breakdown?.this_week;
798
+ points = breakdown ? breakdown.trading_point + breakdown.pnl_point + breakdown.referral_point : void 0;
799
+ } else if (selectedTimeRange === "last_week") {
800
+ rank = userStatistics.weekly_breakdown?.last_week?.rank ?? "-";
801
+ const breakdown = userStatistics.weekly_breakdown?.last_week;
802
+ points = breakdown ? breakdown.trading_point + breakdown.pnl_point + breakdown.referral_point : void 0;
803
+ }
804
+ return [
805
+ {
806
+ key: getCurrentAddressRowKey(userStatistics.address),
807
+ address: userStatistics.address,
808
+ rank,
809
+ points,
810
+ broker_id: brokerId ?? null
811
+ }
812
+ ];
813
+ }, [userStatistics, brokerId, selectedTimeRange]);
814
+ const addRankForList = useCallback(
815
+ (list) => {
816
+ return list?.map((item, index) => ({
817
+ ...item,
818
+ rank: index + 1 + (page - 1) * pageSize
819
+ }));
820
+ },
821
+ [page, pageSize]
822
+ );
823
+ const dataSource = useMemo(() => {
824
+ const mapped = (data?.rows || []).map((row) => ({
825
+ address: row.address,
826
+ points: row.total_points,
827
+ rank: row.rank,
828
+ broker_id: brokerId ?? null
829
+ }));
830
+ const filtered = searchValue ? mapped.filter((item) => isSameAddress(item.address, searchValue || "")) : mapped;
831
+ const finalList = addRankForList(filtered);
832
+ if (page === 1 && !searchValue && userDataList.length) {
833
+ return [...userDataList, ...finalList];
834
+ }
835
+ return finalList;
836
+ }, [data, brokerId, searchValue, addRankForList, page, userDataList]);
837
+ const dataList = useMemo(() => {
838
+ if (!infiniteData?.length)
839
+ return [];
840
+ const flat = infiniteData.map((p) => p.rows).flat();
841
+ const mapped = flat.map((row) => ({
842
+ address: row.address,
843
+ points: row.total_points,
844
+ broker_id: brokerId ?? null
845
+ }));
846
+ const filtered = searchValue ? mapped.filter((item) => isSameAddress(item.address, searchValue)) : mapped;
847
+ const rankList = addRankForList(filtered);
848
+ if (!searchValue && userDataList.length) {
849
+ return [...userDataList, ...rankList];
850
+ }
851
+ return rankList;
852
+ }, [infiniteData, brokerId, searchValue, addRankForList, userDataList]);
853
+ const sentinelRef = useRef(null);
854
+ const pagination = useMemo(
855
+ () => parsePagination({
856
+ total: data?.meta?.total || 0,
857
+ current_page: data?.meta?.current_page || 1,
858
+ records_per_page: pageSize
859
+ }),
860
+ [data?.meta?.total, data?.meta?.current_page, pageSize]
861
+ );
862
+ useEndReached(sentinelRef, () => {
863
+ if (!isValidating && isMobile) {
864
+ setSize(size + 1);
865
+ }
866
+ });
867
+ useEffect(() => {
868
+ if (searchValue)
869
+ setPage(1);
870
+ }, [searchValue, setPage]);
871
+ useEffect(() => {
872
+ setPage(1);
873
+ }, [currentStage?.stage_id, setPage]);
874
+ useEffect(() => {
875
+ setPage(1);
876
+ setSize(1);
877
+ }, [selectedTimeRange, setPage, setSize]);
878
+ return {
879
+ pagination,
880
+ dataSource,
881
+ isLoading: isLoading || isValidating,
882
+ isMobile,
883
+ sentinelRef,
884
+ dataList,
885
+ address: userStatistics?.address
886
+ };
887
+ }
888
+ var GeneralRankingWidget = (props) => {
889
+ const { address, fields, ...rest } = props;
890
+ const state = useGeneralRankingScript({ address });
891
+ return /* @__PURE__ */ jsx(Ranking, { ...state, ...rest, fields, type: "general" });
892
+ };
893
+ var GeneralLeaderboard = (props) => {
894
+ const { isMobile } = useScreen();
895
+ const fields = ["rank", "address", "points"];
896
+ if (isMobile) {
897
+ return /* @__PURE__ */ jsx(
898
+ Box,
899
+ {
900
+ pt: 2,
901
+ px: 3,
902
+ r: "2xl",
903
+ intensity: 900,
904
+ width: "100%",
905
+ className: cn(
906
+ "oui-trading-leaderboard-general-leaderboard oui-relative",
907
+ props.className
908
+ ),
909
+ style: props.style,
910
+ children: /* @__PURE__ */ jsx(GeneralRankingWidget, { address: props.searchValue, fields })
911
+ }
912
+ );
913
+ }
914
+ return /* @__PURE__ */ jsx(
915
+ Box,
916
+ {
917
+ pt: 2,
918
+ px: 6,
919
+ r: "2xl",
920
+ className: cn(
921
+ "oui-trading-leaderboard-general-leaderboard oui-relative",
922
+ "oui-mx-auto oui-max-w-[992px]",
923
+ props.className
924
+ ),
925
+ style: props.style,
926
+ children: /* @__PURE__ */ jsx(GeneralRankingWidget, { address: props.searchValue, fields })
927
+ }
928
+ );
929
+ };
930
+ var GeneralLeaderboardWidget = (props) => {
931
+ const state = useGeneralLeaderboardScript({
932
+ campaignDateRange: props.campaignDateRange
933
+ });
934
+ return /* @__PURE__ */ jsx(
935
+ GeneralLeaderboard,
936
+ {
937
+ ...state,
938
+ className: props.className,
939
+ style: props.style
940
+ }
941
+ );
942
+ };
943
+ var Countdown = ({ className }) => {
944
+ const { isMobile } = useScreen();
945
+ const { currentStage } = usePoints();
946
+ const { t } = useTranslation();
947
+ const [timeLeft, setTimeLeft] = useState({
948
+ days: 0,
949
+ hours: 0,
950
+ minutes: 0,
951
+ seconds: 0
952
+ });
953
+ useEffect(() => {
954
+ if (currentStage?.status !== "pending" || !currentStage?.start_time) {
955
+ return;
956
+ }
957
+ const calculateTimeLeft = () => {
958
+ const targetDate2 = currentStage.start_time * 1e3;
959
+ const now2 = (/* @__PURE__ */ new Date()).getTime();
960
+ const difference = targetDate2 - now2;
961
+ if (difference > 0) {
962
+ return {
963
+ days: Math.floor(difference / (1e3 * 60 * 60 * 24)),
964
+ hours: Math.floor(difference / (1e3 * 60 * 60) % 24),
965
+ minutes: Math.floor(difference / 1e3 / 60 % 60),
966
+ seconds: Math.floor(difference / 1e3 % 60)
967
+ };
968
+ }
969
+ return { days: 0, hours: 0, minutes: 0, seconds: 0 };
970
+ };
971
+ setTimeLeft(calculateTimeLeft());
972
+ const timer = setInterval(() => {
973
+ setTimeLeft(calculateTimeLeft());
974
+ }, 1e3);
975
+ return () => clearInterval(timer);
976
+ }, [currentStage]);
977
+ const formatNumber = (num) => {
978
+ return num.toString().padStart(2, "0");
979
+ };
980
+ if (currentStage?.status !== "pending" || !currentStage?.start_time) {
981
+ return null;
982
+ }
983
+ const targetDate = currentStage.start_time * 1e3;
984
+ const now = (/* @__PURE__ */ new Date()).getTime();
985
+ if (targetDate <= now) {
986
+ return null;
987
+ }
988
+ return /* @__PURE__ */ jsxs(
989
+ Flex,
990
+ {
991
+ gap: 4,
992
+ itemAlign: "center",
993
+ justify: "center",
994
+ px: 9,
995
+ className,
996
+ children: [
997
+ !isMobile && /* @__PURE__ */ jsx(
998
+ Box,
999
+ {
1000
+ className: "oui-w-[200px] oui-h-[1px]",
1001
+ style: {
1002
+ background: `linear-gradient(123deg, rgba(176, 132, 233, 0.00) 0%, #DEC4FF 123.91%)`
1003
+ }
1004
+ }
1005
+ ),
1006
+ /* @__PURE__ */ jsx(Box, { className: "oui-rounded-2xl", p: 5, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, itemAlign: "center", children: [
1007
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-white/[.36] oui-text-lg", children: t("tradingPoints.startsIn") }),
1008
+ /* @__PURE__ */ jsxs(Flex, { gap: 2, itemAlign: "center", justify: "center", children: [
1009
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, itemAlign: "center", children: [
1010
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-white/98 oui-text-4xl oui-font-bold oui-w-16 oui-text-center", children: formatNumber(timeLeft.days) }),
1011
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-16 oui-text-center", children: t("tradingPoints.days") })
1012
+ ] }),
1013
+ /* @__PURE__ */ jsx(Box, { className: "oui-w-1 oui-h-1 oui-rounded-full oui-bg-base-4" }),
1014
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, itemAlign: "center", children: [
1015
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-white/98 oui-text-4xl oui-font-bold oui-w-16 oui-text-center", children: formatNumber(timeLeft.hours) }),
1016
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-16 oui-text-center", children: t("tradingPoints.hours") })
1017
+ ] }),
1018
+ /* @__PURE__ */ jsx(Box, { className: "oui-w-1 oui-h-1 oui-rounded-full oui-bg-base-4" }),
1019
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, itemAlign: "center", children: [
1020
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-white/98 oui-text-4xl oui-font-bold oui-w-16 oui-text-center", children: formatNumber(timeLeft.minutes) }),
1021
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-16 oui-text-center", children: t("tradingPoints.minutes") })
1022
+ ] }),
1023
+ /* @__PURE__ */ jsx(Box, { className: "oui-w-1 oui-h-1 oui-rounded-full oui-bg-base-4" }),
1024
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, itemAlign: "center", children: [
1025
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-white/98 oui-text-4xl oui-font-bold oui-w-16 oui-text-center", children: formatNumber(timeLeft.seconds) }),
1026
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-16 oui-text-center", children: t("tradingPoints.seconds") })
1027
+ ] })
1028
+ ] })
1029
+ ] }) }),
1030
+ !isMobile && /* @__PURE__ */ jsx(
1031
+ Box,
1032
+ {
1033
+ className: "oui-w-[200px] oui-h-[1px]",
1034
+ style: {
1035
+ background: `linear-gradient(270deg, rgba(176, 132, 233, 0.00) 0%, #DEC4FF 123.91%)`
1036
+ }
1037
+ }
1038
+ )
1039
+ ]
1040
+ }
1041
+ );
1042
+ };
1043
+ var FAQItem = ({ question, answer }) => {
1044
+ const { isMobile } = useScreen();
1045
+ const [isOpen, setIsOpen] = useState(false);
1046
+ return /* @__PURE__ */ jsxs(
1047
+ Flex,
1048
+ {
1049
+ onClick: () => setIsOpen(!isOpen),
1050
+ direction: "column",
1051
+ className: "oui-w-full",
1052
+ itemAlign: "start",
1053
+ children: [
1054
+ /* @__PURE__ */ jsxs(
1055
+ Flex,
1056
+ {
1057
+ gap: 4,
1058
+ className: "oui-w-full oui-cursor-pointer hover:oui-opacity-80 oui-transition-opacity",
1059
+ children: [
1060
+ /* @__PURE__ */ jsx(
1061
+ Text,
1062
+ {
1063
+ className: cn(
1064
+ "oui-flex-1 oui-text-white oui-font-semibold oui-tracking-[0.03em]",
1065
+ isMobile ? "oui-text-lg oui-leading-[26px]" : "oui-text-xl oui-leading-8"
1066
+ ),
1067
+ children: question
1068
+ }
1069
+ ),
1070
+ /* @__PURE__ */ jsx(
1071
+ ChevronDownIcon,
1072
+ {
1073
+ size: 24,
1074
+ className: cn(
1075
+ "oui-text-white oui-transition-transform oui-duration-300 oui-flex-shrink-0",
1076
+ isOpen && "oui-rotate-180"
1077
+ )
1078
+ }
1079
+ )
1080
+ ]
1081
+ }
1082
+ ),
1083
+ /* @__PURE__ */ jsx(
1084
+ Box,
1085
+ {
1086
+ className: cn(
1087
+ "oui-overflow-hidden oui-transition-all oui-duration-300",
1088
+ isOpen && "oui-mt-4"
1089
+ ),
1090
+ style: {
1091
+ maxHeight: isOpen ? "500px" : "0px",
1092
+ opacity: isOpen ? 1 : 0
1093
+ },
1094
+ children: /* @__PURE__ */ jsx(
1095
+ Text,
1096
+ {
1097
+ className: "oui-text-base-contrast-54 oui-text-sm oui-leading-relaxed",
1098
+ style: { whiteSpace: "pre-line" },
1099
+ children: answer
1100
+ }
1101
+ )
1102
+ }
1103
+ )
1104
+ ]
1105
+ }
1106
+ );
1107
+ };
1108
+ var FAQSection = ({ className }) => {
1109
+ const brokerName = useConfig("brokerName");
1110
+ const { isMobile } = useScreen();
1111
+ const { t } = useTranslation();
1112
+ const faqData = [
1113
+ {
1114
+ question: t("tradingPoints.faq.whatArePoints.question"),
1115
+ answer: t("tradingPoints.faq.whatArePoints.answer", { brokerName })
1116
+ },
1117
+ {
1118
+ question: t("tradingPoints.faq.allocation.question"),
1119
+ answer: t("tradingPoints.faq.allocation.answer")
1120
+ },
1121
+ {
1122
+ question: t("tradingPoints.faq.distribution.question"),
1123
+ answer: t("tradingPoints.faq.distribution.answer")
1124
+ },
1125
+ {
1126
+ question: t("tradingPoints.faq.pnl.question"),
1127
+ answer: t("tradingPoints.faq.pnl.answer")
1128
+ },
1129
+ {
1130
+ question: t("tradingPoints.faq.referral.question"),
1131
+ answer: t("tradingPoints.faq.referral.answer")
1132
+ }
1133
+ ];
1134
+ return /* @__PURE__ */ jsxs(
1135
+ Flex,
1136
+ {
1137
+ direction: "column",
1138
+ gap: 6,
1139
+ className,
1140
+ itemAlign: "start",
1141
+ id: "points-faq",
1142
+ children: [
1143
+ /* @__PURE__ */ jsx(
1144
+ Text,
1145
+ {
1146
+ className: cn(
1147
+ "oui-text-base-contrast oui-font-normal oui-tracking-[0.03em]",
1148
+ isMobile ? "oui-text-2xl oui-leading-8" : "oui-text-3xl oui-leading-10"
1149
+ ),
1150
+ children: t("tradingPoints.faq.title")
1151
+ }
1152
+ ),
1153
+ /* @__PURE__ */ jsx(
1154
+ Flex,
1155
+ {
1156
+ direction: "column",
1157
+ gap: 8,
1158
+ className: "oui-w-full",
1159
+ itemAlign: "start",
1160
+ children: faqData.map((faq, index) => /* @__PURE__ */ jsxs("div", { className: "oui-w-full", children: [
1161
+ /* @__PURE__ */ jsx(FAQItem, { question: faq.question, answer: faq.answer }),
1162
+ index < faqData.length - 1 && /* @__PURE__ */ jsx(Divider, { className: "oui-mt-8", intensity: 8 })
1163
+ ] }, index))
1164
+ }
1165
+ )
1166
+ ]
1167
+ }
1168
+ );
1169
+ };
1170
+ var Intro = () => {
1171
+ const { isMobile } = useScreen();
1172
+ const {
1173
+ currentStage,
1174
+ stages,
1175
+ setCurrentStage,
1176
+ refLink,
1177
+ refCode,
1178
+ allTimePointsDisplay,
1179
+ isNoCampaign
1180
+ } = usePoints();
1181
+ const [isStageDropdownOpen, setIsStageDropdownOpen] = useState(false);
1182
+ const { t } = useTranslation();
1183
+ const onCopyCode = async () => {
1184
+ try {
1185
+ await navigator.clipboard.writeText(refCode);
1186
+ toast.success(t("common.copy.copied"));
1187
+ } catch (error) {
1188
+ }
1189
+ };
1190
+ const onCopyLink = async () => {
1191
+ try {
1192
+ await navigator.clipboard.writeText(refLink);
1193
+ toast.success(t("common.copy.copied"));
1194
+ } catch (error) {
1195
+ }
1196
+ };
1197
+ const handleLearnMore = () => {
1198
+ const faqElement = document.getElementById("points-faq");
1199
+ if (faqElement) {
1200
+ faqElement.scrollIntoView({ behavior: "smooth", block: "start" });
1201
+ }
1202
+ };
1203
+ const formatStageDate = (startTime, endTime) => {
1204
+ const formatDate = (timestamp) => {
1205
+ const date = new Date(timestamp * 1e3);
1206
+ const month = String(date.getUTCMonth() + 1).padStart(2, "0");
1207
+ const day = String(date.getUTCDate()).padStart(2, "0");
1208
+ const year = date.getUTCFullYear();
1209
+ return `${month}/${day}/${year}`;
1210
+ };
1211
+ const startDate = formatDate(startTime);
1212
+ const endDate = endTime ? formatDate(endTime) : "Recurring";
1213
+ return `${startDate} - ${endDate}`;
1214
+ };
1215
+ return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 8, className: "oui-w-full", children: [
1216
+ isNoCampaign ? /* @__PURE__ */ jsxs(
1217
+ Flex,
1218
+ {
1219
+ direction: "column",
1220
+ gap: 6,
1221
+ itemAlign: "start",
1222
+ className: "oui-w-full",
1223
+ children: [
1224
+ /* @__PURE__ */ jsx(
1225
+ Flex,
1226
+ {
1227
+ direction: isMobile ? "column" : "row",
1228
+ gap: 4,
1229
+ itemAlign: isMobile ? "start" : "center",
1230
+ justify: "between",
1231
+ className: "oui-w-full",
1232
+ children: /* @__PURE__ */ jsx(
1233
+ Flex,
1234
+ {
1235
+ direction: isMobile ? "column" : "row",
1236
+ itemAlign: isMobile ? "start" : "center",
1237
+ className: isMobile ? "oui-w-full" : "",
1238
+ children: /* @__PURE__ */ jsx(
1239
+ Text,
1240
+ {
1241
+ className: cn(
1242
+ "oui-text-base-contrast",
1243
+ isMobile ? "oui-text-xl" : "oui-text-4xl",
1244
+ "oui-font-600 oui-tracking-[0.03em] oui-leading-tight"
1245
+ ),
1246
+ children: "No Active Campaigns"
1247
+ }
1248
+ )
1249
+ }
1250
+ )
1251
+ }
1252
+ ),
1253
+ /* @__PURE__ */ jsx(
1254
+ Text,
1255
+ {
1256
+ className: cn(
1257
+ "oui-text-[14px]",
1258
+ "oui-leading-[20px]",
1259
+ "oui-font-semibold",
1260
+ "oui-text-base-contrast-54"
1261
+ ),
1262
+ children: "There are currently no active point events. Please wait for the next update."
1263
+ }
1264
+ )
1265
+ ]
1266
+ }
1267
+ ) : /* @__PURE__ */ jsxs(
1268
+ Flex,
1269
+ {
1270
+ direction: "column",
1271
+ gap: 6,
1272
+ itemAlign: "start",
1273
+ className: "oui-w-full",
1274
+ children: [
1275
+ /* @__PURE__ */ jsxs(
1276
+ Flex,
1277
+ {
1278
+ direction: isMobile ? "column" : "row",
1279
+ gap: 4,
1280
+ itemAlign: isMobile ? "start" : "center",
1281
+ justify: "between",
1282
+ className: "oui-w-full",
1283
+ children: [
1284
+ /* @__PURE__ */ jsxs(
1285
+ Flex,
1286
+ {
1287
+ direction: isMobile ? "column" : "row",
1288
+ itemAlign: isMobile ? "start" : "center",
1289
+ className: isMobile ? "oui-w-full" : "",
1290
+ children: [
1291
+ /* @__PURE__ */ jsxs(
1292
+ Text,
1293
+ {
1294
+ className: cn(
1295
+ "oui-text-base-contrast",
1296
+ isMobile ? "oui-text-xl" : "oui-text-4xl",
1297
+ "oui-font-600 oui-tracking-[0.03em] oui-leading-tight"
1298
+ ),
1299
+ children: [
1300
+ "Stage ",
1301
+ currentStage?.epoch_period,
1302
+ " \xB7"
1303
+ ]
1304
+ }
1305
+ ),
1306
+ /* @__PURE__ */ jsxs(Flex, { gap: 3, itemAlign: "center", children: [
1307
+ /* @__PURE__ */ jsx(
1308
+ Text,
1309
+ {
1310
+ className: cn(
1311
+ isMobile ? "oui-text-xl" : "oui-text-4xl",
1312
+ "oui-text-primary",
1313
+ "oui-text-center",
1314
+ "oui-pl-2"
1315
+ ),
1316
+ children: currentStage?.stage_name
1317
+ }
1318
+ ),
1319
+ /* @__PURE__ */ jsx(
1320
+ "img",
1321
+ {
1322
+ src: "https://oss.woo.org/static/images/sdk/pt-hot.png",
1323
+ alt: "Hot",
1324
+ className: isMobile ? "oui-w-8 oui-h-8" : "oui-w-[48px] oui-h-[48px]"
1325
+ }
1326
+ )
1327
+ ] })
1328
+ ]
1329
+ }
1330
+ ),
1331
+ /* @__PURE__ */ jsxs(
1332
+ DropdownMenuRoot,
1333
+ {
1334
+ open: isStageDropdownOpen,
1335
+ onOpenChange: setIsStageDropdownOpen,
1336
+ children: [
1337
+ /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
1338
+ Flex,
1339
+ {
1340
+ gap: 2,
1341
+ itemAlign: "center",
1342
+ px: 3,
1343
+ py: 2,
1344
+ className: "oui-w-[230px] oui-bg-white/[.06] oui-border oui-border-white/[0.12] oui-rounded-md hover:oui-cursor-pointer hover:oui-opacity-80 oui-transition-opacity",
1345
+ children: [
1346
+ /* @__PURE__ */ jsx(Text, { className: "oui-flex-1 oui-text-[11px] oui-tracking-[0.03em] oui-whitespace-nowrap oui-text-white/[.36]", children: currentStage ? `Stage ${currentStage.epoch_period}: ${formatStageDate(currentStage.start_time, currentStage.end_time)}` : "" }),
1347
+ /* @__PURE__ */ jsx(
1348
+ ChevronDownIcon,
1349
+ {
1350
+ size: 12,
1351
+ className: cn(
1352
+ "oui-text-white/[.36]",
1353
+ "oui-transition-transform",
1354
+ isStageDropdownOpen && "oui-rotate-180"
1355
+ )
1356
+ }
1357
+ )
1358
+ ]
1359
+ }
1360
+ ) }),
1361
+ /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
1362
+ DropdownMenuContent,
1363
+ {
1364
+ onCloseAutoFocus: (e) => e.preventDefault(),
1365
+ onClick: (e) => e.stopPropagation(),
1366
+ sideOffset: 4,
1367
+ collisionPadding: { right: 16 },
1368
+ className: cn(
1369
+ "oui-bg-base-8 oui-w-[230px] oui-p-1 oui-rounded-lg",
1370
+ "oui-border oui-border-line-6",
1371
+ "oui-font-semibold",
1372
+ "oui-shadow-[0px_3px_6px_0px_rgba(0,0,0,0.2)]"
1373
+ ),
1374
+ children: /* @__PURE__ */ jsx(
1375
+ Flex,
1376
+ {
1377
+ direction: "column",
1378
+ itemAlign: "start",
1379
+ gap: 0,
1380
+ className: "oui-w-full",
1381
+ children: stages?.rows?.map((stage) => {
1382
+ const isSelected = currentStage?.stage_id === stage.stage_id;
1383
+ stage.status !== "active";
1384
+ const isActive = stage.status === "active";
1385
+ return /* @__PURE__ */ jsxs(
1386
+ Flex,
1387
+ {
1388
+ gap: 2,
1389
+ itemAlign: "center",
1390
+ px: 2,
1391
+ py: 2,
1392
+ r: "sm",
1393
+ onClick: () => {
1394
+ setCurrentStage(stage);
1395
+ setIsStageDropdownOpen(false);
1396
+ },
1397
+ className: cn(
1398
+ "oui-rounded oui-relative oui-w-full",
1399
+ "hover:oui-cursor-pointer hover:oui-opacity-80",
1400
+ isSelected ? "oui-bg-base-5" : "hover:oui-bg-base-5/50"
1401
+ ),
1402
+ children: [
1403
+ /* @__PURE__ */ jsx(
1404
+ Text,
1405
+ {
1406
+ className: cn(
1407
+ "oui-text-[11px] oui-tracking-[0.03em] oui-whitespace-nowrap",
1408
+ isSelected ? "oui-text-base-contrast-54 oui-font-semibold" : "oui-text-white/[.36]"
1409
+ ),
1410
+ children: `Stage ${stage.epoch_period}: ${formatStageDate(stage.start_time, stage.end_time)}`
1411
+ }
1412
+ ),
1413
+ isActive && /* @__PURE__ */ jsx(Box, { className: "oui-w-1 oui-h-1 oui-rounded-full oui-bg-primary oui-flex-shrink-0" })
1414
+ ]
1415
+ },
1416
+ stage.stage_id
1417
+ );
1418
+ })
1419
+ }
1420
+ )
1421
+ }
1422
+ ) })
1423
+ ]
1424
+ }
1425
+ )
1426
+ ]
1427
+ }
1428
+ ),
1429
+ /* @__PURE__ */ jsxs(
1430
+ Text,
1431
+ {
1432
+ className: cn(
1433
+ "oui-text-[14px]",
1434
+ "oui-leading-[20px]",
1435
+ "oui-font-semibold",
1436
+ "oui-text-base-contrast-54"
1437
+ ),
1438
+ children: [
1439
+ currentStage?.stage_description,
1440
+ /* @__PURE__ */ jsxs(
1441
+ "span",
1442
+ {
1443
+ className: "oui-text-primary hover:oui-underline oui-cursor-pointer",
1444
+ onClick: handleLearnMore,
1445
+ children: [
1446
+ " ",
1447
+ t("tradingPoints.learnMore")
1448
+ ]
1449
+ }
1450
+ )
1451
+ ]
1452
+ }
1453
+ )
1454
+ ]
1455
+ }
1456
+ ),
1457
+ /* @__PURE__ */ jsxs(
1458
+ Flex,
1459
+ {
1460
+ direction: isMobile ? "column" : "row",
1461
+ gap: 6,
1462
+ className: "oui-w-full",
1463
+ children: [
1464
+ /* @__PURE__ */ jsxs(
1465
+ Flex,
1466
+ {
1467
+ direction: isMobile ? "column" : "row",
1468
+ gap: 6,
1469
+ itemAlign: isMobile ? "stretch" : "center",
1470
+ p: 5,
1471
+ r: "2xl",
1472
+ style: { height: isMobile ? "" : 104 },
1473
+ className: cn(
1474
+ "oui-border oui-border-line",
1475
+ !isMobile && "oui-gap-12",
1476
+ isMobile ? "oui-w-full" : "oui-flex-1"
1477
+ ),
1478
+ children: [
1479
+ /* @__PURE__ */ jsxs(
1480
+ Flex,
1481
+ {
1482
+ direction: "column",
1483
+ gap: 2,
1484
+ className: "oui-flex-1",
1485
+ itemAlign: "start",
1486
+ children: [
1487
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em]", children: t("tradingPoints.stagePoints") }),
1488
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-leading-9", children: allTimePointsDisplay.currentPointsDisplay })
1489
+ ]
1490
+ }
1491
+ ),
1492
+ !isMobile && /* @__PURE__ */ jsx(
1493
+ Box,
1494
+ {
1495
+ className: cn("oui-w-[1px]", "oui-h-full", "oui-bg-white/[0.08]")
1496
+ }
1497
+ ),
1498
+ isMobile && /* @__PURE__ */ jsx(Divider, { intensity: 8 }),
1499
+ /* @__PURE__ */ jsxs(
1500
+ Flex,
1501
+ {
1502
+ direction: "column",
1503
+ gap: 2,
1504
+ className: "oui-flex-1",
1505
+ itemAlign: "start",
1506
+ children: [
1507
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em]", children: t("tradingPoints.stageRanking") }),
1508
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-leading-9", children: allTimePointsDisplay.rankingDisplay })
1509
+ ]
1510
+ }
1511
+ )
1512
+ ]
1513
+ }
1514
+ ),
1515
+ /* @__PURE__ */ jsx(
1516
+ Flex,
1517
+ {
1518
+ p: 5,
1519
+ r: "2xl",
1520
+ style: { height: 104 },
1521
+ className: cn(
1522
+ "oui-border oui-border-line",
1523
+ isMobile ? "oui-w-full" : "oui-flex-1",
1524
+ "oui-h-[128px]"
1525
+ ),
1526
+ children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, className: "oui-w-full", children: [
1527
+ /* @__PURE__ */ jsxs(Flex, { gap: 2, itemAlign: "center", className: "oui-w-full", children: [
1528
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em]", children: t("tradingPoints.referralCode") }),
1529
+ /* @__PURE__ */ jsxs(
1530
+ Flex,
1531
+ {
1532
+ gap: 2,
1533
+ itemAlign: "center",
1534
+ justify: "end",
1535
+ className: "oui-flex-1",
1536
+ children: [
1537
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast oui-text-sm oui-tracking-[0.03em]", children: refCode }),
1538
+ /* @__PURE__ */ jsx(
1539
+ CopyIcon,
1540
+ {
1541
+ size: 16,
1542
+ className: "oui-text-white hover:oui-cursor-pointer hover:oui-opacity-80 oui-transition-opacity",
1543
+ onClick: onCopyCode
1544
+ }
1545
+ )
1546
+ ]
1547
+ }
1548
+ )
1549
+ ] }),
1550
+ /* @__PURE__ */ jsxs(Flex, { gap: 2, itemAlign: "start", className: "oui-w-full", children: [
1551
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-flex-shrink-0", children: t("tradingPoints.referralLink") }),
1552
+ /* @__PURE__ */ jsxs(
1553
+ Flex,
1554
+ {
1555
+ gap: 2,
1556
+ itemAlign: "start",
1557
+ className: "oui-flex-1 oui-min-w-0",
1558
+ children: [
1559
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast oui-text-sm oui-tracking-[0.03em] oui-flex-1 oui-truncate oui-text-right", children: refLink }),
1560
+ /* @__PURE__ */ jsx(
1561
+ CopyIcon,
1562
+ {
1563
+ size: 16,
1564
+ className: "oui-text-white hover:oui-cursor-pointer hover:oui-opacity-80 oui-transition-opacity",
1565
+ onClick: onCopyLink
1566
+ }
1567
+ )
1568
+ ]
1569
+ }
1570
+ )
1571
+ ] })
1572
+ ] })
1573
+ }
1574
+ )
1575
+ ]
1576
+ }
1577
+ )
1578
+ ] });
1579
+ };
1580
+ var User = ({ onRouteChange }) => {
1581
+ const { t } = useTranslation();
1582
+ const { isMobile } = useScreen();
1583
+ const {
1584
+ refLink,
1585
+ selectedTimeRange,
1586
+ setSelectedTimeRange,
1587
+ pointsDisplay,
1588
+ userStatistics,
1589
+ isCurrentStageCompleted
1590
+ } = usePoints();
1591
+ const timeRangeOptions = [
1592
+ { value: "this_week", label: t("tradingPoints.thisWeek") },
1593
+ { value: "last_week", label: t("tradingPoints.lastWeek") },
1594
+ { value: "all_time", label: t("tradingPoints.all") }
1595
+ ];
1596
+ if (isCurrentStageCompleted) {
1597
+ if (selectedTimeRange !== "all_time") {
1598
+ setSelectedTimeRange("all_time");
1599
+ }
1600
+ timeRangeOptions.splice(0, 2);
1601
+ }
1602
+ const timeRangeButtonClass = cn(
1603
+ "oui-inline-flex oui-items-center oui-justify-center oui-whitespace-nowrap",
1604
+ "oui-box-content oui-rounded oui-px-3 oui-h-7",
1605
+ "oui-font-medium oui-text-2xs oui-text-base-contrast-36",
1606
+ "hover:oui-text-base-contrast-54 hover:oui-bg-base-5",
1607
+ "oui-bg-base-7",
1608
+ "data-[state=active]:oui-bg-base-5 data-[state=active]:oui-text-base-contrast",
1609
+ "oui-transition-all focus-visible:oui-outline-none",
1610
+ "focus-visible:oui-ring-2 focus-visible:oui-ring-ring focus-visible:oui-ring-offset-2",
1611
+ "disabled:oui-pointer-events-none disabled:oui-opacity-50"
1612
+ );
1613
+ const currentPointsDisplay = pointsDisplay.currentPointsDisplay;
1614
+ const rankingDisplay = pointsDisplay.rankingDisplay;
1615
+ const tradingPointsDisplay = pointsDisplay.tradingPointsDisplay;
1616
+ const pnlPointsDisplay = pointsDisplay.pnlPointsDisplay;
1617
+ const referralPointsDisplay = pointsDisplay.referralPointsDisplay;
1618
+ const formatReferralBoost = (value) => {
1619
+ return value !== null && value !== void 0 ? value : "--";
1620
+ };
1621
+ const goToPerp = useCallback(() => {
1622
+ onRouteChange({
1623
+ href: "/perp",
1624
+ name: "Perp"
1625
+ });
1626
+ }, [onRouteChange]);
1627
+ const onCopy = async () => {
1628
+ try {
1629
+ await navigator.clipboard.writeText(refLink);
1630
+ toast.success(t("common.copy.copied"));
1631
+ } catch (error) {
1632
+ }
1633
+ };
1634
+ const userStats = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
1635
+ Flex,
1636
+ {
1637
+ direction: isMobile ? "column" : "row",
1638
+ gap: 4,
1639
+ itemAlign: "stretch",
1640
+ className: "oui-w-full",
1641
+ children: [
1642
+ /* @__PURE__ */ jsxs(
1643
+ Flex,
1644
+ {
1645
+ direction: "column",
1646
+ gap: 2,
1647
+ className: isMobile ? "oui-w-full" : "oui-w-[200px]",
1648
+ children: [
1649
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, p: 4, r: "2xl", children: [
1650
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-decoration-dotted oui-text-center oui-w-full", children: t("tradingPoints.currentPoints") }),
1651
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-transparent oui-bg-clip-text oui-gradient-brand oui-text-3xl oui-tracking-[0.03em] oui-text-center oui-w-full oui-h-10 oui-leading-10", children: currentPointsDisplay })
1652
+ ] }),
1653
+ /* @__PURE__ */ jsx(Divider, { className: "oui-w-full", intensity: 8 }),
1654
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, p: 4, r: "2xl", children: [
1655
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-text-center oui-w-full", children: t("tradingPoints.ranking") }),
1656
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-transparent oui-bg-clip-text oui-gradient-brand oui-text-3xl oui-tracking-[0.03em] oui-text-center oui-w-full oui-h-10 oui-leading-10", children: rankingDisplay })
1657
+ ] })
1658
+ ]
1659
+ }
1660
+ ),
1661
+ !isMobile && /* @__PURE__ */ jsx(
1662
+ Divider,
1663
+ {
1664
+ className: "oui-self-stretch",
1665
+ intensity: 8,
1666
+ direction: "vertical"
1667
+ }
1668
+ ),
1669
+ isMobile && /* @__PURE__ */ jsx(Divider, { intensity: 8 }),
1670
+ /* @__PURE__ */ jsx(
1671
+ Flex,
1672
+ {
1673
+ direction: "column",
1674
+ className: isMobile ? "oui-w-full" : "oui-flex-1",
1675
+ children: /* @__PURE__ */ jsxs(
1676
+ Flex,
1677
+ {
1678
+ direction: isMobile ? "column" : "row",
1679
+ gap: 6,
1680
+ className: "oui-w-full oui-h-full",
1681
+ children: [
1682
+ /* @__PURE__ */ jsxs(
1683
+ Flex,
1684
+ {
1685
+ direction: "column",
1686
+ gap: 3,
1687
+ itemAlign: "center",
1688
+ justify: "center",
1689
+ p: 4,
1690
+ r: "xl",
1691
+ intensity: 800,
1692
+ className: cn(
1693
+ "oui-backdrop-blur-sm",
1694
+ isMobile ? "oui-w-full" : "oui-flex-1 oui-h-full"
1695
+ ),
1696
+ children: [
1697
+ /* @__PURE__ */ jsx(
1698
+ Tooltip,
1699
+ {
1700
+ content: t("tradingPoints.tradePointsTooltip"),
1701
+ className: "oui-max-w-[300px] oui-bg-primary-darken",
1702
+ children: /* @__PURE__ */ jsx(
1703
+ Text,
1704
+ {
1705
+ className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-text-center oui-w-full\n ",
1706
+ style: {
1707
+ textDecorationLine: "underline",
1708
+ textDecorationStyle: "dotted",
1709
+ textUnderlineOffset: "30%"
1710
+ },
1711
+ children: t("tradingPoints.tradePoints")
1712
+ }
1713
+ )
1714
+ }
1715
+ ),
1716
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-text-center oui-w-full oui-leading-9", children: tradingPointsDisplay }),
1717
+ /* @__PURE__ */ jsx(Button, { size: "md", onClick: goToPerp, children: /* @__PURE__ */ jsx(Text, { children: t("tradingPoints.tradeNow") }) })
1718
+ ]
1719
+ }
1720
+ ),
1721
+ /* @__PURE__ */ jsxs(
1722
+ Flex,
1723
+ {
1724
+ direction: "column",
1725
+ gap: 3,
1726
+ itemAlign: "center",
1727
+ justify: "center",
1728
+ p: 4,
1729
+ r: "xl",
1730
+ intensity: 800,
1731
+ className: cn(
1732
+ "oui-backdrop-blur-sm",
1733
+ isMobile ? "oui-w-full" : "oui-flex-1 oui-h-full"
1734
+ ),
1735
+ children: [
1736
+ /* @__PURE__ */ jsx(
1737
+ Tooltip,
1738
+ {
1739
+ content: t("tradingPoints.pnlPointsTooltip"),
1740
+ className: "oui-max-w-[300px] oui-bg-primary-darken",
1741
+ children: /* @__PURE__ */ jsx(
1742
+ Text,
1743
+ {
1744
+ className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-text-center oui-w-full",
1745
+ style: {
1746
+ textDecorationLine: "underline",
1747
+ textDecorationStyle: "dotted",
1748
+ textUnderlineOffset: "30%"
1749
+ },
1750
+ children: t("tradingPoints.pnlPoints")
1751
+ }
1752
+ )
1753
+ }
1754
+ ),
1755
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-text-center oui-w-full oui-leading-9", children: pnlPointsDisplay }),
1756
+ /* @__PURE__ */ jsx(Button, { size: "md", onClick: goToPerp, children: /* @__PURE__ */ jsx(Text, { children: t("tradingPoints.tradeNow") }) })
1757
+ ]
1758
+ }
1759
+ ),
1760
+ /* @__PURE__ */ jsxs(
1761
+ Flex,
1762
+ {
1763
+ direction: "column",
1764
+ gap: 3,
1765
+ itemAlign: "center",
1766
+ justify: "center",
1767
+ p: 4,
1768
+ r: "xl",
1769
+ intensity: 800,
1770
+ className: cn(
1771
+ "oui-backdrop-blur-sm",
1772
+ isMobile ? "oui-w-full" : "oui-flex-1 oui-h-full"
1773
+ ),
1774
+ children: [
1775
+ /* @__PURE__ */ jsx(
1776
+ Tooltip,
1777
+ {
1778
+ content: t("tradingPoints.referralPointsTooltip", {
1779
+ l1: formatReferralBoost(userStatistics?.l1_referral_boost),
1780
+ l2: formatReferralBoost(userStatistics?.l2_referral_boost)
1781
+ }),
1782
+ className: "oui-max-w-[300px] oui-bg-primary-darken",
1783
+ children: /* @__PURE__ */ jsx(
1784
+ Text,
1785
+ {
1786
+ className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-text-center oui-w-full",
1787
+ style: {
1788
+ textDecorationLine: "underline",
1789
+ textDecorationStyle: "dotted",
1790
+ textUnderlineOffset: "30%"
1791
+ },
1792
+ children: t("tradingPoints.referralPoints")
1793
+ }
1794
+ )
1795
+ }
1796
+ ),
1797
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-text-center oui-w-full oui-leading-9", children: referralPointsDisplay }),
1798
+ /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "md", onClick: onCopy, children: /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-54", children: t("tradingPoints.copyLink") }) })
1799
+ ]
1800
+ }
1801
+ )
1802
+ ]
1803
+ }
1804
+ )
1805
+ }
1806
+ )
1807
+ ]
1808
+ }
1809
+ ) });
1810
+ return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 6, className: "oui-w-full", children: [
1811
+ /* @__PURE__ */ jsxs(
1812
+ Flex,
1813
+ {
1814
+ direction: isMobile ? "column" : "row",
1815
+ gap: isMobile ? 4 : 0,
1816
+ itemAlign: isMobile ? "start" : "center",
1817
+ justify: "between",
1818
+ className: "oui-w-full",
1819
+ children: [
1820
+ /* @__PURE__ */ jsx(
1821
+ Text,
1822
+ {
1823
+ className: cn(
1824
+ "oui-text-base-contrast",
1825
+ isMobile ? "oui-text-2xl" : "oui-text-3xl",
1826
+ "oui-tracking-[0.03em]"
1827
+ ),
1828
+ children: t("tradingPoints.myPoints")
1829
+ }
1830
+ ),
1831
+ /* @__PURE__ */ jsx(Flex, { gap: 2, itemAlign: "center", children: timeRangeOptions.map((option) => /* @__PURE__ */ jsx(
1832
+ "button",
1833
+ {
1834
+ onClick: () => setSelectedTimeRange(option.value),
1835
+ "data-state": selectedTimeRange === option.value ? "active" : "inactive",
1836
+ className: timeRangeButtonClass,
1837
+ children: option.label
1838
+ },
1839
+ option.value
1840
+ )) })
1841
+ ]
1842
+ }
1843
+ ),
1844
+ /* @__PURE__ */ jsx(Box, { p: 6, r: "2xl", className: "oui-border oui-border-line oui-w-full", children: userStats })
1845
+ ] });
1846
+ };
1847
+ var Main = ({ onRouteChange }) => {
1848
+ const { isMobile } = useScreen();
1849
+ const { isNoCampaign, isCurrentStagePending } = usePoints();
1850
+ return /* @__PURE__ */ jsxs(
1851
+ Flex,
1852
+ {
1853
+ direction: "column",
1854
+ gap: isMobile ? 6 : 10,
1855
+ className: cn(
1856
+ "oui-w-full",
1857
+ isMobile ? "oui-px-5 oui-py-6" : "oui-max-w-[1200px] oui-mx-auto oui-py-[64px] oui-py-12"
1858
+ ),
1859
+ children: [
1860
+ /* @__PURE__ */ jsx(Countdown, {}),
1861
+ /* @__PURE__ */ jsx(Intro, {}),
1862
+ !isNoCampaign && /* @__PURE__ */ jsxs(Fragment, { children: [
1863
+ /* @__PURE__ */ jsx(User, { onRouteChange }),
1864
+ !isCurrentStagePending && /* @__PURE__ */ jsx(GeneralLeaderboardWidget, {})
1865
+ ] }),
1866
+ /* @__PURE__ */ jsx(FAQSection, { className: "oui-w-full" })
1867
+ ]
1868
+ }
1869
+ );
1870
+ };
1871
+ var main_default = Main;
1872
+ var PointSystemPage = (props) => {
1873
+ return /* @__PURE__ */ jsx(PointsProvider, { children: /* @__PURE__ */ jsx(main_default, { onRouteChange: props.onRouteChange }) });
1874
+ };
1875
+
1876
+ export { PointSystemPage };
1877
+ //# sourceMappingURL=out.js.map
1878
+ //# sourceMappingURL=index.mjs.map