@orderly.network/affiliate 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/index.mjs

@@ -1,8 +1,8 @@
 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 { 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, Box, Slider, WarningIcon, Grid, Spinner, Collapsible, CollapsibleContent, Select, Tabs, TabPanel, usePagination, DatePicker, TabsBase, TabsList, TabsTrigger, TabsContent, parseNumber, ListView, CopyIcon, DataTable, useScreen, Statistic, Tooltip, DialogTrigger, DialogHeader, DialogBody } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, modal, useModal, SimpleDialog, TextField, inputFormatter, Flex, Text, cn, toast, Dialog, DialogContent, DialogTitle, Divider, Input as Input$1, Button, formatAddress, Checkbox, Box, Slider, WarningIcon, Grid, Spinner, Collapsible, CollapsibleContent, Select, Tabs, TabPanel, 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';
@@ -76,7 +76,11 @@ var useMultiLevelStatistics = (time_range) => {
 // src/hooks/useMultiLevelReferralData.ts
 var useMultiLevelReferralData = () => {
   const { data: volumePrerequisite, isLoading: volumePrerequisiteLoading } = useVolumePrerequisite();
-  const { data: maxRebateRateRes, isLoading: maxRebateRateLoading } = useMaxRebateRate();
+  const {
+    data: maxRebateRateRes,
+    mutate: maxRebateRateMutate,
+    isLoading: maxRebateRateLoading
+  } = useMaxRebateRate();
   const {
     data: multiLevelRebateInfoRes,
     mutate: multiLevelRebateInfoMutate,
@@ -106,6 +110,7 @@ var useMultiLevelReferralData = () => {
     isMultiLevelEnabled,
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
+    maxRebateRateMutate,
     isLoading
   };
 };
@@ -154,6 +159,7 @@ var ReferralProvider = (props) => {
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
     maxRebateRate,
+    maxRebateRateMutate,
     isLoading: isMultiLevelLoading
   } = useMultiLevelReferralData();
   const [showHome, setShowHome] = useState(isLoading);
@@ -197,10 +203,12 @@ var ReferralProvider = (props) => {
     }
   }, [isAffiliate, isTrader]);
   const memoMutate = useMemoizedFn(() => {
-    volumeStatisticsMutate();
-    dailyVolumeMutate();
-    referralInfoMutate();
-    generateCodeMutate();
+    return Promise.allSettled([
+      volumeStatisticsMutate(),
+      dailyVolumeMutate(),
+      referralInfoMutate(),
+      generateCodeMutate()
+    ]);
   });
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
@@ -263,7 +271,8 @@ var ReferralProvider = (props) => {
       isMultiLevelEnabled,
       isMultiLevelReferralUnlocked,
       multiLevelRebateInfoMutate,
-      maxRebateRate
+      maxRebateRate,
+      maxRebateRateMutate
     };
   }, [
     becomeAnAffiliateUrl,
@@ -294,7 +303,8 @@ var ReferralProvider = (props) => {
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
     maxRebateRate,
-    isMultiLevelLoading
+    isMultiLevelLoading,
+    maxRebateRateMutate
   ]);
   return /* @__PURE__ */ jsx(ReferralContext.Provider, { value: memoizedValue, children });
 };
@@ -415,6 +425,7 @@ var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx(
   }
 );
 var useReferralCode = () => {
+  const [doBindReferralCode, { isMutating: isBindMutating }] = useMutation("/v1/referral/bind");
   const [doCreateReferralCode, { isMutating: isCreateMutating }] = useMutation(
     "/v1/referral/multi_level/claim_code"
   );
@@ -426,6 +437,9 @@ var useReferralCode = () => {
   const createReferralCode = async (params) => {
     return doCreateReferralCode(params);
   };
+  const bindReferralCode = async (params) => {
+    return doBindReferralCode(params);
+  };
   const editReferralCode = async (params) => {
     return doEditReferralCode(params);
   };
@@ -435,8 +449,9 @@ var useReferralCode = () => {
   const resetRebateRate = async (params) => {
     return doResetRebateRate(params);
   };
-  const isMutating = isCreateMutating || isEditMutating || isUpdateRebateRateMutating || isResetRebateRateMutating;
+  const isMutating = isBindMutating || isCreateMutating || isEditMutating || isUpdateRebateRateMutating || isResetRebateRateMutating;
   return {
+    bindReferralCode,
     createReferralCode,
     editReferralCode,
     updateRebateRate,
@@ -477,15 +492,22 @@ var useReferralCodeFormScript = (options) => {
       0,
       new Decimal(maxRebatePercentage).sub(referrerRebatePercentage).toNumber()
     );
-  }, [referrerRebatePercentage]);
+  }, [maxRebatePercentage, 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 getErrorMessage = (err) => {
+    if (typeof err === "object" && err !== null && "message" in err) {
+      const msg = err.message;
+      return typeof msg === "string" ? msg : void 0;
+    }
+    return void 0;
+  };
   const handleError = (err) => {
-    toast.error(err?.message || t("common.somethingWentWrong"));
+    toast.error(getErrorMessage(err) || t("common.somethingWentWrong"));
   };
   const handleResult = (res) => {
     if (res.success) {
@@ -493,7 +515,7 @@ var useReferralCodeFormScript = (options) => {
       toast.success(t("affiliate.confirmChanges.success"));
       options.close?.();
     } else {
-      toast.error(res.message);
+      toast.error(res.message || t("common.somethingWentWrong"));
     }
   };
   const onEdit = async () => {
@@ -566,13 +588,15 @@ var useReferralCodeFormScript = (options) => {
     }
   };
   const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged;
+  const confirmButtonLoading = isMutating;
   return {
+    type,
     onClick,
     maxRebatePercentage,
     referrerRebatePercentage,
     setReferrerRebatePercentage,
     refereeRebatePercentage,
-    isMutating,
+    confirmButtonLoading,
     newCode,
     setNewCode,
     isReview,
@@ -602,6 +626,68 @@ var GiftIcon = (props) => {
     }
   );
 };
+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(
+    TextField,
+    {
+      type: "text",
+      fullWidth: true,
+      label: props.label ?? "",
+      placeholder: props.placeholder,
+      value: props.value,
+      onChange: (e) => {
+        props.onChange(e.target.value);
+      },
+      onFocus: (e) => {
+        if (props.autoFocus && !hasSetCursorToEnd.current) {
+          hasSetCursorToEnd.current = true;
+          const input = e.target;
+          const len = input.value.length;
+          requestAnimationFrame(() => {
+            input.setSelectionRange(len, len);
+          });
+        }
+      },
+      formatters: [
+        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"
+      },
+      helpText: props.helpText,
+      color: props.color,
+      maxLength: 10,
+      minLength: 4,
+      autoComplete: "off",
+      disabled: props.disabled,
+      autoFocus: props.autoFocus
+    }
+  );
+};
 var ReferralCodeForm = (props) => {
   const { type, isReview } = props;
   const { t } = useTranslation();
@@ -662,7 +748,8 @@ var ReferralCodeForm = (props) => {
       value: props.newCode,
       onChange: props.setNewCode,
       autoFocus: props.focusField === "referralCode" /* ReferralCode */,
-      disabled: isReview || hasBoundReferee
+      disabled: isReview || hasBoundReferee,
+      label: t("affiliate.referralCode.editCodeModal.label")
     }
   );
   const commissionConfiguration = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -717,8 +804,8 @@ var ReferralCodeForm = (props) => {
       {
         fullWidth: true,
         onClick: props.onClick,
-        disabled: props.buttonDisabled || props.isMutating,
-        loading: props.isMutating,
+        disabled: props.buttonDisabled || props.confirmButtonLoading,
+        loading: props.confirmButtonLoading,
         size: "md",
         className: "oui-referralCodeForm-confirm-btn",
         children: buttonText
@@ -772,6 +859,9 @@ var ReferralCodeForm = (props) => {
 var NoCommissionCard = (props) => {
   const { t } = useTranslation();
   const amount = props.directBonusRebateRate;
+  if (!amount || amount <= 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -786,7 +876,7 @@ var NoCommissionCard = (props) => {
         /* @__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: [
+            /* @__PURE__ */ jsxs(Text, { size: "lg", className: "oui-font-semibold oui-text-primary-light", children: [
               "+ ",
               amount,
               "%"
@@ -848,7 +938,7 @@ var RebateRateSlider = (props) => {
           GiftIcon,
           {
             size: 16,
-            className: "oui-text-base-contrast oui-mt-[1px]"
+            className: "oui-mt-px oui-text-base-contrast"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -872,72 +962,6 @@ var RebateRateSlider = (props) => {
     ] })
   ] });
 };
-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 });
@@ -954,6 +978,190 @@ registerSimpleDialog(ReferralCodeFormDialogId, ReferralCodeFormWidget, {
   }
 });
 registerSimpleSheet(ReferralCodeFormSheetId, ReferralCodeFormWidget);
+function formatReferralCodeInput(raw) {
+  return String(raw).replace(/[a-z]/g, (c) => c.toUpperCase()).replace(/[^A-Z0-9]/g, "");
+}
+var useBindReferralCodeScript = (options) => {
+  const { t } = useTranslation();
+  const [bindCodeInput, setBindCodeInput] = useState("");
+  const [skipBinding, setSkipBinding] = useState(false);
+  const [isAwaitingPostSuccess, setIsAwaitingPostSuccess] = useState(false);
+  const formattedBindCode = useMemo(
+    () => formatReferralCodeInput(bindCodeInput),
+    [bindCodeInput]
+  );
+  const { isExist: isBindCodeExist, isLoading: isBindCodeChecking } = useCheckReferralCode(
+    formattedBindCode.length >= 4 ? formattedBindCode : void 0
+  );
+  const { bindReferralCode, isMutating } = useReferralCode();
+  const getErrorMessage = (err) => {
+    if (typeof err === "object" && err !== null && "message" in err) {
+      const msg = err.message;
+      return typeof msg === "string" ? msg : void 0;
+    }
+    return void 0;
+  };
+  const handleError = (err) => {
+    toast.error(getErrorMessage(err) || t("common.somethingWentWrong"));
+  };
+  const runAfterSuccess = async (payload) => {
+    setIsAwaitingPostSuccess(true);
+    try {
+      await Promise.resolve(options.onSuccess?.(payload));
+    } finally {
+      setIsAwaitingPostSuccess(false);
+    }
+    options.close?.();
+  };
+  const onConfirm = async () => {
+    if (skipBinding) {
+      await runAfterSuccess({ skipped: true });
+      return;
+    }
+    if (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist) {
+      return;
+    }
+    try {
+      await bindReferralCode({ referral_code: formattedBindCode });
+      toast.success(t("affiliate.referralCode.bound"));
+      await runAfterSuccess({ skipped: false });
+    } catch (err) {
+      handleError(err);
+    }
+  };
+  const buttonDisabled = !skipBinding && (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist);
+  const confirmButtonLoading = isMutating || isAwaitingPostSuccess;
+  return {
+    bindCodeInput,
+    setBindCodeInput,
+    skipBinding,
+    setSkipBinding,
+    formattedBindCode,
+    isBindCodeExist,
+    isBindCodeChecking,
+    buttonDisabled,
+    confirmButtonLoading,
+    onConfirm
+  };
+};
+var BindReferralCode = (props) => {
+  const { t } = useTranslation();
+  const bindCodeInvalid = !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
+  const titleView = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      width: "100%",
+      direction: "column",
+      itemAlign: "start",
+      gap: 3,
+      className: "oui-bindReferralCode-header",
+      children: [
+        /* @__PURE__ */ jsx(Text, { size: "base", intensity: 98, children: t("affiliate.referralCode.bind.modal.title") }),
+        /* @__PURE__ */ jsx(Divider, { intensity: 8, className: "oui-w-full" })
+      ]
+    }
+  );
+  const descriptionView = /* @__PURE__ */ jsx(WarningBox, { children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      size: "2xs",
+      intensity: 54,
+      className: "oui-leading-[18px] oui-text-warning-darken",
+      children: t("affiliate.referralCode.bind.modal.description")
+    }
+  ) });
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      gap: 6,
+      className: "oui-affiliate-bindReferralCode oui-font-semibold",
+      children: [
+        titleView,
+        descriptionView,
+        /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 4, children: [
+          /* @__PURE__ */ jsx(
+            ReferralCodeInput,
+            {
+              value: props.bindCodeInput,
+              onChange: props.setBindCodeInput,
+              autoFocus: true,
+              disabled: props.skipBinding,
+              placeholder: t("affiliate.referralCode.bind.input.placeholder"),
+              helpText: bindCodeInvalid ? t("affiliate.referralCode.notExist") : void 0,
+              color: bindCodeInvalid ? "danger" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-[6px]", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                color: "white",
+                id: "oui-checkbox-bindReferralCode-skip",
+                checked: props.skipBinding,
+                onCheckedChange: (checked) => {
+                  props.setSkipBinding(checked);
+                  if (checked) {
+                    props.setBindCodeInput("");
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "oui-checkbox-bindReferralCode-skip",
+                className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54",
+                children: t("affiliate.referralCode.bind.skip")
+              }
+            )
+          ] }),
+          /* @__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",
+                className: "oui-bindReferralCode-cancel-btn",
+                children: t("common.cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: true,
+                onClick: props.onConfirm,
+                disabled: props.buttonDisabled || props.confirmButtonLoading,
+                loading: props.confirmButtonLoading,
+                size: "md",
+                className: "oui-bindReferralCode-confirm-btn",
+                children: t("common.confirm")
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var BindReferralCodeWidget = (props) => {
+  const state = useBindReferralCodeScript(props);
+  return /* @__PURE__ */ jsx(BindReferralCode, { ...state, ...props });
+};
+
+// src/pages/multiLevel/components/bindReferralCode/modal.ts
+var BindReferralCodeDialogId = "BindReferralCodeDialogId";
+registerSimpleDialog(BindReferralCodeDialogId, BindReferralCodeWidget, {
+  size: "sm",
+  classNames: {
+    content: "oui-border oui-border-line-6",
+    body: "!oui-pt-3"
+  }
+});
 var TradingVolumeProgress = (props) => {
   const { t } = useTranslation();
   const { classNames } = props;
@@ -1056,6 +1264,11 @@ var TradingVolumeProgress = (props) => {
     }
   );
 };
+function parseMaxRebateRateFromSettled(result) {
+  if (result.status !== "fulfilled") return void 0;
+  const num = result.value?.max_rebate_rate;
+  return typeof num === "number" ? num : void 0;
+}
 var Hero = () => {
   const { t } = useTranslation();
   const { state } = useAccount();
@@ -1064,21 +1277,54 @@ var Hero = () => {
   const {
     isMultiLevelReferralUnlocked,
     isMultiLevelEnabled,
+    isTrader,
     multiLevelRebateInfo,
     multiLevelRebateInfoMutate,
-    maxRebateRate
+    maxRebateRate,
+    maxRebateRateMutate,
+    mutate,
+    referralInfo
   } = useReferralContext();
-  const onCreateReferralCode = () => {
+  const boundReferralCode = referralInfo?.referee_info?.referer_code?.trim() ?? "";
+  const openBindReferralOnlyModal = () => {
+    modal.show(BindReferralCodeDialogId, {
+      onSuccess: async ({ skipped }) => {
+        if (skipped) return;
+        await Promise.allSettled([multiLevelRebateInfoMutate?.(), mutate?.()]);
+      }
+    });
+  };
+  const showCreateReferralCodeModal = (maxRateOverride) => {
     modal.show(ReferralCodeFormDialogId, {
       type: "create" /* Create */,
-      maxRebateRate,
-      directBonusRebateRate: 10,
-      // Hardcoded value before API is ready
+      maxRebateRate: maxRateOverride ?? maxRebateRate ?? 0,
+      directBonusRebateRate: 0,
       onSuccess: () => {
         multiLevelRebateInfoMutate();
       }
     });
   };
+  const onCreateReferralCode = () => {
+    if (!isTrader) {
+      modal.show(BindReferralCodeDialogId, {
+        onSuccess: async ({ skipped }) => {
+          if (skipped) {
+            showCreateReferralCodeModal();
+            return;
+          }
+          const results = await Promise.allSettled([
+            maxRebateRateMutate(),
+            multiLevelRebateInfoMutate(),
+            mutate()
+          ]);
+          const latestMaxRebateRate = parseMaxRebateRateFromSettled(results[0]) ?? maxRebateRate;
+          showCreateReferralCodeModal(latestMaxRebateRate);
+        }
+      });
+      return;
+    }
+    showCreateReferralCodeModal();
+  };
   const description = useMemo(() => {
     if (wrongNetwork) {
       return t("affiliate.wrongNetwork.description");
@@ -1093,24 +1339,64 @@ var Hero = () => {
       return "";
     }
     return t("affiliate.newReferralProgram.description");
-  }, [t, wrongNetwork, status]);
+  }, [t, wrongNetwork, status, isMultiLevelReferralUnlocked]);
   const renderContent = () => {
     if (!isMultiLevelReferralUnlocked) {
-      return /* @__PURE__ */ jsx(
-        TradingVolumeProgress,
+      return /* @__PURE__ */ jsxs(
+        Flex,
         {
-          classNames: {
-            root: "oui-items-start",
-            description: "!oui-text-start"
-          },
-          buttonProps: {
-            size: "xl"
-          }
+          direction: "column",
+          itemAlign: "start",
+          gap: 4,
+          className: "oui-w-full",
+          children: [
+            /* @__PURE__ */ jsx(
+              TradingVolumeProgress,
+              {
+                classNames: {
+                  root: "oui-items-start",
+                  description: "!oui-text-start"
+                },
+                buttonProps: {
+                  size: "xl"
+                }
+              }
+            ),
+            boundReferralCode ? /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, className: "oui-leading-normal", children: t("affiliate.newReferralProgram.referredBy", {
+              code: boundReferralCode
+            }) }) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "oui-cursor-pointer oui-border-none oui-bg-transparent oui-p-0",
+                  "oui-text-start oui-text-sm oui-font-normal oui-text-base-contrast-54 oui-underline oui-underline-offset-2",
+                  "oui-affiliate-landing-hero-bindReferralCode"
+                ),
+                onClick: openBindReferralOnlyModal,
+                children: t("affiliate.newReferralProgram.wereYouReferred")
+              }
+            )
+          ]
         }
       );
     }
     if (isMultiLevelEnabled && !multiLevelRebateInfo?.referral_code) {
-      return /* @__PURE__ */ jsx(Button, { size: "lg", className: "oui-px-4", onClick: onCreateReferralCode, children: t("affiliate.referralCode.create") });
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          direction: "column",
+          itemAlign: "start",
+          gap: 4,
+          className: "oui-w-full",
+          children: [
+            /* @__PURE__ */ jsx(Button, { size: "lg", className: "oui-px-4", onClick: onCreateReferralCode, children: t("affiliate.referralCode.create") }),
+            boundReferralCode ? /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, className: "oui-leading-normal", children: t("affiliate.newReferralProgram.referredBy", {
+              code: boundReferralCode
+            }) }) : null
+          ]
+        }
+      );
     }
     return "";
   };
@@ -1530,8 +1816,8 @@ var useMultiLevelReferralScript = () => {
     modal.show(ReferralCodeFormDialogId, {
       type: "create" /* Create */,
       maxRebateRate,
-      directBonusRebateRate: 10,
-      // Hardcoded value before API is ready
+      // 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: () => {
         multiLevelRebateInfoMutate();
       }
@@ -2976,6 +3262,7 @@ var Summary = (props) => {
             value: statistics.total_rebate,
             direct: statistics.direct_rebate + statistics.direct_bonus_rebate,
             indirect: statistics.indirect_rebate,
+            referredByCode: props.referredByCode,
             classNames: {
               root: "!oui-py-12",
               value: "oui-text-trade-profit",
@@ -3039,7 +3326,7 @@ var SummaryItem = (props) => {
           Text.numeral,
           {
             rule,
-            dp: props.dp,
+            dp,
             size: "3xl",
             prefix: props.prefix,
             placeholder: "--",
@@ -3058,7 +3345,7 @@ var SummaryItem = (props) => {
               Text.numeral,
               {
                 rule,
-                dp: props.dp,
+                dp,
                 prefix: props.prefix,
                 intensity: 54,
                 className: props.classNames?.direct,
@@ -3076,7 +3363,7 @@ var SummaryItem = (props) => {
               Text.numeral,
               {
                 rule,
-                dp: props.dp,
+                dp,
                 prefix: props.prefix,
                 intensity: 54,
                 className: props.classNames?.indirect,
@@ -3084,15 +3371,28 @@ var SummaryItem = (props) => {
               }
             )
           ] })
-        ] })
+        ] }),
+        props.referredByCode ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            intensity: 54,
+            className: "oui-affiliate-summary-referred-by oui-mt-5 oui-text-base-contrast-54",
+            children: t("affiliate.referredBy", { name: props.referredByCode })
+          }
+        ) : null
       ]
     }
   );
 };
 var useSummaryScript = () => {
   const { t } = useTranslation();
+  const { referralInfo } = useReferralContext();
   const [period, setPeriod] = useState("all_time" /* All */);
   const { data } = useMultiLevelStatistics(period);
+  const referredByCode = useMemo(() => {
+    const code = referralInfo?.referee_info?.referer_code?.trim();
+    return code || void 0;
+  }, [referralInfo]);
   const periodTypes = [
     { label: t("common.all"), value: "all_time" /* All */ },
     { label: t("common.select.1d"), value: "1d" /* 1d */ },
@@ -3134,7 +3434,8 @@ var useSummaryScript = () => {
     period,
     periodTypes,
     onPeriodChange,
-    statistics
+    statistics,
+    referredByCode
   };
 };
 var SummaryWidget = () => {