diff --git a/frontend/src/screens/BackupMnemonic.tsx b/frontend/src/screens/BackupMnemonic.tsx index c1bad5d6..81a04b29 100644 --- 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(false); + const [backedUp2, setIsBackedUp2] = useState(false); const { data: info } = useInfo(); const onSubmitPassword = async (e: React.FormEvent) => { @@ -125,22 +132,23 @@ export function BackupMnemonic() { Your recovery phrase is a set of 12 words that{" "} - backs up your wallet savings balance. + backs up your wallet savings balance.  {info?.albyAccountConnected && ( - - You also need to make sure you do not forget your unlock - password as this will be used to recover funds from - channels. - + <> + You also need to make sure you do not forget your{" "} + unlock password as this will be used to recover funds + from channels. Encrypted channel backups are saved + automatically to your Alby Account. + )} {!info?.albyAccountConnected && ( - - 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 data directory 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). - + )} @@ -149,7 +157,7 @@ export function BackupMnemonic() { - Make sure to write them down somewhere safe and private + Make sure to write them down somewhere safe and private.
@@ -157,16 +165,35 @@ export function BackupMnemonic() {
- 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{" "} + recovery phrase  + {info?.albyAccountConnected && ( + <> + or your unlock password + + )} + {!info?.albyAccountConnected && ( + <>or do not backup your data directory + )} + , you will lose access to your funds. +
+ + Learn more about backups + + +
setIsBackedUp(!backedUp)} />
+ {backedUp && ( +
+ setIsBackedUp2(!backedUp2)} + /> + +
+ )}
-
diff --git a/frontend/src/screens/setup/ImportMnemonic.tsx b/frontend/src/screens/setup/ImportMnemonic.tsx index a852e552..3d9a722e 100644 --- a/frontend/src/screens/setup/ImportMnemonic.tsx +++ b/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"; @@ -8,6 +13,8 @@ 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"; @@ -15,6 +22,7 @@ export function ImportMnemonic() { const { toast } = useToast(); const navigate = useNavigate(); const setupStore = useSetupStore(); + const [backedUp, setIsBackedUp] = useState(false); useEffect(() => { // in case the user presses back, remove their last-saved mnemonic @@ -68,7 +76,7 @@ export function ImportMnemonic() { If you want to transfer your existing Hub to another machine please - use the migrate feature from the Alby Hub settings. + use the migrate feature from the Alby Hub settings. @@ -78,8 +86,8 @@ export function ImportMnemonic() { - Recovery phrase is a set of 12 words that{" "} - restores your wallet from a backup + Your recovery phrase is a set of 12 words used to restore your + savings balance from a backup.
@@ -87,13 +95,35 @@ export function ImportMnemonic() {
- Make sure to enter them somewhere safe and private + Keep it safe and private to ensure your funds remain secure. + + +
+
+ +
+ + Your recovery phrase cannot restore funds from lightning + channels. If you had active channels on a different device, + contact Alby support before proceeding.
+ +
+ setIsBackedUp(!backedUp)} + /> + +
diff --git a/frontend/src/screens/setup/SetupPassword.tsx b/frontend/src/screens/setup/SetupPassword.tsx index 5228bc38..70894841 100644 --- a/frontend/src/screens/setup/SetupPassword.tsx +++ b/frontend/src/screens/setup/SetupPassword.tsx @@ -113,7 +113,6 @@ export function SetupPassword() {
setIsPasswordSecured2(!isPasswordSecured2) @@ -121,7 +120,7 @@ export function SetupPassword() { />