feat: responsive affiliate and fixes (#1119)

dydxprotocol · Oct 4, 2024 · 4d751df · 4d751df
1 parent 0cec083
commit 4d751df
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 69 deletions.
diff --git 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
@@ -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
diff --git 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);
@@ -974,16 +974,16 @@ const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: LocalWall
     usdcCoinBalance,
     subaccountClient,
     isReferredByFetched,
-    referredBy,
+    referredBy?.affiliateAddress,
     dispatch,
     isRegisterAffiliatePending,
   ]);
 
   useEffect(() => {
-    if (referredBy && latestReferrer) {
+    if (referredBy?.affiliateAddress && latestReferrer) {
       dispatch(removeLatestReferrer());
     }
-  }, [referredBy, dispatch, latestReferrer]);
+  }, [referredBy?.affiliateAddress, dispatch, latestReferrer]);
 
   const getVaultAccountInfo = useCallback(async () => {
     if (!compositeClient?.validatorClient) {

diff --git 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,58 @@ 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 description = (
+    <>
+      {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>
+          ),
+        },
+      })}
+    </>
+  );
+
+  if (isTablet) {
+    return (
+      <$Background backgroundImagePath={background} tw="mt-1 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="">{description}</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,31 +87,10 @@ 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>
-                ),
-              },
-            })}
-          </div>
+          <div tw="ml-0.5">{description}</div>
         </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`