diff --git a/configs/app/features/marketplace.ts b/configs/app/features/marketplace.ts index 640398b161..0f6785a552 100644 --- a/configs/app/features/marketplace.ts +++ b/configs/app/features/marketplace.ts @@ -1,11 +1,19 @@ import type { Feature } from './types'; -import type { EssentialDappsConfig } from 'types/client/marketplace'; +import type { EssentialDappsConfig, MarketplaceTitles } from 'types/client/marketplace'; import apis from '../apis'; import chain from '../chain'; import { getEnvValue, getExternalAssetFilePath, parseEnvJson } from '../utils'; import blockchainInteraction from './blockchainInteraction'; +const defaultTitles: MarketplaceTitles = { + entity_name: 'Dapp', + menu_item: 'Dapps', + title: 'Dappscout', + subtitle_essential_dapps: 'Essential dapps', + subtitle_list: 'Explore dapps', +}; + // config file will be downloaded at run-time and saved in the public folder const enabled = getEnvValue('NEXT_PUBLIC_MARKETPLACE_ENABLED'); const configUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL'); @@ -17,6 +25,8 @@ const bannerContentUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_BANNE const bannerLinkUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL'); const graphLinksUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL'); const essentialDappsConfig = parseEnvJson(getEnvValue('NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG')); +const essentialDappsAdEnabled = getEnvValue('NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_AD_ENABLED') !== 'false'; +const customTitles = parseEnvJson(getEnvValue('NEXT_PUBLIC_MARKETPLACE_TITLES')) || {}; const title = 'Marketplace'; @@ -31,6 +41,8 @@ const config: Feature<( banner: { contentUrl: string; linkUrl: string } | undefined; graphLinksUrl: string | undefined; essentialDapps: EssentialDappsConfig | undefined; + essentialDappsAdEnabled: boolean; + titles: MarketplaceTitles; }> = (() => { if (enabled === 'true' && chain.rpcUrls.length > 0 && submitFormUrl) { const props = { @@ -44,6 +56,8 @@ const config: Feature<( } : undefined, graphLinksUrl, essentialDapps: blockchainInteraction.isEnabled ? (essentialDappsConfig || undefined) : undefined, + essentialDappsAdEnabled, + titles: { ...defaultTitles, ...customTitles }, }; if (configUrl) { diff --git a/configs/envs/.env.eth b/configs/envs/.env.eth index 69eaa25ea6..91b776c397 100644 --- a/configs/envs/.env.eth +++ b/configs/envs/.env.eth @@ -39,11 +39,11 @@ NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap'] NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=

Launch your own fully functioning blockchain explorer in minutes. Deploy now

-NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/0xdeval/1a7395339d20b603b9c1d0ee929f23dc/raw/55e2eebef3ba3ef064842d15555b59d5ba8cbcc7/badges-banner.html -NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://badges.blockscout.com/badges-list?utm_source=blockscout-explorer&utm_medium=marketplace-banner +NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/4888339a781c8384267bf4f37f33a2fc/raw/807c66bb2e4e7cd341309035984a1f2458d7e160/revokescout_banner.html +NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://eth.blockscout.com/apps/revokescout?chainId=1 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json NEXT_PUBLIC_MARKETPLACE_ENABLED=true -# NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG={'swap': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '1923', '42793', '59144'], 'fee': '0.004', 'integrator': 'blockscout'}, 'multisend': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '59144', '7000'], 'posthogKey': 'phc_7O4WGsecqqDO1PeaKayHAxUWN1PjheOmQCiDxEMcmkx', 'posthogHost': 'https://us.i.posthog.com'}} +NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG={'swap': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '1923', '42793', '59144'], 'fee': '0.004', 'integrator': 'blockscout'}, 'multisend': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '59144', '7000'], 'posthogKey': 'phc_7O4WGsecqqDO1PeaKayHAxUWN1PjheOmQCiDxEMcmkx', 'posthogHost': 'https://us.i.posthog.com'}} NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com @@ -77,4 +77,4 @@ NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://storage.googleapis.com/opensea-static/Logomark/Logomark-Blue.svg'},{'name':'Rarible','collection_url':'https://rarible.com/collection/{hash}/items','instance_url':'https://rarible.com/token/{hash}:{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/rarible.png'},{'name':'Blur','collection_url':'https://blur.io/eth/collection/{hash}','instance_url':'https://blur.io/eth/asset/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/blur.png'},{'name':'MagicEden','collection_url':'https://magiceden.io/collections/ethereum/{hash}','instance_url':'https://magiceden.io/item-details/ethereum/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/magiceden.png'}] NEXT_PUBLIC_VIEWS_TOKEN_SCAM_TOGGLE_ENABLED=true NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com -NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address \ No newline at end of file +NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts index fb093ab18d..033a8d1805 100644 --- a/deploy/tools/envs-validator/schema.ts +++ b/deploy/tools/envs-validator/schema.ts @@ -18,7 +18,7 @@ import type { DeFiDropdownItem } from '../../../types/client/deFiDropdown'; import type { GasRefuelProviderConfig } from '../../../types/client/gasRefuelProviderConfig'; import { GAS_UNITS } from '../../../types/client/gasTracker'; import type { GasUnit } from '../../../types/client/gasTracker'; -import type { MarketplaceAppBase, MarketplaceAppSocialInfo, EssentialDappsConfig } from '../../../types/client/marketplace'; +import type { MarketplaceAppBase, MarketplaceAppSocialInfo, EssentialDappsConfig, MarketplaceTitles } from '../../../types/client/marketplace'; import type { MultichainProviderConfig } from '../../../types/client/multichainProviderConfig'; import type { ApiDocsTabId } from '../../../types/views/apiDocs'; import { API_DOCS_TABS } from '../../../types/views/apiDocs'; @@ -216,6 +216,38 @@ const marketplaceSchema = yup value => value === undefined, ), }), + NEXT_PUBLIC_MARKETPLACE_TITLES: yup + .mixed() + .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', { + is: true, + then: (schema) => schema.test('shape', 'Invalid schema were provided for NEXT_PUBLIC_MARKETPLACE_TITLES', (data) => { + const isUndefined = data === undefined; + const valueSchema = yup.object().transform(replaceQuotes).json().shape({ + menu_item: yup.string(), + title: yup.string(), + subtitle_essential_dapps: yup.string(), + subtitle_list: yup.string(), + }); + + return isUndefined || valueSchema.isValidSync(data); + }), + otherwise: (schema) => schema.test( + 'not-exist', + 'NEXT_PUBLIC_MARKETPLACE_TITLES cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED', + value => value === undefined, + ), + }), + NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_AD_ENABLED: yup + .boolean() + .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', { + is: true, + then: (schema) => schema, + otherwise: (schema) => schema.test( + 'not-exist', + 'NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_AD_ENABLED cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED', + value => value === undefined, + ), + }), }); const beaconChainSchema = yup diff --git a/deploy/tools/envs-validator/test/.env.marketplace b/deploy/tools/envs-validator/test/.env.marketplace index 4b1eadf02b..eefabb2521 100644 --- a/deploy/tools/envs-validator/test/.env.marketplace +++ b/deploy/tools/envs-validator/test/.env.marketplace @@ -8,3 +8,5 @@ NEXT_PUBLIC_MARKETPLACE_FEATURED_APP=aave NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/36f779fd7d74877b57ec7a25a9a3a6c9/raw/746a8a59454c0537235ee44616c4690ce3bbf3c8/banner.html NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://www.basename.app NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG={'swap': {'chains': ['1', '10', '100', '11155111'], 'fee': '0.004', 'integrator': 'blockscout'}, 'revoke': {'chains': ['1', '10', '100', '11155111']}, 'multisend': {'chains': ['1', '10', '100', '11155111'], 'posthogKey': '123', 'posthogHost': 'https://example.com'}} +NEXT_PUBLIC_MARKETPLACE_TITLES={'menu_item': 'Dapps', 'title': 'Dappscout'} +NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_AD_ENABLED=true diff --git a/docs/ENVS.md b/docs/ENVS.md index 6154aeb215..3ab1c2332a 100644 --- a/docs/ENVS.md +++ b/docs/ENVS.md @@ -587,6 +587,8 @@ Ads are enabled by default on all self-hosted instances. If you would like to di | NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL | `string` | URL of the page the banner leads to | - | - | `https://example.com` | v1.29.0+ | | NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL | `string` | URL of the file (`.json` format only) which contains the list of The Graph links to be displayed on the Marketplace page | - | - | `https://example.com/graph_links.json` | v1.36.0+ | | NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG | `EssentialDappsConfig`, see details [below](#essential-dapps-configuration-properties) | Configuration of the essential dapps to be displayed on the Marketplace page | - | - | `{'swap': {'chains': ['1', '10', '100', '11155111'], 'fee': '0.004', 'integrator': 'blockscout'}}` | v2.4.0+ | +| NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_AD_ENABLED | `boolean` | The flag enables ad in essential dapps. *Feature is enabled by default; pass `false` to disable it.* | - | `true` | `false` | upcoming | +| NEXT_PUBLIC_MARKETPLACE_TITLES | `{ entity_name?: string; menu_item?: string; title?: string; subtitle_essential_dapps?: string; subtitle_list?: string }` | Used to override default titles of the Marketplace and dapps | - | `{ 'entity_name': 'Dapp', 'menu_item': 'Dapps', 'title': 'Dappscout', 'subtitle_essential_dapps': 'Essential dapps', 'subtitle_list': 'Explore dapps' }` | `{ 'entity_name': 'App', 'menu_item': 'Apps', 'title': 'Marketplace', 'subtitle_essential_dapps': 'Essential apps', 'subtitle_list': 'Explore apps' }` | upcoming | #### Marketplace app configuration properties @@ -887,7 +889,7 @@ If the feature is enabled, a single button or a dropdown (if more than 1 item is | Variable | Type| Description | Compulsoriness | Default value | Example value | Version | | --- | --- | --- | --- | --- | --- | --- | -| NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS | `[{ text: string; icon: string; dappId?: string, url?: string }]` | An array of dropdown items containing the button text, icon name and dappId in DAppscout or an external url | - | - | `[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]` | v1.31.0+ | +| NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS | `[{ text: string; icon: string; dappId?: string, url?: string }]` | An array of dropdown items containing the button text, icon name and dappId in Dappscout or an external url | - | - | `[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]` | v1.31.0+ |   diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx index 5a8883fd46..1ee38a5fb3 100644 --- a/lib/hooks/useNavItems.tsx +++ b/lib/hooks/useNavItems.tsx @@ -6,6 +6,8 @@ import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/naviga import config from 'configs/app'; import { rightLineArrow } from 'toolkit/utils/htmlEntities'; +const marketplaceFeature = config.features.marketplace; + interface ReturnType { mainNavItems: Array; accountNavItems: Array; @@ -346,8 +348,8 @@ export default function useNavItems(): ReturnType { isActive: tokensNavItems.flat().some(item => isInternalItem(item) && item.isActive), subItems: tokensNavItems, }, - config.features.marketplace.isEnabled ? { - text: 'DApps', + marketplaceFeature.isEnabled ? { + text: marketplaceFeature.titles.menu_item, nextRoute: { pathname: '/apps' as const }, icon: 'apps', isActive: pathname.startsWith('/app') || pathname.startsWith('/essential-dapps'), diff --git a/lib/metadata/templates/title.ts b/lib/metadata/templates/title.ts index e3572241a5..f47f45e21a 100644 --- a/lib/metadata/templates/title.ts +++ b/lib/metadata/templates/title.ts @@ -1,7 +1,11 @@ +import { getFeaturePayload } from 'configs/app/features/types'; + import type { Route } from 'nextjs-routes'; import config from 'configs/app'; +const dappEntityName = (getFeaturePayload(config.features.marketplace)?.titles.entity_name ?? '').toLowerCase(); + const TEMPLATE_MAP: Record = { '/': '%network_name% blockchain explorer - View %network_name% stats', '/txs': '%network_name% transactions - %network_name% explorer', @@ -21,8 +25,8 @@ const TEMPLATE_MAP: Record = { '/tokens': 'Tokens list - %network_name% explorer', '/token/[hash]': '%network_name% token details', '/token/[hash]/instance/[id]': '%network_name% NFT instance', - '/apps': '%network_name% DApps - Explore top apps', - '/apps/[id]': '%network_name% marketplace app', + '/apps': `%network_name% ${ dappEntityName }s - Explore top ${ dappEntityName }s`, + '/apps/[id]': `%network_name% marketplace ${ dappEntityName }`, '/essential-dapps/[id]': '%id_cap%', '/stats': '%network_name% stats - %network_name% network insights', '/stats/[id]': '%network_name% stats - %id% chart', diff --git a/types/client/marketplace.ts b/types/client/marketplace.ts index 76c2f77cf3..a18658621c 100644 --- a/types/client/marketplace.ts +++ b/types/client/marketplace.ts @@ -49,3 +49,11 @@ export type EssentialDappsConfig = { posthogHost?: string; }; }; + +export interface MarketplaceTitles { + entity_name: string; + menu_item: string; + title: string; + subtitle_essential_dapps: string; + subtitle_list: string; +} diff --git a/ui/marketplace/Banner.tsx b/ui/marketplace/Banner.tsx index 2f7d9f9c46..ac6dec09ce 100644 --- a/ui/marketplace/Banner.tsx +++ b/ui/marketplace/Banner.tsx @@ -1,10 +1,13 @@ +import { Flex } from '@chakra-ui/react'; import type { MouseEvent } from 'react'; import React from 'react'; import type { MarketplaceApp } from 'types/client/marketplace'; import config from 'configs/app'; +import useIsMobile from 'lib/hooks/useIsMobile'; import { apps as appsMock } from 'mocks/apps/apps'; +import AdBanner from 'ui/shared/ad/AdBanner'; import FeaturedApp from './Banner/FeaturedApp'; import IframeBanner from './Banner/IframeBanner'; @@ -21,17 +24,21 @@ type BannerProps = { }; const Banner = ({ apps = [], favoriteApps, isLoading, onInfoClick, onFavoriteClick, onAppClick }: BannerProps) => { + const isMobile = useIsMobile(); + if (!feature.isEnabled) { return null; } + let content = null; + if (feature.featuredApp) { const app = apps.find(app => app.id === feature.featuredApp); const isFavorite = favoriteApps.includes(feature.featuredApp); if (!isLoading && !app) { return null; } - return ( + content = ( ); } else if (feature.banner) { - return ; + content = ; + } + + if (!content) { + return null; } - return null; + return ( + + { content } + { !isMobile && ( + + ) } + + ); }; export default Banner; diff --git a/ui/marketplace/Banner/FeaturedApp.tsx b/ui/marketplace/Banner/FeaturedApp.tsx index beba1d580d..5bd21ea2c8 100644 --- a/ui/marketplace/Banner/FeaturedApp.tsx +++ b/ui/marketplace/Banner/FeaturedApp.tsx @@ -4,17 +4,17 @@ import React, { useCallback } from 'react'; import type { MarketplaceApp } from 'types/client/marketplace'; -import { route } from 'nextjs-routes'; - import useIsMobile from 'lib/hooks/useIsMobile'; import * as mixpanel from 'lib/mixpanel/index'; import { useColorModeValue } from 'toolkit/chakra/color-mode'; +import { Heading } from 'toolkit/chakra/heading'; import { IconButton } from 'toolkit/chakra/icon-button'; import { Image } from 'toolkit/chakra/image'; -import { Link, LinkBox, LinkOverlay } from 'toolkit/chakra/link'; +import { Link, LinkBox } from 'toolkit/chakra/link'; import { Skeleton } from 'toolkit/chakra/skeleton'; import FavoriteIcon from '../FavoriteIcon'; +import MarketplaceAppCardLink from '../MarketplaceAppCardLink'; import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon'; import FeaturedAppMobile from './FeaturedAppMobile'; @@ -63,18 +63,16 @@ const FeaturedApp = ({ return ( - + - - - { title } - + + + + diff --git a/ui/marketplace/Banner/FeaturedAppMobile.tsx b/ui/marketplace/Banner/FeaturedAppMobile.tsx index a6f8e1c2a9..e78e8cfa5d 100644 --- a/ui/marketplace/Banner/FeaturedAppMobile.tsx +++ b/ui/marketplace/Banner/FeaturedAppMobile.tsx @@ -5,6 +5,7 @@ import React from 'react'; import type { MarketplaceApp } from 'types/client/marketplace'; import { useColorModeValue } from 'toolkit/chakra/color-mode'; +import { Heading } from 'toolkit/chakra/heading'; import { IconButton } from 'toolkit/chakra/icon-button'; import { Image } from 'toolkit/chakra/image'; import { Link, LinkBox } from 'toolkit/chakra/link'; @@ -47,8 +48,7 @@ const FeaturedAppMobile = ({ borderRadius="md" padding={{ base: 3, sm: '20px' }} role="group" - background={{ base: 'purple.50', sm: 'whiteAlpha.100' }} - mt={ 6 } + background={{ _light: 'purple.50', _dark: 'whiteAlpha.100' }} > - + + + diff --git a/ui/marketplace/Banner/IframeBanner.tsx b/ui/marketplace/Banner/IframeBanner.tsx index fc2ec4e70f..48b27e9f91 100644 --- a/ui/marketplace/Banner/IframeBanner.tsx +++ b/ui/marketplace/Banner/IframeBanner.tsx @@ -20,11 +20,9 @@ const IframeBanner = ({ contentUrl, linkUrl }: { contentUrl: string; linkUrl: st { if (!canRate) { - return <>Please log in to Blockscout to rate this DApp.; + return <>Please log in to Blockscout to rate this { (getFeaturePayload(config.features.marketplace)?.titles.entity_name ?? '').toLowerCase() }.; } return <>Ratings come from verified users.
Click here to rate!; }; diff --git a/ui/marketplace/essentialDapps/multisend/Multisend.pw.tsx b/ui/marketplace/essentialDapps/multisend/Multisend.pw.tsx index b756ad1756..951519b4df 100644 --- a/ui/marketplace/essentialDapps/multisend/Multisend.pw.tsx +++ b/ui/marketplace/essentialDapps/multisend/Multisend.pw.tsx @@ -2,6 +2,7 @@ import React from 'react'; import type { TestFnArgs } from 'playwright/lib'; import { test, expect } from 'playwright/lib'; +import * as pwConfig from 'playwright/utils/config'; import Multisend from './Multisend'; @@ -9,7 +10,7 @@ const ESSENTIAL_DAPPS_CONFIG = JSON.stringify({ multisend: { chains: [ '1' ] }, }); -test('base view +@dark-mode +@mobile', async({ render, mockEnvs }: TestFnArgs) => { +test('base view +@dark-mode +@mobile', async({ render, mockEnvs, page }: TestFnArgs) => { await mockEnvs([ [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ], [ 'NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG', ESSENTIAL_DAPPS_CONFIG ], @@ -17,5 +18,8 @@ test('base view +@dark-mode +@mobile', async({ render, mockEnvs }: TestFnArgs) = const component = await render(); - await expect(component).toHaveScreenshot(); + await expect(component).toHaveScreenshot({ + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, + }); }); diff --git a/ui/marketplace/essentialDapps/multisend/Multisend.tsx b/ui/marketplace/essentialDapps/multisend/Multisend.tsx index 7a42e254af..b0b565d087 100644 --- a/ui/marketplace/essentialDapps/multisend/Multisend.tsx +++ b/ui/marketplace/essentialDapps/multisend/Multisend.tsx @@ -2,14 +2,19 @@ import { Box } from '@chakra-ui/react'; import { MultisenderWidget } from '@multisender.app/multisender-react-widget'; import React from 'react'; +import { getFeaturePayload } from 'configs/app/features/types'; + import config from 'configs/app'; import essentialDappsChainsConfig from 'configs/essential-dapps-chains'; +import useIsMobile from 'lib/hooks/useIsMobile'; +import AdBanner from 'ui/shared/ad/AdBanner'; -const feature = config.features.marketplace; -const dappConfig = feature.isEnabled ? feature.essentialDapps?.multisend : undefined; +const feature = getFeaturePayload(config.features.marketplace); +const dappConfig = feature?.essentialDapps?.multisend; const Container = ({ children }: { children: React.ReactNode }) => ( { }) || []); const Multisend = () => { + const isMobile = useIsMobile(); + return ( - - - + <> + + + + { (feature?.essentialDappsAdEnabled && !isMobile) && ( + + ) } + ); }; diff --git a/ui/marketplace/essentialDapps/multisend/__screenshots__/Multisend.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/marketplace/essentialDapps/multisend/__screenshots__/Multisend.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png index 6c2d3144ae..bcb3865706 100644 Binary files a/ui/marketplace/essentialDapps/multisend/__screenshots__/Multisend.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/marketplace/essentialDapps/multisend/__screenshots__/Multisend.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ diff --git a/ui/marketplace/essentialDapps/multisend/__screenshots__/Multisend.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/marketplace/essentialDapps/multisend/__screenshots__/Multisend.pw.tsx_default_base-view-dark-mode-mobile-1.png index 2845a6f267..b9acc42cc3 100644 Binary files a/ui/marketplace/essentialDapps/multisend/__screenshots__/Multisend.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/marketplace/essentialDapps/multisend/__screenshots__/Multisend.pw.tsx_default_base-view-dark-mode-mobile-1.png differ diff --git a/ui/marketplace/essentialDapps/swap/Swap.tsx b/ui/marketplace/essentialDapps/swap/Swap.tsx index aaee4f2ca1..9cff54ace4 100644 --- a/ui/marketplace/essentialDapps/swap/Swap.tsx +++ b/ui/marketplace/essentialDapps/swap/Swap.tsx @@ -1,18 +1,22 @@ -import { Box, useToken } from '@chakra-ui/react'; +import { Box, Flex, useToken } from '@chakra-ui/react'; import type { RouteExecutionUpdate, WidgetConfig } from '@lifi/widget'; import { LiFiWidget, useWidgetEvents, WidgetEvent } from '@lifi/widget'; import { useEffect, useMemo, useRef } from 'react'; +import { getFeaturePayload } from 'configs/app/features/types'; + import config from 'configs/app'; import essentialDappsChainsConfig from 'configs/essential-dapps-chains'; +import useIsMobile from 'lib/hooks/useIsMobile'; import useRewardsActivity from 'lib/hooks/useRewardsActivity'; import * as mixpanel from 'lib/mixpanel/index'; import useWeb3Wallet from 'lib/web3/useWallet'; import { useColorMode } from 'toolkit/chakra/color-mode'; import { BODY_TYPEFACE } from 'toolkit/theme/foundations/typography'; +import AdBanner from 'ui/shared/ad/AdBanner'; -const feature = config.features.marketplace; -const dappConfig = feature.isEnabled ? feature.essentialDapps?.swap : undefined; +const feature = getFeaturePayload(config.features.marketplace); +const dappConfig = feature?.essentialDapps?.swap; const defaultChainId = Number( dappConfig?.chains.includes(config.chain.id as string) ? @@ -84,6 +88,7 @@ const Widget = () => { }; const Swap = () => { + const isMobile = useIsMobile(); const { trackTransaction, trackTransactionConfirm } = useRewardsActivity(); const widgetEvents = useWidgetEvents(); const eventParams = useRef<{ @@ -128,7 +133,20 @@ const Swap = () => { return () => widgetEvents.all.clear(); }, [ widgetEvents, trackTransaction, trackTransactionConfirm ]); - return ; + return ( + + + { (feature?.essentialDappsAdEnabled && !isMobile) && ( + + ) } + + ); }; export default Swap; diff --git a/ui/pages/Marketplace.pw.tsx b/ui/pages/Marketplace.pw.tsx index c0fc848ba3..2919007c67 100644 --- a/ui/pages/Marketplace.pw.tsx +++ b/ui/pages/Marketplace.pw.tsx @@ -4,6 +4,7 @@ import React from 'react'; import config from 'configs/app'; import { apps as appsMock } from 'mocks/apps/apps'; import { test, expect, devices } from 'playwright/lib'; +import * as pwConfig from 'playwright/utils/config'; import Marketplace from './Marketplace'; @@ -40,10 +41,13 @@ test('with featured app +@dark-mode', async({ render, mockEnvs, page }) => { const component = await render(); - await expect(component).toHaveScreenshot(); + await expect(component).toHaveScreenshot({ + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, + }); }); -test('with banner +@dark-mode', async({ render, mockEnvs, mockConfigResponse }) => { +test('with banner +@dark-mode', async({ render, mockEnvs, mockConfigResponse, page }) => { await mockEnvs([ [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL ], [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', MARKETPLACE_BANNER_LINK_URL ], @@ -51,10 +55,13 @@ test('with banner +@dark-mode', async({ render, mockEnvs, mockConfigResponse }) await mockConfigResponse('MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL, './playwright/mocks/page.html', true); const component = await render(); - await expect(component).toHaveScreenshot(); + await expect(component).toHaveScreenshot({ + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, + }); }); -test('with essential dapps +@dark-mode', async({ render, mockEnvs, mockConfigResponse }) => { +test('with essential dapps +@dark-mode', async({ render, mockEnvs, mockConfigResponse, page }) => { await mockEnvs([ [ 'NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG', ESSENTIAL_DAPPS_CONFIG ], [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL ], @@ -62,7 +69,10 @@ test('with essential dapps +@dark-mode', async({ render, mockEnvs, mockConfigRes ]); await mockConfigResponse('MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL, './playwright/mocks/page.html', true); const component = await render(); - await expect(component).toHaveScreenshot(); + await expect(component).toHaveScreenshot({ + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, + }); }); // I had a memory error while running tests in GH actions diff --git a/ui/pages/Marketplace.tsx b/ui/pages/Marketplace.tsx index e864cc5b70..009e36c5c4 100644 --- a/ui/pages/Marketplace.tsx +++ b/ui/pages/Marketplace.tsx @@ -143,7 +143,7 @@ const Marketplace = () => { return ( <> 1) ? ( @@ -188,9 +188,13 @@ const Marketplace = () => { { feature.essentialDapps && ( <> - Essential dapps + + { feature.titles.subtitle_essential_dapps } + - Explore dapps + + { feature.titles.subtitle_list } + ) } diff --git a/ui/pages/MarketplaceEssentialDapp.tsx b/ui/pages/MarketplaceEssentialDapp.tsx index 3acd14b590..a63f1ff258 100644 --- a/ui/pages/MarketplaceEssentialDapp.tsx +++ b/ui/pages/MarketplaceEssentialDapp.tsx @@ -1,3 +1,4 @@ +import { Flex } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -42,10 +43,10 @@ const EssentialDapp = () => { } return ( - <> + { content } - + ); }; diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index bca35534c8..5a31a6c5e3 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png index 2e4e14d19c..91b2745660 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-essential-dapps-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-essential-dapps-dark-mode-1.png index da92569db3..f97c8938b2 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-essential-dapps-dark-mode-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-essential-dapps-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png index ae333db653..f66aa9fd7e 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png index 76ab81b432..e59f746029 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png index f66738e237..4e42ff0269 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png index f989818ac9..d32a0af4a4 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-essential-dapps-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-essential-dapps-1.png index 3d67da5daa..bd3dd03596 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-essential-dapps-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-essential-dapps-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png index 80a603e5aa..7bdbe6d389 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png index c9156bf705..314ba79399 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-essential-dapps-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-essential-dapps-dark-mode-1.png index 19a04150b3..0c2f3956a1 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-essential-dapps-dark-mode-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-essential-dapps-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png index 6cb4975210..8b5d2c84ce 100644 Binary files a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png index f2aef217db..93502b7af2 100644 Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png index 1ddd881e63..45914e8557 100644 Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png differ diff --git a/ui/shared/search/utils.ts b/ui/shared/search/utils.ts index 33af178742..e2607e9fb3 100644 --- a/ui/shared/search/utils.ts +++ b/ui/shared/search/utils.ts @@ -1,4 +1,5 @@ import type { CctxListItem } from '@blockscout/zetachain-cctx-types'; +import { getFeaturePayload } from 'configs/app/features/types'; import type { MarketplaceApp } from 'types/client/marketplace'; import type { SearchResultItem } from 'types/client/search'; @@ -6,6 +7,8 @@ import config from 'configs/app'; const nameServicesFeature = config.features.nameServices; +const dappEntityName = getFeaturePayload(config.features.marketplace)?.titles.entity_name ?? ''; + export type ApiCategory = 'token' | 'nft' | @@ -31,7 +34,6 @@ export type SearchResultAppItem = { }; export const searchCategories: Array<{ id: Category; title: string; tabTitle: string }> = [ - { id: 'app', title: 'DApps', tabTitle: 'DApps' }, { id: 'token', title: `Tokens (${ config.chain.tokenStandard }-20)`, tabTitle: 'Tokens' }, { id: 'nft', title: `NFTs (${ config.chain.tokenStandard }-721 & 1155)`, tabTitle: 'NFTs' }, { id: 'address', title: 'Addresses', tabTitle: 'Addresses' }, @@ -50,6 +52,10 @@ if (config.features.dataAvailability.isEnabled) { searchCategories.push({ id: 'blob', title: 'Blobs', tabTitle: 'Blobs' }); } +if (config.features.marketplace.isEnabled) { + searchCategories.unshift({ id: 'app', title: `${ dappEntityName }s`, tabTitle: `${ dappEntityName }s` }); +} + if (nameServicesFeature.isEnabled && nameServicesFeature.ens.isEnabled) { searchCategories.unshift({ id: 'domain', title: 'Names', tabTitle: 'Names' }); } @@ -59,7 +65,7 @@ if (nameServicesFeature.isEnabled && nameServicesFeature.clusters.isEnabled) { } export const searchItemTitles: Record = { - app: { itemTitle: 'DApp', itemTitleShort: 'App' }, + app: { itemTitle: dappEntityName, itemTitleShort: dappEntityName }, domain: { itemTitle: 'Name', itemTitleShort: 'Name' }, cluster: { itemTitle: 'Cluster', itemTitleShort: 'Cluster' }, token: { itemTitle: 'Token', itemTitleShort: 'Token' }, diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png index ebe9d534f6..4527fb9499 100644 Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png differ diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png index b32651f76c..8a9511d075 100644 Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png differ diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png index ced3b51fe2..cd54e30c6a 100644 Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png differ diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png index 452a002fb3..e05cebedd6 100644 Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png differ diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-image-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-image-1.png index d81e16b984..d15a8b5ae7 100644 Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-image-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-image-1.png differ diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-text-dark-mode-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-text-dark-mode-1.png index 99e7fcd02e..67a990deac 100644 Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-text-dark-mode-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index d08567de9c..dc9efc5b7c 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png index f1287db300..a09c1a9a88 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png index 7cf34b109a..65b29acafa 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png index 486a51e298..2c8aa7f985 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png index 1eed1b5b6c..83bf72d0d1 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-with-tooltip-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-with-tooltip-1.png index 843a70ff42..b54173212a 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-with-tooltip-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-with-tooltip-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png index 2de27a6cd2..019fe05a64 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-with-tooltip-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-with-tooltip-1.png index dd9a2b0b60..6e2ff1d23f 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-with-tooltip-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-with-tooltip-1.png differ diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx index c695c64ce2..b67b12689b 100644 --- a/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx +++ b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx @@ -104,7 +104,7 @@ test.describe('with tooltips', () => { await component.locator('header').hover(); await page.locator('svg[aria-label="Expand/Collapse menu"]').click(); - await page.locator('a[aria-label="DApps link"]').hover(); + await page.locator('a[aria-label="Dapps link"]').hover(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png index b54517102c..e8f5c62017 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png index b54517102c..e8f5c62017 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png index 93528dd266..900d1118f5 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-xl-screen-dark-mode-1.png index 09481be66a..905087488b 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-xl-screen-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png index fdfc26094f..771a26e917 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png index fdfc26094f..771a26e917 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png index d3ecc1b69d..d7aa9c93c9 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-xl-screen-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-xl-screen-1.png index fdd2e75d8e..f104117327 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-xl-screen-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-xl-screen-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-xl-screen-dark-mode-1.png index 521d563454..bc6770e0ae 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-xl-screen-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png index 40e8ac9d7f..6f9f595509 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png index 117099f3a7..a87dca182a 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png differ diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_with-apps-default-view-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_with-apps-default-view-1.png index 2431c225d7..afce7a19ef 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_with-apps-default-view-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_with-apps-default-view-1.png differ diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_with-apps-default-view-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_with-apps-default-view-1.png index d4941b7bbe..f3510dd24a 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_with-apps-default-view-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_with-apps-default-view-1.png differ