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,30 +288,34 @@ export const firstProcessedSlotAtom = atom((get) => {
   return startupProgress.ledger_max_slot + 1;
 });
 
-export const earliestProcessedSlotLeaderAtom = atom((get) => {
-  const firstProcessedSlot = get(firstProcessedSlotAtom);
-  const leaderSlots = get(leaderSlotsAtom);
-
-  if (firstProcessedSlot === undefined || !leaderSlots?.length) return;
-  return leaderSlots.find((s) => s >= firstProcessedSlot);
-});
-
-export const mostRecentSlotLeaderAtom = atom((get) => {
-  const earliestProcessedSlotLeader = get(earliestProcessedSlotLeaderAtom);
+export const processedLeaderSlotsAtom = atom((get) => {
   const leaderSlots = get(leaderSlotsAtom);
+  const firstProcessedSlot = get(firstProcessedSlotAtom);
   const currentLeaderSlot = get(currentLeaderSlotAtom);
 
   if (
-    earliestProcessedSlotLeader === undefined ||
-    currentLeaderSlot === undefined ||
-    !leaderSlots?.length
+    !leaderSlots?.length ||
+    firstProcessedSlot === undefined ||
+    currentLeaderSlot === undefined
   )
     return;
-  return leaderSlots.findLast(
-    (s) => earliestProcessedSlotLeader <= s && s <= currentLeaderSlot,
+  return leaderSlots.filter(
+    (slot) => firstProcessedSlot <= slot && slot <= currentLeaderSlot,
   );
 });
 
+export const earliestProcessedSlotLeaderAtom = atom((get) => {
+  const processedLeaderSlots = get(processedLeaderSlotsAtom);
+  return processedLeaderSlots?.[0];
+});
+
+export const mostRecentSlotLeaderAtom = atom((get) => {
+  const processedLeaderSlots = get(processedLeaderSlotsAtom);
+  return processedLeaderSlots
+    ? processedLeaderSlots[processedLeaderSlots.length - 1]
+    : undefined;
+});
+
 const _currentSlotAtom = atom<number | undefined>(undefined);
 export const currentSlotAtom = atom(
   (get) => get(_currentSlotAtom),

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/consts.ts

@@ -77,3 +77,12 @@ export const slotNavWidth =
 export const narrowNavMedia = "(max-width: 768px)";
 
 export const maxZIndex = 110;
+
+export const numQuickSearchSlots = 3;
+export const quickSearchCardWidth = 226;
+export const slotSearchGap = 40;
+export const slotSearchPadding = 20;
+export const slotSearchMaxWidth =
+  2 * slotSearchPadding +
+  numQuickSearchSlots * quickSearchCardWidth +
+  (numQuickSearchSlots - 1) * slotSearchGap;