@kodiak-finance/orderly-trading-leaderboard 2.8.22-beta.0 → 2.8.22-beta.2

package/dist/index.d.mts

@@ -168,7 +168,7 @@ type TradingListWidgetProps = Pick<TradingListProps, "style" | "className">;
  */
 declare const TradingListWidget: FC<TradingListWidgetProps>;
 
-type RankingColumnFields = "rank" | "address" | "volume" | "pnl" | "rewards" | "points";
+type RankingColumnFields = "rank" | "address" | "tier" | "volume" | "pnl" | "rewards" | "points";
 
 type ListStyle = "disc" | "decimal" | "none" | "circle" | "square" | "decimal-leading-zero" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
 type DescriptionItem = {
@@ -421,6 +421,33 @@ type GeneralRankingData = {
     perp_volume: number;
     realized_pnl: number;
     total_fee: number;
+    vip_tier?: string;
+    vipTier?: string;
+    vip_tier_name?: string;
+    vipTierName?: string;
+    vip_badge_url?: string;
+    vipBadgeUrl?: string;
+    vip_tier_image?: string;
+    vipTierImage?: string;
+    vip_tier_badge?: string;
+    vipTierBadge?: string;
+    tier?: string | {
+        name?: string;
+        label?: string;
+        tier?: string;
+        badge_url?: string;
+        badgeUrl?: string;
+        image?: string;
+        imageUrl?: string;
+    };
+    tier_name?: string;
+    tierName?: string;
+    tier_label?: string;
+    tierLabel?: string;
+    tier_image?: string;
+    tierImage?: string;
+    tier_badge_url?: string;
+    tierBadgeUrl?: string;
     key?: string;
     rank?: number | string;
     volume?: number;
@@ -433,6 +460,7 @@ type GeneralRankingScriptOptions = {
     address?: string;
     sortKey?: "perp_volume" | "realized_pnl";
     leaderboardEndpoint?: string;
+    foxifyOnly?: boolean;
 };
 declare function useGeneralRankingScript(options?: GeneralRankingScriptOptions): {
     pagination: _kodiak_finance_orderly_ui.PaginationMeta;
@@ -493,6 +521,8 @@ declare function useGeneralLeaderboardScript(options?: GeneralLeaderboardScriptO
     useCampaignDateRange: boolean;
     weeklyRanges: WeeklyDateRange[];
     currentOrAllTimeRange: WeeklyDateRange | undefined;
+    foxifyOnly: any;
+    setFoxifyOnly: (value: boolean) => void;
     searchValue: string;
     onSearchValueChange: (value: string) => void;
     clearSearchValue: () => void;

package/dist/index.d.ts

@@ -168,7 +168,7 @@ type TradingListWidgetProps = Pick<TradingListProps, "style" | "className">;
  */
 declare const TradingListWidget: FC<TradingListWidgetProps>;
 
-type RankingColumnFields = "rank" | "address" | "volume" | "pnl" | "rewards" | "points";
+type RankingColumnFields = "rank" | "address" | "tier" | "volume" | "pnl" | "rewards" | "points";
 
 type ListStyle = "disc" | "decimal" | "none" | "circle" | "square" | "decimal-leading-zero" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
 type DescriptionItem = {
@@ -421,6 +421,33 @@ type GeneralRankingData = {
     perp_volume: number;
     realized_pnl: number;
     total_fee: number;
+    vip_tier?: string;
+    vipTier?: string;
+    vip_tier_name?: string;
+    vipTierName?: string;
+    vip_badge_url?: string;
+    vipBadgeUrl?: string;
+    vip_tier_image?: string;
+    vipTierImage?: string;
+    vip_tier_badge?: string;
+    vipTierBadge?: string;
+    tier?: string | {
+        name?: string;
+        label?: string;
+        tier?: string;
+        badge_url?: string;
+        badgeUrl?: string;
+        image?: string;
+        imageUrl?: string;
+    };
+    tier_name?: string;
+    tierName?: string;
+    tier_label?: string;
+    tierLabel?: string;
+    tier_image?: string;
+    tierImage?: string;
+    tier_badge_url?: string;
+    tierBadgeUrl?: string;
     key?: string;
     rank?: number | string;
     volume?: number;
@@ -433,6 +460,7 @@ type GeneralRankingScriptOptions = {
     address?: string;
     sortKey?: "perp_volume" | "realized_pnl";
     leaderboardEndpoint?: string;
+    foxifyOnly?: boolean;
 };
 declare function useGeneralRankingScript(options?: GeneralRankingScriptOptions): {
     pagination: _kodiak_finance_orderly_ui.PaginationMeta;
@@ -493,6 +521,8 @@ declare function useGeneralLeaderboardScript(options?: GeneralLeaderboardScriptO
     useCampaignDateRange: boolean;
     weeklyRanges: WeeklyDateRange[];
     currentOrAllTimeRange: WeeklyDateRange | undefined;
+    foxifyOnly: any;
+    setFoxifyOnly: (value: boolean) => void;
     searchValue: string;
     onSearchValueChange: (value: string) => void;
     clearSearchValue: () => void;

package/dist/index.js

@@ -2,10 +2,10 @@
 
 var dateFns = require('date-fns');
 var react = require('react');
+var orderlyHooks = require('@kodiak-finance/orderly-hooks');
 var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var orderlyUi = require('@kodiak-finance/orderly-ui');
 var jsxRuntime = require('react/jsx-runtime');
-var orderlyHooks = require('@kodiak-finance/orderly-hooks');
 var lucideReact = require('lucide-react');
 var orderlyTypes = require('@kodiak-finance/orderly-types');
 var ramda = require('ramda');
@@ -237,7 +237,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();
@@ -246,6 +246,7 @@ var init_column = __esm({
     init_util();
     useRankingColumns = (fields, address, enableSort, type) => {
       const { t } = orderlyI18n.useTranslation();
+      const brokerId = orderlyHooks.useConfig("brokerId");
       const { isMobile } = orderlyUi.useScreen();
       return react.useMemo(() => {
         const columns = [
@@ -299,11 +300,11 @@ var init_column = __esm({
               if (!isYou) {
                 if (record.rank === 1) ; else if (record.rank === 2) ; else if (record.rank === 3) ;
               }
-              return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex oui-flex-col", 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}`,
+                  href: `https://orderly-dashboard.orderly.network/address/${value}${record.broker_id || brokerId ? `?broker_id=${record.broker_id || brokerId}` : ""}`,
                   target: "_blank",
                   rel: "noreferrer",
                   children: [
@@ -330,6 +331,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__ */ jsxRuntime.jsx(TierBadge, { label: tierInfo.label, imageUrl: tierInfo.imageUrl });
+            },
+            width: 120
+          },
           {
             title: /* @__PURE__ */ jsxRuntime.jsx(VolumeColumnTitle, {}),
             dataIndex: "volume",
@@ -395,6 +408,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__ */ jsxRuntime.jsxs(
+        orderlyUi.Flex,
+        {
+          itemAlign: "center",
+          gap: 1,
+          className: orderlyUi.cn("oui-text-2xs", className),
+          children: [
+            imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: `${label} badge`,
+                className: "oui-h-4 oui-w-4 oui-object-contain"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs", children: label })
+          ]
+        }
+      );
+    };
     FirstRankIcon = () => {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
@@ -665,7 +718,8 @@ function useGeneralRankingScript(options) {
     dateRange = exports.getDateRange(90),
     address: searchValue,
     sortKey = "perp_volume",
-    leaderboardEndpoint
+    leaderboardEndpoint,
+    foxifyOnly = false
   } = options || {};
   const [initialSort] = react.useState({
     sortKey,
@@ -713,6 +767,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()}`;
   };
@@ -1027,12 +1084,13 @@ var init_generalRanking_widget = __esm({
     init_ranking_ui();
     init_generalRanking_script();
     exports.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__ */ jsxRuntime.jsx(exports.Ranking, { ...state, ...rest, fields, type: "general" });
     };
@@ -1068,7 +1126,7 @@ var TradingLeaderboardProvider = (props) => {
 var useTradingLeaderboardContext = () => {
   return react.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");
@@ -3101,6 +3159,18 @@ var LeaderboardTab = /* @__PURE__ */ ((LeaderboardTab2) => {
 
 // src/components/leaderboard/generalLeaderboard/generalLeaderboard.script.ts
 init_utils();
+var useLeaderboardLocalStorage = () => {
+  const [foxifyOnly, setFoxifyOnly] = orderlyHooks.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 || {};
@@ -3123,12 +3193,14 @@ function useGeneralLeaderboardScript(options) {
     customTimeRange: parsedTimeRange
   });
   const searchState = useSearch();
+  const foxifyState = useLeaderboardLocalStorage();
   const useCampaignDateRange = react.useMemo(() => {
     return !!campaignDateRange;
   }, [campaignDateRange]);
   return {
     ...filterState,
     ...searchState,
+    ...foxifyState,
     activeTab,
     onTabChange: setActiveTab,
     useCampaignDateRange,
@@ -3282,6 +3354,17 @@ var LeaderboardFilter = (props) => {
       value
     );
   });
+  const foxifyFilterButton = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
       orderlyUi.Flex,
@@ -3294,6 +3377,7 @@ var LeaderboardFilter = (props) => {
         className: orderlyUi.cn("oui-mobile-trading-leaderboard-ranking-filter"),
         children: [
           input,
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 2, width: "100%", mt: 3, itemAlign: "center", children: foxifyFilterButton }),
           useCampaignDateRange ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 3, className: "oui-w-full oui-py-3", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ScrollIndicator, { className: "oui-w-full", children: weeklyView }) }) : /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 3, className: "oui-w-full", children: [
             dateRangeView,
             /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ScrollIndicator, { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 3, children: filterDayView }) })
@@ -3315,7 +3399,10 @@ var LeaderboardFilter = (props) => {
           !useCampaignDateRange && dateRangeView,
           !useCampaignDateRange && filterDayView
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { width: 240, children: input })
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 2, itemAlign: "center", children: [
+          foxifyFilterButton,
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { width: 240, children: input })
+        ] })
       ]
     }
   );
@@ -3463,12 +3550,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");
     }
@@ -3509,7 +3592,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
               }
             ) })
           ]
@@ -3541,7 +3625,8 @@ var GeneralLeaderboard = (props) => {
               dateRange: props.dateRange,
               address: props.searchValue,
               fields,
-              leaderboardEndpoint: props.leaderboardEndpoint
+              leaderboardEndpoint: props.leaderboardEndpoint,
+              foxifyOnly: props.foxifyOnly
             }
           ) })
         ]
@@ -5902,6 +5987,7 @@ function getCurrentAddressRowKey2(address) {
 }
 var useRankingColumns2 = (fields, address, enableSort, type) => {
   const { t } = orderlyI18n.useTranslation();
+  const brokerId = orderlyHooks.useConfig("brokerId");
   const { isMobile } = orderlyUi.useScreen();
   return react.useMemo(() => {
     const columns = [
@@ -5959,7 +6045,7 @@ var useRankingColumns2 = (fields, address, enableSort, type) => {
             "a",
             {
               className: "oui-flex oui-items-start oui-gap-1",
-              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${record.broker_id}`,
+              href: `https://orderly-dashboard.orderly.network/address/${value}${record.broker_id || brokerId ? `?broker_id=${record.broker_id || brokerId}` : ""}`,
               target: "_blank",
               rel: "noreferrer",
               children: [