From 52a005a5482c0be7faed314383836284152d634c Mon Sep 17 00:00:00 2001
From: Amy Liu <amliu@jumptrading.com>
Date: Wed, 17 Dec 2025 20:47:17 -0600
Subject: [PATCH] chore: add arrival time

---
 src/__tests__/utils.test.ts                   |   8 +-
 .../TransactionBarsCard/ChartTooltip.tsx      | 164 ++++++++++--------
 src/utils.ts                                  |   1 -
 3 files changed, 95 insertions(+), 78 deletions(-)

diff --git a/src/__tests__/utils.test.ts b/src/__tests__/utils.test.ts
index 902546da..2c627d11 100644
--- a/src/__tests__/utils.test.ts
+++ b/src/__tests__/utils.test.ts
@@ -148,15 +148,15 @@ describe("getDurationText", () => {
 describe("formatTimeNanos", () => {
   it("formats millis and nanos correctly", () => {
     expect(formatTimeNanos(1764892025356640223n)).toEqual({
-      inMillis: "Dec 4, 11:47:05.356 PM UTC",
-      inNanos: "Dec 4, 11:47:05.356640223 PM UTC",
+      inMillis: "Dec 4, 5:47:05.356 PM CST",
+      inNanos: "Dec 4, 5:47:05.356640223 PM CST",
     });
   });
 
   it("zero prefixes nanos correctly", () => {
     expect(formatTimeNanos(1764921600000000123n)).toEqual({
-      inMillis: "Dec 5, 8:00:00.000 AM UTC",
-      inNanos: "Dec 5, 8:00:00.000000123 AM UTC",
+      inMillis: "Dec 5, 2:00:00.000 AM CST",
+      inNanos: "Dec 5, 2:00:00.000000123 AM CST",
     });
   });
 });
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx
index d046ba1f..921f4e9e 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx
@@ -14,7 +14,11 @@ import { Cross2Icon, CopyIcon, CheckIcon } from "@radix-ui/react-icons";
 import { useDebouncedCallback } from "use-debounce";
 import RowSeparator from "../../../../components/RowSeparator";
 import { getDurationWithUnits } from "./chartUtils";
-import { copyToClipboard, removePortFromIp } from "../../../../utils";
+import {
+  copyToClipboard,
+  formatTimeNanos,
+  removePortFromIp,
+} from "../../../../utils";
 import {
   chartAxisColor,
   computeUnitsColor,
@@ -49,83 +53,97 @@ export default function ChartTooltip() {
     return getTxnBundleStats(transactions, txnIdx);
   }, [transactions, txnIdx]);
 
+  if (transactions?.txn_bank_idx[txnIdx] == null) {
+    return <UplotTooltip elId="txn-bars-tooltip"></UplotTooltip>;
+  }
+
+  const formattedArrivalTime = formatTimeNanos(
+    transactions.txn_arrival_timestamps_nanos[txnIdx],
+  );
+
   return (
     <UplotTooltip elId="txn-bars-tooltip">
-      {transactions?.txn_bank_idx[txnIdx] != null && (
+      <Flex direction="column">
+        <Flex justify="between">
+          <Text
+            className={styles.state}
+            style={{ color: stateTextColors[txnState] }}
+          >
+            {txnState}
+          </Text>
+          <Button variant="ghost" size="1" id="txn-bars-tooltip-close">
+            <Cross2Icon color={chartAxisColor} />
+          </Button>
+        </Flex>
+        <RowSeparator />
         <Flex direction="column">
-          <Flex justify="between">
-            <Text
-              className={styles.state}
-              style={{ color: stateTextColors[txnState] }}
-            >
-              {txnState}
-            </Text>
-            <Button variant="ghost" size="1" id="txn-bars-tooltip-close">
-              <Cross2Icon color={chartAxisColor} />
-            </Button>
-          </Flex>
+          <SuccessErrorDisplay txnIdx={txnIdx} transactions={transactions} />
+          <BooleanLabelValueDisplay
+            label="Bundle"
+            value={transactions.txn_from_bundle[txnIdx]}
+            append={
+              bundleStats
+                ? `(${bundleStats.order} of ${bundleStats.totalCount})`
+                : undefined
+            }
+          />
+          <BooleanLabelValueDisplay
+            label="Vote"
+            value={transactions.txn_is_simple_vote[txnIdx]}
+          />
+          <BooleanLabelValueDisplay
+            label="Landed"
+            value={transactions.txn_landed[txnIdx]}
+          />
           <RowSeparator />
-          <Flex direction="column">
-            <SuccessErrorDisplay txnIdx={txnIdx} transactions={transactions} />
-            <BooleanLabelValueDisplay
-              label="Bundle"
-              value={transactions.txn_from_bundle[txnIdx]}
-              append={
-                bundleStats
-                  ? `(${bundleStats.order} of ${bundleStats.totalCount})`
-                  : undefined
-              }
-            />
-            <BooleanLabelValueDisplay
-              label="Vote"
-              value={transactions.txn_is_simple_vote[txnIdx]}
-            />
-            <BooleanLabelValueDisplay
-              label="Landed"
-              value={transactions.txn_landed[txnIdx]}
-            />
-            <RowSeparator />
-            <LabelValueDisplay
-              label="Fees"
-              value={`${(transactions.txn_priority_fee[txnIdx] + transactions.txn_transaction_fee[txnIdx])?.toLocaleString()}`}
-              color={feesColor}
-            />
-            <LabelValueDisplay
-              label="Tips"
-              value={`${transactions.txn_tips[txnIdx]?.toLocaleString()}`}
-              color={tipsColor}
-            />
-            <RowSeparator />
-            <CuDisplay transactions={transactions} txnIdx={txnIdx} />
-            <RowSeparator />
-            <LabelValueDisplay label="Txn Index" value={`${txnIdx}`} />
-            <LabelValueDisplay
-              label="Microblock ID"
-              value={`${transactions.txn_microblock_id[txnIdx]}`}
-            />
-            <LabelValueDisplay
-              label="Bank ID"
-              value={`${transactions.txn_bank_idx[txnIdx]}`}
-            />
-            <LabelValueDisplay
-              label="Age since slot start"
-              value={`${(Number(transactions.txn_arrival_timestamps_nanos[txnIdx] - transactions.start_timestamp_nanos) / 1_000_000).toLocaleString()}ms`}
-            />
-            <IpDisplay transactions={transactions} txnIdx={txnIdx} />
-            <StateDurationDisplay
-              transactions={transactions}
-              txnIdx={txnIdx}
-              bundleTxnIdx={bundleStats?.bundleTxnIdx}
-            />
-            <RowSeparator />
-            <LabelValueDisplay
-              label="Txn Sig"
-              value={`${transactions.txn_signature[txnIdx]?.substring(0, 8)}...`}
-              copyValue={transactions.txn_signature[txnIdx]}
-            />
-          </Flex>
+          <LabelValueDisplay
+            label="Fees"
+            value={`${(transactions.txn_priority_fee[txnIdx] + transactions.txn_transaction_fee[txnIdx])?.toLocaleString()}`}
+            color={feesColor}
+          />
+          <LabelValueDisplay
+            label="Tips"
+            value={`${transactions.txn_tips[txnIdx]?.toLocaleString()}`}
+            color={tipsColor}
+          />
+          <RowSeparator />
+          <CuDisplay transactions={transactions} txnIdx={txnIdx} />
+          <RowSeparator />
+          <LabelValueDisplay label="Txn Index" value={`${txnIdx}`} />
+          <LabelValueDisplay
+            label="Microblock ID"
+            value={`${transactions.txn_microblock_id[txnIdx]}`}
+          />
+          <LabelValueDisplay
+            label="Bank ID"
+            value={`${transactions.txn_bank_idx[txnIdx]}`}
+          />
+          <LabelValueDisplay
+            label="Age since slot start"
+            value={`${(Number(transactions.txn_arrival_timestamps_nanos[txnIdx] - transactions.start_timestamp_nanos) / 1_000_000).toLocaleString()}ms`}
+          />
+          <LabelValueDisplay
+            label="Arrival Time (nano)"
+            value={formattedArrivalTime.inNanos}
+          />
+          <LabelValueDisplay
+            label="Arrival Time (ms)"
+            value={formattedArrivalTime.inMillis}
+          />
+          <IpDisplay transactions={transactions} txnIdx={txnIdx} />
+          <StateDurationDisplay
+            transactions={transactions}
+            txnIdx={txnIdx}
+            bundleTxnIdx={bundleStats?.bundleTxnIdx}
+          />
+          <RowSeparator />
+          <LabelValueDisplay
+            label="Txn Sig"
+            value={`${transactions.txn_signature[txnIdx]?.substring(0, 8)}...`}
+            copyValue={transactions.txn_signature[txnIdx]}
+          />
         </Flex>
-      )}
+      </Flex>
     </UplotTooltip>
   );
 }
diff --git a/src/utils.ts b/src/utils.ts
index f365ef5d..d2bfce14 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -393,7 +393,6 @@ const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
   minute: "2-digit",
   second: "2-digit",
   timeZoneName: "short",
-  timeZone: "UTC",
   fractionalSecondDigits: 3,
 });