Improvements for function call viewer (#118)

* Improvements for function call viewer

* Removed console log

Author: melnikga

src/components/call-trace/contract-call-trace.tsx

@@ -350,6 +350,8 @@ const ContractCallDetails = memo(function ContractCallDetails({ call }: { call:
 		}
 	];
 
+	const [displayFormat, setDisplayFormat] = useState<'auto' | 'raw'>('auto');
+
 	if (call.erc20TokenName) {
 		details.push({
 			name: 'Token Name',
@@ -424,10 +426,23 @@ const ContractCallDetails = memo(function ContractCallDetails({ call }: { call:
 							rawData={call.entryPoint.calldata}
 							decodeData={call.calldataDecoded}
 							type={DataType.CALLDATA}
+							displayFormat={displayFormat}
+							setDisplayFormat={setDisplayFormat}
 						/>
 					)}
+
 					{call.decodedResult && (
-						<DecodeDataTable decodeData={call.decodedResult} type={DataType.OUTPUT} />
+						<DecodeDataTable
+							decodeData={call.decodedResult}
+							type={DataType.OUTPUT}
+							rawData={
+								'success' in call.result
+									? (call.result.success as { retData: string[] }).retData
+									: ['']
+							}
+							displayFormat={displayFormat}
+							setDisplayFormat={setDisplayFormat}
+						/>
 					)}
 				</div>
 			</div>

src/components/call-trace/event-call-trace.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { useCallTrace } from '@/lib/context/call-trace-context-provider';
 import { CALL_NESTING_SPACE_BUMP, CallTypeChip, TraceLine } from '.';
 import { InfoBox } from '@/components/ui/info-box';
@@ -87,7 +87,7 @@ const EventCallDetails = memo(function EventCallDetails({
 	if (!contractName) {
 		contractName = shortenHash(contractCall.entryPoint.storageAddress, 13);
 	}
-
+	const [displayFormat, setDisplayFormat] = useState<'auto' | 'raw'>('auto');
 	const details: { name: string; value: string; isCopyable?: boolean; valueToCopy?: string }[] = [];
 
 	details.push(
@@ -125,7 +125,14 @@ const EventCallDetails = memo(function EventCallDetails({
 				<div className="">
 					<InfoBox details={details} />
 				</div>
-				{call.datas && <DecodeDataTable decodeData={call.datas} type={DataType.DATA} />}
+				{call.datas && (
+					<DecodeDataTable
+						decodeData={call.datas}
+						type={DataType.DATA}
+						displayFormat={displayFormat}
+						setDisplayFormat={setDisplayFormat}
+					/>
+				)}
 			</div>
 		</div>
 	);

src/components/call-trace/event-entries.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { useCallTrace } from '@/lib/context/call-trace-context-provider';
 import { CALL_NESTING_SPACE_BUMP, CallTypeChip, TraceLine } from '.';
 import { shortenHash } from '@/lib/utils';
@@ -71,7 +71,7 @@ export function EventsList({ events }: { events: ContractCallEvent[] }) {
 
 const EventDetails = memo(function EventCallDetails({ call }: { call: ContractCallEvent }) {
 	const details: { name: string; value: string; isCopyable?: boolean; valueToCopy?: string }[] = [];
-
+	const [displayFormat, setDisplayFormat] = useState<'auto' | 'raw'>('auto');
 	details.push(
 		{
 			name: 'Contract Address',
@@ -85,7 +85,14 @@ const EventDetails = memo(function EventCallDetails({ call }: { call: ContractCa
 			<div className="md:w-[calc(100vw-7rem)]">
 				<div className=""></div>
 				<InfoBox details={details} />
-				{call.datas && <DecodeDataTable decodeData={call.datas} type={DataType.DATA} />}
+				{call.datas && (
+					<DecodeDataTable
+						decodeData={call.datas}
+						type={DataType.DATA}
+						displayFormat={displayFormat}
+						setDisplayFormat={setDisplayFormat}
+					/>
+				)}
 			</div>
 		</div>
 	);

src/components/call-trace/function-call-trace.tsx

@@ -9,13 +9,6 @@ import { DebugButton } from './debug-btn';
 import { CommonCallTrace } from './common-call-trace';
 import { InfoBox } from '@/components/ui/info-box';
 import { FnName } from '../ui/function-name';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../ui/dropdown-menu';
-import CopyToClipboardElement from '../ui/copy-to-clipboard';
-import { Copy } from 'lucide-react';
-import { ScrollArea, ScrollBar } from '../ui/scroll-area';
-import FunctionCallViewer from '../ui/function-call-viewer';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
-import AddressLink from '../address-link';
 import ValueWithTooltip from '../ui/value-with-tooltip';
 import { ErrorTooltip } from '../error-tooltip';