Quests for both apps

apps/scoutgame/__e2e__/po/QuestsPage.po.ts

@@ -0,0 +1,18 @@
+import type { Page } from '@playwright/test';
+
+import { GeneralPageLayout } from './GeneralPageLayout.po';
+
+export class QuestsPage extends GeneralPageLayout {
+  constructor(
+    protected page: Page,
+    public container = page.locator('data-test=quest-page'),
+    public dailyClaimEnabled = page.locator('data-test=daily-claim-enabled'),
+    public dailyClaimDisabled = page.locator('data-test=daily-claim-disabled'),
+    public claimedIcon = page.locator('data-test=claimed-icon'),
+    public sidebar = page.locator('data-test=quest-sidebar'),
+    public friendlyQuest = page.locator('data-test=quest-sidebar >> data-test=friendly-quest'),
+    public copyReferralButton = friendlyQuest.locator('data-test=copy-referral-link')
+  ) {
+    super(page);
+  }
+}

apps/scoutgame/__e2e__/questsPage.spec.ts

@@ -0,0 +1,73 @@
+import { questsRecord } from '@packages/scoutgame/quests/questRecords';
+import { mockScout } from '@packages/scoutgame/testing/database';
+
+import { expect, test } from './test';
+
+test.describe('Quests page', () => {
+  test('Can claim', async ({ page, questsPage, utils }) => {
+    const newUser = await mockScout({
+      onboardedAt: new Date(),
+      agreedToTermsAt: new Date()
+    });
+    await utils.loginAsUserId(newUser.id);
+
+    await page.goto('/quests');
+    await expect(questsPage.container).toBeVisible();
+
+    // 6 days and 1 bonus should be disabled
+    const disabledElements = await questsPage.dailyClaimDisabled.count();
+    expect(disabledElements).toBe(7);
+
+    // Just one quest should be enabled and can be clickable
+    await expect(questsPage.dailyClaimEnabled).toBeVisible();
+    const enabledElements = await questsPage.dailyClaimEnabled.count();
+    expect(enabledElements).toBe(1);
+    await questsPage.dailyClaimEnabled.click();
+    await expect(questsPage.claimedIcon).toBeVisible();
+  });
+
+  test('Can click on quests', async ({ page, questsPage, utils }) => {
+    const newUser = await mockScout({
+      onboardedAt: new Date(),
+      agreedToTermsAt: new Date()
+    });
+    await utils.loginAsUserId(newUser.id);
+
+    await page.goto('/quests');
+    await expect(questsPage.container).toBeVisible();
+
+    // Get all quests except invite-friend which is separate
+    const map = Object.keys(questsRecord)
+      .filter((item) => item !== 'invite-friend')
+      .map(async (key) => {
+        const locator = page.locator(`data-test=quest-${key}`);
+        await expect(locator).toBeVisible();
+        await expect(locator).toBeEnabled();
+        await locator.click();
+      });
+
+    await Promise.all(map);
+  });
+
+  test('Friendly quest', async ({ page, questsPage, utils, context }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+    const newUser = await mockScout({
+      onboardedAt: new Date(),
+      agreedToTermsAt: new Date()
+    });
+    await utils.loginAsUserId(newUser.id);
+
+    await page.goto('/quests');
+    await expect(questsPage.container).toBeVisible();
+
+    await expect(questsPage.sidebar).toBeVisible();
+    await expect(questsPage.friendlyQuest).toBeVisible();
+    await expect(questsPage.friendlyQuest.getByText(newUser.referralCode)).toBeVisible();
+    await expect(questsPage.copyReferralButton).toBeVisible();
+    await questsPage.copyReferralButton.click();
+
+    const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
+    const clipboardContent = await handle.jsonValue();
+    expect(clipboardContent.includes(newUser.referralCode)).toBe(true);
+  });
+});

apps/scoutgame/__e2e__/test.ts

@@ -5,6 +5,7 @@ import { HomePage } from './po/HomePage.po';
 import { InfoPage } from './po/InfoPage.po';
 import { LoginPage } from './po/LoginPage.po';
 import { ProfilePage } from './po/ProfilePage.po';
+import { QuestsPage } from './po/QuestsPage.po';
 import { ScoutPage } from './po/ScoutPage.po';
 import { UserPage } from './po/UserPage.po';
 import { Utilities } from './po/Utilities.po';
@@ -20,6 +21,7 @@ type Fixtures = {
   userPage: UserPage;
   scoutPage: ScoutPage;
   claimPage: ClaimPage;
+  questsPage: QuestsPage;
 };
 
 export const test = base.extend<Fixtures>({
@@ -52,7 +54,8 @@ export const test = base.extend<Fixtures>({
   infoPage: ({ page }, use) => use(new InfoPage(page)),
   userPage: ({ page }, use) => use(new UserPage(page)),
   scoutPage: ({ page }, use) => use(new ScoutPage(page)),
-  claimPage: ({ page }, use) => use(new ClaimPage(page))
+  claimPage: ({ page }, use) => use(new ClaimPage(page)),
+  questsPage: ({ page }, use) => use(new QuestsPage(page))
 });
 
 export { chromium, expect } from '@playwright/test';

apps/scoutgame/app/(general)/quests/page.tsx

@@ -0,0 +1,18 @@
+import { getDailyClaims } from '@packages/scoutgame/claims/getDailyClaims';
+import { getQuests } from '@packages/scoutgame/quests/getQuests';
+import { getUserFromSession } from '@packages/scoutgame/session/getUserFromSession';
+import { getFriends } from '@packages/scoutgame/users/getFriends';
+import { safeAwaitSSRData } from '@packages/scoutgame/utils/async';
+import { QuestsPage } from '@packages/scoutgame-ui/components/quests/QuestsPage';
+
+export default async function Quests() {
+  const user = await getUserFromSession();
+  if (!user) {
+    return null;
+  }
+  const [, friends = []] = await safeAwaitSSRData(getFriends(user.id));
+  const [, dailyClaims = []] = await safeAwaitSSRData(getDailyClaims(user.id));
+  const [, quests = []] = await safeAwaitSSRData(getQuests(user.id));
+
+  return <QuestsPage dailyClaims={dailyClaims} quests={quests} friends={friends} />;
+}

apps/scoutgame/components/common/Icons/QuestsIcon.tsx

@@ -0,0 +1,29 @@
+import { SvgIcon } from '@mui/material';
+
+export function QuestsIcon({ active }: { active?: boolean }) {
+  const fill = active ? '#fff' : '#111';
+
+  return (
+    <SvgIcon>
+      <svg width='25' height='24' viewBox='0 0 25 24' xmlns='http://www.w3.org/2000/svg'>
+        <mask
+          id='mask0_3098_575'
+          style={{ maskType: 'luminance' }}
+          maskUnits='userSpaceOnUse'
+          x='2'
+          y='0'
+          width='21'
+          height='24'
+        >
+          <path d='M2.33008 0.640137H22.6821V23.3409H2.33008V0.640137Z' fill='white' />
+        </mask>
+        <g mask='url(#mask0_3098_575)'>
+          <path
+            d='M21.8866 11.5531H14.3049V8.13639H21.8866V11.5531ZM20.4921 22.5769H14.3049V12.3356H20.4921V22.5769ZM11.4759 22.5769V12.3356H13.5224V22.5769H11.4759ZM4.5061 12.3356H10.6934V22.5769H4.5061V12.3356ZM3.1116 8.13639H10.6934V11.5531H3.1116V8.13639ZM5.52385 3.60589C5.44235 3.09589 6.03085 2.50164 6.4606 2.06789C6.8631 1.66164 7.2166 1.46539 7.5731 1.45039C8.01785 1.43189 8.52835 1.70539 9.09185 2.26364C9.70335 2.86939 10.6301 4.00714 11.3216 5.18289C11.6546 5.74914 11.8879 6.25389 11.9961 6.64264C12.0414 6.80539 12.0614 6.93614 12.0646 7.03689L6.5746 4.62164C6.13035 4.39239 5.5916 4.03214 5.52385 3.60589ZM12.9611 6.64264C13.0691 6.25389 13.3026 5.74914 13.6356 5.18289C14.3269 4.00714 15.2539 2.86939 15.8654 2.26364C16.4289 1.70539 16.9401 1.43214 17.3841 1.45039C17.7409 1.46539 18.0944 1.66164 18.4964 2.06789C18.9261 2.50164 19.5149 3.09589 19.4336 3.60589C19.3654 4.03214 18.8269 4.39239 18.3826 4.62164L12.8926 7.03689C12.8961 6.93614 12.9159 6.80539 12.9611 6.64264ZM13.5224 11.5531H11.4759V8.13639H13.5224V11.5531ZM22.2779 7.35414H14.1149L18.7086 5.33289C18.7156 5.32989 18.7226 5.32664 18.7296 5.32314C19.6251 4.86389 20.1084 4.34264 20.2061 3.72914C20.3501 2.82714 19.6001 2.06989 19.0524 1.51714C18.5101 0.969644 17.9751 0.692144 17.4169 0.668644C16.7374 0.640394 16.0496 0.979894 15.3146 1.70764C14.5364 2.47864 13.5906 3.71564 12.9611 4.78589C12.7679 5.11464 12.6069 5.42164 12.4786 5.70564C12.3504 5.42164 12.1894 5.11464 11.9961 4.78589C11.3666 3.71564 10.4206 2.47864 9.6426 1.70764C8.90785 0.980144 8.2201 0.640144 7.54035 0.668644C6.9821 0.692144 6.4471 0.969644 5.90485 1.51714C5.3571 2.06989 4.6071 2.82714 4.7511 3.72914C4.84885 4.34264 5.33185 4.86389 6.22785 5.32314C6.2346 5.32664 6.2416 5.32989 6.2486 5.33289L10.8424 7.35414H2.72035C2.50435 7.35414 2.3291 7.52914 2.3291 7.74539V11.9444C2.3291 12.1606 2.50435 12.3356 2.72035 12.3356H3.7236V22.9681C3.7236 23.1841 3.89885 23.3594 4.11485 23.3594H20.8834C21.0994 23.3594 21.2746 23.1841 21.2746 22.9681V12.3356H22.2779C22.4941 12.3356 22.6691 12.1606 22.6691 11.9444V7.74539C22.6691 7.52914 22.4941 7.35414 22.2779 7.35414Z'
+            fill={fill}
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+}

apps/scoutgame/components/common/SiteNavigation.tsx

@@ -9,6 +9,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import type { MouseEvent } from 'react';
 import { useState } from 'react';
+import { ImGift as QuestsIcon } from 'react-icons/im';
 import { PiBinocularsLight } from 'react-icons/pi';
 import { SlUser } from 'react-icons/sl';
 
@@ -100,11 +101,12 @@ export function SiteNavigation({ topNav }: { topNav?: boolean }) {
           />
         ) : null}
         <BottomNavigationAction
-          label='Friends'
-          href='/friends'
-          value='friends'
-          icon={<FriendsIcon fill='#D8E1FF' />}
+          label='Quests'
+          href='/quests'
+          value='quests'
+          icon={<QuestsIcon size='19px' />}
           LinkComponent={Link}
+          onClick={(e) => openAuthModal?.(e, 'quests')}
         />
       </StyledBottomNavigation>
       <SignInModalMessage
@@ -127,8 +129,8 @@ function getActiveButton(pathname: string) {
     return 'claim';
   } else if (pathname.startsWith('/builders')) {
     return 'builders';
-  } else if (pathname.startsWith('/friends')) {
-    return 'friends';
+  } else if (pathname.startsWith('/quests')) {
+    return 'quests';
   }
   return null;
 }

apps/scoutgame/components/common/WalletLogin/WalletLogin.tsx

@@ -86,7 +86,7 @@
   function onClick() {
     if (!address) {
       // openConnectModal exists if wallet is already connected
-      openConnectModal!();
+      openConnectModal?.();
     }
     setIsConnecting(true);
   }
@@ -97,7 +97,7 @@
         setIsConnecting(false);
       });
     }
   }, [address, isConnected, isConnecting]);
 
   // If rainbowkit modal was closed by user
   useEffect(() => {

apps/scoutgame/lib/session/loginWithWalletAction.ts

@@ -5,11 +5,11 @@ import { trackUserAction } from '@packages/mixpanel/trackUserAction';
 import { actionClient } from '@packages/scoutgame/actions/actionClient';
 import { getUserFromSession } from '@packages/scoutgame/session/getUserFromSession';
 import { type SessionUser } from '@packages/scoutgame/session/interfaces';
+import { findOrCreateWalletUser } from '@packages/scoutgame/users/findOrCreateWalletUser';
 import { authSecret } from '@root/config/constants';
 import { sealData } from 'iron-session';
 import { cookies } from 'next/headers';
 
-import { findOrCreateWalletUser } from 'lib/blockchain/findOrCreateWalletUser';
 import { loginWithWalletSchema } from 'lib/blockchain/schema';
 import { verifyWalletSignature } from 'lib/blockchain/verifyWallet';
 

apps/scoutgame/middleware.ts

@@ -3,7 +3,7 @@ import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
 // These are the links that are only accessible to logged in users
-const privateLinks = ['/profile', '/notifications', '/welcome', '/claim', '/builders-you-know', '/friends'];
+const privateLinks = ['/profile', '/notifications', '/welcome', '/claim', '/builders-you-know', '/quests'];
 
 export async function middleware(request: NextRequest) {
   const session = await getSession();