Split and beautify return values in abi viewer

src/components/ui/AbiParam.tsx

@@ -0,0 +1,51 @@
+import { Box, TextInput } from "grommet";
+import { palette } from "src/theme";
+import styled from "styled-components";
+
+
+interface IAbiParam {
+    name?: string;
+    readonly?: boolean;
+    type: string;
+    value: string;
+}
+
+const SmallTextInput = styled(TextInput)`
+  font-size: 14px;
+  font-weight: 400;
+
+  ::placeholder {
+    font-size: 14px;
+  }
+`;
+
+const HeaderBox = styled(Box)`
+  font-size:12px;
+`
+const NameLabel = styled.div`
+    color: ${palette.ElectricBlue};
+    margin-right: 20px;
+`
+
+
+export const AbiParam = (props: IAbiParam) => {
+    const {
+        name,
+        readonly,
+        type,
+        value,
+    } = props;
+
+    function valueInput() {
+        return <SmallTextInput value={value} readOnly={readonly} />
+    }
+
+    return <Box className="param-box" direction="column" pad="none">
+        <HeaderBox direction="row" align="center">
+            {name && <NameLabel>{name}</NameLabel>}
+            <i>{type}</i>
+        </HeaderBox>
+
+        {valueInput()}
+    </Box>
+};

src/pages/AddressPage/ContractDetails/AbiMethodView.tsx

@@ -7,6 +7,7 @@ import {AbiItem} from 'web3-utils';
 import {convertInputs} from './helpers';
 import {uniqid} from 'src/pages/VerifyContract/VerifyContract';
 import detectEthereumProvider from '@metamask/detect-provider';
+import {AbiParam} from 'src/components/ui/AbiParam';
 
 const Field = styled(Box)``;
 
@@ -147,7 +148,7 @@ export const AbiMethodsView = (props: {
   };
 
   return (
-    <ViewWrapper direction='column' margin={{bottom: 'medium'}}>
+    <ViewWrapper className='abi-view-wrapper' direction='column' margin={{bottom: 'medium'}}>
       <NameWrapper background={'backgroundBack'}>
         <Text size='small'>
           {index + 1}. {abiMethod.name}
@@ -293,29 +294,13 @@ export const AbiMethodsView = (props: {
         ) : null}
 
         {abiMethod.outputs
-          ? abiMethod.outputs.map((input) => {
-              return (
-                <Box>
-                  {result.length ? (
-                    <Text size='small'>
-                      <GreySpan>
-                        {input.name}
-                        {` (${input.type})`}
-                      </GreySpan>{' '}
-                      {'-> '}
-                      {result.length === 1 ? [result] : result.toString()}
-                    </Text>
-                  ) : (
-                    <Text size='small'>
-                      <GreySpan>
-                        {input.name}
-                        {` (${input.type})`}
-                      </GreySpan>{' '}
-                      {'-> '}
-                    </Text>
-                  )}
-                </Box>
-              );
+          ? abiMethod.outputs.map((input, idx) => {
+            return (<AbiParam
+              readonly={true}
+              type={input.type}
+              name={input.name}
+              value={result[idx]}
+            />)
           })
           : null}