Rewards page scaffold

packages/commonwealth/client/scripts/helpers/feature-flags.ts

@@ -32,6 +32,7 @@ const featureFlags = {
   referrals: buildFlag(process.env.FLAG_REFERRALS),
   stickyEditor: buildFlag(process.env.FLAG_STICKY_EDITOR),
   newMobileNav: buildFlag(process.env.FLAG_NEW_MOBILE_NAV),
+  rewardsPage: buildFlag(process.env.FLAG_REWARDS_PAGE),
 };
 
 export type AvailableFeatureFlag = keyof typeof featureFlags;

packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx

@@ -117,6 +117,8 @@ const CommunityNotFoundPage = lazy(
   () => import('views/pages/CommunityNotFoundPage'),
 );
 
+const RewardsPage = lazy(() => import('views/pages/RewardsPage'));
+
 const CommonDomainRoutes = ({
   tokenizedCommunityEnabled,
 }: RouteFeatureFlags) => [
@@ -180,6 +182,11 @@ const CommonDomainRoutes = ({
       type: 'common',
     })}
   />,
+  <Route
+    key="/rewards"
+    path="/rewards"
+    element={withLayout(RewardsPage, { type: 'common' })}
+  />,
   <Route
     key="/search"
     path="/search"

packages/commonwealth/client/scripts/navigation/CustomDomainRoutes.tsx

@@ -102,6 +102,8 @@ const NewProfilePage = lazy(() => import('views/pages/new_profile'));
 const EditNewProfilePage = lazy(() => import('views/pages/edit_new_profile'));
 const ProfilePageRedirect = lazy(() => import('views/pages/profile_redirect'));
 
+const RewardsPage = lazy(() => import('views/pages/RewardsPage'));
+
 const CustomDomainRoutes = ({
   tokenizedCommunityEnabled,
 }: RouteFeatureFlags) => {
@@ -177,6 +179,11 @@ const CustomDomainRoutes = ({
       path="/myTransactions"
       element={withLayout(MyTransactions, { type: 'common' })}
     />,
+    <Route
+      key="/rewards"
+      path="/rewards"
+      element={withLayout(RewardsPage, { type: 'common' })}
+    />,
 
     // NOTIFICATIONS
     <Route

packages/commonwealth/client/scripts/views/components/KnockNotifications/KnockNotifications.tsx

@@ -8,6 +8,12 @@ import {
 import '@knocklabs/react-notification-feed/dist/index.css';
 import React, { memo, useEffect, useRef, useState } from 'react';
 import useUserStore from 'state/ui/user';
+import {
+  handleIconClick,
+  handleMouseEnter,
+  handleMouseLeave,
+} from '../../menus/utils';
+import { CWTooltip } from '../component_kit/new_designs/CWTooltip/CWTooltip';
 import CustomNotificationCell from './CustomNotificationCell';
 import './KnockNotifications.scss';
 const KNOCK_PUBLIC_API_KEY =
@@ -71,10 +77,43 @@ export const KnockNotifications = memo(function KnockNotifications() {
         {/* Optionally, use the KnockFeedProvider to connect an in-app feed */}
         <KnockFeedProvider feedId={KNOCK_IN_APP_FEED_ID} colorMode="light">
           <div>
-            <NotificationIconButton
-              ref={notifButtonRef}
-              onClick={() => setIsVisible(!isVisible)}
+            <CWTooltip
+              content="Notifications"
+              placement="bottom"
+              renderTrigger={(handleInteraction, isTooltipOpen) => (
+                <div
+                  onClick={(e) =>
+                    handleIconClick({
+                      e,
+                      isMenuOpen: isVisible,
+                      isTooltipOpen,
+                      handleInteraction,
+                      onClick: () => setIsVisible(!isVisible),
+                    })
+                  }
+                  onMouseEnter={(e) => {
+                    handleMouseEnter({
+                      e,
+                      isMenuOpen: isVisible,
+                      handleInteraction,
+                    });
+                  }}
+                  onMouseLeave={(e) => {
+                    handleMouseLeave({
+                      e,
+                      isTooltipOpen,
+                      handleInteraction,
+                    });
+                  }}
+                >
+                  <NotificationIconButton
+                    ref={notifButtonRef}
+                    onClick={() => setIsVisible(!isVisible)}
+                  />
+                </div>
+              )}
             />
+
             <NotificationFeedPopover
               buttonRef={notifButtonRef}
               isVisible={isVisible}

packages/commonwealth/client/scripts/views/components/MobileNavigation/MobileNavigation.scss

@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-around;
     align-items: center;
-    padding-inline: min(30px, 3%);
+    padding-inline: min(10px, 1%);
     margin-top: 8px;
     margin-bottom: 16px;
   }

packages/commonwealth/client/scripts/views/components/MobileNavigation/MobileNavigation.tsx

@@ -17,6 +17,7 @@ const MobileNavigation = () => {
   const location = useLocation();
   const user = useUserStore();
   const newMobileNav = useFlag('newMobileNav');
+  const rewardsEnabled = useFlag('rewardsPage');
 
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
@@ -56,6 +57,15 @@ const MobileNavigation = () => {
           },
         ]
       : []),
+    ...(user.isLoggedIn && rewardsEnabled
+      ? [
+          {
+            type: 'rewards' as const,
+            onClick: () => navigate('/rewards', {}, null),
+            selected: !!matchRoutes([{ path: '/rewards' }], location),
+          },
+        ]
+      : []),
   ];
 
   return (

packages/commonwealth/client/scripts/views/components/MobileNavigation/NavigationButton/NavigationButton.scss

@@ -6,8 +6,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 4px 16px 0;
-  min-width: 80px;
+  padding: 4px 8px 0;
 
   svg {
     fill: $neutral-600;

packages/commonwealth/client/scripts/views/components/MobileNavigation/NavigationButton/NavigationButton.tsx

@@ -7,7 +7,7 @@ import { typeToIconAndName } from './utils';
 import './NavigationButton.scss';
 
 export interface NavigationButtonProps {
-  type: 'home' | 'create' | 'explore' | 'notifications';
+  type: 'home' | 'create' | 'explore' | 'notifications' | 'rewards';
   selected: boolean;
   onClick: () => void;
 }

packages/commonwealth/client/scripts/views/components/MobileNavigation/NavigationButton/utils.ts

@@ -17,5 +17,7 @@ export const typeToIconAndName = (
       return ['compassPhosphor', 'Explore'];
     case 'notifications':
       return ['bell', 'Notifications'];
+    case 'rewards':
+      return ['cardholder', 'Rewards'];
   }
 };

packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.scss

@@ -55,6 +55,31 @@
         margin-bottom: auto;
         margin-left: 5px;
       }
+
+      .rewards-button {
+        margin-left: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+          fill: $neutral-500;
+        }
+
+        .rewards-button-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+
+          .earnings {
+            margin-left: 4px;
+            font-family: $font-family-roboto;
+            color: $neutral-500;
+            white-space: nowrap;
+          }
+        }
+      }
     }
 
     .DesktopMenuContainer {

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

@@ -15,10 +15,13 @@ import { HelpMenuPopover } from 'views/menus/help_menu';
 
 import UserDropdown from './UserDropdown';
 
+import { useFlag } from 'hooks/useFlag';
 import { useFetchCustomDomainQuery } from 'state/api/configuration';
 import useUserStore from 'state/ui/user';
 import AuthButtons from 'views/components/SublayoutHeader/AuthButtons';
 import { AuthModalType } from 'views/modals/AuthModal';
+import { capDecimals } from 'views/modals/ManageCommunityStakeModal/utils';
+import { CWText } from '../../component_kit/cw_text';
 import './DesktopHeader.scss';
 
 interface DesktopHeaderProps {
@@ -28,6 +31,7 @@ interface DesktopHeaderProps {
 
 const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => {
   const navigate = useCommonNavigate();
+  const rewardsEnabled = useFlag('rewardsPage');
   const { menuVisible, setMenu, menuName, setUserToggledVisibility } =
     useSidebarStore();
   const user = useUserStore();
@@ -118,7 +122,41 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => {
 
             <HelpMenuPopover />
           </div>
-          {user.isLoggedIn && <KnockNotifications />}
+          {user.isLoggedIn && (
+            <>
+              <KnockNotifications />
+
+              {rewardsEnabled && (
+                <div className="rewards-button">
+                  <CWTooltip
+                    content="Wallet and rewards"
+                    placement="bottom"
+                    renderTrigger={(handleInteraction) => (
+                      <div
+                        className="rewards-button-container"
+                        onClick={() => navigate('/rewards', {}, null)}
+                        onMouseEnter={handleInteraction}
+                        onMouseLeave={handleInteraction}
+                      >
+                        <CWIconButton
+                          iconName="cardholder"
+                          weight="fill"
+                          iconButtonTheme="black"
+                        />
+                        <CWText
+                          className="earnings"
+                          fontWeight="medium"
+                          type="caption"
+                        >
+                          {capDecimals('0.125')} ETH
+                        </CWText>
+                      </div>
+                    )}
+                  />
+                </div>
+              )}
+            </>
+          )}
         </div>
 
         {user.isLoggedIn && (

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

@@ -32,6 +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 } from '../../pages/RewardsPage/types';
+import { mobileTabParam } from '../../pages/RewardsPage/utils';
 import { useCommunityStake } from '../CommunityStake';
 import UserMenuItem from './UserMenuItem';
 import useCheckAuthenticatedAddresses from './useCheckAuthenticatedAddresses';
@@ -87,6 +89,7 @@ const useUserMenuItems = ({
     recheck: isMenuOpen,
   });
 
+  const rewardsEnabled = useFlag('rewardsPage');
   const referralsEnabled = useFlag('referrals');
 
   const userData = useUserStore();
@@ -297,7 +300,14 @@ const useUserMenuItems = ({
       {
         type: 'default',
         label: 'My transactions',
-        onClick: () => navigate(`/myTransactions`, {}, null),
+        onClick: () =>
+          navigate(
+            rewardsEnabled
+              ? `/rewards?tab=${mobileTabParam[MobileTabType.WalletBalance]}`
+              : `/myTransactions`,
+            {},
+            null,
+          ),
       },
       {
         type: 'default',

packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts

@@ -13,6 +13,7 @@ import {
   BellSimpleSlash,
   BookOpenText,
   Brain,
+  Cardholder,
   CaretDoubleLeft,
   CaretDoubleRight,
   CaretDown,
@@ -89,6 +90,7 @@ import {
   Trash,
   Trophy,
   TwitterLogo,
+  UserSwitch,
   Users,
   UsersThree,
   Warning,
@@ -147,6 +149,7 @@ export const iconLookup = {
   bellRinging: withPhosphorIcon(BellSimpleRinging),
   bellMuted: withPhosphorIcon(BellSimpleSlash),
   bookOpenText: withPhosphorIcon(BookOpenText),
+  cardholder: withPhosphorIcon(Cardholder),
   cautionCircle: Icons.CWCautionCircle,
   cautionTriangle: Icons.CWCautionTriangle,
   chatDots: withPhosphorIcon(ChatDots),
@@ -286,6 +289,7 @@ export const iconLookup = {
   unsubscribe: Icons.CWUnsubscribe,
   upvote: withPhosphorIcon(ArrowFatUp),
   users: withPhosphorIcon(Users),
+  userSwitch: withPhosphorIcon(UserSwitch),
   vote: Icons.CWVote,
   views: Icons.CWViews,
   wallet: Icons.CWWallet,

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/RewardsCard/RewardsCard.scss

@@ -0,0 +1,26 @@
+@import '../../../../styles/shared';
+
+.RewardsCard {
+  &.Card {
+    width: unset;
+  }
+  padding: 24px;
+
+  .rewards-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+
+    .see-all-text {
+      cursor: pointer;
+      margin-left: auto;
+      color: $primary-500;
+      white-space: nowrap;
+    }
+  }
+
+  .rewards-card-description {
+    color: $neutral-600;
+  }
+}