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

package/dist/index.js

@@ -0,0 +1,1880 @@
+'use strict';
+
+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');
+
+// src/hooks/usePointsData/usePointsData.ts
+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/img/first_badge.png
+var first_badge_default = "data:image/png;base64,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";
+
+// src/img/second_badge.png
+var second_badge_default = "data:image/png;base64,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";
+
+// src/img/third_badge.png
+var third_badge_default = "data:image/png;base64,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";
+
+// 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 = first_badge_default;
+            } else if (value === 2) {
+              rankIcon = /* @__PURE__ */ jsxRuntime.jsx(SecondRankIcon, {});
+              badgeImg = second_badge_default;
+            } else if (value === 3) {
+              rankIcon = /* @__PURE__ */ jsxRuntime.jsx(ThirdRankIcon, {});
+              badgeImg = third_badge_default;
+            }
+          }
+          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-white/[.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-white/98 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-white/98 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-white/98 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-white/98 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-white 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-white 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-tracking-[0.03em] oui-leading-tight"
+                      ),
+                      children: "No Active Campaigns"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              className: ui.cn(
+                "oui-text-[14px]",
+                "oui-leading-[20px]",
+                "oui-font-semibold",
+                "oui-text-base-contrast-54"
+              ),
+              children: "There are currently no active point events. Please wait for the next update."
+            }
+          )
+        ]
+      }
+    ) : /* @__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-tracking-[0.03em] oui-leading-tight"
+                          ),
+                          children: [
+                            "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-w-8 oui-h-8" : "oui-w-[48px] oui-h-[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-white/[.06] oui-border oui-border-white/[0.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-white/[.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-white/[.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-white/[.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-white/[0.08]")
+                  }
+                ),
+                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-white 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-white 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;
+var PointSystemPage = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(PointsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(main_default, { onRouteChange: props.onRouteChange }) });
+};
+
+exports.PointSystemPage = PointSystemPage;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map