Merge pull request #309 from blockscout/tx-contract-created

created contract tx state

types/api/transaction.ts

@@ -18,7 +18,7 @@ export interface Transaction {
   timestamp: string | null;
   confirmation_duration: Array<number>;
   from: AddressParam;
-  to: AddressParam;
+  to: AddressParam | null;
   created_contract: AddressParam;
   value: string;
   fee: Fee;
@@ -39,7 +39,7 @@ export interface Transaction {
   token_transfers: Array<TokenTransfer> | null;
   token_transfers_overflow: boolean;
   exchange_rate: string;
-  method: string;
+  method: string | null;
   tx_types: Array<TransactionType>;
   tx_tag: string | null;
 }

ui/tx/TxDetails.tsx

@@ -58,10 +58,11 @@ const TxDetails = () => {
     ...data.from.watchlist_names || [],
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
+  const toAddress = data.to && data.to.hash ? data.to : data.created_contract;
   const addressToTags = [
-    ...data.to.private_tags || [],
-    ...data.to.public_tags || [],
-    ...data.to.watchlist_names || [],
+    ...toAddress.private_tags || [],
+    ...toAddress.public_tags || [],
+    ...toAddress.watchlist_names || [],
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
   return (
@@ -143,31 +144,40 @@ const TxDetails = () => {
         ) }
       </DetailsInfoItem>
       <DetailsInfoItem
-        title={ data.to.is_contract ? 'Interacted with contract' : 'To' }
+        title={ toAddress.is_contract ? 'Interacted with contract' : 'To' }
         hint="Address (external or contract) receiving the transaction."
         flexWrap={{ base: 'wrap', lg: 'nowrap' }}
         columnGap={ 3 }
       >
-        <Address>
-          <AddressIcon hash={ data.to.hash }/>
-          <AddressLink ml={ 2 } hash={ data.to.hash }/>
-          <CopyToClipboard text={ data.to.hash }/>
-        </Address>
-        { data.to.is_contract && data.result === 'success' && (
+        { data.to && data.to.hash ? (
+          <Address>
+            <AddressIcon hash={ toAddress.hash }/>
+            <AddressLink ml={ 2 } hash={ toAddress.hash }/>
+            <CopyToClipboard text={ toAddress.hash }/>
+          </Address>
+        ) : (
+          <Flex width="100%" whiteSpace="pre">
+            <span>[Contract </span>
+            <AddressLink hash={ toAddress.hash }/>
+            <span> created]</span>
+            <CopyToClipboard text={ toAddress.hash }/>
+          </Flex>
+        ) }
+        { toAddress.name && <Text>{ toAddress.name }</Text> }
+        { toAddress.is_contract && data.result === 'success' && (
           <Tooltip label="Contract execution completed">
             <chakra.span display="inline-flex">
               <Icon as={ successIcon } boxSize={ 4 } color="green.500" cursor="pointer"/>
             </chakra.span>
           </Tooltip>
         ) }
-        { data.to.is_contract && Boolean(data.status) && data.result !== 'success' && (
+        { toAddress.is_contract && Boolean(data.status) && data.result !== 'success' && (
           <Tooltip label="Error occured during contract execution">
             <chakra.span display="inline-flex">
               <Icon as={ errorIcon } boxSize={ 4 } color="red.500" cursor="pointer"/>
             </chakra.span>
           </Tooltip>
         ) }
-        { data.to.name && <Text>{ data.to.name }</Text> }
         { addressToTags.length > 0 && (
           <Flex columnGap={ 3 }>
             { addressToTags }

ui/txs/TxsListItem.tsx

@@ -33,6 +33,7 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const dataTo = tx.to && tx.to.hash ? tx.to : tx.created_contract;
 
   return (
     <>
@@ -99,10 +100,10 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
             color="gray.500"
           />
           <Address width="calc((100%-40px)/2)">
-            <AddressIcon hash={ tx.to.hash }/>
+            <AddressIcon hash={ dataTo.hash }/>
             <AddressLink
-              hash={ tx.to.hash }
-              alias={ tx.to.name }
+              hash={ dataTo.hash }
+              alias={ dataTo.name }
               fontWeight="500"
               ml={ 2 }
             />

ui/txs/TxsTableItem.tsx

@@ -44,12 +44,14 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
     </Address>
   );
 
+  const dataTo = tx.to && tx.to.hash ? tx.to : tx.created_contract;
+
   const addressTo = (
     <Address>
-      <Tooltip label={ tx.to.implementation_name }>
-        <Box display="flex"><AddressIcon hash={ tx.to.hash }/></Box>
+      <Tooltip label={ dataTo.implementation_name }>
+        <Box display="flex"><AddressIcon hash={ dataTo.hash }/></Box>
       </Tooltip>
-      <AddressLink hash={ tx.to.hash } alias={ tx.to.name } fontWeight="500" ml={ 2 } truncation="constant"/>
+      <AddressLink hash={ dataTo.hash } alias={ dataTo.name } fontWeight="500" ml={ 2 } truncation="constant"/>
     </Address>
   );
 
@@ -92,13 +94,13 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
         </VStack>
       </Td>
       <Td>
-        <TruncatedTextTooltip label={ tx.method }>
-          <Tag
-            colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' }
-          >
-            { tx.method }
-          </Tag>
-        </TruncatedTextTooltip>
+        { tx.method ? (
+          <TruncatedTextTooltip label={ tx.method }>
+            <Tag colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' }>
+              { tx.method }
+            </Tag>
+          </TruncatedTextTooltip>
+        ) : '-' }
       </Td>
       <Td>
         { tx.block && <Link href={ link('block', { id: tx.block.toString() }) }>{ tx.block }</Link> }