decoded values for logs

ui/tx/logs/TxLogItem.tsx

@@ -22,6 +22,7 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
 
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const decodedTopics = decoded?.parameters.filter(({ indexed }) => indexed);
 
   return (
     <Grid
@@ -63,7 +64,15 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
       ) }
       <RowHeader>Topics</RowHeader>
       <GridItem>
-        { topics.filter(Boolean).map((item, index) => <TxLogTopic key={ index } hex={ item } index={ index }/>) }
+        { topics.filter(Boolean).map((item, index) => (
+          <TxLogTopic
+            key={ index }
+            hex={ item }
+            decoded={ decodedTopics?.[index - 1]?.value }
+            type={ decodedTopics?.[index - 1]?.type }
+            index={ index }
+          />
+        )) }
       </GridItem>
       <RowHeader>Data</RowHeader>
       <GridItem p={ 4 } fontSize="sm" borderRadius="md" bgColor={ dataBgColor }>

ui/tx/logs/TxLogTopic.tsx

 import { Flex, Button, Select, Box } from '@chakra-ui/react';
 import React from 'react';
 
+import AddressLink from 'ui/shared/address/AddressLink';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
   hex: string;
+  decoded?: string;
+  type?: string;
   index: number;
 }
 
-type DataType = 'Hex' | 'Dec'
+type DataType = 'Hex' | 'Dec';
 const OPTIONS: Array<DataType> = [ 'Hex', 'Dec' ];
 
-const TxLogTopic = ({ hex, index }: Props) => {
+const TxLogTopic = ({ hex, index, decoded, type }: Props) => {
   const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('Hex');
 
   const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectedDataType(event.target.value as DataType);
   }, []);
 
+  const content = (() => {
+    if (selectedDataType === 'Dec' && type === 'address' && decoded) {
+      return (
+        <AddressLink hash={ decoded }/>
+      );
+    }
+
+    const value = selectedDataType === 'Dec' && decoded ? decoded : hex;
+    return (
+      <Box overflow="hidden" whiteSpace="nowrap">
+        <HashStringShortenDynamic hash={ value }/>
+      </Box>
+    );
+  })();
+
   return (
     <Flex alignItems="center" px={{ base: 0, lg: 3 }} _notFirst={{ mt: 3 }} overflow="hidden" maxW="100%">
       <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
         { index }
       </Button>
-      <Select
-        size="sm"
-        borderRadius="base"
-        value={ selectedDataType }
-        onChange={ handleSelectChange }
-        focusBorderColor="none"
-        w="75px"
-        mr={ 3 }
-        flexShrink={ 0 }
-      >
-        { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
-      </Select>
-      <Box overflow="hidden" whiteSpace="nowrap">
-        <HashStringShortenDynamic hash={ hex }/>
-      </Box>
+      { decoded && (
+        <Select
+          size="sm"
+          borderRadius="base"
+          value={ selectedDataType }
+          onChange={ handleSelectChange }
+          focusBorderColor="none"
+          w="75px"
+          mr={ 3 }
+          flexShrink={ 0 }
+        >
+          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
+        </Select>
+      ) }
+      { content }
     </Flex>
   );
 };