Add verification flow

apps/web/src/assets/icons/index.ts

@@ -10,10 +10,10 @@ export { default as ChevronDownIcon } from "./chevron-down.svg";
 export { default as ChevronRightIcon } from "./chevron-right.svg";
 export { default as CloseIcon } from "./close.svg";
 export { default as CodeSandboxIcon } from "./code-sandbox.svg";
+export { default as CoinIcon } from "./coin.svg";
 export { default as ContactIcon } from "./contact-s.svg";
 export { default as ContractIcon } from "./contract.svg";
 export { default as CopyIcon } from "./copy.svg";
-export { default as CoinIcon } from "./coin.svg";
 export { default as CrossedCircleIcon } from "./crossed-circle.svg";
 export { default as DelegateIcon } from "./delegate-s.svg";
 export { default as DownloadIcon } from "./download.svg";
@@ -42,10 +42,12 @@ export { default as MenuIcon } from "./menu.svg";
 export { default as MoonIcon } from "./moon.svg";
 export { default as MultisigIcon } from "./multisig.svg";
 export { default as OutgoingArrowIcon } from "./outgoing-arrow.svg";
+export { default as PencilIcon } from "./pencil.svg";
 export { default as PlusIcon } from "./plus.svg";
 export { default as PyramidIcon } from "./pyramid.svg";
 export { default as RadioIcon } from "./radio.svg";
 export { default as RedditIcon } from "./reddit.svg";
+export { default as ScanIcon } from "./scan.svg";
 export { default as SearchIcon } from "./search.svg";
 export { default as SelectorIcon } from "./selector.svg";
 export { default as SettingsIcon } from "./settings.svg";
@@ -60,6 +62,7 @@ export { default as UserIcon } from "./user.svg";
 export { default as UserPlusIcon } from "./user-plus.svg";
 export { default as VerifiedIcon } from "./verified.svg";
 export { default as WalletIcon } from "./wallet.svg";
+export { default as WindowCloseIcon } from "./window-close.svg";
 export { TokenIcon } from "./TokenIcon";
 
 import CloseIcon from "./close.svg";

apps/web/src/components/AccountCard/AccountBalance.tsx

@@ -8,7 +8,7 @@ import { ArrowDownLeftIcon, WalletIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { AccountInfoModal } from "../AccountSelectorModal";
 import { IconButtonWithText } from "../IconButtonWithText";
-import { useIsAccountVerified } from "../Onboarding/useIsAccountVerified";
+import { useIsAccountVerified } from "../Onboarding/VerificationFlow/useIsAccountVerified";
 
 export const AccountBalance = () => {
   const color = useColor();

apps/web/src/components/AccountCard/SendTezButton.tsx

@@ -3,7 +3,7 @@ import { useCurrentAccount } from "@umami/state";
 
 import { ArrowUpRightIcon } from "../../assets/icons";
 import { IconButtonWithText } from "../IconButtonWithText/IconButtonWithText";
-import { useIsAccountVerified } from "../Onboarding/useIsAccountVerified";
+import { useIsAccountVerified } from "../Onboarding/VerificationFlow/useIsAccountVerified";
 import { FormPage as SendTezFormPage } from "../SendFlow/Tez/FormPage";
 
 export const SendTezButton = () => {

apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx

@@ -23,7 +23,7 @@ import { useColor } from "../../styles/useColor";
 import { AccountTile } from "../AccountTile";
 import { ModalCloseButton } from "../CloseButton";
 import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
-import { useIsAccountVerified } from "../Onboarding/useIsAccountVerified";
+import { useIsAccountVerified } from "../Onboarding/VerificationFlow/useIsAccountVerified";
 
 export const AccountSelectorModal = () => {
   const accounts = useImplicitAccounts();

apps/web/src/components/EmptyMessage/index.ts

@@ -1,2 +1,2 @@
 export { EmptyMessage } from "./EmptyMessage";
-export { VerifyMessage } from "./VerifyMessage";
+export type { EmptyMessageProps } from "./EmptyMessage";

apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.tsx

@@ -1,7 +1,7 @@
 import { useDynamicDrawerContext } from "@umami/components";
 
 import { AlertCircleIcon, LockIcon, RadioIcon } from "../../../assets/icons";
-import { useIsAccountVerified } from "../../Onboarding/useIsAccountVerified";
+import { useIsAccountVerified } from "../../Onboarding/VerificationFlow/useIsAccountVerified";
 import { ChangePasswordMenu } from "../ChangePasswordMenu/ChangePasswordMenu";
 import { ErrorLogsMenu } from "../ErrorLogsMenu/ErrorLogsMenu";
 import { GenericMenu } from "../GenericMenu";

apps/web/src/components/Menu/Menu.tsx

@@ -18,7 +18,7 @@ import {
   UserPlusIcon,
 } from "../../assets/icons";
 import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
-import { useIsAccountVerified } from "../Onboarding/useIsAccountVerified";
+import { useIsAccountVerified } from "../Onboarding/VerificationFlow/useIsAccountVerified";
 
 export const Menu = () => {
   const { openWith: openModal } = useDynamicModalContext();

apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx

@@ -17,7 +17,7 @@ export const OnboardOptions = ({ children }: PropsWithChildren) => {
   const { openWith } = useDynamicModalContext();
 
   return (
-    <Flex alignItems="center" flexDirection="column">
+    <Flex alignItems="center" flexDirection="column" width="full">
       <Heading color={color("900")} size="lg">
         Continue with:
       </Heading>

apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx

@@ -14,7 +14,9 @@ import { type Curves } from "@taquito/signer";
 import { useDynamicModalContext, useMultiForm } from "@umami/components";
 import { DEFAULT_ACCOUNT_LABEL } from "@umami/core";
 import {
+  accountsActions,
   generate24WordMnemonic,
+  useAppDispatch,
   useAsyncActionHandler,
   useGetNextAvailableAccountLabels,
   useIsPasswordSet,
@@ -42,11 +44,14 @@ type FormFields = {
 type Mode = "mnemonic" | "secret_key" | "new_mnemonic";
 
 type SetupPasswordProps = {
-  mode: Mode;
-  handleSubmit?: (password: string) => void;
+  mode?: Mode;
+  handleProceedToVerification?: (password: string) => void;
 };
 
-export const SetupPassword = ({ mode, handleSubmit }: SetupPasswordProps) => {
+export const SetupPassword = ({
+  mode,
+  handleProceedToVerification: handleProceedToVerification,
+}: SetupPasswordProps) => {
   const color = useColor();
   const { handleAsyncAction, isLoading } = useAsyncActionHandler();
   const { allFormValues, onClose } = useDynamicModalContext();
@@ -55,6 +60,7 @@ export const SetupPassword = ({ mode, handleSubmit }: SetupPasswordProps) => {
   const checkPassword = useValidateMasterPassword();
   const getNextAvailableAccountLabels = useGetNextAvailableAccountLabels();
   const isPasswordSet = useIsPasswordSet();
+  const dispatch = useAppDispatch();
 
   const form = useMultiForm<FormFields>({
     mode: "onBlur",
@@ -71,6 +77,18 @@ export const SetupPassword = ({ mode, handleSubmit }: SetupPasswordProps) => {
 
   const isNewMnemonic = mode === "new_mnemonic";
 
+  const onHandleSubmit = (formFields: FormFields) => {
+    if (handleProceedToVerification) {
+      return handleProceedToVerification(formFields.password);
+    }
+
+    if (isNewMnemonic) {
+      dispatch(accountsActions.setPassword(formFields.password));
+    }
+
+    return onSubmit(formFields);
+  };
+
   const onSubmit = ({ password, curve, derivationPath }: FormFields) =>
     handleAsyncAction(async () => {
       const label = getNextAvailableAccountLabels(DEFAULT_ACCOUNT_LABEL)[0];
@@ -102,14 +120,16 @@ export const SetupPassword = ({ mode, handleSubmit }: SetupPasswordProps) => {
           });
           break;
         }
+        default:
+          break;
       }
 
       return onClose();
     });
 
   const icon = isNewMnemonic ? UserIcon : LockIcon;
-  const title = isNewMnemonic ? "Create Password" : "Almost there";
-  const buttonLabel = isNewMnemonic ? "Create Account" : "Import Wallet";
+  const title = mode ? (isNewMnemonic ? "Create Password" : "Almost there") : "Confirm password";
+  const buttonLabel = mode ? (isNewMnemonic ? "Create Account" : "Import Wallet") : "Confirm";
 
   return (
     <ModalContent>
@@ -134,11 +154,7 @@ export const SetupPassword = ({ mode, handleSubmit }: SetupPasswordProps) => {
         </Center>
       </ModalHeader>
       <FormProvider {...form}>
-        <form
-          onSubmit={form.handleSubmit(formFields =>
-            handleSubmit ? handleSubmit(formFields.password) : onSubmit(formFields)
-          )}
-        >
+        <form onSubmit={form.handleSubmit(onHandleSubmit)}>
           <ModalBody>
             <Flex flexDirection="column" gap="24px">
               <PasswordInput

apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx

@@ -0,0 +1,96 @@
+import {
+  Button,
+  Center,
+  Flex,
+  Heading,
+  Icon,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { useDynamicModalContext } from "@umami/components";
+
+import { RecordSeedphraseModal } from "./RecordSeedphraseModal";
+import {
+  AlertIcon,
+  EyeOffIcon,
+  PencilIcon,
+  ScanIcon,
+  WindowCloseIcon,
+} from "../../../assets/icons";
+import { useColor } from "../../../styles/useColor";
+import { ModalBackButton } from "../../BackButton";
+import { ModalCloseButton } from "../../CloseButton";
+
+const items = [
+  {
+    icon: PencilIcon,
+    text: "Write down your seed phrase and store it safely",
+  },
+  {
+    icon: EyeOffIcon,
+    text: "Ensure no one else can see it",
+  },
+  {
+    icon: WindowCloseIcon,
+    text: "Do not store it digitally",
+  },
+  {
+    icon: ScanIcon,
+    text: "Avoid taking screenshots",
+  },
+];
+
+type ImportantNoticeModalProps = {
+  seedPhrase: string;
+};
+
+export const ImportantNoticeModal = ({ seedPhrase }: ImportantNoticeModalProps) => {
+  const color = useColor();
+  const { openWith } = useDynamicModalContext();
+
+  return (
+    <ModalContent>
+      <ModalHeader>
+        <ModalBackButton />
+        <Center flexDirection="column" gap="12px">
+          <Icon as={AlertIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Heading size="xl">Important Notice</Heading>
+          <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
+            Please read the following before you continue to see your secret Seed Phrase.
+          </Text>
+        </Center>
+        <ModalCloseButton />
+      </ModalHeader>
+      <ModalBody>
+        <VStack align="stretch" spacing="12px">
+          {items.map(({ text, icon }) => (
+            <Flex
+              key={text}
+              alignItems="center"
+              gap="16px"
+              padding="12px 24px"
+              background={color("100")}
+              borderRadius="6px"
+            >
+              <Icon as={icon} boxSize="24px" color={color("400")} />
+              <Text color={color("900")}>{text}</Text>
+            </Flex>
+          ))}
+        </VStack>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          width="full"
+          onClick={() => openWith(<RecordSeedphraseModal seedPhrase={seedPhrase} />)}
+          variant="primary"
+        >
+          Next
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+};