CR

packages/commonwealth/client/scripts/views/components/SublayoutHeader/useUserMenuItems.tsx

@@ -32,7 +32,8 @@ import {
 } from 'views/components/component_kit/cw_toggle';
 import CWIconButton from 'views/components/component_kit/new_designs/CWIconButton';
 import useAuthentication from '../../modals/AuthModal/useAuthentication';
-import { MobileTabType, mobileTabParam } from '../../pages/RewardsPage/utils';
+import { MobileTabType } from '../../pages/RewardsPage/types';
+import { mobileTabParam } from '../../pages/RewardsPage/utils';
 import { useCommunityStake } from '../CommunityStake';
 import UserMenuItem from './UserMenuItem';
 import useCheckAuthenticatedAddresses from './useCheckAuthenticatedAddresses';

packages/commonwealth/client/scripts/views/modals/InviteLinkModal/useReferralLink.ts

@@ -7,7 +7,7 @@ import {
 
 const useReferralLink = ({ autorun = false }: { autorun?: boolean } = {}) => {
   const referralsEnabled = useFlag('referrals');
-  const { data: refferalLinkData, isLoading: isLoadingReferralLink } =
+  const { data: referralLinkData, isLoading: isLoadingReferralLink } =
     useGetReferralLinkQuery();
 
   const {
@@ -16,7 +16,7 @@ const useReferralLink = ({ autorun = false }: { autorun?: boolean } = {}) => {
     isLoading: isLoadingCreateReferralLink,
   } = useCreateReferralLinkMutation();
 
-  const referralLink = refferalLinkData?.referral_link;
+  const referralLink = referralLinkData?.referral_link;
 
   useRunOnceOnCondition({
     callback: () => createReferralLink({}),

packages/commonwealth/client/scripts/views/pages/RewardsPage/RewardsPage.tsx

@@ -14,16 +14,10 @@ import {
 } from '../../components/component_kit/new_designs/CWTabs';
 import { PageNotFound } from '../404';
 import RewardsTab from './RewardsTab';
-import { QuestCard, RefferalCard, WalletCard } from './cards';
+import { QuestCard, ReferralCard, WalletCard } from './cards';
 import { QuestTable, ReferralTable, WalletTable } from './tables';
-import {
-  MobileTabType,
-  TableType,
-  getInitialTab,
-  mobileTabParam,
-  tabToTable,
-  typeToIcon,
-} from './utils';
+import { MobileTabType, TableType } from './types';
+import { getInitialTab, mobileTabParam, tabToTable, typeToIcon } from './utils';
 
 import './RewardsPage.scss';
 
@@ -71,7 +65,7 @@ const RewardsPage = () => {
         <div className="rewards-card-container">
           {(!isWindowSmallInclusive ||
             mobileTab === MobileTabType.Referrals) && (
-            <RefferalCard
+            <ReferralCard
               onSeeAllClick={() => handleTabChange(MobileTabType.Referrals)}
             />
           )}

packages/commonwealth/client/scripts/views/pages/RewardsPage/cards/ReferralCard/ReferralCard.scss

@@ -0,0 +1,2 @@
+.ReferralCard {
+}

packages/commonwealth/client/scripts/views/pages/RewardsPage/cards/RefferalCard/RefferalCard.tsx → packages/commonwealth/client/scripts/views/pages/RewardsPage/cards/ReferralCard/ReferralCard.tsx

@@ -2,23 +2,23 @@ import React from 'react';
 
 import RewardsCard from '../../RewardsCard';
 
-import './RefferalCard.scss';
+import './ReferralCard.scss';
 
-interface RefferalCardProps {
+interface ReferralCardProps {
   onSeeAllClick: () => void;
 }
 
-const RefferalCard = ({ onSeeAllClick }: RefferalCardProps) => {
+const ReferralCard = ({ onSeeAllClick }: ReferralCardProps) => {
   return (
     <RewardsCard
       title="Referrals"
       description="Track your referral rewards"
       icon="userSwitch"
       onSeeAllClick={onSeeAllClick}
     >
-      <div className="RefferalCard">Referral Card Body</div>
+      <div className="ReferralCard">Referral Card Body</div>
     </RewardsCard>
   );
 };
 
-export default RefferalCard;
+export default ReferralCard;

packages/commonwealth/client/scripts/views/pages/RewardsPage/cards/ReferralCard/index.ts

@@ -0,0 +1,3 @@
+import ReferralCard from './ReferralCard';
+
+export default ReferralCard;

packages/commonwealth/client/scripts/views/pages/RewardsPage/cards/index.ts

@@ -1,5 +1,5 @@
 import QuestCard from './QuestCard';
-import RefferalCard from './RefferalCard';
+import ReferralCard from './ReferralCard';
 import WalletCard from './WalletCard';
 
-export { QuestCard, RefferalCard, WalletCard };
+export { QuestCard, ReferralCard, WalletCard };

packages/commonwealth/client/scripts/views/pages/RewardsPage/types.ts

@@ -0,0 +1,17 @@
+export enum MobileTabType {
+  Referrals = 'Referrals',
+  WalletBalance = 'Wallet Balance',
+  Quests = 'Quests',
+}
+
+export enum TableType {
+  Referrals = 'Referrals',
+  TokenTXHistory = 'Token TX History',
+  XPEarnings = 'XP Earnings',
+}
+
+export const enum TabParam {
+  referrals = 'referrals',
+  wallet = 'wallet',
+  quests = 'quests',
+}

packages/commonwealth/client/scripts/views/pages/RewardsPage/utils.ts

@@ -1,20 +1,15 @@
-export enum MobileTabType {
-  Referrals = 'Refferal Earnings',
-  WalletBalance = 'Wallet Balance',
-  Quests = 'Quests',
-}
+import { MobileTabType, TableType, TabParam } from './types';
 
-export enum TableType {
-  Referrals = 'Referrals',
-  TokenTXHistory = 'Token TX History',
-  XPEarnings = 'XP Earnings',
-}
+export const getInitialTab = () => {
+  const params = new URLSearchParams(location.search);
+  const tabParam = params.get('tab');
 
-export const enum TabParam {
-  referrals = 'referrals',
-  wallet = 'wallet',
-  quests = 'quests',
-}
+  if (!tabParam) {
+    return MobileTabType.Referrals;
+  }
+
+  return tabParamToMobileTab[tabParam];
+};
 
 export const tabParamToMobileTab = {
   [TabParam.referrals]: MobileTabType.Referrals,
@@ -39,14 +34,3 @@ export const typeToIcon = {
   [MobileTabType.WalletBalance]: 'cardholder',
   [MobileTabType.Quests]: 'trophy',
 };
-
-export const getInitialTab = () => {
-  const params = new URLSearchParams(location.search);
-  const tabParam = params.get('tab');
-
-  if (!tabParam) {
-    return TabParam.referrals;
-  }
-
-  return tabParamToMobileTab[tabParam];
-};