feat: Adding txn search to banks chart

Author: atsai-jumptrading

package-lock.json

@@ -43,6 +43,7 @@
     "@types/luxon": "^3.4.2",
     "byte-size": "^9.0.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "events": "^3.3.0",
     "hammerjs": "^2.0.8",
     "immer": "^10.1.1",
@@ -72,7 +73,7 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.11.1",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc-04bd67a4-20240924",
     "eslint-plugin-react-refresh": "^0.4.12",

package.json

@@ -241,6 +241,8 @@ export const slotTransactionsSchema = z.object({
   txn_microblock_id: z.number().array(),
   txn_landed: z.boolean().array(),
   txn_signature: z.string().array(),
+  txn_source_ipv4: z.string().array(),
+  txn_source_tpu: z.string().array(),
 });
 
 export const slotLevelSchema = z.enum([

src/api/entities.ts

@@ -13,6 +13,8 @@
   --green-live: #3cff73;
 
   font-variant-numeric: tabular-nums;
+
+  overflow: hidden;
 }
 
 .rt-TooltipContent {

src/app.css

@@ -1,18 +1,17 @@
 import styles from "./card.module.css";
-import type { CSSProperties, PropsWithChildren } from "react";
+import type { PropsWithChildren, HTMLAttributes } from "react";
 
 interface CardProps {
   hideChildren?: boolean;
-  style?: CSSProperties;
 }
 
 export default function Card({
   children,
   hideChildren,
-  style,
-}: PropsWithChildren<CardProps>) {
+  ...props
+}: PropsWithChildren<CardProps & HTMLAttributes<HTMLDivElement>>) {
   return (
-    <div className={styles.card} style={style}>
+    <div className={styles.card} {...props}>
       {!hideChildren && children}
     </div>
   );

src/components/Card.tsx

@@ -9,6 +9,7 @@ export const lamportsPerSol = 1_000_000_000;
 export const defaultMaxComputeUnits = 50_000_000;
 
 export const clusterIndicatorHeight = 5;
+export const slotNavHeight = 36.5;
 
 export const headerHeight = 48;
 export const headerSpacing = 13;
@@ -28,3 +29,46 @@ export const slotNavWidth =
 export const narrowNavMedia = "(max-width: 768px)";
 
 export const maxZIndex = 110;
+export const txnErrorCodeMap: Record<string, string> = {
+  0: "Success", //	The transaction successfully executed
+  1: "Account In Use", // Includes a writable account that was already in use at the time this transaction was executed
+  2: "Account Loaded Twice", // Lists at least one account pubkey more than once
+  3: "Account Not Found", // Lists at least one account pubkey that was not found in the accounts database
+  4: "Program Account Not Found", // Could not find or parse a listed program account
+  5: "Insufficient Funds For Fee", // Lists a fee payer that does not have enough SOL to fund this transaction
+  6: "Invalid Account For Fee", // Lists a fee payer that may not be used to pay transaction fees
+  7: "Already Processed", // This transaction has been processed before (e.g. the transaction was sent twice)
+  8: "Blockhash Not Found", // Provides a block hash of a recent block in the chain, b, that this validator has not seen yet, or that is so old it has been discarded
+  9: "Instruction Error", // Includes an instruction that failed to process
+  10: "Call Chain Too Deep", // Includes a cross program invocation (CPI) chain that exceeds the maximum depth allowed
+  11: "Missing Signature For Fee", // Requires a fee but has no signature present
+  12: "Invalid Account Index", // Contains an invalid account reference in one of its instructions
+  13: "Signature Failure", // Includes a signature that did not pass verification
+  14: "Invalid Program For Execution", // Includes a program that may not be used for executing transactions
+  15: "Sanitize Failure", // Failed to parse a portion of the transaction payload
+  16: "Cluster Maintenance", // Cluster is undergoing an active maintenance window
+  17: "Account Borrow Outstanding", // Transaction processing left an account with an outstanding borrowed reference
+  18: "Would Exceed Max Block Cost Limit", // Exceeded the maximum compute unit cost allowed for this slot
+  19: "Unsupported Version", // Includes a transaction version that is not supported by this validator
+  20: "Invalid Writable Account", // Includes an account marked as writable that is not in fact writable
+  21: "Would Exceed Max Account Cost Limit", // Exceeded the maximum per-account compute unit cost allowed for this slot
+  22: "Would Exceed Account Data Block Limit", // Retrieved accounts data size exceeds the limit imposed for this slot
+  23: "Too Many Account Locks", // Locked too many accounts
+  24: "Address Lookup Table Not Found", // Loads an address table account that doesn't exist
+  25: "Invalid Address Lookup Table Owner", // Loads an address table account with an invalid owner
+  26: "Invalid Address Lookup Table Data", // Loads an address table account with invalid data
+  27: "Invalid Address Lookup Table Index", // Address table lookup uses an invalid index
+  28: "Invalid Rent Paying Account", // Deprecated
+  29: "Would Exceed Max Vote Cost Limit", // Exceeded the maximum vote compute unit cost allowed for this slot
+  30: "Would Exceed Account Data Total Limit", // Deprecated
+  31: "Duplicate Instruction", // Contains duplicate instructions
+  32: "Insufficient Funds For Rent", // Deprecated
+  33: "Max Loaded Accounts Data Size Exceeded", // Retrieved accounts data size exceeds the limit imposed for this transaction
+  34: "Invalid Loaded Accounts Data Size Limit", // Requested an invalid data size (i.e. 0)
+  35: "Resanitization Needed", // Sanitized transaction differed before/after feature activation. Needs to be resanitized
+  36: "Program Execution Temporarily Restricted", //	Execution of a program referenced by this transaciton is restricted
+  37: "Unbalanced Transaction", //	The total accounts balance before the transaction does not equal the total balance after
+  38: "Program Cache Hit Max Limit", //	The program cache allocated for transaction batch for this transaction hit its load limit
+  39: "Commit Cancelled", //	This transaction was part of a bundle that failed
+  40: "Bundle Peer", //	This transaction was part of a bundle that failed
+};

src/consts.ts

@@ -51,7 +51,6 @@ export default function Navigation() {
   return (
     <div
       style={{
-        position: "relative",
         // resizes outlet content immediately
         flexShrink: 0,
         width: isNarrow || isNavCollapsed ? "0" : `${width}px`,

src/features/Navigation/index.tsx

@@ -9,12 +9,11 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import type { SlotTransactions } from "../../../../api/types";
 import { tooltipTxnIdxAtom, tooltipTxnStateAtom } from "./chartTooltipAtoms";
 import { timeScaleDragPlugin } from "./scaleDragPlugin";
-import { getChartData } from "./chartUtils";
+import { getChartData, getUplotId } from "./chartUtils";
 import { addPrevSeries, barCountAtom, chartFiltersAtom } from "./atoms";
 import { safeDivide } from "../../../../mathUtils";
 import { txnBarsTooltipPlugin } from "./txnBarsTooltipPlugin";
 import { wheelZoomPlugin } from "../../../../uplotReact/wheelZoomPlugin";
-import { txnBarsUplotIdPrefix } from "./consts";
 import { syncXScalePlugin } from "../../../../uplotReact/syncXScalePlugin";
 import { leftAxisSizeAtom, rightAxisSizeAtom } from "../ComputeUnitsCard/atoms";
 import { touchPlugin } from "../../../../uplotReact/touchPlugin";
@@ -23,10 +22,6 @@ import { chartAxisColor, chartGridStrokeColor } from "../../../../colors";
 /** Buffer of the canvas past the axes of the chart to prevent the first and last tick labels from being cut off */
 const xBuffer = 20;
 
-function getUplotId(bankIdx: number) {
-  return `${txnBarsUplotIdPrefix}${bankIdx}`;
-}
-
 interface BarsChartProps {
   bankIdx: number;
   transactions: SlotTransactions;
@@ -81,8 +76,6 @@ export default function BarsChart({
     [bankIdx, maxTs, transactions],
   );
 
-  const chartId = getUplotId(bankIdx);
-
   const options = useMemo<uPlot.Options | undefined>(() => {
     if (!chartData?.length) return;
 
@@ -181,7 +174,7 @@ export default function BarsChart({
           return (
             <>
               <UplotReact
-                id={chartId}
+                id={getUplotId(bankIdx)}
                 options={options}
                 data={chartData}
                 onCreate={handleCreate}

src/features/Overview/SlotPerformance/TransactionBarsCard/BarsChart.tsx

@@ -13,6 +13,14 @@ import { getChartData } from "./chartUtils";
 import BarChartFloatingAction from "./BarChartFloatingAction";
 import CardHeader from "../../../../components/CardHeader";
 import { getMaxTsWithBuffer } from "../../../../transactionUtils";
+import {
+  clusterIndicatorHeight,
+  headerHeight,
+  slotNavHeight,
+} from "../../../../consts";
+
+const navigationTop = clusterIndicatorHeight + headerHeight;
+const stickyTop = navigationTop + slotNavHeight;
 
 export default function BarsChartContainer() {
   const slot = useAtomValue(selectedSlotAtom);
@@ -53,8 +61,21 @@ export default function BarsChartContainer() {
   if (!query.response?.transactions) return null;
 
   return (
-    <Flex direction="column" key={slot}>
-      <Flex gap="2" pb="2">
+    <Flex direction="column" height="100%" key={slot}>
+      <Flex
+        id="transaction-bars-controls"
+        gap="2"
+        position="sticky"
+        top={`${stickyTop}px`}
+        style={{
+          // Match card background
+          background: "#141720",
+          // To draw above txn bars and tooltip
+          zIndex: 4,
+          paddingBottom: "16px",
+          marginBottom: "-8px",
+        }}
+      >
         <CardHeader text="Banks" />
         <ChartControls
           transactions={query.response.transactions}