Adding identity balance, vote balance, and vote pubkey to header info

Author: atsai-jumptrading

src/api/atoms.ts

@@ -21,6 +21,7 @@ import {
   VoteState,
   VoteDistance,
   BlockEngineUpdate,
+  VoteBalance,
 } from "./types";
 import { DateTime } from "luxon";
 import { rafAtom } from "../atomUtils";
@@ -41,6 +42,8 @@ export const tilesAtom = atom<Tile[] | undefined>(undefined);
 
 export const identityBalanceAtom = atom<IdentityBalance | undefined>(undefined);
 
+export const voteBalanceAtom = atom<VoteBalance | undefined>(undefined);
+
 export const rootSlotAtom = atom<RootSlot | undefined>(undefined);
 
 export const optimisticallyConfirmedSlotAtom = atom<

src/api/entities.ts

@@ -73,6 +73,8 @@ export const tileSchema = z.object({
 
 export const identityBalanceSchema = z.number();
 
+export const voteBalanceSchema = z.number();
+
 export const rootSlotSchema = z.number();
 
 export const optimisticallyConfirmedSlotSchema = z.number();
@@ -294,6 +296,10 @@ export const summarySchema = z.discriminatedUnion("key", [
     key: z.literal("identity_balance"),
     value: identityBalanceSchema,
   }),
+  summaryTopicSchema.extend({
+    key: z.literal("vote_balance"),
+    value: identityBalanceSchema,
+  }),
   summaryTopicSchema.extend({
     key: z.literal("root_slot"),
     value: rootSlotSchema,

src/api/types.ts

@@ -37,6 +37,7 @@ import {
   voteDistanceSchema,
   voteStateSchema,
   computeUnitsSchema,
+  voteBalanceSchema,
 } from "./entities";
 
 export type Version = z.infer<typeof versionSchema>;
@@ -53,6 +54,8 @@ export type Tile = z.infer<typeof tileSchema>;
 
 export type IdentityBalance = z.infer<typeof identityBalanceSchema>;
 
+export type VoteBalance = z.infer<typeof voteBalanceSchema>;
+
 export type RootSlot = z.infer<typeof rootSlotSchema>;
 
 // export type SlotRooted = z.infer<typeof slotRootedSchema>;

src/api/useSetAtomWsData.ts

@@ -18,6 +18,7 @@ import {
   versionAtom,
   voteDistanceAtom,
   voteStateAtom,
+  voteBalanceAtom,
 } from "./atoms";
 import {
   blockEngineSchema,
@@ -69,6 +70,7 @@ export function useSetAtomWsData() {
   const setTiles = useSetAtom(tilesAtom);
 
   const setIdentityBalance = useSetAtom(identityBalanceAtom);
+  const setVoteBalance = useSetAtom(voteBalanceAtom);
 
   const [uptime, setUptime] = useAtom(uptimeAtom);
   const uptimeMins =
@@ -174,6 +176,10 @@ export function useSetAtomWsData() {
             setIdentityKey(value);
             break;
           }
+          case "vote_balance": {
+            setVoteBalance(value);
+            break;
+          }
           case "uptime_nanos": {
             setUptime({ uptimeNanos: value, ts: DateTime.now() });
             break;

src/components/ArrowDropdown.tsx

@@ -1,16 +1,20 @@
 import { PropsWithChildren, useState } from "react";
 import { Button } from "@radix-ui/themes";
 import { CaretDownIcon, CaretUpIcon } from "@radix-ui/react-icons";
-import Dropdown from "./Dropdown";
+import PopoverDropdown from "./PopoverDropdown";
 
 export default function ArrowDropdown({ children }: PropsWithChildren) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <Dropdown dropdownMenu={children} isOpen={isOpen} onOpenChange={setIsOpen}>
+    <PopoverDropdown
+      content={children}
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+    >
       <Button variant="ghost" size="1">
         {isOpen ? <CaretUpIcon /> : <CaretDownIcon />}
       </Button>
-    </Dropdown>
+    </PopoverDropdown>
   );
 }

src/components/PopoverDropdown.tsx

@@ -0,0 +1,39 @@
+import { Popover } from "radix-ui";
+import styles from "./popoverDropdown.module.css";
+import { PropsWithChildren, ReactNode } from "react";
+import { containerElAtom } from "../atoms";
+import { useAtomValue } from "jotai";
+import { Flex } from "@radix-ui/themes";
+
+interface PopoverDropdownProps {
+  content: ReactNode;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+export default function PopoverDropdown({
+  children,
+  content,
+  isOpen,
+  onOpenChange,
+}: PropsWithChildren<PopoverDropdownProps>) {
+  const containerEl = useAtomValue(containerElAtom);
+
+  return (
+    <Popover.Root open={isOpen} onOpenChange={onOpenChange}>
+      <Flex>
+        <Popover.Trigger asChild>{children}</Popover.Trigger>
+        <Popover.Anchor></Popover.Anchor>
+      </Flex>
+      <Popover.Portal container={containerEl}>
+        <Popover.Content
+          className={styles.popoverContent}
+          sideOffset={5}
+          tabIndex={undefined}
+        >
+          {content}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

src/components/popoverDropdown.module.css

@@ -0,0 +1,79 @@
+.popover-content {
+  background: #1c2129;
+  border-radius: 4px;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+  margin-right: 8px;
+}
+
+.popover-content:focus {
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px,
+    0 0 0 2px var(--violet-7);
+}
+
+.popover-content[data-state="open"][data-side="top"] {
+  animation-name: slideDownAndFade;
+}
+.popover-content[data-state="open"][data-side="right"] {
+  animation-name: slideLeftAndFade;
+}
+.popover-content[data-state="open"][data-side="bottom"] {
+  animation-name: slideUpAndFade;
+}
+.popover-content[data-state="open"][data-side="left"] {
+  animation-name: slideRightAndFade;
+}
+
+.popover-arrow {
+  fill: #1c2129;
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

src/features/Header/IdentityKey.tsx

@@ -1,26 +1,28 @@
 import { useAtomValue } from "jotai";
-import { identityKeyAtom, uptimeAtom } from "../../api/atoms";
+import {
+  identityBalanceAtom,
+  uptimeAtom,
+  voteBalanceAtom,
+} from "../../api/atoms";
 import { Text, Flex, Tooltip } from "@radix-ui/themes";
 import styles from "./identityKey.module.css";
-import usePeer from "../../hooks/usePeer";
 import PeerIcon from "../../components/PeerIcon";
 import { myStakePctAtom, myStakeAmountAtom } from "../../atoms";
 import { PropsWithChildren, useEffect } from "react";
 import { Duration } from "luxon";
 import { getFmtStake, getTimeTillText, slowDateTimeNow } from "../../utils";
 import { formatNumber } from "../../numUtils";
 import { useInterval, useMedia, useUpdate } from "react-use";
-import Dropdown from "../../components/Dropdown";
 import clsx from "clsx";
+import { useIdentityPeer } from "../../hooks/useIdentityPeer";
+import PopoverDropdown from "../../components/PopoverDropdown";
 
 export default function IdentityKey() {
-  const identityKey = useAtomValue(identityKeyAtom);
-  const peer = usePeer(identityKey);
+  const { peer, identityKey } = useIdentityPeer();
 
-  const isXXNarrowScreen = useMedia("(min-width: 500px)");
+  const isXXNarrowScreen = useMedia("(min-width: 550px)");
   const isXNarrowScreen = useMedia("(min-width: 750px)");
   const isNarrowScreen = useMedia("(min-width: 900px)");
-  const isWideScreen = useMedia("(min-width: 1366px)");
 
   useEffect(() => {
     let title = "Firedancer";
@@ -33,20 +35,17 @@ export default function IdentityKey() {
     document.title = title;
   }, [identityKey, peer]);
 
-  const identityKeyLabel =
-    isWideScreen || !identityKey
-      ? identityKey
-      : `${identityKey.substring(0, 8)}...`;
-
   return (
-    <DropdownContainer showDropdown={!isNarrowScreen}>
-      <div className={clsx(styles.container, styles.horizontal)}>
+    <DropdownContainer showDropdown>
+      <div
+        className={clsx(styles.container, styles.horizontal, styles.pointer)}
+      >
         {isXXNarrowScreen && (
           <PeerIcon url={peer?.info?.icon_url} size={24} isYou />
         )}
         <Label
           label="Validator Name"
-          value={identityKeyLabel}
+          value={`${identityKey?.substring(0, 8)}...`}
           tooltip="The validators identity public key"
         />
         {isXNarrowScreen && (
@@ -59,6 +58,7 @@ export default function IdentityKey() {
           <>
             <Uptime />
             <Commission />
+            <IdentityBalance />
           </>
         )}
       </div>
@@ -79,15 +79,12 @@ function DropdownContainer({
   }
 
   return (
-    <Dropdown dropdownMenu={<DropdownMenu />} noPadding>
-      {children}
-    </Dropdown>
+    <PopoverDropdown content={<DropdownMenu />}>{children}</PopoverDropdown>
   );
 }
 
 function DropdownMenu() {
-  const identityKey = useAtomValue(identityKeyAtom);
-  const peer = usePeer(identityKey);
+  const { peer, identityKey } = useIdentityPeer();
 
   return (
     <div className={styles.container}>
@@ -103,10 +100,51 @@ function DropdownMenu() {
       <StakePct />
       <Uptime />
       <Commission />
+      <IdentityBalance />
+      <VotePubkey />
+      <VoteBalance />
     </div>
   );
 }
 
+function VotePubkey() {
+  const { peer } = useIdentityPeer();
+
+  return (
+    <Label
+      label="Vote Pubkey"
+      value={peer?.vote[0]?.vote_account}
+      tooltip="The public key of vote account, encoded in base58"
+    />
+  );
+}
+
+function VoteBalance() {
+  const voteBalance = useAtomValue(voteBalanceAtom);
+
+  return (
+    <>
+      <Label
+        label="Vote Balance"
+        value={getFmtStake(voteBalance) ?? "-"}
+        tooltip="Account balance of this validators vote account. The balance is on the highest slot of the currently active fork of the validator."
+      />
+    </>
+  );
+}
+
+function IdentityBalance() {
+  const identityBalance = useAtomValue(identityBalanceAtom);
+
+  return (
+    <Label
+      label="Identity Balance"
+      value={getFmtStake(identityBalance) ?? "-"}
+      tooltip="Account balance of this validators identity account. The balance is on the highest slot of the currently active fork of the validator."
+    />
+  );
+}
+
 function StakePct() {
   const stakePct = useAtomValue(myStakePctAtom);
   let value = "-";
@@ -141,8 +179,7 @@ function StakeValue() {
 }
 
 function Commission() {
-  const identityKey = useAtomValue(identityKeyAtom);
-  const peer = usePeer(identityKey);
+  const { peer } = useIdentityPeer();
 
   const maxCommission = peer?.vote.reduce<{
     maxStake: number;
@@ -198,15 +235,16 @@ interface LabelProps {
 }
 function Label({ label, value, color, tooltip }: LabelProps) {
   if (!value) return null;
+  const textValue = (
+    <Text className={styles.value} style={{ color: color }}>
+      {value}
+    </Text>
+  );
 
   return (
     <Flex direction="column">
       <Text className={styles.label}>{label}</Text>
-      <Tooltip content={tooltip}>
-        <Text className={styles.value} style={{ color: color }}>
-          {value}
-        </Text>
-      </Tooltip>
+      {tooltip ? <Tooltip content={tooltip}>{textValue}</Tooltip> : textValue}
     </Flex>
   );
 }