feat: onboarding security page (#1043)

* feat: onboarding security page

* chore: improve security page lnd variant

* fix: security copy for ldk without alby account

* chore: update channel backups copy on security page

* chore: update recovery phrase copy on security page

* chore: minor copy improvements

frontend/src/routes.tsx

@@ -55,6 +55,7 @@ import { SetupAdvanced } from "src/screens/setup/SetupAdvanced";
 import { SetupFinish } from "src/screens/setup/SetupFinish";
 import { SetupNode } from "src/screens/setup/SetupNode";
 import { SetupPassword } from "src/screens/setup/SetupPassword";
+import { SetupSecurity } from "src/screens/setup/SetupSecurity";
 import { BreezForm } from "src/screens/setup/node/BreezForm";
 import { CashuForm } from "src/screens/setup/node/CashuForm";
 import { GreenlightForm } from "src/screens/setup/node/GreenlightForm";
@@ -404,6 +405,10 @@ const routes = [
             path: "password",
             element: <SetupPassword />,
           },
+          {
+            path: "security",
+            element: <SetupSecurity />,
+          },
           {
             path: "node",
             children: [

frontend/src/screens/setup/ImportMnemonic.tsx

@@ -55,7 +55,7 @@ export function ImportMnemonic() {
       nextBackupReminder: sixMonthsLater.toISOString(),
     });
 
-    navigate(`/setup/finish`);
+    navigate(`/setup/security`);
   }
 
   return (

frontend/src/screens/setup/SetupSecurity.tsx

@@ -0,0 +1,124 @@
+import { HandCoins, LandmarkIcon, ShieldAlert, Unlock } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import ExternalLink from "src/components/ExternalLink";
+
+import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
+import { Button } from "src/components/ui/button";
+import { Checkbox } from "src/components/ui/checkbox";
+import { Label } from "src/components/ui/label";
+import { useInfo } from "src/hooks/useInfo";
+import useSetupStore from "src/state/SetupStore";
+
+export function SetupSecurity() {
+  const navigate = useNavigate();
+  const [hasConfirmed, setConfirmed] = useState<boolean>(false);
+  const store = useSetupStore();
+  const { data: info } = useInfo();
+
+  function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    navigate("/setup/finish");
+  }
+
+  return (
+    <>
+      <div className="grid max-w-sm">
+        <form onSubmit={onSubmit} className="flex flex-col items-center w-full">
+          <TwoColumnLayoutHeader
+            title="Security & Recovery"
+            description="Take your time to understand how to secure and recover your funds on Alby Hub."
+          />
+
+          <div className="flex flex-col gap-6 w-full mt-6">
+            {store.nodeInfo.backendType !== "CASHU" && (
+              <div className="flex gap-3 items-center">
+                <div className="shrink-0">
+                  <HandCoins className="w-6 h-6" />
+                </div>
+                <span className="text-sm text-muted-foreground">
+                  Alby Hub is a spending wallet - do not keep all your savings
+                  on it!
+                </span>
+              </div>
+            )}
+            {store.nodeInfo.backendType === "CASHU" && (
+              <div className="flex gap-3 items-center">
+                <div className="shrink-0">
+                  <LandmarkIcon className="w-6 h-6" />
+                </div>
+                <span className="text-sm text-muted-foreground">
+                  Your funds are owned by the cashu mint - use at your own risk
+                  with only small amounts!
+                </span>
+              </div>
+            )}
+            <div className="flex gap-3 items-center">
+              <div className="shrink-0">
+                <Unlock className="w-6 h-6" />
+              </div>
+              <span className="text-sm text-muted-foreground">
+                Access to your Alby Hub is protected by an unlock password you
+                set.
+              </span>
+            </div>
+            {store.nodeInfo.backendType === "LND" ||
+            store.nodeInfo.backendType === "PHOENIX" ? (
+              <div className="flex gap-3 items-center">
+                <div className="shrink-0">
+                  <ShieldAlert className="w-6 h-6" />
+                </div>
+                <span className="text-sm text-muted-foreground">
+                  Channel backups{" "}
+                  <span className="underline">are not handled</span> by Alby
+                  Hub. Please take care of your own backups or go back and
+                  choose the LDK node type.
+                </span>
+              </div>
+            ) : (
+              <div className="flex gap-3 items-center">
+                <div className="shrink-0">
+                  <ShieldAlert className="w-6 h-6" />
+                </div>
+                <span className="text-sm text-muted-foreground">
+                  Your{store.nodeInfo.backendType === "LDK" && " on-chain"}{" "}
+                  balance can be recovered only with your 12-word recovery
+                  phrase which you can access once your node has started.
+                  {!info?.albyUserIdentifier &&
+                    store.nodeInfo.backendType === "LDK" && (
+                      <> You must also take care of your own channel backups.</>
+                    )}
+                </span>
+              </div>
+            )}
+            <ExternalLink
+              className="text-muted-foreground flex items-center text-sm"
+              to="https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/alby-hub/backups"
+            >
+              <p>
+                Learn more about backups and recovery process on{" "}
+                <span className="font-semibold underline">Alby Guides</span>.
+              </p>
+            </ExternalLink>
+            <div className="flex items-center">
+              <Checkbox
+                id="securePassword"
+                required
+                onCheckedChange={() => setConfirmed(!hasConfirmed)}
+              />
+              <Label
+                htmlFor="securePassword"
+                className="ml-2 text-foreground leading-4"
+              >
+                I understand how to secure and recover funds
+              </Label>
+            </div>
+            <Button className="w-full" disabled={!hasConfirmed} type="submit">
+              Continue
+            </Button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+}

frontend/src/screens/setup/node/CashuForm.tsx

@@ -25,7 +25,7 @@ export function CashuForm() {
       backendType: "CASHU",
       ...data,
     });
-    navigate("/setup/finish");
+    navigate("/setup/security");
   }
 
   return (

frontend/src/screens/setup/node/LDKForm.tsx

@@ -21,7 +21,7 @@ export function LDKForm() {
     useSetupStore.getState().updateNodeInfo({
       backendType: "LDK",
     });
-    navigate("/setup/finish");
+    navigate("/setup/security");
   }, [navigate, searchParams]);
 
   return <Loading />;

frontend/src/screens/setup/node/LNDForm.tsx

@@ -36,7 +36,7 @@ export function LNDForm() {
       backendType: "LND",
       ...data,
     });
-    navigate("/setup/finish");
+    navigate("/setup/security");
   }
 
   return (

frontend/src/screens/setup/node/PhoenixdForm.tsx

@@ -38,7 +38,7 @@ export function PhoenixdForm() {
       backendType: "PHOENIX",
       ...data,
     });
-    navigate("/setup/finish");
+    navigate("/setup/security");
   }
 
   return (

frontend/src/screens/setup/node/PresetNodeForm.tsx

@@ -24,7 +24,7 @@ export function PresetNodeForm() {
       });
     }
 
-    navigate("/setup/finish");
+    navigate("/setup/security");
   }, [info, navigate, searchParams]);
 
   return <Loading />;