Skip to content

F
frontend
Commit b518b5af authored by tom's avatar tom
Browse files
Options

fix contract verification form test

parent f3f51ee8
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 73 deletions
toolkit/chakra/select.tsx
View file @ b518b5af
......@@ -140,6 +140,8 @@ export const SelectValueText = React.forwardRef<
if (items.length === 1) {
const item = items[0] as SelectOption;
if (!item) return placeholder;
const icon = (() => {
if (item.icon) {
return typeof item.icon === 'string' ? <IconSvg name={ item.icon as IconName } boxSize={ 5 } flexShrink={ 0 }/> : item.icon;
......
ui/contractVerification/ContractVerificationForm.pw.tsx
View file @ b518b5af
......@@ -78,14 +78,12 @@ test('flatten source code method +@dark-mode +@mobile', async({ render, page })
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select license
await component.getByLabel(/contract license/i).focus();
await component.getByLabel(/contract license/i).fill('mit');
await page.getByRole('button', { name: /mit license/i }).click();
await component.locator('button').filter({ hasText: 'Contract license' }).click();
await page.getByRole('option', { name: 'MIT License' }).click();
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('solidity');
await page.getByRole('button', { name: /single file/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Solidity (Single file)' }).click();
await page.getByText(/add contract libraries/i).click();
await page.locator('button[aria-label="add"]').click();
......@@ -97,9 +95,8 @@ test('standard input json method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('solidity');
await page.getByRole('button', { name: /standard json input/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Solidity (Standard JSON input)' }).click();
await expect(component).toHaveScreenshot();
});
......@@ -115,9 +112,8 @@ test.describe('sourcify', () => {
);
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('solidity');
await page.getByRole('button', { name: /sourcify/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Solidity (Sourcify)' }).click();
await page.getByText(/drop files/i).click();
await page.locator('input[name="sources"]').setInputFiles([
......@@ -141,9 +137,8 @@ test.describe('sourcify', () => {
},
});
await component.getByLabel(/contract name/i).focus();
await component.getByLabel(/contract name/i).fill('e');
const contractNameOption = page.getByRole('button', { name: /MockERC20/i });
await component.locator('button').filter({ hasText: 'Contract name*' }).click();
const contractNameOption = page.getByRole('option', { name: 'MockERC20' });
await expect(contractNameOption).toBeVisible();
......@@ -155,9 +150,8 @@ test('multi-part files method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('solidity');
await page.getByRole('button', { name: /multi-part files/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Solidity (Multi-part files)' }).click();
await expect(component).toHaveScreenshot();
});
......@@ -166,9 +160,8 @@ test('vyper contract method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('vyper');
await page.getByRole('button', { name: /contract/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Vyper (Contract)' }).click();
await expect(component).toHaveScreenshot();
});
......@@ -177,9 +170,8 @@ test('vyper multi-part method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('vyper');
await page.getByRole('button', { name: /multi-part files/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Vyper (Multi-part files)' }).click();
await expect(component).toHaveScreenshot();
});
......@@ -188,9 +180,8 @@ test('vyper vyper-standard-input method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('vyper');
await page.getByRole('button', { name: /standard json input/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Vyper (Standard JSON input)' }).click();
await expect(component).toHaveScreenshot();
});
......@@ -199,9 +190,8 @@ test('solidity-hardhat method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('hardhat');
await page.getByRole('button', { name: /hardhat/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Solidity (Hardhat)' }).click();
await expect(component).toHaveScreenshot();
});
......@@ -210,9 +200,8 @@ test('solidity-foundry method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('foundry');
await page.getByRole('button', { name: /foundry/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Solidity (Foundry)' }).click();
await expect(component).toHaveScreenshot();
});
......@@ -241,9 +230,8 @@ test('verification of stylus rust contract', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ stylusRustFormConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
await component.getByLabel(/verification method/i).fill('stylus');
await page.getByRole('button', { name: /stylus/i }).click();
await component.locator('button').filter({ hasText: 'Verification method' }).click();
await page.getByRole('option', { name: 'Stylus (GitHub repository)' }).click();
// check validation of github repository field
const githubRepositoryField = component.getByLabel(/github repository url/i);
......
ui/contractVerification/ContractVerificationForm.tsx
View file @ b518b5af
......@@ -163,13 +163,13 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
'flattened-code': <ContractVerificationFlattenSourceCode config={ config }/>,
'standard-input': <ContractVerificationStandardInput config={ config }/>,
sourcify: <ContractVerificationSourcify/>,
'multi-part': <ContractVerificationMultiPartFile/>,
'multi-part': <ContractVerificationMultiPartFile config={ config }/>,
'vyper-code': <ContractVerificationVyperContract config={ config }/>,
'vyper-multi-part': <ContractVerificationVyperMultiPartFile/>,
'vyper-standard-input': <ContractVerificationVyperStandardInput/>,
'vyper-multi-part': <ContractVerificationVyperMultiPartFile config={ config }/>,
'vyper-standard-input': <ContractVerificationVyperStandardInput config={ config }/>,
'solidity-hardhat': <ContractVerificationSolidityHardhat config={ config }/>,
'solidity-foundry': <ContractVerificationSolidityFoundry/>,
'stylus-github-repository': <ContractVerificationStylusGitHubRepo/>,
'stylus-github-repository': <ContractVerificationStylusGitHubRepo config={ config }/>,
};
}, [ config ]);
const method = watch('method');
......
ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
View file @ b518b5af
import { chakra, Code, createListCollection } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query';
import React from 'react';
import { useFormContext } from 'react-hook-form';
import type { FormFields } from '../types';
import type { SmartContractVerificationConfig } from 'types/client/contract';
import { getResourceKey } from 'lib/api/useApiQuery';
import { Checkbox } from 'toolkit/chakra/checkbox';
import FormFieldSelectAsync from 'ui/shared/forms/fields/FormFieldSelectAsync';
......@@ -17,13 +15,12 @@ const OPTIONS_LIMIT = 50;
interface Props {
isVyper?: boolean;
isStylus?: boolean;
config: SmartContractVerificationConfig;
}
const ContractVerificationFieldCompiler = ({ isVyper, isStylus }: Props) => {
const ContractVerificationFieldCompiler = ({ isVyper, isStylus, config }: Props) => {
const [ isNightly, setIsNightly ] = React.useState(false);
const { formState, getValues, resetField } = useFormContext<FormFields>();
const queryClient = useQueryClient();
const config = queryClient.getQueryData<SmartContractVerificationConfig>(getResourceKey('contract_verification_config'));
const handleCheckboxChange = React.useCallback(() => {
setIsNightly(prev => {
......
ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx
View file @ b518b5af
import { createListCollection } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query';
import React from 'react';
import type { FormFields } from '../types';
import type { SmartContractVerificationConfig } from 'types/client/contract';
import { getResourceKey } from 'lib/api/useApiQuery';
import { Link } from 'toolkit/chakra/link';
import FormFieldSelect from 'ui/shared/forms/fields/FormFieldSelect';
......@@ -13,12 +11,10 @@ import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props {
isVyper?: boolean;
config: SmartContractVerificationConfig;
}
const ContractVerificationFieldEvmVersion = ({ isVyper }: Props) => {
const queryClient = useQueryClient();
const config = queryClient.getQueryData<SmartContractVerificationConfig>(getResourceKey('contract_verification_config'));
const ContractVerificationFieldEvmVersion = ({ isVyper, config }: Props) => {
const collection = React.useMemo(() => {
const items = (isVyper ? config?.vyper_evm_versions : config?.solidity_evm_versions)?.map((option) => ({ label: option, value: option })) || [];
......
ui/contractVerification/fields/ContractVerificationFieldZkCompiler.tsx
View file @ b518b5af
import { Box, createListCollection } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query';
import React from 'react';
import type { FormFields } from '../types';
import type { SmartContractVerificationConfig } from 'types/client/contract';
import { getResourceKey } from 'lib/api/useApiQuery';
import { Link } from 'toolkit/chakra/link';
import FormFieldSelectAsync from 'ui/shared/forms/fields/FormFieldSelectAsync';
......@@ -13,10 +11,7 @@ import ContractVerificationFormRow from '../ContractVerificationFormRow';
const OPTIONS_LIMIT = 50;
const ContractVerificationFieldZkCompiler = () => {
const queryClient = useQueryClient();
const config = queryClient.getQueryData<SmartContractVerificationConfig>(getResourceKey('contract_verification_config'));
const ContractVerificationFieldZkCompiler = ({ config }: { config: SmartContractVerificationConfig }) => {
const versions = React.useMemo(() => (
config?.zk_compiler_versions || []
), [ config?.zk_compiler_versions ]);
......
ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx
View file @ b518b5af
......@@ -17,8 +17,8 @@ const ContractVerificationFlattenSourceCode = ({ config }: { config: SmartContra
<ContractVerificationMethod title="Contract verification via Solidity (flattened source code)">
{ !config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldName/> }
{ config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldIsYul/> }
<ContractVerificationFieldCompiler/>
<ContractVerificationFieldEvmVersion/>
<ContractVerificationFieldCompiler config={ config }/>
<ContractVerificationFieldEvmVersion config={ config }/>
<ContractVerificationFieldOptimization/>
<ContractVerificationFieldCode/>
{ !config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldAutodetectArgs/> }
......
ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx
View file @ b518b5af
import React from 'react';
import type { SmartContractVerificationConfig } from 'types/client/contract';
import ContractVerificationMethod from '../ContractVerificationMethod';
import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
import ContractVerificationFieldEvmVersion from '../fields/ContractVerificationFieldEvmVersion';
......@@ -9,11 +11,11 @@ import ContractVerificationFieldSources from '../fields/ContractVerificationFiel
const FILE_TYPES = [ '.sol' as const, '.yul' as const ];
const ContractVerificationMultiPartFile = () => {
const ContractVerificationMultiPartFile = ({ config }: { config: SmartContractVerificationConfig }) => {
return (
<ContractVerificationMethod title="Contract verification via Solidity (multi-part files)">
<ContractVerificationFieldCompiler/>
<ContractVerificationFieldEvmVersion/>
<ContractVerificationFieldCompiler config={ config }/>
<ContractVerificationFieldEvmVersion config={ config }/>
<ContractVerificationFieldOptimization/>
<ContractVerificationFieldSources
fileTypes={ FILE_TYPES }
......
ui/contractVerification/methods/ContractVerificationStandardInput.tsx
View file @ b518b5af
......@@ -18,8 +18,8 @@ const ContractVerificationStandardInput = ({ config }: { config: SmartContractVe
return (
<ContractVerificationMethod title="Contract verification via Solidity (standard JSON input) " disableScroll={ config.verification_options.length === 1 }>
{ !config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldName/> }
<ContractVerificationFieldCompiler/>
{ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && <ContractVerificationFieldZkCompiler/> }
<ContractVerificationFieldCompiler config={ config }/>
{ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && <ContractVerificationFieldZkCompiler config={ config }/> }
<ContractVerificationFieldSources
fileTypes={ FILE_TYPES }
title="Standard Input JSON"
......
ui/contractVerification/methods/ContractVerificationStylusGitHubRepo.tsx
View file @ b518b5af
import React from 'react';
import type { FormFields } from '../types';
import type { SmartContractVerificationConfig } from 'types/client/contract';
import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
......@@ -10,12 +11,12 @@ import ContractVerificationFieldCommit from '../fields/ContractVerificationField
import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
import ContractVerificationFieldGitHubRepo from '../fields/ContractVerificationFieldGitHubRepo';
const ContractVerificationStylusGitHubRepo = () => {
const ContractVerificationStylusGitHubRepo = ({ config }: { config: SmartContractVerificationConfig }) => {
const [ latestCommitHash, setLatestCommitHash ] = React.useState<string | undefined>(undefined);
return (
<ContractVerificationMethod title="Contract verification via Stylus (GitHub repository) ">
<ContractVerificationFieldCompiler isStylus/>
<ContractVerificationFieldCompiler config={ config } isStylus/>
<ContractVerificationFieldGitHubRepo onCommitHashChange={ setLatestCommitHash }/>
<ContractVerificationFieldCommit latestCommitHash={ latestCommitHash }/>
......
ui/contractVerification/methods/ContractVerificationVyperContract.tsx
View file @ b518b5af
......@@ -13,8 +13,8 @@ const ContractVerificationVyperContract = ({ config }: { config: SmartContractVe
return (
<ContractVerificationMethod title="Contract verification via Vyper (contract)">
<ContractVerificationFieldName hint="The contract name is the name assigned to the verified contract in Blockscout."/>
<ContractVerificationFieldCompiler isVyper/>
{ config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldEvmVersion isVyper/> }
<ContractVerificationFieldCompiler config={ config } isVyper/>
{ config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldEvmVersion isVyper config={ config }/> }
<ContractVerificationFieldCode isVyper/>
{ !config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldConstructorArgs/> }
</ContractVerificationMethod>
......
ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx
View file @ b518b5af
import React from 'react';
import type { SmartContractVerificationConfig } from 'types/client/contract';
import { Link } from 'toolkit/chakra/link';
import ContractVerificationMethod from '../ContractVerificationMethod';
......@@ -10,7 +12,7 @@ import ContractVerificationFieldSources from '../fields/ContractVerificationFiel
const MAIN_SOURCES_TYPES = [ '.vy' as const ];
const INTERFACE_TYPES = [ '.vy' as const, '.json' as const ];
const ContractVerificationVyperMultiPartFile = () => {
const ContractVerificationVyperMultiPartFile = ({ config }: { config: SmartContractVerificationConfig }) => {
const interfacesHint = (
<>
......@@ -22,8 +24,8 @@ const ContractVerificationVyperMultiPartFile = () => {
return (
<ContractVerificationMethod title="Contract verification via Vyper (multi-part files)">
<ContractVerificationFieldCompiler isVyper/>
<ContractVerificationFieldEvmVersion isVyper/>
<ContractVerificationFieldCompiler config={ config } isVyper/>
<ContractVerificationFieldEvmVersion isVyper config={ config }/>
<ContractVerificationFieldSources
name="sources"
fileTypes={ MAIN_SOURCES_TYPES }
......
ui/contractVerification/methods/ContractVerificationVyperStandardInput.tsx
View file @ b518b5af
import React from 'react';
import type { SmartContractVerificationConfig } from 'types/client/contract';
import ContractVerificationMethod from '../ContractVerificationMethod';
import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
import ContractVerificationFieldSources from '../fields/ContractVerificationFieldSources';
const FILE_TYPES = [ '.json' as const ];
const ContractVerificationVyperStandardInput = () => {
const ContractVerificationVyperStandardInput = ({ config }: { config: SmartContractVerificationConfig }) => {
return (
<ContractVerificationMethod title="Contract verification via Vyper (standard JSON input) ">
<ContractVerificationFieldCompiler isVyper/>
<ContractVerificationFieldCompiler config={ config } isVyper/>
<ContractVerificationFieldSources
fileTypes={ FILE_TYPES }
title="Standard Input JSON"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment