@orderly.network/affiliate 3.1.0 → 3.1.1-alpha.0

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { createContext, useState, useEffect, useRef, useMemo, useContext, useCal
 import { useMutation, cleanStringStyle, useCheckReferralCode, useAccount, usePrivateQuery, noCacheConfig, useDaily, useMemoizedFn, useMediaQuery, useReferralRebateSummary, useLocalStorage, useRefereeRebateSummary, useRefereeInfo } from '@orderly.network/hooks';
 import { useAppContext } from '@orderly.network/react-app';
 import { AccountStatusEnum, EMPTY_LIST } from '@orderly.network/types';
-import { registerSimpleDialog, registerSimpleSheet, modal, useModal, SimpleDialog, TextField, inputFormatter, Flex, Text, cn, toast, Dialog, DialogContent, DialogTitle, Divider, Input as Input$1, Button, formatAddress, Checkbox, Box, Slider, WarningIcon, Grid, Spinner, Collapsible, CollapsibleContent, Select, Tabs, TabPanel, useScreen, usePagination, DatePicker, TabsBase, TabsList, TabsTrigger, TabsContent, parseNumber, ListView, CopyIcon, DataTable, Statistic, Tooltip, DialogTrigger, DialogHeader, DialogBody } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, modal, useModal, SimpleDialog, TextField, inputFormatter, Flex, Text, cn, toast, Dialog, DialogContent, DialogTitle, Divider, Input as Input$1, Button, formatAddress, Checkbox, Box, Slider, WarningIcon, Tooltip, Grid, Spinner, Collapsible, CollapsibleContent, Select, Tabs, TabPanel, useScreen, usePagination, DatePicker, TabsBase, TabsList, TabsTrigger, TabsContent, parseNumber, ListView, CopyIcon, DataTable, Statistic, 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';
@@ -89,23 +89,33 @@ var useMultiLevelReferralData = () => {
   const isMultiLevelReferralUnlocked = volumePrerequisite && volumePrerequisite.current_volume >= volumePrerequisite.required_volume;
   const isMultiLevelEnabled = !!maxRebateRateRes;
   const maxRebateRate = maxRebateRateRes?.max_rebate_rate;
+  const bonusMaxRebateRate = maxRebateRateRes?.bonus_max_rebate_rate ?? maxRebateRate ?? 0;
+  const baseRebateRate = maxRebateRateRes?.base_rebate_rate ?? 0;
   const multiLevelRebateInfo = useMemo(() => {
     if (!multiLevelRebateInfoRes) return;
     const {
       default_referee_rebate_rate: referee_rebate_rate,
+      default_bonus_referee_rebate_rate,
+      bonus_max_rebate_rate,
       max_rebate_rate
     } = multiLevelRebateInfoRes;
-    const referrer_rebate_rate = new Decimal(max_rebate_rate || 0).sub(referee_rebate_rate || 0).toNumber();
+    const refereeBonusRebateRate = default_bonus_referee_rebate_rate ?? referee_rebate_rate ?? 0;
+    const referrer_rebate_rate = new Decimal(
+      bonus_max_rebate_rate ?? max_rebate_rate ?? 0
+    ).sub(refereeBonusRebateRate).toNumber();
     return {
       ...multiLevelRebateInfoRes,
-      referee_rebate_rate,
+      referee_rebate_rate: refereeBonusRebateRate,
       referrer_rebate_rate
     };
-  }, [multiLevelRebateInfoRes, maxRebateRate]);
+  }, [multiLevelRebateInfoRes]);
   const isLoading = volumePrerequisiteLoading || maxRebateRateLoading || multiLevelRebateInfoLoading;
   return {
     volumePrerequisite,
     maxRebateRate,
+    maxRebateRateInfo: maxRebateRateRes,
+    bonusMaxRebateRate,
+    baseRebateRate,
     multiLevelRebateInfo,
     isMultiLevelEnabled,
     isMultiLevelReferralUnlocked,
@@ -159,6 +169,9 @@ var ReferralProvider = (props) => {
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
     maxRebateRate,
+    maxRebateRateInfo,
+    bonusMaxRebateRate,
+    baseRebateRate,
     maxRebateRateMutate,
     isLoading: isMultiLevelLoading
   } = useMultiLevelReferralData();
@@ -272,6 +285,9 @@ var ReferralProvider = (props) => {
       isMultiLevelReferralUnlocked,
       multiLevelRebateInfoMutate,
       maxRebateRate,
+      maxRebateRateInfo,
+      bonusMaxRebateRate,
+      baseRebateRate,
       maxRebateRateMutate
     };
   }, [
@@ -303,6 +319,9 @@ var ReferralProvider = (props) => {
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
     maxRebateRate,
+    maxRebateRateInfo,
+    bonusMaxRebateRate,
+    baseRebateRate,
     isMultiLevelLoading,
     maxRebateRateMutate
   ]);
@@ -462,17 +481,23 @@ var useReferralCode = () => {
 
 // src/pages/multiLevel/affiliate/referralCodeForm/referralCodeForm.script.ts
 var useReferralCodeFormScript = (options) => {
-  const { type, referralCode, maxRebateRate, referrerRebateRate, accountId } = options;
+  const { type, referralCode, 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 bonusMaxRebatePercentage = useMemo(() => {
+    return new Decimal(options.bonusMaxRebateRate ?? options.maxRebateRate ?? 0).mul(100).toNumber();
+  }, [options.bonusMaxRebateRate, options.maxRebateRate]);
+  const baseRebatePercentage = useMemo(() => {
+    return new Decimal(options.baseRebateRate ?? 0).mul(100).toNumber();
+  }, [options.baseRebateRate]);
+  const totalSplitPercentage = useMemo(() => {
+    return new Decimal(bonusMaxRebatePercentage).add(baseRebatePercentage).toNumber();
+  }, [bonusMaxRebatePercentage, baseRebatePercentage]);
   const [referrerRebatePercentage, setReferrerRebatePercentage] = useState(
     () => {
       if (type === "create" /* Create */) {
-        return Math.ceil(maxRebatePercentage / 2);
+        return bonusMaxRebatePercentage;
       }
       if (referrerRebateRate) {
         return new Decimal(referrerRebateRate).mul(100).toNumber();
@@ -487,12 +512,17 @@ var useReferralCodeFormScript = (options) => {
     resetRebateRate,
     isMutating
   } = useReferralCode();
-  const refereeRebatePercentage = useMemo(() => {
+  const refereeBonusRebatePercentage = useMemo(() => {
     return Math.max(
       0,
-      new Decimal(maxRebatePercentage).sub(referrerRebatePercentage).toNumber()
+      new Decimal(bonusMaxRebatePercentage).sub(referrerRebatePercentage).toNumber()
     );
-  }, [maxRebatePercentage, referrerRebatePercentage]);
+  }, [bonusMaxRebatePercentage, referrerRebatePercentage]);
+  const refereeRebatePercentage = useMemo(() => {
+    return new Decimal(baseRebatePercentage).add(refereeBonusRebatePercentage).toNumber();
+  }, [baseRebatePercentage, refereeBonusRebatePercentage]);
+  const directTradesPercentage = totalSplitPercentage;
+  const indirectTradesPercentage = referrerRebatePercentage;
   const codeChanged = useMemo(() => {
     return newCode !== referralCode;
   }, [newCode, referralCode]);
@@ -524,7 +554,7 @@ var useReferralCodeFormScript = (options) => {
       new_referral_code: newCode.toUpperCase().replace(/[^A-Z0-9]/g, "")
     };
     const updateRebateRateParams = {
-      referee_rebate_rate: new Decimal(refereeRebatePercentage).div(100).toNumber(),
+      referee_rebate_rate: new Decimal(refereeBonusRebatePercentage).div(100).toNumber(),
       account_ids: accountId ? [accountId] : void 0
     };
     try {
@@ -549,8 +579,9 @@ var useReferralCodeFormScript = (options) => {
   };
   const onCreate = async () => {
     try {
-      const referee_rebate_rate = new Decimal(refereeRebatePercentage).div(100).toNumber();
-      const res = await createReferralCode({ referee_rebate_rate });
+      const res = await createReferralCode({
+        referee_rebate_rate: new Decimal(refereeBonusRebatePercentage).div(100).toNumber()
+      });
       if (res.success) {
         toast.success(t("affiliate.referralCode.create.success"));
         options.onSuccess?.();
@@ -573,10 +604,14 @@ var useReferralCodeFormScript = (options) => {
   const onClick = () => {
     switch (type) {
       case "create" /* Create */:
-        onCreate();
+        if (isReview) {
+          onCreate();
+        } else {
+          setIsReview(true);
+        }
         break;
       case "edit" /* Edit */:
-        if (isReview) {
+        if (accountId || isReview) {
           onEdit();
         } else {
           setIsReview(true);
@@ -587,15 +622,25 @@ var useReferralCodeFormScript = (options) => {
         break;
     }
   };
-  const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged;
+  const buttonDisabled = useMemo(() => {
+    if (type !== "edit" /* Edit */) {
+      return false;
+    }
+    return !codeChanged && !rateChanged;
+  }, [codeChanged, rateChanged, type]);
   const confirmButtonLoading = isMutating;
   return {
     type,
     onClick,
-    maxRebatePercentage,
+    maxRebatePercentage: bonusMaxRebatePercentage,
+    baseRebatePercentage,
+    totalSplitPercentage,
+    directTradesPercentage,
+    indirectTradesPercentage,
     referrerRebatePercentage,
     setReferrerRebatePercentage,
     refereeRebatePercentage,
+    refereeBonusRebatePercentage,
     confirmButtonLoading,
     newCode,
     setNewCode,
@@ -604,43 +649,6 @@ var useReferralCodeFormScript = (options) => {
     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 WarningBox = (props) => /* @__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" }),
-      typeof props.children === "string" ? /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children: props.children }) : props.children
-    ]
-  }
-);
 var ReferralCodeInput = (props) => {
   const hasSetCursorToEnd = useRef(false);
   return /* @__PURE__ */ jsx(
@@ -694,22 +702,22 @@ var ReferralCodeForm = (props) => {
   const isReset = type === "reset" /* Reset */;
   const hasBoundReferee = !!props.directInvites && props.directInvites > 0;
   const isEditingRefereeRebateRate = !!props.accountId;
-  const noCommissionAvailable = props.maxRebateRate === 0;
+  const noCommissionAvailable = props.maxRebatePercentage === 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")
+          title: isReview ? t("affiliate.referralCode.review.modal.title") : t("affiliate.referralCode.create.modal.title"),
+          description: null,
+          buttonText: isReview ? t("common.save") : t("affiliate.review")
         };
       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")
+          }) : isReview ? t("affiliate.referralCode.review.modal.title") : t("affiliate.referralCode.edit.modal.title"),
+          description: null,
+          buttonText: isEditingRefereeRebateRate ? t("common.save") : isReview ? t("common.save") : t("affiliate.review")
         };
       case "reset" /* Reset */:
         return {
@@ -741,7 +749,6 @@ var ReferralCodeForm = (props) => {
       ]
     }
   );
-  const descriptionView = /* @__PURE__ */ jsx(WarningBox, { children: description });
   const referralCodeInput = /* @__PURE__ */ jsx(
     ReferralCodeInput,
     {
@@ -752,41 +759,32 @@ var ReferralCodeForm = (props) => {
       label: t("affiliate.referralCode.editCodeModal.label")
     }
   );
-  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,
+  const rateEditor = /* @__PURE__ */ jsx(
+    CommissionRatesCard,
     {
-      value: props.referrerRebatePercentage,
-      restValue: props.refereeRebatePercentage,
+      directTradesRate: props.directTradesPercentage,
+      indirectTradesRate: props.indirectTradesPercentage,
+      totalSplitRate: props.totalSplitPercentage,
+      youKeepRate: props.referrerRebatePercentage,
+      refereeGetRate: props.refereeRebatePercentage,
+      baseRebateRate: props.baseRebatePercentage,
+      maxBonusRate: props.maxRebatePercentage,
       onChange: props.setReferrerRebatePercentage,
-      max: props.maxRebatePercentage,
-      disabled: noCommissionAvailable || isReview || isReset,
-      disabledIncrease: hasBoundReferee,
-      directBonusRebateRate: props.directBonusRebateRate,
-      noCommissionAvailable
+      showTradeRates: !isEditingRefereeRebateRate,
+      showSlider: !isReview && !isReset,
+      bordered: isEditingRefereeRebateRate ? false : true,
+      rightLabel: isEditingRefereeRebateRate ? t("affiliate.affiliateGet") : t("affiliate.directRefereesGet")
     }
   );
   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, { size: "2xs", intensity: 54, children: t("affiliate.directReferee") }),
     /* @__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: [
+  const buttons = /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 3, width: "100%", mt: 0, pt: 2, children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -815,26 +813,28 @@ var ReferralCodeForm = (props) => {
   const renderContent = () => {
     switch (type) {
       case "create" /* Create */:
-        return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
-          commissionConfiguration,
-          rebateRateSlider,
-          noCommissionAvailableWarning,
+        return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 6, children: [
+          !noCommissionAvailable && rateEditor,
           buttons
         ] });
       case "edit" /* Edit */:
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
+        return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 6, children: [
           isEditingRefereeRebateRate ? refereeInfo : referralCodeInput,
-          /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
-            commissionConfiguration,
-            rebateRateSlider,
-            noCommissionAvailableWarning,
-            buttons
-          ] })
+          !noCommissionAvailable && rateEditor,
+          buttons
         ] });
       case "reset" /* Reset */:
-        return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
+        return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 6, children: [
+          description,
           resetRebateRateLabel,
-          rebateRateSlider,
+          /* @__PURE__ */ jsx(
+            RateSplitValues,
+            {
+              youKeepRate: props.referrerRebatePercentage,
+              refereeGetRate: props.refereeRebatePercentage,
+              rightLabel: t("affiliate.directRefereesGet")
+            }
+          ),
           buttons
         ] });
       default:
@@ -850,118 +850,188 @@ var ReferralCodeForm = (props) => {
       className: "oui-affiliate-referralCodeForm oui-font-semibold",
       children: [
         titleView,
-        descriptionView,
         renderContent()
       ]
     }
   );
 };
-var NoCommissionCard = (props) => {
-  const { t } = useTranslation();
-  const amount = props.directBonusRebateRate;
-  if (!amount || amount <= 0) {
-    return null;
+var formatPercent = (value) => {
+  if (Number.isInteger(value)) {
+    return `${value}%`;
   }
+  return `${Number(value.toFixed(2))}%`;
+};
+var CommissionRatesCard = (props) => {
+  const { t } = useTranslation();
+  const selectablePercent = props.totalSplitRate > 0 ? Math.min(100, props.maxBonusRate / props.totalSplitRate * 100) : 100;
+  return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
+    props.showTradeRates && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("affiliate.yourCommissionRates") }),
+      /* @__PURE__ */ jsx(
+        RateRow,
+        {
+          label: t("affiliate.directTrades"),
+          tooltip: t("affiliate.directTradesDescription"),
+          value: props.directTradesRate
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        width: "100%",
+        direction: "column",
+        itemAlign: "start",
+        gap: 2,
+        p: props.bordered ? 2 : 0,
+        r: "lg",
+        className: props.bordered ? "oui-border oui-border-line-6" : "",
+        children: [
+          props.showTradeRates && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              RateRow,
+              {
+                label: t("affiliate.indirectTrades"),
+                tooltip: t("affiliate.indirectTradesDescription"),
+                value: props.indirectTradesRate,
+                bordered: false
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, { intensity: 8, className: "oui-w-full" })
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: "2xs", intensity: 54, className: "oui-w-full oui-text-start", children: [
+            t("affiliate.totalToSplit"),
+            ":",
+            " ",
+            /* @__PURE__ */ jsx(Text, { as: "span", intensity: 98, children: formatPercent(props.totalSplitRate) })
+          ] }),
+          props.showSlider && /* @__PURE__ */ jsxs(Box, { width: "100%", my: 1, className: "oui-relative", children: [
+            /* @__PURE__ */ jsx(
+              Slider,
+              {
+                min: 0,
+                max: props.totalSplitRate,
+                step: 1,
+                value: [props.youKeepRate],
+                onValueChange: (value) => {
+                  const newValue = value[0];
+                  const nextValue = Math.min(newValue, props.maxBonusRate);
+                  props.onChange(nextValue);
+                },
+                classNames: {
+                  range: "oui-bg-success-darken oui-h-2 oui-top-[0px]",
+                  trackInner: "oui-h-2 oui-top-[0px] oui-bg-base-contrast-12",
+                  thumb: "oui-border-[#d9d9d9] oui-bg-[#d9d9d9] oui-size-4"
+                }
+              }
+            ),
+            selectablePercent < 100 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "oui-pointer-events-none oui-absolute oui-end-0 oui-top-1/2 oui-h-2 oui-translate-y-[-50%] oui-rounded-e-full oui-bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.08)_0,rgba(255,255,255,0.08)_4px,transparent_4px,transparent_8px)]",
+                style: { left: `${selectablePercent}%` }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            RateSplitValues,
+            {
+              youKeepRate: props.youKeepRate,
+              refereeGetRate: props.refereeGetRate,
+              rightLabel: props.rightLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(PassDownHint, { amount: props.baseRebateRate })
+        ]
+      }
+    )
+  ] });
+};
+var RateRow = (props) => {
+  const label = /* @__PURE__ */ jsx(
+    Text,
+    {
+      size: "2xs",
+      intensity: 98,
+      className: "oui-cursor-pointer oui-underline oui-decoration-dotted oui-underline-offset-4",
+      children: props.label
+    }
+  );
   return /* @__PURE__ */ jsxs(
     Flex,
     {
-      direction: "column",
-      gap: 2,
-      mt: 2,
       width: "100%",
-      p: 4,
+      justify: "between",
+      itemAlign: "center",
+      gap: 2,
+      p: props.bordered === false ? 0 : 2,
       r: "lg",
-      className: "oui-border oui-border-base-contrast/[0.08] oui-tracking-[0.03em]",
+      className: props.bordered === false ? "" : "oui-border oui-border-line-6",
       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-font-semibold oui-text-primary-light", 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 }) })
+        props.tooltip ? /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: props.tooltip,
+            className: "oui-max-w-[200px] oui-bg-base-6",
+            arrow: { className: "oui-fill-base-6" },
+            children: label
+          }
+        ) : label,
+        /* @__PURE__ */ jsx(Text, { size: "lg", className: "oui-text-success-darken", children: formatPercent(props.value) })
       ]
     }
   );
 };
-var RebateRateSlider = (props) => {
+var RateSplitValues = (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,
+  return /* @__PURE__ */ jsxs(Flex, { width: "100%", gap: 2, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
       {
-        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"
-        }
+        direction: "column",
+        itemAlign: "start",
+        className: "oui-min-w-0 oui-flex-1",
+        children: [
+          /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("affiliate.youKeep") }),
+          /* @__PURE__ */ jsx(Text, { size: "lg", className: "oui-text-success-darken", children: formatPercent(props.youKeepRate) })
+        ]
       }
-    ) }),
-    /* @__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-mt-px oui-text-base-contrast"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "sm",
-            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")]
-              }
-            )
-          }
-        )
-      ] })
-    ] })
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        direction: "column",
+        itemAlign: "end",
+        className: "oui-min-w-0 oui-flex-1",
+        children: [
+          /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, className: "oui-text-right", children: props.rightLabel }),
+          /* @__PURE__ */ jsx(Text, { size: "lg", intensity: 54, className: "oui-text-right", children: formatPercent(props.refereeGetRate) })
+        ]
+      }
+    )
   ] });
 };
+var PassDownHint = (props) => {
+  const { t } = useTranslation();
+  if (props.amount <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      width: "100%",
+      itemAlign: "center",
+      gap: 2,
+      className: "oui-overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "oui-h-3 oui-w-6 oui-shrink-0 oui-rounded-[2px] oui-border oui-border-line-6 oui-bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.08)_0,rgba(255,255,255,0.08)_4px,transparent_4px,transparent_8px)]" }),
+        /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, className: "oui-leading-[15px]", children: t("affiliate.atLeastPassesDown", {
+          amount: formatPercent(props.amount)
+        }) })
+      ]
+    }
+  );
+};
 var ReferralCodeFormWidget = (props) => {
   const state = useReferralCodeFormScript(props);
   return /* @__PURE__ */ jsx(ReferralCodeForm, { ...state, ...props });
@@ -1044,6 +1114,21 @@ var useBindReferralCodeScript = (options) => {
     onConfirm
   };
 };
+var WarningBox = (props) => /* @__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" }),
+      typeof props.children === "string" ? /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children: props.children }) : props.children
+    ]
+  }
+);
 var BindReferralCode = (props) => {
   const { t } = useTranslation();
   const bindCodeInvalid = !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
@@ -1264,10 +1349,12 @@ var TradingVolumeProgress = (props) => {
     }
   );
 };
-function parseMaxRebateRateFromSettled(result) {
+function parseMaxRebateRateInfoFromSettled(result) {
   if (result.status !== "fulfilled") return void 0;
-  const num = result.value?.max_rebate_rate;
-  return typeof num === "number" ? num : void 0;
+  if (typeof result.value !== "object" || result.value === null) {
+    return void 0;
+  }
+  return result.value;
 }
 var Hero = () => {
   const { t } = useTranslation();
@@ -1281,9 +1368,13 @@ var Hero = () => {
     multiLevelRebateInfo,
     multiLevelRebateInfoMutate,
     maxRebateRate,
+    maxRebateRateInfo,
+    bonusMaxRebateRate,
+    baseRebateRate,
     maxRebateRateMutate,
     mutate,
-    referralInfo
+    referralInfo,
+    generateCode
   } = useReferralContext();
   const boundReferralCode = referralInfo?.referee_info?.referer_code?.trim() ?? "";
   const openBindReferralOnlyModal = () => {
@@ -1294,10 +1385,14 @@ var Hero = () => {
       }
     });
   };
-  const showCreateReferralCodeModal = (maxRateOverride) => {
+  const showCreateReferralCodeModal = (maxRateInfoOverride) => {
+    const latestMaxRateInfo = maxRateInfoOverride ?? maxRebateRateInfo;
     modal.show(ReferralCodeFormDialogId, {
       type: "create" /* Create */,
-      maxRebateRate: maxRateOverride ?? maxRebateRate ?? 0,
+      maxRebateRate: latestMaxRateInfo?.max_rebate_rate ?? maxRebateRate ?? 0,
+      bonusMaxRebateRate: latestMaxRateInfo?.bonus_max_rebate_rate ?? bonusMaxRebateRate,
+      baseRebateRate: latestMaxRateInfo?.base_rebate_rate ?? baseRebateRate,
+      referralCode: generateCode?.code,
       directBonusRebateRate: 0,
       onSuccess: () => {
         multiLevelRebateInfoMutate();
@@ -1317,8 +1412,10 @@ var Hero = () => {
             multiLevelRebateInfoMutate(),
             mutate()
           ]);
-          const latestMaxRebateRate = parseMaxRebateRateFromSettled(results[0]) ?? maxRebateRate;
-          showCreateReferralCodeModal(latestMaxRebateRate);
+          const latestMaxRebateRateInfo = parseMaxRebateRateInfoFromSettled(
+            results[0]
+          );
+          showCreateReferralCodeModal(latestMaxRebateRateInfo);
         }
       });
       return;
@@ -1810,12 +1907,18 @@ var useMultiLevelReferralScript = () => {
   const {
     isMultiLevelReferralUnlocked,
     maxRebateRate,
+    bonusMaxRebateRate,
+    baseRebateRate,
+    generateCode,
     multiLevelRebateInfoMutate
   } = useReferralContext();
   const createReferralCode = () => {
     modal.show(ReferralCodeFormDialogId, {
       type: "create" /* Create */,
       maxRebateRate,
+      bonusMaxRebateRate,
+      baseRebateRate,
+      referralCode: generateCode?.code,
       // because there is no multi level code, the /v1/referral/multi_level/rebate_info interface will throw an error, so here set to 0, and hide the extra bonus display when creating multi level code
       directBonusRebateRate: 0,
       onSuccess: () => {
@@ -1844,6 +1947,7 @@ var ReferralInfo = (props) => {
       gap: 4,
       p: 5,
       direction: "column",
+      itemAlign: "start",
       intensity: 900,
       className: "oui-affiliate-referralInfo oui-border oui-border-line-6",
       children: [
@@ -1890,65 +1994,42 @@ var ReferralInfo = (props) => {
           /* @__PURE__ */ jsx(Text, { size: "lg", color: "primaryLight", children: props.referralLink }),
           /* @__PURE__ */ jsx(CopyButton, { value: props.referralLink })
         ] }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "lg",
+            intensity: 98,
+            className: "oui-w-full oui-text-left oui-tracking-[0.03em]",
+            children: t("affiliate.yourCommissionRates")
+          }
+        ),
         /* @__PURE__ */ jsxs(
-          Box,
+          Flex,
           {
             width: "100%",
-            r: "2xl",
-            className: "oui-bg-base-contrast-4 oui-p-5 md:oui-py-7",
+            gap: 4,
+            itemAlign: "stretch",
+            direction: "row",
+            className: "oui-affiliate-referralInfo-commissionRates",
             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",
-                    className: "oui-affiliate-referralInfo-editSplit-btn",
-                    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")]
-                      }
-                    )
-                  }
-                )
-              ] })
+              /* @__PURE__ */ jsx(
+                CommissionRateCard,
+                {
+                  title: t("affiliate.directTrades"),
+                  rate: props.directTradesRate,
+                  description: t("affiliate.directTradesDescription"),
+                  className: "oui-affiliate-referralInfo-directTrades"
+                }
+              ),
+              props.showIndirectTrades ? /* @__PURE__ */ jsx(
+                CommissionRateCard,
+                {
+                  title: t("affiliate.indirectTrades"),
+                  rate: props.indirectTradesRate,
+                  description: t("affiliate.indirectTradesDescription"),
+                  className: "oui-affiliate-referralInfo-indirectTrades"
+                }
+              ) : null
             ]
           }
         )
@@ -1956,6 +2037,59 @@ var ReferralInfo = (props) => {
     }
   );
 };
+var CommissionRateCard = (props) => {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      r: "2xl",
+      direction: "column",
+      itemAlign: "start",
+      justify: "center",
+      p: 5,
+      className: cn(
+        "oui-min-w-0 oui-flex-1 oui-bg-base-contrast-4",
+        props.className
+      ),
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, width: "100%", itemAlign: "start", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "sm",
+            intensity: 98,
+            weight: "semibold",
+            className: "oui-w-full oui-tracking-[0.03em]",
+            children: props.title
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, width: "100%", itemAlign: "start", children: [
+          /* @__PURE__ */ jsxs(
+            Text,
+            {
+              size: "3xl",
+              weight: "semibold",
+              color: "success",
+              className: "oui-leading-9 oui-tracking-[0.03em]",
+              children: [
+                props.rate,
+                "%"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "sm",
+              intensity: 54,
+              weight: "semibold",
+              className: "oui-w-full oui-leading-5 oui-tracking-[0.03em]",
+              children: props.description
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
 var Container = (props) => {
   return /* @__PURE__ */ jsx(
     Flex,
@@ -2026,11 +2160,14 @@ var useReferralInfoScript = () => {
     if (!referralCode) return "";
     return generateReferralLink(referralLinkUrl, referralCode);
   }, [referralCode]);
-  const referrerRebateRate = useMemo(() => {
-    return new Decimal(multiLevelRebateInfo?.referrer_rebate_rate || 0).mul(100).toNumber();
+  const directTradesRate = useMemo(() => {
+    return new Decimal(multiLevelRebateInfo?.bonus_max_rebate_rate ?? 0).add(multiLevelRebateInfo?.base_rebate_rate ?? 0).mul(100).toNumber();
+  }, [multiLevelRebateInfo]);
+  const indirectTradesRate = useMemo(() => {
+    return new Decimal(multiLevelRebateInfo?.bonus_max_rebate_rate ?? 0).sub(multiLevelRebateInfo?.default_bonus_referee_rebate_rate ?? 0).mul(100).toNumber();
   }, [multiLevelRebateInfo]);
-  const refereeRebateRate = useMemo(() => {
-    return new Decimal(multiLevelRebateInfo?.referee_rebate_rate || 0).mul(100).toNumber();
+  const showIndirectTrades = useMemo(() => {
+    return !new Decimal(multiLevelRebateInfo?.bonus_max_rebate_rate ?? 0).eq(0);
   }, [multiLevelRebateInfo]);
   const directBonusRebateRate = useMemo(() => {
     return new Decimal(multiLevelRebateInfo?.direct_bonus_rebate_rate ?? 0).mul(100).toNumber();
@@ -2041,6 +2178,9 @@ var useReferralInfoScript = () => {
       focusField,
       referralCode: multiLevelRebateInfo?.referral_code,
       maxRebateRate,
+      bonusMaxRebateRate: multiLevelRebateInfo?.bonus_max_rebate_rate,
+      baseRebateRate: multiLevelRebateInfo?.base_rebate_rate,
+      defaultBonusRefereeRebateRate: multiLevelRebateInfo?.default_bonus_referee_rebate_rate,
       referrerRebateRate: multiLevelRebateInfo?.referrer_rebate_rate,
       directInvites: multiLevelRebateInfo?.direct_invites,
       directBonusRebateRate,
@@ -2054,8 +2194,9 @@ var useReferralInfoScript = () => {
     referralCode,
     referralLink,
     multiLevelRebateInfo,
-    referrerRebateRate,
-    refereeRebateRate,
+    directTradesRate,
+    indirectTradesRate,
+    showIndirectTrades,
     directBonusRebateRate
   };
 };
@@ -2225,13 +2366,7 @@ var BreakdownCell = ({ total, direct, indirect, directBonus, prefix, fix = 0, ti
     "\u2022 ",
     t("affiliate.direct"),
     ": ",
-    format9(direct + directBonus),
-    " ",
-    /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-54", children: [
-      "(",
-      t("affiliate.directInclBonus", { amount: format9(directBonus) }),
-      ")"
-    ] })
+    format9(direct + directBonus)
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     "\u2022 ",
     t("affiliate.direct"),
@@ -2488,6 +2623,12 @@ var useRefereesTableScript = (props = {}) => {
     return refereesPaginationUtils.parsePagination(refereesMeta);
   }, [refereesMeta, refereesPaginationUtils]);
   const { multiLevelRebateInfo, maxRebateRate, multiLevelRebateInfoMutate } = useReferralContext();
+  const showActionColumn = useMemo(() => {
+    return !new Decimal(multiLevelRebateInfo?.bonus_max_rebate_rate ?? 0).eq(0);
+  }, [multiLevelRebateInfo]);
+  const baseRebateRate = useMemo(() => {
+    return multiLevelRebateInfo?.base_rebate_rate ?? 0;
+  }, [multiLevelRebateInfo]);
   const onEditReferee = useCallback(
     (type, item) => {
       const referrerRebateRate = type === "reset" /* Reset */ ? multiLevelRebateInfo?.referrer_rebate_rate : item.referral_rebate_rate;
@@ -2495,6 +2636,9 @@ var useRefereesTableScript = (props = {}) => {
         type,
         referralCode: multiLevelRebateInfo?.referral_code,
         maxRebateRate,
+        bonusMaxRebateRate: multiLevelRebateInfo?.bonus_max_rebate_rate,
+        baseRebateRate: multiLevelRebateInfo?.base_rebate_rate,
+        defaultBonusRefereeRebateRate: multiLevelRebateInfo?.default_bonus_referee_rebate_rate,
         referrerRebateRate,
         onSuccess: () => {
           multiLevelRebateInfoMutate();
@@ -2510,6 +2654,11 @@ var useRefereesTableScript = (props = {}) => {
     },
     [
       maxRebateRate,
+      multiLevelRebateInfo?.base_rebate_rate,
+      multiLevelRebateInfo?.bonus_max_rebate_rate,
+      multiLevelRebateInfo?.default_bonus_referee_rebate_rate,
+      multiLevelRebateInfo?.direct_bonus_rebate_rate,
+      multiLevelRebateInfo?.direct_invites,
       multiLevelRebateInfo?.referral_code,
       multiLevelRebateInfo?.referrer_rebate_rate,
       multiLevelRebateInfoMutate,
@@ -2550,12 +2699,17 @@ var useRefereesTableScript = (props = {}) => {
     refereesPagination,
     isRefereesLoading,
     onEditReferee,
-    onRefereesSort
+    onRefereesSort,
+    showActionColumn,
+    baseRebateRate
   };
 };
 var getRebateRateText = (rate) => {
   return (rate * 100).toFixed(0) + "%";
 };
+var getRefereeRebateRateText = (refereeRate, baseRebateRate) => {
+  return new Decimal(refereeRate).add(baseRebateRate).mul(100).toFixed(0) + "%";
+};
 var getRefereeType = (bindType) => {
   const { t } = useTranslation();
   if (bindType === "legacy") {
@@ -2569,7 +2723,7 @@ var getRefereeType = (bindType) => {
     tooltip: t("affiliate.multiLevel.tooltip")
   };
 };
-var MobileRefereeItem = ({ item, onEditReferee }) => {
+var MobileRefereeItem = ({ item, onEditReferee, showActionColumn, baseRebateRate }) => {
   const { t } = useTranslation();
   const typeInfo = getRefereeType(item.bind_type);
   return /* @__PURE__ */ jsxs(MobileCard, { children: [
@@ -2584,14 +2738,23 @@ var MobileRefereeItem = ({ item, onEditReferee }) => {
     ) }),
     /* @__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.referralCodes.column.you&DirectReferees"),
+        children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+          getRebateRateText(item.referral_rebate_rate) + "/",
+          /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-54", children: [
+            getRefereeRebateRateText(
+              item.referee_rebate_rate,
+              baseRebateRate
+            ),
+            " "
+          ] }),
+          !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,
       {
@@ -2624,7 +2787,7 @@ var MobileRefereeItem = ({ item, onEditReferee }) => {
         title: t("affiliate.commission")
       }
     ) }),
-    /* @__PURE__ */ jsx(
+    showActionColumn && /* @__PURE__ */ jsx(
       MobileCell,
       {
         label: t("common.action"),
@@ -2689,12 +2852,16 @@ var RefereesTableUI = (props) => {
         render: (value) => /* @__PURE__ */ jsx(Text, { children: value })
       },
       {
-        title: t("affiliate.referralCodes.column.you&Referee"),
+        title: t("affiliate.referralCodes.column.you&DirectReferees"),
         dataIndex: "referee_rebate_rate",
+        width: 175,
         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),
+            getRefereeRebateRateText(
+              record.referee_rebate_rate,
+              props.baseRebateRate
+            ),
             " "
           ] }),
           !record.is_default_rate && /* @__PURE__ */ jsx("span", { className: "oui-text-primary-light", children: `(${t("affiliate.customized")})` })
@@ -2748,30 +2915,35 @@ var RefereesTableUI = (props) => {
         ),
         onSort: true
       },
-      {
-        title: t("common.action"),
-        dataIndex: "action",
-        render: (_, record) => record.bind_type !== "legacy" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              className: "oui-refereesTable-edit-btn 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-refereesTable-reset-btn oui-ms-2 oui-cursor-pointer oui-text-primary-light",
-              onClick: () => props.onEditReferee("reset" /* Reset */, record),
-              children: t("common.reset")
-            }
-          )
-        ] }) : null
-      }
+      ...props.showActionColumn ? [
+        {
+          title: t("common.action"),
+          dataIndex: "action",
+          render: (_, record) => record.bind_type !== "legacy" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: "oui-refereesTable-edit-btn 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-refereesTable-reset-btn oui-ms-2 oui-cursor-pointer oui-text-primary-light",
+                onClick: () => props.onEditReferee(
+                  "reset" /* Reset */,
+                  record
+                ),
+                children: t("common.reset")
+              }
+            )
+          ] }) : null
+        }
+      ] : []
     ];
-  }, [t, props.onEditReferee]);
+  }, [t, props.onEditReferee, props.showActionColumn, props.baseRebateRate]);
   return /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-affiliate-refereesTable oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
     ListView,
     {
@@ -2782,7 +2954,9 @@ var RefereesTableUI = (props) => {
           MobileRefereeItem,
           {
             item,
-            onEditReferee: props.onEditReferee
+            onEditReferee: props.onEditReferee,
+            showActionColumn: props.showActionColumn,
+            baseRebateRate: props.baseRebateRate
           }
         ),
         /* @__PURE__ */ jsx(Divider, { intensity: 8 })
@@ -2839,10 +3013,12 @@ var useMultiLevelReferralCodes = () => {
     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 bonusMaxRebateRate = multiLevelRebateInfo.bonus_max_rebate_rate ?? maxRebateRate;
+      const baseRebateRate = multiLevelRebateInfo.base_rebate_rate ?? 0;
+      const defaultRefereeRebateRate = multiLevelRebateInfo.default_bonus_referee_rebate_rate ?? multiLevelRebateInfo.default_referee_rebate_rate ?? 0;
       const referrerRebateRate = Math.max(
         0,
-        maxRebateRate - defaultRefereeRebateRate
+        bonusMaxRebateRate - defaultRefereeRebateRate
       );
       const directInvites = multiLevelRebateInfo?.direct_invites ?? 0;
       const indirectInvites = multiLevelRebateInfo?.indirect_invites ?? 0;
@@ -2861,6 +3037,7 @@ var useMultiLevelReferralCodes = () => {
         indirect_rebate: indirectRebate,
         direct_bonus_rebate: directBonusRebate,
         max_rebate_rate: maxRebateRate,
+        base_rebate_rate: baseRebateRate,
         referee_rebate_rate: defaultRefereeRebateRate,
         referrer_rebate_rate: referrerRebateRate,
         total_invites: directInvites + indirectInvites,
@@ -2889,6 +3066,7 @@ var useMultiLevelReferralCodes = () => {
             direct_rebate: totalRebate,
             indirect_rebate: 0,
             max_rebate_rate: item.max_rebate_rate ?? 0,
+            base_rebate_rate: 0,
             referee_rebate_rate: item.referee_rebate_rate ?? 0,
             referrer_rebate_rate: item.referrer_rebate_rate ?? 0,
             total_invites: totalInvites,
@@ -2954,6 +3132,9 @@ var useReferralCodesTableScript = (props = {}) => {
     isLoading: enabled && !codes
   };
 };
+var getRefereeRebateRateText2 = (refereeRate, baseRebateRate) => {
+  return new Decimal(refereeRate).add(baseRebateRate).mul(100).toFixed(0);
+};
 var getReferralCodeType = (referralType) => {
   const { t } = useTranslation();
   if (referralType === "multi") {
@@ -2970,7 +3151,10 @@ var getReferralCodeType = (referralType) => {
 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 refereeRate = getRefereeRebateRateText2(
+    item.referee_rebate_rate ?? 0,
+    item.base_rebate_rate ?? 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 || "" }) }),
@@ -2985,7 +3169,7 @@ var MobileReferralCodeItem = ({ item, copyCode }) => {
     /* @__PURE__ */ jsx(
       MobileCell,
       {
-        label: t("affiliate.referralCodes.column.you&Referee"),
+        label: t("affiliate.referralCodes.column.you&DirectReferees"),
         align: "end",
         children: /* @__PURE__ */ jsxs(Text, { children: [
           referrerRate,
@@ -3072,13 +3256,18 @@ var ReferralCodesTableUI = (props) => {
           t("affiliate.referralCodes.column.defaultSplit"),
           /* @__PURE__ */ jsx("br", {}),
           "(",
-          t("affiliate.referralCodes.column.you&Referee"),
+          t("affiliate.referralCodes.column.you&DirectReferees"),
           ")"
         ] }),
         dataIndex: "rate",
+        width: 180,
+        className: "!oui-whitespace-normal",
         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);
+          const refereeRate = getRefereeRebateRateText2(
+            record.referee_rebate_rate ?? 0,
+            record.base_rebate_rate ?? 0
+          );
           return /* @__PURE__ */ jsxs(Text, { children: [
             referrerRate,
             "%",
@@ -3271,35 +3460,44 @@ var Summary = (props) => {
             }
           }
         ),
-        /* @__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"
-              }
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            width: "100%",
+            gap: 6,
+            itemAlign: "stretch",
+            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 md:oui-h-full"
+                  }
+                }
+              ),
+              /* @__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 md:oui-h-full"
+                  }
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );