From 4ff6126e8382f0ff48a044beea5e283510194f1f Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Fri, 4 Oct 2024 11:29:02 -0700
Subject: [PATCH] feat: responsive affiliate and fixes

---
 src/hooks/useAffiliatesInfo.ts    |  5 +-
 src/hooks/useReferredBy.ts        |  6 +--
 src/hooks/useRegisterAffiliate.ts | 36 ---------------
 src/hooks/useSubaccount.tsx       |  4 +-
 src/views/AffiliatesBanner.tsx    | 76 ++++++++++++++++++++++---------
 5 files changed, 62 insertions(+), 65 deletions(-)
 delete mode 100644 src/hooks/useRegisterAffiliate.ts

diff --git a/src/hooks/useAffiliatesInfo.ts b/src/hooks/useAffiliatesInfo.ts
index eaae40baf..97ef3d0c4 100644
--- a/src/hooks/useAffiliatesInfo.ts
+++ b/src/hooks/useAffiliatesInfo.ts
@@ -15,7 +15,7 @@ export const useAffiliatesInfo = (dydxAddress?: string) => {
 
   const queryFn = async () => {
     if (!compositeClient || !dydxAddress) {
-      return undefined;
+      return {};
     }
     const endpoint = `${compositeClient.indexerClient.config.restEndpoint}/v4/affiliates/metadata`;
 
@@ -29,8 +29,7 @@ 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) || true;
+      const isEligible = Boolean(data?.isVolumeEligible) || Boolean(affiliateInfo?.isWhitelisted);
 
       return { metadata: data, affiliateInfo, isEligible };
     } catch (error) {
diff --git a/src/hooks/useReferredBy.ts b/src/hooks/useReferredBy.ts
index 21f71cc5f..9d064d70c 100644
--- a/src/hooks/useReferredBy.ts
+++ b/src/hooks/useReferredBy.ts
@@ -14,15 +14,15 @@ export const useReferredBy = () => {
   const queryFn = async ({ queryKey }: { queryKey: (string | DydxAddress | undefined)[] }) => {
     const [, address] = queryKey;
     if (!address) {
-      return undefined;
+      return {};
     }
     try {
       const affliateAddress = await getReferredBy(address);
 
-      return affliateAddress?.affiliateAddress;
+      return { affiliateAddress: affliateAddress?.affiliateAddress };
     } catch (error) {
       log('useReferredBy', error);
-      return undefined;
+      throw error;
     }
   };
 
diff --git a/src/hooks/useRegisterAffiliate.ts b/src/hooks/useRegisterAffiliate.ts
deleted file mode 100644
index fdbd27567..000000000
--- a/src/hooks/useRegisterAffiliate.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-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 718d45bd6..88d871f93 100644
--- a/src/hooks/useSubaccount.tsx
+++ b/src/hooks/useSubaccount.tsx
@@ -962,7 +962,7 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
       usdcCoinBalance &&
       parseFloat(usdcCoinBalance.amount) > AMOUNT_USDC_BEFORE_REBALANCE &&
       isReferredByFetched &&
-      !referredBy &&
+      !referredBy?.affiliateAddress &&
       !isRegisterAffiliatePending
     ) {
       registerAffiliateMutate(latestReferrer);
@@ -980,7 +980,7 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
   ]);
 
   useEffect(() => {
-    if (referredBy && latestReferrer) {
+    if (referredBy?.affiliateAddress && latestReferrer) {
       dispatch(removeLatestReferrer());
     }
   }, [referredBy, dispatch, latestReferrer]);
diff --git a/src/views/AffiliatesBanner.tsx b/src/views/AffiliatesBanner.tsx
index a6f42b66e..002a41c91 100644
--- a/src/views/AffiliatesBanner.tsx
+++ b/src/views/AffiliatesBanner.tsx
@@ -6,9 +6,11 @@ import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 
+import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useStringGetter } from '@/hooks/useStringGetter';
 import { useURLConfigs } from '@/hooks/useURLConfigs';
 
+import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Button } from '@/components/Button';
@@ -22,10 +24,55 @@ import { openDialog } from '@/state/dialogs';
 export const AffiliatesBanner = () => {
   const dispatch = useAppDispatch();
   const stringGetter = useStringGetter();
+  const { isTablet } = useBreakpoints();
   const { affiliateProgram } = useURLConfigs();
 
   const background = useAppSelector(getGridBackground);
 
+  const titleString = stringGetter({
+    key: STRING_KEYS.EARN_FOR_EACH_TRADER,
+    params: { AMOUNT_USD: AFFILIATES_EARN_PER_MONTH.toLocaleString() },
+  });
+  const descriptionString1 = stringGetter({
+    key: STRING_KEYS.REFER_FOR_DISCOUNTS_FIRST_ORDER,
+    params: {
+      AMOUNT_USD: AFFILIATES_FEE_DISCOUNT.toLocaleString(),
+    },
+  });
+  const descriptionString2 = stringGetter({
+    key: STRING_KEYS.WANT_TO_VIEW_EARNINGS,
+    params: {
+      LINK: (
+        <Link href={affiliateProgram} isInline isAccent>
+          {stringGetter({ key: STRING_KEYS.AFFILIATES_PROGRAM })} →
+        </Link>
+      ),
+    },
+  });
+
+  if (isTablet) {
+    return (
+      <$Background backgroundImagePath={background} tw="bg-color-layer-1 p-1">
+        <div tw="column items-start gap-1">
+          <div tw="font-bold text-color-text-2">{titleString}</div>
+          <div tw="">
+            {descriptionString1} <br />
+            {descriptionString2}
+          </div>
+          <Button
+            action={ButtonAction.Primary}
+            slotLeft={<Icon iconName={IconName.Giftbox} />}
+            onClick={() => {
+              dispatch(openDialog(DialogTypes.ShareAffiliate()));
+            }}
+          >
+            {stringGetter({ key: STRING_KEYS.INVITE_FRIENDS })}
+          </Button>
+        </div>
+      </$Background>
+    );
+  }
+
   return (
     <$Background
       backgroundImagePath={background}
@@ -37,30 +84,12 @@ export const AffiliatesBanner = () => {
           <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">
-              {stringGetter({
-                key: STRING_KEYS.EARN_FOR_EACH_TRADER,
-                params: { AMOUNT_USD: AFFILIATES_EARN_PER_MONTH.toLocaleString() },
-              })}
+              {titleString}
             </div>
           </div>
           <div tw="ml-0.5">
-            {stringGetter({
-              key: STRING_KEYS.REFER_FOR_DISCOUNTS_FIRST_ORDER,
-              params: {
-                AMOUNT_USD: AFFILIATES_FEE_DISCOUNT.toLocaleString(),
-              },
-            })}{' '}
-            <br />
-            {stringGetter({
-              key: STRING_KEYS.WANT_TO_VIEW_EARNINGS,
-              params: {
-                LINK: (
-                  <Link href={affiliateProgram} isInline isAccent>
-                    {stringGetter({ key: STRING_KEYS.AFFILIATES_PROGRAM })} →
-                  </Link>
-                ),
-              },
-            })}
+            {descriptionString1} <br />
+            {descriptionString2}
           </div>
         </div>
       </div>
@@ -91,6 +120,11 @@ const $Background = styled.div<{ backgroundImagePath: string }>`
   background-repeat: no-repeat;
   background-position-x: 100%;
   background-size: contain;
+
+  @media ${breakpoints.tablet} {
+    background-position-x: 0;
+    background-size: cover;
+  }
 `;
 
 const $Triangle = styled.div`