implement ref code logic

lib/contexts/rewards.tsx

 import { useBoolean } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React, { createContext, useContext, useEffect, useMemo, useCallback } from 'react';
 
 import type { RewardsUserBalancesResponse, RewardsUserDailyCheckResponse } from 'types/api/rewards';
@@ -6,6 +7,8 @@ import type { RewardsUserBalancesResponse, RewardsUserDailyCheckResponse } from
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import * as cookies from 'lib/cookies';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import removeQueryParam from 'lib/router/removeQueryParam';
 
 type Props = {
   children: React.ReactNode;
@@ -36,6 +39,7 @@ const RewardsContext = createContext<TRewardsContext>({
 });
 
 export function RewardsContextProvider({ children }: Props) {
+  const router = useRouter();
   const [ isLoginModalOpen, setIsLoginModalOpen ] = useBoolean(false);
   const [ apiToken, setApiToken ] = React.useState<string | undefined>(cookies.get(cookies.NAMES.REWARDS_API_TOKEN));
 
@@ -63,6 +67,17 @@ export function RewardsContextProvider({ children }: Props) {
     }
   }, [ balancesQuery.error, apiToken, saveApiToken ]);
 
+  useEffect(() => {
+    const refCode = getQueryParamString(router.query.ref);
+    if (refCode) {
+      cookies.set(cookies.NAMES.REWARDS_REFERRAL_CODE, refCode);
+      removeQueryParam(router, 'ref');
+      if (!apiToken) {
+        setIsLoginModalOpen.on();
+      }
+    }
+  }, [ router, apiToken, setIsLoginModalOpen ]);
+
   const value = useMemo(() => ({
     isLoginModalOpen,
     openLoginModal: setIsLoginModalOpen.on,

lib/cookies.ts

@@ -6,6 +6,7 @@ export enum NAMES {
   NAV_BAR_COLLAPSED='nav_bar_collapsed',
   API_TOKEN='_explorer_key',
   REWARDS_API_TOKEN='rewards_api_token',
+  REWARDS_REFERRAL_CODE='rewards_ref_code',
   INVALID_SESSION='invalid_session',
   CONFIRM_EMAIL_PAGE_VIEWED='confirm_email_page_viewed',
   TXS_SORT='txs_sort',

ui/rewards/steps/LoginStepContent.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import type { ChangeEvent } from 'react';
 import React, { useCallback, useState, useEffect } from 'react';
 
+import * as cookies from 'lib/cookies';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
@@ -17,9 +18,10 @@ type Props = {
 const LoginStepContent = ({ goNext, closeModal }: Props) => {
   const router = useRouter();
   const { connect, isWalletConnected } = useWallet({ source: 'Merits' });
-  const [ isSwitchChecked, setIsSwitchChecked ] = useBoolean(false);
+  const savedRefCode = cookies.get(cookies.NAMES.REWARDS_REFERRAL_CODE);
+  const [ isSwitchChecked, setIsSwitchChecked ] = useBoolean(Boolean(savedRefCode));
   const [ isLoading, setIsLoading ] = useBoolean(false);
-  const [ refCode, setRefCode ] = useState('');
+  const [ refCode, setRefCode ] = useState(savedRefCode || '');
   const [ refCodeError, setRefCodeError ] = useBoolean(false);
   const dividerColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const login = useLogin();