chore: identity key text colors

Author: asuzuki-jumptrading

src/colors.ts

@@ -8,6 +8,7 @@ export const primaryTextColor = "#B2BCC9";
 export const secondaryTextColor = "#67696A";
 export const regularTextColor = "#8E909D";
 export const iconButtonColor = "#B4B4B4";
+export const headerLabelTextColor = "#949494";
 
 export const containerBorderColor = "rgba(250, 250, 250, 0.12)";
 export const containerBackgroundColor = "rgba(250, 250, 250, 0.05)";
@@ -17,7 +18,7 @@ export const popoverBackgroundColor = "#1C2129";
 export const rowSeparatorBackgroundColor = "#333333";
 
 export const navButtonTextColor = "#F7F7F7";
-export const navButtonInactiveTextColor = "#949494";
+export const navButtonInactiveTextColor = headerLabelTextColor;
 
 // slot navigation
 export const slotNavFilterBackgroundColor = "#00205F";

src/features/Header/IdentityKey.tsx

@@ -11,7 +11,7 @@ import { myStakePctAtom, myStakeAmountAtom } from "../../atoms";
 import type { PropsWithChildren } from "react";
 import { useEffect } from "react";
 import { DateTime } from "luxon";
-import { getFmtStake, getDurationText, slowDateTimeNow } from "../../utils";
+import { slowDateTimeNow, getSolString, getDurationValues } from "../../utils";
 import { formatNumber } from "../../numUtils";
 import { useInterval, useMedia, useUpdate } from "react-use";
 import clsx from "clsx";
@@ -48,11 +48,10 @@ export default function IdentityKey() {
         {isXXNarrowScreen && (
           <Label
             label="Validator Name"
-            value={
-              truncateKey ? `${identityKey?.substring(0, 8)}...` : identityKey
-            }
             tooltip="The validators identity public key"
-          />
+          >
+            {truncateKey ? `${identityKey?.substring(0, 8)}...` : identityKey}
+          </Label>
         )}
         {isXNarrowScreen && (
           <>
@@ -104,9 +103,10 @@ function DropdownMenu() {
         <PeerIcon url={peer?.info?.icon_url} size={24} isYou />
         <Label
           label="Validator Name"
-          value={identityKey}
           tooltip="The validators identity public key"
-        />
+        >
+          {identityKey}
+        </Label>
       </Flex>
       <StakeValue />
       <StakePct />
@@ -125,68 +125,75 @@ function VotePubkey() {
   return (
     <Label
       label="Vote Pubkey"
-      value={peer?.vote[0]?.vote_account}
       tooltip="The public key of vote account, encoded in base58"
-    />
+    >
+      {peer?.vote[0]?.vote_account}
+    </Label>
   );
 }
 
 function VoteBalance() {
   const voteBalance = useAtomValue(voteBalanceAtom);
+  const solString = getSolString(voteBalance);
 
   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."
-      />
+      >
+        <ValueWithSuffix value={solString} suffix="SOL" />
+      </Label>
     </>
   );
 }
 
 function IdentityBalance() {
   const identityBalance = useAtomValue(identityBalanceAtom);
+  const solString = getSolString(identityBalance);
 
   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."
-    />
+    >
+      <ValueWithSuffix value={solString} suffix="SOL" />
+    </Label>
   );
 }
 
 function StakePct() {
   const stakePct = useAtomValue(myStakePctAtom);
-  let value = "-";
 
-  if (stakePct !== undefined) {
-    value = formatNumber(stakePct, {
-      significantDigits: 4,
-      trailingZeroes: false,
-    });
-    value += "%";
-  }
+  const value =
+    stakePct === undefined
+      ? undefined
+      : formatNumber(stakePct, {
+          significantDigits: 4,
+          trailingZeroes: false,
+        });
 
   return (
     <Label
       label="Stake %"
-      value={value}
       tooltip="What percentage of total stake is delegated to this validator"
-    />
+    >
+      <ValueWithSuffix value={value} suffix="%" />
+    </Label>
   );
 }
 
 function StakeValue() {
   const stake = useAtomValue(myStakeAmountAtom);
+  const solString = getSolString(stake);
 
   return (
     <Label
       label="Stake Amount"
-      value={getFmtStake(stake) ?? "-"}
       tooltip="Amount of total stake that is delegated to this validator"
-    />
+    >
+      <ValueWithSuffix value={solString} suffix="SOL" />
+    </Label>
   );
 }
 
@@ -207,58 +214,82 @@ function Commission() {
   );
 
   return (
-    <Label
-      label="Commission"
-      value={
-        maxCommission?.commission !== undefined
-          ? maxCommission.commission.toLocaleString() + "%"
-          : "-"
-      }
-    />
+    <Label label="Commission">
+      <ValueWithSuffix
+        value={maxCommission?.commission?.toLocaleString()}
+        suffix="%"
+      />
+    </Label>
   );
 }
 
 function StartupTime() {
   const startupTime = useAtomValue(startupTimeAtom);
 
-  const getValue = () => {
-    if (!startupTime) return "-";
+  const getValues = () => {
+    if (!startupTime) return;
     const uptimeDuration = slowDateTimeNow.diff(
       DateTime.fromMillis(
         Math.floor(Number(startupTime.startupTimeNanos) / 1_000_000),
       ),
     );
 
-    const text = getDurationText(uptimeDuration.rescale(), {
+    return getDurationValues(uptimeDuration.rescale(), {
       omitSeconds: true,
     });
-    return text;
   };
 
+  const values = getValues();
+
   const update = useUpdate();
   useInterval(update, 60_000);
 
-  return <Label label="Uptime" value={getValue()} />;
+  return (
+    <Label label="Uptime">
+      {values?.map(([value, suffix], i) => (
+        <>
+          {i !== 0 && "\xa0"}
+          <ValueWithSuffix key={i} value={value} suffix={suffix} excludeSpace />
+        </>
+      ))}
+    </Label>
+  );
 }
 
 interface LabelProps {
   label: string;
-  value?: string | null;
-  color?: string;
   tooltip?: string;
 }
-function Label({ label, value, color, tooltip }: LabelProps) {
-  if (!value) return null;
-  const textValue = (
-    <Text className={styles.value} style={{ color: color }}>
-      {value}
-    </Text>
-  );
+function Label({ label, tooltip, children }: PropsWithChildren<LabelProps>) {
+  if (!children) return null;
+  const content = <div className={styles.value}>{children}</div>;
 
   return (
     <Flex direction="column">
       <Text className={styles.label}>{label}</Text>
-      {tooltip ? <Tooltip content={tooltip}>{textValue}</Tooltip> : textValue}
+      {tooltip ? <Tooltip content={tooltip}>{content}</Tooltip> : content}
     </Flex>
   );
 }
+
+function ValueWithSuffix({
+  value,
+  suffix,
+  valueColor,
+  excludeSpace,
+}: {
+  value?: string | number;
+  suffix: string;
+  valueColor?: string;
+  excludeSpace?: boolean;
+}) {
+  return (
+    <>
+      <span style={{ color: valueColor }}>
+        {value}
+        {!excludeSpace && "\xa0"}
+      </span>
+      <span className={styles.valueSuffix}>{suffix}</span>
+    </>
+  );
+}

src/features/Header/identityKey.module.css

@@ -16,14 +16,18 @@
   }
 
   .label {
-    color: var(--skip-rate-label-color);
+    color: var(--header-label-text-color);
     font-size: 10px;
   }
 
   .value {
     color: var(--dropdown-button-text-color);
     font-size: 12px;
     font-style: normal;
+    line-height: normal;
+    .value-suffix {
+      color: var(--header-label-text-color);
+    }
   }
 }
 

src/utils.ts

@@ -39,46 +39,51 @@ export interface DurationOptions {
   omitSeconds?: boolean;
 }
 
-function getUnitText(value: number, suffix: string, showZeros: boolean) {
-  if (value === 0 && !showZeros) return;
-  return `${value}${suffix}`;
-}
-
-function getUnitTexts(duration: Duration, options?: DurationOptions) {
+function getUnitValues(
+  duration: Duration,
+  options?: DurationOptions,
+): [number, string][] {
   if (options?.showOnlyTwoSignificantUnits) {
-    const firstUnitIndex = descendingUnits.findIndex(({ unit }) => {
-      return !!duration[unit];
-    });
+    const firstUnitIndex = descendingUnits.findIndex(
+      ({ unit }) => !!duration[unit],
+    );
     return descendingUnits
       .slice(firstUnitIndex, firstUnitIndex + 2)
-      .map(({ unit, suffix }) => {
-        const value = duration[unit];
-        return getUnitText(value, suffix, true);
-      });
+      .map(({ unit, suffix }) => [duration[unit], suffix]);
   }
 
   return descendingUnits
-    .map(({ unit, suffix }) => {
-      if (options?.omitSeconds && unit === "seconds") return;
-
-      const value = duration[unit];
-      if (!value) return;
+    .filter(({ unit }) => {
+      if (options?.omitSeconds && unit === "seconds") return false;
 
-      return getUnitText(value, suffix, false);
+      // drop zero values
+      return !!duration[unit];
     })
-    .filter((v) => !!v);
+    .map(({ unit, suffix }) => [duration[unit], suffix]);
+}
+
+export function getDurationValues(
+  duration?: Duration,
+  options?: DurationOptions,
+): [number, string][] | undefined {
+  if (!duration) return;
+
+  if (duration.toMillis() < 1000) return [[0, "s"]];
+
+  const units = getUnitValues(duration, options);
+  return units.length ? units : [[0, "s"]];
 }
 
 export function getDurationText(
   duration?: Duration,
   options?: DurationOptions,
 ) {
-  if (!duration) return "Never";
-
-  if (duration.toMillis() < 1000) return "0s";
+  const values = getDurationValues(duration, options);
+  if (!values) return "Never";
 
-  const texts = getUnitTexts(duration, options);
-  return texts.join(" ") || "0s";
+  return values.reduce((acc, valSuffix) => {
+    return `${acc} ${valSuffix.join("")}`;
+  }, "");
 }
 
 export let slowDateTimeNow = DateTime.now();
@@ -100,26 +105,35 @@ export function getStake(peer: Peer) {
   );
 }
 
-export function getFmtStake(stake?: bigint, smallValueDecimals?: number) {
-  if (stake === undefined) return;
+export function getSolString(
+  lamportAmount?: bigint,
+  smallValueDecimals?: number,
+) {
+  if (lamportAmount === undefined) return;
 
-  let value = "";
-  const solAmount = Number(stake) / lamportsPerSol;
+  const solAmount = Number(lamportAmount) / lamportsPerSol;
   if (solAmount < 1) {
-    value = solAmount.toLocaleString(undefined, {
+    return solAmount.toLocaleString(undefined, {
       maximumFractionDigits: smallValueDecimals,
     });
-  } else if (solAmount < 100) {
-    value = solAmount.toLocaleString(undefined, {
+  }
+
+  if (solAmount < 100) {
+    return solAmount.toLocaleString(undefined, {
       maximumFractionDigits: 2,
     });
-  } else {
-    value = solAmount.toLocaleString(undefined, {
-      maximumFractionDigits: 0,
-    });
   }
 
-  return `${value}\xa0SOL`;
+  return solAmount.toLocaleString(undefined, {
+    maximumFractionDigits: 0,
+  });
+}
+
+export function getFmtStake(stake?: bigint, smallValueDecimals?: number) {
+  const solString = getSolString(stake, smallValueDecimals);
+  if (solString === undefined) return;
+
+  return `${solString}\xa0SOL`;
 }
 
 /** Dumb workaround for Array.isArray type checking with eslint for readonly arrays */