tx state fixes

ui/tx/state/TxStateListItem.tsx

-import { AccordionItem, AccordionButton, AccordionIcon, Button, Flex, Text, Link, StatArrow, Stat, AccordionPanel } from '@chakra-ui/react';
+import { AccordionItem, AccordionButton, AccordionIcon, Button, Box, Flex, Text, Link, StatArrow, Stat, AccordionPanel } from '@chakra-ui/react';
 import React from 'react';
 
 import type ArrayElement from 'types/utils/ArrayElement';
@@ -10,7 +10,6 @@ import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import TextSeparator from 'ui/shared/TextSeparator';
 
 import TxStateStorageItem from './TxStateStorageItem';
 
@@ -23,18 +22,14 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
 
   return (
     <AccountListItemMobile>
-      <AccordionItem isDisabled={ !hasStorageData } border={ 0 } w="100%" display="flex" flexDirection="column" rowGap={ 3 }>
+      <AccordionItem isDisabled={ !hasStorageData } border={ 0 } w="100%" display="flex" flexDirection="column">
         { ({ isExpanded }) => (
           <>
-            <Flex>
-              <Address flexGrow={ 1 }>
-                <AddressIcon hash={ address }/>
-                <AddressLink hash={ address } fontWeight="500" ml={ 2 }/>
-              </Address>
+            <Flex mb={ 6 }>
               <AccordionButton
                 _hover={{ background: 'unset' }}
                 padding="0"
-                ml={ 4 }
+                mr={ 5 }
                 w="auto"
               >
                 <Button
@@ -54,36 +49,47 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
                 </Button>
                 <AccordionIcon color="blue.600" width="30px"/>
               </AccordionButton>
-            </Flex>
-            <Flex rowGap={ 2 } flexDir="column" fontSize="sm">
-              <Text fontWeight={ 600 }>Miner</Text>
-              <Link>{ miner }</Link>
-            </Flex>
-            <Flex rowGap={ 2 } flexDir="column" fontSize="sm">
-              <Text fontWeight={ 600 }>Before</Text>
-              <Flex>
-                <Text>{ before.balance } { selectedNetwork?.currency }</Text>
-                <TextSeparator/>
-                { typeof before.nonce !== 'undefined' && <Text>Nonce:{ nbsp }{ before.nonce }</Text> }
-              </Flex>
-            </Flex>
-            <Flex rowGap={ 2 } flexDir="column" fontSize="sm">
-              <Text fontWeight={ 600 }>After</Text>
-              <Text>{ after.balance } { selectedNetwork?.currency }</Text>
-              { typeof after.nonce !== 'undefined' && <Text>Nonce:{ nbsp }{ after.nonce }</Text> }
-            </Flex>
-            <Flex rowGap={ 2 } flexDir="column" fontSize="sm">
-              <Text fontWeight={ 600 }>State difference</Text>
-              <Stat>
-                { diff } { selectedNetwork?.currency }
-                <StatArrow ml={ 2 } type={ Number(diff) > 0 ? 'increase' : 'decrease' }/>
-              </Stat>
+              <Address flexGrow={ 1 }>
+                <AddressIcon hash={ address }/>
+                <AddressLink hash={ address } ml={ 2 }/>
+              </Address>
             </Flex>
             { hasStorageData && (
               <AccordionPanel fontWeight={ 500 } p={ 0 }>
                 { storage?.map((storageItem, index) => <TxStateStorageItem key={ index } storageItem={ storageItem }/>) }
               </AccordionPanel>
             ) }
+            <Flex rowGap={ 2 } flexDir="column" fontSize="sm" whiteSpace="pre" fontWeight={ 500 }>
+              <Box>
+                <Text as="span">Miner </Text>
+                <Link>{ miner }</Link>
+              </Box>
+              <Box>
+                <Text as="span">Before { selectedNetwork?.currency } </Text>
+                <Text as="span" variant="secondary">{ before.balance }</Text>
+              </Box>
+              { typeof before.nonce !== 'undefined' && (
+                <Box>
+                  <Text as="span">Nonce:</Text>
+                  <Text as="span" fontWeight={ 600 }>{ nbsp }{ before.nonce }</Text>
+                </Box>
+              ) }
+              <Box>
+                <Text as="span">After { selectedNetwork?.currency } </Text>
+                <Text as="span" variant="secondary">{ after.balance }</Text>
+              </Box>
+              { typeof after.nonce !== 'undefined' && (
+                <Box>
+                  <Text as="span">Nonce:</Text>
+                  <Text as="span" fontWeight={ 600 }>{ nbsp }{ after.nonce }</Text>
+                </Box>
+              ) }
+              <Text>State difference { selectedNetwork?.currency }</Text>
+              <Stat>
+                { diff }
+                <StatArrow ml={ 2 } type={ Number(diff) > 0 ? 'increase' : 'decrease' }/>
+              </Stat>
+            </Flex>
           </>
         ) }
       </AccordionItem>

ui/tx/state/TxStateStorageItem.tsx

@@ -8,6 +8,7 @@ import {
 import React from 'react';
 
 import type { TTxStateItemStorage } from 'data/txState';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage}) => {
   const gridData = [
@@ -21,20 +22,27 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage})
   const OPTIONS = [ 'Hex', 'Number', 'Text', 'Address' ];
   return (
     <Grid
-      gridTemplateColumns={{ base: '70px minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}
+      gridTemplateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}
       columnGap={ 3 }
-      rowGap={ 4 }
-      px={ 6 }
-      py={ 4 }
-      background="blackAlpha.50"
+      rowGap={{ base: 2.5, lg: 4 }}
+      px={{ base: 3, lg: 6 }}
+      py={{ base: 3, lg: 4 }}
+      backgroundColor={ useColorModeValue('blackAlpha.50', 'whiteAlpha.100') }
       borderRadius="12px"
       mb={ 4 }
       fontSize="sm"
     >
       { gridData.map((item) => (
         <React.Fragment key={ item.name }>
-          <GridItem alignSelf={{ base: 'start', lg: 'center' }} fontWeight={{ base: 500, lg: 600 }} textAlign="end">{ item.name }</GridItem>
-          <GridItem display="flex" flexDir={{ base: 'column', lg: 'row' }} rowGap={ 2 } alignItems={{ base: 'flex-start', lg: 'center' }} >
+          <GridItem
+            alignSelf="center"
+            fontWeight={ 600 }
+            textAlign={{ base: 'start', lg: 'end' }}
+            _notFirst={{ mt: { base: 0.5, lg: 0 } }}
+          >
+            { item.name }
+          </GridItem>
+          <GridItem display="flex" flexDir="row" columnGap={ 3 } alignItems="center" >
             { item.select && (
               <Select
                 size="sm"
@@ -42,14 +50,14 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage})
                 focusBorderColor="none"
                 display="inline-block"
                 w="auto"
-                mr={ 3 }
+                flexShrink={ 0 }
                 background={ backgroundColor }
               >
                 { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
               </Select>
             ) }
-            <Box fontWeight={{ base: 400, lg: 500 }} maxW="100%">
-              { item.value }
+            <Box fontWeight={ 500 } whiteSpace="nowrap" overflow="hidden">
+              <HashStringShortenDynamic fontWeight="500" hash={ item.value }/>
             </Box>
           </GridItem>
         </React.Fragment>

ui/tx/state/TxStateTable.tsx

@@ -17,7 +17,7 @@ const TxStateTable = () => {
 
   return (
     <TableContainer width="100%" mt={ 6 }>
-      <Table variant="simple" minWidth="950px" size="sm">
+      <Table variant="simple" minWidth="950px" size="sm" w="auto">
         <Thead>
           <Tr>
             <Th width="92px">Storage</Th>

ui/txs/TxAdditionalInfoButton.tsx

@@ -13,7 +13,7 @@ const TxAdditionalInfoButton = ({ isOpen, onClick }: {isOpen?: boolean; onClick?
   const infoColor = useColorModeValue('blue.600', 'blue.300');
 
   return (
-    <Center ref={ ref } background={ isOpen ? infoBgColor : 'unset' } borderRadius="8px" w="24px" h="24px" onClick={ onClick }>
+    <Center ref={ ref } background={ isOpen ? infoBgColor : 'unset' } borderRadius="8px" w="24px" h="24px" onClick={ onClick } cursor="pointer">
       <Icon
         as={ infoIcon }
         boxSize={ 5 }