@orderly.network/trading-leaderboard 3.0.4 → 3.1.0

package/dist/index.mjs

@@ -247,7 +247,7 @@ var useRankingColumns = (fields, address, enableSort, type) => {
                 alt: `${value}th badge`,
                 className: cn(
                   "oui-z-0 oui-h-[38px] oui-opacity-30 md:oui-h-[46px]",
-                  "oui-absolute oui-left-0 oui-top-0",
+                  "oui-absolute oui-start-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"
@@ -552,17 +552,17 @@ var Ranking = (props) => {
           className: cn(
             "after:oui-absolute after:oui-h-[40px] after:oui-w-full md:after:oui-h-[48px]",
             "after:oui-border-[rgb(var(--oui-gradient-brand-start))]",
-            "after:oui-left-0 after:oui-top-[2px] after:oui-z-[-1]",
+            "after:oui-start-0 after:oui-top-[2px] after:oui-z-[-1]",
             "after:oui-border-y",
-            isFirstColumn && "after:oui-rounded-l-lg after:oui-border-l",
-            isLastColumn && "after:oui-rounded-r-lg after:oui-border-r"
+            isFirstColumn && "after:oui-rounded-s-lg after:oui-border-s",
+            isLastColumn && "after:oui-rounded-e-lg after:oui-border-e"
           )
         };
       }
       return {
         className: cn(
-          isFirstColumn && isRank && "oui-rounded-l-lg oui-mix-blend-luminosity",
-          isLastColumn && isRank && "oui-rounded-r-lg oui-mix-blend-luminosity"
+          isFirstColumn && isRank && "oui-rounded-s-lg oui-mix-blend-luminosity",
+          isLastColumn && isRank && "oui-rounded-e-lg oui-mix-blend-luminosity"
         )
         // style: isRank
         //   ? {
@@ -2082,42 +2082,48 @@ var LeaderboardBackground = (props) => {
   }
   const linearGradient = "linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)";
   if (isVideo) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("oui-absolute oui-left-0 oui-top-0", "oui-size-full"), children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            backgroundImage: linearGradient,
-            backgroundSize: "cover",
-            backgroundRepeat: "no-repeat"
-          },
-          className: cn("oui-absolute oui-left-0 oui-top-0", "oui-size-full")
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "video",
-        {
-          autoPlay: true,
-          loop: true,
-          muted: true,
-          className: cn(
-            // rest style
-            "oui-border-none oui-bg-transparent oui-outline-none",
-            "oui-size-full",
-            // "oui-absolute oui-top-0 oui-left-0",
-            "oui-object-cover",
-            "oui-opacity-50"
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("oui-absolute oui-start-0 oui-top-0", "oui-size-full"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                backgroundImage: linearGradient,
+                backgroundSize: "cover",
+                backgroundRepeat: "no-repeat"
+              },
+              className: cn("oui-absolute oui-start-0 oui-top-0", "oui-size-full")
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsx("source", { src: props.backgroundSrc, type: "video/mp4" }),
-            /* @__PURE__ */ jsx("source", { src: props.backgroundSrc, type: "video/webm" }),
-            /* @__PURE__ */ jsx("source", { src: props.backgroundSrc, type: "video/ogg" }),
-            /* @__PURE__ */ jsx("source", { src: props.backgroundSrc, type: "video/avi" }),
-            "Your browser does not support the video tag."
-          ]
-        }
-      )
-    ] });
+          /* @__PURE__ */ jsxs(
+            "video",
+            {
+              autoPlay: true,
+              loop: true,
+              muted: true,
+              className: cn(
+                // rest style
+                "oui-border-none oui-bg-transparent oui-outline-none",
+                "oui-size-full",
+                // "oui-absolute oui-top-0 oui-start-0",
+                "oui-object-cover",
+                "oui-opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("source", { src: props.backgroundSrc, type: "video/mp4" }),
+                /* @__PURE__ */ jsx("source", { src: props.backgroundSrc, type: "video/webm" }),
+                /* @__PURE__ */ jsx("source", { src: props.backgroundSrc, type: "video/ogg" }),
+                /* @__PURE__ */ jsx("source", { src: props.backgroundSrc, type: "video/avi" }),
+                "Your browser does not support the video tag."
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
   if (props.backgroundSrc) {
     return /* @__PURE__ */ jsx(
@@ -2130,7 +2136,7 @@ var LeaderboardBackground = (props) => {
         },
         className: cn(
           "oui-general-leaderboard-background",
-          "oui-absolute oui-left-0 oui-top-0 oui-z-[-1]",
+          "oui-absolute oui-start-0 oui-top-0 oui-z-[-1]",
           "oui-size-full",
           "oui-opacity-50"
         )
@@ -2775,13 +2781,13 @@ var TradingVolumeAndParticipation = ({
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-text-2xs oui-font-semibold oui-text-base-contrast-36", children: [
     /* @__PURE__ */ jsx("div", { children: t("tradingLeaderboard.tradingVolume") }),
-    /* @__PURE__ */ jsx("div", { className: "oui-ml-1 oui-mr-2", children: /* @__PURE__ */ jsx(Text.gradient, { color: "brand", children: /* @__PURE__ */ jsx(Text.numeral, { dp: 2, prefix: "$", children: tradingVolume }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "oui-ms-1 oui-me-2", children: /* @__PURE__ */ jsx(Text.gradient, { color: "brand", children: /* @__PURE__ */ jsx(Text.numeral, { dp: 2, prefix: "$", children: tradingVolume }) }) }),
     /* @__PURE__ */ jsx("div", { children: t("tradingLeaderboard.participants") }),
-    /* @__PURE__ */ jsx("div", { className: "oui-ml-1 oui-text-base-contrast-54", children: /* @__PURE__ */ jsx(Text.numeral, { dp: 0, children: statistics?.total_participants }) }),
+    /* @__PURE__ */ jsx("div", { className: "oui-ms-1 oui-text-base-contrast-54", children: /* @__PURE__ */ jsx(Text.numeral, { dp: 0, children: statistics?.total_participants }) }),
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "oui-ml-auto oui-flex oui-cursor-pointer oui-items-center oui-gap-0.5 oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36",
+        className: "oui-ms-auto oui-flex oui-cursor-pointer oui-items-center oui-gap-0.5 oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36",
         onClick: onLearnMore,
         children: [
           t("tradingLeaderboard.viewRules"),
@@ -2806,7 +2812,7 @@ var PricePoolProgress = ({
     "div",
     {
       className: cn([
-        "oui-relative oui-flex oui-items-center oui-p-4 oui-pr-12 oui-font-medium",
+        "oui-relative oui-flex oui-items-center oui-p-4 oui-pe-12 oui-font-medium",
         "oui-rounded-[10px] oui-border oui-border-solid oui-border-base-contrast/[0.12]",
         "oui-trading-leaderboard-title",
         isMobile ? "oui-h-[88px] oui-text-3xs" : "oui-h-[114px] oui-text-sm"
@@ -2847,8 +2853,8 @@ var PricePoolProgress = ({
           "div",
           {
             className: cn(
-              "oui-absolute oui-left-1 oui-flex oui-w-[calc(100%-64px)] oui-items-center",
-              "oui-p-4 oui-pr-12"
+              "oui-absolute oui-start-1 oui-flex oui-w-[calc(100%-64px)] oui-items-center",
+              "oui-p-4 oui-pe-12"
             ),
             children: tieredPrizePools?.map((prizePool, index) => {
               const isReached = index <= currentTierIndex;
@@ -3554,6 +3560,7 @@ var CampaignsCountdown = ({ campaign, isMobile }) => {
   ] });
 };
 var CampaignsTimeDesktopUI = ({ campaign, isMobile }) => {
+  useTranslation();
   const timelineData = generateCampaignTimeline(campaign);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3620,7 +3627,7 @@ var CampaignItemUI = ({
           {
             className: cn([
               "oui-size-full",
-              "oui-absolute oui-left-0 oui-top-0",
+              "oui-absolute oui-start-0 oui-top-0",
               "oui-bg-cover oui-bg-center oui-bg-no-repeat oui-bg-blend-luminosity",
               active ? "oui-bg-transparent" : "oui-bg-[lightgray] oui-opacity-40",
               "group-hover:oui-bg-transparent group-hover:oui-opacity-100"
@@ -3635,7 +3642,7 @@ var CampaignItemUI = ({
           {
             className: cn([
               "oui-flex oui-size-full oui-flex-col oui-items-center oui-justify-center oui-gap-1",
-              "oui-absolute oui-left-0 oui-top-0 oui-z-10",
+              "oui-absolute oui-start-0 oui-top-0 oui-z-10",
               classNames?.content
             ]),
             children: [
@@ -3677,7 +3684,7 @@ var CampaignTag = ({ tag, active, classNames }) => {
     {
       className: cn([
         "oui-w-fit oui-rounded-br-lg",
-        "oui-absolute oui-left-0 oui-top-0 oui-z-10 oui-flex oui-items-center",
+        "oui-absolute oui-start-0 oui-top-0 oui-z-10 oui-flex oui-items-center",
         active && tag !== "coming" /* COMING */ ? "oui-bg-[rgba(var(--oui-gradient-brand-start))]" : "oui-bg-base-4",
         active && tag !== "ended" /* ENDED */ && "group-hover:oui-bg-base-4",
         tag === "ended" /* ENDED */ && "oui-bg-base-6 group-hover:oui-bg-base-6",
@@ -3713,7 +3720,7 @@ var PriceTag = ({ price, active }) => {
     {
       className: cn([
         "oui-flex oui-h-[18px] oui-items-center oui-gap-0.5 oui-rounded-lg oui-bg-warning/70 oui-px-1 oui-py-0.5 oui-backdrop-blur-[2px]",
-        "oui-absolute oui-right-1 oui-top-1 oui-z-10 oui-flex oui-items-center",
+        "oui-absolute oui-end-1 oui-top-1 oui-z-10 oui-flex oui-items-center",
         active ? "oui-opacity-100" : "oui-opacity-60"
       ]),
       children: [
@@ -4100,7 +4107,7 @@ var RewardsDesktopUI = ({
   const ticketText = formatTicketCount(estimatedTickets);
   const canTrade = useMemo(() => {
     return campaign?.start_time && campaign?.end_time && campaign.start_time < (/* @__PURE__ */ new Date()).toISOString() && campaign.end_time > (/* @__PURE__ */ new Date()).toISOString();
-  }, [campaign]);
+  }, [campaign, t]);
   const ticketTooltipContent = useMemo(() => {
     const ticketRules = campaign?.ticket_rules;
     if (!ticketRules) {
@@ -4137,7 +4144,7 @@ var RewardsDesktopUI = ({
         tier.value
       );
     }) });
-  }, [campaign]);
+  }, [campaign, t]);
   const extraProps = useMemo(() => {
     if (!userdata || !campaign?.ticket_rules || campaign.end_time < (/* @__PURE__ */ new Date()).toISOString() || campaign.start_time > (/* @__PURE__ */ new Date()).toISOString()) {
       return {
@@ -4477,7 +4484,7 @@ var DescriptionContent = ({ description, config }) => {
           // Use list-outside for proper alignment
           "oui-list-outside",
           // Add left padding for proper spacing
-          level === 0 ? "oui-pl-5" : "oui-pl-4",
+          level === 0 ? "oui-ps-5" : "oui-ps-4",
           // Get list style class
           getListStyleClass(defaultListStyle),
           // Custom list container class