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,18 +44,21 @@ const RewardsDashboard = () => {
 
   return (
     <>
-      <PageTitle
-        title="Dashboard"
-        secondRow={ (
-          <span>
-            The Blockscout Merits Program is just getting started! Learn more about the details,
-            features, and future plans in our{ ' ' }
-            <LinkExternal href="https://www.blog.blockscout.com/blockscout-merits-rewarding-block-explorer-skills">
-              blog post
-            </LinkExternal>.
-          </span>
-        ) }
-      />
+      <Flex gap={ 3 } justifyContent="space-between">
+        <PageTitle
+          title="Dashboard"
+          secondRow={ (
+            <span>
+              The Blockscout Merits Program is just getting started! Learn more about the details,
+              features, and future plans in our{ ' ' }
+              <LinkExternal href="https://www.blog.blockscout.com/blockscout-merits-rewarding-block-explorer-skills">
+                blog post
+              </LinkExternal>.
+            </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">