Skip to content

Commit

Permalink
review fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@isstuev
isstuev committed May 26, 2024
1 parent f7193e9 commit e520e07
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 60 deletions.
12 changes: 6 additions & 6 deletions configs/app/features/multichainButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
}

Expand Down
3 changes: 1 addition & 2 deletions configs/envs/.env.eth
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,10 @@ NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blocksc
NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
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

4 changes: 2 additions & 2 deletions deploy/tools/envs-validator/schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
2 changes: 1 addition & 1 deletion deploy/tools/envs-validator/test/.env.base
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'}

2 changes: 1 addition & 1 deletion docs/ENVS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'` |

&nbsp;

Expand Down
31 changes: 10 additions & 21 deletions ui/address/details/AddressNetWorth.pw.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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();
});
55 changes: 28 additions & 27 deletions ui/address/details/AddressNetWorth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down

0 comments on commit e520e07

Please sign in to comment.