tx fixes

ui/tx/TxDetails.tsx

@@ -65,6 +65,21 @@ const TxDetails = () => {
     ...toAddress.watchlist_names || [],
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
+  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="green.500" cursor="pointer"/>
+      </chakra.span>
+    </Tooltip>
+  ) : null;
+  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="red.500" cursor="pointer"/>
+      </chakra.span>
+    </Tooltip>
+  ) : null;
+
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
       { socketStatus && (
@@ -144,40 +159,30 @@ const TxDetails = () => {
         ) }
       </DetailsInfoItem>
       <DetailsInfoItem
-        title={ toAddress.is_contract ? 'Interacted with contract' : 'To' }
+        title={ data.to?.is_contract ? 'Interacted with contract' : 'To' }
         hint="Address (external or contract) receiving the transaction."
         flexWrap={{ base: 'wrap', lg: 'nowrap' }}
         columnGap={ 3 }
       >
         { data.to && data.to.hash ? (
-          <Address>
+          <Address alignItems="center">
             <AddressIcon hash={ toAddress.hash }/>
             <AddressLink ml={ 2 } hash={ toAddress.hash }/>
+            { executionSuccessBadge }
+            { executionFailedBadge }
             <CopyToClipboard text={ toAddress.hash }/>
           </Address>
         ) : (
-          <Flex width={{ base: '100%', lg: 'auto' }} whiteSpace="pre">
+          <Flex width={{ base: '100%', lg: 'auto' }} whiteSpace="pre" alignItems="center">
             <span>[Contract </span>
             <AddressLink hash={ toAddress.hash }/>
             <span> created]</span>
+            { executionSuccessBadge }
+            { executionFailedBadge }
             <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>
-        ) }
-        { 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>
-        ) }
         { addressToTags.length > 0 && (
           <Flex columnGap={ 3 }>
             { addressToTags }

ui/tx/TxRawTrace.tsx

@@ -46,6 +46,10 @@ const TxRawTrace = () => {
     );
   }
 
+  if (data.length === 0) {
+    return <span>There is no raw trace for this transaction.</span>;
+  }
+
   const text = JSON.stringify(data, undefined, 4);
 
   return (

ui/txs/TxsSkeletonDesktop.tsx

@@ -11,8 +11,8 @@ const TxsInternalsSkeletonDesktop = ({ showBlockInfo }: Props) => {
   return (
     <Box mb={ 8 }>
       <SkeletonTable columns={ showBlockInfo ?
-        [ '32px', '20%', '18%', '15%', '11%', '292px', '18%', '18%' ] :
-        [ '32px', '20%', '18%', '15%', '292px', '18%', '18%' ]
+        [ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
+        [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
       }/>
     </Box>
   );

ui/txs/TxsTable.tsx

@@ -27,21 +27,21 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo, curr
       <TheadSticky top={ top }>
         <Tr>
           <Th width="54px"></Th>
-          <Th width="18%">Txn hash</Th>
-          <Th width="20%">Type</Th>
-          <Th width="15%">Method</Th>
-          { showBlockInfo && <Th width="11%">Block</Th> }
+          <Th width="22%">Txn hash</Th>
+          <Th width="160px">Type</Th>
+          <Th width="20%">Method</Th>
+          { showBlockInfo && <Th width="18%">Block</Th> }
           <Th width={{ xl: '128px', base: '66px' }}>From</Th>
           <Th width={{ xl: currentAddress ? '48px' : '36px', base: '0' }}></Th>
           <Th width={{ xl: '128px', base: '66px' }}>To</Th>
-          <Th width="18%" isNumeric>
+          <Th width="20%" isNumeric>
             <Link onClick={ sort('val') } display="flex" justifyContent="end">
               { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
               { sorting === 'val-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
               { `Value ${ appConfig.network.currency.symbol }` }
             </Link>
           </Th>
-          <Th width="18%" isNumeric pr={ 5 }>
+          <Th width="20%" isNumeric pr={ 5 }>
             <Link onClick={ sort('fee') } display="flex" justifyContent="end">
               { sorting === 'fee-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
               { sorting === 'fee-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }