@kodiak-finance/orderly-affiliate 2.9.1 → 2.9.2-alpha.0

package/dist/index.js

@@ -550,7 +550,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 orderlyUtils.Decimal(refereeRebatePercentage).div(100).toNumber(),
@@ -681,30 +681,77 @@ var GiftIcon = (props) => {
     }
   );
 };
+var WarningBox = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  orderlyUi.Flex,
+  {
+    className: "oui-bg-warning/10",
+    justify: "start",
+    itemAlign: "start",
+    gap: 1,
+    r: "lg",
+    p: 3,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.WarningIcon, { className: "oui-shrink-0 oui-text-warning" }),
+      typeof props.children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children: props.children }) : props.children
+    ]
+  }
+);
+var ReferralCodeInput = (props) => {
+  const hasSetCursorToEnd = react.useRef(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.TextField,
+    {
+      type: "text",
+      fullWidth: true,
+      label: props.label ?? "",
+      placeholder: props.placeholder,
+      value: props.value,
+      onChange: (e) => {
+        props.onChange(e.target.value);
+      },
+      onFocus: (e) => {
+        if (props.autoFocus && !hasSetCursorToEnd.current) {
+          hasSetCursorToEnd.current = true;
+          const input = e.target;
+          const len = input.value.length;
+          requestAnimationFrame(() => {
+            input.setSelectionRange(len, len);
+          });
+        }
+      },
+      formatters: [
+        orderlyUi.inputFormatter.createRegexInputFormatter((value) => {
+          return String(value).replace(
+            /[a-z]/g,
+            (char) => char.toUpperCase()
+          );
+        }),
+        orderlyUi.inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)
+      ],
+      className: "oui-w-full",
+      classNames: {
+        label: "oui-text-base-contrast-54 oui-text-xs",
+        input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
+      },
+      helpText: props.helpText,
+      color: props.color,
+      maxLength: 10,
+      minLength: 4,
+      autoComplete: "off",
+      disabled: props.disabled,
+      autoFocus: props.autoFocus
+    }
+  );
+};
 var ReferralCodeForm = (props) => {
   const { type, isReview } = props;
   const { t } = orderlyI18n.useTranslation();
-  const isBind = type === "bind" /* Bind */;
   const isReset = type === "reset" /* Reset */;
   const hasBoundReferee = !!props.directInvites && props.directInvites > 0;
   const isEditingRefereeRebateRate = !!props.accountId;
   const noCommissionAvailable = props.maxRebateRate === 0;
   const { title, description, buttonText } = react.useMemo(() => {
     switch (type) {
-      case "bind" /* Bind */:
-        return {
-          title: t("affiliate.referralCode.bind.modal.title"),
-          description: /* @__PURE__ */ jsxRuntime.jsx(
-            orderlyUi.Text,
-            {
-              size: "2xs",
-              intensity: 54,
-              className: "oui-leading-[18px] oui-text-warning-darken",
-              children: t("affiliate.referralCode.bind.modal.description")
-            }
-          ),
-          buttonText: t("common.confirm")
-        };
       case "create" /* Create */:
         return {
           title: t("affiliate.referralCode.create.modal.title"),
@@ -750,19 +797,6 @@ var ReferralCodeForm = (props) => {
     }
   );
   const descriptionView = /* @__PURE__ */ jsxRuntime.jsx(WarningBox, { children: description });
-  const bindCodeInvalid = isBind && !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
-  const bindReferralCodeInput = /* @__PURE__ */ jsxRuntime.jsx(
-    ReferralCodeInput,
-    {
-      value: props.bindCodeInput,
-      onChange: props.setBindCodeInput,
-      autoFocus: true,
-      disabled: props.skipBinding,
-      placeholder: t("affiliate.referralCode.bind.input.placeholder"),
-      helpText: bindCodeInvalid ? t("affiliate.referralCode.notExist") : void 0,
-      color: bindCodeInvalid ? "danger" : void 0
-    }
-  );
   const referralCodeInput = /* @__PURE__ */ jsxRuntime.jsx(
     ReferralCodeInput,
     {
@@ -773,30 +807,6 @@ var ReferralCodeForm = (props) => {
       label: t("affiliate.referralCode.editCodeModal.label")
     }
   );
-  const bindCheckbox = isBind && /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-gap-[6px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      orderlyUi.Checkbox,
-      {
-        color: "white",
-        id: "oui-checkbox-skipReferralBinding",
-        checked: props.skipBinding,
-        onCheckedChange: (checked) => {
-          props.setSkipBinding(checked);
-          if (checked) {
-            props.setBindCodeInput("");
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        htmlFor: "oui-checkbox-skipReferralBinding",
-        className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54",
-        children: t("affiliate.referralCode.bind.skip")
-      }
-    )
-  ] });
   const commissionConfiguration = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 54, children: t("affiliate.commissionConfiguration") }),
     !isReview && /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Text, { size: "2xs", intensity: 54, children: [
@@ -859,12 +869,6 @@ var ReferralCodeForm = (props) => {
   ] });
   const renderContent = () => {
     switch (type) {
-      case "bind" /* Bind */:
-        return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 4, children: [
-          bindReferralCodeInput,
-          bindCheckbox,
-          buttons
-        ] });
       case "create" /* Create */:
         return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
           commissionConfiguration,
@@ -995,7 +999,7 @@ var RebateRateSlider = (props) => {
         /* @__PURE__ */ jsxRuntime.jsx(
           orderlyUi.Text,
           {
-            size: "base",
+            size: "sm",
             intensity: 54,
             as: "span",
             className: "oui-inline-flex oui-items-center oui-gap-1 oui-tracking-[0.03em]",
@@ -1013,74 +1017,6 @@ var RebateRateSlider = (props) => {
     ] })
   ] });
 };
-var ReferralCodeInput = (props) => {
-  const hasSetCursorToEnd = react.useRef(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    orderlyUi.TextField,
-    {
-      type: "text",
-      fullWidth: true,
-      label: props.label ?? "",
-      placeholder: props.placeholder,
-      value: props.value,
-      onChange: (e) => {
-        props.onChange(e.target.value);
-      },
-      onFocus: (e) => {
-        if (props.autoFocus && !hasSetCursorToEnd.current) {
-          hasSetCursorToEnd.current = true;
-          const input = e.target;
-          const len = input.value.length;
-          requestAnimationFrame(() => {
-            input.setSelectionRange(len, len);
-          });
-        }
-      },
-      formatters: [
-        orderlyUi.inputFormatter.createRegexInputFormatter((value) => {
-          return String(value).replace(
-            /[a-z]/g,
-            (char) => char.toUpperCase()
-          );
-        }),
-        orderlyUi.inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)
-      ],
-      className: "oui-w-full",
-      classNames: {
-        label: "oui-text-base-contrast-54 oui-text-xs",
-        input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
-      },
-      helpText: props.helpText,
-      color: props.color,
-      maxLength: 10,
-      minLength: 4,
-      autoComplete: "off",
-      disabled: props.disabled,
-      autoFocus: props.autoFocus
-    }
-  );
-};
-var WarningBox = (props) => {
-  const { children } = props;
-  if (typeof children === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      orderlyUi.Flex,
-      {
-        className: "oui-bg-warning/10",
-        justify: "start",
-        itemAlign: "start",
-        gap: 1,
-        r: "lg",
-        p: 3,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.WarningIcon, { className: "oui-shrink-0 oui-text-warning" }),
-          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children })
-        ]
-      }
-    );
-  }
-  return children;
-};
 var ReferralCodeFormWidget = (props) => {
   const state = useReferralCodeFormScript(props);
   return /* @__PURE__ */ jsxRuntime.jsx(ReferralCodeForm, { ...state, ...props });
@@ -4216,8 +4152,25 @@ var UnPinIcon = (props) => {
     }
   );
 };
+var EditIcon2 = (props) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "12",
+      height: "13",
+      viewBox: "0 0 12 13",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "white",
+      fillOpacity: "0.36",
+      className,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.49773 1.47656C8.36523 1.47656 8.23223 1.52357 8.13823 1.61707C7.86023 1.89507 6.85973 2.89558 6.63773 3.11808L2.13523 7.62059L1.63473 8.12059C1.56523 8.19059 1.52923 8.28958 1.50973 8.38658L1.00973 10.8881C0.939727 11.2381 1.23773 11.5361 1.58773 11.4666C1.90073 11.4036 3.77673 11.0286 4.08923 10.9661C4.18623 10.9466 4.28523 10.9106 4.35523 10.8411L4.85523 10.3406L9.35773 5.83808C9.58023 5.61608 10.5807 4.61506 10.8587 4.33756C10.9522 4.24356 10.9992 4.11056 10.9992 3.97806C10.9992 3.15956 10.7907 2.57456 10.3582 2.13306C9.92173 1.68756 9.33873 1.47656 8.49773 1.47656ZM8.69473 2.48606C9.14623 2.51256 9.43873 2.61608 9.63923 2.82108C9.84423 3.03008 9.97373 3.32008 10.0017 3.76258C9.72773 4.03608 9.32673 4.43106 8.99823 4.75956C8.60173 4.36306 8.11273 3.87407 7.71623 3.47757C8.04523 3.14907 8.42123 2.75956 8.69473 2.48606ZM6.99723 4.19657L8.27923 5.47858L4.49573 9.26207L3.21373 7.98009L6.99723 4.19657ZM2.49473 8.69908L3.77673 9.98107L3.72973 10.0281C3.39973 10.0941 2.73323 10.2336 2.11923 10.3566L2.44773 8.74608L2.49473 8.69908Z" })
+    }
+  );
+};
 var ReferralCodes = (props) => {
-  const isTablet = orderlyHooks.useMediaQuery("(max-width: 767px)");
+  const { isMobile } = orderlyUi.useScreen();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     orderlyUi.Flex,
     {
@@ -4231,7 +4184,7 @@ var ReferralCodes = (props) => {
         /* @__PURE__ */ jsxRuntime.jsx(Title4, { ...props }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-w-full oui-flex-col 2xl:oui-h-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, {}),
-          isTablet ? /* @__PURE__ */ jsxRuntime.jsx(MobileLayout, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(DesktopLayout, { ...props })
+          isMobile ? /* @__PURE__ */ jsxRuntime.jsx(MobileLayout, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(DesktopLayout, { ...props })
         ] })
       ]
     }
@@ -4295,7 +4248,7 @@ var MobileCellItem = (props) => {
           }
         ),
         editRate && /* @__PURE__ */ jsxRuntime.jsx(
-          EditIcon,
+          EditIcon2,
           {
             className: "oui-mt-px oui-cursor-pointer oui-fill-base-contrast-36 hover:oui-fill-base-contrast-80",
             fillOpacity: 1,
@@ -4420,7 +4373,7 @@ var MobileCell2 = (props) => {
 };
 var DesktopLayout = (props) => {
   const { t } = orderlyI18n.useTranslation();
-  const moreColumn = orderlyHooks.useMediaQuery("(min-width: 1024px)");
+  const { isDesktop: moreColumn } = orderlyUi.useScreen();
   const columns = react.useMemo(() => {
     const cols = [
       {
@@ -4474,7 +4427,7 @@ var DesktopLayout = (props) => {
           return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "row", itemAlign: "center", gap: 1, children: [
             getRate(data),
             /* @__PURE__ */ jsxRuntime.jsx(
-              EditIcon,
+              EditIcon2,
               {
                 className: "oui-mt-[6px] oui-cursor-pointer oui-fill-base-contrast-36 hover:oui-fill-base-contrast-80",
                 fillOpacity: 1,
@@ -4961,7 +4914,7 @@ var MobileCellItem2 = (props) => {
 };
 var CommissionList = (props) => {
   const { t } = orderlyI18n.useTranslation();
-  const isLG = orderlyHooks.useMediaQuery("(max-width: 767px)");
+  const { isMobile } = orderlyUi.useScreen();
   const columns = react.useMemo(() => {
     const cols = [
       {
@@ -5002,7 +4955,7 @@ var CommissionList = (props) => {
     return cols;
   }, [t]);
   const body = react.useMemo(() => {
-    if (isLG) {
+    if (isMobile) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         orderlyUi.ListView,
         {
@@ -5077,7 +5030,7 @@ var CommissionList = (props) => {
         }
       }
     );
-  }, [isLG, props.commission]);
+  }, [isMobile, props.commission]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     orderlyUi.Flex,
     {
@@ -5100,7 +5053,7 @@ var CommissionList = (props) => {
 };
 var RefereesList = (props) => {
   const { t } = orderlyI18n.useTranslation();
-  const isLG = orderlyHooks.useMediaQuery("(max-width: 767px)");
+  const { isMobile } = orderlyUi.useScreen();
   const columns = react.useMemo(() => {
     const cols = [
       {
@@ -5144,7 +5097,7 @@ var RefereesList = (props) => {
     return cols;
   }, [t]);
   const body = react.useMemo(() => {
-    if (isLG) {
+    if (isMobile) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         orderlyUi.ListView,
         {
@@ -5239,7 +5192,7 @@ var RefereesList = (props) => {
         }
       }
     );
-  }, [isLG, props.referees]);
+  }, [isMobile, props.referees]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     orderlyUi.Flex,
     {
@@ -5282,13 +5235,13 @@ var useCommissionDataScript = () => {
       to: dateFns.subDays(/* @__PURE__ */ new Date(), 1)
     }
   );
-  const isLG = orderlyHooks.useMediaQuery("(max-width: 767px)");
+  const { isMobile } = orderlyUi.useScreen();
   const { page, pageSize, setPage, parsePagination } = orderlyUi.usePagination();
   const [commissionData, { refresh, isLoading, loadMore, meta }] = orderlyHooks.useReferralRebateSummary({
     startDate: commissionRange?.from !== void 0 ? dateFns.format(commissionRange.from, "yyyy-MM-dd") : void 0,
     endDate: commissionRange?.to !== void 0 ? dateFns.format(commissionRange.to, "yyyy-MM-dd") : void 0,
     size: pageSize,
-    page: !isLG ? page : void 0
+    page: !isMobile ? page : void 0
   });
   react.useEffect(() => {
     refresh();
@@ -5316,13 +5269,13 @@ var useRefereesDataScript = () => {
       to: dateFns.subDays(/* @__PURE__ */ new Date(), 1)
     }
   );
-  const isLG = orderlyHooks.useMediaQuery("(max-width: 767px)");
+  const { isMobile } = orderlyUi.useScreen();
   const { page, pageSize, setPage, parsePagination } = orderlyUi.usePagination();
   const [commissionData, { refresh, isLoading, loadMore, meta }] = orderlyHooks.useRefereeInfo({
     startDate: commissionRange?.from !== void 0 ? dateFns.format(commissionRange.from, "yyyy-MM-dd") : void 0,
     endDate: commissionRange?.to !== void 0 ? dateFns.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"
   });
   react.useEffect(() => {
@@ -5439,7 +5392,7 @@ var BecomeAffiliate = (props) => {
       width: "100%",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("affiliate.process.title") }),
-        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-flex oui-flex-col oui-gap-3 lg:oui-w-full lg:oui-flex-row lg:oui-items-stretch", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-flex oui-flex-col oui-gap-3 xl:oui-w-full xl:oui-flex-row xl:oui-items-stretch", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Item,
             {
@@ -5448,7 +5401,7 @@ var BecomeAffiliate = (props) => {
               content: applyText.desc
             }
           ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ArrowDownIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ArrowDownIcon, {}) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Item,
             {
@@ -5457,7 +5410,7 @@ var BecomeAffiliate = (props) => {
               content: t("affiliate.process.step2.description")
             }
           ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ArrowDownIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ArrowDownIcon, {}) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Item,
             {
@@ -5477,7 +5430,7 @@ var Item = (props) => {
     {
       className: orderlyUi.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: [
@@ -5488,11 +5441,11 @@ var Item = (props) => {
             className: orderlyUi.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__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-sm md:oui-text-base 2xl:oui-text-lg lg:oui-text-center", children: props.title }),
-              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-text-base-contrast-36  lg:oui-text-center", children: props.content })
+              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-sm md:oui-text-base 2xl:oui-text-lg xl:oui-text-center", children: props.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-text-base-contrast-36  xl:oui-text-center", children: props.content })
             ]
           }
         )
@@ -5509,7 +5462,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__ */ jsxRuntime.jsx(
           "path",
@@ -5577,7 +5530,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__ */ jsxRuntime.jsx(
           "path",
@@ -5619,7 +5572,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__ */ jsxRuntime.jsx(
           "path",
@@ -6768,7 +6721,7 @@ var Title8 = (props) => {
 };
 var List = (props) => {
   const { t } = orderlyI18n.useTranslation();
-  const layout767 = orderlyHooks.useMediaQuery("(max-width: 767px)");
+  const { isMobile } = orderlyUi.useScreen();
   const columns = [
     {
       title: `${t("affiliate.trader.rebates")} (USDC)`,
@@ -6799,7 +6752,7 @@ var List = (props) => {
       width: 127
     }
   ];
-  if (layout767) {
+  if (isMobile) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       orderlyUi.ListView,
       {