update pw envs

configs/envs/.env.pw

@@ -9,18 +9,37 @@ NEXT_PUBLIC_APP_ENV=testing
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
 NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
+NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=https://t.me/poa_network
+NEXT_PUBLIC_FOOTER_STAKING_LINK=https://duneanalytics.com/maxaleks/xdai-staking
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address'}}]
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cup']
 NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
 NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
+NEXT_PUBLIC_FEATURED_NETWORKS=
 NEXT_PUBLIC_NETWORK_LOGO=
 NEXT_PUBLIC_NETWORK_LOGO_DARK=
 NEXT_PUBLIC_NETWORK_ICON=
 NEXT_PUBLIC_NETWORK_ICON_DARK=
-NEXT_PUBLIC_NETWORK_RPC_URL=https://core.poa.network
+NEXT_PUBLIC_NETWORK_RPC_URL=https://localhost:1111
 NEXT_PUBLIC_IS_TESTNET=true
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace/eth-goerli.json
+NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
 NEXT_PUBLIC_IS_L2_NETWORK=false
 
+# network config
+NEXT_PUBLIC_NETWORK_NAME=Blockscout
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Blockscout
+NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=ethereum
+NEXT_PUBLIC_NETWORK_ID=1
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://localhost:3000/marketplace-submit-form
+
 # api config
-NEXT_PUBLIC_API_HOST=blockscout.com
-NEXT_PUBLIC_STATS_API_HOST=https://stats-test.aws-k8s.blockscout.com
+NEXT_PUBLIC_API_HOST=https://localhost:3003
+NEXT_PUBLIC_STATS_API_HOST=https://localhost:3004
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
+NEXT_PUBLIC_API_BASE_PATH=/

mocks/config/network.ts

@@ -4,7 +4,7 @@ const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
   { title: 'Gnosis Chain', url: 'https://blockscout.com/xdai/mainnet', group: 'Mainnets', isActive: true },
   { title: 'Arbitrum on xDai', url: 'https://blockscout.com/xdai/aox', group: 'Mainnets' },
   { title: 'Ethereum', url: 'https://blockscout.com/eth/mainnet', group: 'Mainnets' },
-  { title: 'Ethereum Classic', url: 'https://blockscout.com/etx/mainnet', group: 'Mainnets', icon: 'https://example.com/my-logo.png' },
+  { title: 'Ethereum Classic', url: 'https://blockscout.com/etx/mainnet', group: 'Mainnets', icon: 'https://localhost:3000/my-logo.png' },
   { title: 'POA', url: 'https://blockscout.com/poa/core', group: 'Mainnets' },
   { title: 'RSK', url: 'https://blockscout.com/rsk/mainnet', group: 'Mainnets' },
   { title: 'Gnosis Chain Testnet', url: 'https://blockscout.com/xdai/testnet', group: 'Testnets' },

playwright/make-envs-script.sh

@@ -2,7 +2,7 @@
 
 targetFile='./playwright/envs.js'
 
-declare -a envFiles=('./configs/envs/.env.pw' './configs/envs/.env.poa_core')
+declare -a envFiles=('./configs/envs/.env.pw')
 
 touch $targetFile;
 truncate -s 0 $targetFile;

playwright/utils/buildApiUrl.ts

@@ -5,5 +5,5 @@ import { RESOURCES } from 'lib/api/resources';
 
 export default function buildApiUrl<R extends ResourceName>(resourceName: R, pathParams?: ResourcePathParams<R>) {
   const resource = RESOURCES[resourceName];
-  return compile('/node-api/proxy/poa/core' + resource.path)(pathParams);
+  return compile('/node-api/proxy' + resource.path)(pathParams);
 }

ui/shared/TokenSnippet/TokenSnippet.pw.tsx

@@ -43,7 +43,5 @@ test('with logo', async({ mount, page }) => {
     </TestApp>,
   );
 
-  await page.waitForResponse(API_URL),
-
   await expect(component).toHaveScreenshot();
 });

ui/snippets/header/Burger.pw.tsx

@@ -8,8 +8,8 @@ import TestApp from 'playwright/TestApp';
 
 import Burger from './Burger';
 
-const FEATURED_NETWORKS_URL = 'https://example.com/featured-networks.json';
-const LOGO_URL = 'https://example.com/my-logo.png';
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
+const LOGO_URL = 'https://localhost:3000/my-logo.png';
 
 base.use({ viewport: devices['iPhone 13 Pro'].viewport });
 

ui/snippets/navigation/NavigationDesktop.pw.tsx

 import { Box, Flex } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
+import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as cookies from 'lib/cookies';
 import authFixture from 'playwright/fixtures/auth';
+import contextWithEnvs, { createContextWithEnvs } from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 
 import NavigationDesktop from './NavigationDesktop';
@@ -16,6 +17,15 @@ const hooksConfig = {
   },
 };
 
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
+
+const test = base.extend({
+  context: contextWithEnvs([
+    { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ]) as any,
+});
+
 test('no auth +@desktop-xl +@dark-mode-xl', async({ mount }) => {
   const component = await mount(
     <TestApp>
@@ -30,15 +40,18 @@ test('no auth +@desktop-xl +@dark-mode-xl', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test.describe('auth', () => {
-  const extendedTest = test.extend({
-    context: ({ context }, use) => {
+base.describe('auth', () => {
+  const test = base.extend({
+    context: async({ browser }, use) => {
+      const context = await createContextWithEnvs(browser, [
+        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
+      ]);
       authFixture(context);
       use(context);
     },
   });
 
-  extendedTest('+@desktop-xl +@dark-mode-xl', async({ mount }) => {
+  test('+@desktop-xl +@dark-mode-xl', async({ mount }) => {
     const component = await mount(
       <TestApp>
         <Flex w="100%" minH="100vh" alignItems="stretch">
@@ -85,15 +98,18 @@ test('with submenu +@desktop-xl +@dark-mode', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test.describe('cookie set to false', () => {
-  const extendedTest = test.extend({
-    context: ({ context }, use) => {
+base.describe('cookie set to false', () => {
+  const test = base.extend({
+    context: async({ browser }, use) => {
+      const context = await createContextWithEnvs(browser, [
+        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
+      ]);
       context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: 'localhost', path: '/' } ]);
       use(context);
     },
   });
 
-  extendedTest('navbar is opened +@desktop-xl', async({ mount }) => {
+  test('navbar is opened +@desktop-xl', async({ mount }) => {
     const component = await mount(
       <TestApp>
         <Flex w="100%" minH="100vh" alignItems="stretch">
@@ -109,15 +125,18 @@ test.describe('cookie set to false', () => {
   });
 });
 
-test.describe('cookie set to true', () => {
-  const extendedTest = test.extend({
-    context: ({ context }, use) => {
+base.describe('cookie set to true', () => {
+  const test = base.extend({
+    context: async({ browser }, use) => {
+      const context = await createContextWithEnvs(browser, [
+        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
+      ]);
       context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'true', domain: 'localhost', path: '/' } ]);
       use(context);
     },
   });
 
-  extendedTest('navbar is collapsed', async({ mount }) => {
+  test('navbar is collapsed', async({ mount }) => {
     const component = await mount(
       <TestApp>
         <Flex w="100%" minH="100vh" alignItems="stretch">

ui/snippets/networkMenu/NetworkLogo.pw.tsx

@@ -27,8 +27,8 @@ test.describe('placeholder logo', () => {
 });
 
 test.describe('custom logo', () => {
-  const LOGO_URL = 'https://example.com/my-logo.png';
-  const ICON_URL = 'https://example.com/my-icon.png';
+  const LOGO_URL = 'https://localhost:3000/my-logo.png';
+  const ICON_URL = 'https://localhost:3000/my-icon.png';
   const extendedTest = test.extend({
     context: contextWithEnvs([
       { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
@@ -62,8 +62,8 @@ test.describe('custom logo', () => {
 });
 
 test.describe('custom logo with dark option', () => {
-  const LOGO_URL = 'https://example.com/my-logo.png';
-  const ICON_URL = 'https://example.com/my-icon.png';
+  const LOGO_URL = 'https://localhost:3000/my-logo.png';
+  const ICON_URL = 'https://localhost:3000/my-icon.png';
   const extendedTest = test.extend({
     context: contextWithEnvs([
       { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },

ui/snippets/networkMenu/NetworkMenu.pw.tsx

@@ -7,7 +7,7 @@ import TestApp from 'playwright/TestApp';
 
 import NetworkMenu from './NetworkMenu';
 
-const FEATURED_NETWORKS_URL = 'https://example.com/featured-networks.json';
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
 
 const extendedTest = test.extend({
   context: contextWithEnvs([
@@ -19,7 +19,7 @@ const extendedTest = test.extend({
 extendedTest.use({ viewport: { width: 1600, height: 1000 } });
 
 extendedTest('base view +@dark-mode', async({ mount, page }) => {
-  const LOGO_URL = 'https://example.com/my-logo.png';
+  const LOGO_URL = 'https://localhost:3000/my-logo.png';
   await page.route(LOGO_URL, (route) => {
     return route.fulfill({
       status: 200,

ui/snippets/networkMenu/NetworkMenuLink.tsx

@@ -24,7 +24,7 @@ const NetworkMenuLink = ({ title, icon, isActive, isMobile, url, invertIconInDar
     <Icon
       as={ placeholderIcon }
       boxSize="30px"
-      color="blue.600"
+      color={ colors.iconPlaceholder.default }
     />
   );
 

ui/snippets/networkMenu/useColors.ts

@@ -7,6 +7,9 @@ export default function useColors() {
       active: useColorModeValue('blackAlpha.900', 'whiteAlpha.900'),
       hover: useColorModeValue('blue.600', 'link_hovered'),
     },
+    iconPlaceholder: {
+      'default': useColorModeValue('blackAlpha.100', 'whiteAlpha.300'),
+    },
     bg: {
       'default': 'transparent',
       active: useColorModeValue('blue.50', 'gray.800'),