Sidebar, latest txs and verified contracts improvements (#1951)

* Toggle sidebar collapse state by clicking on empty area

* min width for verified contracts table

* add label to tx value for home page latest txs

ui/home/LatestTxsItem.tsx

@@ -35,8 +35,8 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
   return (
     <Grid
       gridTemplateColumns={{
-        lg: columnNum === 2 ? '3fr minmax(auto, 180px)' : '3fr minmax(auto, 180px) 150px',
-        xl: columnNum === 2 ? '3fr minmax(auto, 250px)' : '3fr minmax(auto, 275px) 150px',
+        lg: columnNum === 2 ? '3fr minmax(auto, 180px)' : '3fr minmax(auto, 180px) 170px',
+        xl: columnNum === 2 ? '3fr minmax(auto, 250px)' : '3fr minmax(auto, 275px) 170px',
       }}
       gridGap={ 8 }
       width="100%"
@@ -89,8 +89,8 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       <Flex flexDir="column">
         { !config.UI.views.tx.hiddenFields?.value && (
           <Skeleton isLoaded={ !isLoading } my="3px">
-            <Text as="span" whiteSpace="pre">{ currencyUnits.ether } </Text>
-            <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
+            <Text as="span" whiteSpace="pre">Value </Text>
+            <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether }</Text>
           </Skeleton>
         ) }
         { !config.UI.views.tx.hiddenFields?.tx_fee && (
@@ -99,7 +99,9 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
             { tx.stability_fee ? (
               <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>
             ) : (
-              <Text as="span" variant="secondary">{ tx.fee.value ? getValueWithUnit(tx.fee.value).dp(5).toFormat() : '-' }</Text>
+              <Text as="span" variant="secondary">
+                { tx.fee.value ? `${ getValueWithUnit(tx.fee.value).dp(5).toFormat() } ${ currencyUnits.ether }` : '-' }
+              </Text>
             ) }
           </Skeleton>
         ) }

ui/snippets/navigation/NavigationDesktop.tsx

@@ -38,6 +38,12 @@ const NavigationDesktop = () => {
     cookies.set(cookies.NAMES.NAV_BAR_COLLAPSED, isCollapsed ? 'false' : 'true');
   }, [ isCollapsed ]);
 
+  const handleContainerClick = React.useCallback((event: React.MouseEvent) => {
+    if (event.target === event.currentTarget) {
+      handleTogglerClick();
+    }
+  }, [ handleTogglerClick ]);
+
   const chevronIconStyles = {
     bgColor: useColorModeValue('white', 'black'),
     color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
@@ -63,6 +69,7 @@ const NavigationDesktop = () => {
           display: 'block',
         },
       }}
+      onClick={ handleContainerClick }
     >
       { config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="49px" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
       <Box

ui/verifiedContracts/VerifiedContractsTable.tsx

@@ -29,7 +29,7 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
   }, [ sort, setSorting ]);
 
   return (
-    <Table variant="simple" size="sm">
+    <Table variant="simple" size="sm" minW="915px">
       <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="50%">Contract</Th>