feat: update settings pages

frontend/src/components/MnemonicInputs.tsx

@@ -1,8 +1,8 @@
 import { wordlist } from "@scure/bip39/wordlists/english";
-import { useState } from "react";
 import {
   Card,
   CardContent,
+  CardDescription,
   CardHeader,
   CardTitle,
 } from "src/components/ui/card";
@@ -12,18 +12,16 @@ type MnemonicInputsProps = {
   mnemonic?: string;
   setMnemonic?(mnemonic: string): void;
   readOnly?: boolean;
+  description?: string;
 };
 
 export default function MnemonicInputs({
   mnemonic,
   setMnemonic,
   readOnly,
   children,
+  description,
 }: React.PropsWithChildren<MnemonicInputsProps>) {
-  const [revealedIndex, setRevealedIndex] = useState<number | undefined>(
-    undefined
-  );
-
   const words = mnemonic?.split(" ") || [];
   while (words.length < 12) {
     words.push("");
@@ -37,32 +35,29 @@ export default function MnemonicInputs({
     <>
       <Card>
         <CardHeader>
-          <CardTitle>Recovery phrase to your wallet</CardTitle>
+          <CardTitle className="text-xl text-center">
+            Wallet Recovery Phrase
+          </CardTitle>
+          <CardDescription className="text-muted-foreground text-sm max-w-xs text-right mt-2">
+            {description}
+          </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-5 justify-center backup sensitive">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5 justify-center backup sensitive">
             {words.map((word, i) => {
-              const isRevealed = revealedIndex === i;
               const inputId = `mnemonic-word-${i}`;
               return (
                 <div key={i} className="flex justify-center items-center gap-2">
-                  <span className="text-muted-foreground text-right">
-                    {i + 1}.
-                  </span>
+                  <span className="text-foreground text-right">{i + 1}.</span>
                   <div className="relative">
                     <Input
                       id={inputId}
                       autoFocus={!readOnly && i === 0}
-                      onFocus={() => setRevealedIndex(i)}
-                      onBlur={() => setRevealedIndex(undefined)}
                       readOnly={readOnly}
-                      className="w-32 text-center"
+                      className="w-32 text-center bg-muted border-zinc-200 text-muted-foreground"
                       list={readOnly ? undefined : "wordlist"}
-                      value={isRevealed ? word : word.length ? "•••••" : ""}
+                      value={word}
                       onChange={(e) => {
-                        if (revealedIndex !== i) {
-                          return;
-                        }
                         words[i] = e.target.value;
                         setMnemonic?.(
                           words

frontend/src/components/SidebarHint.tsx

@@ -1,3 +1,6 @@
+import { UpdateIcon } from "@radix-ui/react-icons";
+import { IconProps } from "@radix-ui/react-icons/dist/types";
+import { compare } from "compare-versions";
 import { ListTodo, LucideIcon, Zap } from "lucide-react";
 import { ReactElement } from "react";
 import { Link, useLocation } from "react-router-dom";
@@ -9,13 +12,17 @@ import {
   CardTitle,
 } from "src/components/ui/card";
 import { Progress } from "src/components/ui/progress";
+import { useAlbyInfo } from "src/hooks/useAlbyInfo";
+import { useInfo } from "src/hooks/useInfo";
 import { useOnboardingData } from "src/hooks/useOnboardingData";
 import useChannelOrderStore from "src/state/ChannelOrderStore";
 
 function SidebarHint() {
   const { isLoading, checklistItems } = useOnboardingData();
   const { order } = useChannelOrderStore();
   const location = useLocation();
+  const { data: albyInfo } = useAlbyInfo();
+  const { data: info } = useInfo();
 
   // User has a channel order
   if (
@@ -67,14 +74,36 @@ function SidebarHint() {
       />
     );
   }
-}
 
+  if (info && albyInfo) {
+    const upToDate =
+      info.version &&
+      info.version.startsWith("v") &&
+      compare(info.version.substring(1), albyInfo.hub.latestVersion, ">=");
+
+    if (!upToDate) {
+      return (
+        <SidebarHintCard
+          icon={UpdateIcon}
+          title="Update Available!"
+          description="New version available! Visit your Alby Account dashboard to update your Hub."
+          buttonText="Update"
+          buttonLink={`https://getalby.com/update/hub?version=${info.version}`}
+        />
+      );
+    }
+  }
+}
 type SidebarHintCardProps = {
   title: string;
   description: string | ReactElement;
   buttonText: string;
   buttonLink: string;
-  icon: LucideIcon;
+  icon:
+    | LucideIcon
+    | React.ForwardRefExoticComponent<
+        IconProps & React.RefAttributes<SVGSVGElement>
+      >;
 };
 function SidebarHintCard({
   title,

frontend/src/components/layouts/SettingsLayout.tsx

@@ -1,60 +1,14 @@
-import { Power } from "lucide-react";
-import React, { useState } from "react";
-import { NavLink, Outlet, useNavigate } from "react-router-dom";
+import React from "react";
+import { NavLink, Outlet } from "react-router-dom";
 import AppHeader from "src/components/AppHeader";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "src/components/ui/alert-dialog";
 import { buttonVariants } from "src/components/ui/button";
-import { LoadingButton } from "src/components/ui/loading-button";
-import { useToast } from "src/components/ui/use-toast";
 
 import { useInfo } from "src/hooks/useInfo";
 
 import { cn } from "src/lib/utils";
-import { request } from "src/utils/request";
 
 export default function SettingsLayout() {
-  const {
-    data: info,
-    mutate: refetchInfo,
-    hasMnemonic,
-    hasNodeBackup,
-  } = useInfo();
-  const navigate = useNavigate();
-  const { toast } = useToast();
-  const [shuttingDown, setShuttingDown] = useState(false);
-
-  const shutdown = React.useCallback(async () => {
-    setShuttingDown(true);
-    try {
-      await request("/api/stop", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      await refetchInfo();
-      setShuttingDown(false);
-      navigate("/", { replace: true });
-      toast({ title: "Your node has been turned off." });
-    } catch (error) {
-      console.error(error);
-      toast({
-        title: "Failed to shutdown node: " + error,
-        variant: "destructive",
-      });
-    }
-  }, [navigate, refetchInfo, toast]);
+  const { data: info, hasMnemonic, hasNodeBackup } = useInfo();
 
   return (
     <>
@@ -63,35 +17,9 @@ export default function SettingsLayout() {
         description="Manage your Alby Hub settings."
         breadcrumb={false}
         contentRight={
-          <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <LoadingButton
-                variant="destructive"
-                size="icon"
-                loading={shuttingDown}
-              >
-                {!shuttingDown && <Power className="w-4 h-4" />}
-              </LoadingButton>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>
-                  Do you want to turn off Alby Hub?
-                </AlertDialogTitle>
-                <AlertDialogDescription>
-                  This will turn off your Alby Hub and make your node offline.
-                  You won't be able to send or receive bitcoin until you unlock
-                  it.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction onClick={shutdown}>
-                  Continue
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+          info?.version && (
+            <p className="text-sm text-muted-foreground">{info.version}</p>
+          )
         }
       />
       <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
@@ -101,9 +29,8 @@ export default function SettingsLayout() {
             <MenuItem to="/settings/change-unlock-password">
               Unlock Password
             </MenuItem>
-            {hasMnemonic && <MenuItem to="/settings/backup">Backup</MenuItem>}
-            {hasNodeBackup && (
-              <MenuItem to="/settings/node-backup">Migrate Node</MenuItem>
+            {(hasMnemonic || hasNodeBackup) && (
+              <MenuItem to="/settings/backup">Backup</MenuItem>
             )}
             {info?.albyAccountConnected && (
               <MenuItem to="/settings/alby-account">Your Alby Account</MenuItem>
@@ -113,6 +40,7 @@ export default function SettingsLayout() {
             )}
             <MenuItem to="/settings/developer">Developer</MenuItem>
             <MenuItem to="/settings/debug-tools">Debug Tools</MenuItem>
+            <MenuItem to="/settings/shutdown">Shutdown</MenuItem>
           </nav>
         </aside>
         <div className="flex-1 lg:max-w-2xl">

frontend/src/routes.tsx

@@ -42,10 +42,12 @@ import DepositBitcoin from "src/screens/onchain/DepositBitcoin";
 import ConnectPeer from "src/screens/peers/ConnectPeer";
 import Peers from "src/screens/peers/Peers";
 import { AlbyAccount } from "src/screens/settings/AlbyAccount";
+import Backup from "src/screens/settings/Backup";
 import { ChangeUnlockPassword } from "src/screens/settings/ChangeUnlockPassword";
 import DebugTools from "src/screens/settings/DebugTools";
 import DeveloperSettings from "src/screens/settings/DeveloperSettings";
 import Settings from "src/screens/settings/Settings";
+import Shutdown from "src/screens/settings/Shutdown";
 import { ImportMnemonic } from "src/screens/setup/ImportMnemonic";
 import { RestoreNode } from "src/screens/setup/RestoreNode";
 import { SetupAdvanced } from "src/screens/setup/SetupAdvanced";
@@ -175,9 +177,14 @@ const routes = [
               },
               {
                 path: "backup",
-                element: <BackupMnemonic />,
+                element: <Backup />,
                 handle: { crumb: () => "Backup" },
               },
+              {
+                path: "mnemonic-backup",
+                element: <BackupMnemonic />,
+                handle: { crumb: () => "Key Backup" },
+              },
               {
                 path: "node-backup",
                 element: <BackupNode />,
@@ -194,6 +201,10 @@ const routes = [
                 path: "debug-tools",
                 element: <DebugTools />,
               },
+              {
+                path: "shutdown",
+                element: <Shutdown />,
+              },
             ],
           },
         ],