Delete Vault UI

src/components/UserAccess/UserAccount.tsx

@@ -2,11 +2,14 @@ import { Icon } from "@iconify/react";
 import tw from "twin.macro";
 
 import {
+  DeleteVault,
   Group,
   LogoutButton,
   Stack,
   styledNavButton,
+  styledNavLink,
   Text,
+  WithIcon,
 } from "src/components";
 import { capitalizeString } from "src/utils";
 
@@ -47,18 +50,22 @@ const UserAccount = ({ user, accountLoginService }: Props) => {
       <Stack tw="gap-[2px]">
         <LogoutButton />
         {/* TODO: reinstate when delete account function is ready */}
-        {/* <hr tw="border-separatorLight" />
-      <Text
-        as="button"
-        variant="base"
-        weight="medium"
-        css={[styledNavLink, tw`w-full px-3`]}
-        tw="text-labelTertiary"
-      >
-        <WithIcon prefix={<Icon icon="carbon:renew" height="0.85em" />}>
-          Delete Vault
-        </WithIcon>
-      </Text> */}
+        <hr tw="border-separatorLight" />
+        <DeleteVault
+          buttonNode={
+            <Text
+              as="button"
+              variant="base"
+              weight="medium"
+              css={[styledNavLink, tw`w-full px-3`]}
+              tw="text-labelTertiary"
+            >
+              <WithIcon prefix={<Icon icon="carbon:renew" height="0.85em" />}>
+                Delete Vault
+              </WithIcon>
+            </Text>
+          }
+        />
       </Stack>
     </Stack>
   );

src/components/Vault/DeleteVault.tsx

@@ -0,0 +1,23 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import tw from "twin.macro";
+
+import { DeleteVaultPresenter } from "src/components";
+
+interface Props {
+  buttonNode: React.ReactNode;
+}
+
+const DeleteVault = ({ buttonNode }: Props) => {
+  const isDeleting = false;
+  const onDelete = () => console.log("delete");
+
+  return (
+    <DeleteVaultPresenter
+      buttonNode={buttonNode}
+      isDeleting={isDeleting}
+      onDelete={onDelete}
+    />
+  );
+};
+
+export { DeleteVault };

src/components/Vault/DeleteVaultPresenter.tsx

@@ -0,0 +1,63 @@
+import { Icon } from "@iconify/react";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import tw from "twin.macro";
+
+import {
+  Button,
+  Center,
+  DialogClose,
+  DialogModal,
+  Group,
+  Stack,
+  Text,
+} from "src/components";
+
+interface Props {
+  buttonNode: React.ReactNode;
+  isDeleting: boolean;
+  onDelete: () => void;
+}
+
+const DeleteVaultPresenter = ({ buttonNode, isDeleting, onDelete }: Props) => (
+  <DialogModal variant="confirm" buttonNode={buttonNode}>
+    <Center tw="py-insetDouble">
+      <Stack tw="gap-insetAlmost flex-1">
+        <Stack tw="gap-2">
+          <Text color="label" variant="title2" tw="text-center">
+            Are you sure?
+          </Text>
+          <Text color="labelSecondary" tw="text-center">
+            Confirm you want to delete your vault. Once it&apos;s gone,
+            it&apos;s gone.
+          </Text>
+        </Stack>
+
+        <Group tw="pt-1 gap-4 justify-center">
+          <DialogClose asChild>
+            <Button
+              variant="outline"
+              size="lg"
+              // prefix={<Icon icon="carbon:pause-filled" />}
+              tw="md:min-w-[220px]"
+              isDisabled={isDeleting}
+            >
+              Not yet
+            </Button>
+          </DialogClose>
+          <Button
+            variant="solid"
+            size="lg"
+            prefix={<Icon icon="carbon:close-filled" />}
+            tw="md:min-w-[220px] bg-error"
+            isLoading={isDeleting}
+            onClick={onDelete}
+          >
+            Delete
+          </Button>
+        </Group>
+      </Stack>
+    </Center>
+  </DialogModal>
+);
+
+export { DeleteVaultPresenter };

src/components/Vault/index.ts

@@ -1,5 +1,7 @@
 export * from "./AddData";
 export * from "./DeleteData";
+export * from "./DeleteVault";
+export * from "./DeleteVaultPresenter";
 export * from "./StorageInstructions";
 export * from "./StorageInstructionsCollapsible";
 export * from "./StorageInstructionsModal";