more info

Author: Thunkar

src/components/TxNotificationCenter.tsx

@@ -127,9 +127,31 @@ function PhaseTimelineBar({ phases }: { phases: PhaseTiming[] }) {
                   <Typography variant="body2">
                     {formatDurationLong(phase.duration)} ({percentage.toFixed(1)}%)
                   </Typography>
-                  {phase.breakdown?.map((item, idx) => (
-                    <Typography key={idx} variant="caption" sx={{ display: 'block', pl: 1 }}>
-                      {item.label}: {formatDuration(item.duration)}
+                  {phase.breakdown?.map((item, idx) => {
+                    const isChild = item.label.startsWith('  ');
+                    return (
+                      <Typography
+                        key={idx}
+                        variant="caption"
+                        sx={{
+                          display: 'block',
+                          pl: isChild ? 2.5 : 1,
+                          fontWeight: isChild ? 400 : 600,
+                          fontSize: isChild ? '0.65rem' : '0.7rem',
+                          color: isChild ? 'text.secondary' : 'text.primary',
+                        }}
+                      >
+                        {item.label.trimStart()}: {formatDuration(item.duration)}
+                      </Typography>
+                    );
+                  })}
+                  {phase.details?.map((line, idx) => (
+                    <Typography
+                      key={`d-${idx}`}
+                      variant="caption"
+                      sx={{ display: 'block', pl: line.startsWith('  ') ? 2 : 0, mt: idx === 0 ? 0.5 : 0, fontFamily: 'monospace', fontSize: '0.65rem' }}
+                    >
+                      {line}
                     </Typography>
                   ))}
                 </Box>
@@ -177,21 +199,29 @@ interface TxToastProps {
 }
 
 function TxToast({ event, onDismiss }: TxToastProps) {
-  const [elapsed, setElapsed] = useState(Date.now() - event.startTime);
-  const [expanded, setExpanded] = useState(true);
-  const frozenElapsed = useRef<number | null>(null);
   const isActive = event.phase !== 'complete' && event.phase !== 'error';
 
+  // For completed events, compute total from recorded phase timings (stable across refreshes)
+  const computeFinalElapsed = () => {
+    const t = event.phaseTimings;
+    const fromTimings = (t.simulation ?? 0) + (t.proving ?? 0) + (t.sending ?? 0) + (t.mining ?? 0);
+    return fromTimings > 0 ? fromTimings : Date.now() - event.startTime;
+  };
+
+  const [elapsed, setElapsed] = useState(() => isActive ? Date.now() - event.startTime : computeFinalElapsed());
+  const [expanded, setExpanded] = useState(true);
+  const frozen = useRef(!isActive);
+
   // Tick elapsed time while active, freeze when done
   useEffect(() => {
     if (!isActive) {
-      if (frozenElapsed.current === null) {
-        frozenElapsed.current = Date.now() - event.startTime;
-        setElapsed(frozenElapsed.current);
+      if (!frozen.current) {
+        frozen.current = true;
+        setElapsed(computeFinalElapsed());
       }
       return;
     }
-    frozenElapsed.current = null;
+    frozen.current = false;
     const interval = setInterval(() => setElapsed(Date.now() - event.startTime), 200);
     return () => clearInterval(interval);
   }, [isActive, event.startTime]);

src/embedded_wallet.ts

@@ -353,7 +353,47 @@ export class EmbeddedWallet extends BaseWallet {
 
         const simulationDuration = Date.now() - simulationStart;
         phaseTimings.simulation = simulationDuration;
-        phases.push({ name: 'Simulation', duration: simulationDuration, color: '#ce93d8' });
+
+        // Build breakdown and details from simulation stats
+        const simStats = simulationResult.stats;
+        const breakdown: Array<{ label: string; duration: number }> = [];
+        const details: string[] = [];
+
+        if (simStats?.timings) {
+          const t = simStats.timings;
+          if (t.sync > 0) breakdown.push({ label: 'Sync', duration: t.sync });
+          if (t.perFunction.length > 0) {
+            const witgenTotal = t.perFunction.reduce((sum, fn) => sum + fn.time, 0);
+            breakdown.push({ label: 'Private execution', duration: witgenTotal });
+            for (const fn of t.perFunction) {
+              breakdown.push({ label: `  ${fn.functionName.split(':').pop() || fn.functionName}`, duration: fn.time });
+            }
+          }
+          if (t.publicSimulation) breakdown.push({ label: 'Public simulation', duration: t.publicSimulation });
+          if (t.unaccounted > 0) breakdown.push({ label: 'Other', duration: t.unaccounted });
+        }
+
+        if (simStats?.nodeRPCCalls?.roundTrips) {
+          const rt = simStats.nodeRPCCalls.roundTrips;
+          const fmt = (ms: number) => (ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`);
+          details.push(`${rt.roundTrips} RPC round-trips (${fmt(rt.totalBlockingTime)} blocking)`);
+          const MAX_METHODS_SHOWN = 3;
+          for (let i = 0; i < rt.roundTripDurations.length; i++) {
+            const allMethods = rt.roundTripMethods[i] ?? [];
+            const count = allMethods.length;
+            const shown = allMethods.slice(0, MAX_METHODS_SHOWN).join(', ');
+            const suffix = count > MAX_METHODS_SHOWN ? `, ... +${count - MAX_METHODS_SHOWN} more` : '';
+            details.push(`  #${i + 1}: ${fmt(rt.roundTripDurations[i])} — ${shown}${suffix} (${count} calls)`);
+          }
+        }
+
+        phases.push({
+          name: 'Simulation',
+          duration: simulationDuration,
+          color: '#ce93d8',
+          ...(breakdown.length > 0 && { breakdown }),
+          ...(details.length > 0 && { details }),
+        });
       }
 
       // --- PROVING ---

src/tx-progress.ts

@@ -12,6 +12,8 @@ export interface PhaseTiming {
   duration: number;
   color: string;
   breakdown?: Array<{ label: string; duration: number }>;
+  /** Extra detail lines shown in the tooltip (e.g. RPC round-trip info) */
+  details?: string[];
 }
 
 export interface TxProgressEvent {