feat: clearer backup and restore info (#750)

* feat: clearer backup and restore info * chore: improve copy on second checkbox in backup page * feat: add checkbox before importing mnemonic * chore: update copy on import mnemonic page, remove destructive style on create password page
getAlby · Oct 24, 2024 · 70ac096 · 70ac096
1 parent c68f6e7
commit 70ac096
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 22 deletions.
diff --git a/frontend/src/screens/BackupMnemonic.tsx b/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,71 @@ 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>
+            {backedUp && (
+              <div className="flex mt-5">
+                <Checkbox
+                  id="backup2"
+                  required
+                  onCheckedChange={() => setIsBackedUp2(!backedUp2)}
+                />
+                <Label htmlFor="backup2" className="ml-2">
+                  I understand the <b>recovery phrase</b> AND{" "}
+                  {info?.albyAccountConnected ? (
+                    <b>unlock password</b>
+                  ) : (
+                    <b>a backup of my hub data directory</b>
+                  )}{" "}
+                  is required to recover 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>

diff --git a/frontend/src/screens/setup/ImportMnemonic.tsx b/frontend/src/screens/setup/ImportMnemonic.tsx
@@ -1,20 +1,28 @@
 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";
 
 import MnemonicInputs from "src/components/MnemonicInputs";
 import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
 import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
 import { Button } from "src/components/ui/button";
+import { Checkbox } from "src/components/ui/checkbox";
+import { Label } from "src/components/ui/label";
 import { useToast } from "src/components/ui/use-toast";
 import useSetupStore from "src/state/SetupStore";
 
 export function ImportMnemonic() {
   const { toast } = useToast();
   const navigate = useNavigate();
   const setupStore = useSetupStore();
+  const [backedUp, setIsBackedUp] = useState<boolean>(false);
 
   useEffect(() => {
     // in case the user presses back, remove their last-saved mnemonic
@@ -68,7 +76,7 @@ export function ImportMnemonic() {
           </AlertTitle>
           <AlertDescription>
             If you want to transfer your existing Hub to another machine please
-            use the migrate feature from the Alby Hub settings.
+            use the <b>migrate feature</b> from the Alby Hub settings.
           </AlertDescription>
         </Alert>
         <Alert>
@@ -78,22 +86,44 @@ export function ImportMnemonic() {
                 <LifeBuoy className="w-6 h-6" />
               </div>
               <span className="text-muted-foreground">
-                Recovery phrase is a set of 12 words that{" "}
-                <b>restores your wallet from a backup</b>
+                Your recovery phrase is a set of 12 words used to restore your
+                savings balance from a backup.
               </span>
             </div>
             <div className="flex gap-2 items-center">
               <div className="shrink-0 text-muted-foreground">
                 <ShieldCheck className="w-6 h-6" />
               </div>
               <span className="text-muted-foreground">
-                Make sure to enter them somewhere safe and private
+                Keep it safe and private to ensure your funds remain secure.
+              </span>
+            </div>
+            <div className="flex gap-2 items-center">
+              <div className="shrink-0 text-muted-foreground">
+                <ShieldAlert className="w-6 h-6" />
+              </div>
+              <span className="text-muted-foreground">
+                Your recovery phrase cannot restore funds from lightning
+                channels. If you had active channels on a different device,
+                contact Alby support before proceeding.
               </span>
             </div>
           </div>
         </Alert>
 
         <MnemonicInputs mnemonic={mnemonic} setMnemonic={setMnemonic} />
+
+        <div className="flex items-center mt-5">
+          <Checkbox
+            id="confirmedNoChannels"
+            required
+            onCheckedChange={() => setIsBackedUp(!backedUp)}
+          />
+          <Label htmlFor="confirmedNoChannels" className="ml-2">
+            I don't have another Alby Hub to migrate or open channels (funds
+            from channels will be lost!).
+          </Label>
+        </div>
         <Button>Next</Button>
       </form>
     </>

diff --git a/frontend/src/screens/setup/SetupPassword.tsx b/frontend/src/screens/setup/SetupPassword.tsx
@@ -113,15 +113,14 @@ export function SetupPassword() {
                 <div className="flex items-center">
                   <Checkbox
                     id="securePassword2"
-                    className="border-destructive"
                     required
                     onCheckedChange={() =>
                       setIsPasswordSecured2(!isPasswordSecured2)
                     }
                   />
                   <Label
                     htmlFor="securePassword2"
-                    className="ml-2 leading-4 font-semibold text-destructive"
+                    className="ml-2 leading-4 font-semibold"
                   >
                     I understand this password cannot be recovered
                   </Label>