fix(website): refactor FunctionOutput

packages/website/src/features/Packages/Abi.tsx

@@ -13,7 +13,6 @@ import {
   Link,
 } from '@chakra-ui/react';
 import NextLink from 'next/link';
-
 export const Abi: FC<{
   abi: AbiType;
   address: string;
@@ -190,6 +189,7 @@ export const Abi: FC<{
               prior to execution.
             </Text>
           </Alert>
+
           {functions?.map((f, index) => (
             <Function
               key={index}

packages/website/src/features/Packages/Function.tsx

@@ -84,8 +84,8 @@ export const Function: FC<{
       readOnly
         ? readContractResult
         : simulated
-        ? readContractResult
-        : writeContractResult,
+          ? readContractResult
+          : writeContractResult,
     [readOnly, simulated, readContractResult, writeContractResult]
   );
 
@@ -280,13 +280,12 @@ export const Function: FC<{
             )}
 
             {error && (
-              <Alert mt="2" status="error" bg="red.700">
-                {`${
-                  error.includes('Encoded error signature') &&
-                  error.includes('not found on ABI')
+              <Alert overflowX="scroll" mt="2" status="error" bg="red.700">
+                {`${error.includes('Encoded error signature') &&
+                    error.includes('not found on ABI')
                     ? 'Error emitted during ERC-7412 orchestration: '
                     : ''
-                }${error}`}
+                  }${error}`}
               </Alert>
             )}
           </Box>
@@ -299,6 +298,7 @@ export const Function: FC<{
             display="flex"
             flexDirection="column"
             position="relative"
+            overflowX="scroll"
           >
             <Heading
               size="xs"
@@ -315,7 +315,7 @@ export const Function: FC<{
             {loading ? (
               <CustomSpinner m="auto" />
             ) : (
-              <Flex flex="1">
+              <Box flex="1">
                 {f.outputs.length != 0 && result == null && (
                   <Flex
                     position="absolute"
@@ -339,7 +339,7 @@ export const Function: FC<{
                   </Flex>
                 )}
                 <FunctionOutput result={result} output={f.outputs} />
-              </Flex>
+              </Box>
             )}
           </Box>
         </Flex>

packages/website/src/features/Packages/FunctionOutput.tsx

@@ -1,22 +1,105 @@
 import { FC } from 'react';
-import { Box, Text, Divider, FormLabel, Flex } from '@chakra-ui/react';
+import { Box, Text, Flex } from '@chakra-ui/react';
 import { AbiParameter } from 'abitype';
+import { isArray, isObject } from 'lodash';
 import { InfoOutlineIcon } from '@chakra-ui/icons';
 
 export const FunctionOutput: FC<{
   output: AbiParameter | readonly AbiParameter[];
   result: any;
 }> = ({ output, result }) => {
-  const isArray = (_value: any) => Array.isArray(_value);
-  const isObject = (_value: any) =>
-    _value && typeof _value === 'object' && _value.constructor === Object;
+  const isArrayOutput = (
+    value: AbiParameter | readonly AbiParameter[]
+  ): value is readonly AbiParameter[] => isArray(value);
+
+  const hasComponents = (
+    item: AbiParameter
+  ): item is AbiParameter & { components: readonly AbiParameter[] } => {
+    return 'components' in item && isArray(item.components);
+  };
+
+  const ItemLabel: FC<{ name: string; type: string }> = ({ name, type }) => (
+    <Box alignItems={'center'} gap={1} fontSize="sm" mb={0}>
+      {name?.length ? (
+        <Text pr={1} fontWeight="semibold" as="span">
+          {name}
+        </Text>
+      ) : (
+        ''
+      )}
+      <Text as="span" fontSize="xs" color="whiteAlpha.700">
+        {type}
+      </Text>
+    </Box>
+  );
+
+  const renderOutput = (item: AbiParameter, value: { [key: string]: any }) => {
+    if (item.type === 'tuple' && hasComponents(item) && value) {
+      return (
+        <Box pl="4">
+          {Object.values(value).map((component: any, resIdx: number) => {
+            return (
+              <FunctionOutput
+                output={item.components[resIdx]}
+                result={component}
+                key={resIdx}
+              />
+            );
+          })}
+        </Box>
+      );
+    } else if (item.type === 'tuple[]' && hasComponents(item) && value) {
+      return isArray(value)
+        ? value.map((tupleItem, tupleIndex) => (
+            <Box key={tupleIndex} pl="4">
+              {item.components.map(
+                (component: AbiParameter, compIdx: number) => (
+                  <FunctionOutput
+                    key={compIdx}
+                    output={component}
+                    result={isArray(tupleItem) ? tupleItem[compIdx] : tupleItem}
+                  />
+                )
+              )}
+            </Box>
+          ))
+        : null;
+    } else {
+      if (isObject(value) && item.name && item.name in value) {
+        const outputValue = value[item.name];
+        return (
+          <Text
+            display="block"
+            pt="1"
+            pb="2"
+            fontSize="xs"
+            color="whiteAlpha.900"
+          >
+            {String(outputValue)}
+          </Text>
+        );
+      } else if (isArray(value)) {
+        return value.map((val, idx) => (
+          <Text fontSize="xs" display="block" key={idx}>
+            {String(val)}
+          </Text>
+        ));
+      } else {
+        return (
+          <Text
+            display="block"
+            pt="1"
+            pb="2"
+            fontSize="xs"
+            color="whiteAlpha.900"
+          >
+            {result !== null || undefined ? String(result) : '---'}
+          </Text>
+        );
+      }
+    }
+  };
 
-  const arrayOutput: AbiParameter[] | undefined = isArray(output)
-    ? (output as AbiParameter[])
-    : undefined;
-  const objectOutput: AbiParameter | undefined = isObject(output)
-    ? (output as AbiParameter)
-    : undefined;
   return (
     <>
       {(output as Array<any>).length == 0 && (
@@ -27,119 +110,21 @@ export const FunctionOutput: FC<{
           </Text>
         </Flex>
       )}
-      {arrayOutput && (
-        <div>
-          {arrayOutput.map((item: any, index: number) => {
-            return (
-              <div key={index}>
-                <FormLabel fontSize="sm" mb={0}>
-                  {item.name && <Text display="inline">{item.name}</Text>}
-                  {item.internalType && (
-                    <Text fontSize="xs" color="whiteAlpha.700" display="inline">
-                      {' '}
-                      {item.internalType}
-                    </Text>
-                  )}
-                </FormLabel>
-
-                {item.components && item.type === 'tuple' && result && (
-                  <Box pb="2">
-                    {Object.values(result).map(
-                      (component: any, componentIndex: any) => {
-                        return (
-                          <FunctionOutput
-                            output={item.components[componentIndex]}
-                            result={component}
-                            key={componentIndex}
-                          />
-                        );
-                      }
-                    )}
-                  </Box>
-                )}
-                {item.type === 'tuple[]' && result?.length && (
-                  <div>
-                    {(arrayOutput.length > 1 ? result[index] : result).map(
-                      (resultItem: any, resultItemIndex: number) => {
-                        if (isObject(resultItem)) {
-                          return (
-                            <div key={resultItemIndex}>
-                              <Box pb="2">
-                                {Object.values(resultItem).map(
-                                  (component: any, componentIndex: any) => {
-                                    return (
-                                      <FunctionOutput
-                                        output={item.components[componentIndex]}
-                                        result={component}
-                                        key={componentIndex}
-                                      />
-                                    );
-                                  }
-                                )}
-                              </Box>
-                              <Divider />
-                            </div>
-                          );
-                        } else {
-                          return (
-                            <div key={resultItemIndex}>
-                              <Box pb="2">
-                                {resultItem.map(
-                                  (component: any, componentIndex: number) => {
-                                    return (
-                                      <div key={componentIndex}>
-                                        <FunctionOutput
-                                          output={
-                                            item.components[componentIndex]
-                                          }
-                                          result={component}
-                                        />
-                                      </div>
-                                    );
-                                  }
-                                )}
-                              </Box>
-                            </div>
-                          );
-                        }
-                      }
-                    )}
-                  </div>
-                )}
-                {!item.components ||
-                (item.type !== 'tuple[]' && item.type !== 'tuple') ? (
-                  <>
-                    {(isArray(result) ? result[index] : result) === null ? (
-                      <Text color="gray.500">—</Text>
-                    ) : (output as Array<any>)[index].type.endsWith('[]') ? (
-                      String(result)
-                    ) : (
-                      String(isArray(result) ? result[index] : result)
-                    )}
-                  </>
-                ) : null}
-              </div>
-            );
-          })}
-        </div>
-      )}
-      {objectOutput && (
-        <>
-          {objectOutput.name}:{' '}
-          {JSON.stringify(
-            result,
-            (key, value) => {
-              typeof value === 'bigint' ? String(value) : value;
-            },
-            2
-          )}
-          <Text pl="1" fontSize="xs" color="whiteAlpha.700" display="inline">
-            {objectOutput.internalType}
-          </Text>
-          <Text pt="1" pb="3" fontSize="xs" color="whiteAlpha.900">
-            {String(result)}
-          </Text>
-        </>
+      {isArrayOutput(output) ? (
+        output.map((item, index) => (
+          <Box overflowX={'scroll'} p={2} key={index}>
+            <ItemLabel name={item.name || ''} type={item.internalType || ''} />
+            {renderOutput(item, result)}
+          </Box>
+        ))
+      ) : (
+        <Box overflowX={'scroll'} p={2}>
+          <ItemLabel
+            name={output.name || ''}
+            type={output.internalType || ''}
+          />
+          {renderOutput(output, result)}
+        </Box>
       )}
     </>
   );