feat: add quick select list options

src/api/atoms.ts

@@ -23,6 +23,7 @@ import type {
   BlockEngineUpdate,
   VoteBalance,
   ScheduleStrategy,
+  SlotRankings,
 } from "./types";
 import { rafAtom } from "../atomUtils";
 
@@ -85,3 +86,5 @@ export const voteDistanceAtom = atom<VoteDistance | undefined>(undefined);
 export const skippedSlotsAtom = atom<SkippedSlots | undefined>(undefined);
 
 export const blockEngineAtom = atom<BlockEngineUpdate | undefined>(undefined);
+
+export const slotRankingsAtom = atom<SlotRankings | undefined>(undefined);

src/api/entities.ts

@@ -474,6 +474,33 @@ export const slotResponseSchema = z.object({
 
 export const slotSkippedHistorySchema = z.number().array();
 
+export const slotRankingsSchema = z.object({
+  slots_largest_tips: z.number().array(),
+  vals_largest_tips: z.coerce.bigint().array(),
+  slots_smallest_tips: z.number().array(),
+  vals_smallest_tips: z.coerce.bigint().array(),
+  slots_largest_fees: z.number().array(),
+  vals_largest_fees: z.coerce.bigint().array(),
+  slots_smallest_fees: z.number().array(),
+  vals_smallest_fees: z.coerce.bigint().array(),
+  slots_largest_rewards: z.number().array(),
+  vals_largest_rewards: z.coerce.bigint().array(),
+  slots_smallest_rewards: z.number().array(),
+  vals_smallest_rewards: z.coerce.bigint().array(),
+  slots_largest_duration: z.number().array(),
+  vals_largest_duration: z.coerce.bigint().array(),
+  slots_smallest_duration: z.number().array(),
+  vals_smallest_duration: z.coerce.bigint().array(),
+  slots_largest_compute_units: z.number().array(),
+  vals_largest_compute_units: z.coerce.bigint().array(),
+  slots_smallest_compute_units: z.number().array(),
+  vals_smallest_compute_units: z.coerce.bigint().array(),
+  slots_largest_skipped: z.number().array(),
+  vals_largest_skipped: z.coerce.bigint().array(),
+  slots_smallest_skipped: z.number().array(),
+  vals_smallest_skipped: z.coerce.bigint().array(),
+});
+
 export const slotSchema = z.discriminatedUnion("key", [
   slotTopicSchema.extend({
     key: z.literal("skipped_history"),
@@ -487,6 +514,10 @@ export const slotSchema = z.discriminatedUnion("key", [
     key: z.literal("query"),
     value: slotResponseSchema.nullable(),
   }),
+  slotTopicSchema.extend({
+    key: z.literal("query_rankings"),
+    value: slotRankingsSchema,
+  }),
 ]);
 
 export const blockEngineStatusSchema = z.enum([

src/api/types.ts

@@ -40,6 +40,7 @@ import type {
   slotTransactionsSchema,
   voteBalanceSchema,
   scheduleStrategySchema,
+  slotRankingsSchema,
 } from "./entities";
 
 export type Client = z.infer<typeof clientSchema>;
@@ -131,3 +132,5 @@ export type SkippedSlots = z.infer<typeof slotSkippedHistorySchema>;
 export type BlockEngineUpdate = z.infer<typeof blockEngineUpdateSchema>;
 
 export type BlockEngineStatus = z.infer<typeof blockEngineStatusSchema>;
+
+export type SlotRankings = z.infer<typeof slotRankingsSchema>;

src/api/useSetAtomWsData.ts

@@ -20,6 +20,7 @@ import {
   voteStateAtom,
   voteBalanceAtom,
   scheduleStrategyAtom,
+  slotRankingsAtom,
 } from "./atoms";
 import {
   blockEngineSchema,
@@ -130,6 +131,7 @@ export function useSetAtomWsData() {
 
   const setSkippedSlots = useSetAtom(skippedSlotsAtom);
   const setSlotResponse = useSetAtom(setSlotResponseAtom);
+  const setSlotRankings = useSetAtom(slotRankingsAtom);
 
   const [epoch, setEpoch] = useAtom(epochAtom);
 
@@ -280,6 +282,10 @@ export function useSetAtomWsData() {
             }
             break;
           }
+          case "query_rankings": {
+            setSlotRankings(value);
+            break;
+          }
         }
       } else if (topic === "block_engine") {
         const { key, value } = blockEngineSchema.parse(msg);

src/atoms.ts

@@ -288,28 +288,30 @@ export const firstProcessedSlotAtom = atom((get) => {
   return startupProgress.ledger_max_slot + 1;
 });
 
-export const earliestProcessedSlotLeaderAtom = atom((get) => {
-  const firstProcessedSlot = get(firstProcessedSlotAtom);
+export const firstProcessedLeaderIndexAtom = atom((get) => {
   const leaderSlots = get(leaderSlotsAtom);
+  const firstProcessedSlot = get(firstProcessedSlotAtom);
 
-  if (firstProcessedSlot === undefined || !leaderSlots?.length) return;
-  return leaderSlots.find((s) => s >= firstProcessedSlot);
+  if (!leaderSlots || firstProcessedSlot === undefined) return;
+
+  const leaderIndex = leaderSlots.findIndex((s) => s >= firstProcessedSlot);
+  return leaderIndex !== -1 ? leaderIndex : undefined;
 });
 
-export const mostRecentSlotLeaderAtom = atom((get) => {
-  const earliestProcessedSlotLeader = get(earliestProcessedSlotLeaderAtom);
+export const firstProcessedLeaderAtom = atom((get) => {
   const leaderSlots = get(leaderSlotsAtom);
-  const currentLeaderSlot = get(currentLeaderSlotAtom);
-
-  if (
-    earliestProcessedSlotLeader === undefined ||
-    currentLeaderSlot === undefined ||
-    !leaderSlots?.length
-  )
-    return;
-  return leaderSlots.findLast(
-    (s) => earliestProcessedSlotLeader <= s && s <= currentLeaderSlot,
-  );
+  const firstProcessedLeaderIndex = get(firstProcessedLeaderIndexAtom);
+  return firstProcessedLeaderIndex
+    ? leaderSlots?.[firstProcessedLeaderIndex]
+    : undefined;
+});
+
+export const lastProcessedLeaderAtom = atom((get) => {
+  const leaderSlots = get(leaderSlotsAtom);
+  const nextLeaderSlotIndex = get(nextLeaderSlotIndexAtom);
+  return nextLeaderSlotIndex
+    ? leaderSlots?.[nextLeaderSlotIndex - 1]
+    : undefined;
 });
 
 const _currentSlotAtom = atom<number | undefined>(undefined);

src/colors.ts

@@ -164,11 +164,15 @@ export const circularProgressPathColor = slotStatusBlue;
 
 // slot details
 export const slotDetailsMySlotsColor = "#0080e6";
-export const slotDetailsQuickSearchTextPrimaryColor = "#cecece";
-export const slotDetailsQuickSearchTextSecondaryColor = "#646464";
-export const slotDetailsEarliestSlotColor = "#00A2C7";
-export const slotDetailsMostRecentSlotColor = "#1D863B";
-export const slotDetailsLastSkippedSlotColor = "#EB6262";
+export const slotDetailsSearchLabelColor = "#FFF";
+export const slotDetailsQuickSearchTextColor = "var(--gray-10)";
+export const slotDetailsEarliestSlotColor = "var(--teal-9)";
+export const slotDetailsRecentSlotColor = "var(--cyan-9)";
+export const slotDetailsSkippedSlotColor = "var(--red-8)";
+export const slotDetailsFeesSlotColor = "var(--sky-8)";
+export const slotDetailsTipsSlotColor = "var(--green-9)";
+export const slotDetailsRewardsSlotColor = "var(--indigo-10)";
+export const slotDetailsClickableSlotColor = "var(--blue-9)";
 export const slotDetailsBackgroundColor = "#15181e";
 export const slotDetailsColor = "#9aabc3";
 export const slotDetailsSkippedBackgroundColor = "#250f0f";

src/features/Navigation/EpochSlider.tsx

@@ -8,7 +8,7 @@ import {
   epochAtom,
   firstProcessedSlotAtom,
   leaderSlotsAtom,
-  mostRecentSlotLeaderAtom,
+  lastProcessedLeaderAtom,
   SlotNavFilter,
   slotNavFilterAtom,
   slotOverrideAtom,
@@ -228,7 +228,7 @@ function SliderEpochProgress({
   setSliderValue: React.Dispatch<React.SetStateAction<number[]>>;
 }) {
   const epoch = useAtomValue(epochAtom);
-  const mostRecentSlotLeader = useAtomValue(mostRecentSlotLeaderAtom);
+  const lastProcessedLeader = useAtomValue(lastProcessedLeaderAtom);
   const currentLeaderSlot = useAtomValue(currentLeaderSlotAtom);
   const slotOverride = useAtomValue(slotOverrideAtom);
   const navFilter = useAtomValue(slotNavFilterAtom);
@@ -270,7 +270,7 @@ function SliderEpochProgress({
         })
       : navFilter === SlotNavFilter.MySlots
         ? slotToEpochPct({
-            slot: mostRecentSlotLeader,
+            slot: lastProcessedLeader,
             epochStartSlot: epoch?.start_slot,
             epochEndSlot: epoch?.end_slot,
           })
@@ -288,7 +288,7 @@ function SliderEpochProgress({
     setSliderValue,
     slotOverride,
     navFilter,
-    mostRecentSlotLeader,
+    lastProcessedLeader,
   ]);
 
   return (