add test for marketplace page

configs/envs/.env.pw

@@ -41,6 +41,7 @@ NEXT_PUBLIC_APP_INSTANCE=pw
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://localhost:3000/marketplace-submit-form
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://localhost:3000/marketplace-suggest-ideas-form
 NEXT_PUBLIC_AD_BANNER_PROVIDER=slise
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_AUTH_URL=http://localhost:3100

mocks/apps/apps.ts

@@ -4,23 +4,151 @@ export const apps = [
     author: 'Hop',
     id: 'hop-exchange',
     title: 'Hop',
-    logo: 'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FfhJJGsR3RSfFmRoxfvqk%252FHop.png%3Falt%3Dmedia%26token%3D8107e45c-546c-4771-bbfe-e86bb0fe8c1a',
+    logo: 'https://blockscout-content.s3.amazonaws.com/hop.png',
     categories: [ 'Bridge' ],
     shortDescription: 'Hop is a scalable rollup-to-rollup general token bridge. It allows users to send tokens from one rollup or sidechain to another almost immediately without having to wait for the networks challenge period.',
     site: 'https://help.hop.exchange/hc/en-us/articles/4405172445197-What-is-Hop-Protocol-',
     description: 'Hop is a scalable rollup-to-rollup general token bridge. It allows users to send tokens from one rollup or sidechain to another almost immediately without having to wait for the networks challenge period.',
     external: true,
     url: 'https://goerli.hop.exchange/send?token=ETH&sourceNetwork=ethereum',
+    internalWallet: false,
   },
   {
     author: 'Blockscout',
     id: 'token-approval-tracker',
     title: 'Token Approval Tracker',
-    logo: 'https://approval-tracker.apps.blockscout.com/icon-192.png',
+    logo: 'https://blockscout-content.s3.amazonaws.com/token-approval.png',
     categories: [ 'Infra & Dev tooling' ],
     shortDescription: 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.',
     site: 'https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker',
     description: 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.',
+    external: false,
     url: 'https://approval-tracker.apps.blockscout.com/',
+    internalWallet: false,
+    priority: 0,
+  },
+  {
+    author: 'Revoke',
+    id: 'revoke.cash',
+    title: 'Revoke.cash',
+    logo: 'https://blockscout-content.s3.amazonaws.com/revokecash.png',
+    categories: [ 'Infra & Dev tooling' ],
+    shortDescription: 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.',
+    site: 'https://revoke.cash/about',
+    external: false,
+    description: 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.',
+    url: 'https://revoke.cash/',
+    internalWallet: true,
+    priority: 2,
+  },
+  {
+    author: 'Aave',
+    id: 'aave',
+    title: 'Aave',
+    logo: 'https://blockscout-content.s3.amazonaws.com/aave.png',
+    categories: [ 'DeFi' ],
+    shortDescription: 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.',
+    site: 'https://docs.aave.com/faq/',
+    external: false,
+    description: 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.',
+    url: 'https://staging.aave.com/',
+    internalWallet: true,
+    priority: 4,
+  },
+  {
+    author: 'LooksRare',
+    id: 'looksrare',
+    title: 'LooksRare',
+    logo: 'https://blockscout-content.s3.amazonaws.com/looksrare.png',
+    categories: [ 'NFT' ],
+    shortDescription: 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.',
+    external: true,
+    site: 'https://docs.looksrare.org/about/welcome-to-looksrare',
+    description: 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.',
+    url: 'https://goerli.looksrare.org/',
+    internalWallet: false,
+  },
+  {
+    author: 'dYdX',
+    id: 'dydx',
+    title: 'dYdX',
+    logo: 'https://blockscout-content.s3.amazonaws.com/dydx.png',
+    categories: [ 'DeFi' ],
+    external: true,
+    shortDescription: 'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.',
+    site: 'https://help.dydx.exchange/en/articles/3047379-introduction-and-overview',
+    description: 'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.',
+    url: 'https://trade.stage.dydx.exchange/portfolio/overview',
+    internalWallet: false,
+  },
+  {
+    author: 'MetalSwap',
+    id: 'metalswap',
+    title: 'MetalSwap',
+    logo: 'https://blockscout-content.s3.amazonaws.com/MetalSwap.png',
+    categories: [ 'DeFi' ],
+    shortDescription: 'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.',
+    site: 'https://docs.metalswap.finance/',
+    external: false,
+    description: 'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.',
+    url: 'https://demo.metalswap.finance/',
+    internalWallet: false,
+  },
+  {
+    author: 'FaucetDao',
+    id: 'faucetdao',
+    title: 'FaucetDao',
+    logo: 'https://blockscout-content.s3.amazonaws.com/faucet-dao.png',
+    categories: [ 'Faucet' ],
+    shortDescription: 'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well-vetted blockchain projects.',
+    site: 'https://linktr.ee/faucet_dao',
+    external: false,
+    description: 'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well-vetted blockchain projects.',
+    url: 'https://www.faucetdao.shop/swap?chain=goerli',
+    internalWallet: true,
+    priority: 1,
+  },
+  {
+    author: 'Uniswap',
+    id: 'uniswap',
+    title: 'Uniswap',
+    logo: 'https://blockscout-content.s3.amazonaws.com/uniswap.png',
+    categories: [ 'Bridge' ],
+    shortDescription: 'Uniswap is a cryptocurrency exchange that uses a decentralized network protocol.',
+    site: 'https://docs.uniswap.org/',
+    external: false,
+    description: 'Uniswap is a cryptocurrency exchange that uses a decentralized network protocol.',
+    url: 'https://app.uniswap.org/swap',
+    internalWallet: true,
+    priority: 5,
+  },
+  {
+    author: 'zkBob',
+    id: 'zkbob-wallet',
+    title: 'zkBob Wallet',
+    logo: 'https://blockscout-content.s3.amazonaws.com/zkbob-logo.png',
+    categories: [ 'Wallet' ],
+    shortDescription: 'A Web3 smart-contract privacy wallet based on ZKP technology. zkBob could be used for regular transfers, payments, and much more. Compliance features backed in!',
+    site: 'https://zkbob.com',
+    description: 'zkBob simplifies secure, limited-value, and anonymous token transfers for everyday users. The application accepts WETH, ETH, USDC. Once one of the tokens is deposited in the zkBob app, pool participants can transfer tokens amongst themselves in a private, secure manner. The shielded zkBob pool uses zkproofs to limit public data exposure',
+    external: false,
+    url: 'https://staging--zkbob.netlify.app/transfer',
+    twitter: 'https://twitter.com/zkBob_',
+    telegram: 'https://t.me/zkbobcommunity',
+    internalWallet: false,
+  },
+  {
+    author: 'Swapr',
+    id: 'swapr',
+    title: 'Swapr',
+    logo: 'https://blockscout-content.s3.amazonaws.com/swapr.png',
+    categories: [ 'DeFi' ],
+    shortDescription: 'A governance-enabled automated market maker with adjustable fees.',
+    site: 'https://swapr.eth.dev.lastmilelabs.systems',
+    description: 'A governance-enabled automated market maker with adjustable fees.',
+    external: false,
+    url: 'https://swapr.eth.limo/#/swap',
+    internalWallet: false,
+    priority: 3,
   },
 ];

playwright/index.ts

@@ -9,6 +9,7 @@ const NEXT_ROUTER_MOCK = {
   query: {},
   pathname: '',
   push: () => Promise.resolve(),
+  replace: () => Promise.resolve(),
 };
 
 beforeMount(async({ hooksConfig }) => {

ui/pages/Marketplace.pw.tsx

+import { test as base, expect, devices } from '@playwright/experimental-ct-react';
+import type { Page, Route } from '@playwright/test';
+import React from 'react';
+
+import { buildExternalAssetFilePath } from 'configs/app/utils';
+import { apps as appsMock } from 'mocks/apps/apps';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import TestApp from 'playwright/TestApp';
+import * as app from 'playwright/utils/app';
+
+import Marketplace from './Marketplace';
+
+const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const testFn = async({ mount, page }: { mount: any; page: Page }) => {
+  await page.route(MARKETPLACE_CONFIG_URL, (route: Route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(appsMock),
+  }));
+
+  await Promise.all(appsMock.map(app =>
+    page.route(app.logo, (route: Route) =>
+      route.fulfill({
+        status: 200,
+        path: './playwright/mocks/image_s.jpg',
+      }),
+    ),
+  ));
+
+  const component = await mount(
+    <TestApp>
+      <Marketplace/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+};
+
+let test = base.extend({
+  context: contextWithEnvs([
+    { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ]) as any,
+});
+
+test('base view +@dark-mode', testFn);
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', testFn);
+
+  test = test.extend({
+    context: contextWithEnvs([
+      { name: 'NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM', value: '' },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any,
+  });
+
+  test('without suggest ideas button', testFn);
+});