diff --git a/frontend/src/components/layouts/SettingsLayout.tsx b/frontend/src/components/layouts/SettingsLayout.tsx index 7a9b03c9..64cb2daf 100644 --- a/frontend/src/components/layouts/SettingsLayout.tsx +++ b/frontend/src/components/layouts/SettingsLayout.tsx @@ -106,7 +106,7 @@ export default function SettingsLayout() { Key Backup )} {hasNodeBackup && ( - Node Backup + Migrate Node )} Debug Tools diff --git a/frontend/src/screens/BackupNode.tsx b/frontend/src/screens/BackupNode.tsx index b2f93f3f..1c31992f 100644 --- a/frontend/src/screens/BackupNode.tsx +++ b/frontend/src/screens/BackupNode.tsx @@ -1,8 +1,11 @@ +import { InfoCircledIcon } from "@radix-ui/react-icons"; +import { AlertTriangleIcon } from "lucide-react"; import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import Container from "src/components/Container"; import SettingsHeader from "src/components/SettingsHeader"; +import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert"; import { Button } from "src/components/ui/button"; import { Input } from "src/components/ui/input"; import { Label } from "src/components/ui/label"; @@ -80,9 +83,27 @@ export function BackupNode() { return ( <> + + + Do not run your node on multiple devices + + Your node maintains channel state with your channel partners. After + you create this backup, do not restart Alby Hub on this device. + + + + + What Happens Next + + You'll need to enter your unlock password to download and decrypt a + backup of your Alby Hub data. After your backup is downloaded, we'll + give you instructions on how to import the backup file on another host + or machine. + + {showPasswordScreen ? (

Enter unlock password

@@ -114,9 +135,10 @@ export function BackupNode() { type="submit" disabled={loading} size="lg" + className="w-full" onClick={() => setShowPasswordScreen(true)} > - Create Backup + Create Backup To Migrate Node )}