feat(interactive-idl): split tx simulation and execution (#1072)

## Description

Add a "Simulate" button to the interactive IDL instruction UI so users
can simulate an instruction against the RPC without broadcasting.
Extract separate `useExecuteTransaction` and `useSimulateTransaction`
hooks with phase-tagged result types from `useInstruction`.

- Add a `Simulate` button to `InteractInstruction`.
- Add switch for enabling/disabling simulation during `Execute` action.
- Extract transaction logic from `use-instruction.ts` into
`model/transaction/`: `useExecuteTransaction`, `useSimulateTransaction`,
`formatTransactionError`, `serializeTransactionMessage`, and
discriminated result types in `types.ts`.
- Tag execution results by phase (`broadcast_failed`,
`pre_broadcast_failed`) and simulation results by phase
(`rpc_simulation_failed`, `simulation_execution_failed`).
- Replace `TxSuccessStatus` with `TxExecutionStatus` add
`TxSimulationStatus`.
- Move the UTC time format into shared helper `formatLogTimestamp`.
- Split `InstructionActivity` into `InstructionExecutionActivity` and
`InstructionSimulationActivity`. `InteractWithIdlView` renders one or
the other based on the last action taken.
- Rename `invoke`->`execute` to keep it consistent with ui.
- Add analytics event for simulation.
- Fix nulls/any in `use-instruction.ts` and `InstructionActivity.tsx`
and drop them from the eslint legacy-file exclusions.

## Type of change

-   [x] New feature

## Screenshots

<img width="880" height="607" alt="image"
src="https://github.com/user-attachments/assets/e3444232-b753-4b84-b7c4-3c44b45cbbf4"
/>


| | |
| :---: | :---: |
| <img width="552" height="441" alt="image"
src="https://github.com/user-attachments/assets/edcd18ca-5808-4035-8b57-1a44012f8eac"
/> | <img width="500" alt="image"
src="https://github.com/user-attachments/assets/0c4b8ec8-300a-4db5-be65-0f8d01ebfaf1"
/> |
| <img width="536" height="543" alt="image"
src="https://github.com/user-attachments/assets/81347345-f0bb-49e0-bc61-4d59c6449e7c"
/> | <img width="540" height="670" alt="image"
src="https://github.com/user-attachments/assets/e31aa2b4-3530-4fd5-9c23-543dbb5a8f57"
/> |

## Testing

#### Programs with IDL:

_References to Vercel Preview will be added once deployment is
finished._

- LMB
[BUYuxRfhCMWavaUWxhGtPP3ksKEDZxCD5gzknk3JfAya](https://explorer-git-fork-hoodieshq-feat-inter-e206b3-solana-foundation.vercel.app/address/ProgM6JCCvbYkfKqJYHePx4xxSUSqJp7rh8Lyv7nk7S/idl)
- Voting
[AXcxp15oz1L4YYtqZo6Qt6EkUj1jtLR6wXYqaJvn4oye](https://explorer-git-fork-hoodieshq-feat-inter-e206b3-solana-foundation.vercel.app/address/AXcxp15oz1L4YYtqZo6Qt6EkUj1jtLR6wXYqaJvn4oye/idl)
- Blog
[4ypHLeD2zDinCMiuHnwpRTwygKDxR5Sn6wbVHy4mbnvE](https://explorer-git-fork-hoodieshq-feat-inter-e206b3-solana-foundation.vercel.app/address/4ypHLeD2zDinCMiuHnwpRTwygKDxR5Sn6wbVHy4mbnvE/idl)
- PMP
[ProgM6JCCvbYkfKqJYHePx4xxSUSqJp7rh8Lyv7nk7S](https://explorer-git-fork-hoodieshq-feat-inter-e206b3-solana-foundation.vercel.app/address/ProgM6JCCvbYkfKqJYHePx4xxSUSqJp7rh8Lyv7nk7S/idl)

<!--
-
[LMB](https://explorer-git-feat-interactive-idl-tx-simulation-hoodies.vercel.app/address/BUYuxRfhCMWavaUWxhGtPP3ksKEDZxCD5gzknk3JfAya/idl?cluster=devnet)
-
[Voting](https://explorer-git-feat-interactive-idl-tx-simulation-hoodies.vercel.app/address/AXcxp15oz1L4YYtqZo6Qt6EkUj1jtLR6wXYqaJvn4oye/?cluster=devnet)
-
[Blog](https://explorer-git-feat-interactive-idl-tx-simulation-hoodies.vercel.app/address/4ypHLeD2zDinCMiuHnwpRTwygKDxR5Sn6wbVHy4mbnvE/?cluster=devnet)
-
[PMP](https://explorer-git-feat-interactive-idl-tx-simulation-hoodies.vercel.app/address/ProgM6JCCvbYkfKqJYHePx4xxSUSqJp7rh8Lyv7nk7S/idl?cluster=devnet)
-->
 
#### Cases:
- Successful simulation (create a valid ix)
- Failed simulation (create an invalid ix, e.g. simulate same initialize
ix twice)
- Successful execution (create valid ix)
- Failed instruction after broadcast (create invalid ix, click execute,
sign with wallet. This will produce error logs with failed tx)
- Failed instruction before broadcast (e.g. click execute, but reject
signing by wallet)
- Execute with simulation enabled
- Execute with simulation disabled

## Related Issues

- Closes
[HOO-225](https://linear.app/solana-fndn/issue/HOO-225/refactor-use-instruction-and-move-layer-to-send-and-simulate)
- Closes
[HOO-226](https://linear.app/solana-fndn/issue/HOO-226/allow-to-simulate-instruction-as-well-as-execution)

## Checklist

<!-- Verify that you have completed the following before requesting
review -->

-   [x] My code follows the project's style guidelines
-   [x] I have added tests that prove my fix/feature works
-   [x] All tests pass locally and in CI
-   [x] I have run `build:info` script to update build information
-   [x] CI/CD checks pass
-   [x] I have included screenshots for protocol screens (if applicable)

## Additional Notes

<!-- Add any other context about the PR here -->
<!-- For Solana Verify (Verified Builds) related changes, note that bugs
should be reported to disclosures@solana.org -->

Author: mikhd

app/entities/program-logs/index.ts

@@ -1,4 +1,5 @@
 export { ProgramLogs } from './ui/ProgramLogs';
-export { TxSuccessStatus } from './ui/TxSuccessStatus';
+export { TxExecutionStatus } from './ui/TxExecutionStatus';
+export { TxSimulationStatus } from './ui/TxSimulationStatus';
 export { TxErrorStatus } from './ui/TxErrorStatus';
 export { useParsedLogs } from './model/useParsedLogs';

app/entities/program-logs/model/__tests__/formatLogTimestamp.spec.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+
+import { formatLogTimestamp } from '../formatLogTimestamp';
+
+describe('formatLogTimestamp', () => {
+    it('should format a UTC date as HH:mm:ss UTC', () => {
+        expect(formatLogTimestamp(new Date('2024-01-15T10:30:45Z'))).toBe('10:30:45 UTC');
+    });
+
+    it('should zero-pad single-digit hours, minutes, and seconds', () => {
+        expect(formatLogTimestamp(new Date('2024-01-15T01:02:03Z'))).toBe('01:02:03 UTC');
+    });
+
+    it('should ignore local timezone offset and always render in UTC', () => {
+        const date = new Date(Date.UTC(2024, 0, 15, 23, 59, 59));
+        expect(formatLogTimestamp(date)).toBe('23:59:59 UTC');
+    });
+});

app/entities/program-logs/model/formatLogTimestamp.ts

@@ -0,0 +1,10 @@
+export function formatLogTimestamp(date: Date): string {
+    const time = date.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        hour12: false,
+        minute: '2-digit',
+        second: '2-digit',
+        timeZone: 'UTC',
+    });
+    return `${time} UTC`;
+}

app/entities/program-logs/model/useParsedLogs.ts

@@ -3,7 +3,7 @@ import type { TransactionError } from '@solana/web3.js';
 import { useCluster } from '@/app/providers/cluster';
 import { parseProgramLogs } from '@/app/utils/program-logs';
 
-export function useParsedLogs(error: TransactionError | null) {
+export function useParsedLogs(error: TransactionError | undefined) {
     const { cluster } = useCluster();
 
     const parseLogs = (logs: string[]) => parseProgramLogs(logs, error, cluster);

app/entities/program-logs/ui/ProgramLogs.tsx

@@ -8,21 +8,21 @@ import type { InstructionLogs } from '@/app/utils/program-logs';
 
 export function ProgramLogs({
     header,
-    logs,
-    parseLogs,
+    rawLogs,
+    parsedLogs,
     programName,
 }: {
     header?: React.ReactNode;
-    logs: string[];
-    parseLogs: (logs: string[]) => InstructionLogs[];
+    rawLogs: string[];
+    parsedLogs: InstructionLogs[];
     programName?: string;
 }) {
     const [showRaw, setShowRaw] = useState(false);
 
     const content = showRaw ? (
         <div className="overflow-hidden rounded-lg">
             <SolarizedJsonViewer
-                src={logs}
+                src={rawLogs}
                 name={false}
                 enableClipboard={true}
                 collapsed={false}
@@ -33,7 +33,7 @@ export function ProgramLogs({
             />
         </div>
     ) : (
-        <ProgramLogRows logs={parseLogs(logs)} programName={programName} />
+        <ProgramLogRows logs={parsedLogs} programName={programName} />
     );
 
     return (
@@ -47,7 +47,7 @@ export function ProgramLogs({
             <div className="flex min-h-0 flex-col gap-2 overflow-auto">
                 {header}
 
-                {content}
+                <div className="overflow-x-auto">{content}</div>
             </div>
         </div>
     );

app/entities/program-logs/ui/StatusBar.tsx

@@ -0,0 +1,71 @@
+import { cva } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { ExternalLink } from 'react-feather';
+
+import { Copyable } from '@/app/components/common/Copyable';
+import { Badge } from '@/app/components/shared/ui/badge';
+import { cn } from '@/app/components/shared/utils';
+
+import { formatLogTimestamp } from '../model/formatLogTimestamp';
+
+export type StatusTheme = 'accent' | 'destructive';
+
+const themedColor = {
+    accent: 'text-accent-700',
+    destructive: 'text-destructive',
+} as const;
+
+const timestampVariants = cva('whitespace-nowrap text-xs tracking-tight', {
+    variants: { theme: themedColor },
+});
+
+const monoTextVariants = cva('overflow-hidden text-ellipsis whitespace-nowrap font-mono text-sm tracking-tight', {
+    variants: { theme: themedColor },
+});
+
+type StatusBarProps = {
+    message?: ReactNode;
+    date: Date;
+    theme: StatusTheme;
+    badge: { label: string; variant: 'success' | 'destructive' };
+    link: string | undefined;
+};
+
+export function StatusBar({ message, date, theme, badge, link }: StatusBarProps) {
+    const badgeNode = (
+        <Badge variant={badge.variant} size="xs" className={cn(!link && 'ml-auto')}>
+            {badge.label}
+            {Boolean(link) && (
+                <>
+                    {' '}
+                    <ExternalLink size={12} />
+                </>
+            )}
+        </Badge>
+    );
+    return (
+        <div className="flex items-center gap-2 rounded border border-solid border-neutral-600 px-4 py-2">
+            {message}
+            <div className="flex items-center">
+                <span className={timestampVariants({ theme })}>{formatLogTimestamp(date)}</span>
+            </div>
+            {link ? (
+                <a href={link} target="_blank" rel="noopener noreferrer" className="ml-auto">
+                    {badgeNode}
+                </a>
+            ) : (
+                badgeNode
+            )}
+        </div>
+    );
+}
+
+export function CopyableMonoText({ text, theme }: { text: string; theme: StatusTheme }) {
+    return (
+        <div className="flex w-1/2 min-w-0 items-center gap-1">
+            <Copyable text={text}>
+                <span className={monoTextVariants({ theme })}>{text}</span>
+            </Copyable>
+        </div>
+    );
+}

app/entities/program-logs/ui/TxErrorStatus.tsx

@@ -1,44 +1,23 @@
-import { Badge } from '@components/shared/ui/badge';
-import { ExternalLink } from 'react-feather';
-
-import { Copyable } from '@/app/components/common/Copyable';
-
-export function TxErrorStatus({ message, date, link }: { message: string | null; date: Date; link: string | null }) {
-    const time = date.toLocaleTimeString('en-US', {
-        hour: '2-digit',
-        hour12: false,
-        minute: '2-digit',
-        second: '2-digit',
-        timeZone: 'UTC',
-    });
-    const timestamp = `${time} UTC`;
+import { CopyableMonoText, StatusBar } from './StatusBar';
 
+export function TxErrorStatus({
+    message,
+    date,
+    link,
+    label = 'Error',
+}: {
+    message: string | undefined;
+    date: Date;
+    link: string | undefined;
+    label?: string;
+}) {
     return (
-        <div className="border-1 flex items-center gap-2 rounded border border-solid border-neutral-600 px-4 py-2">
-            {message && (
-                <div className="flex w-1/2 items-center gap-1">
-                    <Copyable text={message}>
-                        <span className="overflow-hidden text-ellipsis whitespace-nowrap font-mono text-sm tracking-tight text-destructive">
-                            {message}
-                        </span>
-                    </Copyable>
-                </div>
-            )}
-
-            <div className="flex items-center">
-                <span className="whitespace-nowrap text-xs tracking-tight text-destructive">{timestamp}</span>
-            </div>
-            {link ? (
-                <a href={link} target="_blank" rel="noopener noreferrer" className="ml-auto">
-                    <Badge variant="destructive" size="xs" className="ml-auto">
-                        Error <ExternalLink size={12} />
-                    </Badge>
-                </a>
-            ) : (
-                <Badge variant="destructive" size="xs" className="ml-auto">
-                    Error
-                </Badge>
-            )}
-        </div>
+        <StatusBar
+            message={message ? <CopyableMonoText text={message} theme="destructive" /> : undefined}
+            date={date}
+            theme="destructive"
+            badge={{ label, variant: 'destructive' }}
+            link={link}
+        />
     );
 }

app/entities/program-logs/ui/TxExecutionStatus.tsx

@@ -0,0 +1,21 @@
+import { CopyableMonoText, StatusBar } from './StatusBar';
+
+type TxExecutionStatusProps = {
+    status: 'success' | 'error';
+    signature: string;
+    date: Date;
+    link: string;
+};
+
+export function TxExecutionStatus({ status, signature, date, link }: TxExecutionStatusProps) {
+    const isSuccess = status === 'success';
+    return (
+        <StatusBar
+            message={<CopyableMonoText text={signature} theme={isSuccess ? 'accent' : 'destructive'} />}
+            date={date}
+            theme={isSuccess ? 'accent' : 'destructive'}
+            badge={{ label: isSuccess ? 'Success' : 'Error', variant: isSuccess ? 'success' : 'destructive' }}
+            link={link}
+        />
+    );
+}

app/entities/program-logs/ui/TxSimulationStatus.tsx

@@ -0,0 +1,42 @@
+import { CopyableMonoText, StatusBar } from './StatusBar';
+
+type TxSimulationStatusProps =
+    | { status: 'success'; unitsConsumed: number | undefined; date: Date; link?: string }
+    | { status: 'error'; message?: string; date: Date; link?: string };
+
+export function TxSimulationStatus(props: TxSimulationStatusProps) {
+    if (props.status === 'success') {
+        return (
+            <StatusBar
+                message={
+                    props.unitsConsumed !== undefined ? (
+                        <ComputeUnitsBadge unitsConsumed={props.unitsConsumed} />
+                    ) : undefined
+                }
+                date={props.date}
+                theme="accent"
+                badge={{ label: 'Simulated', variant: 'success' }}
+                link={props.link}
+            />
+        );
+    }
+    return (
+        <StatusBar
+            message={props.message ? <CopyableMonoText text={props.message} theme="destructive" /> : undefined}
+            date={props.date}
+            theme="destructive"
+            badge={{ label: 'Simulation Error', variant: 'destructive' }}
+            link={props.link}
+        />
+    );
+}
+
+function ComputeUnitsBadge({ unitsConsumed }: { unitsConsumed: number }) {
+    return (
+        <div className="flex shrink-0 items-center gap-1">
+            <span className="whitespace-nowrap text-xs tracking-tight text-accent-700">
+                {unitsConsumed.toLocaleString('en-US')} CU
+            </span>
+        </div>
+    );
+}