Enhance value formatting in WalletConnectConfirmDialog (#2827)

* Enhance value formatting in WalletConnectConfirmDialog for better error handling and display

* fix: bump tar override for latest advisory

Author: ChiaMineJP

package-lock.json

@@ -77,7 +77,7 @@
     "tmp": "0.2.5",
     "qs": "6.14.1",
     "schema-utils": "3.3.0",
-    "tar": "7.5.3"
+    "tar": "7.5.6"
   },
   "version": "1.2.10-dev132"
 }

package.json

@@ -15,6 +15,28 @@ const StyledPre = styled(Typography)(() => ({
   whiteSpace: 'pre-wrap',
 }));
 
+function formatValue(value: unknown): ReactNode {
+  if (value === null || value === undefined) {
+    return <Trans>Not Available</Trans>;
+  }
+
+  const valueType = typeof value;
+  if (valueType === 'string' || valueType === 'number' || valueType === 'boolean' || valueType === 'bigint') {
+    return value.toString();
+  }
+
+  if (valueType === 'object') {
+    try {
+      const formatted = JSON.stringify(value, null, 2);
+      return <StyledPre variant="body2">{formatted}</StyledPre>;
+    } catch (error) {
+      return value.toString();
+    }
+  }
+
+  return value.toString();
+}
+
 function formatStackTrace(stack: StackFrame[]) {
   const stackTrace = stack.map(
     ({ fileName, columnNumber, lineNumber, functionName }) =>
@@ -133,15 +155,20 @@ export default function WalletConnectConfirmDialog(props: WalletConnectConfirmDi
           }
 
           const value = values[name];
+          const valueNode = displayComponent
+            ? displayComponent(value, params, values, handleChangeValues)
+            : formatValue(value);
           return (
             <LocalErrorBoundary onError={onError}>
               <Flex flexDirection="column" key={name}>
                 <Typography color="textPrimary">{label ?? name}</Typography>
-                <Typography color="textSecondary">
-                  {displayComponent
-                    ? displayComponent(value, params, values, handleChangeValues)
-                    : (value?.toString() ?? <Trans>Not Available</Trans>)}
-                </Typography>
+                {typeof valueNode === 'string' ? (
+                  <Typography color="textSecondary">{valueNode}</Typography>
+                ) : (
+                  <Typography color="textSecondary" component="div">
+                    {valueNode}
+                  </Typography>
+                )}
               </Flex>
             </LocalErrorBoundary>
           );