@orderly.network/affiliate 2.8.14 → 2.9.0-alpha.0

package/dist/index.mjs

@@ -1,15 +1,15 @@
-import { modal, useModal, SimpleDialog, TextField, inputFormatter, Flex, Text, cn, toast, Dialog, DialogContent, DialogTitle, Divider, Input as Input$1, Button, Box, Tabs, TabPanel, usePagination, DatePicker, TabsBase, TabsList, TabsTrigger, TabsContent, ListView, Select, CopyIcon, DataTable, Statistic, useScreen, Tooltip, DialogTrigger, DialogHeader, DialogBody } from '@orderly.network/ui';
-import { useTranslation, Trans, i18n } from '@orderly.network/i18n';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useRef, useContext, useMemo } from 'react';
-import { subDays, format, toDate } from 'date-fns';
-import { useMutation, cleanStringStyle, useAccount, usePrivateQuery, noCacheConfig, useDaily, useMemoizedFn, useMediaQuery, useLocalStorage, useReferralRebateSummary, useRefereeRebateSummary, useRefereeInfo, useCheckReferralCode } from '@orderly.network/hooks';
+import { createContext, useState, useEffect, useRef, useMemo, useContext, useCallback, Fragment as Fragment$1 } from 'react';
+import { useMutation, cleanStringStyle, useAccount, usePrivateQuery, noCacheConfig, useDaily, useMemoizedFn, useMediaQuery, useReferralRebateSummary, useLocalStorage, useRefereeRebateSummary, useRefereeInfo, useCheckReferralCode } 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, 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 { subDays, format, toDate } from 'date-fns';
 import { Decimal, commify, commifyOptional } from '@orderly.network/utils';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useTranslation, Trans, i18n } from '@orderly.network/i18n';
+import { AuthGuard, AuthGuardDataTable, useAuthStatus, AuthStatusEnum } from '@orderly.network/ui-connector';
+import { Scaffold, SideBar, useScaffoldContext } from '@orderly.network/ui-scaffold';
 import { VolBarChart } from '@orderly.network/chart';
-import { AuthGuardDataTable, useAuthStatus, AuthStatusEnum, AuthGuard } from '@orderly.network/ui-connector';
-import { Scaffold, SideBar } from '@orderly.network/ui-scaffold';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -25,67 +25,6 @@ __export(dashboard_exports, {
   HomePage: () => HomePage,
   TraderPage: () => TraderPage
 });
-var AffiliateIcon = (props) => {
-  const { size = 16, className, ...rest } = props;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 16 16",
-      fill: "#fff",
-      fillOpacity: ".98",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: props.className,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M8 1.302c-3.683 0-6.655 2.985-6.667 6.667-.013 3.676 2.987 6.68 6.666 6.687s6.674-3.037 6.667-6.687c-.007-3.682-2.985-6.667-6.667-6.667m0 1.333a5.333 5.333 0 0 1 5.333 5.334c0 1.5-.625 2.852-1.622 3.821-.49-1.062-1.545-1.821-2.753-1.821H7.04c-1.207 0-2.259.75-2.75 1.812A5.3 5.3 0 0 1 2.666 7.97a5.333 5.333 0 0 1 5.333-5.334M8 3.97a2.667 2.667 0 1 0 0 5.333A2.667 2.667 0 0 0 8 3.97" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M16 12.667a3.333 3.333 0 1 1-6.667 0 3.333 3.333 0 0 1 6.667 0",
-            fill: "#1828C3"
-          }
-        ),
-        /* @__PURE__ */ jsx("path", { d: "M11.917 11.433a.917.917 0 0 0-.917.917c0 .53.302 1.031.802 1.49a4.6 4.6 0 0 0 .713.53l.068.043c.05.027.117.027.167 0l.068-.042q.08-.05.177-.115c.182-.123.366-.26.536-.416.5-.459.802-.96.802-1.49a.917.917 0 0 0-.917-.917.97.97 0 0 0-.744.386.95.95 0 0 0-.756-.386" })
-      ]
-    }
-  );
-};
-var TraderIcon = (props) => {
-  const { size = 16, className, ...rest } = props;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 16 16",
-      fill: "white",
-      fillOpacity: "0.36",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: props.className,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M7.99929 1.30212C4.31735 1.30212 1.34509 4.28679 1.33262 7.96878C1.32015 11.6454 4.32042 14.6488 7.99929 14.6561C11.6782 14.6634 14.6726 11.6194 14.666 7.96878C14.6593 4.28679 11.6812 1.30212 7.99929 1.30212ZM7.99929 2.63546C10.9448 2.63546 13.3326 5.02345 13.3326 7.96878C13.3326 9.46878 12.7078 10.8208 11.7112 11.7901C11.2202 10.7281 10.1656 9.96878 8.95762 9.96878C8.71802 9.96878 7.28042 9.96878 7.04095 9.96878C5.83369 9.96878 4.78215 10.7188 4.29095 11.7814C3.29429 10.8121 2.66595 9.46878 2.66595 7.96878C2.66595 5.02345 5.05375 2.63546 7.99929 2.63546ZM7.99929 3.96879C6.52649 3.96879 5.33255 5.16279 5.33262 6.63545C5.33262 8.10812 6.52649 9.30212 7.99929 9.30212C9.47202 9.30212 10.666 8.10812 10.666 6.63545C10.666 5.16279 9.47202 3.96879 7.99929 3.96879Z" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M16 12.6667C16 14.5076 14.5076 16 12.6666 16C10.8257 16 9.33331 14.5076 9.33331 12.6667C9.33331 10.8257 10.8257 9.33333 12.6666 9.33333C14.5076 9.33333 16 10.8257 16 12.6667Z",
-            fill: "#005A4F"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M14.3325 13.3345C14.3325 13.2918 14.3182 13.2473 14.2857 13.2147L13.6658 12.6002L13.4315 12.8345L13.7595 13.1678H11.3325C11.2405 13.1678 11.1658 13.2425 11.1658 13.3345C11.1658 13.4265 11.2405 13.5012 11.3325 13.5012H13.7595L13.4315 13.8345L13.6658 14.0688L14.2857 13.4543C14.3182 13.4217 14.3325 13.3772 14.3325 13.3345ZM14.1658 12.0012C14.1658 11.9092 14.0912 11.8345 13.9992 11.8345H11.572L11.9002 11.5012L11.6658 11.2668L11.046 11.8813C10.981 11.9465 10.981 12.0558 11.046 12.121L11.6658 12.7355L11.9002 12.5012L11.572 12.1678H13.9992C14.0912 12.1678 14.1658 12.0932 14.1658 12.0012Z",
-            fill: "white",
-            fillOpacity: "0.98"
-          }
-        )
-      ]
-    }
-  );
-};
 var TabTypes = /* @__PURE__ */ ((TabTypes2) => {
   TabTypes2["affiliate"] = "affiliate";
   TabTypes2["trader"] = "trader";
@@ -97,6 +36,76 @@ var ReferralContext = createContext(
 var useReferralContext = () => {
   return useContext(ReferralContext);
 };
+var useVolumePrerequisite = () => {
+  return usePrivateQuery(
+    "/v1/referral/multi_level/volume_prerequisite",
+    {
+      revalidateOnFocus: false
+    }
+  );
+};
+var useMaxRebateRate = () => {
+  return usePrivateQuery(
+    "/v1/referral/multi_level/max_rebate_rate",
+    {
+      revalidateOnFocus: false
+    }
+  );
+};
+var useMultiLevelRebateInfo = () => {
+  return usePrivateQuery(
+    "/v1/referral/multi_level/rebate_info",
+    {
+      errorRetryCount: 0,
+      revalidateOnFocus: false
+    }
+  );
+};
+var useMultiLevelStatistics = (time_range) => {
+  return usePrivateQuery(
+    `/v1/referral/multi_level/statistics?time_range=${time_range}`,
+    {
+      revalidateOnFocus: false
+    }
+  );
+};
+
+// src/hooks/useMultiLevelReferralData.ts
+var useMultiLevelReferralData = () => {
+  const { data: volumePrerequisite, isLoading: volumePrerequisiteLoading } = useVolumePrerequisite();
+  const { data: maxRebateRateRes, isLoading: maxRebateRateLoading } = useMaxRebateRate();
+  const {
+    data: multiLevelRebateInfoRes,
+    mutate: multiLevelRebateInfoMutate,
+    isLoading: multiLevelRebateInfoLoading
+  } = useMultiLevelRebateInfo();
+  const isMultiLevelReferralUnlocked = volumePrerequisite && volumePrerequisite.current_volume >= volumePrerequisite.required_volume;
+  const isMultiLevelEnabled = !!maxRebateRateRes;
+  const maxRebateRate = maxRebateRateRes?.max_rebate_rate;
+  const multiLevelRebateInfo = useMemo(() => {
+    if (!multiLevelRebateInfoRes) return;
+    const {
+      default_referee_rebate_rate: referee_rebate_rate,
+      max_rebate_rate
+    } = multiLevelRebateInfoRes;
+    const referrer_rebate_rate = new Decimal(max_rebate_rate || 0).sub(referee_rebate_rate || 0).toNumber();
+    return {
+      ...multiLevelRebateInfoRes,
+      referee_rebate_rate,
+      referrer_rebate_rate
+    };
+  }, [multiLevelRebateInfoRes, maxRebateRate]);
+  const isLoading = volumePrerequisiteLoading || maxRebateRateLoading || multiLevelRebateInfoLoading;
+  return {
+    volumePrerequisite,
+    maxRebateRate,
+    multiLevelRebateInfo,
+    isMultiLevelEnabled,
+    isMultiLevelReferralUnlocked,
+    multiLevelRebateInfoMutate,
+    isLoading
+  };
+};
 var ReferralProvider = (props) => {
   const {
     becomeAnAffiliateUrl = "https://orderly.network/",
@@ -117,15 +126,15 @@ var ReferralProvider = (props) => {
     mutate: referralInfoMutate,
     isLoading
   } = usePrivateQuery("/v1/referral/info", {
-    revalidateOnFocus: true,
+    revalidateOnFocus: false,
     errorRetryCount: 3,
     ...noCacheConfig
   });
   const { data: generateCode, mutate: generateCodeMutate } = usePrivateQuery(
     "/v1/referral/auto_referral/progress",
     {
-      revalidateOnFocus: true,
-      errorRetryCount: 2,
+      revalidateOnFocus: false,
+      errorRetryCount: 0,
       formatter: (data2) => {
         return {
           code: data2.auto_referral_code,
@@ -135,6 +144,15 @@ var ReferralProvider = (props) => {
       }
     }
   );
+  const {
+    volumePrerequisite,
+    multiLevelRebateInfo,
+    isMultiLevelEnabled,
+    isMultiLevelReferralUnlocked,
+    multiLevelRebateInfoMutate,
+    maxRebateRate,
+    isLoading: isMultiLevelLoading
+  } = useMultiLevelReferralData();
   const [showHome, setShowHome] = useState(isLoading);
   useEffect(() => {
     setShowHome(true);
@@ -144,7 +162,7 @@ var ReferralProvider = (props) => {
     endDate: subDays(/* @__PURE__ */ new Date(), 90)
   });
   const { data: volumeStatistics, mutate: volumeStatisticsMutate } = usePrivateQuery("/v1/volume/user/stats", {
-    revalidateOnFocus: true
+    revalidateOnFocus: false
   });
   const isAffiliate = useMemo(() => {
     return (data?.referrer_info?.referral_codes?.length || 0) > 0;
@@ -205,64 +223,2932 @@ var ReferralProvider = (props) => {
         memoMutate();
       }, 1e3);
     }
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, [memoMutate, state.status]);
-  const memoizedValue = useMemo(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [memoMutate, state.status]);
+  const memoizedValue = useMemo(() => {
+    return {
+      generateCode,
+      showHome,
+      referralInfo: data,
+      isAffiliate,
+      isTrader,
+      tab,
+      becomeAnAffiliateUrl,
+      learnAffiliateUrl,
+      referralLinkUrl,
+      userVolume,
+      dailyVolume,
+      chartConfig,
+      overwrite,
+      isLoading: isLoading || isMultiLevelLoading,
+      wrongNetwork,
+      disabledConnect,
+      setShowHome,
+      setTab,
+      mutate: memoMutate,
+      onBecomeAnAffiliate,
+      bindReferralCodeState,
+      onLearnAffiliate,
+      showReferralPage,
+      splashPage,
+      volumePrerequisite,
+      multiLevelRebateInfo,
+      isMultiLevelEnabled,
+      isMultiLevelReferralUnlocked,
+      multiLevelRebateInfoMutate,
+      maxRebateRate
+    };
+  }, [
+    becomeAnAffiliateUrl,
+    chartConfig,
+    dailyVolume,
+    data,
+    disabledConnect,
+    generateCode,
+    isAffiliate,
+    isLoading,
+    isTrader,
+    learnAffiliateUrl,
+    overwrite,
+    referralLinkUrl,
+    showHome,
+    tab,
+    userVolume,
+    wrongNetwork,
+    onBecomeAnAffiliate,
+    bindReferralCodeState,
+    onLearnAffiliate,
+    showReferralPage,
+    splashPage,
+    memoMutate,
+    volumePrerequisite,
+    multiLevelRebateInfo,
+    isMultiLevelEnabled,
+    isMultiLevelReferralUnlocked,
+    multiLevelRebateInfoMutate,
+    maxRebateRate,
+    isMultiLevelLoading
+  ]);
+  return /* @__PURE__ */ jsx(ReferralContext.Provider, { value: memoizedValue, children });
+};
+var Faq = () => {
+  const { t } = useTranslation();
+  const faqItemsData = useMemo(() => {
+    return [
+      {
+        id: "faq-1",
+        question: t("affiliate.faq.question1"),
+        answer: t("affiliate.faq.answer1")
+      },
+      {
+        id: "faq-2",
+        question: t("affiliate.faq.question2"),
+        answer: t("affiliate.faq.answer2")
+      },
+      {
+        id: "faq-3",
+        question: t("affiliate.faq.question3"),
+        answer: t("affiliate.faq.answer3")
+      },
+      {
+        id: "faq-4",
+        question: t("affiliate.faq.question4"),
+        answer: t("affiliate.faq.answer4")
+      },
+      {
+        id: "faq-5",
+        question: t("affiliate.faq.question5"),
+        answer: t("affiliate.faq.answer5")
+      }
+    ];
+  }, [t]);
+  const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
+  const toggleItem = useCallback((id) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, []);
+  const faqItems = useMemo(() => {
+    return faqItemsData.map((item) => ({
+      ...item,
+      expanded: expandedItems.has(item.id)
+    }));
+  }, [faqItemsData, expandedItems]);
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Text, { className: "oui-text-[32px]", children: t("affiliate.faq.title") }),
+    /* @__PURE__ */ jsx(Flex, { direction: "column", itemAlign: "stretch", gap: 0, children: faqItems.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(
+        Collapsible,
+        {
+          open: item.expanded,
+          onOpenChange: () => toggleItem(item.id),
+          children: /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              direction: "column",
+              className: "oui-cursor-pointer oui-py-4",
+              itemAlign: "stretch",
+              onClick: () => toggleItem(item.id),
+              children: [
+                /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", gap: 4, children: [
+                  /* @__PURE__ */ jsx(Flex, { gap: 2, itemAlign: "center", className: "oui-flex-1", children: /* @__PURE__ */ jsx(Text, { size: "2xl", weight: "semibold", children: `${index + 1}. ${item.question}` }) }),
+                  /* @__PURE__ */ jsx(ChevronIcon, { expanded: item.expanded })
+                ] }),
+                /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    className: "oui-pt-3 oui-text-base-contrast-54",
+                    dangerouslySetInnerHTML: { __html: item.answer }
+                  }
+                ) })
+              ]
+            }
+          )
+        }
+      ),
+      index < faqItems.length - 1 && /* @__PURE__ */ jsx("div", { className: "oui-my-4 oui-h-px oui-bg-line-6" })
+    ] }, item.id)) })
+  ] });
+};
+var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: `oui-transition-transform oui-duration-200 ${expanded ? "oui-rotate-180" : ""}`,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 6L8 10L12 6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "oui-text-base-contrast-54"
+      }
+    )
+  }
+);
+var useReferralCode = () => {
+  const [doCreateReferralCode, { isMutating: isCreateMutating }] = useMutation(
+    "/v1/referral/multi_level/claim_code"
+  );
+  const [doEditReferralCode, { isMutating: isEditMutating }] = useMutation(
+    "/v1/referral/edit_referral_code"
+  );
+  const [doUpdateRebateRate, { isMutating: isUpdateRebateRateMutating }] = useMutation("/v1/referral/multi_level/rebate_rate/update");
+  const [doResetRebateRate, { isMutating: isResetRebateRateMutating }] = useMutation("/v1/referral/multi_level/rebate_rate/set_default");
+  const createReferralCode = async (params) => {
+    return doCreateReferralCode(params);
+  };
+  const editReferralCode = async (params) => {
+    return doEditReferralCode(params);
+  };
+  const updateRebateRate = async (params) => {
+    return doUpdateRebateRate(params);
+  };
+  const resetRebateRate = async (params) => {
+    return doResetRebateRate(params);
+  };
+  const isMutating = isCreateMutating || isEditMutating || isUpdateRebateRateMutating || isResetRebateRateMutating;
+  return {
+    createReferralCode,
+    editReferralCode,
+    updateRebateRate,
+    resetRebateRate,
+    isMutating
+  };
+};
+
+// src/pages/multiLevel/affiliate/referralCodeForm/referralCodeForm.script.ts
+var useReferralCodeFormScript = (options) => {
+  const { type, referralCode, maxRebateRate, referrerRebateRate, accountId } = options;
+  const { t } = useTranslation();
+  const [newCode, setNewCode] = useState(referralCode || "");
+  const [isReview, setIsReview] = useState(false);
+  const maxRebatePercentage = useMemo(() => {
+    return new Decimal(maxRebateRate).mul(100).toNumber();
+  }, [maxRebateRate]);
+  const [referrerRebatePercentage, setReferrerRebatePercentage] = useState(
+    () => {
+      if (type === "create" /* Create */) {
+        return Math.ceil(maxRebatePercentage / 2);
+      }
+      if (referrerRebateRate) {
+        return new Decimal(referrerRebateRate).mul(100).toNumber();
+      }
+      return 0;
+    }
+  );
+  const {
+    createReferralCode,
+    editReferralCode,
+    updateRebateRate,
+    resetRebateRate,
+    isMutating
+  } = useReferralCode();
+  const refereeRebatePercentage = useMemo(() => {
+    return Math.max(
+      0,
+      new Decimal(maxRebatePercentage).sub(referrerRebatePercentage).toNumber()
+    );
+  }, [referrerRebatePercentage]);
+  const codeChanged = useMemo(() => {
+    return newCode !== referralCode;
+  }, [newCode, referralCode]);
+  const rateChanged = useMemo(() => {
+    return new Decimal(referrerRebatePercentage).toNumber() !== new Decimal(referrerRebateRate || 0).mul(100).toNumber();
+  }, [referrerRebatePercentage, referrerRebateRate, newCode]);
+  const handleError = (err) => {
+    toast.error(err?.message || t("common.somethingWentWrong"));
+  };
+  const handleResult = (res) => {
+    if (res.success) {
+      options.onSuccess?.();
+      toast.success(t("affiliate.confirmChanges.success"));
+      options.close?.();
+    } else {
+      toast.error(res.message);
+    }
+  };
+  const onEdit = async () => {
+    const editReferralCodeParams = {
+      current_referral_code: referralCode,
+      new_referral_code: newCode
+    };
+    const updateRebateRateParams = {
+      referee_rebate_rate: new Decimal(refereeRebatePercentage).div(100).toNumber(),
+      account_ids: accountId ? [accountId] : void 0
+    };
+    try {
+      if (codeChanged && rateChanged) {
+        const codeRes = await editReferralCode(editReferralCodeParams);
+        if (!codeRes.success) {
+          toast.error(codeRes.message);
+          return;
+        }
+        const rateRes = await updateRebateRate(updateRebateRateParams);
+        handleResult(rateRes);
+      } else if (codeChanged) {
+        const res = await editReferralCode(editReferralCodeParams);
+        handleResult(res);
+      } else if (rateChanged) {
+        const res = await updateRebateRate(updateRebateRateParams);
+        handleResult(res);
+      }
+    } catch (err) {
+      handleError(err);
+    }
+  };
+  const onCreate = async () => {
+    try {
+      const referee_rebate_rate = new Decimal(refereeRebatePercentage).div(100).toNumber();
+      const res = await createReferralCode({ referee_rebate_rate });
+      if (res.success) {
+        toast.success(t("affiliate.referralCode.create.success"));
+        options.onSuccess?.();
+        options.close?.();
+      } else {
+        toast.error(res.message);
+      }
+    } catch (err) {
+      handleError(err);
+    }
+  };
+  const onReset = async () => {
+    try {
+      const res = await resetRebateRate({ account_ids: [accountId] });
+      handleResult(res);
+    } catch (err) {
+      handleError(err);
+    }
+  };
+  const onClick = () => {
+    switch (type) {
+      case "create" /* Create */:
+        onCreate();
+        break;
+      case "edit" /* Edit */:
+        if (isReview) {
+          onEdit();
+        } else {
+          setIsReview(true);
+        }
+        break;
+      case "reset" /* Reset */:
+        onReset();
+        break;
+    }
+  };
+  const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged;
+  return {
+    onClick,
+    maxRebatePercentage,
+    referrerRebatePercentage,
+    setReferrerRebatePercentage,
+    refereeRebatePercentage,
+    isMutating,
+    newCode,
+    setNewCode,
+    isReview,
+    buttonDisabled,
+    onReset
+  };
+};
+var GiftIcon = (props) => {
+  const { size = 16, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5.99902 1.99377C4.52636 1.99377 3.33236 3.18777 3.33236 4.66044H2.66569C2.29769 4.66044 1.99902 4.9591 1.99902 5.3271C1.99902 5.66044 1.99902 7.66043 1.99902 7.99377C1.99902 8.36177 2.29769 8.66043 2.66569 8.66043V11.3271C2.66569 12.7998 3.85969 13.9938 5.33236 13.9938H10.6657C12.1384 13.9938 13.3324 12.7998 13.3324 11.3271V8.66043C13.7004 8.66043 13.999 8.36177 13.999 7.99377V5.3271C13.999 4.9591 13.7004 4.66044 13.3324 4.66044H12.6657C12.6657 3.18777 11.4717 1.99377 9.99902 1.99377C9.19169 1.99377 8.48836 2.36444 7.99902 2.93111C7.50969 2.36444 6.80636 1.99377 5.99902 1.99377ZM5.99902 3.32711C6.73569 3.32711 7.33236 3.92377 7.33236 4.66044H4.66569C4.66569 3.92377 5.26236 3.32711 5.99902 3.32711ZM9.99902 3.32711C10.7357 3.32711 11.3324 3.92377 11.3324 4.66044H8.66569C8.66569 3.92377 9.26236 3.32711 9.99902 3.32711ZM3.33236 5.99377H12.6657V7.3271H3.33236C3.33236 6.84777 3.33236 6.4731 3.33236 5.99377ZM3.99902 8.66043H7.33236V12.6604H5.33236C4.59569 12.6604 3.99902 12.0638 3.99902 11.3271V8.66043ZM8.66569 8.66043H11.999V11.3271C11.999 12.0638 11.4024 12.6604 10.6657 12.6604H8.66569V8.66043Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+var ReferralCodeForm = (props) => {
+  const { type, isReview } = props;
+  const { t } = useTranslation();
+  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 } = useMemo(() => {
+    switch (type) {
+      case "create" /* Create */:
+        return {
+          title: t("affiliate.referralCode.create.modal.title"),
+          description: t("affiliate.referralCode.create.warning"),
+          buttonText: t("affiliate.confirmAndGenerate")
+        };
+      case "edit" /* Edit */:
+        return {
+          title: isEditingRefereeRebateRate ? t("affiliate.refereeRebateRate.modal.title", {
+            accountId: formatAddress(props.accountId)
+          }) : t("affiliate.referralCode.edit.modal.title"),
+          description: isEditingRefereeRebateRate ? isReview ? t("affiliate.refereeRebateRate.review.warning") : t("affiliate.refereeRebateRate.edit.warning") : isReview ? t("affiliate.rebateRate.review.warning") : t("affiliate.rebateRate.edit.warning"),
+          buttonText: isReview ? t("affiliate.confirmChanges") : t("affiliate.review")
+        };
+      case "reset" /* Reset */:
+        return {
+          title: t("affiliate.resetRebateRate.modal.title"),
+          description: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("affiliate.resetRebateRate.modal.description", {
+            accountId: formatAddress(props.accountId)
+          }) }),
+          buttonText: t("common.reset")
+        };
+      default:
+        return {
+          title: "",
+          description: "",
+          buttonText: ""
+        };
+    }
+  }, [t, type, isEditingRefereeRebateRate, isReview, props.accountId]);
+  const titleView = /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 3, children: [
+    /* @__PURE__ */ jsx(Text, { size: "base", intensity: 98, children: title }),
+    /* @__PURE__ */ jsx(Divider, { intensity: 8, className: "oui-w-full" })
+  ] });
+  const descriptionView = /* @__PURE__ */ jsx(WarningBox, { children: description });
+  const referralCodeInput = /* @__PURE__ */ jsx(
+    ReferralCodeInput,
+    {
+      value: props.newCode,
+      onChange: props.setNewCode,
+      autoFocus: props.focusField === "referralCode" /* ReferralCode */,
+      disabled: isReview || hasBoundReferee
+    }
+  );
+  const commissionConfiguration = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("affiliate.commissionConfiguration") }),
+    !isReview && /* @__PURE__ */ jsxs(Text, { size: "2xs", intensity: 54, children: [
+      t("affiliate.totalCommissionAvailable"),
+      ":",
+      " ",
+      /* @__PURE__ */ jsxs(Text, { className: "oui-text-warning", children: [
+        props.maxRebatePercentage,
+        "%"
+      ] })
+    ] })
+  ] });
+  const rebateRateSlider = /* @__PURE__ */ jsx(
+    RebateRateSlider,
+    {
+      value: props.referrerRebatePercentage,
+      restValue: props.refereeRebatePercentage,
+      onChange: props.setReferrerRebatePercentage,
+      max: props.maxRebatePercentage,
+      disabled: noCommissionAvailable || isReview || isReset,
+      disabledIncrease: hasBoundReferee,
+      directBonusRebateRate: props.directBonusRebateRate,
+      noCommissionAvailable
+    }
+  );
+  const refereeInfo = /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", gap: 2, children: [
+    /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("affiliate.referees") }),
+    /* @__PURE__ */ jsx(Text.formatted, { rule: "address", size: "2xs", intensity: 98, children: props.accountId })
+  ] });
+  const noCommissionAvailableWarning = noCommissionAvailable && /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-warning", children: isEditingRefereeRebateRate ? t("affiliate.rebateRate.noCommissionRate") : t("affiliate.rebateRate.noCommissionAvailable") });
+  const resetRebateRateLabel = /* @__PURE__ */ jsxs(Text, { size: "2xs", intensity: 98, className: "oui-text-start", children: [
+    t("affiliate.resetRebateRate.rateAfterReset"),
+    ":"
+  ] });
+  const buttons = /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 2, width: "100%", mt: 0, pt: 5, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "contained",
+        color: "gray",
+        fullWidth: true,
+        onClick: props.close,
+        size: "md",
+        children: t("common.cancel")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        onClick: props.onClick,
+        disabled: props.buttonDisabled || props.isMutating,
+        loading: props.isMutating,
+        size: "md",
+        children: buttonText
+      }
+    )
+  ] });
+  const renderContent = () => {
+    switch (type) {
+      case "create" /* Create */:
+        return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
+          commissionConfiguration,
+          rebateRateSlider,
+          noCommissionAvailableWarning,
+          buttons
+        ] });
+      case "edit" /* Edit */:
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          isEditingRefereeRebateRate ? refereeInfo : referralCodeInput,
+          /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
+            commissionConfiguration,
+            rebateRateSlider,
+            noCommissionAvailableWarning,
+            buttons
+          ] })
+        ] });
+      case "reset" /* Reset */:
+        return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
+          resetRebateRateLabel,
+          rebateRateSlider,
+          buttons
+        ] });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      gap: 6,
+      className: "oui-font-semibold",
+      children: [
+        titleView,
+        descriptionView,
+        renderContent()
+      ]
+    }
+  );
+};
+var NoCommissionCard = (props) => {
+  const { t } = useTranslation();
+  const amount = props.directBonusRebateRate;
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: 2,
+      mt: 2,
+      width: "100%",
+      p: 4,
+      r: "lg",
+      className: "oui-border oui-border-base-contrast/[0.08] oui-tracking-[0.03em]",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", itemAlign: "center", children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
+            /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("affiliate.noCommissionCard.title") }),
+            /* @__PURE__ */ jsxs(Text, { size: "lg", className: "oui-text-primary-light oui-font-semibold", children: [
+              "+ ",
+              amount,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(GiftIcon, { size: 24, className: "oui-shrink-0 oui-text-primary-light" })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 98, className: "oui-leading-[15px]", children: t("affiliate.noCommissionCard.content", { amount }) })
+      ]
+    }
+  );
+};
+var RebateRateSlider = (props) => {
+  const { t } = useTranslation();
+  const [maxValue] = useState(props.value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !props.disabled && /* @__PURE__ */ jsx(Box, { width: "100%", my: 2, children: /* @__PURE__ */ jsx(
+      Slider,
+      {
+        min: 0,
+        max: props.max,
+        step: 1,
+        value: [props.value],
+        onValueChange: (value) => {
+          const newValue = value[0];
+          props.onChange(
+            props.disabledIncrease ? Math.min(newValue, maxValue) : newValue
+          );
+        },
+        classNames: {
+          range: "oui-bg-success-darken oui-h-2 oui-top-[0px]",
+          trackInner: "oui-bg-success-darken/30 oui-h-2 oui-top-[0px]",
+          thumb: "oui-border-[#d9d9d9] oui-bg-[#d9d9d9] oui-size-4"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "oui-w-full", children: [
+      /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("affiliate.youKeep") }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("affiliate.refereesGet") })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", children: [
+        /* @__PURE__ */ jsxs(Text.formatted, { size: "lg", className: "oui-text-success-darken", children: [
+          props.value,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxs(Text.formatted, { size: "lg", className: "oui-text-success-darken/50", children: [
+          props.restValue,
+          "%"
+        ] })
+      ] }),
+      props.noCommissionAvailable ? /* @__PURE__ */ jsx(
+        NoCommissionCard,
+        {
+          directBonusRebateRate: props.directBonusRebateRate
+        }
+      ) : props.directBonusRebateRate != null && props.directBonusRebateRate > 0 && /* @__PURE__ */ jsxs(Flex, { gap: 2, mt: 2, width: "100%", children: [
+        /* @__PURE__ */ jsx(
+          GiftIcon,
+          {
+            size: 16,
+            className: "oui-text-base-contrast oui-mt-[1px]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "base",
+            intensity: 54,
+            as: "span",
+            className: "oui-inline-flex oui-items-center oui-gap-1 oui-tracking-[0.03em]",
+            children: /* @__PURE__ */ jsx(
+              Trans,
+              {
+                i18nKey: "affiliate.extraBonusOnDirectReferrals",
+                values: { amount: props.directBonusRebateRate },
+                components: [/* @__PURE__ */ jsx(Text, { as: "span", color: "primaryLight" }, "0")]
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var ReferralCodeInput = (props) => {
+  const { t } = useTranslation();
+  const hasSetCursorToEnd = useRef(false);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      type: "text",
+      fullWidth: true,
+      label: t("affiliate.referralCode.editCodeModal.label"),
+      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: [
+        inputFormatter.createRegexInputFormatter((value) => {
+          return String(value).replace(
+            /[a-z]/g,
+            (char) => char.toUpperCase()
+          );
+        }),
+        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"
+      },
+      maxLength: 10,
+      minLength: 4,
+      autoComplete: "off",
+      disabled: props.disabled,
+      autoFocus: props.autoFocus
+    }
+  );
+};
+var WarningBox = (props) => {
+  const { children } = props;
+  if (typeof children === "string") {
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        className: "oui-bg-warning/10",
+        justify: "start",
+        itemAlign: "start",
+        gap: 1,
+        r: "lg",
+        p: 3,
+        children: [
+          /* @__PURE__ */ jsx(WarningIcon, { className: "oui-shrink-0 oui-text-warning" }),
+          /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children })
+        ]
+      }
+    );
+  }
+  return children;
+};
+var ReferralCodeFormWidget = (props) => {
+  const state = useReferralCodeFormScript(props);
+  return /* @__PURE__ */ jsx(ReferralCodeForm, { ...state, ...props });
+};
+
+// src/pages/multiLevel/affiliate/referralCodeForm/modal.ts
+var ReferralCodeFormDialogId = "ReferralCodeFormDialogId";
+var ReferralCodeFormSheetId = "ReferralCodeFormSheetId";
+registerSimpleDialog(ReferralCodeFormDialogId, ReferralCodeFormWidget, {
+  size: "sm",
+  classNames: {
+    content: "oui-border oui-border-line-6",
+    body: "!oui-pt-3"
+  }
+});
+registerSimpleSheet(ReferralCodeFormSheetId, ReferralCodeFormWidget);
+var TradingVolumeProgress = (props) => {
+  const { t } = useTranslation();
+  const { classNames } = props;
+  const { volumePrerequisite } = useReferralContext();
+  const { routerAdapter } = useScaffoldContext();
+  const { current_volume = 0, required_volume = 0 } = volumePrerequisite || {};
+  const progressPercentage = useMemo(() => {
+    if (required_volume === 0) return 0;
+    const percentage = new Decimal(current_volume).div(required_volume).mul(100).toNumber();
+    return Math.min(percentage, 100);
+  }, [current_volume, required_volume]);
+  const formatRequiredVolume = useMemo(() => {
+    return parseNumber(required_volume, {
+      rule: "price",
+      dp: 0
+    });
+  }, [required_volume]);
+  const gotoTrade = () => {
+    routerAdapter?.onRouteChange?.({
+      href: "/perp",
+      name: "Perp"
+    });
+  };
+  return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", gap: 4, className: classNames?.root, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: "sm",
+        intensity: 54,
+        className: cn("oui-text-center", classNames?.description),
+        children: t("affiliate.newReferralProgram.tradeUnlock.description", {
+          volume: formatRequiredVolume
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", gap: 2, children: [
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          width: "100%",
+          justify: "between",
+          className: "oui-text-2xs oui-text-base-contrast",
+          children: [
+            /* @__PURE__ */ jsx(Text, { children: t("common.current") }),
+            /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+              /* @__PURE__ */ jsx(Text.numeral, { rule: "price", dp: 0, children: current_volume }),
+              /* @__PURE__ */ jsx(
+                Text.numeral,
+                {
+                  intensity: 54,
+                  rule: "price",
+                  dp: 0,
+                  prefix: "/ ",
+                  suffix: " USDC",
+                  children: required_volume
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "oui-h-[8px] oui-w-full oui-rounded-full oui-bg-base-contrast-4", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: `${progressPercentage}%`
+          },
+          className: cn(
+            "oui-h-full oui-rounded-l-full oui-bg-primary-light",
+            progressPercentage === 100 && "oui-rounded-r-full"
+          )
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { size: "md", onClick: gotoTrade, ...props.buttonProps, children: t("affiliate.newReferralProgram.tradeUnlock") })
+  ] });
+};
+var Hero = () => {
+  const { t } = useTranslation();
+  const { state } = useAccount();
+  const { wrongNetwork } = useAppContext();
+  const status = state.status;
+  const {
+    isMultiLevelReferralUnlocked,
+    isMultiLevelEnabled,
+    multiLevelRebateInfo,
+    multiLevelRebateInfoMutate,
+    maxRebateRate
+  } = useReferralContext();
+  const onCreateReferralCode = () => {
+    modal.show(ReferralCodeFormDialogId, {
+      type: "create" /* Create */,
+      maxRebateRate,
+      directBonusRebateRate: 10,
+      // Hardcoded value before API is ready
+      onSuccess: () => {
+        multiLevelRebateInfoMutate();
+      }
+    });
+  };
+  const description = useMemo(() => {
+    if (wrongNetwork) {
+      return t("affiliate.wrongNetwork.description");
+    }
+    if (status === AccountStatusEnum.NotConnected) {
+      return t("affiliate.newReferralProgram.description");
+    }
+    if (status > AccountStatusEnum.Connected && status < AccountStatusEnum.EnableTrading) {
+      return t("affiliate.setUpAccount.description");
+    }
+    if (!isMultiLevelReferralUnlocked) {
+      return "";
+    }
+    return t("affiliate.newReferralProgram.description");
+  }, [t, wrongNetwork, status]);
+  const renderContent = () => {
+    if (!isMultiLevelReferralUnlocked) {
+      return /* @__PURE__ */ jsx(
+        TradingVolumeProgress,
+        {
+          classNames: {
+            root: "oui-items-start",
+            description: "!oui-text-start"
+          },
+          buttonProps: {
+            size: "xl"
+          }
+        }
+      );
+    }
+    if (isMultiLevelEnabled && !multiLevelRebateInfo?.referral_code) {
+      return /* @__PURE__ */ jsx(Button, { size: "lg", className: "oui-px-4", onClick: onCreateReferralCode, children: t("affiliate.referralCode.create") });
+    }
+    return "";
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      gap: 8,
+      className: "oui-flex-col-reverse md:oui-flex-row",
+      id: "oui-affiliate-landing-hero",
+      itemAlign: "center",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 6, className: "oui-flex-1", children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              direction: "column",
+              gap: 3,
+              itemAlign: "start",
+              id: "oui-affiliate-landing-hero-title",
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  weight: "semibold",
+                  className: "oui-text-[32px] oui-leading-tight md:oui-text-[48px]",
+                  children: t("affiliate.landing.title")
+                }
+              )
+            }
+          ),
+          description && /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: description }),
+          /* @__PURE__ */ jsx(
+            AuthGuard,
+            {
+              labels: {
+                connectWallet: t("affiliate.connectWallet"),
+                signin: t("affiliate.setUpAccount"),
+                enableTrading: t("affiliate.setUpAccount")
+              },
+              children: renderContent()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "https://oss.orderly.network/static/sdk/referral/network-diagram.png",
+            alt: "Network diagram",
+            className: "oui-size-[335px] oui-object-cover md:oui-size-[480px]",
+            id: "oui-affiliate-landing-network-diagram"
+          }
+        )
+      ]
+    }
+  );
+};
+var StepCard = (props) => {
+  const { step, icon, title, description } = props;
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: 3,
+      r: "2xl",
+      p: 5,
+      itemAlign: "start",
+      className: "oui-bg-base-9",
+      children: [
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            justify: "center",
+            className: "oui-rounded-full oui-bg-base-7 lg:oui-justify-start",
+            p: 3,
+            width: 48,
+            height: 48,
+            itemAlign: "center",
+            children: renderIcon(icon)
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xl", weight: "semibold", children: `${step}. ${title}` }),
+        /* @__PURE__ */ jsx(Text, { intensity: 54, size: "sm", children: description })
+      ]
+    }
+  );
+};
+var renderIcon = (iconType) => {
+  switch (iconType) {
+    case "wallet":
+      return /* @__PURE__ */ jsx(WalletIcon, {});
+    case "settings":
+      return /* @__PURE__ */ jsx(SettingsIcon, {});
+    case "rocket":
+      return /* @__PURE__ */ jsx(RocketIcon, {});
+    default:
+      return null;
+  }
+};
+var WalletIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M7.006 2.93a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10c1.552 0 3-1.448 3-3l-.004-1.163a3.025 3.025 0 0 0 2.004-2.837v-4c0-1.268-.822-2.428-1.994-2.815l-.006-1.185c0-1.553-1.448-3-3-3zm0 2h10c.448 0 1 .552 1 1v1h-3a3 3 0 0 0-3 3v4a3 3 0 0 0 3 3h3v1c0 .447-.552 1-1 1h-10a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2m8 4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1m2 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2",
+        fill: "#fff",
+        fillOpacity: ".54"
+      }
+    )
+  }
+);
+var SettingsIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M14.99 2.93c-1.267 0-2.45.832-2.818 2.002L3.99 4.93a1 1 0 0 0 0 2l8.18-.001c.449 1.225 1.552 2 2.82 2s2.382-.777 2.838-2.008l2.162.009a1 1 0 0 0 0-2h-2.17c-.482-1.22-1.562-2-2.83-2m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-6 4c-1.317 0-2.42.82-2.823 2.002-.14.009-2.176-.002-2.176-.002a1 1 0 0 0 0 2s2.052-.021 2.18-.008a2.95 2.95 0 0 0 2.82 2.008c1.268 0 2.354-.777 2.83-1.997l8.17-.003a1 1 0 0 0 0-2l-8.176-.01A3.01 3.01 0 0 0 8.99 8.93m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2m6 4c-1.267 0-2.427.835-2.819 1.99l-8.18.01a1 1 0 0 0 0 2h8.165a3.02 3.02 0 0 0 2.835 2c1.268 0 2.36-.793 2.842-2h2.158a1 1 0 0 0 0-2l-2.167-.006a3.03 3.03 0 0 0-2.833-1.994m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2",
+        fill: "#fff",
+        fillOpacity: ".54"
+      }
+    )
+  }
+);
+var RocketIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M18.527 13.88c-.423.424-.884.808-1.345 1.154a.63.63 0 0 0-.269.423 9.2 9.2 0 0 1-2.459 4.346 10 10 0 0 1-1.883 1.462c-.576.346-1.268-.231-1.037-.885.384-1 .538-2.076.538-3.192-.077 0-.192.039-.27.039a39 39 0 0 1-2.612-2.423 51 51 0 0 1-2.42-2.615c0-.077.038-.193.038-.27-1.115 0-2.19.193-3.19.539-.614.23-1.23-.462-.883-1.039a10 10 0 0 1 1.46-1.884 9.2 9.2 0 0 1 4.342-2.461c.153-.039.307-.154.422-.27.346-.5.73-.923 1.153-1.346 2.997-3 7.185-4.038 11.066-3.153a.76.76 0 0 1 .538.538c.845 3.846-.192 8.038-3.189 11.038m-1.69-6.73a2.41 2.41 0 0 0-3.382 0 2.416 2.416 0 0 0 0 3.385 2.41 2.41 0 0 0 3.381 0c.96-.962.96-2.462 0-3.385M8.266 18.92c-.73.73-5.225 3.807-6.109 2.923-.884-.885 2.19-5.385 2.92-6.115s2.037-.616 2.92.269c.884.885 1 2.192.27 2.923",
+        fill: "#fff",
+        fillOpacity: ".54"
+      }
+    )
+  }
+);
+var HowItWorks = () => {
+  const { t } = useTranslation();
+  const steps = useMemo(() => {
+    return [
+      {
+        step: 1,
+        icon: "wallet",
+        title: t("affiliate.howItWorks.step1.title"),
+        description: t("affiliate.howItWorks.step1.description")
+      },
+      {
+        step: 2,
+        icon: "settings",
+        title: t("affiliate.howItWorks.step2.title"),
+        description: t("affiliate.howItWorks.step2.description")
+      },
+      {
+        step: 3,
+        icon: "rocket",
+        title: t("affiliate.howItWorks.step3.title"),
+        description: t("affiliate.howItWorks.step3.description")
+      }
+    ];
+  }, [t]);
+  return /* @__PURE__ */ jsxs(Box, { id: "oui-affiliate-landing-how-it-works", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
+      /* @__PURE__ */ jsx(Text, { weight: "semibold", className: "oui-text-[32px]", children: t("affiliate.howItWorks.title") }),
+      /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(Text, { intensity: 54, children: t("affiliate.howItWorks.description") }) })
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { className: "oui-grid-cols-1 md:oui-grid-cols-3", gap: 6, children: steps.map((step) => /* @__PURE__ */ jsx(
+      StepCard,
+      {
+        step: step.step,
+        icon: step.icon,
+        title: step.title,
+        description: step.description
+      },
+      step.step
+    )) })
+  ] });
+};
+var LandingPage = () => {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      id: "oui-affiliate-landing-page",
+      direction: "column",
+      gap: 10,
+      itemAlign: "stretch",
+      className: "oui-mx-auto oui-w-full oui-p-5 md:oui-w-[1040px] md:oui-py-12",
+      children: [
+        /* @__PURE__ */ jsx(Hero, {}),
+        /* @__PURE__ */ jsx(HowItWorks, {}),
+        /* @__PURE__ */ jsx(Faq, {})
+      ]
+    }
+  );
+};
+var CommissionChart = (props) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      id: "oui-affiliate-affiliate-titleStatistic",
+      r: "2xl",
+      p: 6,
+      width: "100%",
+      gap: 4,
+      direction: "column",
+      className: "oui-border oui-border-line-6 oui-bg-base-9",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", children: [
+          /* @__PURE__ */ jsx(Text, { size: "lg", children: `${t("affiliate.commission")} (USDC)` }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Select.options,
+            {
+              size: "xs",
+              value: props.period,
+              onValueChange: props.onPeriodChange,
+              options: props.periodTypes
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(Flex, { className: "oui-flex oui-h-[170px] oui-w-full oui-flex-row oui-items-stretch 2xl:oui-h-[196px]", children: /* @__PURE__ */ jsx(
+          VolBarChart,
+          {
+            data: props.dataSource,
+            colors: { fill: "rgba(0, 180, 158, 1)" },
+            className: "oui-w-full oui-flex-1",
+            tooltip: {
+              rm: Decimal.ROUND_DOWN,
+              dp: 2
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+function fillData(days, origin) {
+  const now = Date();
+  const result = new Array(days).fill(0).map((_, index) => {
+    return {
+      date: format(subDays(now, index + 1), "yyyy-MM-dd"),
+      volume: 0,
+      opacity: 0
+    };
+  }).reverse();
+  const dataObject = origin?.reduce(
+    (acc, curr) => {
+      acc[curr.date] = curr;
+      return acc;
+    },
+    {}
+  );
+  for (let index = 0; index < result.length; index++) {
+    const element = result[index];
+    const originData = dataObject?.[element.date];
+    if (originData) {
+      result[index] = { ...originData, opacity: originData.volume > 0 ? 1 : 0 };
+    }
+  }
+  return result;
+}
+
+// src/pages/multiLevel/affiliate/commissionChart/commissionChart.script.tsx
+var useCommissionChartScript = () => {
+  const { t } = useTranslation();
+  const [period, setPeriod] = useState("90");
+  const periodTypes = useMemo(() => {
+    return [
+      { label: t("common.select.7d"), value: "7" },
+      { label: t("common.select.30d"), value: "30" },
+      { label: t("common.select.90d"), value: "90" }
+    ];
+  }, [t]);
+  const onPeriodChange = (item) => {
+    setPeriod(item);
+  };
+  const dateRange = useMemo(() => {
+    const days = Number(period) || 7;
+    const now = /* @__PURE__ */ new Date();
+    return {
+      startDate: subDays(now, days),
+      endDate: subDays(now, 1)
+    };
+  }, [period]);
+  const [rebateSummary] = useReferralRebateSummary({
+    startDate: format(dateRange.startDate, "yyyy-MM-dd"),
+    endDate: format(dateRange.endDate, "yyyy-MM-dd"),
+    size: Number(period)
+  });
+  const dataSource = useMemo(() => {
+    const data = (rebateSummary || [])?.map(
+      (item) => ({
+        date: item.date,
+        volume: item.direct_rebate + item.indirect_rebate + item.direct_bonus_rebate
+      })
+    ) || [];
+    data.reverse();
+    return fillData(Number(period), data);
+  }, [rebateSummary, period]);
+  return {
+    period,
+    periodTypes,
+    onPeriodChange,
+    dataSource
+  };
+};
+var CommissionChartWidget = () => {
+  const state = useCommissionChartScript();
+  return /* @__PURE__ */ jsx(CommissionChart, { ...state });
+};
+var MultiLevelReferral = (props) => {
+  const { isMultiLevelReferralUnlocked } = props;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      r: "2xl",
+      width: "100%",
+      height: "100%",
+      gap: 4,
+      p: 5,
+      direction: "column",
+      intensity: 900,
+      className: "oui-border oui-border-line-6",
+      children: [
+        /* @__PURE__ */ jsx(Text, { size: "lg", className: "oui-w-full oui-text-start", children: t("affiliate.referral") }),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            width: "100%",
+            height: "100%",
+            direction: "column",
+            itemAlign: "center",
+            justify: "center",
+            gap: 4,
+            children: [
+              /* @__PURE__ */ jsx(MultiLevelReferralIcon, { className: "oui-text-primary-light" }),
+              /* @__PURE__ */ jsx(Text, { size: "base", intensity: 98, children: t("affiliate.newReferralProgram.title") }),
+              isMultiLevelReferralUnlocked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, className: "oui-text-center", children: t("affiliate.newReferralProgram.description") }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "md",
+                    className: "oui-px-16",
+                    onClick: props.createReferralCode,
+                    children: t("affiliate.referralCode.create")
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx(
+                TradingVolumeProgress,
+                {
+                  buttonProps: {
+                    className: "oui-px-16"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var MultiLevelReferralIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: 64,
+    height: 64,
+    viewBox: "0 0 64 64",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: 64, height: 64, rx: 32, fill: "rgb(var(--oui-color-base-8))" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M28.822 23.24a.86.86 0 0 1 .607-.24h5.142c.228 0 .446.086.607.24a.8.8 0 0 1 .25.579v3.28a.8.8 0 0 1-.25.578.88.88 0 0 1-.607.24h-1.719v3.259h7.714c.228 0 .446.086.606.24a.8.8 0 0 1 .251.578v4.094h1.72c.227 0 .445.086.606.24a.8.8 0 0 1 .251.578v3.275a.8.8 0 0 1-.251.58.88.88 0 0 1-.606.239H38a.88.88 0 0 1-.606-.24.8.8 0 0 1-.251-.579v-3.274a.8.8 0 0 1 .25-.58.88.88 0 0 1 .607-.24h1.71v-3.274h-6.858v3.275h1.72c.227 0 .445.086.605.24a.8.8 0 0 1 .252.578v3.275a.8.8 0 0 1-.252.58.88.88 0 0 1-.606.239H29.43a.88.88 0 0 1-.606-.24.8.8 0 0 1-.252-.579v-3.274a.8.8 0 0 1 .252-.58.88.88 0 0 1 .606-.24h1.709v-3.274H24.28v3.275H26c.227 0 .445.086.606.24a.8.8 0 0 1 .251.578v3.275a.8.8 0 0 1-.25.58A.88.88 0 0 1 26 41h-5.143a.88.88 0 0 1-.606-.24.8.8 0 0 1-.251-.579v-3.274a.8.8 0 0 1 .251-.58.88.88 0 0 1 .606-.24h1.71v-4.093a.8.8 0 0 1 .25-.579.88.88 0 0 1 .606-.24h7.715v-3.258h-1.71a.88.88 0 0 1-.605-.24.8.8 0 0 1-.252-.579V23.82q0-.163.065-.313a.8.8 0 0 1 .186-.268"
+        }
+      )
+    ]
+  }
+);
+var useMultiLevelReferralScript = () => {
+  const {
+    isMultiLevelReferralUnlocked,
+    maxRebateRate,
+    multiLevelRebateInfoMutate
+  } = useReferralContext();
+  const createReferralCode = () => {
+    modal.show(ReferralCodeFormDialogId, {
+      type: "create" /* Create */,
+      maxRebateRate,
+      directBonusRebateRate: 10,
+      // Hardcoded value before API is ready
+      onSuccess: () => {
+        multiLevelRebateInfoMutate();
+      }
+    });
+  };
+  return {
+    isMultiLevelReferralUnlocked,
+    createReferralCode
+  };
+};
+var MultiLevelReferralWidget = () => {
+  const state = useMultiLevelReferralScript();
+  return /* @__PURE__ */ jsx(MultiLevelReferral, { ...state });
+};
+var ReferralInfo = (props) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      id: "oui-affiliate-affiliate-referralLink",
+      r: "2xl",
+      width: "100%",
+      height: "100%",
+      gap: 4,
+      p: 5,
+      direction: "column",
+      intensity: 900,
+      className: "oui-border oui-border-line-6",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
+          /* @__PURE__ */ jsx(Text, { size: "lg", children: t("affiliate.referral") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "xs",
+              color: "secondary",
+              onClick: () => props.onEdit("referralCode" /* ReferralCode */),
+              children: t("affiliate.configure")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Container, { className: "oui-flex-col oui-items-start oui-gap-4 oui-p-5", children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              r: "full",
+              px: 2,
+              height: 20,
+              justify: "center",
+              itemAlign: "center",
+              className: "oui-border oui-border-primary-light",
+              children: /* @__PURE__ */ jsx(Text, { intensity: 98, className: "oui-text-[10px] oui-leading-[10px]", children: t("affiliate.multiLevel") })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
+            /* @__PURE__ */ jsx(Text, { size: "lg", color: "primaryLight", children: props.referralCode }),
+            /* @__PURE__ */ jsx(CopyButton, { value: props.referralCode })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Container, { className: "oui-p-5", children: [
+          /* @__PURE__ */ jsx(Text, { size: "lg", color: "primaryLight", children: props.referralLink }),
+          /* @__PURE__ */ jsx(CopyButton, { value: props.referralLink })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            width: "100%",
+            r: "2xl",
+            className: "oui-bg-base-contrast-4 oui-p-5 md:oui-py-7",
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", children: t("affiliate.revenueSplitStrategy") }),
+                /* @__PURE__ */ jsx(Button, { size: "xs", color: "secondary", onClick: () => props.onEdit(), children: t("common.edit") })
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", mt: 4, children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("affiliate.youKeep") }),
+                /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("affiliate.refereesGet") })
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", mt: 2, children: [
+                /* @__PURE__ */ jsxs(Text.formatted, { size: "3xl", intensity: 80, children: [
+                  props.referrerRebateRate,
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsxs(Text.formatted, { size: "3xl", intensity: 36, children: [
+                  props.refereeRebateRate,
+                  "%"
+                ] })
+              ] }),
+              props.directBonusRebateRate > 0 && /* @__PURE__ */ jsxs(Flex, { gap: 2, mt: 4, width: "100%", className: "oui-items-center", children: [
+                /* @__PURE__ */ jsx(
+                  GiftIcon,
+                  {
+                    size: 16,
+                    className: "oui-shrink-0 oui-text-base-contrast oui-mt-[1px]"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    intensity: 54,
+                    as: "span",
+                    className: "oui-flex-1 oui-min-w-0 oui-tracking-[0.03em]",
+                    children: /* @__PURE__ */ jsx(
+                      Trans,
+                      {
+                        i18nKey: "affiliate.extraBonusOnDirectReferrals",
+                        values: { amount: props.directBonusRebateRate },
+                        components: [/* @__PURE__ */ jsx(Text, { as: "span", color: "primaryLight" }, "0")]
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Container = (props) => {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      width: "100%",
+      justify: "between",
+      px: 5,
+      r: "2xl",
+      className: cn("oui-bg-base-contrast-4", props.className),
+      children: props.children
+    }
+  );
+};
+var CopyButton = (props) => {
+  const { t } = useTranslation();
+  const onCopy = () => {
+    if (!props.value) return;
+    navigator.clipboard.writeText(props.value);
+    toast.success(t("common.copy.copied"));
+  };
+  return /* @__PURE__ */ jsx(Button, { size: "xs", color: "secondary", onClick: onCopy, children: t("common.copy") });
+};
+function generateReferralLink(referralLinkUrl, code) {
+  return `${referralLinkUrl || window?.location?.origin}?ref=${code}`;
+}
+async function copyText(content) {
+  try {
+    await navigator.clipboard.writeText(content);
+    toast.success(i18n.t("common.copy.copied"));
+  } catch (error) {
+    toast.success(i18n.t("common.copy.failed"));
+  }
+}
+function formatDateTimeToUTC(input) {
+  if (input === void 0) {
+    return "";
+  }
+  const date = toDate(input);
+  const utcDate = toUTCDate(date);
+  return format(utcDate, "yyyy-MM-dd HH:mm:ss 'UTC'");
+}
+function formatYMDTime(time) {
+  if (time === void 0) {
+    return void 0;
+  }
+  const date = toDate(time);
+  const utcDate = toUTCDate(date);
+  return format(utcDate, "yyyy-MM-dd");
+}
+function compareDate(d1, d2) {
+  const isEqual = d1 && d2 && d1.toISOString().substring(0, 10) === d2.toISOString().substring(0, 10);
+  return isEqual;
+}
+function toUTCDate(date) {
+  return new Date(date.toUTCString());
+}
+
+// src/pages/multiLevel/affiliate/referralInfo/referralInfo.script.tsx
+var useReferralInfoScript = () => {
+  const {
+    referralLinkUrl,
+    multiLevelRebateInfo,
+    multiLevelRebateInfoMutate,
+    maxRebateRate
+  } = useReferralContext();
+  const referralCode = multiLevelRebateInfo?.referral_code;
+  const referralLink = useMemo(() => {
+    if (!referralCode) return "";
+    return generateReferralLink(referralLinkUrl, referralCode);
+  }, [referralCode]);
+  const referrerRebateRate = useMemo(() => {
+    return new Decimal(multiLevelRebateInfo?.referrer_rebate_rate || 0).mul(100).toNumber();
+  }, [multiLevelRebateInfo]);
+  const refereeRebateRate = useMemo(() => {
+    return new Decimal(multiLevelRebateInfo?.referee_rebate_rate || 0).mul(100).toNumber();
+  }, [multiLevelRebateInfo]);
+  const directBonusRebateRate = useMemo(() => {
+    return new Decimal(multiLevelRebateInfo?.direct_bonus_rebate_rate ?? 0).mul(100).toNumber();
+  }, [multiLevelRebateInfo]);
+  const onEdit = (focusField) => {
+    modal.show(ReferralCodeFormDialogId, {
+      type: "edit" /* Edit */,
+      focusField,
+      referralCode: multiLevelRebateInfo?.referral_code,
+      maxRebateRate,
+      referrerRebateRate: multiLevelRebateInfo?.referrer_rebate_rate,
+      directInvites: multiLevelRebateInfo?.direct_invites,
+      directBonusRebateRate,
+      onSuccess: () => {
+        multiLevelRebateInfoMutate();
+      }
+    });
+  };
+  return {
+    onEdit,
+    referralCode,
+    referralLink,
+    multiLevelRebateInfo,
+    referrerRebateRate,
+    refereeRebateRate,
+    directBonusRebateRate
+  };
+};
+var ReferralInfoWidget = () => {
+  const state = useReferralInfoScript();
+  return /* @__PURE__ */ jsx(ReferralInfo, { ...state });
+};
+var useReferrerTableScript = () => {
+  const [activeTab, _setActiveTab] = useState("commission");
+  const setActiveTab = (tab) => _setActiveTab(tab);
+  return {
+    activeTab,
+    setActiveTab
+  };
+};
+var useReferralHistory = (params) => {
+  const { size, startDate, endDate, page, fetchAll, enabled = true } = params;
+  const query = useMemo(() => {
+    if (!enabled) return null;
+    const search = new URLSearchParams({
+      ...startDate ? { start_date: startDate } : {},
+      ...endDate ? { end_date: endDate } : {},
+      ...!fetchAll && page !== void 0 ? { page: String(page) } : {},
+      ...!fetchAll && size !== void 0 ? { size: String(size) } : {}
+    });
+    const qs = search.toString();
+    return qs ? `/v1/referral/referral_history?${qs}` : "/v1/referral/referral_history";
+  }, [enabled, endDate, fetchAll, page, size, startDate]);
+  const response = usePrivateQuery(query, {
+    formatter: (data) => data,
+    revalidateOnFocus: false
+  });
+  const loadMore = () => {
+  };
+  const meta = useMemo(() => {
+    const payload = response.data?.data ?? response.data;
+    if (payload?.meta) return payload.meta;
+    if (!payload?.rows) return void 0;
+    return {
+      total: payload.rows.length,
+      records_per_page: payload.rows.length,
+      current_page: 1
+    };
+  }, [response.data]);
+  const total = useMemo(() => {
+    if (typeof meta?.total === "number") return meta.total;
+    return 0;
+  }, [meta]);
+  const flattenRows = useMemo(() => {
+    if (!response.data) return null;
+    const payload = response.data?.data ?? response.data;
+    return payload?.rows ?? null;
+  }, [response.data]);
+  return [
+    flattenRows,
+    {
+      total,
+      isLoading: response.isLoading,
+      refresh: response.mutate,
+      loadMore,
+      meta
+    }
+  ];
+};
+
+// src/pages/multiLevel/affiliate/referrerTable/commissionTable/commissionTable.script.tsx
+var useCommissionTableScript = (props = {}) => {
+  const { enabled = true } = props;
+  const { isMobile } = useScreen();
+  const { state } = useAccount();
+  const [dateRange, setDateRange] = useState({
+    from: subDays(/* @__PURE__ */ new Date(), 30),
+    to: /* @__PURE__ */ new Date()
+  });
+  const { page, pageSize, parsePagination } = usePagination();
+  const [sort, setSort] = useState(null);
+  const [data, { meta, isLoading: isDataLoading }] = useReferralHistory({
+    enabled: enabled && state.status >= AccountStatusEnum.EnableTrading,
+    startDate: dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : void 0,
+    endDate: dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : void 0,
+    page: isMobile ? void 0 : page,
+    size: isMobile ? void 0 : pageSize,
+    fetchAll: isMobile
+  });
+  const pagination = useMemo(() => {
+    return parsePagination(meta);
+  }, [meta, parsePagination]);
+  const commissionData = useMemo(() => {
+    if (!data) return [];
+    const rows = data.map((row) => ({
+      date: row.date,
+      code: row.referral_code,
+      volume: row.volume,
+      commission: row.referral_rebate,
+      directBonusRebate: row.direct_bonus_rebate,
+      address: row.user_address
+    }));
+    if (!sort) return rows;
+    rows.sort((a, b) => {
+      const valA = a[sort.key];
+      const valB = b[sort.key];
+      if (valA < valB) return sort.order === "asc" ? -1 : 1;
+      if (valA > valB) return sort.order === "asc" ? 1 : -1;
+      return 0;
+    });
+    return rows;
+  }, [data, sort]);
+  const onSort = (sort2) => {
+    if (!sort2) {
+      setSort(null);
+      return;
+    }
+    const sortKey = sort2.sortKey;
+    if (sortKey && (sortKey === "volume" || sortKey === "commission")) {
+      setSort({
+        key: sortKey,
+        order: sort2.sort === "asc" ? "asc" : "desc"
+      });
+    }
+  };
+  return {
+    commissionData,
+    dateRange,
+    setDateRange,
+    pagination,
+    onSort,
+    isLoading: state.status < AccountStatusEnum.EnableTrading || !enabled || isDataLoading
+  };
+};
+var dashedUnderline = "oui-cursor-pointer oui-underline oui-decoration-dashed oui-underline-offset-4 oui-decoration-base-contrast-36 oui-tracking-[0.03em]";
+var useMobileTooltipModal = (content, title) => {
+  const { isMobile } = useScreen();
+  return useCallback(
+    (e) => {
+      if (!isMobile) return;
+      e.preventDefault();
+      e.stopPropagation();
+      modal.dialog({
+        title,
+        closable: true,
+        size: "sm",
+        content: /* @__PURE__ */ jsx("div", { className: "oui-text-sm oui-leading-5 oui-text-base-contrast", children: content })
+      });
+    },
+    [isMobile, content, title]
+  );
+};
+var AddressCell = ({ address, title }) => {
+  const onClick = useMobileTooltipModal(address, title);
+  const { isMobile } = useScreen();
+  return /* @__PURE__ */ jsx(Tooltip, { content: address, open: isMobile ? false : void 0, children: /* @__PURE__ */ jsx(Text, { className: dashedUnderline, onClick, children: formatAddress(address) }) });
+};
+var TooltipCell = ({ text, tooltip, title }) => {
+  const onClick = useMobileTooltipModal(tooltip, title);
+  const { isMobile } = useScreen();
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, open: isMobile ? false : void 0, children: /* @__PURE__ */ jsx(Text, { className: dashedUnderline, onClick, children: text }) });
+};
+var BreakdownCell = ({ total, direct, indirect, directBonus, prefix, fix = 0, title }) => {
+  const { t } = useTranslation();
+  const format9 = (val) => commifyOptional(val, {
+    fix,
+    fallback: "0",
+    padEnd: true,
+    prefix
+  });
+  const directLine = directBonus ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "\u2022 ",
+    t("affiliate.direct"),
+    ": ",
+    format9(direct + directBonus),
+    " ",
+    /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-54", children: [
+      "(",
+      t("affiliate.directInclBonus", { amount: format9(directBonus) }),
+      ")"
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    "\u2022 ",
+    t("affiliate.direct"),
+    ": ",
+    format9(direct)
+  ] });
+  const tooltipContent = /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1", children: [
+    /* @__PURE__ */ jsx("div", { children: directLine }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      "\u2022 ",
+      t("affiliate.indirect"),
+      ": ",
+      format9(indirect)
+    ] })
+  ] });
+  const onClick = useMobileTooltipModal(tooltipContent, title);
+  const { isMobile } = useScreen();
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, open: isMobile ? false : void 0, children: /* @__PURE__ */ jsx(Text, { className: dashedUnderline, onClick, children: format9(total) }) });
+};
+var MobileCell = ({ label, children, align = "start", className }) => {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      itemAlign: align,
+      className: cn(
+        "oui-gap-1.5 oui-font-medium oui-tracking-[0.01em]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Text, { intensity: 36, size: "2xs", className: "oui-leading-[15px]", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "oui-text-sm oui-leading-[20px]", children })
+      ]
+    }
+  );
+};
+var MobileCard = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    Grid,
+    {
+      cols: 3,
+      py: 3,
+      r: "xl",
+      width: "100%",
+      className: cn("oui-bg-base-9 oui-gap-x-[6px] oui-gap-y-3", className),
+      children
+    }
+  );
+};
+var formatCommissionAmt = (v) => commifyOptional(v, {
+  fix: 6,
+  fallback: "0",
+  padEnd: true,
+  prefix: "$"
+});
+var CommissionCell = ({ item }) => {
+  const { t } = useTranslation();
+  const totalCommission = item.commission + item.directBonusRebate;
+  const tooltip = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      "\u2022 ",
+      t("affiliate.base"),
+      ": ",
+      formatCommissionAmt(item.commission)
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      "\u2022 ",
+      t("affiliate.directBonus"),
+      ":",
+      " ",
+      formatCommissionAmt(item.directBonusRebate)
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    TooltipCell,
+    {
+      text: formatCommissionAmt(totalCommission),
+      tooltip,
+      title: t("affiliate.commission")
+    }
+  );
+};
+var MobileCommissionItem = ({ item }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(MobileCard, { children: [
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.date"), children: /* @__PURE__ */ jsx(Text, { children: formatYMDTime(item.date) }) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.code"), children: /* @__PURE__ */ jsx(Text, { children: item.code }) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.volume"), align: "end", children: /* @__PURE__ */ jsx(Text, { children: commifyOptional(item.volume, {
+      fix: 2,
+      fallback: "0",
+      padEnd: true,
+      prefix: "$"
+    }) }) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.commission"), children: /* @__PURE__ */ jsx(CommissionCell, { item }) }),
+    /* @__PURE__ */ jsx(
+      MobileCell,
+      {
+        label: t("common.address"),
+        align: "end",
+        className: "oui-col-start-3",
+        children: /* @__PURE__ */ jsx(AddressCell, { address: item.address, title: t("common.address") })
+      }
+    )
+  ] });
+};
+var CommissionTableUI = (props) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const showPagination = (props.pagination?.count ?? 0) >= 10;
+  const columns = useMemo(() => {
+    return [
+      {
+        title: t("common.date"),
+        dataIndex: "date",
+        render: (value) => formatYMDTime(value)
+      },
+      {
+        title: t("common.code"),
+        dataIndex: "code"
+      },
+      {
+        title: t("common.volume"),
+        dataIndex: "volume",
+        render: (value) => /* @__PURE__ */ jsx(Text, { children: commifyOptional(value, {
+          fix: 2,
+          fallback: "0",
+          padEnd: true,
+          prefix: "$"
+        }) }),
+        onSort: true
+      },
+      {
+        title: t("affiliate.commission"),
+        dataIndex: "commission",
+        render: (_value, record) => /* @__PURE__ */ jsx(CommissionCell, { item: record }),
+        onSort: true
+      },
+      {
+        title: t("common.address"),
+        dataIndex: "address",
+        render: (value) => /* @__PURE__ */ jsx(AddressCell, { address: value, title: t("common.address") })
+      }
+    ];
+  }, [t]);
+  return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-w-full oui-flex-col", children: [
+    /* @__PURE__ */ jsx(Flex, { width: "100%", height: 49, className: "oui-border-b oui-border-line-6", children: /* @__PURE__ */ jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsx(
+      DatePicker.range,
+      {
+        size: "xs",
+        value: props.dateRange,
+        onChange: props.setDateRange,
+        max: 90,
+        disabled: { after: /* @__PURE__ */ new Date() }
+      }
+    ) }) }),
+    isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
+      ListView,
+      {
+        dataSource: props.commissionData,
+        contentClassName: "!oui-space-y-0 oui-pb-3",
+        renderItem: (item, index) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(MobileCommissionItem, { item }),
+          /* @__PURE__ */ jsx(Divider, { intensity: 8 })
+        ] }, index)
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { className: `oui-px-3 ${showPagination ? "" : "oui-pb-3"}`, children: /* @__PURE__ */ jsx(
+      AuthGuardDataTable,
+      {
+        bordered: true,
+        columns,
+        dataSource: props.commissionData,
+        loading: props.isLoading,
+        pagination: showPagination ? props.pagination : void 0,
+        onSort: props.onSort,
+        onRow: () => ({ className: "oui-h-12" }),
+        className: "[&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
+      }
+    ) })
+  ] });
+};
+var CommissionTableWidget = (props) => {
+  const state = useCommissionTableScript(props);
+  return /* @__PURE__ */ jsx(CommissionTableUI, { ...state });
+};
+var useMultiLevelReferees = (params = {}) => {
+  const { enabled = true, fetchAll = false, page, pageSize } = params;
+  const { state } = useAccount();
+  const canQuery = enabled && state.status >= AccountStatusEnum.EnableTrading;
+  const queryKey = useMemo(() => {
+    if (!canQuery) return null;
+    if (fetchAll) return "/v1/referral/multi_level/referee_list";
+    if (page !== void 0 && pageSize !== void 0) {
+      return `/v1/referral/multi_level/referee_list?page=${page}&size=${pageSize}`;
+    }
+    return "/v1/referral/multi_level/referee_list";
+  }, [canQuery, fetchAll, page, pageSize]);
+  const response = usePrivateQuery(queryKey, {
+    formatter: (payload) => {
+      const rows = payload.rows ?? payload.data?.rows ?? [];
+      const meta = payload.meta ?? payload.data?.meta;
+      return {
+        ...payload,
+        meta,
+        rows: rows.map((row) => ({
+          ...row,
+          network_size: row.direct_invites + row.indirect_invites,
+          volume: row.direct_volume + row.indirect_volume,
+          commission: row.direct_rebate + row.indirect_rebate + row.direct_bonus_rebate
+        }))
+      };
+    },
+    revalidateOnFocus: false
+  });
+  return {
+    ...response,
+    isLoading: state.status < AccountStatusEnum.EnableTrading || !enabled || response.isLoading,
+    rows: response.data?.rows ?? [],
+    meta: response.data?.meta
+  };
+};
+
+// src/pages/multiLevel/affiliate/referrerTable/refereesTable/refereesTable.script.tsx
+var useRefereesTableScript = (props = {}) => {
+  const { enabled = true } = props;
+  const { isMobile } = useScreen();
+  const refereesPaginationUtils = usePagination();
+  const [refereesSort, setRefereesSort] = useState(null);
+  const {
+    isLoading: isRefereesLoading,
+    mutate: refereesMutate,
+    rows: refereesRows,
+    meta: refereesMeta
+  } = useMultiLevelReferees({
+    enabled,
+    fetchAll: isMobile,
+    page: refereesPaginationUtils.page,
+    pageSize: refereesPaginationUtils.pageSize
+  });
+  const refereesPagination = useMemo(() => {
+    return refereesPaginationUtils.parsePagination(refereesMeta);
+  }, [refereesMeta, refereesPaginationUtils]);
+  const { multiLevelRebateInfo, maxRebateRate, multiLevelRebateInfoMutate } = useReferralContext();
+  const onEditReferee = useCallback(
+    (type, item) => {
+      const referrerRebateRate = type === "reset" /* Reset */ ? multiLevelRebateInfo?.referrer_rebate_rate : item.referral_rebate_rate;
+      modal.show(ReferralCodeFormDialogId, {
+        type,
+        referralCode: multiLevelRebateInfo?.referral_code,
+        maxRebateRate,
+        referrerRebateRate,
+        onSuccess: () => {
+          multiLevelRebateInfoMutate();
+          refereesMutate();
+        },
+        accountId: item.account_id,
+        multiLevelRebateInfo,
+        directInvites: multiLevelRebateInfo?.direct_invites,
+        directBonusRebateRate: new Decimal(
+          multiLevelRebateInfo?.direct_bonus_rebate_rate ?? 0
+        ).mul(100).toNumber()
+      });
+    },
+    [
+      maxRebateRate,
+      multiLevelRebateInfo?.referral_code,
+      multiLevelRebateInfo?.referrer_rebate_rate,
+      multiLevelRebateInfoMutate,
+      refereesMutate
+    ]
+  );
+  const refereesData = useMemo(() => {
+    const rows = refereesRows ?? [];
+    if (!refereesSort) return rows;
+    const sortableRows = rows.map((row, index) => ({
+      row,
+      index
+    }));
+    sortableRows.sort((a, b) => {
+      const valA = Number(a.row[refereesSort.key] ?? 0);
+      const valB = Number(b.row[refereesSort.key] ?? 0);
+      if (valA < valB) return refereesSort.order === "asc" ? -1 : 1;
+      if (valA > valB) return refereesSort.order === "asc" ? 1 : -1;
+      return a.index - b.index;
+    });
+    return sortableRows.map((item) => item.row);
+  }, [refereesRows, refereesSort]);
+  const onRefereesSort = (sort) => {
+    if (!sort) {
+      setRefereesSort(null);
+      return;
+    }
+    const sortKey = sort.sortKey;
+    if (sortKey && (sortKey === "referee_rebate_rate" || sortKey === "network_size" || sortKey === "volume" || sortKey === "commission")) {
+      setRefereesSort({
+        key: sortKey,
+        order: sort.sort === "asc" ? "asc" : "desc"
+      });
+    }
+  };
+  return {
+    refereesData,
+    refereesPagination,
+    isRefereesLoading,
+    onEditReferee,
+    onRefereesSort
+  };
+};
+var getRebateRateText = (rate) => {
+  return (rate * 100).toFixed(0) + "%";
+};
+var getRefereeType = (bindType) => {
+  const { t } = useTranslation();
+  if (bindType === "legacy") {
+    return {
+      text: t("affiliate.singleLevelLegacy"),
+      tooltip: t("affiliate.singleLevelLegacy.tooltip")
+    };
+  }
+  return {
+    text: t("affiliate.multiLevel"),
+    tooltip: t("affiliate.multiLevel.tooltip")
+  };
+};
+var MobileRefereeItem = ({ item, onEditReferee }) => {
+  const { t } = useTranslation();
+  const typeInfo = getRefereeType(item.bind_type);
+  return /* @__PURE__ */ jsxs(MobileCard, { children: [
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.address"), children: /* @__PURE__ */ jsx(AddressCell, { address: item.address, title: t("common.address") }) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.type"), children: /* @__PURE__ */ jsx(
+      TooltipCell,
+      {
+        text: typeInfo.text,
+        tooltip: typeInfo.tooltip,
+        title: t("common.type")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.boundAt"), align: "end", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatYMDTime(item.code_binding_time) }) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.referralCodes"), children: /* @__PURE__ */ jsx(Text, { size: "sm", children: item.bind_code }) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.referralCodes.column.you&Referee"), children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+      getRebateRateText(item.referral_rebate_rate) + "/",
+      /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-54", children: [
+        getRebateRateText(item.referee_rebate_rate),
+        " "
+      ] }),
+      !item.is_default_rate && /* @__PURE__ */ jsx("span", { className: "oui-text-primary-light", children: `(${t("affiliate.customized")})` })
+    ] }) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.networkSize"), align: "end", children: /* @__PURE__ */ jsx(
+      BreakdownCell,
+      {
+        total: item.network_size,
+        direct: item.direct_invites,
+        indirect: item.indirect_invites,
+        title: t("affiliate.networkSize")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.volume"), children: /* @__PURE__ */ jsx(
+      BreakdownCell,
+      {
+        total: item.volume,
+        direct: item.direct_volume,
+        indirect: item.indirect_volume,
+        prefix: "$",
+        fix: 2,
+        title: t("common.volume")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.commission"), children: /* @__PURE__ */ jsx(
+      BreakdownCell,
+      {
+        total: item.commission,
+        direct: item.direct_rebate,
+        indirect: item.indirect_rebate,
+        directBonus: item.direct_bonus_rebate,
+        prefix: "$",
+        fix: 6,
+        title: t("affiliate.commission")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      MobileCell,
+      {
+        label: t("common.action"),
+        align: "end",
+        className: "oui-col-start-3",
+        children: item.bind_type !== "legacy" && /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "oui-cursor-pointer oui-text-primary-light",
+              onClick: () => onEditReferee("edit" /* Edit */, item),
+              children: t("common.edit")
+            }
+          ),
+          !item.is_default_rate && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "oui-cursor-pointer oui-text-primary-light",
+              onClick: () => onEditReferee("reset" /* Reset */, item),
+              children: t("common.reset")
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+var RefereesTableUI = (props) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const showPagination = (props.refereesPagination?.count ?? 0) >= 10;
+  const refereeColumns = useMemo(() => {
+    return [
+      {
+        title: t("common.address"),
+        dataIndex: "address",
+        render: (value) => /* @__PURE__ */ jsx(AddressCell, { address: value, title: t("common.address") })
+      },
+      {
+        title: t("common.type"),
+        dataIndex: "bind_type",
+        render: (_, record) => {
+          const typeInfo = getRefereeType(record.bind_type);
+          return /* @__PURE__ */ jsx(
+            TooltipCell,
+            {
+              text: typeInfo.text,
+              tooltip: typeInfo.tooltip,
+              title: t("common.type")
+            }
+          );
+        }
+      },
+      {
+        title: t("affiliate.boundAt"),
+        dataIndex: "code_binding_time",
+        render: (value) => /* @__PURE__ */ jsx(Text, { children: formatYMDTime(value) })
+      },
+      {
+        title: t("affiliate.referralCodes"),
+        dataIndex: "bind_code",
+        render: (value) => /* @__PURE__ */ jsx(Text, { children: value })
+      },
+      {
+        title: t("affiliate.referralCodes.column.you&Referee"),
+        dataIndex: "referee_rebate_rate",
+        render: (_, record) => /* @__PURE__ */ jsxs(Text, { children: [
+          getRebateRateText(record.referral_rebate_rate) + "/",
+          /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-54", children: [
+            getRebateRateText(record.referee_rebate_rate),
+            " "
+          ] }),
+          !record.is_default_rate && /* @__PURE__ */ jsx("span", { className: "oui-text-primary-light", children: `(${t("affiliate.customized")})` })
+        ] }),
+        onSort: true
+      },
+      {
+        title: t("affiliate.networkSize"),
+        dataIndex: "network_size",
+        render: (_, record) => /* @__PURE__ */ jsx(
+          BreakdownCell,
+          {
+            total: record.network_size,
+            direct: record.direct_invites,
+            indirect: record.indirect_invites,
+            title: t("affiliate.networkSize")
+          }
+        ),
+        onSort: true
+      },
+      {
+        title: t("common.volume"),
+        dataIndex: "volume",
+        render: (_, record) => /* @__PURE__ */ jsx(
+          BreakdownCell,
+          {
+            total: record.volume,
+            direct: record.direct_volume,
+            indirect: record.indirect_volume,
+            prefix: "$",
+            fix: 2,
+            title: t("common.volume")
+          }
+        ),
+        onSort: true
+      },
+      {
+        title: t("affiliate.commission"),
+        dataIndex: "commission",
+        render: (_, record) => /* @__PURE__ */ jsx(
+          BreakdownCell,
+          {
+            total: record.commission,
+            direct: record.direct_rebate,
+            indirect: record.indirect_rebate,
+            directBonus: record.direct_bonus_rebate,
+            prefix: "$",
+            fix: 6,
+            title: t("affiliate.commission")
+          }
+        ),
+        onSort: true
+      },
+      {
+        title: t("common.action"),
+        dataIndex: "action",
+        render: (_, record) => record.bind_type !== "legacy" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "oui-cursor-pointer oui-text-primary-light",
+              onClick: () => props.onEditReferee("edit" /* Edit */, record),
+              children: t("common.edit")
+            }
+          ),
+          !record.is_default_rate && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "oui-ml-2 oui-cursor-pointer oui-text-primary-light",
+              onClick: () => props.onEditReferee("reset" /* Reset */, record),
+              children: t("common.reset")
+            }
+          )
+        ] }) : null
+      }
+    ];
+  }, [t, props.onEditReferee]);
+  return /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
+    ListView,
+    {
+      dataSource: props.refereesData,
+      contentClassName: "!oui-space-y-0 oui-pb-3",
+      renderItem: (item, index) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          MobileRefereeItem,
+          {
+            item,
+            onEditReferee: props.onEditReferee
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { intensity: 8 })
+      ] }, index)
+    }
+  ) }) : /* @__PURE__ */ jsx("div", { className: `oui-px-3 ${showPagination ? "" : "oui-pb-3"}`, children: /* @__PURE__ */ jsx(
+    AuthGuardDataTable,
+    {
+      bordered: true,
+      columns: refereeColumns,
+      dataSource: props.refereesData,
+      loading: props.isRefereesLoading,
+      pagination: showPagination ? props.refereesPagination : void 0,
+      onSort: props.onRefereesSort,
+      onRow: () => ({ className: "oui-h-12" }),
+      className: "[&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
+    }
+  ) }) });
+};
+var RefereesTableWidget = (props) => {
+  const state = useRefereesTableScript(props);
+  return /* @__PURE__ */ jsx(RefereesTableUI, { ...state });
+};
+var useMultiLevelReferralCodes = () => {
+  const { referralInfo } = useReferralContext();
+  const { data: multiLevelRebateInfo } = useMultiLevelRebateInfo();
+  const [refereesData] = useRefereeInfo({});
+  const copyCode = (code) => {
+    copyText(code);
+  };
+  const singleLevelTotals = useMemo(() => {
+    const totalsMap = /* @__PURE__ */ new Map();
+    if (refereesData) {
+      refereesData.forEach((referee) => {
+        const code = referee?.referral_code;
+        if (!code) return;
+        const existing = totalsMap.get(code) || { volume: 0, commission: 0 };
+        totalsMap.set(code, {
+          volume: existing.volume + (referee?.volume || 0),
+          commission: existing.commission + (referee?.referral_rebate || 0)
+        });
+      });
+    }
+    return totalsMap;
+  }, [refereesData]);
+  const codes = useMemo(() => {
+    const allCodes = [];
+    const multiLevelReferralCode = multiLevelRebateInfo?.referral_code;
+    if (multiLevelRebateInfo?.referral_code) {
+      const maxRebateRate = multiLevelRebateInfo.max_rebate_rate ?? 0;
+      const defaultRefereeRebateRate = multiLevelRebateInfo.default_referee_rebate_rate ?? 0;
+      const referrerRebateRate = Math.max(
+        0,
+        maxRebateRate - defaultRefereeRebateRate
+      );
+      const directInvites = multiLevelRebateInfo?.direct_invites ?? 0;
+      const indirectInvites = multiLevelRebateInfo?.indirect_invites ?? 0;
+      const directVolume = multiLevelRebateInfo?.direct_volume ?? 0;
+      const indirectVolume = multiLevelRebateInfo?.indirect_volume ?? 0;
+      const directRebate = multiLevelRebateInfo?.direct_rebate ?? 0;
+      const indirectRebate = multiLevelRebateInfo?.indirect_rebate ?? 0;
+      const directBonusRebate = multiLevelRebateInfo?.direct_bonus_rebate ?? 0;
+      const multiLevelCode = {
+        code: multiLevelRebateInfo.referral_code ?? "",
+        direct_invites: directInvites,
+        indirect_invites: indirectInvites,
+        direct_volume: directVolume,
+        indirect_volume: indirectVolume,
+        direct_rebate: directRebate,
+        indirect_rebate: indirectRebate,
+        direct_bonus_rebate: directBonusRebate,
+        max_rebate_rate: maxRebateRate,
+        referee_rebate_rate: defaultRefereeRebateRate,
+        referrer_rebate_rate: referrerRebateRate,
+        total_invites: directInvites + indirectInvites,
+        total_volume: directVolume + indirectVolume,
+        total_rebate: directRebate + indirectRebate + directBonusRebate,
+        referral_type: "multi"
+      };
+      allCodes.push(multiLevelCode);
+    }
+    if (referralInfo?.referrer_info?.referral_codes) {
+      allCodes.push(
+        ...referralInfo.referrer_info.referral_codes.filter(
+          (item) => multiLevelReferralCode ? item.code !== multiLevelReferralCode : true
+        ).map((item) => {
+          const totals = singleLevelTotals.get(item.code);
+          const totalVolume = totals?.volume ?? item.total_volume ?? 0;
+          const totalRebate = totals?.commission ?? item.total_rebate ?? 0;
+          const totalInvites = item.total_invites ?? 0;
+          const row = {
+            code: item.code,
+            referral_type: "single",
+            direct_invites: totalInvites,
+            indirect_invites: 0,
+            direct_volume: totalVolume,
+            indirect_volume: 0,
+            direct_rebate: totalRebate,
+            indirect_rebate: 0,
+            max_rebate_rate: item.max_rebate_rate ?? 0,
+            referee_rebate_rate: item.referee_rebate_rate ?? 0,
+            referrer_rebate_rate: item.referrer_rebate_rate ?? 0,
+            total_invites: totalInvites,
+            total_volume: totalVolume,
+            total_rebate: totalRebate
+          };
+          return row;
+        })
+      );
+    }
+    if (allCodes.length === 0) return void 0;
+    return allCodes;
+  }, [
+    referralInfo?.referrer_info?.referral_codes,
+    multiLevelRebateInfo,
+    singleLevelTotals
+  ]);
+  return {
+    codes,
+    copyCode
+  };
+};
+
+// src/pages/multiLevel/affiliate/referrerTable/referralCodesTable/referralCodesTable.script.ts
+var useReferralCodesTableScript = (props = {}) => {
+  const { enabled = true } = props;
+  const { codes, copyCode } = useMultiLevelReferralCodes();
+  const [sort, setSort] = useState(null);
+  const sortedCodes = useMemo(() => {
+    if (!enabled) return void 0;
+    if (!codes || !sort) return codes;
+    const sortableCodes = codes.map((code, index) => ({
+      code,
+      index
+    }));
+    sortableCodes.sort((a, b) => {
+      const valA = Number(a.code[sort.key] ?? 0);
+      const valB = Number(b.code[sort.key] ?? 0);
+      if (valA < valB) return sort.order === "asc" ? -1 : 1;
+      if (valA > valB) return sort.order === "asc" ? 1 : -1;
+      return a.index - b.index;
+    });
+    return sortableCodes.map((item) => item.code);
+  }, [codes, enabled, sort]);
+  const onSort = (sort2) => {
+    if (!sort2) {
+      setSort(null);
+      return;
+    }
+    const sortKey = sort2.sortKey;
+    if (sortKey && (sortKey === "total_invites" || sortKey === "total_volume" || sortKey === "total_rebate")) {
+      setSort({
+        key: sortKey,
+        order: sort2.sort === "asc" ? "asc" : "desc"
+      });
+    }
+  };
+  return {
+    codes,
+    sortedCodes,
+    copyCode,
+    onSort,
+    isLoading: enabled && !codes
+  };
+};
+var getReferralCodeType = (referralType) => {
+  const { t } = useTranslation();
+  if (referralType === "multi") {
+    return {
+      text: t("affiliate.multiLevel"),
+      tooltip: t("affiliate.multiLevel.tooltip")
+    };
+  }
+  return {
+    text: t("affiliate.singleLevelLegacy"),
+    tooltip: t("affiliate.singleLevelLegacy.tooltip")
+  };
+};
+var MobileReferralCodeItem = ({ item, copyCode }) => {
+  const { t } = useTranslation();
+  const referrerRate = new Decimal(item.referrer_rebate_rate ?? 0).mul(100).toFixed(0);
+  const refereeRate = new Decimal(item.referee_rebate_rate ?? 0).mul(100).toFixed(0);
+  const typeInfo = getReferralCodeType(item.referral_type);
+  return /* @__PURE__ */ jsxs(MobileCard, { children: [
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.referralCode"), children: /* @__PURE__ */ jsx(Text, { children: item.code || "" }) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.type"), children: /* @__PURE__ */ jsx(
+      TooltipCell,
+      {
+        text: typeInfo.text,
+        tooltip: typeInfo.tooltip,
+        title: t("common.type")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      MobileCell,
+      {
+        label: t("affiliate.referralCodes.column.you&Referee"),
+        align: "end",
+        children: /* @__PURE__ */ jsxs(Text, { children: [
+          referrerRate,
+          "%/",
+          /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-54", children: [
+            refereeRate,
+            "%"
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.networkSize"), children: /* @__PURE__ */ jsx(
+      BreakdownCell,
+      {
+        total: item.total_invites ?? 0,
+        direct: item.direct_invites ?? 0,
+        indirect: item.indirect_invites ?? 0,
+        title: t("affiliate.networkSize")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.volume"), children: /* @__PURE__ */ jsx(
+      BreakdownCell,
+      {
+        total: item.total_volume ?? 0,
+        direct: item.direct_volume ?? 0,
+        indirect: item.indirect_volume ?? 0,
+        prefix: "$",
+        fix: 2,
+        title: t("common.volume")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("affiliate.commission"), align: "end", children: /* @__PURE__ */ jsx(
+      BreakdownCell,
+      {
+        total: item.total_rebate ?? 0,
+        direct: item.direct_rebate ?? 0,
+        indirect: item.indirect_rebate ?? 0,
+        directBonus: item.direct_bonus_rebate,
+        prefix: "$",
+        fix: 6,
+        title: t("affiliate.commission")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(MobileCell, { label: t("common.action"), children: /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: "oui-cursor-pointer oui-text-primary-light",
+        onClick: (e) => {
+          e.stopPropagation();
+          copyCode(item.code);
+        },
+        children: t("common.copy")
+      }
+    ) })
+  ] });
+};
+var ReferralCodesTableUI = (props) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const columns = useMemo(() => {
+    return [
+      {
+        title: t("affiliate.referralCode"),
+        dataIndex: "code",
+        render: (value) => /* @__PURE__ */ jsx(Text, { children: value || "" })
+      },
+      {
+        title: t("common.type"),
+        dataIndex: "referral_type",
+        render: (_, record) => {
+          const typeInfo = getReferralCodeType(record.referral_type);
+          return /* @__PURE__ */ jsx(
+            TooltipCell,
+            {
+              text: typeInfo.text,
+              tooltip: typeInfo.tooltip,
+              title: t("common.type")
+            }
+          );
+        }
+      },
+      {
+        title: /* @__PURE__ */ jsxs(Text, { children: [
+          t("affiliate.referralCodes.column.defaultSplit"),
+          /* @__PURE__ */ jsx("br", {}),
+          "(",
+          t("affiliate.referralCodes.column.you&Referee"),
+          ")"
+        ] }),
+        dataIndex: "rate",
+        render: (_, record) => {
+          const referrerRate = new Decimal(record.referrer_rebate_rate ?? 0).mul(100).toFixed(0);
+          const refereeRate = new Decimal(record.referee_rebate_rate ?? 0).mul(100).toFixed(0);
+          return /* @__PURE__ */ jsxs(Text, { children: [
+            referrerRate,
+            "%",
+            /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-54", children: [
+              "/",
+              refereeRate,
+              "%"
+            ] })
+          ] });
+        }
+      },
+      {
+        title: t("affiliate.networkSize"),
+        dataIndex: "total_invites",
+        render: (_, record) => {
+          return /* @__PURE__ */ jsx(
+            BreakdownCell,
+            {
+              total: record.total_invites ?? 0,
+              direct: record.direct_invites ?? 0,
+              indirect: record.indirect_invites ?? 0,
+              title: t("affiliate.networkSize")
+            }
+          );
+        },
+        onSort: true
+      },
+      {
+        title: t("common.volume"),
+        dataIndex: "total_volume",
+        render: (_, record) => {
+          return /* @__PURE__ */ jsx(
+            BreakdownCell,
+            {
+              total: record.total_volume ?? 0,
+              direct: record.direct_volume ?? 0,
+              indirect: record.indirect_volume ?? 0,
+              prefix: "$",
+              fix: 2,
+              title: t("common.volume")
+            }
+          );
+        },
+        onSort: true
+      },
+      {
+        title: t("affiliate.commission"),
+        dataIndex: "total_rebate",
+        render: (_, record) => {
+          return /* @__PURE__ */ jsx(
+            BreakdownCell,
+            {
+              total: record.total_rebate ?? 0,
+              direct: record.direct_rebate ?? 0,
+              indirect: record.indirect_rebate ?? 0,
+              directBonus: record.direct_bonus_rebate,
+              prefix: "$",
+              fix: 6,
+              title: t("affiliate.commission")
+            }
+          );
+        },
+        onSort: true
+      },
+      {
+        title: t("common.action"),
+        dataIndex: "action",
+        render: (_, record) => /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: "oui-cursor-pointer oui-text-primary-light",
+            onClick: (e) => {
+              e.stopPropagation();
+              props.copyCode(record.code);
+            },
+            children: t("common.copy")
+          }
+        )
+      }
+    ];
+  }, [t, props.copyCode]);
+  return /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
+    ListView,
+    {
+      dataSource: props.sortedCodes,
+      contentClassName: "!oui-space-y-0 oui-pb-3",
+      renderItem: (item, index) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(MobileReferralCodeItem, { item, copyCode: props.copyCode }),
+        /* @__PURE__ */ jsx(Divider, { intensity: 8 })
+      ] }, index)
+    }
+  ) }) : /* @__PURE__ */ jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsx(
+    AuthGuardDataTable,
+    {
+      bordered: true,
+      columns,
+      dataSource: props.sortedCodes,
+      loading: props.isLoading,
+      onSort: props.onSort,
+      onRow: () => ({ className: "oui-h-12" }),
+      className: "oui-pb-3 [&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
+    }
+  ) }) });
+};
+var ReferralCodesTableWidget = (props) => {
+  const state = useReferralCodesTableScript(props);
+  return /* @__PURE__ */ jsx(ReferralCodesTableUI, { ...state });
+};
+var ReferrerTableUI = (props) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      direction: "column",
+      className: "oui-rounded-2xl oui-bg-base-9 [&_td]:oui-font-medium [&_td]:oui-tracking-[0.03em] [&_th]:oui-font-semibold",
+      px: 3,
+      pt: 4,
+      gap: 4,
+      width: "100%",
+      children: /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          value: props.activeTab,
+          onValueChange: (value) => props.setActiveTab(value),
+          className: "oui-w-full oui-text-base",
+          variant: "text",
+          classNames: {
+            tabsListContainer: "oui-px-3",
+            trigger: "oui-pb-[9px] oui-tracking-[0.01em]",
+            scrollIndicator: "[&_.oui-scroll-indicator-leading]:oui-hidden [&_.oui-scroll-indicator-tailing]:oui-hidden"
+          },
+          showScrollIndicator: true,
+          children: [
+            /* @__PURE__ */ jsx(TabPanel, { value: "commission", title: t("affiliate.commission"), children: /* @__PURE__ */ jsx(CommissionTableWidget, { enabled: props.activeTab === "commission" }) }),
+            /* @__PURE__ */ jsx(TabPanel, { value: "referees", title: t("affiliate.referees"), children: /* @__PURE__ */ jsx(RefereesTableWidget, { enabled: props.activeTab === "referees" }) }),
+            /* @__PURE__ */ jsx(TabPanel, { value: "codes", title: t("affiliate.referralCodes"), children: /* @__PURE__ */ jsx(ReferralCodesTableWidget, { enabled: props.activeTab === "codes" }) })
+          ]
+        }
+      )
+    }
+  );
+};
+var ReferrerTableWidget = () => {
+  const state = useReferrerTableScript();
+  return /* @__PURE__ */ jsx(ReferrerTableUI, { ...state });
+};
+var Summary = (props) => {
+  const { statistics } = props;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      id: "oui-affiliate-affiliate-summary",
+      r: "2xl",
+      p: 5,
+      width: "100%",
+      height: "100%",
+      gap: 6,
+      direction: "column",
+      intensity: 900,
+      className: "oui-border oui-border-line-6",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
+          /* @__PURE__ */ jsx(Text, { className: "oui-text-lg", children: t("affiliate.summary") }),
+          /* @__PURE__ */ jsx("div", { className: "oui-min-w-14", children: /* @__PURE__ */ jsx(
+            Select.options,
+            {
+              size: "xs",
+              value: props.period,
+              onValueChange: props.onPeriodChange,
+              options: props.periodTypes
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          SummaryItem,
+          {
+            prefix: "$",
+            rule: "human",
+            label: `${t("affiliate.commission")} (USDC)`,
+            value: statistics.total_rebate,
+            direct: statistics.direct_rebate + statistics.direct_bonus_rebate,
+            indirect: statistics.indirect_rebate,
+            classNames: {
+              root: "!oui-py-12",
+              value: "oui-text-trade-profit",
+              direct: "oui-text-trade-profit",
+              indirect: "oui-text-trade-profit"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { width: "100%", gap: 6, className: "oui-flex-col md:oui-flex-row", children: [
+          /* @__PURE__ */ jsx(
+            SummaryItem,
+            {
+              prefix: "$",
+              rule: "human",
+              label: `${t("affiliate.referralVol")} (USDC)`,
+              value: statistics.total_volume,
+              direct: statistics.direct_volume,
+              indirect: statistics.indirect_volume,
+              classNames: {
+                root: "oui-w-full md:oui-w-1/2"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SummaryItem,
+            {
+              dp: 0,
+              label: t("affiliate.referrals"),
+              value: statistics.total_invites,
+              direct: statistics.direct_invites,
+              indirect: statistics.indirect_invites,
+              classNames: {
+                root: "oui-w-full md:oui-w-1/2"
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var SummaryItem = (props) => {
+  const { t } = useTranslation();
+  const { rule, dp = 2 } = props;
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      r: "2xl",
+      width: "100%",
+      direction: "column",
+      itemAlign: "start",
+      gap: 2,
+      className: cn(
+        "oui-bg-base-contrast-4 oui-p-5 md:oui-py-[38px]",
+        "oui-text-sm oui-text-base-contrast-54",
+        props.classNames?.root
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Text, { children: props.label }),
+        /* @__PURE__ */ jsx(
+          Text.numeral,
+          {
+            rule,
+            dp: props.dp,
+            size: "3xl",
+            prefix: props.prefix,
+            placeholder: "--",
+            intensity: 98,
+            className: props.classNames?.value,
+            children: props.value
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { className: "oui-flex-wrap oui-text-base-contrast-54", children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+            /* @__PURE__ */ jsxs(Text, { children: [
+              t("affiliate.direct"),
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Text.numeral,
+              {
+                rule,
+                dp: props.dp,
+                prefix: props.prefix,
+                intensity: 54,
+                className: props.classNames?.direct,
+                children: props.direct
+              }
+            )
+          ] }),
+          "/",
+          /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+            /* @__PURE__ */ jsxs(Text, { children: [
+              t("affiliate.indirect"),
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Text.numeral,
+              {
+                rule,
+                dp: props.dp,
+                prefix: props.prefix,
+                intensity: 54,
+                className: props.classNames?.indirect,
+                children: props.indirect
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var useSummaryScript = () => {
+  const { t } = useTranslation();
+  const [period, setPeriod] = useState("all_time" /* All */);
+  const { data } = useMultiLevelStatistics(period);
+  const periodTypes = [
+    { label: t("common.all"), value: "all_time" /* All */ },
+    { label: t("common.select.1d"), value: "1d" /* 1d */ },
+    { label: t("common.select.7d"), value: "7d" /* 7d */ },
+    { label: t("common.select.30d"), value: "30d" /* 30d */ }
+  ];
+  const onPeriodChange = (item) => {
+    setPeriod(item);
+  };
+  const statistics = useMemo(() => {
+    const {
+      direct_invites = 0,
+      indirect_invites = 0,
+      direct_traded = 0,
+      indirect_traded = 0,
+      direct_volume = 0,
+      indirect_volume = 0,
+      direct_rebate = 0,
+      indirect_rebate = 0,
+      direct_bonus_rebate = 0
+    } = data || {};
     return {
-      generateCode,
-      showHome,
-      referralInfo: data,
-      isAffiliate,
-      isTrader,
-      tab,
-      becomeAnAffiliateUrl,
-      learnAffiliateUrl,
-      referralLinkUrl,
-      userVolume,
-      dailyVolume,
-      chartConfig,
-      overwrite,
-      isLoading,
-      wrongNetwork,
-      disabledConnect,
-      setShowHome,
-      setTab,
-      mutate: memoMutate,
-      onBecomeAnAffiliate,
-      bindReferralCodeState,
-      onLearnAffiliate,
-      showReferralPage,
-      splashPage
+      direct_invites,
+      indirect_invites,
+      total_invites: direct_invites + indirect_invites,
+      direct_traded,
+      indirect_traded,
+      total_traded: direct_traded + indirect_traded,
+      direct_volume,
+      indirect_volume,
+      total_volume: direct_volume + indirect_volume,
+      direct_rebate,
+      indirect_rebate,
+      direct_bonus_rebate,
+      total_rebate: direct_rebate + indirect_rebate + direct_bonus_rebate
     };
-  }, [
-    becomeAnAffiliateUrl,
-    chartConfig,
-    dailyVolume,
-    data,
-    disabledConnect,
-    generateCode,
-    isAffiliate,
-    isLoading,
-    isTrader,
-    learnAffiliateUrl,
-    overwrite,
-    referralLinkUrl,
-    showHome,
-    tab,
-    userVolume,
-    wrongNetwork,
-    onBecomeAnAffiliate,
-    bindReferralCodeState,
-    onLearnAffiliate,
-    showReferralPage,
-    splashPage,
-    memoMutate
-  ]);
-  return /* @__PURE__ */ jsx(ReferralContext.Provider, { value: memoizedValue, children });
+  }, [data]);
+  return {
+    period,
+    periodTypes,
+    onPeriodChange,
+    statistics
+  };
+};
+var SummaryWidget = () => {
+  const state = useSummaryScript();
+  return /* @__PURE__ */ jsx(Summary, { ...state });
+};
+var MultiLevelAffiliatePage = () => {
+  const { t } = useTranslation();
+  const { multiLevelRebateInfo } = useReferralContext();
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      id: "oui-affiliate-affiliate-page",
+      className: cn("oui-h-lvw", "oui-font-semibold", "oui-pb-24 oui-pt-16"),
+      direction: "column",
+      gap: 4,
+      children: /* @__PURE__ */ jsx("div", { className: "oui-w-full oui-px-5 md:oui-mx-auto md:oui-max-w-[1040px]", children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          width: "100%",
+          direction: "column",
+          className: "oui-gap-8 md:oui-gap-10",
+          children: [
+            /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 4, children: [
+              /* @__PURE__ */ jsx(Text, { className: "oui-text-[32px] oui-leading-[40px] md:oui-text-6xl md:oui-leading-[72px]", children: t("affiliate.earnReferralCommissions") }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("affiliate.earnReferralCommissions.description") })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Grid,
+              {
+                width: "100%",
+                height: "100%",
+                gap: 6,
+                cols: 1,
+                rows: 1,
+                className: "md:oui-grid-cols-2",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "oui-order-2 md:oui-order-1", children: /* @__PURE__ */ jsx(SummaryWidget, {}) }),
+                  /* @__PURE__ */ jsx("div", { className: "oui-order-1 md:oui-order-2", children: multiLevelRebateInfo?.referral_code ? /* @__PURE__ */ jsx(ReferralInfoWidget, {}) : /* @__PURE__ */ jsx(MultiLevelReferralWidget, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(CommissionChartWidget, {}),
+            /* @__PURE__ */ jsx(ReferrerTableWidget, {})
+          ]
+        }
+      ) })
+    }
+  );
+};
+var AffiliateIcon = (props) => {
+  const { size = 16, className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 16 16",
+      fill: "#fff",
+      fillOpacity: ".98",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: props.className,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 1.302c-3.683 0-6.655 2.985-6.667 6.667-.013 3.676 2.987 6.68 6.666 6.687s6.674-3.037 6.667-6.687c-.007-3.682-2.985-6.667-6.667-6.667m0 1.333a5.333 5.333 0 0 1 5.333 5.334c0 1.5-.625 2.852-1.622 3.821-.49-1.062-1.545-1.821-2.753-1.821H7.04c-1.207 0-2.259.75-2.75 1.812A5.3 5.3 0 0 1 2.666 7.97a5.333 5.333 0 0 1 5.333-5.334M8 3.97a2.667 2.667 0 1 0 0 5.333A2.667 2.667 0 0 0 8 3.97" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M16 12.667a3.333 3.333 0 1 1-6.667 0 3.333 3.333 0 0 1 6.667 0",
+            fill: "#1828C3"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M11.917 11.433a.917.917 0 0 0-.917.917c0 .53.302 1.031.802 1.49a4.6 4.6 0 0 0 .713.53l.068.043c.05.027.117.027.167 0l.068-.042q.08-.05.177-.115c.182-.123.366-.26.536-.416.5-.459.802-.96.802-1.49a.917.917 0 0 0-.917-.917.97.97 0 0 0-.744.386.95.95 0 0 0-.756-.386" })
+      ]
+    }
+  );
+};
+var TraderIcon = (props) => {
+  const { size = 16, className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 16 16",
+      fill: "white",
+      fillOpacity: "0.36",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: props.className,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M7.99929 1.30212C4.31735 1.30212 1.34509 4.28679 1.33262 7.96878C1.32015 11.6454 4.32042 14.6488 7.99929 14.6561C11.6782 14.6634 14.6726 11.6194 14.666 7.96878C14.6593 4.28679 11.6812 1.30212 7.99929 1.30212ZM7.99929 2.63546C10.9448 2.63546 13.3326 5.02345 13.3326 7.96878C13.3326 9.46878 12.7078 10.8208 11.7112 11.7901C11.2202 10.7281 10.1656 9.96878 8.95762 9.96878C8.71802 9.96878 7.28042 9.96878 7.04095 9.96878C5.83369 9.96878 4.78215 10.7188 4.29095 11.7814C3.29429 10.8121 2.66595 9.46878 2.66595 7.96878C2.66595 5.02345 5.05375 2.63546 7.99929 2.63546ZM7.99929 3.96879C6.52649 3.96879 5.33255 5.16279 5.33262 6.63545C5.33262 8.10812 6.52649 9.30212 7.99929 9.30212C9.47202 9.30212 10.666 8.10812 10.666 6.63545C10.666 5.16279 9.47202 3.96879 7.99929 3.96879Z" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M16 12.6667C16 14.5076 14.5076 16 12.6666 16C10.8257 16 9.33331 14.5076 9.33331 12.6667C9.33331 10.8257 10.8257 9.33333 12.6666 9.33333C14.5076 9.33333 16 10.8257 16 12.6667Z",
+            fill: "#005A4F"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M14.3325 13.3345C14.3325 13.2918 14.3182 13.2473 14.2857 13.2147L13.6658 12.6002L13.4315 12.8345L13.7595 13.1678H11.3325C11.2405 13.1678 11.1658 13.2425 11.1658 13.3345C11.1658 13.4265 11.2405 13.5012 11.3325 13.5012H13.7595L13.4315 13.8345L13.6658 14.0688L14.2857 13.4543C14.3182 13.4217 14.3325 13.3772 14.3325 13.3345ZM14.1658 12.0012C14.1658 11.9092 14.0912 11.8345 13.9992 11.8345H11.572L11.9002 11.5012L11.6658 11.2668L11.046 11.8813C10.981 11.9465 10.981 12.0558 11.046 12.121L11.6658 12.7355L11.9002 12.5012L11.572 12.1678H13.9992C14.0912 12.1678 14.1658 12.0932 14.1658 12.0012Z",
+            fill: "white",
+            fillOpacity: "0.98"
+          }
+        )
+      ]
+    }
+  );
 };
 var USDCIcon = (props) => {
   return /* @__PURE__ */ jsxs(
@@ -305,7 +3191,7 @@ var USDCIcon = (props) => {
     }
   );
 };
-var Summary = (props) => {
+var Summary2 = (props) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     Flex,
@@ -415,7 +3301,7 @@ var Row = (props) => {
     /* @__PURE__ */ jsx(Text, { className: "oui-text-xs md:oui-text-sm xl:oui-text-base", children: commifyOptional(props.value, { fix: props.dp, fallback: "0" }) })
   ] });
 };
-var useSummaryScript = () => {
+var useSummaryScript2 = () => {
   const { t } = useTranslation();
   const [period, setPeriod] = useState("All");
   const periodTypes = [
@@ -498,9 +3384,9 @@ var useSummaryScript = () => {
     refereesTades
   };
 };
-var SummaryWidget = () => {
-  const state = useSummaryScript();
-  return /* @__PURE__ */ jsx(Summary, { ...state });
+var SummaryWidget2 = () => {
+  const state = useSummaryScript2();
+  return /* @__PURE__ */ jsx(Summary2, { ...state });
 };
 var AutoHideText = (props) => {
   const { text, visibleCount } = props;
@@ -693,7 +3579,7 @@ var Subtitle = (props) => {
             value: props.share || "-",
             brokerName: props.brokerName
           },
-          components: [/* @__PURE__ */ jsx(Text.gradient, { color: "brand" })]
+          components: [/* @__PURE__ */ jsx(Text.gradient, { color: "brand" }, "0")]
         }
       )
     )
@@ -770,42 +3656,6 @@ var Alert = (props) => {
     }
   ) });
 };
-function generateReferralLink(referralLinkUrl, code) {
-  return `${referralLinkUrl || window?.location?.origin}?ref=${code}`;
-}
-async function copyText(content) {
-  try {
-    await navigator.clipboard.writeText(content);
-    toast.success(i18n.t("common.copy.copied"));
-  } catch (error) {
-    toast.success(i18n.t("common.copy.failed"));
-  }
-}
-function formatDateTimeToUTC(input) {
-  if (input === void 0) {
-    return "";
-  }
-  const date = toDate(input);
-  const utcDate = toUTCDate(date);
-  return format(utcDate, "yyyy-MM-dd HH:mm:ss 'UTC'");
-}
-function formatYMDTime(time) {
-  if (time === void 0) {
-    return void 0;
-  }
-  const date = toDate(time);
-  const utcDate = toUTCDate(date);
-  return format(utcDate, "yyyy-MM-dd");
-}
-function compareDate(d1, d2) {
-  const isEqual = d1 && d2 && d1.toISOString().substring(0, 10) === d2.toISOString().substring(0, 10);
-  return isEqual;
-}
-function toUTCDate(date) {
-  return new Date(date.toUTCString());
-}
-
-// src/pages/affiliate/referralLink/referralLink.script.tsx
 var useReferralLinkScript = () => {
   const { t } = useTranslation();
   const onCopy = (value) => {
@@ -920,31 +3770,6 @@ var Title3 = (props) => {
     ] })
   ] });
 };
-function fillData(days, origin) {
-  const now = Date();
-  const result = new Array(days).fill(0).map((_, index) => {
-    return {
-      date: format(subDays(now, index + 1), "yyyy-MM-dd"),
-      volume: 0,
-      opacity: 0
-    };
-  }).reverse();
-  const dataObject = origin?.reduce(
-    (acc, curr) => {
-      acc[curr.date] = curr;
-      return acc;
-    },
-    {}
-  );
-  for (let index = 0; index < result.length; index++) {
-    const element = result[index];
-    const originData = dataObject?.[element.date];
-    if (originData) {
-      result[index] = { ...originData, opacity: originData.volume > 0 ? 1 : 0 };
-    }
-  }
-  return result;
-}
 var useTitleStatisticScript = () => {
   const { t } = useTranslation();
   const [period, setPeriod] = useState("7");
@@ -1136,7 +3961,7 @@ var MobileLayout = (props) => {
       renderItem: (e, index) => {
         return /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
           /* @__PURE__ */ jsx(
-            MobileCell,
+            MobileCell2,
             {
               data: e,
               editRate: props.editRate,
@@ -1187,7 +4012,7 @@ var MobileCellItem = (props) => {
     }
   );
 };
-var MobileCell = (props) => {
+var MobileCell2 = (props) => {
   const { data, setPinCode, copyLink, editRate, editCode } = props;
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(Flex, { gap: 3, direction: "column", className: "oui-w-full", children: [
@@ -1758,25 +4583,33 @@ var useReferralCodesScript = () => {
     setPinCodes([...pinCodes]);
   };
   const codes = useMemo(() => {
-    if (!referralInfo?.referrer_info?.referral_codes) {
-      return void 0;
-    }
-    const referralCodes = referralInfo?.referrer_info?.referral_codes?.map((item) => {
-      if (generateCode && generateCode.code === item.code) {
-        item.isAutoGenerated = true;
+    if (referralInfo?.referrer_info?.referral_codes) {
+      const referralCodes = referralInfo.referrer_info.referral_codes.map((item) => {
+        const code = {
+          ...item
+        };
+        if (generateCode && generateCode.code === item.code) {
+          code.isAutoGenerated = true;
+        }
+        return code;
+      });
+      const pinedItems = [];
+      const unpinedItems = [...referralCodes];
+      for (let i = 0; i < pinCodes.length; i++) {
+        const code = pinCodes[i];
+        const index = unpinedItems.findIndex((item) => item.code === code);
+        if (index !== -1) {
+          pinedItems.push({ ...unpinedItems[index], isPined: true });
+          unpinedItems.splice(index, 1);
+        }
       }
-      return item;
-    });
-    const pinedItems = [];
-    for (let i = 0; i < pinCodes.length; i++) {
-      const code = pinCodes[i];
-      const index = referralCodes.findIndex((item) => item.code === code);
-      if (index !== -1) {
-        pinedItems.push({ ...referralCodes[index], isPined: true });
-        referralCodes.splice(index, 1);
+      const allCodes = [...pinedItems, ...unpinedItems];
+      if (allCodes.length === 0) {
+        return void 0;
       }
+      return allCodes;
     }
-    return [...pinedItems, ...referralCodes];
+    return void 0;
   }, [referralInfo?.referrer_info?.referral_codes, pinCodes, generateCode]);
   return {
     copyCode,
@@ -2250,7 +5083,7 @@ var Layout = () => {
 var Layout1024 = () => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col xl:oui-flex-row oui-gap-4 oui-w-full", children: [
-      /* @__PURE__ */ jsx(SummaryWidget, {}),
+      /* @__PURE__ */ jsx(SummaryWidget2, {}),
       /* @__PURE__ */ jsx(ReferralLinkWidget, {})
     ] }),
     /* @__PURE__ */ jsx(TitleStatisticWidget, {}),
@@ -2260,7 +5093,7 @@ var Layout1024 = () => {
 var Layout1280 = () => {
   return /* @__PURE__ */ jsxs(Flex, { direction: "row", itemAlign: "stretch", gap: 4, children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, className: "oui-flex-1 oui-w-1/2", children: [
-      /* @__PURE__ */ jsx("div", { className: "oui-flex-1 oui-h-full oui-w-full", children: /* @__PURE__ */ jsx(SummaryWidget, {}) }),
+      /* @__PURE__ */ jsx("div", { className: "oui-flex-1 oui-h-full oui-w-full", children: /* @__PURE__ */ jsx(SummaryWidget2, {}) }),
       /* @__PURE__ */ jsx(TitleStatisticWidget, {})
     ] }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, className: "oui-w-1/2", children: [
@@ -2946,7 +5779,7 @@ var useAsTraderScript = () => {
       [AuthStatusEnum.WrongNetwork]: t("connector.wrongNetwork.tooltip")
     };
     return message[authStatus];
-  }, [authStatus]);
+  }, [t, authStatus]);
   return {
     isTrader,
     isLoading,
@@ -3215,7 +6048,7 @@ var HomePage = () => {
     }
   );
 };
-var Summary2 = (props) => {
+var Summary3 = (props) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     Flex,
@@ -3344,7 +6177,7 @@ var Row2 = (props) => {
     /* @__PURE__ */ jsx(Text, { className: "oui-text-xs md:oui-text-sm xl:oui-text-base", children: commifyOptional(props.vol, { fix: 2, fallback: "0" }) })
   ] });
 };
-var useSummaryScript2 = () => {
+var useSummaryScript3 = () => {
   const { t } = useTranslation();
   const [period, setPeriod] = useState("All");
   const periodTypes = [
@@ -3401,9 +6234,9 @@ var useSummaryScript2 = () => {
     code
   };
 };
-var SummaryWidget2 = () => {
-  const state = useSummaryScript2();
-  return /* @__PURE__ */ jsx(Summary2, { ...state });
+var SummaryWidget3 = () => {
+  const state = useSummaryScript3();
+  return /* @__PURE__ */ jsx(Summary3, { ...state });
 };
 var TitleStatistic2 = (props) => {
   return /* @__PURE__ */ jsxs(
@@ -3766,7 +6599,7 @@ var TraderPage = () => {
             gap: 4,
             className: "oui-flex oui-flex-col xl:oui-flex-row xl:oui-items-stretch",
             children: [
-              /* @__PURE__ */ jsx(SummaryWidget2, {}),
+              /* @__PURE__ */ jsx(SummaryWidget3, {}),
               /* @__PURE__ */ jsx(TitleStatisticWidget2, {})
             ]
           }
@@ -3959,9 +6792,39 @@ var TabWidget = (props) => {
   return /* @__PURE__ */ jsx(Tab, { classNames: props.classNames, ...state });
 };
 var DashboardPage = (props) => {
-  const { classNames = {} } = props;
-  const { root, ...rest } = classNames;
-  return /* @__PURE__ */ jsx("div", { id: "oui-affiliate-dashboard-page", className: cn("oui-w-full oui-tracking-tight", root), children: /* @__PURE__ */ jsx(TabWidget, { classNames: rest }) });
+  const { root, ...rest } = props.classNames || {};
+  const { state } = useAccount();
+  const { wrongNetwork, disabledConnect, initialized } = useAppContext();
+  const { isMultiLevelEnabled, multiLevelRebateInfo, isAffiliate, isLoading } = useReferralContext();
+  const loadingView = /* @__PURE__ */ jsx(Flex, { justify: "center", itemAlign: "center", height: "100vh", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  const [delay, setDelay] = useState(!initialized);
+  useEffect(() => {
+    const timer = setTimeout(() => setDelay(false), 500);
+    return () => clearTimeout(timer);
+  }, []);
+  if (state.validating || delay) {
+    return loadingView;
+  }
+  if (wrongNetwork || disabledConnect || state.status < AccountStatusEnum.EnableTrading && state.status !== AccountStatusEnum.EnableTradingWithoutConnected) {
+    return /* @__PURE__ */ jsx(LandingPage, {});
+  }
+  if (isLoading) {
+    return loadingView;
+  }
+  if (isMultiLevelEnabled) {
+    if (multiLevelRebateInfo?.referral_code || isAffiliate) {
+      return /* @__PURE__ */ jsx(MultiLevelAffiliatePage, {});
+    }
+    return /* @__PURE__ */ jsx(LandingPage, {});
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: "oui-affiliate-dashboard-page",
+      className: cn("oui-w-full oui-tracking-tight", root),
+      children: /* @__PURE__ */ jsx(TabWidget, { classNames: rest })
+    }
+  );
 };
 var AffiliateLayout = (props) => {
   const { ...rest } = props;
@@ -4062,6 +6925,6 @@ var AffiliateLayoutWidget = (props) => {
   return /* @__PURE__ */ jsx(AffiliateLayout, { ...state, children: props.children });
 };
 
-export { AffiliateLayoutWidget, dashboard_exports as Dashboard, ReferralContext, ReferralProvider, TabTypes, useReferralContext };
+export { AffiliateLayoutWidget, dashboard_exports as Dashboard, LandingPage, MultiLevelAffiliatePage, ReferralContext, ReferralProvider, TabTypes, useReferralContext };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map