Skip to content

Commit d95e7b5

Browse files
amliu-jumptradingamliu-jumptrading
committed
chore: add arrival time
1 parent a296451 commit d95e7b5

File tree

1 file changed

+91
-73
lines changed

1 file changed

+91
-73
lines changed

‎src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx‎

Lines changed: 91 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import { Cross2Icon, CopyIcon, CheckIcon } from "@radix-ui/react-icons";
1414
import { useDebouncedCallback } from "use-debounce";
1515
import RowSeparator from "../../../../components/RowSeparator";
1616
import { getDurationWithUnits } from "./chartUtils";
17-
import { copyToClipboard, removePortFromIp } from "../../../../utils";
17+
import {
18+
copyToClipboard,
19+
formatTimeNanos,
20+
removePortFromIp,
21+
} from "../../../../utils";
1822
import {
1923
chartAxisColor,
2024
computeUnitsColor,
@@ -49,83 +53,97 @@ export default function ChartTooltip() {
4953
return getTxnBundleStats(transactions, txnIdx);
5054
}, [transactions, txnIdx]);
5155

56+
if (transactions?.txn_bank_idx[txnIdx] == null) {
57+
return <UplotTooltip elId="txn-bars-tooltip"></UplotTooltip>;
58+
}
59+
60+
const formattedArrivalTime = formatTimeNanos(
61+
transactions.txn_arrival_timestamps_nanos[txnIdx],
62+
);
63+
5264
return (
5365
<UplotTooltip elId="txn-bars-tooltip">
54-
{transactions?.txn_bank_idx[txnIdx] != null && (
66+
<Flex direction="column">
67+
<Flex justify="between">
68+
<Text
69+
className={styles.state}
70+
style={{ color: stateTextColors[txnState] }}
71+
>
72+
{txnState}
73+
</Text>
74+
<Button variant="ghost" size="1" id="txn-bars-tooltip-close">
75+
<Cross2Icon color={chartAxisColor} />
76+
</Button>
77+
</Flex>
78+
<RowSeparator />
5579
<Flex direction="column">
56-
<Flex justify="between">
57-
<Text
58-
className={styles.state}
59-
style={{ color: stateTextColors[txnState] }}
60-
>
61-
{txnState}
62-
</Text>
63-
<Button variant="ghost" size="1" id="txn-bars-tooltip-close">
64-
<Cross2Icon color={chartAxisColor} />
65-
</Button>
66-
</Flex>
80+
<SuccessErrorDisplay txnIdx={txnIdx} transactions={transactions} />
81+
<BooleanLabelValueDisplay
82+
label="Bundle"
83+
value={transactions.txn_from_bundle[txnIdx]}
84+
append={
85+
bundleStats
86+
? `(${bundleStats.order} of ${bundleStats.totalCount})`
87+
: undefined
88+
}
89+
/>
90+
<BooleanLabelValueDisplay
91+
label="Vote"
92+
value={transactions.txn_is_simple_vote[txnIdx]}
93+
/>
94+
<BooleanLabelValueDisplay
95+
label="Landed"
96+
value={transactions.txn_landed[txnIdx]}
97+
/>
6798
<RowSeparator />
68-
<Flex direction="column">
69-
<SuccessErrorDisplay txnIdx={txnIdx} transactions={transactions} />
70-
<BooleanLabelValueDisplay
71-
label="Bundle"
72-
value={transactions.txn_from_bundle[txnIdx]}
73-
append={
74-
bundleStats
75-
? `(${bundleStats.order} of ${bundleStats.totalCount})`
76-
: undefined
77-
}
78-
/>
79-
<BooleanLabelValueDisplay
80-
label="Vote"
81-
value={transactions.txn_is_simple_vote[txnIdx]}
82-
/>
83-
<BooleanLabelValueDisplay
84-
label="Landed"
85-
value={transactions.txn_landed[txnIdx]}
86-
/>
87-
<RowSeparator />
88-
<LabelValueDisplay
89-
label="Fees"
90-
value={`${(transactions.txn_priority_fee[txnIdx] + transactions.txn_transaction_fee[txnIdx])?.toLocaleString()}`}
91-
color={feesColor}
92-
/>
93-
<LabelValueDisplay
94-
label="Tips"
95-
value={`${transactions.txn_tips[txnIdx]?.toLocaleString()}`}
96-
color={tipsColor}
97-
/>
98-
<RowSeparator />
99-
<CuDisplay transactions={transactions} txnIdx={txnIdx} />
100-
<RowSeparator />
101-
<LabelValueDisplay label="Txn Index" value={`${txnIdx}`} />
102-
<LabelValueDisplay
103-
label="Microblock ID"
104-
value={`${transactions.txn_microblock_id[txnIdx]}`}
105-
/>
106-
<LabelValueDisplay
107-
label="Bank ID"
108-
value={`${transactions.txn_bank_idx[txnIdx]}`}
109-
/>
110-
<LabelValueDisplay
111-
label="Age since slot start"
112-
value={`${(Number(transactions.txn_arrival_timestamps_nanos[txnIdx] - transactions.start_timestamp_nanos) / 1_000_000).toLocaleString()}ms`}
113-
/>
114-
<IpDisplay transactions={transactions} txnIdx={txnIdx} />
115-
<StateDurationDisplay
116-
transactions={transactions}
117-
txnIdx={txnIdx}
118-
bundleTxnIdx={bundleStats?.bundleTxnIdx}
119-
/>
120-
<RowSeparator />
121-
<LabelValueDisplay
122-
label="Txn Sig"
123-
value={`${transactions.txn_signature[txnIdx]?.substring(0, 8)}...`}
124-
copyValue={transactions.txn_signature[txnIdx]}
125-
/>
126-
</Flex>
99+
<LabelValueDisplay
100+
label="Fees"
101+
value={`${(transactions.txn_priority_fee[txnIdx] + transactions.txn_transaction_fee[txnIdx])?.toLocaleString()}`}
102+
color={feesColor}
103+
/>
104+
<LabelValueDisplay
105+
label="Tips"
106+
value={`${transactions.txn_tips[txnIdx]?.toLocaleString()}`}
107+
color={tipsColor}
108+
/>
109+
<RowSeparator />
110+
<CuDisplay transactions={transactions} txnIdx={txnIdx} />
111+
<RowSeparator />
112+
<LabelValueDisplay label="Txn Index" value={`${txnIdx}`} />
113+
<LabelValueDisplay
114+
label="Microblock ID"
115+
value={`${transactions.txn_microblock_id[txnIdx]}`}
116+
/>
117+
<LabelValueDisplay
118+
label="Bank ID"
119+
value={`${transactions.txn_bank_idx[txnIdx]}`}
120+
/>
121+
<LabelValueDisplay
122+
label="Age since slot start"
123+
value={`${(Number(transactions.txn_arrival_timestamps_nanos[txnIdx] - transactions.start_timestamp_nanos) / 1_000_000).toLocaleString()}ms`}
124+
/>
125+
<LabelValueDisplay
126+
label="Arrival Time (nano)"
127+
value={formattedArrivalTime.inNanos}
128+
/>
129+
<LabelValueDisplay
130+
label="Arrival Time (ms)"
131+
value={formattedArrivalTime.inMillis}
132+
/>
133+
<IpDisplay transactions={transactions} txnIdx={txnIdx} />
134+
<StateDurationDisplay
135+
transactions={transactions}
136+
txnIdx={txnIdx}
137+
bundleTxnIdx={bundleStats?.bundleTxnIdx}
138+
/>
139+
<RowSeparator />
140+
<LabelValueDisplay
141+
label="Txn Sig"
142+
value={`${transactions.txn_signature[txnIdx]?.substring(0, 8)}...`}
143+
copyValue={transactions.txn_signature[txnIdx]}
144+
/>
127145
</Flex>
128-
)}
146+
</Flex>
129147
</UplotTooltip>
130148
);
131149
}

0 commit comments

Comments
 (0)