Display state root time in bundle detail UI

.env.example

@@ -1,5 +1,5 @@
 NEXT_PUBLIC_BLOCK_EXPLORER_URL=https://base.blockscout.com
-TIPS_UI_RPC_URL=http://localhost:8549
+TIPS_UI_RPC_URL=http://localhost:8545
 TIPS_UI_AWS_REGION=us-east-1
 TIPS_UI_S3_BUCKET_NAME=tips
 TIPS_UI_S3_CONFIG_TYPE=manual

src/app/bundles/[uuid]/page.tsx

@@ -299,41 +299,43 @@ function TransactionDetails({
 }
 
 function SimulationCard({ meter }: { meter: MeterBundleResponse }) {
+  const totalTimeUs = meter.totalExecutionTimeUs + meter.stateRootTimeUs;
+
   return (
     <Card>
       <div className="p-5">
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
-          <div>
-            <div className="text-xs text-gray-500 mb-1">Total Gas</div>
-            <div className="text-xl font-semibold text-gray-900">
-              {meter.totalGasUsed.toLocaleString()}
-            </div>
-          </div>
+        <div className="grid grid-cols-3 gap-6">
           <div>
-            <div className="text-xs text-gray-500 mb-1">Execution Time</div>
+            <div className="text-xs text-gray-500 mb-1">Execution</div>
             <div className="text-xl font-semibold text-gray-900">
-              {meter.results.reduce((sum, r) => sum + r.executionTimeUs, 0)}μs
+              {meter.totalExecutionTimeUs.toLocaleString()}μs
             </div>
           </div>
           <div>
-            <div className="text-xs text-gray-500 mb-1">Gas Price</div>
+            <div className="text-xs text-gray-500 mb-1">State Root</div>
             <div className="text-xl font-semibold text-gray-900">
-              {formatGasPrice(meter.bundleGasPrice)}
+              {meter.stateRootTimeUs.toLocaleString()}μs
             </div>
           </div>
           <div>
-            <div className="text-xs text-gray-500 mb-1">Coinbase Diff</div>
+            <div className="text-xs text-gray-500 mb-1">Total Time</div>
             <div className="text-xl font-semibold text-gray-900">
-              {formatHexValue(meter.coinbaseDiff)}
+              {totalTimeUs.toLocaleString()}μs
             </div>
           </div>
         </div>
       </div>
-      <div className="border-t border-gray-100 px-5 py-3 bg-gray-50/50 grid grid-cols-3 gap-4 text-xs">
+      <div className="border-t border-gray-100 px-5 py-3 bg-gray-50/50 grid grid-cols-5 gap-4 text-xs">
         <div>
-          <span className="text-gray-500">State Block</span>
+          <span className="text-gray-500">Total Gas</span>
           <span className="ml-2 font-medium text-gray-900">
-            #{meter.stateBlockNumber}
+            {meter.totalGasUsed.toLocaleString()}
+          </span>
+        </div>
+        <div>
+          <span className="text-gray-500">Gas Price</span>
+          <span className="ml-2 font-medium text-gray-900">
+            {formatGasPrice(meter.bundleGasPrice)}
           </span>
         </div>
         <div>
@@ -343,9 +345,15 @@ function SimulationCard({ meter }: { meter: MeterBundleResponse }) {
           </span>
         </div>
         <div>
-          <span className="text-gray-500">ETH to Coinbase</span>
+          <span className="text-gray-500">Coinbase Diff</span>
+          <span className="ml-2 font-medium text-gray-900">
+            {formatHexValue(meter.coinbaseDiff)}
+          </span>
+        </div>
+        <div>
+          <span className="text-gray-500">State Block</span>
           <span className="ml-2 font-medium text-gray-900">
-            {formatHexValue(meter.ethSentToCoinbase)}
+            #{meter.stateBlockNumber}
           </span>
         </div>
       </div>

src/lib/s3.ts

@@ -127,6 +127,7 @@ export interface MeterBundleResponse {
   stateBlockNumber: number;
   totalGasUsed: number;
   totalExecutionTimeUs: number;
+  stateRootTimeUs: number;
 }
 
 export interface BundleData {