update format for call output

theme/components/Alert/Alert.ts

@@ -13,7 +13,7 @@ function getBg(props: StyleFunctionProps) {
   const { theme, colorScheme: c } = props;
   const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
   return {
-    light: `colors.${ c }.100`,
+    light: `colors.${ c }.${ c === 'red' ? '50' : '100' }`,
     dark: darkBg,
   };
 }

ui/address/contract/ContractMethodCallable.tsx

-import { Box, Button, chakra, Flex, Icon, Text } from '@chakra-ui/react';
+import { Box, Button, chakra, Flex, Grid, Icon, Text } from '@chakra-ui/react';
 // import _fromPairs from 'lodash/fromPairs';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
@@ -136,12 +136,15 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
       <FormProvider { ...formApi }>
         <chakra.form
           noValidate
-          display="grid"
+          onSubmit={ formApi.handleSubmit(onFormSubmit) }
+          onChange={ handleFormChange }
+        >
+          <Grid
             columnGap={ 3 }
             rowGap={{ base: 2, lg: 3 }}
             gridTemplateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 250px) minmax(0, 1fr)' }}
-          onSubmit={ formApi.handleSubmit(onFormSubmit) }
-          onChange={ handleFormChange }
+            mb={ 3 }
+            _empty={{ display: 'none' }}
           >
             { inputs.map((input, index) => {
               const fieldName = getFormFieldName(input.name, index);
@@ -191,7 +194,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
                 />
               );
             }) }
-          <div/>
+          </Grid>
           <Button
             isLoading={ isLoading }
             loadingText={ isWrite ? 'Write' : 'Read' }
@@ -207,9 +210,9 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
         </chakra.form>
       </FormProvider>
       { 'outputs' in data && !isWrite && data.outputs.length > 0 && (
-        <Flex mt={ 3 }>
+        <Flex mt={ 3 } fontSize="sm">
           <Icon as={ arrowIcon } boxSize={ 5 } mr={ 1 }/>
-          <Text>{ data.outputs.map(({ type }) => type).join(', ') }</Text>
+          <Text>{ data.outputs.map(({ type, name }) => [ name, type ].join(' ')).join(', ') }</Text>
         </Flex>
       ) }
       { result && <ResultComponent item={ data } result={ result } onSettle={ handleTxSettle }/> }

ui/address/contract/ContractMethodsAccordionItem.tsx

@@ -85,7 +85,7 @@ const ContractMethodsAccordionItem = <T extends SmartContractMethod>({ data, ind
           <AccordionIcon/>
         </AccordionButton>
       </Element>
-      <AccordionPanel pb={ 4 } px={ 0 }>
+      <AccordionPanel pb={ 4 } pr={ 0 } pl="28px">
         { renderContent(data, index, id) }
       </AccordionPanel>
     </AccordionItem>

ui/address/contract/ContractWriteResultDumb.tsx

@@ -82,7 +82,6 @@ const ContractWriteResultDumb = ({ result, onSettle, txInfo }: Props) => {
   return (
     <Box
       fontSize="sm"
-      pl={ 3 }
       mt={ 3 }
       alignItems="center"
       whiteSpace="pre-wrap"