diff --git a/configs/app/features/multichainButton.ts b/configs/app/features/multichainButton.ts index d513595577..47b1433d05 100644 --- a/configs/app/features/multichainButton.ts +++ b/configs/app/features/multichainButton.ts @@ -4,19 +4,19 @@ import type { MultichainProviderConfig } from 'types/client/multichainProviderCo import { getEnvValue, parseEnvJson } from '../utils'; import marketplace from './marketplace'; -const value = parseEnvJson(getEnvValue('NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG')); +const value = parseEnvJson(getEnvValue('NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG')); -const title = 'Multichain button'; +const title = 'Multichain balance'; -const config: Feature<{name: string; logoUrl?: string; url_template: string; dapp_id?: string }> = (() => { +const config: Feature<{name: string; logoUrl?: string; urlTemplate: string; dappId?: string }> = (() => { if (value) { return Object.freeze({ title, - isEnabled: true as const, + isEnabled: true, name: value.name, logoUrl: value.logo, - url_template: value.url_template, - dapp_id: marketplace.isEnabled ? value.dapp_id : undefined, + urlTemplate: value.url_template, + dappId: marketplace.isEnabled ? value.dapp_id : undefined, }); } diff --git a/configs/envs/.env.eth b/configs/envs/.env.eth index 9ddabdbc7b..59aaa0a2b1 100644 --- a/configs/envs/.env.eth +++ b/configs/envs/.env.eth @@ -54,11 +54,10 @@ NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKj NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json NEXT_PUBLIC_MARKETPLACE_FEATURED_APP=gearbox-protocol NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true -NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG={'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'} +NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'} #meta NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED=true -NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts index 01944b0661..e221c5af15 100644 --- a/deploy/tools/envs-validator/schema.ts +++ b/deploy/tools/envs-validator/schema.ts @@ -621,9 +621,9 @@ const schema = yup NEXT_PUBLIC_HAS_USER_OPS: yup.boolean(), NEXT_PUBLIC_METASUITES_ENABLED: yup.boolean(), NEXT_PUBLIC_SWAP_BUTTON_URL: yup.string(), - NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG: yup + NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG: yup .mixed() - .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG, it should have name and url url_template', (data) => { + .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG, it should have name and url template', (data) => { const isUndefined = data === undefined; const valueSchema = yup.object().transform(replaceQuotes).json().shape({ name: yup.string().required(), diff --git a/deploy/tools/envs-validator/test/.env.base b/deploy/tools/envs-validator/test/.env.base index 7b63a1aaac..4d40f23db5 100644 --- a/deploy/tools/envs-validator/test/.env.base +++ b/deploy/tools/envs-validator/test/.env.base @@ -74,5 +74,5 @@ NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=false NEXT_PUBLIC_WEB3_WALLETS=['coinbase','metamask','token_pocket'] NEXT_PUBLIC_SWAP_BUTTON_URL=uniswap NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=stability -NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG={'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'} +NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'} diff --git a/docs/ENVS.md b/docs/ENVS.md index 1a2ec039d3..92c933cca8 100644 --- a/docs/ENVS.md +++ b/docs/ENVS.md @@ -686,7 +686,7 @@ If the feature is enabled, a Multichain balance button will be displayed on the | Variable | Type| Description | Compulsoriness | Default value | Example value | | --- | --- | --- | --- | --- | --- | -| NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG | `{ name: string; url_template: string; dapp_id?: string; logo?: string }` | Multichain portfolio application config See [below](#multichain-button-configuration-properties) | - | - | `{ name: 'zerion', url_template: 'https://app.zerion.io/{address}/overview', logo: 'https://example.com/icon.svg'` | +| NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG | `{ name: string; url_template: string; dapp_id?: string; logo?: string }` | Multichain portfolio application config See [below](#multichain-button-configuration-properties) | - | - | `{ name: 'zerion', url_template: 'https://app.zerion.io/{address}/overview', logo: 'https://example.com/icon.svg'` |   diff --git a/ui/address/details/AddressNetWorth.pw.tsx b/ui/address/details/AddressNetWorth.pw.tsx index ea955c8091..f0aea8c36b 100644 --- a/ui/address/details/AddressNetWorth.pw.tsx +++ b/ui/address/details/AddressNetWorth.pw.tsx @@ -3,7 +3,6 @@ import React from 'react'; import * as addressMock from 'mocks/address/address'; import * as tokensMock from 'mocks/address/tokens'; import { test, expect } from 'playwright/lib'; -import TestApp from 'playwright/TestApp'; import AddressNetWorth from './AddressNetWorth'; @@ -17,42 +16,32 @@ test.beforeEach(async({ mockApiResponse }) => { await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } }); }); -test('base view', async({ mount }) => { - const component = await mount( - - - , - ); +test('base view', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('with multichain button internal +@dark-mode', async({ mount, mockEnvs, mockAssetResponse }) => { +test('with multichain button internal +@dark-mode', async({ render, mockEnvs, mockAssetResponse }) => { await mockEnvs([ - [ 'NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG', `{"name": "duck", "dapp_id": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}` ], + [ + 'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG', + `{"name": "duck", "dapp_id": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}` ], ]); await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg'); - const component = await mount( - - - , - ); + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('with multichain button external', async({ mount, mockEnvs, mockAssetResponse }) => { +test('with multichain button external', async({ render, mockEnvs, mockAssetResponse }) => { await mockEnvs([ - [ 'NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG', `{"name": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}` ], + [ 'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG', `{"name": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}` ], ]); await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg'); - const component = await mount( - - - , - ); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/address/details/AddressNetWorth.tsx b/ui/address/details/AddressNetWorth.tsx index 10ef92febb..b7e9468143 100644 --- a/ui/address/details/AddressNetWorth.tsx +++ b/ui/address/details/AddressNetWorth.tsx @@ -66,34 +66,35 @@ const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => { onClick: onMultichainClick, }; - const portfolioUrlString = multichainFeature.url_template.replace(TEMPLATE_ADDRESS, addressHash); - const portfolioUrl = new URL(portfolioUrlString); - portfolioUrl.searchParams.append('utm_source', 'blockscout'); - portfolioUrl.searchParams.append('utm_medium', 'address'); + try { + const portfolioUrlString = multichainFeature.urlTemplate.replace(TEMPLATE_ADDRESS, addressHash); + const portfolioUrl = new URL(portfolioUrlString); + portfolioUrl.searchParams.append('utm_source', 'blockscout'); + portfolioUrl.searchParams.append('utm_medium', 'address'); + const dappId = multichainFeature.dappId; + multichainItem = ( + <> + + Multichain + { typeof dappId === 'string' ? ( + + { buttonContent } + + ) : ( + + { buttonContent } + + ) } + + ); + } catch (error) {} - const dappId = multichainFeature.dapp_id; - - multichainItem = ( - <> - - Multichain - { typeof dappId === 'string' ? ( - - { buttonContent } - - ) : ( - - { buttonContent } - - ) } - - ); } return (