@kodiak-finance/orderly-trading-leaderboard 2.8.22-beta.1 → 2.8.22-beta.3

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { subDays, parseISO, differenceInDays, isBefore, addDays, isAfter, isWithinInterval, format } from 'date-fns';
 import { createContext, lazy, memo, useState, useRef, useCallback, useEffect, useMemo, useContext, Suspense } from 'react';
+import { useAccount, useConfig, useQuery, useInfiniteQuery, useSWR, useTrack, usePrivateQuery, noCacheConfig, useMemoizedFn, useLocalStorage, useMutation } from '@kodiak-finance/orderly-hooks';
 import { useTranslation, i18n, Trans } from '@kodiak-finance/orderly-i18n';
-import { useAccount, useConfig, useQuery, useInfiniteQuery, useSWR, useTrack, usePrivateQuery, noCacheConfig, useMemoizedFn, useMutation } from '@kodiak-finance/orderly-hooks';
 import { useEmblaCarousel, ChevronLeftIcon, ChevronRightIcon, cn, Text, useScreen, DataTable, Flex, Spinner, usePagination, Box, Select, Button, DataFilter, Input, CloseCircleFillIcon, Divider, ScrollIndicator as ScrollIndicator$1, Tabs, TabPanel, toast, Tooltip, InfoCircleIcon } from '@kodiak-finance/orderly-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { TrendingUp, TrendingDown, Wallet, DollarSign, BarChart3 } from 'lucide-react';
@@ -235,7 +235,7 @@ var init_util = __esm({
   "src/components/ranking/shared/util.ts"() {
   }
 });
-var useRankingColumns, FirstRankIcon, SecondRankIcon, ThirdRankIcon, PnLColumnTitle, VolumeColumnTitle, PointsColumnTitle;
+var useRankingColumns, getTierInfo, TierBadge, FirstRankIcon, SecondRankIcon, ThirdRankIcon, PnLColumnTitle, VolumeColumnTitle, PointsColumnTitle;
 var init_column = __esm({
   "src/components/ranking/shared/column.tsx"() {
     init_first_badge();
@@ -298,7 +298,7 @@ var init_column = __esm({
               if (!isYou) {
                 if (record.rank === 1) ; else if (record.rank === 2) ; else if (record.rank === 3) ;
               }
-              return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+              return /* @__PURE__ */ jsx("div", { className: "oui-flex oui-flex-col", children: /* @__PURE__ */ jsxs(
                 "a",
                 {
                   className: "oui-flex oui-items-start oui-gap-1",
@@ -329,6 +329,18 @@ var init_column = __esm({
             },
             width: 90
           },
+          {
+            title: "VIP Tier",
+            dataIndex: "tier",
+            render: (_value, record) => {
+              const tierInfo = getTierInfo(record);
+              if (!tierInfo?.label) {
+                return "-";
+              }
+              return /* @__PURE__ */ jsx(TierBadge, { label: tierInfo.label, imageUrl: tierInfo.imageUrl });
+            },
+            width: 120
+          },
           {
             title: /* @__PURE__ */ jsx(VolumeColumnTitle, {}),
             dataIndex: "volume",
@@ -394,6 +406,46 @@ var init_column = __esm({
         );
       }, [t, isMobile, address, fields, enableSort, type]);
     };
+    getTierInfo = (record) => {
+      if (!record) {
+        return {};
+      }
+      const tierValue = record.tier;
+      if (tierValue && typeof tierValue === "object") {
+        return {
+          label: tierValue.name || tierValue.label || tierValue.tier,
+          imageUrl: tierValue.badge_url || tierValue.badgeUrl || tierValue.image || tierValue.imageUrl
+        };
+      }
+      const label = record.vip_tier || record.vipTier || record.vip_tier_name || record.vipTierName || record.tier || record.tier_name || record.tierName || record.tier_label || record.tierLabel;
+      const imageUrl = record.vip_badge_url || record.vipBadgeUrl || record.vip_tier_image || record.vipTierImage || record.vip_tier_badge || record.vipTierBadge || record.tier_image || record.tierImage || record.tier_badge_url || record.tierBadgeUrl;
+      return { label, imageUrl };
+    };
+    TierBadge = ({
+      label,
+      imageUrl,
+      className
+    }) => {
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          itemAlign: "center",
+          gap: 1,
+          className: cn("oui-text-2xs", className),
+          children: [
+            imageUrl && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: `${label} badge`,
+                className: "oui-h-4 oui-w-4 oui-object-contain"
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs", children: label })
+          ]
+        }
+      );
+    };
     FirstRankIcon = () => {
       return /* @__PURE__ */ jsxs(
         "svg",
@@ -664,7 +716,8 @@ function useGeneralRankingScript(options) {
     dateRange = getDateRange(90),
     address: searchValue,
     sortKey = "perp_volume",
-    leaderboardEndpoint
+    leaderboardEndpoint,
+    foxifyOnly = false
   } = options || {};
   const [initialSort] = useState({
     sortKey,
@@ -712,6 +765,9 @@ function useGeneralRankingScript(options) {
     if (args.address) {
       searchParams.set("address", args.address);
     }
+    if (foxifyOnly) {
+      searchParams.set("foxify_only", "true");
+    }
     const baseUrl = leaderboardEndpoint || `/v1/broker/leaderboard/daily`;
     return `${baseUrl}?${searchParams.toString()}`;
   };
@@ -1026,12 +1082,13 @@ var init_generalRanking_widget = __esm({
     init_ranking_ui();
     init_generalRanking_script();
     GeneralRankingWidget = (props) => {
-      const { dateRange, address, fields, sortKey, leaderboardEndpoint, ...rest } = props;
+      const { dateRange, address, fields, sortKey, leaderboardEndpoint, foxifyOnly, ...rest } = props;
       const state = useGeneralRankingScript({
         dateRange,
         address,
         sortKey,
-        leaderboardEndpoint
+        leaderboardEndpoint,
+        foxifyOnly
       });
       return /* @__PURE__ */ jsx(Ranking, { ...state, ...rest, fields, type: "general" });
     };
@@ -1067,23 +1124,23 @@ var TradingLeaderboardProvider = (props) => {
 var useTradingLeaderboardContext = () => {
   return useContext(TradingLeaderboardContext);
 };
-var API_BASE = "https://backend.kodiak.finance/orderly/stats";
+var API_BASE = "https://staging.backend.kodiak.finance/orderly/stats";
 var formatDateLocal = (date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, "0");
   const day = String(date.getDate()).padStart(2, "0");
   return `${year}-${month}-${day}`;
 };
-var getApiUrl = (dateRange) => {
+var getApiUrl = (dateRange, foxifyOnly) => {
   if (!dateRange?.from || !dateRange?.to) {
     const today = /* @__PURE__ */ new Date();
     const startDate2 = formatDateLocal(today);
     const endDate2 = formatDateLocal(today);
-    return `${API_BASE}?start_date=${startDate2}&end_date=${endDate2}`;
+    return `${API_BASE}?start_date=${startDate2}&end_date=${endDate2}${foxifyOnly ? "&foxify_only=true" : ""}`;
   }
   const startDate = formatDateLocal(dateRange.from);
   const endDate = formatDateLocal(dateRange.to);
-  return `${API_BASE}?start_date=${startDate}&end_date=${endDate}`;
+  return `${API_BASE}?start_date=${startDate}&end_date=${endDate}${foxifyOnly ? "&foxify_only=true" : ""}`;
 };
 var customFetcher = async (url) => {
   const response = await fetch(url);
@@ -1110,11 +1167,14 @@ var formatCurrency = (num, showSign = false) => {
   }
   return formatted;
 };
-var BrokerStatsWidget = ({ dateRange }) => {
+var BrokerStatsWidget = ({
+  dateRange,
+  foxifyOnly
+}) => {
   const { isMobile } = useScreen();
   const url = useMemo(
-    () => getApiUrl(dateRange),
-    [dateRange?.from, dateRange?.to]
+    () => getApiUrl(dateRange, foxifyOnly),
+    [dateRange?.from, dateRange?.to, foxifyOnly]
   );
   const {
     data: apiData,
@@ -3100,6 +3160,18 @@ var LeaderboardTab = /* @__PURE__ */ ((LeaderboardTab2) => {
 
 // src/components/leaderboard/generalLeaderboard/generalLeaderboard.script.ts
 init_utils();
+var useLeaderboardLocalStorage = () => {
+  const [foxifyOnly, setFoxifyOnly] = useLocalStorage(
+    "leaderboard_foxify_only",
+    false
+  );
+  return {
+    foxifyOnly,
+    setFoxifyOnly
+  };
+};
+
+// src/components/leaderboard/generalLeaderboard/generalLeaderboard.script.ts
 var FilterDays2 = [1, 7, 30, 90];
 function useGeneralLeaderboardScript(options) {
   const { campaignDateRange, timeRange } = options || {};
@@ -3122,12 +3194,14 @@ function useGeneralLeaderboardScript(options) {
     customTimeRange: parsedTimeRange
   });
   const searchState = useSearch();
+  const foxifyState = useLeaderboardLocalStorage();
   const useCampaignDateRange = useMemo(() => {
     return !!campaignDateRange;
   }, [campaignDateRange]);
   return {
     ...filterState,
     ...searchState,
+    ...foxifyState,
     activeTab,
     onTabChange: setActiveTab,
     useCampaignDateRange,
@@ -3281,6 +3355,17 @@ var LeaderboardFilter = (props) => {
       value
     );
   });
+  const foxifyFilterButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: `oui-px-3 oui-py-1 oui-rounded oui-text-xs oui-font-medium oui-transition-colors oui-whitespace-nowrap ${props.foxifyOnly ? "oui-bg-primary oui-text-white" : "oui-bg-base-6 oui-text-base-contrast-60 hover:oui-bg-base-4 hover:oui-text-base-contrast"}`,
+      onClick: () => {
+        props.setFoxifyOnly(!props.foxifyOnly);
+      },
+      title: t("tradingLeaderboard.foxifyOnly.tooltip"),
+      children: t("tradingLeaderboard.foxifyOnly")
+    }
+  );
   if (isMobile) {
     return /* @__PURE__ */ jsxs(
       Flex,
@@ -3293,6 +3378,7 @@ var LeaderboardFilter = (props) => {
         className: cn("oui-mobile-trading-leaderboard-ranking-filter"),
         children: [
           input,
+          /* @__PURE__ */ jsx(Flex, { gap: 2, width: "100%", mt: 3, itemAlign: "center", children: foxifyFilterButton }),
           useCampaignDateRange ? /* @__PURE__ */ jsx(Flex, { gap: 3, className: "oui-w-full oui-py-3", children: /* @__PURE__ */ jsx(ScrollIndicator$1, { className: "oui-w-full", children: weeklyView }) }) : /* @__PURE__ */ jsxs(Flex, { gap: 3, className: "oui-w-full", children: [
             dateRangeView,
             /* @__PURE__ */ jsx(ScrollIndicator$1, { className: "oui-w-full", children: /* @__PURE__ */ jsx(Flex, { gap: 3, children: filterDayView }) })
@@ -3314,7 +3400,10 @@ var LeaderboardFilter = (props) => {
           !useCampaignDateRange && dateRangeView,
           !useCampaignDateRange && filterDayView
         ] }),
-        /* @__PURE__ */ jsx(Box, { width: 240, children: input })
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, itemAlign: "center", children: [
+          foxifyFilterButton,
+          /* @__PURE__ */ jsx(Box, { width: 240, children: input })
+        ] })
       ]
     }
   );
@@ -3462,12 +3551,8 @@ var GeneralLeaderboard = (props) => {
         props.activeTab === "volume" /* Volume */ ? "volume" : "pnl"
       ];
     }
-    const baseFields = [
-      "rank",
-      "address",
-      "volume",
-      "pnl"
-    ];
+    const baseFields = ["rank", "address"];
+    baseFields.push("volume", "pnl");
     if (props.leaderboardEndpoint) {
       baseFields.push("points");
     }
@@ -3475,7 +3560,13 @@ var GeneralLeaderboard = (props) => {
   }, [isMobile, props.activeTab, props.leaderboardEndpoint]);
   if (isMobile) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(BrokerStatsWidget, { dateRange: props.dateRange }),
+      /* @__PURE__ */ jsx(
+        BrokerStatsWidget,
+        {
+          dateRange: props.dateRange,
+          foxifyOnly: props.foxifyOnly
+        }
+      ),
       /* @__PURE__ */ jsxs(
         Box,
         {
@@ -3508,7 +3599,8 @@ var GeneralLeaderboard = (props) => {
                 address: props.searchValue,
                 sortKey: props.activeTab === "volume" /* Volume */ ? "perp_volume" : "realized_pnl",
                 fields,
-                leaderboardEndpoint: props.leaderboardEndpoint
+                leaderboardEndpoint: props.leaderboardEndpoint,
+                foxifyOnly: props.foxifyOnly
               }
             ) })
           ]
@@ -3517,7 +3609,13 @@ var GeneralLeaderboard = (props) => {
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(BrokerStatsWidget, { dateRange: props.dateRange }),
+    /* @__PURE__ */ jsx(
+      BrokerStatsWidget,
+      {
+        dateRange: props.dateRange,
+        foxifyOnly: props.foxifyOnly
+      }
+    ),
     /* @__PURE__ */ jsxs(
       Box,
       {
@@ -3540,7 +3638,8 @@ var GeneralLeaderboard = (props) => {
               dateRange: props.dateRange,
               address: props.searchValue,
               fields,
-              leaderboardEndpoint: props.leaderboardEndpoint
+              leaderboardEndpoint: props.leaderboardEndpoint,
+              foxifyOnly: props.foxifyOnly
             }
           ) })
         ]
@@ -7587,7 +7686,13 @@ var LeaderboardSection = (props) => {
   if (currentCampaignId === "general") {
     return /* @__PURE__ */ jsxs(Box, { px: 3, className: cn("oui-mix-blend-screen"), children: [
       /* @__PURE__ */ jsx(LeaderboardBackground, { backgroundSrc }),
-      /* @__PURE__ */ jsx(BrokerStatsWidget, { dateRange: memoizedDateRange }),
+      /* @__PURE__ */ jsx(
+        BrokerStatsWidget,
+        {
+          dateRange: memoizedDateRange,
+          foxifyOnly: leaderboardScript.foxifyOnly
+        }
+      ),
       /* @__PURE__ */ jsx(
         GeneralLeaderboard,
         {
@@ -7599,7 +7704,13 @@ var LeaderboardSection = (props) => {
   }
   if (currentCampaign?.leaderboard_config?.use_general_leaderboard) {
     return /* @__PURE__ */ jsxs(Box, { px: 3, children: [
-      /* @__PURE__ */ jsx(BrokerStatsWidget, { dateRange: memoizedDateRange }),
+      /* @__PURE__ */ jsx(
+        BrokerStatsWidget,
+        {
+          dateRange: memoizedDateRange,
+          foxifyOnly: leaderboardScript.foxifyOnly
+        }
+      ),
       /* @__PURE__ */ jsx(
         LeaderboardTitle,
         {
@@ -7620,7 +7731,13 @@ var LeaderboardSection = (props) => {
   }
   if (currentCampaign && !currentCampaign.hide_arena && currentCampaignId != "general") {
     return /* @__PURE__ */ jsxs(Box, { px: 3, children: [
-      /* @__PURE__ */ jsx(BrokerStatsWidget, { dateRange: memoizedDateRange }),
+      /* @__PURE__ */ jsx(
+        BrokerStatsWidget,
+        {
+          dateRange: memoizedDateRange,
+          foxifyOnly: leaderboardScript.foxifyOnly
+        }
+      ),
       /* @__PURE__ */ jsx(
         LeaderboardTitle,
         {