update tests

mocks/rewards/balance.ts

+import type { RewardsUserBalancesResponse } from 'types/api/rewards';
+
+export const base: RewardsUserBalancesResponse = {
+  total: '250',
+  staked: '0',
+  unstaked: '0',
+  total_staking_rewards: '0',
+  total_referral_rewards: '0',
+  pending_referral_rewards: '0',
+};

mocks/rewards/dailyReward.ts

+import type { RewardsUserDailyCheckResponse } from 'types/api/rewards';
+
+export const base: RewardsUserDailyCheckResponse = {
+  available: true,
+  daily_reward: '10',
+  pending_referral_rewards: '0',
+  date: '',
+  reset_at: '',
+};

mocks/user/profile.ts

@@ -15,3 +15,11 @@ export const withoutEmail: UserInfo = {
   nickname: 'tom2drum',
   address_hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
 };
+
+export const withEmailAndWallet: UserInfo = {
+  avatar: 'https://avatars.githubusercontent.com/u/22130104',
+  email: 'tom@ohhhh.me',
+  name: 'tom goriunov',
+  nickname: 'tom2drum',
+  address_hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+};

playwright/TestApp.tsx

@@ -11,6 +11,7 @@ import type { Props as PageProps } from 'nextjs/getServerSideProps';
 import config from 'configs/app';
 import { AppContextProvider } from 'lib/contexts/app';
 import { MarketplaceContext } from 'lib/contexts/marketplace';
+import { RewardsContextProvider } from 'lib/contexts/rewards';
 import { SocketProvider } from 'lib/socket/context';
 import currentChain from 'lib/web3/currentChain';
 import theme from 'theme/theme';
@@ -77,7 +78,9 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext, marketp
             <MarketplaceContext.Provider value={ marketplaceContext }>
               <GrowthBookProvider>
                 <WagmiProvider config={ wagmiConfig }>
+                  <RewardsContextProvider>
                     { children }
+                  </RewardsContextProvider>
                 </WagmiProvider>
               </GrowthBookProvider>
             </MarketplaceContext.Provider>

playwright/fixtures/mockEnvs.ts

@@ -81,4 +81,7 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
   nameService: [
     [ 'NEXT_PUBLIC_NAME_SERVICE_API_HOST', 'https://localhost:3101' ],
   ],
+  rewardsService: [
+    [ 'NEXT_PUBLIC_REWARDS_SERVICE_API_HOST', 'http://localhost:3003' ],
+  ],
 };

playwright/fixtures/rewards.ts

+import type { BrowserContext, TestFixture } from '@playwright/test';
+
+import config from 'configs/app';
+import * as cookies from 'lib/cookies';
+
+// This JWT token contains 0xd789a607CEac2f0E14867de4EB15b15C9FFB5859 address
+const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIweGQ3ODlhNjA3Q0VhYzJmMEUxNDg2N2RlNEVCMTViMTVDOUZGQjU4NTkiLCJpYXQiOjE3MzA0NzAyNTIsImV4cCI6MTczMDQ3MDU1Mn0.uhWH59mJQhpWcK8RHaLQ-X_nieXZsYE-VdcPrjYNvp4'; // eslint-disable-line max-len
+
+export function authenticateUser(context: BrowserContext) {
+  context.addCookies([ { name: cookies.NAMES.REWARDS_API_TOKEN, value: token, domain: config.app.host, path: '/' } ]);
+}
+
+export const contextWithRewards: TestFixture<BrowserContext, { context: BrowserContext }> = async({ context }, use) => {
+  authenticateUser(context);
+  use(context);
+};

ui/home/HeroBanner.pw.tsx

 import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
+import * as rewardsBalanceMock from 'mocks/rewards/balance';
+import * as dailyRewardMock from 'mocks/rewards/dailyReward';
 import * as profileMock from 'mocks/user/profile';
 import { contextWithAuth } from 'playwright/fixtures/auth';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { contextWithRewards } from 'playwright/fixtures/rewards';
 import { test, expect } from 'playwright/lib';
 import * as pwConfig from 'playwright/utils/config';
 
@@ -10,12 +14,15 @@ import HeroBanner from './HeroBanner';
 
 const authTest = test.extend<{ context: BrowserContext }>({
   context: contextWithAuth,
+}).extend<{ context: BrowserContext }>({
+  context: contextWithRewards,
 });
 
 authTest('customization +@dark-mode', async({ render, page, mockEnvs, mockApiResponse }) => {
   const IMAGE_URL = 'https://localhost:3000/my-image.png';
 
   await mockEnvs([
+    ...ENVS_MAP.rewardsService,
     // eslint-disable-next-line max-len
     [ 'NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG', `{"background":["lightpink","no-repeat center/cover url(${ IMAGE_URL })"],"text_color":["deepskyblue","white"],"border":["3px solid green","3px dashed yellow"],"button":{"_default":{"background":["deeppink"],"text_color":["white"]},"_selected":{"background":["lime"]}}}` ],
   ]);
@@ -27,7 +34,9 @@ authTest('customization +@dark-mode', async({ render, page, mockEnvs, mockApiRes
     });
   });
 
-  await mockApiResponse('user_info', profileMock.base);
+  await mockApiResponse('user_info', profileMock.withEmailAndWallet);
+  await mockApiResponse('rewards_user_balances', rewardsBalanceMock.base);
+  await mockApiResponse('rewards_user_daily_check', dailyRewardMock.base);
 
   const component = await render(<HeroBanner/>);
 

ui/snippets/header/HeaderDesktop.pw.tsx

 import React from 'react';
 
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import { test, expect } from 'playwright/lib';
 
 import HeaderDesktop from './HeaderDesktop';
 
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    ...ENVS_MAP.rewardsService,
+  ]);
+});
+
 test('default view +@dark-mode', async({ render }) => {
   const component = await render(<HeaderDesktop/>);
   await expect(component).toHaveScreenshot();

ui/snippets/header/HeaderMobile.pw.tsx

 import React from 'react';
 
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import { test, expect, devices } from 'playwright/lib';
 
 import HeaderMobile from './HeaderMobile';
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    ...ENVS_MAP.rewardsService,
+  ]);
+});
+
 test('default view +@dark-mode', async({ render, page }) => {
   await render(<HeaderMobile/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } });

ui/snippets/navigation/horizontal/NavigationDesktop.pw.tsx

 import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
+import * as rewardsBalanceMock from 'mocks/rewards/balance';
+import * as dailyRewardMock from 'mocks/rewards/dailyReward';
 import * as profileMock from 'mocks/user/profile';
 import { contextWithAuth } from 'playwright/fixtures/auth';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { contextWithRewards } from 'playwright/fixtures/rewards';
 import { test, expect } from 'playwright/lib';
 
 import NavigationDesktop from './NavigationDesktop';
 
 const testWithAuth = test.extend<{ context: BrowserContext }>({
   context: contextWithAuth,
+}).extend<{ context: BrowserContext }>({
+  context: contextWithRewards,
 });
 
 testWithAuth('base view +@dark-mode', async({ render, mockApiResponse, mockEnvs, page }) => {
@@ -20,10 +25,13 @@ testWithAuth('base view +@dark-mode', async({ render, mockApiResponse, mockEnvs,
     },
   };
 
-  await mockApiResponse('user_info', profileMock.base);
+  await mockApiResponse('user_info', profileMock.withEmailAndWallet);
+  await mockApiResponse('rewards_user_balances', rewardsBalanceMock.base);
+  await mockApiResponse('rewards_user_daily_check', dailyRewardMock.base);
   await mockEnvs([
     ...ENVS_MAP.userOps,
     ...ENVS_MAP.nameService,
+    ...ENVS_MAP.rewardsService,
     [ 'NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES', '["/blocks","/apps"]' ],
   ]);
 

ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx

@@ -24,6 +24,7 @@ const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
 
 test.beforeEach(async({ mockEnvs, mockConfigResponse }) => {
   await mockEnvs([
+    ...ENVS_MAP.rewardsService,
     [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
   ]);
   await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);