multifile for contract creation and changes in write result

configs/envs/.env.goerli

@@ -3,11 +3,11 @@ NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Ethereum','url':'https://blockscout.com
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/ethereum/goerli/transaction','address':'/ethereum/ethereum/goerli/address'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address'}}]
 
 # network config
-NEXT_PUBLIC_NETWORK_NAME=Ethereum
+NEXT_PUBLIC_NETWORK_NAME=Goerli
 NEXT_PUBLIC_NETWORK_SHORT_NAME=Goerli
 NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=ethereum
 NEXT_PUBLIC_NETWORK_TYPE=goerli
-NEXT_PUBLIC_NETWORK_ID=420
+NEXT_PUBLIC_NETWORK_ID=5
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18

types/api/contract.ts

@@ -16,6 +16,9 @@ export interface SmartContract {
   constructor_args: string | null;
   can_be_visualized_via_sol2uml: boolean | null;
   is_vyper_contract: boolean | null;
+  file_path: string;
+  additional_sources: Array<{ file_path: string; source_code: string }>;
+  compiler_settings: unknown;
 }
 
 export interface SmartContractMethodBase {

ui/address/contract/ContractCode.tsx

@@ -114,6 +114,15 @@ const ContractCode = () => {
             hasSol2Yml={ Boolean(data.can_be_visualized_via_sol2uml) }
             address={ addressHash }
             isViper={ Boolean(data.is_vyper_contract) }
+            filePath={ data.file_path }
+            additionalSource={ data.additional_sources }
+          />
+        ) }
+        { Boolean(data.compiler_settings) && (
+          <RawDataSnippet
+            data={ JSON.stringify(data.compiler_settings) }
+            title="Compiler Settings"
+            textareaMinHeight="200px"
           />
         ) }
         { data.abi && (
@@ -134,12 +143,14 @@ const ContractCode = () => {
                 Displaying the init data provided of the creating transaction.
               </Alert>
             ) }
+            textareaMinHeight="200px"
           />
         ) }
         { data.deployed_bytecode && (
           <RawDataSnippet
             data={ data.deployed_bytecode }
             title="Deployed ByteCode"
+            textareaMinHeight="200px"
           />
         ) }
       </Flex>

ui/address/contract/ContractSourceCode.tsx

-import { Box, Flex, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Box, chakra, Flex, Link, Text, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import type { SmartContract } from 'types/api/contract';
+
 import link from 'lib/link/link';
 import CodeEditor from 'ui/shared/CodeEditor';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -10,30 +12,60 @@ interface Props {
   hasSol2Yml: boolean;
   address?: string;
   isViper: boolean;
+  filePath?: string;
+  additionalSource?: SmartContract['additional_sources'];
 }
 
-const ContractSourceCode = ({ data, hasSol2Yml, address, isViper }: Props) => {
+const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, additionalSource }: Props) => {
+  const heading = (
+    <Text fontWeight={ 500 }>
+      <span>Contract source code</span>
+      <Text whiteSpace="pre" as="span" variant="secondary"> ({ isViper ? 'Vyper' : 'Solidity' })</Text>
+    </Text>
+  );
+
+  const diagramLink = hasSol2Yml && address ? (
+    <Tooltip label="Visualize contract code using Sol2Uml JS library">
+      <Link
+        href={ link('visualize_sol2uml', undefined, { address }) }
+        ml="auto"
+        mr={ 3 }
+      >
+        View UML diagram
+      </Link>
+    </Tooltip>
+  ) : null;
+
+  if (!additionalSource) {
+    return (
+      <Box>
+        <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
+          { heading }
+          { diagramLink }
+          <CopyToClipboard text={ data }/>
+        </Flex>
+        <CodeEditor value={ data } id="source_code"/>
+      </Box>
+    );
+  }
+
   return (
     <Box>
       <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
-        <Text fontWeight={ 500 }>
-          <span>Contract source code</span>
-          <Text whiteSpace="pre" as="span" variant="secondary"> ({ isViper ? 'Vyper' : 'Solidity' })</Text>
-        </Text>
-        { hasSol2Yml && address && (
-          <Tooltip label="Visualize contract code using Sol2Uml JS library">
-            <Link
-              href={ link('visualize_sol2uml', undefined, { address }) }
-              ml="auto"
-              mr={ 3 }
-            >
-                View Sol2uml
-            </Link>
-          </Tooltip>
-        ) }
-        <CopyToClipboard text={ data }/>
+        { heading }
+        { diagramLink }
+      </Flex>
+      <Flex flexDir="column" rowGap={ 3 }>
+        { [ { file_path: filePath, source_code: data }, ...additionalSource ].map((item, index, array) => (
+          <Box key={ index }>
+            <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
+              <chakra.span fontSize="sm">File { index + 1 } of { array.length }: { item.file_path }</chakra.span>
+              <CopyToClipboard text={ item.source_code }/>
+            </Flex>
+            <CodeEditor value={ item.source_code } id={ `source_code_${ index }` }/>
+          </Box>
+        )) }
       </Flex>
-      <CodeEditor value={ data } id="source_code"/>
     </Box>
   );
 };

ui/address/contract/ContractWrite.tsx

-import { Alert } from '@chakra-ui/react';
 import _capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -43,7 +42,6 @@ const ContractWrite = ({ isProxy }: Props) => {
   const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string | Array<string>>) => {
     if (!isConnected) {
       throw new Error('Wallet is not connected');
-
     }
 
     try {
@@ -78,8 +76,8 @@ const ContractWrite = ({ isProxy }: Props) => {
             const networkName = (error.detectedNetwork as { name: string }).name;
             if (networkName) {
               throw new Error(
-                `You connected to ${ _capitalize(networkName) } chain in the wallet, 
-                but the current instance of Blockscout is for ${ config.network.name } chain`,
+                // eslint-disable-next-line max-len
+                `You connected to ${ _capitalize(networkName) } chain in the wallet, but the current instance of Blockscout is for ${ config.network.name } chain`,
               );
             }
           }
@@ -92,15 +90,7 @@ const ContractWrite = ({ isProxy }: Props) => {
   }, [ _contract, addressHash, isConnected, signer ]);
 
   const renderResult = React.useCallback((item: SmartContractWriteMethod, result: ContractMethodWriteResult) => {
-    if (!result || 'message' in result) {
-      return (
-        <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" wordBreak="break-all">
-          { result ? result.message : 'No result' }
-        </Alert>
-      );
-    }
-
-    return <ContractWriteResult hash={ result.hash as `0x${ string }` }/>;
+    return <ContractWriteResult result={ result }/>;
   }, []);
 
   const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {

ui/address/contract/ContractWriteResult.tsx

-import { Alert, Box, Link } from '@chakra-ui/react';
+import { Box, chakra, Link, Spinner } from '@chakra-ui/react';
 import React from 'react';
 import { useWaitForTransaction } from 'wagmi';
 
+import type { ContractMethodWriteResult } from './types';
+
 import link from 'lib/link/link';
 
 interface Props {
-  hash: `0x${ string }`;
+  result: ContractMethodWriteResult;
 }
 
-const ContractWriteResult = ({ hash }: Props) => {
+const ContractWriteResult = ({ result }: Props) => {
+  const txHash = result && 'hash' in result ? result.hash as `0x${ string }` : undefined;
   const txInfo = useWaitForTransaction({
-    hash,
+    hash: txHash,
   });
 
   // eslint-disable-next-line no-console
   console.log('__>__ txInfo', txInfo);
 
+  if (!result) {
+    return null;
+  }
+
+  const isErrorResult = 'message' in result;
+
+  const txLink = (
+    <Link href={ link('tx', { id: txHash }) }>View transaction details</Link>
+  );
+
+  const content = (() => {
+    if (isErrorResult) {
+      return (
+        <>
+          <span>Error: </span>
+          <span>{ result.message }</span>
+        </>
+      );
+    }
+
+    switch (txInfo.status) {
+      case 'success': {
+        return (
+          <>
+            <span>Transaction has been confirmed. </span>
+            { txLink }
+          </>
+        );
+      }
+
+      case 'loading': {
+        return (
+          <>
+            <Spinner size="sm" mr={ 3 }/>
+            <chakra.span verticalAlign="text-bottom">
+              { 'Waiting for transaction\'s confirmation. ' }
+              { txLink }
+            </chakra.span>
+          </>
+        );
+      }
+
+      case 'error': {
+        return (
+          <>
+            <span>Error: </span>
+            <span>{ txInfo.error ? txInfo.error.message : 'Something went wrong' } </span>
+            { txLink }
+          </>
+        );
+      }
+    }
+  })();
+
   return (
-    <>
-      <Alert status="info" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" flexDir="column" alignItems="flex-start">
-        <Box>Tx hash: <Link href={ link('tx', { id: hash }) }>{ hash }</Link></Box>
-        <Box>Status: { txInfo.status }</Box>
-      </Alert>
-      { txInfo.error && <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" wordBreak="break-all">{ txInfo.error.message }</Alert> }
-    </>
+    <Box
+      fontSize="sm"
+      pl={ 3 }
+      mt={ 3 }
+      alignItems="center"
+      whiteSpace="pre-wrap"
+      wordBreak="break-all"
+      color={ txInfo.status === 'error' || isErrorResult ? 'red.600' : undefined }
+    >
+      { content }
+    </Box>
   );
 };