SetupSecurity.tsx raw
1 import {
2 ClockIcon,
3 HandCoinsIcon,
4 InfoIcon,
5 LandmarkIcon,
6 ShieldAlertIcon,
7 UnlockIcon,
8 } from "lucide-react";
9 import React, { useState } from "react";
10 import { useNavigate } from "react-router";
11 import ExternalLink from "src/components/ExternalLink";
12
13 import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
14 import { Button } from "src/components/ui/button";
15 import { Checkbox } from "src/components/ui/checkbox";
16 import { Label } from "src/components/ui/label";
17 import {
18 Tooltip,
19 TooltipContent,
20 TooltipProvider,
21 TooltipTrigger,
22 } from "src/components/ui/tooltip";
23 import { useInfo } from "src/hooks/useInfo";
24 import useSetupStore from "src/state/SetupStore";
25
26 export function SetupSecurity() {
27 const navigate = useNavigate();
28 const [hasConfirmed, setConfirmed] = useState<boolean>(false);
29 const store = useSetupStore();
30 const { data: info } = useInfo();
31
32 function onSubmit(e: React.FormEvent) {
33 e.preventDefault();
34 navigate("/setup/finish");
35 }
36
37 return (
38 <div className="grid max-w-sm">
39 <form onSubmit={onSubmit} className="flex flex-col items-center w-full">
40 <TwoColumnLayoutHeader
41 title="Security & Recovery"
42 pageTitle="Security & Recovery"
43 description="Take your time to understand how to secure and recover your funds on Alby Hub."
44 />
45
46 <div className="flex flex-col gap-6 w-full mt-6">
47 {store.nodeInfo.backendType !== "CASHU" &&
48 store.nodeInfo.backendType !== "BARK" && (
49 <div className="flex gap-3 items-center">
50 <div className="shrink-0">
51 <HandCoinsIcon className="size-6" />
52 </div>
53 <span className="text-sm text-muted-foreground">
54 Alby Hub is a spending wallet - do not keep all your savings
55 on it!
56 </span>
57 </div>
58 )}
59 {store.nodeInfo.backendType === "CASHU" && (
60 <div className="flex gap-3 items-center">
61 <div className="shrink-0">
62 <LandmarkIcon className="size-6" />
63 </div>
64 <span className="text-sm text-muted-foreground">
65 Your funds are owned by the cashu mint - use at your own risk
66 with only small amounts!
67 </span>
68 </div>
69 )}
70 {store.nodeInfo.backendType === "BARK" && (
71 <>
72 <div className="flex gap-3 items-center">
73 <LandmarkIcon className="size-6 shrink-0" />
74 <span className="text-sm text-muted-foreground">
75 Bark is in beta - use at your own risk!
76 </span>
77 </div>
78 <div className="flex gap-3 items-center">
79 <ClockIcon className="size-6 shrink-0" />
80 <span className="text-sm text-muted-foreground flex items-center justify-center gap-1">
81 Your funds must be refreshed periodically{" "}
82 <TooltipProvider>
83 <Tooltip>
84 <TooltipTrigger type="button">
85 <InfoIcon className="size-4 text-muted-foreground" />
86 </TooltipTrigger>
87 <TooltipContent className="max-w-xs">
88 Your virtual UTXOs (VTXOs) will be refreshed
89 automatically to ensure you maintain ownership.
90 Refreshes may incur a small fee. Keep your Alby Hub
91 online so your funds do not expire.
92 </TooltipContent>
93 </Tooltip>
94 </TooltipProvider>
95 </span>
96 </div>
97 <div className="flex gap-3 items-center">
98 <ShieldAlertIcon className="size-6 shrink-0" />
99 <span className="text-sm text-muted-foreground flex items-center justify-center gap-1">
100 Unilateral exit is not implemented in Alby Hub yet{" "}
101 <TooltipProvider>
102 <Tooltip>
103 <TooltipTrigger type="button">
104 <InfoIcon className="size-4 text-muted-foreground" />
105 </TooltipTrigger>
106 <TooltipContent className="max-w-xs">
107 You will need to take your hub wallet data and execute
108 the exit yourself.
109 </TooltipContent>
110 </Tooltip>
111 </TooltipProvider>
112 </span>
113 </div>
114 <ExternalLink
115 className="text-muted-foreground flex items-center text-sm"
116 to="https://second.tech/terms"
117 >
118 <p>
119 By using Bark you agree to{" "}
120 <span className="font-semibold underline">
121 Second's Terms of Service
122 </span>
123 .
124 </p>
125 </ExternalLink>
126 </>
127 )}
128 <div className="flex gap-3 items-center">
129 <div className="shrink-0">
130 <UnlockIcon className="size-6" />
131 </div>
132 <span className="text-sm text-muted-foreground">
133 Access to your Alby Hub is protected by an unlock password you
134 set. It cannot be recovered or reset.
135 </span>
136 </div>
137 {store.nodeInfo.backendType === "LND" ||
138 store.nodeInfo.backendType === "CLN" ||
139 store.nodeInfo.backendType === "PHOENIX" ? (
140 <div className="flex gap-3 items-center">
141 <div className="shrink-0">
142 <ShieldAlertIcon className="size-6" />
143 </div>
144 <span className="text-sm text-muted-foreground">
145 Channel backups{" "}
146 <span className="underline">are not handled</span>
147 by Alby Hub. Please take care of your own backups or go back and
148 choose the LDK node type.
149 </span>
150 </div>
151 ) : store.hasImportedMnemonic &&
152 store.nodeInfo.backendType === "LDK" ? (
153 <div className="flex gap-3 items-center">
154 <div className="shrink-0">
155 <ShieldAlertIcon className="size-6" />
156 </div>
157 <span className="text-sm text-muted-foreground">
158 Your recovery phrase can only restore funds from lightning
159 channels if you have dynamic channel backups enabled. If you had
160 active channels on a different device, contact Alby support
161 before proceeding.
162 </span>
163 </div>
164 ) : (
165 <div className="flex gap-3 items-center">
166 <div className="shrink-0">
167 <ShieldAlertIcon className="size-6" />
168 </div>
169 <span className="text-sm text-muted-foreground">
170 Your{store.nodeInfo.backendType === "LDK" && " on-chain"}{" "}
171 balance can be recovered only with your 12-word recovery phrase
172 which you can access once your node has started.
173 {!info?.albyUserIdentifier &&
174 store.nodeInfo.backendType === "LDK" &&
175 " You must also take care of your own channel backups."}
176 </span>
177 </div>
178 )}
179 <ExternalLink
180 className="text-muted-foreground flex items-center text-sm"
181 to="https://guides.getalby.com/user-guide/alby-hub/backups-and-recover"
182 >
183 <p>
184 Learn more about backups and recovery process on{" "}
185 <span className="font-semibold underline">Alby Guides</span>.
186 </p>
187 </ExternalLink>
188 <div className="flex items-center">
189 <Checkbox
190 id="securePassword"
191 required
192 onCheckedChange={() => setConfirmed(!hasConfirmed)}
193 />
194 <Label htmlFor="securePassword" className="ml-2 cursor-pointer">
195 I understand how to secure and recover funds
196 </Label>
197 </div>
198 <Button className="w-full" disabled={!hasConfirmed} type="submit">
199 Continue
200 </Button>
201 </div>
202 </form>
203 </div>
204 );
205 }
206