feat: clearer backup and restore info

frontend/src/screens/BackupMnemonic.tsx

@@ -1,8 +1,14 @@
-import { LifeBuoy, ShieldAlert, ShieldCheck } from "lucide-react";
+import {
+  ExternalLinkIcon,
+  LifeBuoy,
+  ShieldAlert,
+  ShieldCheck,
+} from "lucide-react";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import Container from "src/components/Container";
+import ExternalLink from "src/components/ExternalLink";
 import MnemonicInputs from "src/components/MnemonicInputs";
 import SettingsHeader from "src/components/SettingsHeader";
 import { Button } from "src/components/ui/button";
@@ -26,6 +32,7 @@ export function BackupMnemonic() {
   const [decryptedMnemonic, setDecryptedMnemonic] = React.useState("");
   const [loading, setLoading] = React.useState(false);
   const [backedUp, setIsBackedUp] = useState<boolean>(false);
+  const [backedUp2, setIsBackedUp2] = useState<boolean>(false);
   const { data: info } = useInfo();
 
   const onSubmitPassword = async (e: React.FormEvent) => {
@@ -125,22 +132,23 @@ export function BackupMnemonic() {
               </div>
               <span>
                 Your recovery phrase is a set of 12 words that{" "}
-                <b>backs up your wallet savings balance</b>.
+                <b>backs up your wallet savings balance</b>.&nbsp;
                 {info?.albyAccountConnected && (
-                  <b>
-                    You also need to make sure you do not forget your unlock
-                    password as this will be used to recover funds from
-                    channels.
-                  </b>
+                  <>
+                    You also need to make sure you do not forget your{" "}
+                    <b>unlock password</b> as this will be used to recover funds
+                    from channels. Encrypted channel backups are saved
+                    automatically to your Alby Account.
+                  </>
                 )}
                 {!info?.albyAccountConnected && (
-                  <b>
-                    Make sure to also backup your data directory as this is
-                    required to recover funds on your channels. You can also
+                  <>
+                    Make sure to also backup your <b>data directory</b> as this
+                    is required to recover funds on your channels. You can also
                     connect your Alby Account for automatic encrypted backups
                     (you still need your seed and unlock password to decrypt
                     those).
-                  </b>
+                  </>
                 )}
               </span>
             </div>
@@ -149,34 +157,64 @@ export function BackupMnemonic() {
                 <ShieldCheck className="w-6 h-6" />
               </div>
               <span>
-                Make sure to write them down somewhere safe and private
+                Make sure to write them down somewhere safe and private.
               </span>
             </div>
             <div className="flex gap-2 items-center text-destructive">
               <div className="shrink-0 ">
                 <ShieldAlert className="w-6 h-6" />
               </div>
               <span>
-                If you lose your recovery phrase, you will lose access to your
-                funds
+                If you lose access to your hub and do not have your{" "}
+                <b>recovery phrase</b>&nbsp;
+                {info?.albyAccountConnected && (
+                  <>
+                    or your <b>unlock password</b>
+                  </>
+                )}
+                {!info?.albyAccountConnected && (
+                  <>or do not backup your data directory</>
+                )}
+                , you will lose access to your funds.
               </span>
             </div>
           </div>
+          <div className="mb-5">
+            <ExternalLink
+              className="underline flex items-center"
+              to="https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/alby-hub/backups"
+            >
+              Learn more about backups
+              <ExternalLinkIcon className="w-4 h-4 ml-2" />
+            </ExternalLink>
+          </div>
 
           <MnemonicInputs mnemonic={decryptedMnemonic} readOnly={true}>
             <div className="flex items-center mt-5">
               <Checkbox
                 id="backup"
+                required
                 onCheckedChange={() => setIsBackedUp(!backedUp)}
               />
               <Label htmlFor="backup" className="ml-2">
                 I've backed up my recovery phrase to my wallet in a private and
                 secure place
               </Label>
             </div>
+            <div className="flex items-center mt-5">
+              <Checkbox
+                id="backup2"
+                required
+                onCheckedChange={() => setIsBackedUp2(!backedUp2)}
+              />
+              <Label htmlFor="backup2" className="ml-2">
+                I understand the recovery phrase alone will not restore funds
+                from my lightning channels.{" "}
+              </Label>
+            </div>
           </MnemonicInputs>
           <div className="flex justify-center">
-            <Button type="submit" disabled={!backedUp} size="lg">
+            <Button type="submit" size="lg">
               Continue
             </Button>
           </div>

frontend/src/screens/setup/ImportMnemonic.tsx

@@ -1,6 +1,11 @@
 import * as bip39 from "@scure/bip39";
 import { wordlist } from "@scure/bip39/wordlists/english";
-import { AlertTriangleIcon, LifeBuoy, ShieldCheck } from "lucide-react";
+import {
+  AlertTriangleIcon,
+  LifeBuoy,
+  ShieldAlert,
+  ShieldCheck,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -79,7 +84,7 @@ export function ImportMnemonic() {
               </div>
               <span className="text-muted-foreground">
                 Recovery phrase is a set of 12 words that{" "}
-                <b>restores your wallet from a backup</b>
+                <b>restores your savings balance from a backup</b>.
               </span>
             </div>
             <div className="flex gap-2 items-center">
@@ -90,6 +95,16 @@ export function ImportMnemonic() {
                 Make sure to enter them somewhere safe and private
               </span>
             </div>
+            <div className="flex gap-2 items-center">
+              <div className="shrink-0 text-destructive">
+                <ShieldAlert className="w-6 h-6" />
+              </div>
+              <span className="text-destructive">
+                Your recovery phrase <b>cannot</b> restore funds in lightning
+                channels. Please contact Alby support before proceeding if you
+                had channels on a different device.
+              </span>
+            </div>
           </div>
         </Alert>