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

* UI/UX: Contract verification alert cases

Resolves #3199

* fixes

Author: tom2drum

ui/address/contract/__screenshots__/ContractDetails.pw.tsx_dark-color-mode_full-view-source-code-dark-mode-1.png

@@ -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/__screenshots__/ContractDetails.pw.tsx_default_full-view-abi-1.png

@@ -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/__screenshots__/ContractDetails.pw.tsx_default_full-view-bytecode-1.png

@@ -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,27 +46,14 @@ 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 }
           isLoading={ isLoading }
           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.