Ad banner on Merits page (#2527)

* add ad banner to merits page

* update tests

* fix ad position with horizontal menu

ui/pages/RewardsDashboard.pw.tsx

@@ -10,6 +10,7 @@ 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';
 
 import RewardsDashboard from './RewardsDashboard';
 
@@ -24,17 +25,25 @@ testWithAuth.beforeEach(async({ mockEnvs, mockApiResponse }) => {
   await mockApiResponse('user_info', profileMock.withEmailAndWallet);
 });
 
-testWithAuth('base view +@dark-mode +@mobile', async({ render, mockApiResponse }) => {
+testWithAuth('base view +@dark-mode +@mobile', async({ page, render, mockApiResponse }) => {
   await mockApiResponse('rewards_user_balances', rewardsBalanceMock.base);
   await mockApiResponse('rewards_user_daily_check', dailyRewardMock.base);
   await mockApiResponse('rewards_user_referrals', referralsMock.base);
   await mockApiResponse('rewards_config', rewardsConfigMock.base);
 
   const component = await render(<RewardsDashboard/>);
-  await expect(component).toHaveScreenshot();
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
 });
 
-testWithAuth('with error', async({ render }) => {
+testWithAuth('with error', async({ page, render }) => {
   const component = await render(<RewardsDashboard/>);
-  await expect(component).toHaveScreenshot();
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
 });

ui/pages/RewardsDashboard.tsx

@@ -8,6 +8,7 @@ import DailyRewardClaimButton from 'ui/rewards/dashboard/DailyRewardClaimButton'
 import RewardsDashboardCard from 'ui/rewards/dashboard/RewardsDashboardCard';
 import RewardsDashboardCardValue from 'ui/rewards/dashboard/RewardsDashboardCardValue';
 import RewardsReadOnlyInputWithCopy from 'ui/rewards/RewardsReadOnlyInputWithCopy';
+import AdBanner from 'ui/shared/ad/AdBanner';
 import Skeleton from 'ui/shared/chakra/Skeleton';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -43,6 +44,7 @@ const RewardsDashboard = () => {
 
   return (
     <>
+      <Flex gap={ 3 } justifyContent="space-between">
         <PageTitle
           title="Dashboard"
           secondRow={ (
@@ -55,6 +57,8 @@ const RewardsDashboard = () => {
             </span>
           ) }
         />
+        <AdBanner platform="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden" display={{ base: 'none', lg: 'block ' }}/>
+      </Flex>
       <Flex flexDirection="column" alignItems="flex-start" w="full" gap={ 6 }>
         { isError && <Alert status="error">Failed to load some data. Please try again later.</Alert> }
         <Flex gap={ 6 } flexDirection={{ base: 'column', md: 'row' }} w="full">