Merge pull request #146 from blockscout/tx-page-logs

tx page: logs tab

data/txLogs.ts

+export const data = [
+  {
+    address: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01',
+    topics: [
+      { hex: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef' },
+      { hex: '0x000000000000000000000000def171fe48cf0115b1d80b88dc8eab59176fee57' },
+      { hex: '0x000000000000000000000000c465c0a16228ef6fe1bf29c04fdb04bb797fd537' },
+    ],
+    data: '0x000000000000000000000000000000000000000000000000019faae14eb88000',
+  },
+  {
+    address: '0x73968b9a57c6e53d41345fd57a6e6ae27d6cdb2f',
+    topics: [
+      { hex: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef' },
+      { hex: '0x000000000000000000000000c465c0a16228ef6fe1bf29c04fdb04bb797fd537' },
+      { hex: '0x0000000000000000000000008453d9385af5f49edad9905345cd2411b5c5831b' },
+    ],
+    data: '0x000000000000000000000000000000000000000000000013b6ee62022c95ced4',
+  },
+];

ui/pages/Transaction.tsx

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

ui/tx/TxLogs.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { data } from 'data/txLogs';
+import TxLogItem from 'ui/tx/logs/TxLogItem';
+
+const TxLogs = () => {
+  return (
+    <Box>
+      { data.map((item, index) => <TxLogItem key={ index } { ...item } index={ index }/>) }
+    </Box>
+  );
+};
+
+export default TxLogs;

ui/tx/logs/TxLogItem.tsx

+import { SearchIcon } from '@chakra-ui/icons';
+import { Text, Grid, GridItem, Link, Tooltip, Button, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import AddressIcon from 'ui/shared/AddressIcon';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import DecodedInputData from 'ui/shared/DecodedInputData';
+import TxLogTopic from 'ui/tx/logs/TxLogTopic';
+
+interface Props {
+  address: string;
+  topics: Array<{ hex: string }>;
+  data: string;
+  index: number;
+}
+
+const RowHeader = ({ children }: { children: React.ReactNode }) => <GridItem><Text fontWeight={ 500 }>{ children }</Text></GridItem>;
+
+const TxLogItem = ({ address, index, topics, data }: Props) => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <Grid gridTemplateColumns="200px 1fr" gap={ 8 } py={ 8 } _notFirst={{ borderTopWidth: '1px', borderTopColor: borderColor }}>
+      <RowHeader>Address</RowHeader>
+      <GridItem display="flex" alignItems="center">
+        <AddressIcon address={ address }/>
+        <AddressLinkWithTooltip address={ address } columnGap={ 0 } ml={ 2 } fontWeight="400" withCopy={ false }/>
+        <Tooltip label="Find matches topic">
+          <Link ml={ 2 }>
+            <SearchIcon w={ 5 } h={ 5 }/>
+          </Link>
+        </Tooltip>
+        <Tooltip label="Log index">
+          <Button variant="outline" isActive ml="auto" size="sm" fontWeight={ 400 }>
+            { index }
+          </Button>
+        </Tooltip>
+      </GridItem>
+      <RowHeader>Decode input data</RowHeader>
+      <GridItem>
+        <DecodedInputData/>
+      </GridItem>
+      <RowHeader>Topics</RowHeader>
+      <GridItem>
+        { topics.map((item, index) => <TxLogTopic key={ index } { ...item } index={ index }/>) }
+      </GridItem>
+      <RowHeader>Data</RowHeader>
+      <GridItem p={ 4 } fontSize="sm" borderRadius="md" bgColor={ dataBgColor }>
+        { data }
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default React.memo(TxLogItem);

ui/tx/logs/TxLogTopic.tsx

+import { Flex, Button, Text, Select } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  hex: string;
+  index: number;
+}
+
+type DataType = 'Hex' | 'Dec'
+const OPTIONS: Array<DataType> = [ 'Hex', 'Dec' ];
+
+const TxLogTopic = ({ hex, index }: Props) => {
+  const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('Hex');
+
+  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedDataType(event.target.value as DataType);
+  }, []);
+
+  return (
+    <Flex alignItems="center" px={ 3 } _notFirst={{ mt: 3 }}>
+      <Button variant="outline" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
+        { index }
+      </Button>
+      { /* temporary condition juse to show different states of the component */ }
+      { /* delete when ther will be real data */ }
+      { index > 0 && (
+        <Select size="sm" borderRadius="base" value={ selectedDataType } onChange={ handleSelectChange } focusBorderColor="none" w="75px" mr={ 3 }>
+          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
+        </Select>
+      ) }
+      <Text>{ hex }</Text>
+    </Flex>
+  );
+};
+
+export default React.memo(TxLogTopic);