feat: frankendancer logo

asuzuki-jumptrading · asuzuki-jumptrading · commit 259b8eb5c42e · 2025-09-12T10:12:20.000-05:00
diff --git a/.env.example b/.env.example
@@ -1 +1,2 @@
-VITE_WEBSOCKET_URL=
+VITE_WEBSOCKET_URL=
+VITE_VALIDATOR_CLIENT=
diff --git a/index.html b/index.html
@@ -1,19 +1,45 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link id="favicon" rel="icon" type="image/svg+xml" />
+    <link
+      rel="preload"
+      as="font"
+      crossorigin="anonymous"
+      href="/node_modules/@fontsource/inter-tight/files/inter-tight-latin-400-normal.woff2"
+      type="font/woff2"
+    />
+    <link
+      rel="preload"
+      type="image/svg+xml"
+      as="image"
+      href="./src/assets/firedancer.svg"
+    />
+    <link
+      rel="preload"
+      type="image/svg+xml"
+      as="image"
+      href="./src/assets/firedancer_logo.svg"
+    />
+    <link
+      rel="preload"
+      type="image/svg+xml"
+      as="image"
+      href="./src/assets/frankendancer.svg"
+    />
+    <link
+      rel="preload"
+      type="image/svg+xml"
+      as="image"
+      href="./src/assets/frankendancer_logo.svg"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Firedancer</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="./src/assets/firedancer_logo.svg" />
-  <link rel="preload" as="font" crossorigin="anonymous"
-    href="/node_modules/@fontsource/inter-tight/files/inter-tight-latin-400-normal.woff2" type="font/woff2" />
-  <link rel="preload" type="image/svg+xml" as="image" href="./src/assets/firedancer.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Firedancer</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -6,6 +6,8 @@
   "scripts": {
     "dev": "NODE_OPTIONS=--max-http-header-size=64000 vite",
     "build": "tsc && vite build",
+    "build:fr": "tsc && VITE_VALIDATOR_CLIENT=Frankendancer vite build",
+    "build:fd": "tsc && VITE_VALIDATOR_CLIENT=Firedancer vite build",
     "build:dev": "tsc && vite build --mode development",
     "test": "vitest",
     "lint": "prettier --check . && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,11 +4,14 @@ import { createRouter, RouterProvider } from "@tanstack/react-router";
 import "./app.css";
 import { routeTree } from "./routeTree.gen";
 import { ConnectionProvider } from "./api/ws/ConnectionProvider";
-import { useSetAtom } from "jotai";
-import { containerElAtom } from "./atoms";
+import { getDefaultStore, useSetAtom } from "jotai";
+import { clientAtom, containerElAtom } from "./atoms";
 import { useCallback } from "react";
 import * as colors from "./colors";
 import { kebabCase } from "lodash";
+import FiredancerLogo from "./assets/firedancer_logo.svg";
+import FrankendancerLogo from "./assets/frankendancer_logo.svg";
+import { ClientEnum } from "./api/entities";
 
 const router = createRouter({ routeTree });
 
@@ -19,6 +22,17 @@ declare module "@tanstack/react-router" {
   }
 }
 
+// set up favicon and title based on client
+const store = getDefaultStore();
+const client = store.get(clientAtom);
+if (client === ClientEnum.Firedancer) {
+  document.getElementById("favicon")?.setAttribute("href", FiredancerLogo);
+  document.title = "Firedancer";
+} else {
+  document.getElementById("favicon")?.setAttribute("href", FrankendancerLogo);
+  document.title = "Frankendancer";
+}
+
 export default function App() {
   const setContainerEl = useSetAtom(containerElAtom);
 
diff --git a/src/api/entities.ts b/src/api/entities.ts
@@ -1,5 +1,8 @@
 import { z } from "zod";
 
+export const clientSchema = z.enum(["Frankendancer", "Firedancer"]);
+export const ClientEnum = clientSchema.enum;
+
 const summaryTopicSchema = z.object({
   topic: z.literal("summary"),
 });
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -1,5 +1,6 @@
 import type { z } from "zod";
 import type {
+  clientSchema,
   identityBalanceSchema,
   blockEngineStatusSchema,
   blockEngineUpdateSchema,
@@ -41,6 +42,8 @@ import type {
   scheduleStrategySchema,
 } from "./entities";
 
+export type Client = z.infer<typeof clientSchema>;
+
 export type Version = z.infer<typeof versionSchema>;
 
 export type Cluster = z.infer<typeof clusterSchema>;
diff --git a/src/assets/frankendancer.svg b/src/assets/frankendancer.svg
diff --git a/src/assets/frankendancer_logo.svg b/src/assets/frankendancer_logo.svg
diff --git a/src/atoms.ts b/src/atoms.ts
@@ -19,6 +19,20 @@ import { merge } from "lodash";
 import { getLeaderSlots, getStake } from "./utils";
 import { searchLeaderSlotsAtom } from "./features/LeaderSchedule/atoms";
 import { selectedSlotAtom } from "./features/Overview/SlotPerformance/atoms";
+import { ClientEnum, clientSchema } from "./api/entities";
+
+export const clientAtom = atom(() => {
+  const parsedClient = clientSchema.safeParse(
+    (import.meta.env.VITE_VALIDATOR_CLIENT as string)?.trim(),
+  );
+
+  if (parsedClient.error) {
+    // default
+    return ClientEnum.Frankendancer;
+  }
+
+  return parsedClient.data;
+});
 
 export const containerElAtom = atom<HTMLDivElement | null>();
 
diff --git a/src/features/Header/IdentityKey.tsx b/src/features/Header/IdentityKey.tsx
@@ -26,7 +26,7 @@ export default function IdentityKey() {
   const isNarrowScreen = useMedia("(min-width: 900px)");
 
   useEffect(() => {
-    let title = "Firedancer";
+    let title = document.title;
     if (peer?.info?.name) {
       title += ` | ${peer.info.name}`;
     } else if (identityKey) {
diff --git a/src/features/Header/Logo.tsx b/src/features/Header/Logo.tsx
@@ -2,15 +2,45 @@ import { Reset } from "@radix-ui/themes";
 import { Link } from "@tanstack/react-router";
 import fdFullLogo from "../../assets/firedancer.svg";
 import fdLogo from "../../assets/firedancer_logo.svg";
+import frFullLogo from "../../assets/frankendancer.svg";
+import frLogo from "../../assets/frankendancer_logo.svg";
 import { useMedia } from "react-use";
+import { clientAtom } from "../../atoms";
+import { ClientEnum } from "../../api/entities";
+import type { Client } from "../../api/types";
+import { useAtomValue } from "jotai";
+import styles from "./logo.module.css";
+
+const logos: {
+  [key in Client]: {
+    narrow: string;
+    wide: string;
+  };
+} = {
+  Frankendancer: {
+    narrow: frLogo,
+    wide: frFullLogo,
+  },
+  Firedancer: {
+    narrow: fdLogo,
+    wide: fdFullLogo,
+  },
+};
 
 export default function Logo() {
   const isWideScreen = useMedia("(min-width: 1366px)");
+  const client = useAtomValue(clientAtom);
 
   return (
     <Reset>
       <Link to="/">
-        <img src={isWideScreen ? fdFullLogo : fdLogo} alt="fd" />
+        <img
+          className={styles.logo}
+          src={logos[client][isWideScreen ? "wide" : "narrow"]}
+          alt={
+            client === ClientEnum.Firedancer ? "Firedancer" : "Frankendancer"
+          }
+        />
       </Link>
     </Reset>
   );
diff --git a/src/features/Header/logo.module.css b/src/features/Header/logo.module.css
@@ -0,0 +1,3 @@
+.logo {
+  height: 27px;
+}
diff --git a/src/features/StartupProgress/Body.tsx b/src/features/StartupProgress/Body.tsx
@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { showStartupProgressAtom } from "./atoms";
 import fdLogo from "../../assets/firedancer.svg";
+import frLogo from "../../assets/frankendancer.svg";
 import { Box, Flex } from "@radix-ui/themes";
 import type { StartupPhase } from "../../api/types";
 import { isDefined } from "../../utils";
@@ -13,7 +14,7 @@ import InprogressStep from "./InprogressStep";
 import CompleteStep from "./CompleteStep";
 import LoadingLedgerProgress from "./LedgerProgress";
 import FullSnapshotProgress from "./FullSnapshotProgress";
-import { peersAtom } from "../../atoms";
+import { clientAtom, peersAtom } from "../../atoms";
 import IncrementalSnapshotProgress from "./IncrementalSnapshotProgress";
 import { animated, useSpring } from "@react-spring/web";
 import FullSnapshotStats from "./FullSnapshotStats";
@@ -22,6 +23,7 @@ import {
   SupermajorityStakeStats,
 } from "./SupermajorityStakeProgress";
 import IncrementalSnapshotStats from "./IncrementalSnapshotStats";
+import { ClientEnum } from "../../api/entities";
 
 const steps: {
   step: StartupPhase;
@@ -61,6 +63,7 @@ const steps: {
 ];
 
 export default function Body() {
+  const client = useAtomValue(clientAtom);
   const startupProgress = useAtomValue(startupProgressAtom);
   const [showStartupProgress, setShowStartupProgress] = useAtom(
     showStartupProgressAtom,
@@ -122,7 +125,7 @@ export default function Body() {
       <Flex direction="column" gap="4" className={styles.innerContainer}>
         <Box flexGrow="1" />
         <img
-          src={fdLogo}
+          src={client === ClientEnum.Firedancer ? fdLogo : frLogo}
           alt="fd"
           height="50px"
           style={{ marginBottom: "28px" }}

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-VITE_WEBSOCKET_URL=`
	`1`	`+VITE_WEBSOCKET_URL=`
	`2`	`+VITE_VALIDATOR_CLIENT=`