optional to address in tx

types/api/transaction.ts

@@ -9,16 +9,9 @@ export type TransactionRevertReason = {
   raw: string;
 } | DecodedInput;
 
-export type Transaction = (
-  {
-    to: AddressParam;
-    created_contract: null;
-  } |
-  {
-    to: null;
-    created_contract: AddressParam;
-  }
-) & {
+export type Transaction = {
+  to: AddressParam | null;
+  created_contract: AddressParam | null;
   hash: string;
   result: string;
   confirmations: number;

ui/home/LatestTxsItem.tsx

@@ -97,18 +97,20 @@ const LatestTxsItem = ({ tx }: Props) => {
               mx={ 2 }
               color="gray.500"
             />
-            <Address>
-              <AddressIcon address={ dataTo }/>
-              <AddressLink
-                type="address"
-                hash={ dataTo.hash }
-                alias={ dataTo.name }
-                fontWeight="500"
-                ml={ 2 }
-                truncation="constant"
-                fontSize="sm"
-              />
-            </Address>
+            { dataTo && (
+              <Address>
+                <AddressIcon address={ dataTo }/>
+                <AddressLink
+                  type="address"
+                  hash={ dataTo.hash }
+                  alias={ dataTo.name }
+                  fontWeight="500"
+                  ml={ 2 }
+                  truncation="constant"
+                  fontSize="sm"
+                />
+              </Address>
+            ) }
           </Flex>
           <Flex fontSize="sm" justifyContent="end" flexDirection={{ base: 'column', lg: 'row' }}>
             <Box mr={{ base: 0, lg: 3 }} mb={{ base: 2, lg: 0 }}>

ui/tx/TxDetails.tsx

@@ -86,21 +86,21 @@ const TxDetails = () => {
 
   const toAddress = data.to ? data.to : data.created_contract;
   const addressToTags = [
-    ...toAddress.private_tags || [],
-    ...toAddress.public_tags || [],
-    ...toAddress.watchlist_names || [],
+    ...toAddress?.private_tags || [],
+    ...toAddress?.public_tags || [],
+    ...toAddress?.watchlist_names || [],
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
   const actionsExist = data.actions && data.actions.length > 0;
 
-  const executionSuccessBadge = toAddress.is_contract && data.result === 'success' ? (
+  const executionSuccessBadge = toAddress?.is_contract && data.result === 'success' ? (
     <Tooltip label="Contract execution completed">
       <chakra.span display="inline-flex" ml={ 2 } mr={ 1 }>
         <Icon as={ successIcon } boxSize={ 4 } color={ executionSuccessIconColor } cursor="pointer"/>
       </chakra.span>
     </Tooltip>
   ) : null;
-  const executionFailedBadge = toAddress.is_contract && Boolean(data.status) && data.result !== 'success' ? (
+  const executionFailedBadge = toAddress?.is_contract && Boolean(data.status) && data.result !== 'success' ? (
     <Tooltip label="Error occurred during contract execution">
       <chakra.span display="inline-flex" ml={ 2 } mr={ 1 }>
         <Icon as={ errorIcon } boxSize={ 4 } color="error" cursor="pointer"/>
@@ -214,29 +214,35 @@ const TxDetails = () => {
         flexWrap={{ base: 'wrap', lg: 'nowrap' }}
         columnGap={ 3 }
       >
-        { data.to && data.to.hash ? (
-          <Address alignItems="center">
-            <AddressIcon address={ toAddress }/>
-            <AddressLink type="address" ml={ 2 } hash={ toAddress.hash }/>
-            { executionSuccessBadge }
-            { executionFailedBadge }
-            <CopyToClipboard text={ toAddress.hash }/>
-          </Address>
+        { toAddress ? (
+          <>
+            { data.to && data.to.hash ? (
+              <Address alignItems="center">
+                <AddressIcon address={ toAddress }/>
+                <AddressLink type="address" ml={ 2 } hash={ toAddress.hash }/>
+                { executionSuccessBadge }
+                { executionFailedBadge }
+                <CopyToClipboard text={ toAddress.hash }/>
+              </Address>
+            ) : (
+              <Flex width={{ base: '100%', lg: 'auto' }} whiteSpace="pre" alignItems="center">
+                <span>[Contract </span>
+                <AddressLink type="address" hash={ toAddress.hash }/>
+                <span> created]</span>
+                { executionSuccessBadge }
+                { executionFailedBadge }
+                <CopyToClipboard text={ toAddress.hash }/>
+              </Flex>
+            ) }
+            { toAddress.name && <Text>{ toAddress.name }</Text> }
+            { addressToTags.length > 0 && (
+              <Flex columnGap={ 3 }>
+                { addressToTags }
+              </Flex>
+            ) }
+          </>
         ) : (
-          <Flex width={{ base: '100%', lg: 'auto' }} whiteSpace="pre" alignItems="center">
-            <span>[Contract </span>
-            <AddressLink type="address" hash={ toAddress.hash }/>
-            <span> created]</span>
-            { executionSuccessBadge }
-            { executionFailedBadge }
-            <CopyToClipboard text={ toAddress.hash }/>
-          </Flex>
-        ) }
-        { toAddress.name && <Text>{ toAddress.name }</Text> }
-        { addressToTags.length > 0 && (
-          <Flex columnGap={ 3 }>
-            { addressToTags }
-          </Flex>
+          <span>[ Contract creation ]</span>
         ) }
       </DetailsInfoItem>
       { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash }/> }

ui/txs/TxsListItem.tsx

@@ -112,17 +112,19 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
               color="gray.500"
             />
           ) }
-        <Address maxWidth={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
-          <AddressIcon address={ dataTo }/>
-          <AddressLink
-            type="address"
-            hash={ dataTo.hash }
-            alias={ dataTo.name }
-            fontWeight="500"
-            ml={ 2 }
-            isDisabled={ isIn }
-          />
-        </Address>
+        { dataTo ? (
+          <Address maxWidth={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
+            <AddressIcon address={ dataTo }/>
+            <AddressLink
+              type="address"
+              hash={ dataTo.hash }
+              alias={ dataTo.name }
+              fontWeight="500"
+              ml={ 2 }
+              isDisabled={ isIn }
+            />
+          </Address>
+        ) : '-' }
       </Flex>
       <Box mt={ 2 }>
         <Text as="span">Value { appConfig.network.currency.symbol } </Text>

ui/txs/TxsTableItem.tsx

@@ -39,7 +39,7 @@ type Props = {
 const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
   const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
-  const isIn = Boolean(currentAddress && currentAddress === dataTo.hash);
+  const isIn = Boolean(currentAddress && currentAddress === dataTo?.hash);
 
   const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
 
@@ -50,12 +50,12 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
     </Address>
   );
 
-  const addressTo = (
+  const addressTo = dataTo ? (
     <Address>
       <AddressIcon address={ dataTo }/>
       <AddressLink type="address" hash={ dataTo.hash } alias={ dataTo.name } fontWeight="500" ml={ 2 } truncation="constant" isDisabled={ isIn }/>
     </Address>
-  );
+  ) : '-';
 
   return (
     <Tr