@orderly.network/trading-points 1.0.0

package/dist/index.js

@@ -0,0 +1,1950 @@
+'use strict';
+
+var chunkQKQ47GQZ_js = require('./chunk-QKQ47GQZ.js');
+require('./styles.css');
+var react = require('react');
+var hooks = require('@orderly.network/hooks');
+var utils = require('@orderly.network/utils');
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@orderly.network/ui');
+var dateFns = require('date-fns');
+var i18n = require('@orderly.network/i18n');
+
+function usePointsData() {
+  const brokerId = hooks.useConfig("brokerId");
+  const [currentStage, setCurrentStage] = react.useState(
+    void 0
+  );
+  const [selectedTimeRange, setSelectedTimeRange] = react.useState("this_week");
+  const { data: stages, isLoading: isStagesLoading } = hooks.useQuery(
+    brokerId ? `/v1/public/points/stages?broker_id=${brokerId}` : null,
+    {
+      formatter: (res) => {
+        if (res?.rows) {
+          res.rows.sort(
+            (a, b) => b.epoch_period - a.epoch_period
+          );
+        }
+        return res;
+      },
+      revalidateOnFocus: false
+    }
+  );
+  react.useEffect(() => {
+    if (!stages?.rows || stages.rows.length === 0 || currentStage !== void 0) {
+      return;
+    }
+    let selectedStage = stages.rows[0];
+    const activeStage = stages.rows.find((stage) => stage.status === "active");
+    if (activeStage) {
+      selectedStage = activeStage;
+    } else {
+      const pendingStage = [...stages.rows].reverse().find((stage) => stage.status === "pending");
+      if (pendingStage) {
+        selectedStage = pendingStage;
+      } else {
+        const completedStage = stages.rows.find(
+          (stage) => stage.status === "completed"
+        );
+        if (completedStage) {
+          selectedStage = completedStage;
+        }
+      }
+    }
+    setCurrentStage(selectedStage);
+  }, [stages, currentStage]);
+  const { data: userStatistics, isLoading: isUserStatisticsLoading } = hooks.usePrivateQuery(
+    currentStage !== void 0 ? `/v1/client/points/user_statistics?stage=${currentStage.stage_id}` : null,
+    {
+      formatter: (res) => res,
+      revalidateOnFocus: false
+    }
+  );
+  const { data: referralInfo } = hooks.usePrivateQuery(
+    "/v1/referral/info",
+    {
+      revalidateOnFocus: true,
+      errorRetryCount: 3,
+      ...hooks.noCacheConfig
+    }
+  );
+  const firstCode = react.useMemo(() => {
+    const codes = referralInfo?.referrer_info?.referral_codes;
+    if (!codes || codes.length === 0) {
+      return void 0;
+    }
+    return codes[0];
+  }, [referralInfo?.referrer_info?.referral_codes]);
+  const refCode = react.useMemo(() => {
+    return firstCode?.code || "--";
+  }, [firstCode]);
+  const refLink = react.useMemo(() => {
+    if (!firstCode || !firstCode.code) {
+      return "--";
+    }
+    const referralLinkUrl = window.location.origin;
+    return `${referralLinkUrl}?ref=${firstCode.code}`;
+  }, [firstCode]);
+  const getRankingUrl = react.useCallback(
+    (args) => {
+      if (!currentStage || !brokerId) return null;
+      const searchParams = new URLSearchParams();
+      searchParams.set("page", args.page.toString());
+      searchParams.set("size", args.pageSize.toString());
+      searchParams.set("stage", String(currentStage.stage_id));
+      searchParams.set("period", args.timeRange || selectedTimeRange);
+      searchParams.set("broker_id", String(brokerId));
+      return `/v1/public/points/rankings?${searchParams.toString()}`;
+    },
+    [brokerId, currentStage, selectedTimeRange]
+  );
+  const isLoading = isStagesLoading || isUserStatisticsLoading;
+  const isNoCampaign = !isStagesLoading && (!stages?.rows || stages.rows.length === 0);
+  const formatPoints = (value) => {
+    if (value === void 0 || value === null) {
+      return "--";
+    }
+    return utils.numberToHumanStyle(value, 2);
+  };
+  const calculateTotalPoints = react.useCallback(
+    (breakdown) => {
+      if (!breakdown) return void 0;
+      return breakdown.trading_point + breakdown.pnl_point + breakdown.referral_point;
+    },
+    []
+  );
+  const pointsDisplay = react.useMemo(() => {
+    if (!userStatistics) {
+      return {
+        currentPointsDisplay: "--",
+        tradingPointsDisplay: "--",
+        pnlPointsDisplay: "--",
+        referralPointsDisplay: "--",
+        rankingDisplay: "--"
+      };
+    }
+    const breakdownThisWeek = userStatistics.weekly_breakdown?.this_week;
+    const breakdownLastWeek = userStatistics.weekly_breakdown?.last_week;
+    let selectedBreakdown;
+    let ranking;
+    if (selectedTimeRange === "all_time") {
+      selectedBreakdown = {
+        trading_point: userStatistics.trading_point,
+        pnl_point: userStatistics.pnl_point,
+        referral_point: userStatistics.referral_point
+      };
+      ranking = userStatistics.stage_rank;
+    } else if (selectedTimeRange === "this_week") {
+      selectedBreakdown = breakdownThisWeek;
+      ranking = breakdownThisWeek?.rank;
+    } else {
+      selectedBreakdown = breakdownLastWeek;
+      ranking = breakdownLastWeek?.rank;
+    }
+    const currentPoints = calculateTotalPoints(selectedBreakdown) ?? 0;
+    return {
+      currentPointsDisplay: formatPoints(currentPoints),
+      tradingPointsDisplay: formatPoints(selectedBreakdown?.trading_point),
+      pnlPointsDisplay: formatPoints(selectedBreakdown?.pnl_point),
+      referralPointsDisplay: formatPoints(selectedBreakdown?.referral_point),
+      rankingDisplay: ranking === null || ranking === void 0 ? "--" : utils.commify(ranking)
+    };
+  }, [userStatistics, selectedTimeRange, calculateTotalPoints]);
+  const allTimePointsDisplay = react.useMemo(() => {
+    if (!userStatistics) {
+      return {
+        currentPointsDisplay: "--",
+        tradingPointsDisplay: "--",
+        pnlPointsDisplay: "--",
+        referralPointsDisplay: "--",
+        rankingDisplay: "--"
+      };
+    }
+    const currentPoints = calculateTotalPoints({
+      trading_point: userStatistics.trading_point,
+      pnl_point: userStatistics.pnl_point,
+      referral_point: userStatistics.referral_point
+    }) ?? 0;
+    return {
+      currentPointsDisplay: formatPoints(currentPoints),
+      tradingPointsDisplay: formatPoints(userStatistics.trading_point),
+      pnlPointsDisplay: formatPoints(userStatistics.pnl_point),
+      referralPointsDisplay: formatPoints(userStatistics.referral_point),
+      rankingDisplay: userStatistics.stage_rank === null || userStatistics.stage_rank === void 0 ? "--" : utils.commify(userStatistics.stage_rank)
+    };
+  }, [userStatistics, calculateTotalPoints]);
+  return {
+    stages,
+    userStatistics,
+    currentStage,
+    setCurrentStage,
+    isLoading,
+    isStagesLoading,
+    isUserStatisticsLoading,
+    isNoCampaign,
+    refLink,
+    refCode,
+    selectedTimeRange,
+    setSelectedTimeRange,
+    getRankingUrl,
+    brokerId,
+    pointsDisplay,
+    allTimePointsDisplay,
+    isCurrentStagePending: currentStage?.status === "pending",
+    isCurrentStageCompleted: currentStage?.status === "completed"
+  };
+}
+var PointsContext = react.createContext(void 0);
+var PointsProvider = ({ children }) => {
+  const value = usePointsData();
+  return /* @__PURE__ */ jsxRuntime.jsx(PointsContext.Provider, { value, children });
+};
+function usePoints() {
+  const context = react.useContext(PointsContext);
+  if (context === void 0) {
+    throw new Error("usePoints must be used within a PointsProvider");
+  }
+  return context;
+}
+var getDateRange = (offsetDay) => {
+  return {
+    from: dateFns.subDays(/* @__PURE__ */ new Date(), offsetDay - 1),
+    to: /* @__PURE__ */ new Date()
+  };
+};
+var formatDateRange = (date) => {
+  return dateFns.format(date, "yyyy-MM-dd");
+};
+function splitCampaignByWeeks(campaignDateRange) {
+  const startDate = typeof campaignDateRange.start_time === "string" ? new Date(campaignDateRange.start_time) : campaignDateRange.start_time;
+  const endDate = typeof campaignDateRange.end_time === "string" ? new Date(campaignDateRange.end_time) : campaignDateRange.end_time;
+  const result = [];
+  let currentWeekStart = new Date(startDate);
+  let weekNumber = 1;
+  while (dateFns.isBefore(currentWeekStart, endDate)) {
+    const currentWeekEnd = dateFns.addDays(currentWeekStart, 6);
+    const actualWeekEnd = dateFns.isAfter(currentWeekEnd, endDate) ? new Date(endDate.getTime() - 1) : currentWeekEnd;
+    result.push({
+      from: new Date(currentWeekStart),
+      to: actualWeekEnd,
+      label: `Week ${weekNumber}`
+    });
+    if (!dateFns.isBefore(actualWeekEnd, endDate)) {
+      break;
+    }
+    if (weekNumber === 1) {
+      const nextDayStart = dateFns.addDays(currentWeekEnd, 1);
+      const year = nextDayStart.getUTCFullYear();
+      const month = nextDayStart.getUTCMonth();
+      const date = nextDayStart.getUTCDate();
+      currentWeekStart = new Date(Date.UTC(year, month, date, 0, 0, 0, 0));
+    } else {
+      const nextDayStart = dateFns.addDays(currentWeekEnd, 1);
+      const year = nextDayStart.getUTCFullYear();
+      const month = nextDayStart.getUTCMonth();
+      const date = nextDayStart.getUTCDate();
+      currentWeekStart = new Date(Date.UTC(year, month, date, 0, 0, 0, 0));
+    }
+    weekNumber++;
+    if (weekNumber > 100) {
+      break;
+    }
+  }
+  return result;
+}
+function getCurrentWeeklyRange(weeklyRanges, targetDate = /* @__PURE__ */ new Date()) {
+  const weeklyOnlyRanges = weeklyRanges.filter(
+    (range) => range.label !== "All time"
+  );
+  for (const range of weeklyOnlyRanges) {
+    const rangeFrom = new Date(range.from);
+    const rangeTo = new Date(range.to);
+    if (dateFns.isWithinInterval(targetDate, { start: rangeFrom, end: rangeTo })) {
+      return range;
+    }
+  }
+  const targetTime = targetDate.getTime();
+  let closestFutureRange = null;
+  let smallestGap = Infinity;
+  for (const range of weeklyOnlyRanges) {
+    const rangeFrom = new Date(range.from);
+    const rangeFromTime = rangeFrom.getTime();
+    if (rangeFromTime > targetTime) {
+      const gap = rangeFromTime - targetTime;
+      if (gap < smallestGap) {
+        smallestGap = gap;
+        closestFutureRange = range;
+      }
+    }
+  }
+  const ONE_DAY_MS = 24 * 60 * 60 * 1e3;
+  if (closestFutureRange && smallestGap <= ONE_DAY_MS) {
+    return closestFutureRange;
+  }
+  return null;
+}
+function getCurrentOrAllTimeRange(weeklyRanges, targetDate = /* @__PURE__ */ new Date()) {
+  const currentWeekly = getCurrentWeeklyRange(weeklyRanges, targetDate);
+  if (currentWeekly) {
+    return currentWeekly;
+  }
+  return weeklyRanges.find((range) => range.label === "All time") || weeklyRanges[weeklyRanges.length - 1];
+}
+
+// src/components/leaderboard/generalLeaderboard/generalLeaderboard.script.ts
+function useGeneralLeaderboardScript(options) {
+  const { campaignDateRange } = options || {};
+  const weeklyRanges = react.useMemo(() => {
+    if (!campaignDateRange) return [];
+    return splitCampaignByWeeks(campaignDateRange);
+  }, [campaignDateRange]);
+  const currentOrAllTimeRange = react.useMemo(() => {
+    return getCurrentOrAllTimeRange(weeklyRanges);
+  }, [weeklyRanges]);
+  const [activeTab, setActiveTab] = react.useState(
+    "volume" /* Volume */
+  );
+  const filterState = useFilter({ defaultRange: currentOrAllTimeRange });
+  const searchState = useSearch();
+  const useCampaignDateRange = react.useMemo(() => {
+    return !!campaignDateRange;
+  }, [campaignDateRange]);
+  return {
+    ...filterState,
+    ...searchState,
+    activeTab,
+    onTabChange: setActiveTab,
+    useCampaignDateRange,
+    weeklyRanges,
+    currentOrAllTimeRange
+  };
+}
+function useFilter({ defaultRange }) {
+  const [filterDay, setFilterDay] = react.useState(90);
+  const [dateRange, setDateRange] = react.useState(getDateRange(90));
+  const updateFilterDay = (day) => {
+    setFilterDay(day);
+    setDateRange(getDateRange(day));
+  };
+  react.useEffect(() => {
+    setDateRange(defaultRange ?? getDateRange(90));
+  }, [defaultRange]);
+  const onFilter = (filter) => {
+    if (filter.name === "dateRange") {
+      const newDateRange = filter.value;
+      setDateRange(newDateRange);
+      if (newDateRange.from && newDateRange.to) {
+        const offsetDay = Math.abs(dateFns.differenceInDays(newDateRange.from, newDateRange.to)) + 1;
+        const dateRange2 = getDateRange(offsetDay);
+        if (formatDateRange(dateRange2.from) === formatDateRange(newDateRange.from) && formatDateRange(dateRange2.to) === formatDateRange(newDateRange.to)) {
+          setFilterDay(offsetDay);
+        } else {
+          setFilterDay(null);
+        }
+      }
+    }
+  };
+  const filterItems = react.useMemo(() => {
+    const dateRangeFilter = {
+      type: "range",
+      name: "dateRange",
+      value: dateRange,
+      max: 90
+    };
+    return [dateRangeFilter];
+  }, [dateRange]);
+  return {
+    filterItems,
+    onFilter,
+    dateRange,
+    filterDay,
+    updateFilterDay,
+    setDateRange
+  };
+}
+function useSearch() {
+  const [searchValue, setSearchValue] = react.useState("");
+  const onSearchValueChange = react.useCallback((value) => {
+    setSearchValue(value);
+  }, []);
+  const clearSearchValue = react.useCallback(() => {
+    setSearchValue("");
+  }, []);
+  return {
+    searchValue,
+    onSearchValueChange,
+    clearSearchValue
+  };
+}
+
+// src/components/ranking/shared/util.ts
+function isSameAddress(address1, address2) {
+  return address1.toLowerCase() === address2.toLowerCase();
+}
+function getCurrentAddressRowKey(address) {
+  return `current-address-${address?.toLowerCase()}`;
+}
+var useRankingColumns = (fields, address, enableSort, type) => {
+  const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  return react.useMemo(() => {
+    const columns = [
+      {
+        title: t("tradingLeaderboard.rank"),
+        dataIndex: "rank",
+        width: 50,
+        render: (value, record) => {
+          const isYou = record.key === getCurrentAddressRowKey(address);
+          let rankIcon;
+          let badgeImg = null;
+          if (!isYou) {
+            if (value === 1) {
+              rankIcon = /* @__PURE__ */ jsxRuntime.jsx(FirstRankIcon, {});
+              badgeImg = "https://oss.orderly.network/static/sdk/leaderboard/first_badge.png";
+            } else if (value === 2) {
+              rankIcon = /* @__PURE__ */ jsxRuntime.jsx(SecondRankIcon, {});
+              badgeImg = "https://oss.orderly.network/static/sdk/leaderboard/second_badge.png";
+            } else if (value === 3) {
+              rankIcon = /* @__PURE__ */ jsxRuntime.jsx(ThirdRankIcon, {});
+              badgeImg = "https://oss.orderly.network/static/sdk/leaderboard/third_badge.png";
+            }
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            badgeImg && /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: badgeImg,
+                alt: `${value}th badge`,
+                className: ui.cn(
+                  "oui-z-0 oui-h-[38px] oui-opacity-30 md:oui-h-[46px]",
+                  "oui-absolute oui-left-0 oui-top-0",
+                  "oui-mix-blend-luminosity",
+                  // force create a separate layer in order to fix mix-blend-luminosity not working on ios
+                  "oui-transform-gpu"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-relative", children: rankIcon || /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: 20, pl: 2, className: "oui-text-center", children: value }) })
+          ] });
+        }
+      },
+      {
+        title: t("common.address"),
+        dataIndex: "address",
+        render: (value, record) => {
+          const isYou = record.key === getCurrentAddressRowKey(address);
+          if (isMobile && isYou) {
+            return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "You" });
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              className: "oui-flex oui-items-start oui-gap-1",
+              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${record.broker_id}`,
+              target: "_blank",
+              rel: "noreferrer",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.formatted,
+                  {
+                    rule: "address",
+                    onCopy: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      navigator.clipboard.writeText(value);
+                      ui.toast.success(t("common.copy.copied"));
+                    },
+                    className: "oui-cursor-pointer",
+                    children: value
+                  },
+                  record.rank
+                ),
+                isYou && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: " (You)" })
+              ]
+            }
+          ) });
+        },
+        width: 90
+      },
+      {
+        title: "Points",
+        dataIndex: "points",
+        align: isMobile ? "right" : "left",
+        render: (value) => {
+          if (value === void 0 || value === null || value === "") {
+            return "-";
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: utils.commify(value, 2) });
+        }
+      }
+    ];
+    return columns.filter(
+      (column) => fields?.includes(column.dataIndex)
+    );
+  }, [t, isMobile, address, fields, enableSort, type]);
+};
+var FirstRankIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "25",
+      height: "25",
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            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",
+            fill: "url(#paint0_linear_21940_39199)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "linearGradient",
+          {
+            id: "paint0_linear_21940_39199",
+            x1: "6.18073",
+            y1: "6",
+            x2: "20.1338",
+            y2: "18.1659",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#8C421D" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.325272", stopColor: "#FBE67B" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.535488", stopColor: "#FCFBE7" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.769917", stopColor: "#F7D14E" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#D4A041" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+var SecondRankIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "25",
+      height: "25",
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            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",
+            fill: "url(#paint0_linear_21940_39214)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "linearGradient",
+          {
+            id: "paint0_linear_21940_39214",
+            x1: "6.18073",
+            y1: "6",
+            x2: "20.1338",
+            y2: "18.1659",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#7F7F7F" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.325272", stopColor: "#D9D9D9" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.535488", stopColor: "#F7F6F4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.769917", stopColor: "#D9D9D9" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#7F7F7F" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+var ThirdRankIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "29",
+      height: "25",
+      viewBox: "0 0 29 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            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",
+            fill: "url(#paint0_linear_21940_39224)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "linearGradient",
+          {
+            id: "paint0_linear_21940_39224",
+            x1: "8.61159",
+            y1: "5.33333",
+            x2: "22.7368",
+            y2: "20.4383",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#B6947E" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.2", stopColor: "#8F6959" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.475", stopColor: "#F8DAC8" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.67", stopColor: "#AC836E" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.83", stopColor: "#B6947E" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#F8DCCB" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+var Ranking = (props) => {
+  const column = useRankingColumns(
+    props.fields,
+    props.address,
+    false,
+    props.type
+  );
+  const { isMobile } = ui.useScreen();
+  const onRow = react.useCallback(
+    (record, index) => {
+      const isYou = record.key === getCurrentAddressRowKey(props.address);
+      const isFirst = record.rank === 1;
+      const isSecond = record.rank === 2;
+      const isThird = record.rank === 3;
+      const showBg = isFirst || isSecond || isThird;
+      return {
+        className: ui.cn(
+          "oui-h-[40px] md:oui-h-[48px]",
+          // use oui-relative to let the background image position based on row
+          "oui-relative",
+          isYou ? (
+            // add 4px extra height to make row has 2px space
+            "oui-h-[44px] md:oui-h-[52px]"
+          ) : ui.cn(
+            showBg && "oui-border-b-2 oui-border-b-transparent",
+            isFirst && "oui-bg-[linear-gradient(270deg,rgba(241,215,121,0.0225)_-2.05%,rgba(255,203,70,0.45)_100%)]",
+            isSecond && "oui-bg-[linear-gradient(270deg,rgba(255,255,255,0.0225)_-2.05%,rgba(199,199,199,0.45)_100%)]",
+            isThird && "oui-bg-[linear-gradient(270deg,rgba(255,233,157,0.0225)_-1.3%,rgba(160,101,46,0.45)_100%)]"
+          )
+        )
+      };
+    },
+    [props.address]
+  );
+  const onCell = react.useCallback(
+    (column2, record) => {
+      const isFirstColumn = column2.getIsFirstColumn();
+      const isLastColumn = column2.getIsLastColumn();
+      const isRank = [1, 2, 3].includes(record.rank);
+      return {
+        className: ui.cn(
+          isFirstColumn && isRank && "oui-rounded-l-lg oui-mix-blend-luminosity",
+          isLastColumn && isRank && "oui-rounded-r-lg oui-mix-blend-luminosity"
+        )
+      };
+    },
+    [props.address]
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.DataTable,
+        {
+          classNames: {
+            root: "oui-trading-leaderboard-ranking-table oui-bg-transparent",
+            body: "oui-text-2xs",
+            scroll: "oui-overflow-y-hidden oui-h-full"
+          },
+          loading: props.isLoading,
+          columns: column,
+          bordered: true,
+          dataSource: props.dataList,
+          generatedRowKey: (record) => record.key || record.address,
+          manualPagination: true,
+          manualSorting: true,
+          onRow,
+          onCell
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: props.sentinelRef,
+          className: "oui-invisible oui-relative oui-top-[-300px] oui-h-px"
+        }
+      ),
+      props.isLoading && props.dataList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", justify: "center", width: "100%", height: 40, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.DataTable,
+    {
+      loading: props.isLoading,
+      columns: column,
+      bordered: true,
+      dataSource: props.dataSource,
+      generatedRowKey: (record) => record.key || record.address,
+      manualPagination: true,
+      manualSorting: true,
+      pagination: props.pagination,
+      classNames: {
+        root: ui.cn(
+          "oui-trading-leaderboard-ranking-table",
+          "oui-bg-transparent",
+          "oui-rounded-md",
+          "oui-overflow-hidden",
+          "!oui-h-[calc(100%_-_53px_-_8px)]"
+        ),
+        scroll: "oui-min-h-[600px] oui-max-h-[1250px]",
+        header: "oui-bg-base-9"
+      },
+      onRow,
+      onCell
+    }
+  );
+};
+function useEndReached(sentinelRef, onEndReached) {
+  const observer = react.useRef();
+  const cb = react.useRef(onEndReached);
+  cb.current = onEndReached;
+  react.useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: "0px",
+      threshold: 0
+    };
+    const handleObserver = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          cb.current?.();
+        }
+      });
+    };
+    observer.current = new IntersectionObserver(handleObserver, options);
+    return () => {
+      observer.current?.disconnect();
+    };
+  }, []);
+  react.useEffect(() => {
+    if (sentinelRef.current) {
+      observer.current?.observe(sentinelRef.current);
+    }
+  }, [sentinelRef.current]);
+}
+
+// src/components/ranking/generalRanking/generalRanking.script.ts
+function useGeneralRankingScript(options) {
+  const { address: searchValue } = options || {};
+  const brokerId = hooks.useConfig("brokerId");
+  const { currentStage, userStatistics, getRankingUrl, selectedTimeRange } = usePoints();
+  const { isMobile } = ui.useScreen();
+  const { page, pageSize, setPage, parsePagination } = ui.usePagination({
+    pageSize: 10
+  });
+  const { data, isLoading } = hooks.useQuery(
+    currentStage && brokerId ? getRankingUrl({ page, pageSize, timeRange: selectedTimeRange }) : null,
+    {
+      formatter: (res) => res,
+      revalidateOnFocus: false
+    }
+  );
+  const {
+    data: infiniteData,
+    size,
+    setSize,
+    isValidating
+  } = hooks.useInfiniteQuery(
+    (pageIndex, previousPageData) => {
+      if (previousPageData && !previousPageData.rows?.length) return null;
+      if (!isMobile || !currentStage) return null;
+      return getRankingUrl({
+        page: pageIndex + 1,
+        pageSize,
+        timeRange: selectedTimeRange
+      });
+    },
+    {
+      initialSize: 1,
+      formatter: (res) => res,
+      revalidateOnFocus: false
+    }
+  );
+  const userDataList = react.useMemo(() => {
+    if (!userStatistics?.address) return [];
+    let rank = "-";
+    let points;
+    if (selectedTimeRange === "all_time") {
+      rank = userStatistics.stage_rank ?? "-";
+      points = userStatistics.stage_points;
+    } else if (selectedTimeRange === "this_week") {
+      rank = userStatistics.weekly_breakdown?.this_week?.rank ?? "-";
+      const breakdown = userStatistics.weekly_breakdown?.this_week;
+      points = breakdown ? breakdown.trading_point + breakdown.pnl_point + breakdown.referral_point : void 0;
+    } else if (selectedTimeRange === "last_week") {
+      rank = userStatistics.weekly_breakdown?.last_week?.rank ?? "-";
+      const breakdown = userStatistics.weekly_breakdown?.last_week;
+      points = breakdown ? breakdown.trading_point + breakdown.pnl_point + breakdown.referral_point : void 0;
+    }
+    return [
+      {
+        key: getCurrentAddressRowKey(userStatistics.address),
+        address: userStatistics.address,
+        rank,
+        points,
+        broker_id: brokerId ?? null
+      }
+    ];
+  }, [userStatistics, brokerId, selectedTimeRange]);
+  const addRankForList = react.useCallback(
+    (list) => {
+      return list?.map((item, index) => ({
+        ...item,
+        rank: index + 1 + (page - 1) * pageSize
+      }));
+    },
+    [page, pageSize]
+  );
+  const dataSource = react.useMemo(() => {
+    const mapped = (data?.rows || []).map((row) => ({
+      address: row.address,
+      points: row.total_points,
+      rank: row.rank,
+      broker_id: brokerId ?? null
+    }));
+    const filtered = searchValue ? mapped.filter((item) => isSameAddress(item.address, searchValue || "")) : mapped;
+    const finalList = addRankForList(filtered);
+    if (page === 1 && !searchValue && userDataList.length) {
+      return [...userDataList, ...finalList];
+    }
+    return finalList;
+  }, [data, brokerId, searchValue, addRankForList, page, userDataList]);
+  const dataList = react.useMemo(() => {
+    if (!infiniteData?.length) return [];
+    const flat = infiniteData.map((p) => p.rows).flat();
+    const mapped = flat.map((row) => ({
+      address: row.address,
+      points: row.total_points,
+      broker_id: brokerId ?? null
+    }));
+    const filtered = searchValue ? mapped.filter((item) => isSameAddress(item.address, searchValue)) : mapped;
+    const rankList = addRankForList(filtered);
+    if (!searchValue && userDataList.length) {
+      return [...userDataList, ...rankList];
+    }
+    return rankList;
+  }, [infiniteData, brokerId, searchValue, addRankForList, userDataList]);
+  const sentinelRef = react.useRef(null);
+  const pagination = react.useMemo(
+    () => parsePagination({
+      total: data?.meta?.total || 0,
+      current_page: data?.meta?.current_page || 1,
+      records_per_page: pageSize
+    }),
+    [data?.meta?.total, data?.meta?.current_page, pageSize]
+  );
+  useEndReached(sentinelRef, () => {
+    if (!isValidating && isMobile) {
+      setSize(size + 1);
+    }
+  });
+  react.useEffect(() => {
+    if (searchValue) setPage(1);
+  }, [searchValue, setPage]);
+  react.useEffect(() => {
+    setPage(1);
+  }, [currentStage?.stage_id, setPage]);
+  react.useEffect(() => {
+    setPage(1);
+    setSize(1);
+  }, [selectedTimeRange, setPage, setSize]);
+  return {
+    pagination,
+    dataSource,
+    isLoading: isLoading || isValidating,
+    isMobile,
+    sentinelRef,
+    dataList,
+    address: userStatistics?.address
+  };
+}
+var GeneralRankingWidget = (props) => {
+  const { address, fields, ...rest } = props;
+  const state = useGeneralRankingScript({ address });
+  return /* @__PURE__ */ jsxRuntime.jsx(Ranking, { ...state, ...rest, fields, type: "general" });
+};
+var GeneralLeaderboard = (props) => {
+  const { isMobile } = ui.useScreen();
+  const fields = ["rank", "address", "points"];
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        pt: 2,
+        px: 3,
+        r: "2xl",
+        intensity: 900,
+        width: "100%",
+        className: ui.cn(
+          "oui-trading-leaderboard-general-leaderboard oui-relative",
+          props.className
+        ),
+        style: props.style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(GeneralRankingWidget, { address: props.searchValue, fields })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      pt: 2,
+      px: 6,
+      r: "2xl",
+      className: ui.cn(
+        "oui-trading-leaderboard-general-leaderboard oui-relative",
+        "oui-mx-auto oui-max-w-[992px]",
+        props.className
+      ),
+      style: props.style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(GeneralRankingWidget, { address: props.searchValue, fields })
+    }
+  );
+};
+var GeneralLeaderboardWidget = (props) => {
+  const state = useGeneralLeaderboardScript({
+    campaignDateRange: props.campaignDateRange
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    GeneralLeaderboard,
+    {
+      ...state,
+      className: props.className,
+      style: props.style
+    }
+  );
+};
+var Countdown = ({ className }) => {
+  const { isMobile } = ui.useScreen();
+  const { currentStage } = usePoints();
+  const { t } = i18n.useTranslation();
+  const [timeLeft, setTimeLeft] = react.useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0
+  });
+  react.useEffect(() => {
+    if (currentStage?.status !== "pending" || !currentStage?.start_time) {
+      return;
+    }
+    const calculateTimeLeft = () => {
+      const targetDate2 = currentStage.start_time * 1e3;
+      const now2 = (/* @__PURE__ */ new Date()).getTime();
+      const difference = targetDate2 - now2;
+      if (difference > 0) {
+        return {
+          days: Math.floor(difference / (1e3 * 60 * 60 * 24)),
+          hours: Math.floor(difference / (1e3 * 60 * 60) % 24),
+          minutes: Math.floor(difference / 1e3 / 60 % 60),
+          seconds: Math.floor(difference / 1e3 % 60)
+        };
+      }
+      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+    };
+    setTimeLeft(calculateTimeLeft());
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [currentStage]);
+  const formatNumber = (num) => {
+    return num.toString().padStart(2, "0");
+  };
+  if (currentStage?.status !== "pending" || !currentStage?.start_time) {
+    return null;
+  }
+  const targetDate = currentStage.start_time * 1e3;
+  const now = (/* @__PURE__ */ new Date()).getTime();
+  if (targetDate <= now) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gap: 4,
+      itemAlign: "center",
+      justify: "center",
+      px: 9,
+      className,
+      children: [
+        !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Box,
+          {
+            className: "oui-w-[200px] oui-h-[1px]",
+            style: {
+              background: `linear-gradient(123deg, rgba(176, 132, 233, 0.00) 0%, #DEC4FF 123.91%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-rounded-2xl", p: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, itemAlign: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36 oui-text-lg", children: t("tradingPoints.startsIn") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, itemAlign: "center", justify: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, itemAlign: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-4xl oui-font-bold oui-w-16 oui-text-center", children: formatNumber(timeLeft.days) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-16 oui-text-center", children: t("tradingPoints.days") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-w-1 oui-h-1 oui-rounded-full oui-bg-base-4" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, itemAlign: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-4xl oui-font-bold oui-w-16 oui-text-center", children: formatNumber(timeLeft.hours) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-16 oui-text-center", children: t("tradingPoints.hours") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-w-1 oui-h-1 oui-rounded-full oui-bg-base-4" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, itemAlign: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-4xl oui-font-bold oui-w-16 oui-text-center", children: formatNumber(timeLeft.minutes) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-16 oui-text-center", children: t("tradingPoints.minutes") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-w-1 oui-h-1 oui-rounded-full oui-bg-base-4" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, itemAlign: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-4xl oui-font-bold oui-w-16 oui-text-center", children: formatNumber(timeLeft.seconds) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-16 oui-text-center", children: t("tradingPoints.seconds") })
+            ] })
+          ] })
+        ] }) }),
+        !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Box,
+          {
+            className: "oui-w-[200px] oui-h-[1px]",
+            style: {
+              background: `linear-gradient(270deg, rgba(176, 132, 233, 0.00) 0%, #DEC4FF 123.91%)`
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var FAQItem = ({ question, answer }) => {
+  const { isMobile } = ui.useScreen();
+  const [isOpen, setIsOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      onClick: () => setIsOpen(!isOpen),
+      direction: "column",
+      className: "oui-w-full",
+      itemAlign: "start",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            gap: 4,
+            className: "oui-w-full oui-cursor-pointer hover:oui-opacity-80 oui-transition-opacity",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  className: ui.cn(
+                    "oui-flex-1 oui-text-base-contrast oui-font-semibold oui-tracking-[0.03em]",
+                    isMobile ? "oui-text-lg oui-leading-[26px]" : "oui-text-xl oui-leading-8"
+                  ),
+                  children: question
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.ChevronDownIcon,
+                {
+                  size: 24,
+                  className: ui.cn(
+                    "oui-text-base-contrast oui-transition-transform oui-duration-300 oui-flex-shrink-0",
+                    isOpen && "oui-rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Box,
+          {
+            className: ui.cn(
+              "oui-overflow-hidden oui-transition-all oui-duration-300",
+              isOpen && "oui-mt-4"
+            ),
+            style: {
+              maxHeight: isOpen ? "500px" : "0px",
+              opacity: isOpen ? 1 : 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                className: "oui-text-base-contrast-54 oui-text-sm oui-leading-relaxed",
+                style: { whiteSpace: "pre-line" },
+                children: answer
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var FAQSection = ({ className }) => {
+  const brokerName = hooks.useConfig("brokerName");
+  const { isMobile } = ui.useScreen();
+  const { t } = i18n.useTranslation();
+  const faqData = [
+    {
+      question: t("tradingPoints.faq.whatArePoints.question"),
+      answer: t("tradingPoints.faq.whatArePoints.answer", { brokerName })
+    },
+    {
+      question: t("tradingPoints.faq.allocation.question"),
+      answer: t("tradingPoints.faq.allocation.answer")
+    },
+    {
+      question: t("tradingPoints.faq.distribution.question"),
+      answer: t("tradingPoints.faq.distribution.answer")
+    },
+    {
+      question: t("tradingPoints.faq.pnl.question"),
+      answer: t("tradingPoints.faq.pnl.answer")
+    },
+    {
+      question: t("tradingPoints.faq.referral.question"),
+      answer: t("tradingPoints.faq.referral.answer")
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      gap: 6,
+      className,
+      itemAlign: "start",
+      id: "points-faq",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            className: ui.cn(
+              "oui-text-base-contrast oui-font-normal oui-tracking-[0.03em]",
+              isMobile ? "oui-text-2xl oui-leading-8" : "oui-text-3xl oui-leading-10"
+            ),
+            children: t("tradingPoints.faq.title")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Flex,
+          {
+            direction: "column",
+            gap: 8,
+            className: "oui-w-full",
+            itemAlign: "start",
+            children: faqData.map((faq, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(FAQItem, { question: faq.question, answer: faq.answer }),
+              index < faqData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-mt-8", intensity: 8 })
+            ] }, index))
+          }
+        )
+      ]
+    }
+  );
+};
+var Intro = () => {
+  const { isMobile } = ui.useScreen();
+  const {
+    currentStage,
+    stages,
+    setCurrentStage,
+    refLink,
+    refCode,
+    allTimePointsDisplay,
+    isNoCampaign
+  } = usePoints();
+  const [isStageDropdownOpen, setIsStageDropdownOpen] = react.useState(false);
+  const { t } = i18n.useTranslation();
+  const onCopyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(refCode);
+      ui.toast.success(t("common.copy.copied"));
+    } catch (error) {
+    }
+  };
+  const onCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(refLink);
+      ui.toast.success(t("common.copy.copied"));
+    } catch (error) {
+    }
+  };
+  const handleLearnMore = () => {
+    const faqElement = document.getElementById("points-faq");
+    if (faqElement) {
+      faqElement.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+  const formatStageDate = (startTime, endTime) => {
+    const formatDate = (timestamp) => {
+      const date = new Date(timestamp * 1e3);
+      const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+      const day = String(date.getUTCDate()).padStart(2, "0");
+      const year = date.getUTCFullYear();
+      return `${month}/${day}/${year}`;
+    };
+    const startDate = formatDate(startTime);
+    const endDate = endTime ? formatDate(endTime) : "Recurring";
+    return `${startDate} - ${endDate}`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 8, className: "oui-w-full", children: [
+    isNoCampaign ? /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        direction: "column",
+        gap: 6,
+        itemAlign: "start",
+        className: "oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Flex,
+            {
+              direction: isMobile ? "column" : "row",
+              gap: 4,
+              itemAlign: isMobile ? "start" : "center",
+              justify: "between",
+              className: "oui-w-full",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Flex,
+                {
+                  direction: isMobile ? "column" : "row",
+                  itemAlign: isMobile ? "start" : "center",
+                  className: isMobile ? "oui-w-full" : "",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Text,
+                    {
+                      className: ui.cn(
+                        "oui-text-base-contrast",
+                        isMobile ? "oui-text-xl" : "oui-text-4xl",
+                        "oui-font-600 oui-leading-tight oui-tracking-[0.03em]"
+                      ),
+                      children: t("tradingPoints.noActiveCampaigns")
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              className: ui.cn(
+                "oui-text-[14px]",
+                "oui-leading-[20px]",
+                "oui-font-semibold",
+                "oui-text-base-contrast-54"
+              ),
+              children: t("tradingPoints.noActiveCampaignsDescription")
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        direction: "column",
+        gap: 6,
+        itemAlign: "start",
+        className: "oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              direction: isMobile ? "column" : "row",
+              gap: 4,
+              itemAlign: isMobile ? "start" : "center",
+              justify: "between",
+              className: "oui-w-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Flex,
+                  {
+                    direction: isMobile ? "column" : "row",
+                    itemAlign: isMobile ? "start" : "center",
+                    className: isMobile ? "oui-w-full" : "",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        ui.Text,
+                        {
+                          className: ui.cn(
+                            "oui-text-base-contrast",
+                            isMobile ? "oui-text-xl" : "oui-text-4xl",
+                            "oui-font-600 oui-leading-tight oui-tracking-[0.03em]"
+                          ),
+                          children: [
+                            t("tradingPoints.stage"),
+                            " ",
+                            currentStage?.epoch_period,
+                            " \xB7"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, itemAlign: "center", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Text,
+                          {
+                            className: ui.cn(
+                              isMobile ? "oui-text-xl" : "oui-text-4xl",
+                              "oui-text-primary",
+                              "oui-text-center",
+                              "oui-pl-2"
+                            ),
+                            children: currentStage?.stage_name
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "img",
+                          {
+                            src: "https://oss.woo.org/static/images/sdk/pt-hot.png",
+                            alt: "Hot",
+                            className: isMobile ? "oui-h-8 oui-w-8" : "oui-h-[48px] oui-w-[48px]"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.DropdownMenuRoot,
+                  {
+                    open: isStageDropdownOpen,
+                    onOpenChange: setIsStageDropdownOpen,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        ui.Flex,
+                        {
+                          gap: 2,
+                          itemAlign: "center",
+                          px: 3,
+                          py: 2,
+                          className: "oui-w-[230px] oui-bg-base-contrast-6 oui-border oui-border-line-12 oui-rounded-md  hover:oui-cursor-pointer hover:oui-opacity-80 oui-transition-opacity",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-flex-1 oui-text-[11px] oui-tracking-[0.03em] oui-whitespace-nowrap oui-text-base-contrast-36", children: currentStage ? `Stage ${currentStage.epoch_period}: ${formatStageDate(
+                              currentStage.start_time,
+                              currentStage.end_time
+                            )}` : "" }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.ChevronDownIcon,
+                              {
+                                size: 12,
+                                className: ui.cn(
+                                  "oui-text-base-contrast-36",
+                                  "oui-transition-transform",
+                                  isStageDropdownOpen && "oui-rotate-180"
+                                )
+                              }
+                            )
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.DropdownMenuContent,
+                        {
+                          onCloseAutoFocus: (e) => e.preventDefault(),
+                          onClick: (e) => e.stopPropagation(),
+                          sideOffset: 4,
+                          collisionPadding: { right: 16 },
+                          className: ui.cn(
+                            "oui-bg-base-8 oui-w-[230px] oui-p-1 oui-rounded-lg",
+                            "oui-border oui-border-line-6",
+                            "oui-font-semibold",
+                            "oui-shadow-[0px_3px_6px_0px_rgba(0,0,0,0.2)]"
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.Flex,
+                            {
+                              direction: "column",
+                              itemAlign: "start",
+                              gap: 0,
+                              className: "oui-w-full",
+                              children: stages?.rows?.map((stage) => {
+                                const isSelected = currentStage?.stage_id === stage.stage_id;
+                                stage.status !== "active";
+                                const isActive = stage.status === "active";
+                                return /* @__PURE__ */ jsxRuntime.jsxs(
+                                  ui.Flex,
+                                  {
+                                    gap: 2,
+                                    itemAlign: "center",
+                                    px: 2,
+                                    py: 2,
+                                    r: "sm",
+                                    onClick: () => {
+                                      setCurrentStage(stage);
+                                      setIsStageDropdownOpen(false);
+                                    },
+                                    className: ui.cn(
+                                      "oui-rounded oui-relative oui-w-full",
+                                      "hover:oui-cursor-pointer hover:oui-opacity-80",
+                                      isSelected ? "oui-bg-base-5" : "hover:oui-bg-base-5/50"
+                                    ),
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        ui.Text,
+                                        {
+                                          className: ui.cn(
+                                            "oui-text-[11px] oui-tracking-[0.03em] oui-whitespace-nowrap",
+                                            isSelected ? "oui-text-base-contrast-54 oui-font-semibold" : "oui-text-base-contrast-36"
+                                          ),
+                                          children: `Stage ${stage.epoch_period}: ${formatStageDate(
+                                            stage.start_time,
+                                            stage.end_time
+                                          )}`
+                                        }
+                                      ),
+                                      isActive && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-w-1 oui-h-1 oui-rounded-full oui-bg-primary oui-flex-shrink-0" })
+                                    ]
+                                  },
+                                  stage.stage_id
+                                );
+                              })
+                            }
+                          )
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Text,
+            {
+              className: ui.cn(
+                "oui-text-[14px]",
+                "oui-leading-[20px]",
+                "oui-font-semibold",
+                "oui-text-base-contrast-54"
+              ),
+              children: [
+                currentStage?.stage_description,
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "oui-text-primary hover:oui-underline oui-cursor-pointer",
+                    onClick: handleLearnMore,
+                    children: [
+                      " ",
+                      t("tradingPoints.learnMore")
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        direction: isMobile ? "column" : "row",
+        gap: 6,
+        className: "oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              direction: isMobile ? "column" : "row",
+              gap: 6,
+              itemAlign: isMobile ? "stretch" : "center",
+              p: 5,
+              r: "2xl",
+              style: { height: isMobile ? "" : 104 },
+              className: ui.cn(
+                "oui-border oui-border-line",
+                !isMobile && "oui-gap-12",
+                isMobile ? "oui-w-full" : "oui-flex-1"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Flex,
+                  {
+                    direction: "column",
+                    gap: 2,
+                    className: "oui-flex-1",
+                    itemAlign: "start",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em]", children: t("tradingPoints.stagePoints") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-leading-9", children: allTimePointsDisplay.currentPointsDisplay })
+                    ]
+                  }
+                ),
+                !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Box,
+                  {
+                    className: ui.cn(
+                      "oui-w-[1px]",
+                      "oui-h-full",
+                      "oui-bg-base-contrast-10"
+                    )
+                  }
+                ),
+                isMobile && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { intensity: 8 }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Flex,
+                  {
+                    direction: "column",
+                    gap: 2,
+                    className: "oui-flex-1",
+                    itemAlign: "start",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em]", children: t("tradingPoints.stageRanking") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-leading-9", children: allTimePointsDisplay.rankingDisplay })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Flex,
+            {
+              p: 5,
+              r: "2xl",
+              style: { height: 104 },
+              className: ui.cn(
+                "oui-border oui-border-line",
+                isMobile ? "oui-w-full" : "oui-flex-1",
+                "oui-h-[128px]"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 4, className: "oui-w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, itemAlign: "center", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em]", children: t("tradingPoints.referralCode") }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Flex,
+                    {
+                      gap: 2,
+                      itemAlign: "center",
+                      justify: "end",
+                      className: "oui-flex-1",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-sm oui-tracking-[0.03em]", children: refCode }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.CopyIcon,
+                          {
+                            size: 16,
+                            className: "oui-text-base-contrast hover:oui-cursor-pointer hover:oui-opacity-80 oui-transition-opacity",
+                            onClick: onCopyCode
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, itemAlign: "start", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-flex-shrink-0", children: t("tradingPoints.referralLink") }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Flex,
+                    {
+                      gap: 2,
+                      itemAlign: "start",
+                      className: "oui-flex-1 oui-min-w-0",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-sm oui-tracking-[0.03em] oui-flex-1 oui-truncate oui-text-right", children: refLink }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.CopyIcon,
+                          {
+                            size: 16,
+                            className: "oui-text-base-contrast hover:oui-cursor-pointer hover:oui-opacity-80 oui-transition-opacity",
+                            onClick: onCopyLink
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var User = ({ onRouteChange }) => {
+  const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const {
+    refLink,
+    selectedTimeRange,
+    setSelectedTimeRange,
+    pointsDisplay,
+    userStatistics,
+    isCurrentStageCompleted
+  } = usePoints();
+  const timeRangeOptions = [
+    { value: "this_week", label: t("tradingPoints.thisWeek") },
+    { value: "last_week", label: t("tradingPoints.lastWeek") },
+    { value: "all_time", label: t("tradingPoints.all") }
+  ];
+  if (isCurrentStageCompleted) {
+    if (selectedTimeRange !== "all_time") {
+      setSelectedTimeRange("all_time");
+    }
+    timeRangeOptions.splice(0, 2);
+  }
+  const timeRangeButtonClass = ui.cn(
+    "oui-inline-flex oui-items-center oui-justify-center oui-whitespace-nowrap",
+    "oui-box-content oui-rounded oui-px-3 oui-h-7",
+    "oui-font-medium oui-text-2xs oui-text-base-contrast-36",
+    "hover:oui-text-base-contrast-54 hover:oui-bg-base-5",
+    "oui-bg-base-7",
+    "data-[state=active]:oui-bg-base-5 data-[state=active]:oui-text-base-contrast",
+    "oui-transition-all focus-visible:oui-outline-none",
+    "focus-visible:oui-ring-2 focus-visible:oui-ring-ring focus-visible:oui-ring-offset-2",
+    "disabled:oui-pointer-events-none disabled:oui-opacity-50"
+  );
+  const currentPointsDisplay = pointsDisplay.currentPointsDisplay;
+  const rankingDisplay = pointsDisplay.rankingDisplay;
+  const tradingPointsDisplay = pointsDisplay.tradingPointsDisplay;
+  const pnlPointsDisplay = pointsDisplay.pnlPointsDisplay;
+  const referralPointsDisplay = pointsDisplay.referralPointsDisplay;
+  const formatReferralBoost = (value) => {
+    return value !== null && value !== void 0 ? value : "--";
+  };
+  const goToPerp = react.useCallback(() => {
+    onRouteChange({
+      href: "/perp",
+      name: "Perp"
+    });
+  }, [onRouteChange]);
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(refLink);
+      ui.toast.success(t("common.copy.copied"));
+    } catch (error) {
+    }
+  };
+  const userStats = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: isMobile ? "column" : "row",
+      gap: 4,
+      itemAlign: "stretch",
+      className: "oui-w-full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            direction: "column",
+            gap: 2,
+            className: isMobile ? "oui-w-full" : "oui-w-[200px]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 3, p: 4, r: "2xl", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.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") }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.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 })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full", intensity: 8 }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 3, p: 4, r: "2xl", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-text-center oui-w-full", children: t("tradingPoints.ranking") }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.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 })
+              ] })
+            ]
+          }
+        ),
+        !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Divider,
+          {
+            className: "oui-self-stretch",
+            intensity: 8,
+            direction: "vertical"
+          }
+        ),
+        isMobile && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { intensity: 8 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Flex,
+          {
+            direction: "column",
+            className: isMobile ? "oui-w-full" : "oui-flex-1",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Flex,
+              {
+                direction: isMobile ? "column" : "row",
+                gap: 6,
+                className: "oui-w-full oui-h-full",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Flex,
+                    {
+                      direction: "column",
+                      gap: 3,
+                      itemAlign: "center",
+                      justify: "center",
+                      p: 4,
+                      r: "xl",
+                      intensity: 800,
+                      className: ui.cn(
+                        "oui-backdrop-blur-sm",
+                        isMobile ? "oui-w-full" : "oui-flex-1 oui-h-full"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Tooltip,
+                          {
+                            content: t("tradingPoints.tradePointsTooltip"),
+                            className: "oui-max-w-[300px] oui-bg-primary-darken",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.Text,
+                              {
+                                className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-text-center oui-w-full\n                      ",
+                                style: {
+                                  textDecorationLine: "underline",
+                                  textDecorationStyle: "dotted",
+                                  textUnderlineOffset: "30%"
+                                },
+                                children: t("tradingPoints.tradePoints")
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-text-center oui-w-full oui-leading-9", children: tradingPointsDisplay }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "md", onClick: goToPerp, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tradingPoints.tradeNow") }) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Flex,
+                    {
+                      direction: "column",
+                      gap: 3,
+                      itemAlign: "center",
+                      justify: "center",
+                      p: 4,
+                      r: "xl",
+                      intensity: 800,
+                      className: ui.cn(
+                        "oui-backdrop-blur-sm",
+                        isMobile ? "oui-w-full" : "oui-flex-1 oui-h-full"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Tooltip,
+                          {
+                            content: t("tradingPoints.pnlPointsTooltip"),
+                            className: "oui-max-w-[300px] oui-bg-primary-darken",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.Text,
+                              {
+                                className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-text-center oui-w-full",
+                                style: {
+                                  textDecorationLine: "underline",
+                                  textDecorationStyle: "dotted",
+                                  textUnderlineOffset: "30%"
+                                },
+                                children: t("tradingPoints.pnlPoints")
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-text-center oui-w-full oui-leading-9", children: pnlPointsDisplay }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "md", onClick: goToPerp, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tradingPoints.tradeNow") }) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Flex,
+                    {
+                      direction: "column",
+                      gap: 3,
+                      itemAlign: "center",
+                      justify: "center",
+                      p: 4,
+                      r: "xl",
+                      intensity: 800,
+                      className: ui.cn(
+                        "oui-backdrop-blur-sm",
+                        isMobile ? "oui-w-full" : "oui-flex-1 oui-h-full"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Tooltip,
+                          {
+                            content: t("tradingPoints.referralPointsTooltip", {
+                              l1: formatReferralBoost(userStatistics?.l1_referral_boost),
+                              l2: formatReferralBoost(userStatistics?.l2_referral_boost)
+                            }),
+                            className: "oui-max-w-[300px] oui-bg-primary-darken",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.Text,
+                              {
+                                className: "oui-text-base-contrast-54 oui-text-sm oui-tracking-[0.03em] oui-text-center oui-w-full",
+                                style: {
+                                  textDecorationLine: "underline",
+                                  textDecorationStyle: "dotted",
+                                  textUnderlineOffset: "30%"
+                                },
+                                children: t("tradingPoints.referralPoints")
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast oui-text-[28px] oui-tracking-[0.03em] oui-text-center oui-w-full oui-leading-9", children: referralPointsDisplay }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "outlined", size: "md", onClick: onCopy, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-54", children: t("tradingPoints.copyLink") }) })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 6, className: "oui-w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        direction: isMobile ? "column" : "row",
+        gap: isMobile ? 4 : 0,
+        itemAlign: isMobile ? "start" : "center",
+        justify: "between",
+        className: "oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              className: ui.cn(
+                "oui-text-base-contrast",
+                isMobile ? "oui-text-2xl" : "oui-text-3xl",
+                "oui-tracking-[0.03em]"
+              ),
+              children: t("tradingPoints.myPoints")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, itemAlign: "center", children: timeRangeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setSelectedTimeRange(option.value),
+              "data-state": selectedTimeRange === option.value ? "active" : "inactive",
+              className: timeRangeButtonClass,
+              children: option.label
+            },
+            option.value
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { p: 6, r: "2xl", className: "oui-border oui-border-line oui-w-full", children: userStats })
+  ] });
+};
+var Main = ({ onRouteChange }) => {
+  const { isMobile } = ui.useScreen();
+  const { isNoCampaign, isCurrentStagePending } = usePoints();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      gap: isMobile ? 6 : 10,
+      className: ui.cn(
+        "oui-w-full",
+        isMobile ? "oui-px-5 oui-py-6" : "oui-max-w-[1200px] oui-mx-auto oui-py-[64px] oui-py-12"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Countdown, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(Intro, {}),
+        !isNoCampaign && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(User, { onRouteChange }),
+          !isCurrentStagePending && /* @__PURE__ */ jsxRuntime.jsx(GeneralLeaderboardWidget, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(FAQSection, { className: "oui-w-full" })
+      ]
+    }
+  );
+};
+var main_default = Main;
+
+// src/i18n/module.ts
+var LocaleMessages = {
+  "tradingPoints.points": "Points",
+  "tradingPoints.stage": "Stage",
+  "tradingPoints.startsIn": "Starts in",
+  "tradingPoints.days": "Days",
+  "tradingPoints.hours": "Hours",
+  "tradingPoints.minutes": "Minutes",
+  "tradingPoints.seconds": "Seconds",
+  "tradingPoints.learnMore": "Learn more",
+  "tradingPoints.stagePoints": "Stage points",
+  "tradingPoints.stageRanking": "Stage ranking",
+  "tradingPoints.referralCode": "Referral code",
+  "tradingPoints.referralLink": "Referral link",
+  "tradingPoints.currentPoints": "Current points",
+  "tradingPoints.ranking": "Ranking",
+  "tradingPoints.myPoints": "My points",
+  "tradingPoints.thisWeek": "This week",
+  "tradingPoints.lastWeek": "Last week",
+  "tradingPoints.all": "All",
+  "tradingPoints.tradePoints": "Trade points",
+  "tradingPoints.tradePointsTooltip": "Trade Points are calculated based on your perps trading volume.Updated daily.",
+  "tradingPoints.tradeNow": "Trade now",
+  "tradingPoints.pnlPoints": "PNL points",
+  "tradingPoints.pnlPointsTooltip": "Both profit or loss of each trade will be recorded. Updated daily.",
+  "tradingPoints.referralPoints": "Referral points",
+  "tradingPoints.referralPointsTooltip": "First-level invitee's rebates: {{l1}}%, Second-level invitee's rebates: {{l2}}%, Update daily.",
+  "tradingPoints.copyLink": "Copy Link",
+  "tradingPoints.faq.title": "FAQ",
+  "tradingPoints.faq.whatArePoints.question": "What are Points?",
+  "tradingPoints.faq.whatArePoints.answer": "The Points program is designed to encourage genuine user engagement with products and to reward loyal users who actively contribute to the growth of the {{brokerName}} ecosystem. Rewards will be airdropped in the future based on users' point accumulation.",
+  "tradingPoints.faq.allocation.question": "What is the points allocation criteria?",
+  "tradingPoints.faq.allocation.answer": "Points = Trade points + PNL points + Referral points.\n\nThe page will update your points daily, calculating the points you are expected to receive based on your contribution.\n\nNote: Wash trading (e.g., self-trades) will not receive any points",
+  "tradingPoints.faq.distribution.question": "When will points be distributed?",
+  "tradingPoints.faq.distribution.answer": "Points are distributed at 08:00 UTC everyday.",
+  "tradingPoints.faq.pnl.question": "How are PNL points calculated?",
+  "tradingPoints.faq.pnl.answer": "Points are based on your net profit or loss each trading.",
+  "tradingPoints.faq.referral.question": "How does the referral work?",
+  "tradingPoints.faq.referral.answer": "Based on the total points of your invitees and their invitees. Points earned from first-level invitees are higher than those from second-level invitees. Updated daily.",
+  "tradingPoints.noActiveCampaigns": "No Active Campaigns",
+  "tradingPoints.noActiveCampaignsDescription": "There are currently no active point events. Please wait for the next update."
+};
+
+// import("./locales/**/*.json") in src/i18n/provider.tsx
+var globImport_locales_json = chunkQKQ47GQZ_js.__glob({
+  "./locales/de.json": () => import('./de-M4RLZ65B.js'),
+  "./locales/en.json": () => import('./en-V7OJRAEG.js'),
+  "./locales/es.json": () => import('./es-GC6OLMOU.js'),
+  "./locales/fr.json": () => import('./fr-XMT3HUWZ.js'),
+  "./locales/id.json": () => import('./id-RMBTTLNO.js'),
+  "./locales/it.json": () => import('./it-5HUE25IQ.js'),
+  "./locales/ja.json": () => import('./ja-X3VXUMBA.js'),
+  "./locales/ko.json": () => import('./ko-KG32EYC7.js'),
+  "./locales/nl.json": () => import('./nl-CQ5PEOAO.js'),
+  "./locales/pl.json": () => import('./pl-M7ZCG667.js'),
+  "./locales/pt.json": () => import('./pt-RXSAJZP6.js'),
+  "./locales/ru.json": () => import('./ru-5LNO3PAB.js'),
+  "./locales/tc.json": () => import('./tc-AWNFS2UX.js'),
+  "./locales/tr.json": () => import('./tr-PKGFWNLE.js'),
+  "./locales/uk.json": () => import('./uk-QA44TYO4.js'),
+  "./locales/vi.json": () => import('./vi-EK2GO4RO.js'),
+  "./locales/zh.json": () => import('./zh-SXH3BWY7.js')
+});
+
+// src/i18n/provider.tsx
+var resources = async (lang) => {
+  if (lang === i18n.LocaleEnum.en) {
+    return LocaleMessages;
+  }
+  return globImport_locales_json(`./locales/${lang}.json`).then((res) => res.default);
+};
+var LocaleProvider = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(i18n.ExternalLocaleProvider, { resources, children: props.children });
+};
+var PointSystemPage = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(LocaleProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(PointsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(main_default, { onRouteChange: props.onRouteChange }) }) });
+};
+
+exports.PointSystemPage = PointSystemPage;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map