@kodiak-finance/orderly-trading-leaderboard 2.8.21-alpha.0 → 2.8.21-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 { useTranslation, i18n, Trans } from '@kodiak-finance/orderly-i18n';
-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, useLongPress, modal } from '@kodiak-finance/orderly-ui';
+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 { useAccount, useConfig, useQuery, useInfiniteQuery, useSWR, useTrack, usePrivateQuery, noCacheConfig, useMemoizedFn, useMutation } from '@kodiak-finance/orderly-hooks';
 import { TrendingUp, TrendingDown, Wallet, DollarSign, BarChart3 } from 'lucide-react';
@@ -512,61 +512,19 @@ var init_column = __esm({
       );
     };
     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 });
+      const view = /* @__PURE__ */ jsx(Flex, { gap: 1, children: /* @__PURE__ */ jsx("div", { children: type === "general" ? t("common.realizedPnl") : t("common.pnl") }) });
+      return view;
     };
     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 });
+      const view = /* @__PURE__ */ jsx(Flex, { gap: 1, children: /* @__PURE__ */ jsx("div", { children: t("tradingLeaderboard.tradingVolume") }) });
+      return view;
     };
     PointsColumnTitle = () => {
-      const { isMobile } = useScreen();
       const { t } = useTranslation();
-      const tooltipContent = "Total points accumulated based on trading activity. Updated periodically.";
-      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.points") }),
-        /* @__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 });
+      const view = /* @__PURE__ */ jsx(Flex, { gap: 1, children: /* @__PURE__ */ jsx("div", { children: t("tradingLeaderboard.points") }) });
+      return view;
     };
   }
 });
@@ -1196,7 +1154,7 @@ var BrokerStatsWidget = ({ dateRange }) => {
       { key: "pnl", label: "PnL", value: stats?.pnl || 0, icon: "pnl" }
     ];
   }, [stats]);
-  const statsToDisplay = isMobile ? allStats.filter((s) => s.key === "volume" || s.key === "pnl") : allStats;
+  const statsToDisplay = allStats;
   if (error) {
     return /* @__PURE__ */ jsx("div", { className: "w-full oui-mx-auto oui-mb-6 oui-max-w-[992px]", children: /* @__PURE__ */ jsx("div", { className: "oui-text-center oui-text-sm oui-text-red-500", children: "Failed to load statistics" }) });
   }
@@ -1294,19 +1252,19 @@ var StatCardComponent = ({
   };
   const iconStyles = getIconStyles();
   const valueColor = isPnL ? isPositive ? "#22c55e" : "#ef4444" : "inherit";
-  return /* @__PURE__ */ jsxs("div", { className: "oui-rounded-lg oui-border oui-border-base-4 oui-bg-base-8 oui-p-4 oui-transition-all", children: [
-    /* @__PURE__ */ jsxs("div", { className: "oui-mb-3 oui-flex oui-items-start oui-gap-3", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "oui-rounded-lg oui-border oui-border-base-4 oui-bg-base-8 oui-p-3 md:oui-p-4 oui-transition-all", children: [
+    /* @__PURE__ */ jsxs("div", { className: "oui-mb-2 md:oui-mb-3 oui-flex oui-items-start oui-gap-2 md:oui-gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "oui-flex oui-shrink-0 oui-items-center oui-justify-center oui-rounded-md oui-p-2",
+          className: "oui-flex oui-shrink-0 oui-items-center oui-justify-center oui-rounded-md oui-p-1.5 md:oui-p-2",
           style: iconStyles,
           children: isPnL ? getPnLIcon(isPositive) : STAT_ICON_MAP[stat.icon]
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "oui-text-sm oui-font-medium oui-text-base-contrast", children: stat.label }),
-        /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-60 oui-text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "oui-text-xs md:oui-text-sm oui-font-medium oui-text-base-contrast", children: stat.label }),
+        /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-60 oui-text-2xs md:oui-text-xs", children: [
           "(",
           getDateRangeLabel(dateRange),
           ")"
@@ -1316,8 +1274,8 @@ var StatCardComponent = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "oui-text-xl oui-font-bold",
-        style: { color: valueColor, minHeight: "32px" },
+        className: "oui-text-lg md:oui-text-xl oui-font-bold",
+        style: { color: valueColor, minHeight: "28px" },
         children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }) : formatCurrency(stat.value, isPnL)
       }
     )