Merge pull request #1598 from blockscout/fe-1563

audits info and form

configs/app/ui.ts

@@ -70,6 +70,7 @@ const UI = Object.freeze({
   ides: {
     items: parseEnvJson<Array<ContractCodeIde>>(getEnvValue('NEXT_PUBLIC_CONTRACT_CODE_IDES')) || [],
   },
+  hasContractAuditReports: getEnvValue('NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS') === 'true' ? true : false,
 });
 
 export default UI;

configs/envs/.env.eth_goerli

@@ -33,6 +33,7 @@ NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-c
 NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
 ## misc
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS=true
 
 # app features
 NEXT_PUBLIC_APP_ENV=development

deploy/tools/envs-validator/schema.ts

@@ -459,6 +459,7 @@ const schema = yup
       .transform(replaceQuotes)
       .json()
       .of(contractCodeIdeSchema),
+    NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS: yup.boolean(),
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS: yup.boolean(),
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS: yup.boolean(),
     NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup.string(),

deploy/values/review/values.yaml.gotmpl

@@ -78,6 +78,7 @@ frontend:
     NEXT_PUBLIC_HAS_USER_OPS: true
     NEXT_PUBLIC_CONTRACT_CODE_IDES: "[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout=eth-goerli.blockscout.com','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]"
     NEXT_PUBLIC_SWAP_BUTTON_URL: uniswap
+    NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS: true
   envFromSecret:
     NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
     SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI
@@ -88,3 +89,4 @@ frontend:
     FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
     NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY
     NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
+

docs/ENVS.md

@@ -261,6 +261,7 @@ Settings for meta tags and OG tags
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers. | - | - | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` |
 | NEXT_PUBLIC_CONTRACT_CODE_IDES | `Array<ContractCodeIde>` where `ContractCodeIde` can have following [properties](#contract-code-ide-configuration-properties) | Used to build up links to IDEs with contract source code. | - | - | `[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout={domain}','icon_url':'https://example.com/icon.svg'}]` |
+| NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS | `boolean` | Set to `true` to enable Submit Audit form on the contract page | - | `false` | `true` |
 | NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS | `boolean` | Set to `true` to hide indexing alert in the page header about indexing chain's blocks | - | `false` | `true` |
 | NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` |
 | NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` |

lib/api/resources.ts

@@ -34,7 +34,14 @@ import type { AddressesResponse } from 'types/api/addresses';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters, BlockWithdrawalsResponse } from 'types/api/block';
 import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
 import type { BackendVersionConfig } from 'types/api/configs';
-import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod, SmartContractVerificationConfig, SolidityscanReport } from 'types/api/contract';
+import type {
+  SmartContract,
+  SmartContractReadMethod,
+  SmartContractWriteMethod,
+  SmartContractVerificationConfig,
+  SolidityscanReport,
+  SmartContractSecurityAudits,
+} from 'types/api/contract';
 import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
 import type {
   EnsAddressLookupFilters,
@@ -434,6 +441,10 @@ export const RESOURCES = {
     path: '/api/v2/smart-contracts/:hash/solidityscan-report',
     pathParams: [ 'hash' as const ],
   },
+  contract_security_audits: {
+    path: '/api/v2/smart-contracts/:hash/audit-reports',
+    pathParams: [ 'hash' as const ],
+  },
 
   verified_contracts: {
     path: '/api/v2/smart-contracts',
@@ -844,6 +855,7 @@ Q extends 'shibarium_withdrawals' ? ShibariumWithdrawalsResponse :
 Q extends 'shibarium_deposits' ? ShibariumDepositsResponse :
 Q extends 'shibarium_withdrawals_count' ? number :
 Q extends 'shibarium_deposits_count' ? number :
+Q extends 'contract_security_audits' ? SmartContractSecurityAudits :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

mocks/contract/audits.ts

+import type { SmartContractSecurityAudits } from 'types/api/contract';
+
+export const contractAudits: SmartContractSecurityAudits = {
+  items: [
+    {
+      audit_company_name: 'OpenZeppelin',
+      audit_publish_date: '2023-03-01',
+      audit_report_url: 'https://blog.openzeppelin.com/eip-4337-ethereum-account-abstraction-incremental-audit',
+    },
+    {
+      audit_company_name: 'OpenZeppelin',
+      audit_publish_date: '2023-03-01',
+      audit_report_url: 'https://blog.openzeppelin.com/eip-4337-ethereum-account-abstraction-incremental-audit',
+    },
+  ],
+};

playwright/utils/configs.ts

@@ -56,6 +56,12 @@ export const viewsEnvs = {
   },
 };
 
+export const UIEnvs = {
+  hasContractAuditReports: [
+    { name: 'NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS', value: 'true' },
+  ],
+};
+
 export const stabilityEnvs = [
   { name: 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', value: '["top_accounts"]' },
   { name: 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', value: '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' },

theme/components/FormLabel.ts

 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { getColor, mode } from '@chakra-ui/theme-tools';
+import { getColor } from '@chakra-ui/theme-tools';
 
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 
@@ -20,7 +20,7 @@ const baseStyle = defineStyle({
 const variantFloating = defineStyle((props) => {
   const { theme, backgroundColor } = props;
   const { focusPlaceholderColor } = getDefaultFormColors(props);
-  const bc = backgroundColor || mode('white', 'black')(props);
+  const bc = backgroundColor || 'transparent';
 
   return {
     left: '2px',

theme/utils/getOutlinedFieldStyles.ts

@@ -49,6 +49,13 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
     },
     // not filled input
     ':placeholder-shown:not(:focus-visible):not(:hover):not([aria-invalid=true])': { borderColor: borderColor || mode('gray.100', 'gray.700')(props) },
+
+    // not filled input with type="date"
+    ':not(:placeholder-shown)[value=""]:not(:focus-visible):not(:hover):not([aria-invalid=true])': {
+      borderColor: borderColor || mode('gray.100', 'gray.700')(props),
+      color: 'gray.500',
+    },
+
     ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:hover': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:focus': { transition: 'background-color 5000s ease-in-out 0s' },

types/api/contract.ts

@@ -180,3 +180,26 @@ export type SolidityscanReport = {
     scanner_reference_url: string;
   };
 }
+
+type SmartContractSecurityAudit = {
+  audit_company_name: string;
+  audit_publish_date: string;
+  audit_report_url: string;
+}
+
+export type SmartContractSecurityAudits = {
+  items: Array<SmartContractSecurityAudit>;
+}
+
+export type SmartContractSecurityAuditSubmission = {
+  'address_hash': string;
+  'submitter_name': string;
+  'submitter_email': string;
+  'is_project_owner': boolean;
+  'project_name': string;
+  'project_url': string;
+  'audit_company_name': string;
+  'audit_report_url': string;
+  'audit_publish_date': string;
+  'comment'?: string;
+}

ui/address/contract/ContractCode.pw.tsx

@@ -2,16 +2,20 @@ import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
+import { contractAudits } from 'mocks/contract/audits';
 import * as contractMock from 'mocks/contract/info';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
 import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
 
 import ContractCode from './ContractCode';
 
 const addressHash = 'hash';
 const CONTRACT_API_URL = buildApiUrl('contract', { hash: addressHash });
+const CONTRACT_AUDITS_API_URL = buildApiUrl('contract_security_audits', { hash: addressHash });
 const hooksConfig = {
   router: {
     query: { hash: addressHash },
@@ -229,3 +233,54 @@ test('non verified', async({ mount, page }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('with audits feature', () => {
+
+  const withAuditsTest = test.extend({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    context: contextWithEnvs(configs.UIEnvs.hasContractAuditReports) as any,
+  });
+
+  withAuditsTest('no audits', async({ mount, page }) => {
+    await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(contractMock.verified),
+    }));
+    await page.route(CONTRACT_AUDITS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({ items: [] }),
+    }));
+    await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
+
+    const component = await mount(
+      <TestApp>
+        <ContractCode addressHash={ addressHash } noSocket/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  withAuditsTest('has audits', async({ mount, page }) => {
+    await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(contractMock.verified),
+    }));
+    await page.route(CONTRACT_AUDITS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(contractAudits),
+    }));
+
+    await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
+
+    const component = await mount(
+      <TestApp>
+        <ContractCode addressHash={ addressHash } noSocket/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/address/contract/ContractCode.tsx

@@ -7,6 +7,7 @@ import type { Address as AddressInfo } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
 import useSocketChannel from 'lib/socket/useSocketChannel';
@@ -18,6 +19,7 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
+import ContractSecurityAudits from './ContractSecurityAudits';
 import ContractSourceCode from './ContractSourceCode';
 
 type Props = {
@@ -26,10 +28,17 @@ type Props = {
   noSocket?: boolean;
 }
 
-const InfoItem = chakra(({ label, value, className, isLoading }: { label: string; value: string; className?: string; isLoading: boolean }) => (
+type InfoItemProps = {
+  label: string;
+  content: string | React.ReactNode;
+  className?: string;
+  isLoading: boolean;
+}
+
+const InfoItem = chakra(({ label, content, className, isLoading }: InfoItemProps) => (
   <GridItem display="flex" columnGap={ 6 } wordBreak="break-all" className={ className } alignItems="baseline">
     <Skeleton isLoaded={ !isLoading } w="170px" flexShrink={ 0 } fontWeight={ 500 }>{ label }</Skeleton>
-    <Skeleton isLoaded={ !isLoading }>{ value }</Skeleton>
+    <Skeleton isLoaded={ !isLoading }>{ content }</Skeleton>
   </GridItem>
 ));
 
@@ -221,15 +230,22 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
       </Flex>
       { data?.is_verified && (
         <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 6 } mb={ 8 }>
-          { data.name && <InfoItem label="Contract name" value={ data.name } isLoading={ isPlaceholderData }/> }
-          { data.compiler_version && <InfoItem label="Compiler version" value={ data.compiler_version } isLoading={ isPlaceholderData }/> }
-          { data.evm_version && <InfoItem label="EVM version" value={ data.evm_version } textTransform="capitalize" isLoading={ isPlaceholderData }/> }
+          { data.name && <InfoItem label="Contract name" content={ data.name } isLoading={ isPlaceholderData }/> }
+          { data.compiler_version && <InfoItem label="Compiler version" content={ data.compiler_version } isLoading={ isPlaceholderData }/> }
+          { data.evm_version && <InfoItem label="EVM version" content={ data.evm_version } textTransform="capitalize" isLoading={ isPlaceholderData }/> }
           { typeof data.optimization_enabled === 'boolean' &&
-            <InfoItem label="Optimization enabled" value={ data.optimization_enabled ? 'true' : 'false' } isLoading={ isPlaceholderData }/> }
-          { data.optimization_runs && <InfoItem label="Optimization runs" value={ String(data.optimization_runs) } isLoading={ isPlaceholderData }/> }
+            <InfoItem label="Optimization enabled" content={ data.optimization_enabled ? 'true' : 'false' } isLoading={ isPlaceholderData }/> }
+          { data.optimization_runs && <InfoItem label="Optimization runs" content={ String(data.optimization_runs) } isLoading={ isPlaceholderData }/> }
           { data.verified_at &&
-            <InfoItem label="Verified at" value={ dayjs(data.verified_at).format('llll') } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
-          { data.file_path && <InfoItem label="Contract file path" value={ data.file_path } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
+            <InfoItem label="Verified at" content={ dayjs(data.verified_at).format('llll') } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
+          { data.file_path && <InfoItem label="Contract file path" content={ data.file_path } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
+          { config.UI.hasContractAuditReports && (
+            <InfoItem
+              label="Security audit"
+              content={ <ContractSecurityAudits addressHash={ addressHash }/> }
+              isLoading={ isPlaceholderData }
+            />
+          ) }
         </Grid>
       ) }
       <Flex flexDir="column" rowGap={ 6 }>

ui/address/contract/ContractSecurityAudits.tsx

+import { Box, Button, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContractSecurityAuditSubmission } from 'types/api/contract';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import dayjs from 'lib/date/dayjs';
+import ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
+import FormModal from 'ui/shared/FormModal';
+import LinkExternal from 'ui/shared/LinkExternal';
+
+import ContractSubmitAuditForm from './contractSubmitAuditForm/ContractSubmitAuditForm';
+
+const SCROLL_GRADIENT_HEIGHT = 24;
+
+type Props = {
+  addressHash?: string;
+}
+
+const ContractSecurityAudits = ({ addressHash }: Props) => {
+  const { data, isPlaceholderData } = useApiQuery('contract_security_audits', {
+    pathParams: { hash: addressHash },
+    queryOptions: {
+      refetchOnMount: false,
+      placeholderData: { items: [] },
+      enabled: Boolean(addressHash),
+    },
+  });
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [ hasScroll, setHasScroll ] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    setHasScroll(containerRef.current.scrollHeight >= containerRef.current.clientHeight + SCROLL_GRADIENT_HEIGHT / 2);
+  }, []);
+
+  const formTitle = 'Submit audit';
+
+  const modalProps = useDisclosure();
+
+  const renderForm = React.useCallback(() => {
+    return <ContractSubmitAuditForm address={ addressHash } onSuccess={ modalProps.onClose }/>;
+  }, [ addressHash, modalProps.onClose ]);
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={ modalProps.onOpen }>Submit audit</Button>
+      { data?.items && data.items.length > 0 && (
+        <Box position="relative">
+          <ContainerWithScrollY
+            gradientHeight={ SCROLL_GRADIENT_HEIGHT }
+            hasScroll={ hasScroll }
+            rowGap={ 1 }
+            w="100%"
+            maxH="80px"
+            ref={ containerRef }
+            mt={ 2 }
+          >
+            { data.items.map(item => (
+              <LinkExternal href={ item.audit_report_url } key={ item.audit_company_name + item.audit_publish_date } isLoading={ isPlaceholderData }>
+                { `${ item.audit_company_name }, ${ dayjs(item.audit_publish_date).format('MMM DD, YYYY') }` }
+              </LinkExternal>
+            )) }
+          </ContainerWithScrollY>
+        </Box>
+      ) }
+      <FormModal<SmartContractSecurityAuditSubmission>
+        isOpen={ modalProps.isOpen }
+        onClose={ modalProps.onClose }
+        title={ formTitle }
+        renderForm={ renderForm }
+      />
+    </>
+  );
+};
+
+export default React.memo(ContractSecurityAudits);

ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import ContractSubmitAuditForm from './ContractSubmitAuditForm';
+
+test('base view', async({ mount }) => {
+
+  const component = await mount(
+    <TestApp>
+      { /* eslint-disable-next-line react/jsx-no-bind */ }
+      <ContractSubmitAuditForm address="hash" onSuccess={ () => {} }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.tsx

+import { Button, VStack } from '@chakra-ui/react';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+
+import type { SmartContractSecurityAuditSubmission } from 'types/api/contract';
+
+import type { ResourceError } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
+import useToast from 'lib/hooks/useToast';
+
+import AuditComment from './fields/AuditComment';
+import AuditCompanyName from './fields/AuditCompanyName';
+import AuditProjectName from './fields/AuditProjectName';
+import AuditProjectUrl from './fields/AuditProjectUrl';
+import AuditReportDate from './fields/AuditReportDate';
+import AuditReportUrl from './fields/AuditReportUrl';
+import AuditSubmitterEmail from './fields/AuditSubmitterEmail';
+import AuditSubmitterIsOwner from './fields/AuditSubmitterIsOwner';
+import AuditSubmitterName from './fields/AuditSubmitterName';
+
+interface Props {
+  address?: string;
+  onSuccess: () => void;
+}
+
+export type Inputs = {
+  submitter_name: string;
+  submitter_email: string;
+  is_project_owner: boolean;
+  project_name: string;
+  project_url: string;
+  audit_company_name: string;
+  audit_report_url: string;
+  audit_publish_date: string;
+  comment?: string;
+}
+
+type AuditSubmissionErrors = {
+  errors: Record<keyof Inputs, Array<string>>;
+}
+
+const ContractSubmitAuditForm = ({ address, onSuccess }: Props) => {
+  const containerRef = React.useRef<HTMLFormElement>(null);
+
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+
+  const { handleSubmit, formState, control, setError } = useForm<Inputs>({
+    mode: 'onTouched',
+    defaultValues: { is_project_owner: false },
+  });
+
+  const onFormSubmit: SubmitHandler<Inputs> = React.useCallback(async(data) => {
+    try {
+      await apiFetch<'contract_security_audits', SmartContractSecurityAuditSubmission, AuditSubmissionErrors>('contract_security_audits', {
+        pathParams: { hash: address },
+        fetchParams: {
+          method: 'POST',
+          body: data,
+        },
+      });
+
+      toast({
+        position: 'top-right',
+        title: 'Success',
+        description: 'Your audit report has been successfully submitted for review',
+        status: 'success',
+        variant: 'subtle',
+        isClosable: true,
+      });
+
+      onSuccess();
+
+    } catch (_error) {
+      const error = _error as ResourceError<AuditSubmissionErrors>;
+      // add scroll to the error field
+      const errorMap = error?.payload?.errors;
+      if (errorMap && Object.keys(errorMap).length) {
+        (Object.keys(errorMap) as Array<keyof Inputs>).forEach((errorField) => {
+          setError(errorField, { type: 'custom', message: errorMap[errorField].join(', ') });
+        });
+      } else {
+        toast({
+          position: 'top-right',
+          title: 'Error',
+          description: (_error as ResourceError<{ message: string }>)?.payload?.message || 'Something went wrong. Try again later.',
+          status: 'error',
+          variant: 'subtle',
+          isClosable: true,
+        });
+      }
+    }
+  }, [ apiFetch, address, toast, setError, onSuccess ]);
+
+  return (
+    <form noValidate onSubmit={ handleSubmit(onFormSubmit) } autoComplete="off" ref={ containerRef }>
+      <VStack gap={ 5 }>
+        <AuditSubmitterName control={ control }/>
+        <AuditSubmitterEmail control={ control }/>
+        <AuditSubmitterIsOwner control={ control }/>
+        <AuditProjectName control={ control }/>
+        <AuditProjectUrl control={ control }/>
+        <AuditCompanyName control={ control }/>
+        <AuditReportUrl control={ control }/>
+        <AuditReportDate control={ control }/>
+
+        <AuditComment control={ control }/>
+      </VStack>
+      <Button
+        type="submit"
+        size="lg"
+        mt={ 8 }
+        isLoading={ formState.isSubmitting }
+        loadingText="Send request"
+        isDisabled={ !formState.isDirty }
+      >
+        Send request
+      </Button>
+    </form>
+  );
+};
+
+export default React.memo(ContractSubmitAuditForm);

ui/address/contract/contractSubmitAuditForm/fields/AuditComment.tsx

+import { FormControl, Textarea } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditComment = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'comment'>['render'] = React.useCallback(({ field, fieldState }) => {
+    return (
+      <FormControl variant="floating" id={ field.name }>
+        <Textarea
+          { ...field }
+          isInvalid={ Boolean(fieldState.error) }
+          autoComplete="off"
+          maxH="160px"
+          maxLength={ 300 }
+        />
+        <InputPlaceholder text="Comment" error={ fieldState.error }/>
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="comment"
+      control={ control }
+      render={ renderControl }
+      rules={{ maxLength: 300 }}
+    />
+  );
+};
+
+export default React.memo(AuditComment);

ui/address/contract/contractSubmitAuditForm/fields/AuditCompanyName.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditCompanyName = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'audit_company_name'>['render'] = React.useCallback(({ field, fieldState }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(fieldState.error) }
+          autoComplete="off"
+        />
+        <InputPlaceholder text="Audit company name" error={ fieldState.error }/>
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="audit_company_name"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true }}
+    />
+  );
+};
+
+export default React.memo(AuditCompanyName);

ui/address/contract/contractSubmitAuditForm/fields/AuditProjectName.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditProjectName = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'project_name'>['render'] = React.useCallback(({ field, fieldState }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(fieldState.error) }
+          autoComplete="off"
+        />
+        <InputPlaceholder text="Project name" error={ fieldState.error }/>
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="project_name"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true }}
+    />
+  );
+};
+
+export default React.memo(AuditProjectName);

ui/address/contract/contractSubmitAuditForm/fields/AuditProjectUrl.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import { validator as validateUrl } from 'lib/validations/url';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditProjectUrl = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'project_url'>['render'] = React.useCallback(({ field, fieldState }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(fieldState.error) }
+          autoComplete="off"
+        />
+        <InputPlaceholder text="Project URL" error={ fieldState.error }/>
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="project_url"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true, validate: { url: validateUrl } }}
+    />
+  );
+};
+
+export default React.memo(AuditProjectUrl);

ui/address/contract/contractSubmitAuditForm/fields/AuditReportDate.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import dayjs from 'lib/date/dayjs';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditCompanyName = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'audit_publish_date'>['render'] = React.useCallback(({ field, fieldState }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(fieldState.error) }
+          autoComplete="off"
+          type="date"
+          max={ dayjs().format('YYYY-MM-DD') }
+        />
+        <InputPlaceholder text="Audit publish date" error={ fieldState.error }/>
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="audit_publish_date"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true }}
+    />
+  );
+};
+
+export default React.memo(AuditCompanyName);

ui/address/contract/contractSubmitAuditForm/fields/AuditReportUrl.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import { validator as validateUrl } from 'lib/validations/url';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditReportUrl = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'audit_report_url'>['render'] = React.useCallback(({ field, fieldState }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(fieldState.error) }
+          autoComplete="off"
+        />
+        <InputPlaceholder text="Audit report URL" error={ fieldState.error }/>
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="audit_report_url"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true, validate: { url: validateUrl } }}
+    />
+  );
+};
+
+export default React.memo(AuditReportUrl);

ui/address/contract/contractSubmitAuditForm/fields/AuditSubmitterEmail.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import { EMAIL_REGEXP } from 'lib/validations/email';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditSubmitterEmail = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'submitter_email'>['render'] = React.useCallback(({ field, fieldState }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(fieldState.error) }
+        />
+        <InputPlaceholder text="Submitter email" error={ fieldState.error }/>
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="submitter_email"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true, pattern: EMAIL_REGEXP }}
+    />
+  );
+};
+
+export default React.memo(AuditSubmitterEmail);

ui/address/contract/contractSubmitAuditForm/fields/AuditSubmitterIsOwner.tsx

+import { FormControl } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import CheckboxInput from 'ui/shared/CheckboxInput';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditSubmitterIsOwner = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'is_project_owner'>['render'] = React.useCallback(({ field }) => {
+    return (
+      <FormControl id={ field.name }>
+        <CheckboxInput<Inputs, 'is_project_owner'>
+          text="I'm the contract owner"
+          field={ field }
+        />
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="is_project_owner"
+      control={ control }
+      render={ renderControl }
+    />
+  );
+};
+
+export default React.memo(AuditSubmitterIsOwner);

ui/address/contract/contractSubmitAuditForm/fields/AuditSubmitterName.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import type { Inputs } from '../ContractSubmitAuditForm';
+
+interface Props {
+  control: Control<Inputs>;
+}
+
+const AuditSubmitterName = ({ control }: Props) => {
+  const renderControl: ControllerProps<Inputs, 'submitter_name'>['render'] = React.useCallback(({ field, fieldState }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(fieldState.error) }
+        />
+        <InputPlaceholder text="Submitter name" error={ fieldState.error }/>
+      </FormControl>
+    );
+  }, [ ]);
+
+  return (
+    <Controller
+      name="submitter_name"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true }}
+    />
+  );
+};
+
+export default React.memo(AuditSubmitterName);

ui/shared/ContainerWithScrollY.tsx

+import { Flex, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  children: React.ReactNode;
+  containerId?: string;
+  gradientHeight: number;
+  className?: string;
+  hasScroll: boolean;
+}
+
+const ContainerWithScrollY = ({ className, hasScroll, containerId, gradientHeight, children }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
+  const gradientStartColor = useColorModeValue('whiteAlpha.600', 'blackAlpha.600');
+  const gradientEndColor = useColorModeValue('whiteAlpha.900', 'blackAlpha.900');
+
+  return (
+    <Flex
+      id={ containerId }
+      flexDirection="column"
+      className={ className }
+      overflowY={ hasScroll ? 'scroll' : 'auto' }
+      ref={ ref }
+      _after={ hasScroll ? {
+        position: 'absolute',
+        content: '""',
+        bottom: 0,
+        left: 0,
+        right: '20px',
+        height: `${ gradientHeight }px`,
+        bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`,
+      } : undefined }
+      pr={ hasScroll ? 5 : 0 }
+      pb={ hasScroll ? `${ gradientHeight }px` : 0 }
+    >
+      { children }
+    </Flex>
+  );
+};
+
+export default chakra(React.forwardRef(ContainerWithScrollY));

ui/shared/FormModal.tsx

@@ -18,10 +18,10 @@ interface Props<TData> {
   onClose: () => void;
   data?: TData;
   title: string;
-  text: string;
+  text?: string;
   renderForm: () => JSX.Element;
-  isAlertVisible: boolean;
-  setAlertVisible: (isAlertVisible: boolean) => void;
+  isAlertVisible?: boolean;
+  setAlertVisible?: (isAlertVisible: boolean) => void;
 }
 
 export default function FormModal<TData>({
@@ -35,7 +35,7 @@ export default function FormModal<TData>({
 }: Props<TData>) {
 
   const onModalClose = useCallback(() => {
-    setAlertVisible(false);
+    setAlertVisible && setAlertVisible(false);
     onClose();
   }, [ onClose, setAlertVisible ]);
 

ui/tx/details/txDetailsActions/TxDetailsActionsWrapper.tsx

-import { Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
+export const TX_ACTIONS_BLOCK_ID = 'tx-actions';
 const SCROLL_GRADIENT_HEIGHT = 48;
 
 type Props = {
@@ -10,15 +11,10 @@ type Props = {
   isLoading?: boolean;
 }
 
-export const TX_ACTIONS_BLOCK_ID = 'tx-actions';
-
 const TxDetailsActions = ({ children, isLoading }: Props) => {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [ hasScroll, setHasScroll ] = React.useState(false);
 
-  const gradientStartColor = useColorModeValue('whiteAlpha.600', 'blackAlpha.600');
-  const gradientEndColor = useColorModeValue('whiteAlpha.900', 'blackAlpha.900');
-
   React.useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -35,29 +31,18 @@ const TxDetailsActions = ({ children, isLoading }: Props) => {
       position="relative"
       isLoading={ isLoading }
     >
-      <Flex
-        id={ TX_ACTIONS_BLOCK_ID }
-        flexDirection="column"
+      <ContainerWithScrollY
+        containerId={ TX_ACTIONS_BLOCK_ID }
+        gradientHeight={ SCROLL_GRADIENT_HEIGHT }
+        hasScroll={ hasScroll }
         alignItems="stretch"
         rowGap={ 5 }
         w="100%"
         maxH="200px"
-        overflowY="scroll"
         ref={ containerRef }
-        _after={ hasScroll ? {
-          position: 'absolute',
-          content: '""',
-          bottom: 0,
-          left: 0,
-          right: '20px',
-          height: `${ SCROLL_GRADIENT_HEIGHT }px`,
-          bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`,
-        } : undefined }
-        pr={ hasScroll ? 5 : 0 }
-        pb={ hasScroll ? 10 : 0 }
       >
         { children }
-      </Flex>
+      </ContainerWithScrollY>
     </DetailsInfoItem>
   );
 };