decoding for topics

lib/hexToAddress.ts

+export default function hexToAddress(hex: string) {
+  return hex.slice(0, 2) + hex.slice(26);
+}

ui/tx/logs/TxLogItem.tsx

@@ -22,7 +22,6 @@ 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
@@ -69,8 +68,6 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
           <TxLogTopic
             key={ index }
             hex={ item }
-            decoded={ decodedTopics?.[index - 1]?.value }
-            type={ decodedTopics?.[index - 1]?.type }
             index={ index }
           />
         )) }

ui/tx/logs/TxLogTopic.tsx

 import { Flex, Button, Select, Box } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
+import hexToAddress from 'lib/hexToAddress';
+import hexToUtf8 from 'lib/hexToUtf8';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
   hex: string;
-  decoded?: string;
-  type?: string;
   index: number;
 }
 
-type DataType = 'Hex' | 'Dec';
-const OPTIONS: Array<DataType> = [ 'Hex', 'Dec' ];
+type DataType = 'hex' | 'text' | 'address' | 'number';
 
-const TxLogTopic = ({ hex, index, decoded, type }: Props) => {
-  const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('Hex');
+const VALUE_CONVERTERS: Record<DataType, (hex: string) => string> = {
+  hex: (hex) => hex,
+  text: hexToUtf8,
+  address: hexToAddress,
+  number: (hex) => BigInt(hex).toString(),
+};
+const OPTIONS: Array<DataType> = [ 'hex', 'address', 'text', 'number' ];
+
+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);
   }, []);
 
+  const value = VALUE_CONVERTERS[selectedDataType.toLowerCase() as Lowercase<DataType>](hex);
+
   const content = (() => {
-    if (selectedDataType === 'Dec' && type === 'address' && decoded) {
-      return (
-        <AddressLink hash={ decoded }/>
-      );
-    }
+    switch (selectedDataType) {
+      case 'hex':
+      case 'number':
+      case 'text': {
+        return (
+          <>
+            <Box overflow="hidden" whiteSpace="nowrap">
+              <HashStringShortenDynamic hash={ value }/>
+            </Box>
+            <CopyToClipboard text={ value }/>
+          </>
+        );
+      }
 
-    const value = selectedDataType === 'Dec' && decoded ? decoded : hex;
-    return (
-      <Box overflow="hidden" whiteSpace="nowrap">
-        <HashStringShortenDynamic hash={ value }/>
-      </Box>
-    );
+      case 'address': {
+        return (
+          <AddressLink hash={ hexToAddress(hex) }/>
+        );
+      }
+    }
   })();
 
   return (
@@ -41,18 +60,18 @@ const TxLogTopic = ({ hex, index, decoded, type }: Props) => {
       <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
         { index }
       </Button>
-      { decoded && (
+      { index !== 0 && (
         <Select
           size="sm"
           borderRadius="base"
           value={ selectedDataType }
           onChange={ handleSelectChange }
           focusBorderColor="none"
-          w="75px"
           mr={ 3 }
           flexShrink={ 0 }
+          w="auto"
         >
-          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
+          { OPTIONS.map((option) => <option key={ option } value={ option }>{ capitalize(option) }</option>) }
         </Select>
       ) }
       { content }