UI/UX: Contract verification alert cases (#3234)

* UI/UX: Contract verification alert cases

Resolves #3199

* fixes

ui/address/contract/alerts/ContractDetailsAlertVerificationSource.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-import type { SmartContract } from 'types/api/contract';
-
-import { Alert } from 'toolkit/chakra/alert';
-import { Link } from 'toolkit/chakra/link';
-
-interface Props {
-  data: SmartContract | undefined;
-}
-
-const ContractDetailsAlertVerificationSource = ({ data }: Props) => {
-  if (data?.is_verified && data?.is_verified_via_eth_bytecode_db) {
-    return (
-      <Alert status="warning" whiteSpace="pre-wrap">
-        <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified using </span>
-        <Link
-          href="https://docs.blockscout.com/devs/verification/ethereum-bytecode-database-microservice"
-          external
-        >
-          Blockscout Bytecode Database
-        </Link>
-      </Alert>
-    );
-  }
-
-  if (data?.is_verified && data?.is_verified_via_sourcify) {
-    return (
-      <Alert status="warning" whiteSpace="pre-wrap">
-        <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified via Sourcify. </span>
-        { data.sourcify_repo_url && <Link href={ data.sourcify_repo_url } textStyle="md" external>View contract in Sourcify repository</Link> }
-      </Alert>
-    );
-  }
-
-  return null;
-};
-
-export default React.memo(ContractDetailsAlertVerificationSource);

ui/address/contract/alerts/ContractDetailsAlertVerificationStatus.tsx

@@ -0,0 +1,71 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+import type { SmartContract } from 'types/api/contract';
+
+import { Alert } from 'toolkit/chakra/alert';
+import { Link } from 'toolkit/chakra/link';
+
+import ContractDetailsVerificationButton from '../ContractDetailsVerificationButton';
+
+interface Props {
+  data: SmartContract | undefined;
+  isLoading: boolean;
+  addressData: Address;
+}
+
+const ContractDetailsAlertVerificationStatus = ({ data, isLoading, addressData }: Props) => {
+  if (!data || !data.is_verified) {
+    return null;
+  }
+
+  const sourceElement = (() => {
+    if (data?.is_verified_via_eth_bytecode_db) {
+      return (
+        <>
+          <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified using </span>
+          <Link
+            href="https://docs.blockscout.com/devs/verification/ethereum-bytecode-database-microservice"
+            external
+          >
+            Blockscout Bytecode Database
+          </Link>
+        </>
+      );
+    }
+
+    if (data?.is_verified_via_sourcify) {
+      return (
+        <>
+          <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified via Sourcify. </span>
+          { data.sourcify_repo_url && <Link href={ data.sourcify_repo_url } textStyle="md" external>View contract in Sourcify repository</Link> }
+        </>
+      );
+    }
+
+    return null;
+  })();
+
+  if (!data.is_partially_verified) {
+    return (
+      <Alert status="success" loading={ isLoading } descriptionProps={{ whiteSpace: 'pre-wrap' }}>
+        <span>Contract source code verified (exact match){ sourceElement ? '. ' : '' }</span>
+        { sourceElement }
+      </Alert>
+    );
+  }
+
+  return (
+    <Alert status="success" loading={ isLoading } descriptionProps={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 2, columnGap: 3 }}>
+      <span>Contract source code verified ({ data.is_partially_verified ? 'partial' : 'exact' } match){ sourceElement ? '.' : '' }</span>
+      <ContractDetailsVerificationButton
+        isLoading={ isLoading }
+        addressHash={ addressData.hash }
+      />
+      { sourceElement && <Box w="100%">{ sourceElement }</Box> }
+    </Alert>
+  );
+};
+
+export default React.memo(ContractDetailsAlertVerificationStatus);

ui/address/contract/alerts/ContractDetailsAlerts.pw.tsx

@@ -13,7 +13,7 @@ test.describe.configure({ mode: 'serial' });
 
 test('verified with changed byte code socket', async({ render, createSocket }) => {
   const props = {
-    data: contractMock.verified,
+    data: { ...contractMock.verified, is_partially_verified: true },
     isLoading: false,
     addressData: addressMock.contract,
   };

ui/address/contract/alerts/ContractDetailsAlerts.tsx

@@ -13,9 +13,8 @@ import { Alert } from 'toolkit/chakra/alert';
 import { Link } from 'toolkit/chakra/link';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
-import ContractDetailsVerificationButton from '../ContractDetailsVerificationButton';
 import ContractDetailsAlertProxyPattern from './ContractDetailsAlertProxyPattern';
-import ContractDetailsAlertVerificationSource from './ContractDetailsAlertVerificationSource';
+import ContractDetailsAlertVerificationStatus from './ContractDetailsAlertVerificationStatus';
 
 export interface Props {
   data: SmartContract | undefined;
@@ -47,19 +46,7 @@ const ContractDetailsAlerts = ({ data, isLoading, addressData, channel }: Props)
           </Link>
         </Box>
       ) }
-      { data?.is_verified && (
-        <Alert status="success" loading={ isLoading } descriptionProps={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 2, columnGap: 5 }}>
-          <span>Contract Source Code Verified ({ data.is_partially_verified ? 'Partial' : 'Exact' } Match)</span>
-          {
-            data.is_partially_verified ? (
-              <ContractDetailsVerificationButton
-                isLoading={ isLoading }
-                addressHash={ addressData.hash }
-              />
-            ) : null
-          }
-        </Alert>
-      ) }
+      <ContractDetailsAlertVerificationStatus data={ data } isLoading={ isLoading } addressData={ addressData }/>
       { addressData.proxy_type && (
         <ContractDetailsAlertProxyPattern
           type={ addressData.proxy_type }
@@ -67,7 +54,6 @@ const ContractDetailsAlerts = ({ data, isLoading, addressData, channel }: Props)
           conflictingImplementations={ data?.conflicting_implementations ?? undefined }
         />
       ) }
-      <ContractDetailsAlertVerificationSource data={ data }/>
       { (data?.is_changed_bytecode || isChangedBytecodeSocket) && (
         <Alert status="warning">
           Warning! Contract bytecode has been changed and does not match the verified one. Therefore, interaction with this smart contract may be risky.