fix contract verification form test

toolkit/chakra/select.tsx

@@ -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

@@ -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

@@ -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

 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

 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

 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

@@ -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

 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

@@ -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

 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

@@ -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

 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

 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"