-
Notifications
You must be signed in to change notification settings - Fork 505
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1598 from blockscout/fe-1563
audits info and form
- Loading branch information
Showing
31 changed files
with
780 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| 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', | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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/[email protected]/**', (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/[email protected]/**', (route) => route.abort()); | ||
|
|
||
| const component = await mount( | ||
| <TestApp> | ||
| <ContractCode addressHash={ addressHash } noSocket/> | ||
| </TestApp>, | ||
| { hooksConfig }, | ||
| ); | ||
|
|
||
| await expect(component).toHaveScreenshot(); | ||
| }); | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| 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); |
Binary file added
BIN
+108 KB
..._screenshots__/ContractCode.pw.tsx_default_with-audits-feature-has-audits-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+102 KB
...__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-no-audits-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.