@orderly.network/affiliate 3.0.1 → 3.0.2-alpha.0

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { createContext, useState, useEffect, useRef, useMemo, useContext, useCal
 import { useMutation, cleanStringStyle, useCheckReferralCode, useAccount, usePrivateQuery, noCacheConfig, useDaily, useMemoizedFn, useMediaQuery, useReferralRebateSummary, useLocalStorage, useRefereeRebateSummary, useRefereeInfo } from '@orderly.network/hooks';
 import { useAppContext } from '@orderly.network/react-app';
 import { AccountStatusEnum, EMPTY_LIST } from '@orderly.network/types';
-import { registerSimpleDialog, registerSimpleSheet, modal, useModal, SimpleDialog, TextField, inputFormatter, Flex, Text, cn, toast, Dialog, DialogContent, DialogTitle, Divider, Input as Input$1, Button, formatAddress, Checkbox, Box, Slider, WarningIcon, Grid, Spinner, Collapsible, CollapsibleContent, Select, Tabs, TabPanel, usePagination, DatePicker, TabsBase, TabsList, TabsTrigger, TabsContent, parseNumber, ListView, CopyIcon, DataTable, useScreen, Statistic, Tooltip, DialogTrigger, DialogHeader, DialogBody } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, modal, useModal, SimpleDialog, TextField, inputFormatter, Flex, Text, cn, toast, Dialog, DialogContent, DialogTitle, Divider, Input as Input$1, Button, formatAddress, Checkbox, Box, Slider, WarningIcon, Grid, Spinner, Collapsible, CollapsibleContent, Select, Tabs, TabPanel, useScreen, usePagination, DatePicker, TabsBase, TabsList, TabsTrigger, TabsContent, parseNumber, ListView, CopyIcon, DataTable, Statistic, Tooltip, DialogTrigger, DialogHeader, DialogBody } from '@orderly.network/ui';
 import { subDays, format, toDate } from 'date-fns';
 import { Decimal, commify, commifyOptional } from '@orderly.network/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -521,7 +521,7 @@ var useReferralCodeFormScript = (options) => {
   const onEdit = async () => {
     const editReferralCodeParams = {
       current_referral_code: referralCode,
-      new_referral_code: newCode
+      new_referral_code: newCode.toUpperCase().replace(/[^A-Z0-9]/g, "")
     };
     const updateRebateRateParams = {
       referee_rebate_rate: new Decimal(refereeRebatePercentage).div(100).toNumber(),
@@ -944,7 +944,7 @@ var RebateRateSlider = (props) => {
         /* @__PURE__ */ jsx(
           Text,
           {
-            size: "base",
+            size: "sm",
             intensity: 54,
             as: "span",
             className: "oui-inline-flex oui-items-center oui-gap-1 oui-tracking-[0.03em]",
@@ -4325,7 +4325,7 @@ var UnPinIcon = (props) => {
   );
 };
 var ReferralCodes = (props) => {
-  const isTablet = useMediaQuery("(max-width: 767px)");
+  const { isMobile } = useScreen();
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -4339,7 +4339,7 @@ var ReferralCodes = (props) => {
         /* @__PURE__ */ jsx(Title4, { ...props }),
         /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-w-full oui-flex-col 2xl:oui-h-full", children: [
           /* @__PURE__ */ jsx(Divider, {}),
-          isTablet ? /* @__PURE__ */ jsx(MobileLayout, { ...props }) : /* @__PURE__ */ jsx(DesktopLayout, { ...props })
+          isMobile ? /* @__PURE__ */ jsx(MobileLayout, { ...props }) : /* @__PURE__ */ jsx(DesktopLayout, { ...props })
         ] })
       ]
     }
@@ -4528,7 +4528,7 @@ var MobileCell2 = (props) => {
 };
 var DesktopLayout = (props) => {
   const { t } = useTranslation();
-  const moreColumn = useMediaQuery("(min-width: 1024px)");
+  const { isDesktop: moreColumn } = useScreen();
   const columns = useMemo(() => {
     const cols = [
       {
@@ -5069,7 +5069,7 @@ var MobileCellItem2 = (props) => {
 };
 var CommissionList = (props) => {
   const { t } = useTranslation();
-  const isLG = useMediaQuery("(max-width: 767px)");
+  const { isMobile } = useScreen();
   const columns = useMemo(() => {
     const cols = [
       {
@@ -5110,7 +5110,7 @@ var CommissionList = (props) => {
     return cols;
   }, [t]);
   const body = useMemo(() => {
-    if (isLG) {
+    if (isMobile) {
       return /* @__PURE__ */ jsx(
         ListView,
         {
@@ -5185,7 +5185,7 @@ var CommissionList = (props) => {
         }
       }
     );
-  }, [isLG, props.commission]);
+  }, [isMobile, props.commission]);
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -5208,7 +5208,7 @@ var CommissionList = (props) => {
 };
 var RefereesList = (props) => {
   const { t } = useTranslation();
-  const isLG = useMediaQuery("(max-width: 767px)");
+  const { isMobile } = useScreen();
   const columns = useMemo(() => {
     const cols = [
       {
@@ -5252,7 +5252,7 @@ var RefereesList = (props) => {
     return cols;
   }, [t]);
   const body = useMemo(() => {
-    if (isLG) {
+    if (isMobile) {
       return /* @__PURE__ */ jsx(
         ListView,
         {
@@ -5347,7 +5347,7 @@ var RefereesList = (props) => {
         }
       }
     );
-  }, [isLG, props.referees]);
+  }, [isMobile, props.referees]);
   return /* @__PURE__ */ jsx(
     Flex,
     {
@@ -5390,13 +5390,13 @@ var useCommissionDataScript = () => {
       to: subDays(/* @__PURE__ */ new Date(), 1)
     }
   );
-  const isLG = useMediaQuery("(max-width: 767px)");
+  const { isMobile } = useScreen();
   const { page, pageSize, setPage, parsePagination } = usePagination();
   const [commissionData, { refresh, isLoading, loadMore, meta }] = useReferralRebateSummary({
     startDate: commissionRange?.from !== void 0 ? format(commissionRange.from, "yyyy-MM-dd") : void 0,
     endDate: commissionRange?.to !== void 0 ? format(commissionRange.to, "yyyy-MM-dd") : void 0,
     size: pageSize,
-    page: !isLG ? page : void 0
+    page: !isMobile ? page : void 0
   });
   useEffect(() => {
     refresh();
@@ -5424,13 +5424,13 @@ var useRefereesDataScript = () => {
       to: subDays(/* @__PURE__ */ new Date(), 1)
     }
   );
-  const isLG = useMediaQuery("(max-width: 767px)");
+  const { isMobile } = useScreen();
   const { page, pageSize, setPage, parsePagination } = usePagination();
   const [commissionData, { refresh, isLoading, loadMore, meta }] = useRefereeInfo({
     startDate: commissionRange?.from !== void 0 ? format(commissionRange.from, "yyyy-MM-dd") : void 0,
     endDate: commissionRange?.to !== void 0 ? format(commissionRange.to, "yyyy-MM-dd") : void 0,
     size: pageSize,
-    page: !isLG ? page : void 0,
+    page: !isMobile ? page : void 0,
     sort: "descending_code_binding_time"
   });
   useEffect(() => {
@@ -5547,7 +5547,7 @@ var BecomeAffiliate = (props) => {
       width: "100%",
       children: [
         /* @__PURE__ */ jsx(Text, { children: t("affiliate.process.title") }),
-        /* @__PURE__ */ jsxs(Flex, { className: "oui-flex oui-flex-col oui-gap-3 lg:oui-w-full lg:oui-flex-row lg:oui-items-stretch", children: [
+        /* @__PURE__ */ jsxs(Flex, { className: "oui-flex oui-flex-col oui-gap-3 xl:oui-w-full xl:oui-flex-row xl:oui-items-stretch", children: [
           /* @__PURE__ */ jsx(
             Item,
             {
@@ -5556,7 +5556,7 @@ var BecomeAffiliate = (props) => {
               content: applyText.desc
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "oui-shrink lg:oui-flex lg:-oui-rotate-90 lg:oui-flex-row lg:oui-items-center lg:oui-justify-center", children: /* @__PURE__ */ jsx(ArrowDownIcon, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "oui-shrink xl:oui-flex xl:-oui-rotate-90 xl:oui-flex-row xl:oui-items-center xl:oui-justify-center", children: /* @__PURE__ */ jsx(ArrowDownIcon, {}) }),
           /* @__PURE__ */ jsx(
             Item,
             {
@@ -5565,7 +5565,7 @@ var BecomeAffiliate = (props) => {
               content: t("affiliate.process.step2.description")
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "oui-shrink lg:oui-flex lg:-oui-rotate-90 lg:oui-flex-row lg:oui-items-center lg:oui-justify-center", children: /* @__PURE__ */ jsx(ArrowDownIcon, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "oui-shrink xl:oui-flex xl:-oui-rotate-90 xl:oui-flex-row xl:oui-items-center xl:oui-justify-center", children: /* @__PURE__ */ jsx(ArrowDownIcon, {}) }),
           /* @__PURE__ */ jsx(
             Item,
             {
@@ -5585,7 +5585,7 @@ var Item = (props) => {
     {
       className: cn(
         "oui-flex oui-flex-row oui-gap-3",
-        "lg:oui-flex-1 lg:oui-flex-col lg:oui-gap-[6px]"
+        "xl:oui-flex-1 xl:oui-flex-col xl:oui-gap-[6px]"
       ),
       width: "100%",
       children: [
@@ -5596,11 +5596,11 @@ var Item = (props) => {
             className: cn(
               "oui-flex oui-flex-col oui-items-start oui-h-full oui-justify-between",
               // lg
-              "lg:oui-items-center lg:oui-justify-start"
+              "xl:oui-items-center xl:oui-justify-start"
             ),
             children: [
-              /* @__PURE__ */ jsx(Text, { className: "oui-text-sm md:oui-text-base 2xl:oui-text-lg lg:oui-text-center", children: props.title }),
-              /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-base-contrast-36  lg:oui-text-center", children: props.content })
+              /* @__PURE__ */ jsx(Text, { className: "oui-text-sm md:oui-text-base 2xl:oui-text-lg xl:oui-text-center", children: props.title }),
+              /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-base-contrast-36  xl:oui-text-center", children: props.content })
             ]
           }
         )
@@ -5617,7 +5617,7 @@ var ApplyIcon = () => {
       viewBox: "0 0 48 48",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: "lg:oui-w-[64px] lg:oui-h-[64px] 2xl:oui-w-[80px] 2xl:oui-h-[80px]",
+      className: "xl:oui-w-[64px] xl:oui-h-[64px] 2xl:oui-w-[80px] 2xl:oui-h-[80px]",
       children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -5685,7 +5685,7 @@ var ShareIcon = () => {
       viewBox: "0 0 48 48",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: "lg:oui-w-[64px] lg:oui-h-[64px] 2xl:oui-w-[80px] 2xl:oui-h-[80px]",
+      className: "xl:oui-w-[64px] xl:oui-h-[64px] 2xl:oui-w-[80px] 2xl:oui-h-[80px]",
       children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -5727,7 +5727,7 @@ var EarnIcon = () => {
       viewBox: "0 0 48 48",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: "lg:oui-w-[64px] lg:oui-h-[64px] 2xl:oui-w-[80px] 2xl:oui-h-[80px]",
+      className: "xl:oui-w-[64px] xl:oui-h-[64px] 2xl:oui-w-[80px] 2xl:oui-h-[80px]",
       children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -6833,7 +6833,7 @@ var Title8 = (props) => {
 };
 var List = (props) => {
   const { t } = useTranslation();
-  const layout767 = useMediaQuery("(max-width: 767px)");
+  const { isMobile } = useScreen();
   const columns = [
     {
       title: `${t("affiliate.trader.rebates")} (USDC)`,
@@ -6864,7 +6864,7 @@ var List = (props) => {
       width: 127
     }
   ];
-  if (layout767) {
+  if (isMobile) {
     return /* @__PURE__ */ jsx(
       ListView,
       {