Error is not displayed for functions with no return values. (#2769)

* Error is not displayed for functions with no return values.

Fixes #2749

* fix tests

* update paddings

ui/address/contract/methods/form/ContractMethodForm.tsx

@@ -19,6 +19,7 @@ import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
 import ContractMethodFieldInput from './ContractMethodFieldInput';
 import ContractMethodFieldInputArray from './ContractMethodFieldInputArray';
 import ContractMethodFieldInputTuple from './ContractMethodFieldInputTuple';
+import ContractMethodOutput from './ContractMethodOutput';
 import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
 import ContractMethodResultWalletClient from './ContractMethodResultWalletClient';
 import { getFieldLabel, matchArray, transformFormDataToMethodArgs } from './utils';
@@ -236,6 +237,8 @@ const ContractMethodForm = ({ data, attempt, onSubmit, onReset, isOpen }: Props)
     );
   })();
 
+  const showOutputResult = result && result.source === 'public_client' && !(result.data instanceof Error);
+
   return (
     <Box>
       <FormProvider { ...formApi }>
@@ -306,12 +309,17 @@ const ContractMethodForm = ({ data, attempt, onSubmit, onReset, isOpen }: Props)
           onSettle={ handleResultSettle }
         />
       ) }
-      { 'outputs' in data && data.outputs.length > 0 && (
+      { result && result.source === 'public_client' && result.data instanceof Error && (
         <ContractMethodResultPublicClient
-          data={ result && result.source === 'public_client' ? result.data : undefined }
+          data={ result.data }
+        />
+      ) }
+      { 'outputs' in data && data.outputs.length > 0 && (
+        <ContractMethodOutput
+          data={ showOutputResult ? result.data : undefined }
           onSettle={ handleResultSettle }
           abiItem={ data }
-          mode={ result && result.source === 'public_client' ? 'result' : 'preview' }
+          mode={ showOutputResult ? 'result' : 'preview' }
         />
       ) }
     </Box>

ui/address/contract/methods/form/ContractMethodResultPublicClient.pw.tsx → ui/address/contract/methods/form/ContractMethodOutput.pw.tsx

@@ -3,8 +3,7 @@ import type { AbiFunction } from 'viem';
 
 import { test, expect } from 'playwright/lib';
 
-import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
-import { ErrorStory } from './ContractMethodResultPublicClient.pwstory';
+import ContractMethodOutput from './ContractMethodOutput';
 
 const abiItem: AbiFunction = {
   inputs: [],
@@ -136,7 +135,7 @@ const onSettle = () => {};
 
 test('preview mode', async({ render }) => {
   const component = await render(
-    <ContractMethodResultPublicClient
+    <ContractMethodOutput
       abiItem={ abiItem }
       data={ undefined }
       mode="preview"
@@ -148,7 +147,7 @@ test('preview mode', async({ render }) => {
 
 test('result mode', async({ render }) => {
   const component = await render(
-    <ContractMethodResultPublicClient
+    <ContractMethodOutput
       abiItem={ abiItem }
       data={ result }
       mode="result"
@@ -158,20 +157,9 @@ test('result mode', async({ render }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('error', async({ render }) => {
-  const component = await render(
-    <ErrorStory
-      abiItem={ abiItem }
-      mode="result"
-      onSettle={ onSettle }
-    />,
-  );
-  await expect(component).toHaveScreenshot();
-});
-
 test('single output', async({ render }) => {
   const component = await render(
-    <ContractMethodResultPublicClient
+    <ContractMethodOutput
       abiItem={{ ...abiItem, outputs: abiItem.outputs.slice(3, 4) }}
       data={ result[3] }
       mode="result"

ui/address/contract/methods/form/ContractMethodOutput.tsx

+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+import type { AbiFunction } from 'viem';
+
+import type { ResultViewMode } from '../types';
+
+import ResultItem from './resultPublicClient/Item';
+
+export interface Props {
+  data: unknown;
+  abiItem: AbiFunction;
+  onSettle: () => void;
+  mode: ResultViewMode;
+}
+
+const ContractMethodOutput = ({ data, abiItem, onSettle, mode }: Props) => {
+  React.useEffect(() => {
+    if (mode === 'result') {
+      onSettle();
+    }
+  }, [ onSettle, mode ]);
+
+  const formattedData = (() => {
+    return abiItem && abiItem.outputs.length > 1 && Array.isArray(data) ? data : [ data ];
+  })();
+
+  return (
+    <Flex
+      flexDir="column"
+      rowGap={ 2 }
+      mt={ 3 }
+      px={ 3 }
+      py={ 2 }
+      borderRadius="md"
+      bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
+      color={ mode === 'preview' ? 'gray.500' : undefined }
+      fontSize="sm"
+      lineHeight="20px"
+      whiteSpace="break-spaces"
+      wordBreak="break-all"
+    >
+      { abiItem.outputs.map((output, index) => (
+        <ResultItem
+          key={ index }
+          abiParameter={ output }
+          data={ formattedData[index] }
+          mode={ mode }
+        />
+      )) }
+    </Flex>
+  );
+};
+
+export default React.memo(ContractMethodOutput);

ui/address/contract/methods/form/ContractMethodResultPublicClient.pwstory.tsx

-import React from 'react';
-
-import type { Props } from './ContractMethodResultPublicClient';
-import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
-
-export const ErrorStory = (props: Omit<Props, 'data'>) => {
-  const result = new Error('Something went wrong');
-
-  return <ContractMethodResultPublicClient { ...props } data={ result }/>;
-};

ui/address/contract/methods/form/ContractMethodResultPublicClient.tsx

-import { Flex } from '@chakra-ui/react';
 import React from 'react';
-import type { AbiFunction } from 'viem';
-
-import type { FormSubmitResultPublicClient, ResultViewMode } from '../types';
 
 import { Alert } from 'toolkit/chakra/alert';
 
-import ResultItem from './resultPublicClient/Item';
-
 export interface Props {
-  data: FormSubmitResultPublicClient['data'];
-  abiItem: AbiFunction;
-  onSettle: () => void;
-  mode: ResultViewMode;
+  data: Error;
 }
 
-const ContractMethodResultPublicClient = ({ data, abiItem, onSettle, mode: modeProps }: Props) => {
-  React.useEffect(() => {
-    if (modeProps === 'result') {
-      onSettle();
-    }
-  }, [ onSettle, modeProps ]);
-
-  const formattedData = (() => {
-    return abiItem.outputs.length > 1 && Array.isArray(data) ? data : [ data ];
-  })();
-
-  const isError = data instanceof Error;
-  const mode = isError ? 'preview' : modeProps;
+const ContractMethodResultPublicClient = ({ data }: Props) => {
 
   return (
-    <>
-      { isError && (
-        <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" textStyle="sm" wordBreak="break-word" whiteSpace="pre-wrap">
+    <Alert status="error" mt={ 3 } textStyle="sm" wordBreak="break-word" whiteSpace="pre-wrap">
       { 'shortMessage' in data && typeof data.shortMessage === 'string' ? data.shortMessage : data.message }
     </Alert>
-      ) }
-      <Flex
-        flexDir="column"
-        rowGap={ 2 }
-        mt={ 3 }
-        p={ 4 }
-        borderRadius="md"
-        bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
-        color={ mode === 'preview' ? 'gray.500' : undefined }
-        fontSize="sm"
-        lineHeight="20px"
-        whiteSpace="break-spaces"
-        wordBreak="break-all"
-      >
-        { abiItem.outputs.map((output, index) => (
-          <ResultItem
-            key={ index }
-            abiParameter={ output }
-            data={ isError ? undefined : formattedData[index] }
-            mode={ mode }
-          />
-        )) }
-      </Flex>
-    </>
   );
 };