From 774f2aa7eb9f05722c0dffbff559798004d15fbc Mon Sep 17 00:00:00 2001
From: Leo Unoki <leo.unoki@trili.tech>
Date: Mon, 31 Jul 2023 13:23:26 +0100
Subject: [PATCH] Add offboarding modal

---
 src/assets/icons/Warning.tsx                  |  24 +++++
 .../Offboarding/OffboardingForm.tsx           | 100 ++++++++++++++++++
 .../Offboarding/useOffboardingModal.tsx       |  21 ++++
 src/views/settings/SettingsView.tsx           |   7 +-
 4 files changed, 149 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/Warning.tsx
 create mode 100644 src/components/Offboarding/OffboardingForm.tsx
 create mode 100644 src/components/Offboarding/useOffboardingModal.tsx

diff --git a/src/assets/icons/Warning.tsx b/src/assets/icons/Warning.tsx
new file mode 100644
index 000000000..f81e3df2b
--- /dev/null
+++ b/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;
diff --git a/src/components/Offboarding/OffboardingForm.tsx b/src/components/Offboarding/OffboardingForm.tsx
new file mode 100644
index 000000000..c4725992c
--- /dev/null
+++ b/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;
diff --git a/src/components/Offboarding/useOffboardingModal.tsx b/src/components/Offboarding/useOffboardingModal.tsx
new file mode 100644
index 000000000..9895b2613
--- /dev/null
+++ b/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;
diff --git a/src/views/settings/SettingsView.tsx b/src/views/settings/SettingsView.tsx
index 87ae72561..1eed8da18 100644
--- a/src/views/settings/SettingsView.tsx
+++ b/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>
   );
 };