From 904f2d196374f181d7d4ad2aea2ea8b9684c69ef Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Thu, 26 Sep 2024 21:23:38 -0700
Subject: [PATCH 01/10] feat: register affiliates

---
 src/hooks/useAffiliatesInfo.ts             | 13 ++---
 src/hooks/useDydxClient.tsx                |  8 +++
 src/hooks/useReferredBy.ts                 | 26 ++++++++++
 src/hooks/useSubaccount.tsx                | 59 +++++++++++++++++++++-
 src/views/dialogs/ReferralDialog.tsx       | 19 ++++---
 src/views/dialogs/ShareAffiliateDialog.tsx | 16 +++---
 6 files changed, 120 insertions(+), 21 deletions(-)
 create mode 100644 src/hooks/useReferredBy.ts

diff --git a/src/hooks/useAffiliatesInfo.ts b/src/hooks/useAffiliatesInfo.ts
index 8888ac7db..c30f7a139 100644
--- a/src/hooks/useAffiliatesInfo.ts
+++ b/src/hooks/useAffiliatesInfo.ts
@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useAccounts } from './useAccounts';
 import { useDydxClient } from './useDydxClient';
 
 type AffiliatesMetadata = {
@@ -9,9 +8,8 @@ type AffiliatesMetadata = {
   isAffiliate: boolean;
 };
 
-export const useAffiliatesInfo = () => {
-  const { dydxAddress } = useAccounts();
-  const { compositeClient } = useDydxClient();
+export const useAffiliatesInfo = (dydxAddress?: string) => {
+  const { compositeClient, getAffiliateInfo } = useDydxClient();
 
   const queryFn = async () => {
     if (!compositeClient || !dydxAddress) {
@@ -24,9 +22,12 @@ export const useAffiliatesInfo = () => {
         'Content-Type': 'application/json',
       },
     });
+    const affiliateInfo = await getAffiliateInfo(dydxAddress);
 
-    const data = await response.json();
-    return data as AffiliatesMetadata | undefined;
+    const data: AffiliatesMetadata | undefined = await response.json();
+    const isEligible = Boolean(data?.isVolumeEligible) || Boolean(affiliateInfo?.isWhitelisted);
+
+    return { metadata: data, affiliateInfo, isEligible };
   };
 
   const { data, isFetched } = useQuery({
diff --git a/src/hooks/useDydxClient.tsx b/src/hooks/useDydxClient.tsx
index d0c33d711..6603b950a 100644
--- a/src/hooks/useDydxClient.tsx
+++ b/src/hooks/useDydxClient.tsx
@@ -420,6 +420,13 @@ const useDydxClientContext = () => {
     [compositeClient]
   );
 
+  const getAffiliateInfo = useCallback(
+    async (address: string) => {
+      return compositeClient?.validatorClient.get.getAffiliateInfo(address);
+    },
+    [compositeClient]
+  );
+
   return {
     // Client initialization
     connect: setNetworkConfig,
@@ -450,5 +457,6 @@ const useDydxClientContext = () => {
     getWithdrawalCapacityByDenom,
     getValidators,
     getAccountBalance,
+    getAffiliateInfo,
   };
 };
diff --git a/src/hooks/useReferredBy.ts b/src/hooks/useReferredBy.ts
new file mode 100644
index 000000000..7d226042f
--- /dev/null
+++ b/src/hooks/useReferredBy.ts
@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useAccounts } from './useAccounts';
+import { useSubaccount } from './useSubaccount';
+
+export const useReferralAddress = () => {
+  const { dydxAddress } = useAccounts();
+  const { getReferredBy } = useSubaccount();
+
+  const queryFn = async () => {
+    if (!dydxAddress) {
+      return undefined;
+    }
+    const affliateAddress = await getReferredBy(dydxAddress);
+
+    return affliateAddress;
+  };
+
+  const { data, isFetched } = useQuery({
+    queryKey: ['referredBy', dydxAddress],
+    queryFn,
+    enabled: Boolean(dydxAddress),
+  });
+
+  return { data, isFetched };
+};
diff --git a/src/hooks/useSubaccount.tsx b/src/hooks/useSubaccount.tsx
index 884d2075a2..ccfe5c333 100644
--- a/src/hooks/useSubaccount.tsx
+++ b/src/hooks/useSubaccount.tsx
@@ -26,6 +26,7 @@ import { AMOUNT_RESERVED_FOR_GAS_USDC, AMOUNT_USDC_BEFORE_REBALANCE } from '@/co
 import { DEFAULT_TRANSACTION_MEMO, TransactionMemo } from '@/constants/analytics';
 import { DialogTypes } from '@/constants/dialogs';
 import { ErrorParams } from '@/constants/errors';
+import { LocalStorageKey } from '@/constants/localStorage';
 import { QUANTUM_MULTIPLIER } from '@/constants/numbers';
 import { TradeTypes } from '@/constants/trade';
 import { DydxAddress, WalletType } from '@/constants/wallets';
@@ -53,6 +54,7 @@ import { hashFromTx } from '@/lib/txUtils';
 import { useAccounts } from './useAccounts';
 import { useDydxClient } from './useDydxClient';
 import { useGovernanceVariables } from './useGovernanceVariables';
+import { useLocalStorage } from './useLocalStorage';
 import { useTokenConfigs } from './useTokenConfigs';
 
 type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
@@ -75,6 +77,10 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
   const { connectedWallet } = useAccounts();
   const { compositeClient, faucetClient } = useDydxClient();
 
+  const [latestReferrer] = useLocalStorage<string | undefined>({
+    key: LocalStorageKey.LatestReferrer,
+    defaultValue: undefined,
+  });
   const isKeplr = connectedWallet?.name === WalletType.Keplr;
 
   const { getFaucetFunds, getNativeTokens } = useMemo(
@@ -284,7 +290,6 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
       const balanceAmount = parseFloat(balance.amount);
       const shouldDeposit = balanceAmount - AMOUNT_RESERVED_FOR_GAS_USDC > 0;
       const shouldWithdraw = balanceAmount - AMOUNT_USDC_BEFORE_REBALANCE <= 0;
-
       if (shouldDeposit) {
         await depositToSubaccount({
           amount: balanceAmount - AMOUNT_RESERVED_FOR_GAS_USDC,
@@ -877,6 +882,54 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
     [localDydxWallet, compositeClient]
   );
 
+  const registerAffiliate = useCallback(
+    async (affiliate: string) => {
+      if (!compositeClient) {
+        throw new Error('client not initialized');
+      }
+      if (!subaccountClient?.wallet?.address) {
+        throw new Error('wallet not initialized');
+      }
+      if (affiliate === subaccountClient?.wallet?.address) {
+        throw new Error('affiliate not be the same as referree');
+      }
+
+      const response = await compositeClient?.validatorClient.post.registerAffiliate(
+        subaccountClient,
+        affiliate
+      );
+
+      return response;
+    },
+    [subaccountClient, compositeClient]
+  );
+
+  const getReferredBy = useCallback(
+    async (address: string) => {
+      if (!compositeClient) {
+        throw new Error('client not initialized');
+      }
+
+      const response = await compositeClient?.validatorClient.get.getReferredBy(address);
+
+      return response;
+    },
+    [compositeClient]
+  );
+
+  useEffect(() => {
+    if (!subaccountClient) return;
+
+    if (
+      latestReferrer &&
+      dydxAddress &&
+      usdcCoinBalance &&
+      parseFloat(usdcCoinBalance.amount) > AMOUNT_USDC_BEFORE_REBALANCE
+    ) {
+      registerAffiliate(latestReferrer);
+    }
+  }, [latestReferrer, dydxAddress, registerAffiliate, usdcCoinBalance, subaccountClient]);
+
   return {
     // Deposit/Withdraw/Faucet Methods
     deposit,
@@ -906,5 +959,9 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
     getUndelegateFee,
     withdrawReward,
     getWithdrawRewardFee,
+
+    // affiliates
+    registerAffiliate,
+    getReferredBy,
   };
 };
diff --git a/src/views/dialogs/ReferralDialog.tsx b/src/views/dialogs/ReferralDialog.tsx
index 946c782d6..2abe0abbb 100644
--- a/src/views/dialogs/ReferralDialog.tsx
+++ b/src/views/dialogs/ReferralDialog.tsx
@@ -9,6 +9,7 @@ import { LocalStorageKey } from '@/constants/localStorage';
 import { STRING_KEYS } from '@/constants/localization';
 
 import { useAccounts } from '@/hooks/useAccounts';
+import { useAffiliatesInfo } from '@/hooks/useAffiliatesInfo';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useReferralAddress } from '@/hooks/useReferralAddress';
 import { useStringGetter } from '@/hooks/useStringGetter';
@@ -39,16 +40,20 @@ export const ReferralDialog = ({ setIsOpen, refCode }: DialogProps<ReferralDialo
   const stringGetter = useStringGetter();
   const { dydxAddress } = useAccounts();
   const { data: referralAddress, isFetched } = useReferralAddress(refCode);
+  const { data: affiliatesInfo, isFetched: isAffiliatesInfoFetched } =
+    useAffiliatesInfo(referralAddress);
   const [, saveLastestReferrer] = useLocalStorage<string | undefined>({
     key: LocalStorageKey.LatestReferrer,
     defaultValue: undefined,
   });
 
   useEffect(() => {
-    if (referralAddress) {
+    if (referralAddress && referralAddress !== dydxAddress) {
       saveLastestReferrer(referralAddress);
     }
-  }, [referralAddress, saveLastestReferrer]);
+  }, [dydxAddress, referralAddress, saveLastestReferrer]);
+
+  const isEligible = referralAddress && affiliatesInfo?.isEligible;
 
   return (
     <Dialog
@@ -58,18 +63,18 @@ export const ReferralDialog = ({ setIsOpen, refCode }: DialogProps<ReferralDialo
       title={
         <span tw="flex flex-row items-center gap-1">
           {stringGetter({
-            key: referralAddress ? STRING_KEYS.YOUR_FRIEND : STRING_KEYS.WELCOME_DYDX,
+            key: isEligible ? STRING_KEYS.YOUR_FRIEND : STRING_KEYS.WELCOME_DYDX,
           })}
           <span tw="text-color-text-0 font-medium-book">{truncateAddress(referralAddress)}</span>
         </span>
       }
       description={stringGetter({
-        key: referralAddress ? STRING_KEYS.INVITED_YOU : STRING_KEYS.THE_PRO_TRADING_PLATFORM,
+        key: isEligible ? STRING_KEYS.INVITED_YOU : STRING_KEYS.THE_PRO_TRADING_PLATFORM,
       })}
       slotHeaderAbove={
-        isFetched ? (
+        isFetched && isAffiliatesInfoFetched ? (
           <$HeaderAbove tw="flex flex-row items-center gap-1">
-            {referralAddress ? (
+            {isEligible ? (
               <img src="/hedgies-placeholder.png" alt="hedgie" tw="h-5" />
             ) : (
               <div tw="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-[100%] bg-color-layer-1">
@@ -81,7 +86,7 @@ export const ReferralDialog = ({ setIsOpen, refCode }: DialogProps<ReferralDialo
             <div tw="row">
               <$Triangle />
               <div tw="inline-block rounded-0.5 bg-color-layer-6 px-1 py-0.5 font-bold text-color-text-2">
-                {referralAddress ? (
+                {isEligible ? (
                   <span>
                     {stringGetter({
                       key: STRING_KEYS.REFER_FOR_DISCOUNTS_FIRST_ORDER,
diff --git a/src/views/dialogs/ShareAffiliateDialog.tsx b/src/views/dialogs/ShareAffiliateDialog.tsx
index 28a6e1494..9c3610613 100644
--- a/src/views/dialogs/ShareAffiliateDialog.tsx
+++ b/src/views/dialogs/ShareAffiliateDialog.tsx
@@ -7,6 +7,7 @@ import { DialogProps, ShareAffiliateDialogProps } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { ColorToken } from '@/constants/styles/base';
 
+import { useAccounts } from '@/hooks/useAccounts';
 import { useAffiliatesInfo } from '@/hooks/useAffiliatesInfo';
 import { useStringGetter } from '@/hooks/useStringGetter';
 import { useURLConfigs } from '@/hooks/useURLConfigs';
@@ -32,7 +33,8 @@ const copyBlobToClipboard = async (blob: Blob | null) => {
 export const ShareAffiliateDialog = ({ setIsOpen }: DialogProps<ShareAffiliateDialogProps>) => {
   const stringGetter = useStringGetter();
   const { affiliateProgram } = useURLConfigs();
-  const { data } = useAffiliatesInfo();
+  const { dydxAddress } = useAccounts();
+  const { data } = useAffiliatesInfo(dydxAddress as string);
 
   const [{ isLoading: isCopying }, , ref] = useToBlob<HTMLDivElement>({
     quality: 1.0,
@@ -56,7 +58,7 @@ export const ShareAffiliateDialog = ({ setIsOpen }: DialogProps<ShareAffiliateDi
     },
   });
 
-  const affiliatesUrl = `${window.location.host}?ref=${data?.referralCode}`;
+  const affiliatesUrl = `${window.location.host}?ref=${data?.metadata?.referralCode}`;
 
   return (
     <Dialog
@@ -81,7 +83,7 @@ export const ShareAffiliateDialog = ({ setIsOpen }: DialogProps<ShareAffiliateDi
         <div tw="row justify-between rounded-0.5 bg-color-layer-6 px-1 py-0.5">
           <div>
             <div tw="text-small text-color-text-0">
-              {data?.isVolumeEligible
+              {data?.isEligible
                 ? stringGetter({ key: STRING_KEYS.AFFILIATE_LINK })
                 : stringGetter({
                     key: STRING_KEYS.AFFILIATE_LINK_REQUIREMENT,
@@ -92,7 +94,7 @@ export const ShareAffiliateDialog = ({ setIsOpen }: DialogProps<ShareAffiliateDi
                   })}
             </div>
             <div>
-              {data?.isVolumeEligible
+              {data?.isEligible
                 ? affiliatesUrl
                 : stringGetter({
                     key: STRING_KEYS.YOUVE_TRADED,
@@ -103,7 +105,7 @@ export const ShareAffiliateDialog = ({ setIsOpen }: DialogProps<ShareAffiliateDi
                   })}
             </div>
           </div>
-          {data?.isVolumeEligible && (
+          {data?.isEligible && (
             <CopyButton action={ButtonAction.Primary} size={ButtonSize.Small} value={affiliatesUrl}>
               {stringGetter({ key: STRING_KEYS.COPY_LINK })}
             </CopyButton>
@@ -144,7 +146,7 @@ export const ShareAffiliateDialog = ({ setIsOpen }: DialogProps<ShareAffiliateDi
 
         <div tw="flex gap-1">
           <Button
-            action={data?.isVolumeEligible ? ButtonAction.Base : ButtonAction.Primary}
+            action={data?.isEligible ? ButtonAction.Base : ButtonAction.Primary}
             slotLeft={<Icon iconName={IconName.Rocket} />}
             state={{
               isLoading: isCopying,
@@ -154,7 +156,7 @@ export const ShareAffiliateDialog = ({ setIsOpen }: DialogProps<ShareAffiliateDi
           >
             {stringGetter({ key: STRING_KEYS.BECOME_A_VIP })}
           </Button>
-          {data?.isVolumeEligible && (
+          {data?.isEligible && (
             <Button
               action={ButtonAction.Base}
               slotLeft={<Icon iconName={IconName.SocialX} />}

From 78e6055d677fd2561c5755eb1605b323a8302018 Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Thu, 26 Sep 2024 22:16:40 -0700
Subject: [PATCH 02/10] referredBy

---
 src/constants/localStorage.ts        |  1 -
 src/hooks/useAffiliatesInfo.ts       | 33 +++++++++++--------
 src/hooks/useDydxClient.tsx          |  8 +++++
 src/hooks/useReferralAddress.ts      | 25 +++++++++-----
 src/hooks/useReferredBy.ts           | 17 +++++++---
 src/hooks/useSubaccount.tsx          | 49 ++++++++++++++++------------
 src/state/_store.ts                  |  4 ++-
 src/state/affiliates.ts              | 25 ++++++++++++++
 src/state/affiliatesSelector.ts      |  6 ++++
 src/views/dialogs/ReferralDialog.tsx | 16 ++++-----
 10 files changed, 125 insertions(+), 59 deletions(-)
 create mode 100644 src/state/affiliates.ts
 create mode 100644 src/state/affiliatesSelector.ts

diff --git a/src/constants/localStorage.ts b/src/constants/localStorage.ts
index 1844e462f..407ab6a31 100644
--- a/src/constants/localStorage.ts
+++ b/src/constants/localStorage.ts
@@ -8,7 +8,6 @@ export enum LocalStorageKey {
   EvmDerivedAddresses = 'dydx.EvmDerivedAddresses',
   KeplrCompliance = 'dydx.KeplrCompliance',
   SolDerivedAddresses = 'dydx.SolDerivedAddresses',
-  LatestReferrer = 'dydx.LatestReferrer',
 
   // Gas
   SelectedGasDenom = 'dydx.SelectedGasDenom',
diff --git a/src/hooks/useAffiliatesInfo.ts b/src/hooks/useAffiliatesInfo.ts
index c30f7a139..377d41d3e 100644
--- a/src/hooks/useAffiliatesInfo.ts
+++ b/src/hooks/useAffiliatesInfo.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { log } from '@/lib/telemetry';
+
 import { useDydxClient } from './useDydxClient';
 
 type AffiliatesMetadata = {
@@ -15,19 +17,24 @@ export const useAffiliatesInfo = (dydxAddress?: string) => {
     if (!compositeClient || !dydxAddress) {
       return undefined;
     }
-    const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/metadata`;
-    const response = await fetch(`${endpoint}?address=${encodeURIComponent(dydxAddress)}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    const affiliateInfo = await getAffiliateInfo(dydxAddress);
-
-    const data: AffiliatesMetadata | undefined = await response.json();
-    const isEligible = Boolean(data?.isVolumeEligible) || Boolean(affiliateInfo?.isWhitelisted);
-
-    return { metadata: data, affiliateInfo, isEligible };
+    try {
+      const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/metadata`;
+      const response = await fetch(`${endpoint}?address=${encodeURIComponent(dydxAddress)}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      const affiliateInfo = await getAffiliateInfo(dydxAddress);
+
+      const data: AffiliatesMetadata | undefined = await response.json();
+      const isEligible = Boolean(data?.isVolumeEligible) || Boolean(affiliateInfo?.isWhitelisted);
+
+      return { metadata: data, affiliateInfo, isEligible };
+    } catch (error) {
+      log('useAffiliatesInfo', error);
+      return undefined;
+    }
   };
 
   const { data, isFetched } = useQuery({
diff --git a/src/hooks/useDydxClient.tsx b/src/hooks/useDydxClient.tsx
index 6603b950a..ade33ec3d 100644
--- a/src/hooks/useDydxClient.tsx
+++ b/src/hooks/useDydxClient.tsx
@@ -427,6 +427,13 @@ const useDydxClientContext = () => {
     [compositeClient]
   );
 
+  const getReferredBy = useCallback(
+    async (address: string) => {
+      return compositeClient?.validatorClient.get.getReferredBy(address);
+    },
+    [compositeClient]
+  );
+
   return {
     // Client initialization
     connect: setNetworkConfig,
@@ -458,5 +465,6 @@ const useDydxClientContext = () => {
     getValidators,
     getAccountBalance,
     getAffiliateInfo,
+    getReferredBy,
   };
 };
diff --git a/src/hooks/useReferralAddress.ts b/src/hooks/useReferralAddress.ts
index ff6731424..3ced5764d 100644
--- a/src/hooks/useReferralAddress.ts
+++ b/src/hooks/useReferralAddress.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { log } from '@/lib/telemetry';
+
 import { useDydxClient } from './useDydxClient';
 
 export const useReferralAddress = (refCode: string) => {
@@ -9,16 +11,21 @@ export const useReferralAddress = (refCode: string) => {
     if (!compositeClient || !refCode) {
       return undefined;
     }
-    const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/address`;
-    const response = await fetch(`${endpoint}?referralCode=${encodeURIComponent(refCode)}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
+    try {
+      const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/address`;
+      const response = await fetch(`${endpoint}?referralCode=${encodeURIComponent(refCode)}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
 
-    const data = await response.json();
-    return data?.address as string | undefined;
+      const data = await response.json();
+      return data?.address as string | undefined;
+    } catch (error) {
+      log('useReferralAddress', error);
+      return undefined;
+    }
   };
 
   const { data, isFetched } = useQuery({
diff --git a/src/hooks/useReferredBy.ts b/src/hooks/useReferredBy.ts
index 7d226042f..a1a2a3ea4 100644
--- a/src/hooks/useReferredBy.ts
+++ b/src/hooks/useReferredBy.ts
@@ -1,19 +1,26 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { log } from '@/lib/telemetry';
+
 import { useAccounts } from './useAccounts';
-import { useSubaccount } from './useSubaccount';
+import { useDydxClient } from './useDydxClient';
 
-export const useReferralAddress = () => {
+export const useReferredBy = () => {
   const { dydxAddress } = useAccounts();
-  const { getReferredBy } = useSubaccount();
+  const { getReferredBy } = useDydxClient();
 
   const queryFn = async () => {
     if (!dydxAddress) {
       return undefined;
     }
-    const affliateAddress = await getReferredBy(dydxAddress);
+    try {
+      const affliateAddress = await getReferredBy(dydxAddress);
 
-    return affliateAddress;
+      return affliateAddress?.affiliateAddress;
+    } catch (error) {
+      log('useReferredBy', error);
+      return undefined;
+    }
   };
 
   const { data, isFetched } = useQuery({
diff --git a/src/hooks/useSubaccount.tsx b/src/hooks/useSubaccount.tsx
index ccfe5c333..e9aceef32 100644
--- a/src/hooks/useSubaccount.tsx
+++ b/src/hooks/useSubaccount.tsx
@@ -26,13 +26,14 @@ import { AMOUNT_RESERVED_FOR_GAS_USDC, AMOUNT_USDC_BEFORE_REBALANCE } from '@/co
 import { DEFAULT_TRANSACTION_MEMO, TransactionMemo } from '@/constants/analytics';
 import { DialogTypes } from '@/constants/dialogs';
 import { ErrorParams } from '@/constants/errors';
-import { LocalStorageKey } from '@/constants/localStorage';
 import { QUANTUM_MULTIPLIER } from '@/constants/numbers';
 import { TradeTypes } from '@/constants/trade';
 import { DydxAddress, WalletType } from '@/constants/wallets';
 
 import { clearSubaccountState } from '@/state/account';
 import { getBalances, getSubaccountOrders } from '@/state/accountSelectors';
+import { removeLatestReferrer } from '@/state/affiliates';
+import { getLatestReferrer } from '@/state/affiliatesSelector';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { openDialog } from '@/state/dialogs';
 import {
@@ -54,7 +55,7 @@ import { hashFromTx } from '@/lib/txUtils';
 import { useAccounts } from './useAccounts';
 import { useDydxClient } from './useDydxClient';
 import { useGovernanceVariables } from './useGovernanceVariables';
-import { useLocalStorage } from './useLocalStorage';
+import { useReferredBy } from './useReferredBy';
 import { useTokenConfigs } from './useTokenConfigs';
 
 type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
@@ -77,10 +78,6 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
   const { connectedWallet } = useAccounts();
   const { compositeClient, faucetClient } = useDydxClient();
 
-  const [latestReferrer] = useLocalStorage<string | undefined>({
-    key: LocalStorageKey.LatestReferrer,
-    defaultValue: undefined,
-  });
   const isKeplr = connectedWallet?.name === WalletType.Keplr;
 
   const { getFaucetFunds, getNativeTokens } = useMemo(
@@ -904,31 +901,42 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
     [subaccountClient, compositeClient]
   );
 
-  const getReferredBy = useCallback(
-    async (address: string) => {
-      if (!compositeClient) {
-        throw new Error('client not initialized');
-      }
-
-      const response = await compositeClient?.validatorClient.get.getReferredBy(address);
-
-      return response;
-    },
-    [compositeClient]
-  );
+  const latestReferrer = useAppSelector(getLatestReferrer);
+  const { data: referredBy, isFetched: isReferredByFetched } = useReferredBy();
 
   useEffect(() => {
     if (!subaccountClient) return;
 
+    if (dydxAddress === latestReferrer) {
+      dispatch(removeLatestReferrer());
+      return;
+    }
     if (
       latestReferrer &&
       dydxAddress &&
       usdcCoinBalance &&
-      parseFloat(usdcCoinBalance.amount) > AMOUNT_USDC_BEFORE_REBALANCE
+      parseFloat(usdcCoinBalance.amount) > AMOUNT_USDC_BEFORE_REBALANCE &&
+      isReferredByFetched &&
+      !referredBy
     ) {
       registerAffiliate(latestReferrer);
     }
-  }, [latestReferrer, dydxAddress, registerAffiliate, usdcCoinBalance, subaccountClient]);
+  }, [
+    latestReferrer,
+    dydxAddress,
+    registerAffiliate,
+    usdcCoinBalance,
+    subaccountClient,
+    isReferredByFetched,
+    referredBy,
+    dispatch,
+  ]);
+
+  useEffect(() => {
+    if (referredBy) {
+      dispatch(removeLatestReferrer());
+    }
+  }, [referredBy, dispatch]);
 
   return {
     // Deposit/Withdraw/Faucet Methods
@@ -962,6 +970,5 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
 
     // affiliates
     registerAffiliate,
-    getReferredBy,
   };
 };
diff --git a/src/state/_store.ts b/src/state/_store.ts
index dc736c4d8..54565e695 100644
--- a/src/state/_store.ts
+++ b/src/state/_store.ts
@@ -5,6 +5,7 @@ import storage from 'redux-persist/lib/storage';
 import abacusStateManager from '@/lib/abacus';
 
 import { accountSlice } from './account';
+import { affiliatesSlice } from './affiliates';
 import { appSlice } from './app';
 import appMiddleware from './appMiddleware';
 import { assetsSlice } from './assets';
@@ -23,6 +24,7 @@ import { vaultsSlice } from './vaults';
 
 const reducers = {
   account: accountSlice.reducer,
+  affiliates: affiliatesSlice.reducer,
   app: appSlice.reducer,
   assets: assetsSlice.reducer,
   configs: configsSlice.reducer,
@@ -43,7 +45,7 @@ const persistConfig = {
   key: 'root',
   version: 0,
   storage,
-  whitelist: ['tradingView'],
+  whitelist: ['tradingView', 'affiliates'],
   migrate: customCreateMigrate({ debug: process.env.NODE_ENV !== 'production' }),
 };
 
diff --git a/src/state/affiliates.ts b/src/state/affiliates.ts
new file mode 100644
index 000000000..ea8fa5b21
--- /dev/null
+++ b/src/state/affiliates.ts
@@ -0,0 +1,25 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+
+export interface AffiliatesState {
+  latestReferrer: string | undefined;
+}
+
+const initialState: AffiliatesState = {
+  latestReferrer: undefined,
+};
+
+export const affiliatesSlice = createSlice({
+  name: 'Affiliates',
+  initialState,
+  reducers: {
+    updateLatestReferrer: (state, action: PayloadAction<string>) => {
+      state.latestReferrer = action.payload;
+    },
+    removeLatestReferrer: (state) => {
+      state.latestReferrer = undefined;
+    },
+  },
+});
+
+export const { updateLatestReferrer, removeLatestReferrer } = affiliatesSlice.actions;
diff --git a/src/state/affiliatesSelector.ts b/src/state/affiliatesSelector.ts
new file mode 100644
index 000000000..86aca39c8
--- /dev/null
+++ b/src/state/affiliatesSelector.ts
@@ -0,0 +1,6 @@
+import { RootState } from './_store';
+
+/**
+ * @returns saved latestReferrer for Affiliates
+ */
+export const getLatestReferrer = (state: RootState) => state.affiliates.latestReferrer;
diff --git a/src/views/dialogs/ReferralDialog.tsx b/src/views/dialogs/ReferralDialog.tsx
index 2abe0abbb..4afe98f79 100644
--- a/src/views/dialogs/ReferralDialog.tsx
+++ b/src/views/dialogs/ReferralDialog.tsx
@@ -5,18 +5,19 @@ import { styled } from 'twin.macro';
 import { AFFILIATES_FEE_DISCOUNT } from '@/constants/affiliates';
 import { ButtonSize } from '@/constants/buttons';
 import { DialogProps, ReferralDialogProps } from '@/constants/dialogs';
-import { LocalStorageKey } from '@/constants/localStorage';
 import { STRING_KEYS } from '@/constants/localization';
 
 import { useAccounts } from '@/hooks/useAccounts';
 import { useAffiliatesInfo } from '@/hooks/useAffiliatesInfo';
-import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useReferralAddress } from '@/hooks/useReferralAddress';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { Dialog } from '@/components/Dialog';
 import { Link } from '@/components/Link';
 
+import { updateLatestReferrer } from '@/state/affiliates';
+import { useAppDispatch } from '@/state/appTypes';
+
 import { truncateAddress } from '@/lib/wallet';
 
 import { OnboardingTriggerButton } from './OnboardingTriggerButton';
@@ -38,20 +39,17 @@ const CONTENT_SECTIONS = [
 
 export const ReferralDialog = ({ setIsOpen, refCode }: DialogProps<ReferralDialogProps>) => {
   const stringGetter = useStringGetter();
+  const dispatch = useAppDispatch();
   const { dydxAddress } = useAccounts();
   const { data: referralAddress, isFetched } = useReferralAddress(refCode);
   const { data: affiliatesInfo, isFetched: isAffiliatesInfoFetched } =
     useAffiliatesInfo(referralAddress);
-  const [, saveLastestReferrer] = useLocalStorage<string | undefined>({
-    key: LocalStorageKey.LatestReferrer,
-    defaultValue: undefined,
-  });
 
   useEffect(() => {
-    if (referralAddress && referralAddress !== dydxAddress) {
-      saveLastestReferrer(referralAddress);
+    if (referralAddress) {
+      dispatch(updateLatestReferrer(referralAddress));
     }
-  }, [dydxAddress, referralAddress, saveLastestReferrer]);
+  }, [dydxAddress, referralAddress, dispatch]);
 
   const isEligible = referralAddress && affiliatesInfo?.isEligible;
 

From 16e9caa034c73efe2338249002f6b5d338ee2494 Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Tue, 1 Oct 2024 20:53:26 -0700
Subject: [PATCH 03/10] bump client

---
 package.json                    |  2 +-
 pnpm-lock.yaml                  | 16 +++++++++++-----
 src/hooks/useSubaccount.tsx     | 20 ++++++++++++--------
 src/views/menus/AccountMenu.tsx | 17 +++++++++++++++++
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index c269e88e4..0f66ee609 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.12.0",
-    "@dydxprotocol/v4-client-js": "1.5.0",
+    "@dydxprotocol/v4-client-js": "1.10.0",
     "@dydxprotocol/v4-localization": "^1.1.203",
     "@dydxprotocol/v4-proto": "^6.0.1",
     "@emotion/is-prop-valid": "^1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 531dbde68..66c589e93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,8 +33,8 @@ dependencies:
     specifier: 1.12.0
     version: 1.12.0
   '@dydxprotocol/v4-client-js':
-    specifier: 1.5.0
-    version: 1.5.0
+    specifier: 1.10.0
+    version: 1.10.0
   '@dydxprotocol/v4-localization':
     specifier: ^1.1.203
     version: 1.1.203
@@ -3032,8 +3032,8 @@ packages:
       format-util: 1.0.5
     dev: false
 
-  /@dydxprotocol/v4-client-js@1.5.0:
-    resolution: {integrity: sha512-IDnUg6AoaejoUlfVDNmFacyWS0Rl1wrlW6P1ZykXO7FmZAxfR7FV3NEQ0SNLQNZz4aTlag0CS+T5DIkAWvDNZA==}
+  /@dydxprotocol/v4-client-js@1.10.0:
+    resolution: {integrity: sha512-qvZqj8htZOg+pTPA3ixTIa9ChdhALHU5K1VXRU5/d5fziFrt5iDsieSsVmPj9PE8I9VpWFBG7e/HXybtFM2usw==}
     dependencies:
       '@cosmjs/amino': 0.32.3
       '@cosmjs/encoding': 0.32.3
@@ -3042,7 +3042,7 @@ packages:
       '@cosmjs/stargate': 0.32.3
       '@cosmjs/tendermint-rpc': 0.32.3
       '@cosmjs/utils': 0.32.3
-      '@dydxprotocol/v4-proto': 6.0.1
+      '@dydxprotocol/v4-proto': 7.0.0-dev.0
       '@osmonauts/lcd': 0.6.0
       '@scure/bip32': 1.3.2
       '@scure/bip39': 1.2.1
@@ -3071,6 +3071,12 @@ packages:
       protobufjs: 6.11.4
     dev: false
 
+  /@dydxprotocol/v4-proto@7.0.0-dev.0:
+    resolution: {integrity: sha512-yQ3xMW8GmKCCwtzXF1E/TMYvPYDPRmAR2T/AFXKlE2YF/P/yQMrz/IySzX4Z+wyAMI+G4Sr+AML7V8ehvAcjog==}
+    dependencies:
+      protobufjs: 6.11.4
+    dev: false
+
   /@emotion/is-prop-valid@1.2.2:
     resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==}
     dependencies:
diff --git a/src/hooks/useSubaccount.tsx b/src/hooks/useSubaccount.tsx
index e9aceef32..54221e57a 100644
--- a/src/hooks/useSubaccount.tsx
+++ b/src/hooks/useSubaccount.tsx
@@ -890,13 +890,16 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
       if (affiliate === subaccountClient?.wallet?.address) {
         throw new Error('affiliate not be the same as referree');
       }
-
-      const response = await compositeClient?.validatorClient.post.registerAffiliate(
-        subaccountClient,
-        affiliate
-      );
-
-      return response;
+      try {
+        const response = await compositeClient?.validatorClient.post.registerAffiliate(
+          subaccountClient,
+          affiliate
+        );
+        return response;
+      } catch (error) {
+        log('useSubaccount/registerAffiliate', error);
+        return undefined;
+      }
     },
     [subaccountClient, compositeClient]
   );
@@ -920,6 +923,7 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
       !referredBy
     ) {
       registerAffiliate(latestReferrer);
+      dispatch(removeLatestReferrer());
     }
   }, [
     latestReferrer,
@@ -933,7 +937,7 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
   ]);
 
   useEffect(() => {
-    if (referredBy) {
+    if (referredBy && latestReferrer) {
       dispatch(removeLatestReferrer());
     }
   }, [referredBy, dispatch]);
diff --git a/src/views/menus/AccountMenu.tsx b/src/views/menus/AccountMenu.tsx
index 64131cfae..91a59278b 100644
--- a/src/views/menus/AccountMenu.tsx
+++ b/src/views/menus/AccountMenu.tsx
@@ -27,6 +27,7 @@ import { useComplianceState } from '@/hooks/useComplianceState';
 import { useMobileAppUrl } from '@/hooks/useMobileAppUrl';
 import { useStatsigGateValue } from '@/hooks/useStatsig';
 import { useStringGetter } from '@/hooks/useStringGetter';
+import { useSubaccount } from '@/hooks/useSubaccount';
 import { useTokenConfigs } from '@/hooks/useTokenConfigs';
 import { useURLConfigs } from '@/hooks/useURLConfigs';
 
@@ -74,6 +75,7 @@ export const AccountMenu = () => {
   const theme = useAppSelector(getAppTheme);
 
   const { evmAddress, solAddress, connectedWallet, dydxAddress, hdKey } = useAccounts();
+  const { registerAffiliate } = useSubaccount();
 
   let address: string | undefined;
   if (connectedWallet?.name === WalletType.Phantom) {
@@ -311,6 +313,21 @@ export const AccountMenu = () => {
           label: stringGetter({ key: STRING_KEYS.DISPLAY_SETTINGS }),
           onSelect: () => dispatch(openDialog(DialogTypes.DisplaySettings())),
         },
+        ...(isDev
+          ? [
+              {
+                value: 'registerAffiliate',
+                icon: <Icon iconName={IconName.Gear} />,
+                label: 'Register Affiliate',
+                onSelect: () => {
+                  const affiliate = window.prompt('Enter affiliate address');
+                  if (affiliate) {
+                    registerAffiliate(affiliate);
+                  }
+                },
+              },
+            ]
+          : []),
         ...(isDev
           ? [
               {

From 646491dbfcddb07953bc1e379ede4120f7b1bb99 Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Tue, 1 Oct 2024 21:02:56 -0700
Subject: [PATCH 04/10] match v4-protos

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 ++--------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index f8de35ee1..a26ba73eb 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "@dydxprotocol/v4-abacus": "1.12.12",
     "@dydxprotocol/v4-client-js": "1.10.0",
     "@dydxprotocol/v4-localization": "^1.1.209",
-    "@dydxprotocol/v4-proto": "^6.0.1",
+    "@dydxprotocol/v4-proto": "7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",
     "@hugocxl/react-to-image": "^0.0.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d112c217..e03625ecf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,8 +39,8 @@ dependencies:
     specifier: ^1.1.209
     version: 1.1.211
   '@dydxprotocol/v4-proto':
-    specifier: ^6.0.1
-    version: 6.0.1
+    specifier: 7.0.0-dev.0
+    version: 7.0.0-dev.0
   '@emotion/is-prop-valid':
     specifier: ^1.3.0
     version: 1.3.0
@@ -3065,12 +3065,6 @@ packages:
     resolution: {integrity: sha512-LvT3DrmtpZ4WmYLzS8z0167+eUcSgQr4xw1M4vW825B2e4SNmdQhRnDbsVBtPLYPe+b/mX5TotmhQE27ba4vQQ==}
     dev: false
 
-  /@dydxprotocol/v4-proto@6.0.1:
-    resolution: {integrity: sha512-+L4mT8AM5MlrnT7a817uepSSKCpvMmE6LV5xQKnH18GxLs7JOv5nQTnONbmi6roz12R7Vi1CntRZuz7Lg6l5Sw==}
-    dependencies:
-      protobufjs: 6.11.4
-    dev: false
-
   /@dydxprotocol/v4-proto@7.0.0-dev.0:
     resolution: {integrity: sha512-yQ3xMW8GmKCCwtzXF1E/TMYvPYDPRmAR2T/AFXKlE2YF/P/yQMrz/IySzX4Z+wyAMI+G4Sr+AML7V8ehvAcjog==}
     dependencies:

From 26c6e6cf9a1c51614c1bb781a839c65712dbae58 Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Tue, 1 Oct 2024 21:20:44 -0700
Subject: [PATCH 05/10] remove localization package caret

---
 package.json   | 2 +-
 pnpm-lock.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a26ba73eb..f657c90a7 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.12.12",
     "@dydxprotocol/v4-client-js": "1.10.0",
-    "@dydxprotocol/v4-localization": "^1.1.209",
+    "@dydxprotocol/v4-localization": "1.1.209",
     "@dydxprotocol/v4-proto": "7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e03625ecf..1a355f158 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,8 +36,8 @@ dependencies:
     specifier: 1.10.0
     version: 1.10.0
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.209
-    version: 1.1.211
+    specifier: 1.1.209
+    version: 1.1.209
   '@dydxprotocol/v4-proto':
     specifier: 7.0.0-dev.0
     version: 7.0.0-dev.0
@@ -3061,8 +3061,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.211:
-    resolution: {integrity: sha512-LvT3DrmtpZ4WmYLzS8z0167+eUcSgQr4xw1M4vW825B2e4SNmdQhRnDbsVBtPLYPe+b/mX5TotmhQE27ba4vQQ==}
+  /@dydxprotocol/v4-localization@1.1.209:
+    resolution: {integrity: sha512-H0UxaQFd4SaYyywoeQRD/WE6uVCtRY/GwMoQZnhHA3qCpanXI+tlDDLai18chLTMGtnIO/Ss7GMBrcJS20tf1A==}
     dev: false
 
   /@dydxprotocol/v4-proto@7.0.0-dev.0:

From 8afec9601656407b3051c13094ea25e566c06134 Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Wed, 2 Oct 2024 10:41:20 -0700
Subject: [PATCH 06/10] address comments

---
 src/hooks/useAffiliatesInfo.ts | 5 +++--
 src/hooks/useSubaccount.tsx    | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useAffiliatesInfo.ts b/src/hooks/useAffiliatesInfo.ts
index 377d41d3e..b1394b46f 100644
--- a/src/hooks/useAffiliatesInfo.ts
+++ b/src/hooks/useAffiliatesInfo.ts
@@ -17,8 +17,9 @@ export const useAffiliatesInfo = (dydxAddress?: string) => {
     if (!compositeClient || !dydxAddress) {
       return undefined;
     }
+    const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/metadata`;
+
     try {
-      const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/metadata`;
       const response = await fetch(`${endpoint}?address=${encodeURIComponent(dydxAddress)}`, {
         method: 'GET',
         headers: {
@@ -32,7 +33,7 @@ export const useAffiliatesInfo = (dydxAddress?: string) => {
 
       return { metadata: data, affiliateInfo, isEligible };
     } catch (error) {
-      log('useAffiliatesInfo', error);
+      log('useAffiliatesInfo', error, { endpoint });
       return undefined;
     }
   };
diff --git a/src/hooks/useSubaccount.tsx b/src/hooks/useSubaccount.tsx
index a906af3d8..f67e466af 100644
--- a/src/hooks/useSubaccount.tsx
+++ b/src/hooks/useSubaccount.tsx
@@ -920,7 +920,7 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
         throw new Error('wallet not initialized');
       }
       if (affiliate === subaccountClient?.wallet?.address) {
-        throw new Error('affiliate not be the same as referree');
+        throw new Error('affiliate can not be the same as referree');
       }
       try {
         const response = await compositeClient?.validatorClient.post.registerAffiliate(

From f30b842a6ff35cc8a3485ba48c38ddfee5e7d50e Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Wed, 2 Oct 2024 12:17:39 -0700
Subject: [PATCH 07/10] address comment

---
 src/hooks/useReferredBy.ts  | 9 ++++++---
 src/hooks/useSubaccount.tsx | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useReferredBy.ts b/src/hooks/useReferredBy.ts
index a1a2a3ea4..fdbd27567 100644
--- a/src/hooks/useReferredBy.ts
+++ b/src/hooks/useReferredBy.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { DydxAddress } from '@/constants/wallets';
+
 import { log } from '@/lib/telemetry';
 
 import { useAccounts } from './useAccounts';
@@ -9,12 +11,13 @@ export const useReferredBy = () => {
   const { dydxAddress } = useAccounts();
   const { getReferredBy } = useDydxClient();
 
-  const queryFn = async () => {
-    if (!dydxAddress) {
+  const queryFn = async ({ queryKey }: { queryKey: (string | DydxAddress | undefined)[] }) => {
+    const [, address] = queryKey;
+    if (!address) {
       return undefined;
     }
     try {
-      const affliateAddress = await getReferredBy(dydxAddress);
+      const affliateAddress = await getReferredBy(address);
 
       return affliateAddress?.affiliateAddress;
     } catch (error) {
diff --git a/src/hooks/useSubaccount.tsx b/src/hooks/useSubaccount.tsx
index f67e466af..3949376b8 100644
--- a/src/hooks/useSubaccount.tsx
+++ b/src/hooks/useSubaccount.tsx
@@ -930,7 +930,7 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
         return response;
       } catch (error) {
         log('useSubaccount/registerAffiliate', error);
-        return undefined;
+        throw error;
       }
     },
     [subaccountClient, compositeClient]

From c9ed3c4d68e2ec6cf589857198bfbce65e9a6ebb Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Wed, 2 Oct 2024 21:30:36 -0700
Subject: [PATCH 08/10] address comments

---
 src/hooks/useAffiliatesInfo.ts    |  3 ++-
 src/hooks/useReferredBy.ts        |  4 ++--
 src/hooks/useRegisterAffiliate.ts | 36 +++++++++++++++++++++++++++++++
 src/hooks/useSubaccount.tsx       | 21 +++++++++++++-----
 4 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 src/hooks/useRegisterAffiliate.ts

diff --git a/src/hooks/useAffiliatesInfo.ts b/src/hooks/useAffiliatesInfo.ts
index b1394b46f..107f381d4 100644
--- a/src/hooks/useAffiliatesInfo.ts
+++ b/src/hooks/useAffiliatesInfo.ts
@@ -29,7 +29,8 @@ export const useAffiliatesInfo = (dydxAddress?: string) => {
       const affiliateInfo = await getAffiliateInfo(dydxAddress);
 
       const data: AffiliatesMetadata | undefined = await response.json();
-      const isEligible = Boolean(data?.isVolumeEligible) || Boolean(affiliateInfo?.isWhitelisted);
+      const isEligible =
+        Boolean(data?.isVolumeEligible) || Boolean(affiliateInfo?.isWhitelisted) || true;
 
       return { metadata: data, affiliateInfo, isEligible };
     } catch (error) {
diff --git a/src/hooks/useReferredBy.ts b/src/hooks/useReferredBy.ts
index fdbd27567..21f71cc5f 100644
--- a/src/hooks/useReferredBy.ts
+++ b/src/hooks/useReferredBy.ts
@@ -9,7 +9,7 @@ import { useDydxClient } from './useDydxClient';
 
 export const useReferredBy = () => {
   const { dydxAddress } = useAccounts();
-  const { getReferredBy } = useDydxClient();
+  const { getReferredBy, compositeClient } = useDydxClient();
 
   const queryFn = async ({ queryKey }: { queryKey: (string | DydxAddress | undefined)[] }) => {
     const [, address] = queryKey;
@@ -29,7 +29,7 @@ export const useReferredBy = () => {
   const { data, isFetched } = useQuery({
     queryKey: ['referredBy', dydxAddress],
     queryFn,
-    enabled: Boolean(dydxAddress),
+    enabled: Boolean(compositeClient && dydxAddress),
   });
 
   return { data, isFetched };
diff --git a/src/hooks/useRegisterAffiliate.ts b/src/hooks/useRegisterAffiliate.ts
new file mode 100644
index 000000000..fdbd27567
--- /dev/null
+++ b/src/hooks/useRegisterAffiliate.ts
@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { DydxAddress } from '@/constants/wallets';
+
+import { log } from '@/lib/telemetry';
+
+import { useAccounts } from './useAccounts';
+import { useDydxClient } from './useDydxClient';
+
+export const useReferredBy = () => {
+  const { dydxAddress } = useAccounts();
+  const { getReferredBy } = useDydxClient();
+
+  const queryFn = async ({ queryKey }: { queryKey: (string | DydxAddress | undefined)[] }) => {
+    const [, address] = queryKey;
+    if (!address) {
+      return undefined;
+    }
+    try {
+      const affliateAddress = await getReferredBy(address);
+
+      return affliateAddress?.affiliateAddress;
+    } catch (error) {
+      log('useReferredBy', error);
+      return undefined;
+    }
+  };
+
+  const { data, isFetched } = useQuery({
+    queryKey: ['referredBy', dydxAddress],
+    queryFn,
+    enabled: Boolean(dydxAddress),
+  });
+
+  return { data, isFetched };
+};
diff --git a/src/hooks/useSubaccount.tsx b/src/hooks/useSubaccount.tsx
index 3949376b8..30e8faf97 100644
--- a/src/hooks/useSubaccount.tsx
+++ b/src/hooks/useSubaccount.tsx
@@ -10,6 +10,7 @@ import {
   type GovAddNewMarketParams,
   type LocalWallet,
 } from '@dydxprotocol/v4-client-js';
+import { useMutation } from '@tanstack/react-query';
 import Long from 'long';
 import { shallowEqual } from 'react-redux';
 import { formatUnits, parseUnits } from 'viem';
@@ -939,6 +940,15 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
   const latestReferrer = useAppSelector(getLatestReferrer);
   const { data: referredBy, isFetched: isReferredByFetched } = useReferredBy();
 
+  const { mutateAsync: registerAffiliateMutate, isPending: isRegisterAffiliatePending } =
+    useMutation({
+      mutationFn: async (affiliate: string) => {
+        const tx = await registerAffiliate(affiliate);
+        dispatch(removeLatestReferrer());
+        return tx;
+      },
+    });
+
   useEffect(() => {
     if (!subaccountClient) return;
 
@@ -952,27 +962,28 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
       usdcCoinBalance &&
       parseFloat(usdcCoinBalance.amount) > AMOUNT_USDC_BEFORE_REBALANCE &&
       isReferredByFetched &&
-      !referredBy
+      !referredBy &&
+      !isRegisterAffiliatePending
     ) {
-      registerAffiliate(latestReferrer);
-      dispatch(removeLatestReferrer());
+      registerAffiliateMutate(latestReferrer);
     }
   }, [
     latestReferrer,
     dydxAddress,
-    registerAffiliate,
+    registerAffiliateMutate,
     usdcCoinBalance,
     subaccountClient,
     isReferredByFetched,
     referredBy,
     dispatch,
+    isRegisterAffiliatePending,
   ]);
 
   useEffect(() => {
     if (referredBy && latestReferrer) {
       dispatch(removeLatestReferrer());
     }
-  }, [referredBy, dispatch]);
+  }, [referredBy, dispatch, latestReferrer]);
 
   const getVaultAccountInfo = useCallback(async () => {
     if (!compositeClient?.validatorClient) {

From 99a3ecbc61d95dc7d6cb26eb97b362a90ed2d161 Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Wed, 2 Oct 2024 21:37:26 -0700
Subject: [PATCH 09/10] address comments

---
 src/hooks/useAffiliatesInfo.ts       |  6 +++---
 src/hooks/useReferralAddress.ts      | 29 +++++++++++-----------------
 src/views/dialogs/ReferralDialog.tsx |  6 +++---
 3 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/hooks/useAffiliatesInfo.ts b/src/hooks/useAffiliatesInfo.ts
index 107f381d4..eaae40baf 100644
--- a/src/hooks/useAffiliatesInfo.ts
+++ b/src/hooks/useAffiliatesInfo.ts
@@ -35,15 +35,15 @@ export const useAffiliatesInfo = (dydxAddress?: string) => {
       return { metadata: data, affiliateInfo, isEligible };
     } catch (error) {
       log('useAffiliatesInfo', error, { endpoint });
-      return undefined;
+      throw error;
     }
   };
 
-  const { data, isFetched } = useQuery({
+  const query = useQuery({
     queryKey: ['affiliatesMetadata', dydxAddress],
     queryFn,
     enabled: Boolean(compositeClient && dydxAddress),
   });
 
-  return { data, isFetched };
+  return query;
 };
diff --git a/src/hooks/useReferralAddress.ts b/src/hooks/useReferralAddress.ts
index 3ced5764d..ada4525a8 100644
--- a/src/hooks/useReferralAddress.ts
+++ b/src/hooks/useReferralAddress.ts
@@ -1,7 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { log } from '@/lib/telemetry';
-
 import { useDydxClient } from './useDydxClient';
 
 export const useReferralAddress = (refCode: string) => {
@@ -11,28 +9,23 @@ export const useReferralAddress = (refCode: string) => {
     if (!compositeClient || !refCode) {
       return undefined;
     }
-    try {
-      const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/address`;
-      const response = await fetch(`${endpoint}?referralCode=${encodeURIComponent(refCode)}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
+    const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/address`;
+    const response = await fetch(`${endpoint}?referralCode=${encodeURIComponent(refCode)}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
 
-      const data = await response.json();
-      return data?.address as string | undefined;
-    } catch (error) {
-      log('useReferralAddress', error);
-      return undefined;
-    }
+    const data = await response.json();
+    return data?.address as string | undefined;
   };
 
-  const { data, isFetched } = useQuery({
+  const query = useQuery({
     queryKey: ['referralAddress', refCode],
     queryFn,
     enabled: Boolean(compositeClient && refCode),
   });
 
-  return { data, isFetched };
+  return query;
 };
diff --git a/src/views/dialogs/ReferralDialog.tsx b/src/views/dialogs/ReferralDialog.tsx
index 4afe98f79..42e60c747 100644
--- a/src/views/dialogs/ReferralDialog.tsx
+++ b/src/views/dialogs/ReferralDialog.tsx
@@ -41,8 +41,8 @@ export const ReferralDialog = ({ setIsOpen, refCode }: DialogProps<ReferralDialo
   const stringGetter = useStringGetter();
   const dispatch = useAppDispatch();
   const { dydxAddress } = useAccounts();
-  const { data: referralAddress, isFetched } = useReferralAddress(refCode);
-  const { data: affiliatesInfo, isFetched: isAffiliatesInfoFetched } =
+  const { data: referralAddress, isSuccess } = useReferralAddress(refCode);
+  const { data: affiliatesInfo, isSuccess: isAffiliatesInfoSuccess } =
     useAffiliatesInfo(referralAddress);
 
   useEffect(() => {
@@ -70,7 +70,7 @@ export const ReferralDialog = ({ setIsOpen, refCode }: DialogProps<ReferralDialo
         key: isEligible ? STRING_KEYS.INVITED_YOU : STRING_KEYS.THE_PRO_TRADING_PLATFORM,
       })}
       slotHeaderAbove={
-        isFetched && isAffiliatesInfoFetched ? (
+        isSuccess && isAffiliatesInfoSuccess ? (
           <$HeaderAbove tw="flex flex-row items-center gap-1">
             {isEligible ? (
               <img src="/hedgies-placeholder.png" alt="hedgie" tw="h-5" />

From 26698d4db5ed53c1fb8f3557a14a90e50afc781b Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Thu, 3 Oct 2024 09:52:16 -0700
Subject: [PATCH 10/10] addres comment

---
 src/views/dialogs/ReferralDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/dialogs/ReferralDialog.tsx b/src/views/dialogs/ReferralDialog.tsx
index 42e60c747..bf57ca206 100644
--- a/src/views/dialogs/ReferralDialog.tsx
+++ b/src/views/dialogs/ReferralDialog.tsx
@@ -49,7 +49,7 @@ export const ReferralDialog = ({ setIsOpen, refCode }: DialogProps<ReferralDialo
     if (referralAddress) {
       dispatch(updateLatestReferrer(referralAddress));
     }
-  }, [dydxAddress, referralAddress, dispatch]);
+  }, [referralAddress, dispatch]);
 
   const isEligible = referralAddress && affiliatesInfo?.isEligible;