verified contract general info

types/api/contract.ts

@@ -2,4 +2,12 @@ export interface SmartContract {
   deployed_bytecode: string | null;
   creation_bytecode: string | null;
   is_self_destructed: boolean;
+  abi: Array<Record<string, unknown>> | null;
+  compiler_version: string | null;
+  evm_version: string | null;
+  optimization_enabled: boolean | null;
+  optimization_runs: number | null;
+  name: string | null;
+  verified_at: string | null;
+  is_verified: boolean | null;
 }

ui/address/contract/ContractCode.tsx

-import { Flex, Skeleton, Button } from '@chakra-ui/react';
+import { Flex, Skeleton, Button, Grid, GridItem, Text } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -7,6 +7,13 @@ import link from 'lib/link/link';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
+const InfoItem = ({ label, value }: { label: string; value: string }) => (
+  <GridItem display="flex" columnGap={ 6 }>
+    <Text w="170px" fontWeight={ 500 }>{ label }</Text>
+    <Text>{ value }</Text>
+  </GridItem>
+);
+
 const ContractCode = () => {
   const router = useRouter();
 
@@ -46,26 +53,44 @@ const ContractCode = () => {
       as="a"
       href={ link('address_contract_verification', { id: router.query.id?.toString() }) }
     >
-                Verify & publish
+        Verify & publish
     </Button>
   );
 
   return (
     <>
-      { data.creation_bytecode && (
-        <RawDataSnippet
-          data={ data.creation_bytecode }
-          title="Contract creation code"
-          rightSlot={ verificationButton }
-        />
-      ) }
-      { data.deployed_bytecode && (
-        <RawDataSnippet
-          mt={ 6 }
-          data={ data.deployed_bytecode }
-          title="Deployed ByteCode"
-        />
+      { data.is_verified && (
+        <Grid templateColumns="1fr 1fr" rowGap={ 4 } columnGap={ 6 } mb={ 8 }>
+          { data.name && <InfoItem label="Contract name" value={ data.name }/> }
+          { data.compiler_version && <InfoItem label="Compiler version" value={ data.compiler_version }/> }
+          { data.evm_version && <InfoItem label="EVM version" value={ data.evm_version }/> }
+          { data.optimization_enabled && <InfoItem label="Optimization enabled" value={ data.optimization_enabled ? 'true' : 'false' }/> }
+          { data.optimization_runs && <InfoItem label="Optimization runs" value={ String(data.optimization_runs) }/> }
+          { data.verified_at && <InfoItem label="Verified at" value={ data.verified_at }/> }
+        </Grid>
       ) }
+      <Flex flexDir="column" rowGap={ 6 }>
+        { data.abi && (
+          <RawDataSnippet
+            data={ JSON.stringify(data.abi) }
+            title="Contract ABI"
+            textareaMinHeight="200px"
+          />
+        ) }
+        { data.creation_bytecode && (
+          <RawDataSnippet
+            data={ data.creation_bytecode }
+            title="Contract creation code"
+            rightSlot={ data.is_verified ? null : verificationButton }
+          />
+        ) }
+        { data.deployed_bytecode && (
+          <RawDataSnippet
+            data={ data.deployed_bytecode }
+            title="Deployed ByteCode"
+          />
+        ) }
+      </Flex>
     </>
   );
 };

ui/shared/RawDataSnippet.tsx

@@ -8,9 +8,10 @@ interface Props {
   title?: string;
   className?: string;
   rightSlot?: React.ReactNode;
+  textareaMinHeight?: string;
 }
 
-const RawDataSnippet = ({ data, className, title, rightSlot }: Props) => {
+const RawDataSnippet = ({ data, className, title, rightSlot, textareaMinHeight }: Props) => {
   return (
     <Box className={ className }>
       <Flex justifyContent={ title ? 'space-between' : 'flex-end' } alignItems="center" mb={ 3 }>
@@ -21,7 +22,7 @@ const RawDataSnippet = ({ data, className, title, rightSlot }: Props) => {
       <Textarea
         variant="filledInactive"
         p={ 4 }
-        minHeight="400px"
+        minHeight={ textareaMinHeight || '400px' }
         value={ data }
         fontSize="sm"
         borderRadius="md"