Merge pull request #313 from trilitech/offboarding-modal

Add offboarding modal

src/assets/icons/Warning.tsx

@@ -0,0 +1,24 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+const WarningIcon: React.FC<IconProps> = props => {
+  return (
+    <Icon
+      width="36"
+      height="32"
+      viewBox="0 0 36 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18.0004 24.3332H18.0171M18.0004 12.6665V19.3332M8.68719 30.9999H27.3136C30.2831 30.9999 31.7678 30.9999 32.6386 30.3754C33.3985 29.8305 33.8946 28.9915 34.0058 28.0631C34.1333 26.9991 33.4178 25.6982 31.9868 23.0963L22.6736 6.16318C21.1499 3.39292 20.3881 2.00779 19.3814 1.54954C18.5041 1.15015 17.4968 1.15015 16.6194 1.54954C15.6127 2.00779 14.8509 3.39292 13.3273 6.16317L4.01404 23.0963C2.58301 25.6982 1.8675 26.9991 1.99498 28.0631C2.10622 28.9915 2.6023 29.8305 3.36219 30.3754C4.23304 30.9999 5.71776 30.9999 8.68719 30.9999Z"
+        stroke="#FC7884"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  );
+};
+
+export default WarningIcon;

src/components/Offboarding/OffboardingForm.tsx

@@ -0,0 +1,100 @@
+import {
+  FormControl,
+  ModalBody,
+  ModalCloseButton,
+  ModalHeader,
+  Text,
+  ModalFooter,
+  Box,
+  Button,
+  FormErrorMessage,
+  Input,
+  Checkbox,
+  Divider,
+} from "@chakra-ui/react";
+import { FormProvider, useForm } from "react-hook-form";
+import WarningIcon from "../../assets/icons/Warning";
+import colors from "../../style/colors";
+import { useReset } from "../../utils/hooks/accountHooks";
+
+const CONFIRMATION_CODE = "wasabi";
+
+const OffboardingForm = () => {
+  const reset = useReset();
+
+  const onSubmit = () => {
+    if (!getValues("check") || getValues("confirmationCode") !== CONFIRMATION_CODE) {
+      return;
+    }
+    reset();
+  };
+
+  const form = useForm<{ check: boolean; confirmationCode: string }>({
+    mode: "onBlur",
+  });
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid, errors },
+    getValues,
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <ModalCloseButton />
+
+        <ModalHeader mt={5} textAlign="center">
+          <Box>
+            <WarningIcon w={10} h={10} mb={5} />
+            <Text>Off-board Wallet</Text>
+          </Box>
+        </ModalHeader>
+        <Box marginX="5" paddingX={2}>
+          <Text textAlign="center" color={colors.gray[400]} fontWeight="bold" size="sm" mb={2}>
+            This will permanently delete any data from this computer.
+          </Text>
+          <Text textAlign="center" color={colors.gray[400]} size="sm">
+            Please enter « {CONFIRMATION_CODE} » to confirm. The accounts are still available to be
+            imported in the future; in order to regain access to your accounts, please make sure
+            that you keep the recovery phrase.
+          </Text>
+          <ModalBody>
+            <Divider marginY={5} borderColor={colors.gray[400]} />
+            <FormControl isInvalid={!!errors.check}>
+              <Checkbox {...register("check", { required: true })}>
+                <Text ml={2} fontWeight="bold">
+                  I have read the warning and I am certain I want to delete my private keys locally.
+                  I also made sure to keep my recovery phrase.
+                </Text>
+              </Checkbox>
+            </FormControl>
+            <Divider marginY={5} borderColor={colors.gray[400]} />
+            <FormControl paddingY={5} isInvalid={!!errors.confirmationCode}>
+              <Input
+                type="text"
+                {...register("confirmationCode", {
+                  required: true,
+                  validate: (confirmationCode: string) =>
+                    confirmationCode === CONFIRMATION_CODE || "Confirmation code does not match",
+                })}
+                placeholder="Enter code word to confirm"
+              />
+              {errors.confirmationCode && (
+                <FormErrorMessage>{errors.confirmationCode.message}</FormErrorMessage>
+              )}
+            </FormControl>
+          </ModalBody>
+        </Box>
+
+        <ModalFooter>
+          <Button width="100%" type="submit" isDisabled={!isValid} variant="warning" mb={2}>
+            Confirm
+          </Button>
+        </ModalFooter>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default OffboardingForm;

src/components/Offboarding/useOffboardingModal.tsx

@@ -0,0 +1,21 @@
+import { Modal, ModalContent, ModalOverlay, useDisclosure } from "@chakra-ui/react";
+import colors from "../../style/colors";
+import OffboardingForm from "./OffboardingForm";
+
+const useOffboardingModal = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return {
+    modalElement: (
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent bg={colors.gray[900]}>
+          <OffboardingForm />
+        </ModalContent>
+      </Modal>
+    ),
+    onOpen,
+  };
+};
+
+export default useOffboardingModal;

src/views/settings/SettingsView.tsx

@@ -8,8 +8,8 @@ import ClickableCard, {
 } from "../../components/ClickableCard";
 import { IconAndTextBtn } from "../../components/IconAndTextBtn";
 import NetworkSelector from "../../components/NetworkSelector";
+import useOffboarsingModal from "../../components/Offboarding/useOffboardingModal";
 import { TopBar } from "../../components/TopBar";
-import { useReset } from "../../utils/hooks/accountHooks";
 import { BeaconDrawerCard } from "./BeaconDrawerCard";
 import ErrorLogsDrawerCard from "./ErrorLogsDrawerCard";
 
@@ -128,7 +128,7 @@ const BackupSection = () => {
 };
 
 const AdvancedSection = () => {
-  const reset = useReset();
+  const { modalElement, onOpen } = useOffboarsingModal();
   return (
     <SectionContainer title="Advanced Settings">
       <ClickableCard>
@@ -145,8 +145,9 @@ const AdvancedSection = () => {
 
       <BeaconDrawerCard />
       <SettingsCardWithDrawerIcon left="Reset Settings" onClick={() => {}} />
-      <SettingsCardWithDrawerIcon left="Off-board Wallet" onClick={reset} />
+      <SettingsCardWithDrawerIcon left="Off-board Wallet" onClick={onOpen} />
       <SettingsCardWithDrawerIcon left="Change Password" onClick={() => {}} />
+      {modalElement}
     </SectionContainer>
   );
 };