@orderly.network/trading-leaderboard 2.8.6 → 2.8.7-alpha.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createContext, memo, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useEmblaCarousel, ChevronLeftIcon, ChevronRightIcon, cn, Text, Box, Flex, Select, Button, useScreen, usePagination, DataFilter, Input, CloseCircleFillIcon, DataTable, Spinner, Divider, toast, ScrollIndicator as ScrollIndicator$1, Tabs, TabPanel, Tooltip, InfoCircleIcon } from '@orderly.network/ui';
+import { useEmblaCarousel, ChevronLeftIcon, ChevronRightIcon, cn, Text, Box, Flex, Select, Button, useScreen, usePagination, DataFilter, Input, CloseCircleFillIcon, DataTable, Spinner, Divider, toast, ScrollIndicator as ScrollIndicator$1, useLongPress, modal, InfoCircleIcon, Tooltip, Tabs, TabPanel } from '@orderly.network/ui';
 import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
 import { useTrack, useAccount, useConfig, useQuery, useInfiniteQuery, usePrivateQuery, noCacheConfig, useMemoizedFn, useMutation } from '@orderly.network/hooks';
 import { TrackerEventName, AccountStatusEnum, EMPTY_LIST } from '@orderly.network/types';
@@ -1547,7 +1547,7 @@ function isSameAddress2(address1, address2) {
 function getCurrentAddressRowKey(address) {
   return `current-address-${address?.toLowerCase()}`;
 }
-var useRankingColumns = (fields, address, enableSort, brokerId) => {
+var useRankingColumns = (fields, address, enableSort, type) => {
   const { t } = useTranslation();
   const { isMobile } = useScreen();
   return useMemo(() => {
@@ -1606,7 +1606,7 @@ var useRankingColumns = (fields, address, enableSort, brokerId) => {
             "a",
             {
               className: "oui-flex oui-items-start oui-gap-1",
-              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${brokerId}`,
+              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${record.broker_id}`,
               target: "_blank",
               rel: "noreferrer",
               children: [
@@ -1634,7 +1634,7 @@ var useRankingColumns = (fields, address, enableSort, brokerId) => {
         width: 90
       },
       {
-        title: t("tradingLeaderboard.tradingVolume"),
+        title: /* @__PURE__ */ jsx(VolumeColumnTitle, {}),
         dataIndex: "volume",
         onSort: enableSort,
         align: isMobile ? "right" : "left",
@@ -1647,7 +1647,7 @@ var useRankingColumns = (fields, address, enableSort, brokerId) => {
         width: 105
       },
       {
-        title: t("common.pnl"),
+        title: /* @__PURE__ */ jsx(PnLColumnTitle, { type }),
         dataIndex: "pnl",
         onSort: enableSort,
         align: isMobile ? "right" : "left",
@@ -1683,7 +1683,7 @@ var useRankingColumns = (fields, address, enableSort, brokerId) => {
     return columns.filter(
       (column) => fields?.includes(column.dataIndex)
     );
-  }, [t, isMobile, address, fields, enableSort, brokerId]);
+  }, [t, isMobile, address, fields, enableSort, type]);
 };
 var FirstRankIcon = () => {
   return /* @__PURE__ */ jsxs(
@@ -1803,13 +1803,50 @@ var ThirdRankIcon = () => {
     }
   );
 };
+var PnLColumnTitle = ({ type }) => {
+  const { isMobile } = useScreen();
+  const { t } = useTranslation();
+  const tooltipContent = type === "general" ? t("tradingLeaderboard.realizedPnl.tooltip") : t("tradingLeaderboard.pnl.tooltip");
+  const longPress = useLongPress(() => {
+    modal.alert({
+      title: t("common.tips"),
+      message: tooltipContent
+    });
+  });
+  const view = /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+    /* @__PURE__ */ jsx("div", { children: type === "general" ? t("common.realizedPnl") : t("common.pnl") }),
+    /* @__PURE__ */ jsx(InfoCircleIcon, { opacity: 1, className: "w-4 h-4 cursor-pointer" })
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsx("div", { ...longPress, children: view });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, children: view });
+};
+var VolumeColumnTitle = () => {
+  const { isMobile } = useScreen();
+  const { t } = useTranslation();
+  const tooltipContent = "Total trading volume generated during the campaign period. Updated every 30 seconds.";
+  const longPress = useLongPress(() => {
+    modal.alert({
+      title: t("common.tips"),
+      message: tooltipContent
+    });
+  });
+  const view = /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+    /* @__PURE__ */ jsx("div", { children: t("tradingLeaderboard.tradingVolume") }),
+    /* @__PURE__ */ jsx(InfoCircleIcon, { opacity: 1, className: "w-4 h-4 cursor-pointer" })
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsx("div", { ...longPress, children: view });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, children: view });
+};
 var Ranking = (props) => {
-  const brokerId = useConfig("brokerId");
   const column = useRankingColumns(
     props.fields,
     props.address,
     typeof props.onSort === "function",
-    brokerId
+    props.type
   );
   const { isMobile } = useScreen();
   const onRow = useCallback(
@@ -2276,7 +2313,7 @@ var GeneralRankingWidget = (props) => {
     address,
     sortKey
   });
-  return /* @__PURE__ */ jsx(Ranking, { ...state, ...rest, fields });
+  return /* @__PURE__ */ jsx(Ranking, { ...state, ...rest, fields, type: "general" });
 };
 
 // src/components/rewards/utils.ts
@@ -2709,7 +2746,7 @@ var CampaignRankingWidget = (props) => {
     campaignId,
     sortKey
   });
-  return /* @__PURE__ */ jsx(Ranking, { ...state, ...rest, fields });
+  return /* @__PURE__ */ jsx(Ranking, { ...state, ...rest, fields, type: "campaign" });
 };
 var FilterDays2 = [7, 14, 30, 90];
 function useGeneralLeaderboardScript(options) {
@@ -5473,7 +5510,7 @@ function isSameAddress3(address1, address2) {
 function getCurrentAddressRowKey2(address) {
   return `current-address-${address?.toLowerCase()}`;
 }
-var useRankingColumns2 = (fields, address, enableSort, brokerId) => {
+var useRankingColumns2 = (fields, address, enableSort, type) => {
   const { t } = useTranslation();
   const { isMobile } = useScreen();
   return useMemo(() => {
@@ -5532,7 +5569,7 @@ var useRankingColumns2 = (fields, address, enableSort, brokerId) => {
             "a",
             {
               className: "oui-flex oui-items-start oui-gap-1",
-              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${brokerId}`,
+              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${record.broker_id}`,
               target: "_blank",
               rel: "noreferrer",
               children: [
@@ -5609,7 +5646,7 @@ var useRankingColumns2 = (fields, address, enableSort, brokerId) => {
     return columns.filter(
       (column) => fields?.includes(column.dataIndex)
     );
-  }, [t, isMobile, address, fields, enableSort, brokerId]);
+  }, [t, isMobile, address, fields, enableSort, type]);
 };
 var FirstRankIcon2 = () => {
   return /* @__PURE__ */ jsxs(
@@ -5730,12 +5767,11 @@ var ThirdRankIcon2 = () => {
   );
 };
 var Ranking2 = (props) => {
-  const brokerId = useConfig("brokerId");
   const column = useRankingColumns2(
     props.fields,
     props.address,
     typeof props.onSort === "function",
-    brokerId
+    props.type
   );
   const { isMobile } = useScreen();
   const onRow = useCallback(
@@ -6150,7 +6186,7 @@ var GeneralRankingWidget2 = (props) => {
     sortKey,
     weekOneAddresses
   });
-  return /* @__PURE__ */ jsx(Ranking2, { ...state, ...rest, fields });
+  return /* @__PURE__ */ jsx(Ranking2, { ...state, ...rest, fields, type: "general" });
 };
 var LeaderboardFilter2 = (props) => {
   const { t } = useTranslation();