fix: show icon and proper name for lightning node backend on about page (#2501)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

frontend/src/lib/backendType.ts

@@ -1,40 +0,0 @@
-import { BackendType } from "src/types";
-
-type BackendTypeConfig = {
-  hasMnemonic: boolean;
-  hasChannelManagement: boolean;
-  hasNodeBackup: boolean;
-};
-
-export const backendTypeConfigs: Record<BackendType, BackendTypeConfig> = {
-  LND: {
-    hasMnemonic: false,
-    hasChannelManagement: true,
-    hasNodeBackup: false,
-  },
-  LDK: {
-    hasMnemonic: true,
-    hasChannelManagement: true,
-    hasNodeBackup: true,
-  },
-  PHOENIX: {
-    hasMnemonic: false,
-    hasChannelManagement: false,
-    hasNodeBackup: false,
-  },
-  CASHU: {
-    hasMnemonic: true,
-    hasChannelManagement: false,
-    hasNodeBackup: false,
-  },
-  CLN: {
-    hasMnemonic: false,
-    hasChannelManagement: true,
-    hasNodeBackup: false,
-  },
-  BARK: {
-    hasMnemonic: true,
-    hasChannelManagement: false,
-    hasNodeBackup: false,
-  },
-};

frontend/src/lib/backendType.tsx

@@ -0,0 +1,68 @@
+import { ReactElement } from "react";
+import { LDKIcon } from "src/components/icons/LDK";
+import { PhoenixdIcon } from "src/components/icons/Phoenixd";
+import { BackendType } from "src/types";
+
+import barkDark from "src/assets/images/node/bark-dark.svg";
+import barkLight from "src/assets/images/node/bark-light.svg";
+import cashu from "src/assets/images/node/cashu.png";
+import cln from "src/assets/images/node/cln.png";
+import lnd from "src/assets/images/node/lnd.png";
+
+type BackendTypeConfig = {
+  title: string;
+  icon: ReactElement;
+  hasMnemonic: boolean;
+  hasChannelManagement: boolean;
+  hasNodeBackup: boolean;
+};
+
+export const backendTypeConfigs: Record<BackendType, BackendTypeConfig> = {
+  LDK: {
+    title: "LDK",
+    icon: <LDKIcon />,
+    hasMnemonic: true,
+    hasChannelManagement: true,
+    hasNodeBackup: true,
+  },
+  PHOENIX: {
+    title: "phoenixd",
+    icon: <PhoenixdIcon />,
+    hasMnemonic: false,
+    hasChannelManagement: false,
+    hasNodeBackup: false,
+  },
+  LND: {
+    title: "LND",
+    icon: <img src={lnd} />,
+    hasMnemonic: false,
+    hasChannelManagement: true,
+    hasNodeBackup: false,
+  },
+  CASHU: {
+    title: "Cashu Mint",
+    icon: <img src={cashu} />,
+    hasMnemonic: true,
+    hasChannelManagement: false,
+    hasNodeBackup: false,
+  },
+  CLN: {
+    title: "CLN",
+    icon: <img src={cln} />,
+    hasMnemonic: false,
+    hasChannelManagement: true,
+    hasNodeBackup: false,
+  },
+  BARK: {
+    title: "Bark",
+    icon: (
+      <>
+        <img src={barkLight} className="dark:hidden" />
+        <img src={barkDark} className="hidden dark:block" />
+      </>
+    ),
+    hasMnemonic: true,
+    hasChannelManagement: false,
+    hasNodeBackup: false,
+  },
+};

frontend/src/screens/settings/About.tsx

@@ -5,6 +5,7 @@ import SettingsHeader from "src/components/SettingsHeader";
 import { Badge } from "src/components/ui/badge";
 import { useAlbyMe } from "src/hooks/useAlbyMe";
 import { useNodeDetails } from "src/hooks/useNodeDetails";
+import { backendTypeConfigs } from "src/lib/backendType";
 
 import { useInfo } from "src/hooks/useInfo";
 
@@ -58,9 +59,12 @@ export function About() {
         </div>
         <div className="grid gap-2">
           <p className="font-medium text-sm">Lightning Node Backend</p>
-          <p className="text-muted-foreground text-sm slashed-zero">
-            {info.backendType}
-          </p>
+          <div className="flex items-center gap-2 text-muted-foreground text-sm">
+            <div className="h-6 w-6">
+              {backendTypeConfigs[info.backendType].icon}
+            </div>
+            <p>{backendTypeConfigs[info.backendType].title}</p>
+          </div>
         </div>
         {info.chainDataSourceType && (
           <div className="grid gap-2">

frontend/src/screens/setup/SetupNode.tsx

@@ -1,66 +1,20 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import { useNavigate } from "react-router";
 import Container from "src/components/Container";
 import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
-import { LDKIcon } from "src/components/icons/LDK";
-import { PhoenixdIcon } from "src/components/icons/Phoenixd";
 import { Button } from "src/components/ui/button";
 import { cn } from "src/lib/utils";
 import { BackendType } from "src/types";
 
-import barkDark from "src/assets/images/node/bark-dark.svg";
-import barkLight from "src/assets/images/node/bark-light.svg";
-import cashu from "src/assets/images/node/cashu.png";
-import cln from "src/assets/images/node/cln.png";
-import lnd from "src/assets/images/node/lnd.png";
 import { backendTypeConfigs } from "src/lib/backendType";
 import useSetupStore from "src/state/SetupStore";
 
-type BackendTypeDisplayConfig = {
-  title: string;
-  icon: ReactElement;
-};
-
-const backendTypeDisplayConfigs: Partial<
-  Record<BackendType, BackendTypeDisplayConfig>
-> = {
-  LDK: {
-    title: "LDK",
-    icon: <LDKIcon />,
-  },
-  PHOENIX: {
-    title: "phoenixd",
-    icon: <PhoenixdIcon />,
-  },
-  LND: {
-    title: "LND",
-    icon: <img src={lnd} />,
-  },
-  CASHU: {
-    title: "Cashu Mint",
-    icon: <img src={cashu} />,
-  },
-  CLN: {
-    title: "CLN",
-    icon: <img src={cln} />,
-  },
-  BARK: {
-    title: "Bark",
-    icon: (
-      <>
-        <img src={barkLight} className="dark:hidden" />
-        <img src={barkDark} className="hidden dark:block" />
-      </>
-    ),
-  },
-};
-
-const backendTypeDisplayConfigList = Object.entries(
-  backendTypeDisplayConfigs
-).map((entry) => ({
-  ...entry[1],
-  backendType: entry[0] as BackendType,
-}));
+const backendTypeDisplayConfigList = Object.entries(backendTypeConfigs).map(
+  (entry) => ({
+    ...entry[1],
+    backendType: entry[0] as BackendType,
+  })
+);
 
 export function SetupNode() {
   const navigate = useNavigate();