contract methods tweaks

ui/address/contract/ContractMethodsAccordion.tsx

@@ -35,14 +35,24 @@ const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, renderC
     setId((id) => id + 1);
   }, []);
 
+  if (data.length === 0) {
+    return null;
+  }
+
   return (
+    <>
+      <Flex mb={ 3 }>
+        <Box fontWeight={ 500 }>Contract information</Box>
+        <Link onClick={ handleExpandAll } ml="auto">{ expandedSections.length === data.length ? 'Collapse' : 'Expand' } all</Link>
+        <Link onClick={ handleReset } ml={ 3 }>Reset</Link>
+      </Flex>
       <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
         { data.map((item, index) => {
           return (
-          <AccordionItem key={ index } as="section" _first={{ borderTopWidth: '0', '.chakra-accordion__button': { pr: '150px' } }}>
+            <AccordionItem key={ index } as="section" _first={{ borderTopWidth: '0' }}>
               <h2>
                 <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }} wordBreak="break-all" textAlign="left">
-                <Box as="span" fontFamily="heading" fontWeight={ 500 } fontSize="lg" mr={ 1 }>
+                  <Box as="span" fontWeight={ 500 } mr={ 1 }>
                     { index + 1 }. { item.type === 'fallback' || item.type === 'receive' ? item.type : item.name }
                   </Box>
                   { item.type === 'fallback' && (
@@ -72,13 +82,8 @@ const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, renderC
             </AccordionItem>
           );
         }) }
-      { data.length > 0 && (
-        <Flex columnGap={ 3 } position="absolute" top={ 0 } right={ 0 } py={ 3 } lineHeight="27px">
-          <Link onClick={ handleExpandAll }>{ expandedSections.length === data.length ? 'Collapse' : 'Expand' } all</Link>
-          <Link onClick={ handleReset }>Reset</Link>
-        </Flex>
-      ) }
       </Accordion>
+    </>
   );
 };