table layout

data/txInternal.ts

+export const data = [
+  {
+    id: 1,
+    type: 'call',
+    status: 'success' as const,
+    from: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01',
+    to: '0xF7A558692dFB5F456e291791da7FAE8Dd046574e',
+    value: 0.25207646303,
+    gasLimit: 369472,
+  },
+  {
+    id: 2,
+    type: 'delegate call',
+    status: 'error' as const,
+    from: '0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45',
+    to: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01',
+    value: 0.5633333,
+    gasLimit: 340022,
+  },
+  {
+    id: 3,
+    type: 'static call',
+    status: 'success' as const,
+    from: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
+    to: '0x35317007D203b8a86CA727ad44E473E40450E378',
+    value: 0.421152366,
+    gasLimit: 509333,
+  },
+];

ui/pages/Transaction.tsx

@@ -12,6 +12,7 @@ import useBasePath from 'lib/hooks/useBasePath';
 import Page from 'ui/shared/Page';
 import PageHeader from 'ui/shared/PageHeader';
 import TxDetails from 'ui/tx/TxDetails';
+import TxInternals from 'ui/tx/TxInternals';
 
 interface Tab {
   type: 'details' | 'internal_txn' | 'logs' | 'raw_trace' | 'state';
@@ -22,7 +23,7 @@ interface Tab {
 
 const TABS: Array<Tab> = [
   { type: 'details', path: '', name: 'Details', component: <TxDetails/> },
-  { type: 'internal_txn', path: '/internal-transactions', name: 'Internal txn' },
+  { type: 'internal_txn', path: '/internal-transactions', name: 'Internal txn', component: <TxInternals/> },
   { type: 'logs', path: '/logs', name: 'Logs' },
   { type: 'state', path: '/state', name: 'State' },
   { type: 'raw_trace', path: '/raw-trace', name: 'Raw trace' },

ui/tx/TxInternals.tsx

+import { Box, Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import React from 'react';
+
+import { data } from 'data/txInternal';
+import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
+
+const TxInternals = () => {
+  return (
+    <Box>
+      <TableContainer width="100%">
+        <Table variant="simple" minWidth="950px">
+          <Thead>
+            <Tr>
+              <Th width="20%">Type</Th>
+              <Th width="calc(20% + 40px)" pr="0">From</Th>
+              <Th width="calc(20% - 40px)" pl="0">To</Th>
+              <Th width="20%" isNumeric>Value</Th>
+              <Th width="20%" isNumeric>Gas limit</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            { data.map((item) => (
+              <TxInternalsTableItem
+                key={ item.id }
+                { ...item }
+              />
+            )) }
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default TxInternals;

ui/tx/internals/TxInternalsTableItem.tsx

+import { Tr, Td, Tag, Flex, Icon } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
+import React from 'react';
+
+import rightArrowIcon from 'icons/arrows/right.svg';
+import AddressIcon from 'ui/shared/AddressIcon';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import TxStatus from 'ui/tx/TxStatus';
+
+interface Props {
+  type: string;
+  status: 'success' | 'error';
+  from: string;
+  to: string;
+  value: number;
+  gasLimit: number;
+}
+
+const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props) => {
+  return (
+    <Tr alignItems="top">
+      <Td>
+        <Tag colorScheme="cyan" mr={ 2 }>{ capitalize(type) }</Tag>
+        <TxStatus status={ status }/>
+      </Td>
+      <Td pr="0">
+        <Flex alignItems="center">
+          <AddressIcon address={ from }/>
+          <AddressLinkWithTooltip address={ from } fontWeight="500" withCopy={ false } ml={ 2 }/>
+          <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
+        </Flex>
+      </Td>
+      <Td pl="0">
+        <Flex alignItems="center">
+          <AddressIcon address={ to }/>
+          <AddressLinkWithTooltip address={ to } fontWeight="500" withCopy={ false } ml={ 2 }/>
+        </Flex>
+      </Td>
+      <Td isNumeric>
+        { value }
+      </Td>
+      <Td isNumeric>
+        { gasLimit.toLocaleString('en') }
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(TxInternalTableItem);