input data

data/tx.ts

@@ -33,4 +33,6 @@ export const tx = {
   },
   nonce: 4,
   position: 342,
+  // eslint-disable-next-line max-len
+  input_hex: '0x42842e0e0000000000000000000000007767dac225a233ea1055d79fb227b1696d538b75000000000000000000000000fc3017c31fe752fc48e904050ea5d6edfc38a1b00000000000000000000000000000000000000000000000000000000000000e3b',
 };

theme/components/Textarea.ts

 import { Textarea as TextareaComponent } from '@chakra-ui/react';
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
+const variantFilledInactive = defineStyle((props) => {
+  return {
+    bgColor: mode('blackAlpha.50', 'whiteAlpha.50')(props),
+  };
+});
+
 const sizes = {
   md: defineStyle({
     fontSize: 'md',
@@ -24,6 +31,7 @@ const Textarea = defineStyleConfig({
   sizes,
   variants: {
     outline: defineStyle(getOutlinedFieldStyles),
+    filledInactive: variantFilledInactive,
   },
   defaultProps: {
     variant: 'outline',

ui/shared/DecodedInputData.tsx

+import { Flex, Text, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+
+interface RowProps {
+  children: React.ReactNode;
+  isLast?: boolean;
+  name: string;
+  type: string;
+}
+
+const PADDING = 4;
+const GAP = 5;
+
+const TableRow = ({ isLast, name, type, children }: RowProps) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <>
+      <GridItem
+        pl={ PADDING }
+        pr={ GAP }
+        pt={ GAP }
+        pb={ isLast ? PADDING : 0 }
+        bgColor={ bgColor }
+        borderBottomLeftRadius={ isLast ? 'md' : 'none' }
+      >
+        { name }
+      </GridItem>
+      <GridItem
+        pr={ GAP }
+        pt={ GAP }
+        pb={ isLast ? PADDING : 0 }
+        bgColor={ bgColor }
+      >
+        { type }
+      </GridItem>
+      <GridItem
+        pr={ PADDING }
+        pt={ GAP }
+        pb={ isLast ? PADDING : 0 }
+        bgColor={ bgColor }
+        borderBottomRightRadius={ isLast ? 'md' : 'none' }
+      >
+        { children }
+      </GridItem>
+    </>
+  );
+};
+
+const DecodedInputData = () => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <Grid gridTemplateColumns="minmax(80px, auto) minmax(80px, auto) 1fr" fontSize="sm" lineHeight={ 5 } w="100%">
+      { /* FIRST PART OF BLOCK */ }
+      <GridItem fontWeight={ 600 } pl={ PADDING } pr={ GAP }>Method Id</GridItem>
+      <GridItem colSpan={ 2 } pr={ PADDING }>0xddf252ad</GridItem>
+      <GridItem
+        py={ 2 }
+        mt={ 2 }
+        pl={ PADDING }
+        pr={ GAP }
+        fontWeight={ 600 }
+        borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+        borderTopWidth="1px"
+      >
+        Call
+      </GridItem>
+      <GridItem
+        py={ 2 }
+        mt={ 2 }
+        colSpan={ 2 }
+        pr={ PADDING }
+        borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+        borderTopWidth="1px"
+      >
+        Transfer(address indexed from, address indexed to, uint256 indexed tokenId)
+      </GridItem>
+      { /* TABLE INSIDE OF BLOCK */ }
+      <GridItem
+        pl={ PADDING }
+        pr={ GAP }
+        pt={ PADDING }
+        pb={ 1 }
+        bgColor={ bgColor }
+        fontWeight={ 600 }
+      >
+        Name
+      </GridItem>
+      <GridItem
+        pr={ GAP }
+        pt={ PADDING }
+        pb={ 1 }
+        bgColor={ bgColor }
+        fontWeight={ 600 }
+      >
+        Type
+      </GridItem>
+      <GridItem
+        pr={ PADDING }
+        pt={ PADDING }
+        pb={ 1 }
+        bgColor={ bgColor }
+        fontWeight={ 600 }
+      >
+        Data
+      </GridItem>
+      <TableRow name="from" type="address">
+        <AddressLinkWithTooltip address="0x0000000000000000000000000000000000000000" columnGap={ 0 } justifyContent="space-between" fontWeight="400"/>
+      </TableRow>
+      <TableRow name="from" type="address">
+        <AddressLinkWithTooltip address="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718" columnGap={ 0 } justifyContent="space-between" fontWeight="400"/>
+      </TableRow>
+      <TableRow name="tokenId" type="uint256" isLast>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Text>116842</Text>
+          <CopyToClipboard text="116842"/>
+        </Flex>
+      </TableRow>
+    </Grid>
+  );
+};
+
+export default DecodedInputData;

ui/shared/RawInputData.tsx

+import { Box, Flex, Select, Textarea } from '@chakra-ui/react';
+import React from 'react';
+
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+
+type DataType = 'Hex' | 'UTF-8'
+const OPTIONS: Array<DataType> = [ 'Hex', 'UTF-8' ];
+
+interface Props {
+  hex: string;
+}
+
+const RawInputData = ({ hex }: Props) => {
+  const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('Hex');
+
+  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedDataType(event.target.value as DataType);
+  }, []);
+
+  return (
+    <Box w="100%">
+      <Flex justifyContent="space-between" alignItems="center">
+        <Select size="sm" borderRadius="base" value={ selectedDataType } onChange={ handleSelectChange } focusBorderColor="none" w="auto">
+          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
+        </Select>
+        <CopyToClipboard text={ hex }/>
+      </Flex>
+      <Textarea
+        value={ selectedDataType === 'Hex' ? hex : 'UTF-8 equivalent' }
+        w="100%"
+        maxH="220px"
+        mt={ 2 }
+        p={ 4 }
+        variant="filledInactive"
+        fontSize="sm"
+      />
+    </Box>
+  );
+};
+
+export default RawInputData;

ui/tx/TxDetails.tsx

@@ -8,7 +8,9 @@ import dayjs from 'lib/date/dayjs';
 import AddressIcon from 'ui/shared/AddressIcon';
 import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DecodedInputData from 'ui/shared/DecodedInputData';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import RawInputData from 'ui/shared/RawInputData';
 import Utilization from 'ui/shared/Utilization';
 import type { Props as TxStatusProps } from 'ui/tx/TxStatus';
 import TxStatus from 'ui/tx/TxStatus';
@@ -167,22 +169,16 @@ const TxDetails = () => {
             </Box>
           </DetailsInfoItem>
           <DetailsInfoItem
-            title="Other"
-            hint="Other data related to this transaction."
+            title="Raw input"
+            hint="Binary data included with the transaction. See logs tab for additional info."
           >
-            <Box>
-              <Text as="span" fontWeight="500">Txn type: </Text>
-              <Text fontWeight="600" as="span">{ tx.type.value }</Text>
-              <Text fontWeight="400" as="span" ml={ 1 }>({ tx.type.eip })</Text>
-            </Box>
-            <Box { ...leftSeparatorStyles }>
-              <Text as="span" fontWeight="500">Nonce: </Text>
-              <Text fontWeight="600" as="span">{ tx.nonce }</Text>
-            </Box>
-            <Box { ...leftSeparatorStyles }>
-              <Text as="span" fontWeight="500">Position: </Text>
-              <Text fontWeight="600" as="span">{ tx.position }</Text>
-            </Box>
+            <RawInputData hex={ tx.input_hex }/>
+          </DetailsInfoItem>
+          <DetailsInfoItem
+            title="Decoded input data"
+            hint="hmmmmmmmmmmm"
+          >
+            <DecodedInputData/>
           </DetailsInfoItem>
         </>
       ) }