Add verification flow (#1827)

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";
 
 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";
 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";
 
 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";
 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";
 
 export const Menu = () => {
   const { openWith: openModal } = useDynamicModalContext();

apps/web/src/components/MnemonicWord/MnemonicWord.tsx

@@ -0,0 +1,43 @@
+import { GridItem, type GridItemProps, Text } from "@chakra-ui/react";
+import { MnemonicAutocomplete } from "@umami/components";
+import { type ComponentProps } from "react";
+
+import { useColor } from "../../styles/useColor";
+
+type MnemonicWordProps = {
+  index: number;
+  word?: string;
+  autocompleteProps?: ComponentProps<typeof MnemonicAutocomplete>;
+} & GridItemProps;
+
+export const MnemonicWord = ({ index, word, autocompleteProps, ...props }: MnemonicWordProps) => {
+  const color = useColor();
+
+  return (
+    <GridItem {...props}>
+      <Text
+        position="absolute"
+        zIndex={1}
+        marginTop={{ lg: "11px", base: "8px" }}
+        marginLeft={{ lg: "16px", base: "10px" }}
+        color={color("300")}
+        textAlign="right"
+        size={{ lg: "lg", base: "xs" }}
+      >
+        {String(index + 1).padStart(2, "0")}.
+      </Text>
+      {autocompleteProps && <MnemonicAutocomplete {...autocompleteProps} />}
+      {word && (
+        <Text
+          alignSelf="center"
+          paddingRight="10px"
+          paddingLeft={{ base: "30px", lg: "48px" }}
+          fontSize={{ base: "xs", lg: "lg" }}
+          fontWeight="medium"
+        >
+          {word}
+        </Text>
+      )}
+    </GridItem>
+  );
+};

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

@@ -0,0 +1 @@
+export { MnemonicWord } from "./MnemonicWord";

apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx

@@ -7,19 +7,18 @@ import {
   Button,
   Flex,
   Grid,
-  GridItem,
   Heading,
   Icon,
-  Text,
 } from "@chakra-ui/react";
-import { MnemonicAutocomplete, useDynamicModalContext, useMultiForm } from "@umami/components";
+import { useDynamicModalContext, useMultiForm } from "@umami/components";
 import { useAsyncActionHandler } from "@umami/state";
 import { validateMnemonic } from "bip39";
 import { range } from "lodash";
 import { FormProvider, useFieldArray } from "react-hook-form";
 
 import { CloseIcon } from "../../../assets/icons";
 import { useColor } from "../../../styles/useColor";
+import { MnemonicWord } from "../../MnemonicWord";
 import { RadioButtons } from "../../RadioButtons";
 import { SetupPassword } from "../SetupPassword";
 
@@ -114,21 +113,11 @@ export const SeedPhraseTab = () => {
 
           <Grid gridRowGap="16px" gridColumnGap="12px" gridTemplateColumns="repeat(3, 1fr)">
             {fields.map((field, index) => (
-              <GridItem key={field.id}>
-                <Text
-                  position="absolute"
-                  zIndex={1}
-                  marginTop={{ lg: "10px", base: "8px" }}
-                  marginLeft={{ lg: "16px", base: "10px" }}
-                  color={color("black")}
-                  textAlign="right"
-                  size={{ lg: "lg", base: "xs" }}
-                >
-                  {String(index + 1).padStart(2, "0")}.
-                </Text>
-                <MnemonicAutocomplete
-                  inputName={`mnemonic.${index}.val`}
-                  inputProps={{
+              <MnemonicWord
+                key={field.id}
+                autocompleteProps={{
+                  inputName: `mnemonic.${index}.val`,
+                  inputProps: {
                     ...register(`mnemonic.${index}.val`, { required: true }),
                     // eslint-disable-next-line @typescript-eslint/no-misused-promises
                     onPaste: async e => {
@@ -137,9 +126,10 @@ export const SeedPhraseTab = () => {
                     },
                     variant: "mnemonic",
                     placeholder: `word #${index + 1}`,
-                  }}
-                />
-              </GridItem>
+                  },
+                }}
+                index={index}
+              />
             ))}
           </Grid>
           <Button gap="4px" onClick={clearAll} variant="ghost">

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.test.tsx

@@ -2,24 +2,41 @@ import {
   type UmamiStore,
   generate24WordMnemonic,
   makeStore,
+  useGetDecryptedMnemonic,
+  useIsPasswordSet,
   useRestoreFromMnemonic,
   useRestoreFromSecretKey,
 } from "@umami/state";
 import { mnemonic1 } from "@umami/test-utils";
 
 import { SetupPassword } from "./SetupPassword";
-import { act, fireEvent, renderInModal, screen, userEvent, waitFor } from "../../../testUtils";
+import {
+  act,
+  dynamicModalContextMock,
+  fireEvent,
+  renderInModal,
+  screen,
+  userEvent,
+  waitFor,
+} from "../../../testUtils";
 import { CURVES } from "../AdvancedAccountSettings";
+import { ImportantNoticeModal } from "../VerificationFlow/ImportantNoticeModal";
 
 jest.mock("@umami/state", () => ({
   ...jest.requireActual("@umami/state"),
   useRestoreFromMnemonic: jest.fn(),
   useRestoreFromSecretKey: jest.fn(),
   generate24WordMnemonic: jest.fn(),
+  useGetDecryptedMnemonic: jest.fn(),
+  useIsPasswordSet: jest.fn(),
 }));
 
 const password = "password";
 
+beforeEach(() => {
+  jest.mocked(useGetDecryptedMnemonic).mockReturnValue(() => Promise.resolve(mnemonic1));
+});
+
 describe("<SetupPassword />", () => {
   describe.each(["mnemonic", "secret_key"] as const)("%s mode", mode => {
     describe("validations", () => {
@@ -250,4 +267,26 @@ describe("<SetupPassword />", () => {
       });
     });
   });
+
+  describe("verification mode", () => {
+    it("renders the verification screen", async () => {
+      jest.mocked(useIsPasswordSet).mockReturnValue(true);
+      const { openWith } = dynamicModalContextMock;
+      const user = userEvent.setup();
+
+      await renderInModal(<SetupPassword mode="verification" />);
+
+      const passwordInput = screen.getByLabelText("Password");
+
+      await act(() => user.type(passwordInput, password));
+
+      const submitButton = screen.getByRole("button", { name: "Confirm" });
+
+      await act(() => user.click(submitButton));
+
+      expect(openWith).toHaveBeenCalledWith(<ImportantNoticeModal mnemonic={mnemonic1} />, {
+        size: "xl",
+      });
+    });
+  });
 });