review fixes

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<MultichainProviderConfig>(getEnvValue('NEXT_PUBLIC_MULTICHAIN_PROVIDER_CONFIG'));
+const value = parseEnvJson<MultichainProviderConfig>(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,
     });
   }
 

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
 

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<MultichainProviderConfig>().transform(replaceQuotes).json().shape({
           name: yup.string().required(),

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'}
 

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'` |
 
  
 

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(
-    <TestApp>
-      <AddressNetWorth addressData={ addressMock.token } addressHash={ ADDRESS_HASH }/>
-    </TestApp>,
-  );
+test('base view', async({ render }) => {
+  const component = await render(<AddressNetWorth addressData={ addressMock.token } addressHash={ ADDRESS_HASH }/>);
 
   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(
-    <TestApp>
-      <AddressNetWorth addressData={ addressMock.token } addressHash={ ADDRESS_HASH }/>
-    </TestApp>,
-  );
+  const component = await render(<AddressNetWorth addressData={ addressMock.token } addressHash={ ADDRESS_HASH }/>);
 
   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(
-    <TestApp>
-      <AddressNetWorth addressData={ addressMock.token } addressHash={ ADDRESS_HASH }/>
-    </TestApp>,
-  );
+  const component = await render(<AddressNetWorth addressData={ addressMock.token } addressHash={ ADDRESS_HASH }/>);
 
   await expect(component).toHaveScreenshot();
 });

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 = (
+        <>
+          <TextSeparator mx={ 3 } color="gray.500"/>
+          <Text mr={ 2 }>Multichain</Text>
+          { typeof dappId === 'string' ? (
+            <LinkInternal
+              href={ route({ pathname: '/apps/[id]', query: { id: dappId, url: portfolioUrl.toString() } }) }
+              { ...linkProps }
+            >
+              { buttonContent }
+            </LinkInternal>
+          ) : (
+            <LinkExternal
+              href={ portfolioUrl.toString() }
+              { ...linkProps }
+            >
+              { buttonContent }
+            </LinkExternal>
+          ) }
+        </>
+      );
+    } catch (error) {}
 
-    const dappId = multichainFeature.dapp_id;
-
-    multichainItem = (
-      <>
-        <TextSeparator mx={ 3 } color="gray.500"/>
-        <Text mr={ 2 }>Multichain</Text>
-        { typeof dappId === 'string' ? (
-          <LinkInternal
-            href={ route({ pathname: '/apps/[id]', query: { id: dappId, url: portfolioUrl.toString() } }) }
-            { ...linkProps }
-          >
-            { buttonContent }
-          </LinkInternal>
-        ) : (
-          <LinkExternal
-            href={ portfolioUrl.toString() }
-            { ...linkProps }
-          >
-            { buttonContent }
-          </LinkExternal>
-        ) }
-      </>
-    );
   }
 
   return (

ui/shared/EntityTags/EntityTagLink.tsx

-import type { LinkProps } from '@chakra-ui/react';
 import React from 'react';
 
 import type { EntityTag } from './types';
@@ -30,7 +29,7 @@ const EntityTagLink = ({ data, children }: Props) => {
     });
   }, [ linkParams?.href, data.slug ]);
 
-  const linkProps: LinkProps = {
+  const linkProps = {
     color: 'inherit',
     display: 'inline-flex',
     overflow: 'hidden',