diff --git a/apps/web/src/assets/icons/index.ts b/apps/web/src/assets/icons/index.ts index a7dc5f3ac7..320d0b0dc8 100644 --- a/apps/web/src/assets/icons/index.ts +++ b/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"; diff --git a/apps/web/src/assets/icons/pencil.svg b/apps/web/src/assets/icons/pencil.svg new file mode 100644 index 0000000000..0d3958d99d --- /dev/null +++ b/apps/web/src/assets/icons/pencil.svg @@ -0,0 +1,5 @@ + + + diff --git a/apps/web/src/assets/icons/scan.svg b/apps/web/src/assets/icons/scan.svg new file mode 100644 index 0000000000..ce767b480b --- /dev/null +++ b/apps/web/src/assets/icons/scan.svg @@ -0,0 +1,5 @@ + + + diff --git a/apps/web/src/assets/icons/window-close.svg b/apps/web/src/assets/icons/window-close.svg new file mode 100644 index 0000000000..e113c889c2 --- /dev/null +++ b/apps/web/src/assets/icons/window-close.svg @@ -0,0 +1,8 @@ + + + + diff --git a/apps/web/src/components/AccountCard/AccountBalance.tsx b/apps/web/src/components/AccountCard/AccountBalance.tsx index 8ef4ab4645..ed5df57164 100644 --- a/apps/web/src/components/AccountCard/AccountBalance.tsx +++ b/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(); diff --git a/apps/web/src/components/AccountCard/SendTezButton.tsx b/apps/web/src/components/AccountCard/SendTezButton.tsx index e3252d5e6e..ffe006cff9 100644 --- a/apps/web/src/components/AccountCard/SendTezButton.tsx +++ b/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 = () => { diff --git a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx b/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx index 6c28c16bbc..6c162e428d 100644 --- a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx +++ b/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(); diff --git a/apps/web/src/components/EmptyMessage/index.ts b/apps/web/src/components/EmptyMessage/index.ts index 3913fd280f..af14d53027 100644 --- a/apps/web/src/components/EmptyMessage/index.ts +++ b/apps/web/src/components/EmptyMessage/index.ts @@ -1,2 +1,2 @@ export { EmptyMessage } from "./EmptyMessage"; -export { VerifyMessage } from "./VerifyMessage"; +export type { EmptyMessageProps } from "./EmptyMessage"; diff --git a/apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.tsx b/apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.tsx index 5760da093d..4b17f6de37 100644 --- a/apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.tsx +++ b/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"; diff --git a/apps/web/src/components/Menu/Menu.tsx b/apps/web/src/components/Menu/Menu.tsx index 3339866e49..0943c4f7b4 100644 --- a/apps/web/src/components/Menu/Menu.tsx +++ b/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(); diff --git a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx index 994f44bf79..645fc1b694 100644 --- a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx +++ b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx @@ -42,7 +42,7 @@ type FormFields = { type Mode = "mnemonic" | "secret_key" | "new_mnemonic"; type SetupPasswordProps = { - mode: Mode; + mode?: Mode; handleSubmit?: (password: string) => void; }; @@ -102,14 +102,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 ( diff --git a/apps/web/src/components/Onboarding/CopySeedphraseModal.tsx b/apps/web/src/components/Onboarding/VerificationFlow/CopySeedphraseModal.tsx similarity index 66% rename from apps/web/src/components/Onboarding/CopySeedphraseModal.tsx rename to apps/web/src/components/Onboarding/VerificationFlow/CopySeedphraseModal.tsx index 52a87ad96a..b419e74ad0 100644 --- a/apps/web/src/components/Onboarding/CopySeedphraseModal.tsx +++ b/apps/web/src/components/Onboarding/VerificationFlow/CopySeedphraseModal.tsx @@ -13,11 +13,11 @@ import { Text, } from "@chakra-ui/react"; -import { CopyIcon, KeyIcon } from "../../assets/icons"; -import { useColor } from "../../styles/useColor"; -import { ModalBackButton } from "../BackButton"; -import { ModalCloseButton } from "../CloseButton"; -import { CopyButton } from "../CopyButton"; +import { CopyIcon, KeyIcon } from "../../../assets/icons"; +import { useColor } from "../../../styles/useColor"; +import { ModalBackButton } from "../../BackButton"; +import { ModalCloseButton } from "../../CloseButton"; +import { CopyButton } from "../../CopyButton"; type CopySeedphraseModalProps = { seedPhrase: string; @@ -33,7 +33,7 @@ export const CopySeedphraseModal = ({ seedPhrase }: CopySeedphraseModalProps) =>
- + Import Wallet Record these 24 words in order to restore your wallet in the future @@ -42,23 +42,28 @@ export const CopySeedphraseModal = ({ seedPhrase }: CopySeedphraseModalProps) => - + {words.map((word, index) => ( - + {String(index + 1).padStart(2, "0")}. - + {word} diff --git a/apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx b/apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx new file mode 100644 index 0000000000..04a73d9773 --- /dev/null +++ b/apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx @@ -0,0 +1,94 @@ +import { + Button, + Center, + Flex, + Heading, + Icon, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + Text, + VStack, +} from "@chakra-ui/react"; +import { useDynamicModalContext } from "@umami/components"; + +import { CopySeedphraseModal } from "./CopySeedphraseModal"; +import { + AlertIcon, + EyeOffIcon, + PencilIcon, + ScanIcon, + WindowCloseIcon, +} from "../../../assets/icons"; +import { useColor } from "../../../styles/useColor"; +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 ( + + +
+ + Important Notice + + Please read the following before you continue to see your secret Seed Phrase. + +
+ + + + + {items.map(({ text, icon }) => ( + + + {text} + + ))} + + + + + + + ); +}; diff --git a/apps/web/src/components/Onboarding/VerificationInfoModal.tsx b/apps/web/src/components/Onboarding/VerificationFlow/VerificationInfoModal.tsx similarity index 93% rename from apps/web/src/components/Onboarding/VerificationInfoModal.tsx rename to apps/web/src/components/Onboarding/VerificationFlow/VerificationInfoModal.tsx index d1deee2adb..7e75ffc926 100644 --- a/apps/web/src/components/Onboarding/VerificationInfoModal.tsx +++ b/apps/web/src/components/Onboarding/VerificationFlow/VerificationInfoModal.tsx @@ -14,9 +14,9 @@ import { Text, } from "@chakra-ui/react"; -import { AlertIcon } from "../../assets/icons"; -import { useColor } from "../../styles/useColor"; -import { ModalCloseButton } from "../CloseButton"; +import { AlertIcon } from "../../../assets/icons"; +import { useColor } from "../../../styles/useColor"; +import { ModalCloseButton } from "../../CloseButton"; // TODO: Replace with actual copy paste const accordionItems = [ diff --git a/apps/web/src/components/EmptyMessage/VerifyMessage.test.tsx b/apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.test.tsx similarity index 89% rename from apps/web/src/components/EmptyMessage/VerifyMessage.test.tsx rename to apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.test.tsx index a0d4c64a8e..29a4f460e3 100644 --- a/apps/web/src/components/EmptyMessage/VerifyMessage.test.tsx +++ b/apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.test.tsx @@ -1,6 +1,6 @@ +import { VerificationInfoModal } from "./VerificationInfoModal"; import { VerifyMessage } from "./VerifyMessage"; -import { dynamicModalContextMock, render, screen, userEvent } from "../../testUtils"; -import { VerificationInfoModal } from "../Onboarding/VerificationInfoModal"; +import { dynamicModalContextMock, render, screen, userEvent } from "../../../testUtils"; describe("", () => { it("renders correctly", () => { diff --git a/apps/web/src/components/EmptyMessage/VerifyMessage.tsx b/apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.tsx similarity index 59% rename from apps/web/src/components/EmptyMessage/VerifyMessage.tsx rename to apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.tsx index 61825af9c9..3f97553287 100644 --- a/apps/web/src/components/EmptyMessage/VerifyMessage.tsx +++ b/apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.tsx @@ -1,33 +1,33 @@ import { Flex, Link } from "@chakra-ui/react"; import { useDynamicModalContext } from "@umami/components"; import { type MnemonicAccount } from "@umami/core"; -import { useCurrentAccount, useGetDecryptedMnemonic } from "@umami/state"; +import { useAsyncActionHandler, useCurrentAccount, useGetDecryptedMnemonic } from "@umami/state"; -import { EmptyMessage, type EmptyMessageProps } from "./EmptyMessage"; -import { useColor } from "../../styles/useColor"; -import { CopySeedphraseModal } from "../Onboarding/CopySeedphraseModal"; -import { SetupPassword } from "../Onboarding/SetupPassword"; -import { VerificationInfoModal } from "../Onboarding/VerificationInfoModal"; +import { ImportantNoticeModal } from "./ImportantNoticeModal"; +import { VerificationInfoModal } from "./VerificationInfoModal"; +import { useColor } from "../../../styles/useColor"; +import { EmptyMessage, type EmptyMessageProps } from "../../EmptyMessage"; +import { SetupPassword } from "../SetupPassword"; export const VerifyMessage = ({ ...props }: Omit) => { const { openWith } = useDynamicModalContext(); const currentAccount = useCurrentAccount() as MnemonicAccount; const color = useColor(); const getDecryptedMnemonic = useGetDecryptedMnemonic(); + const { handleAsyncAction } = useAsyncActionHandler(); - const handleDeriveSeedphraseModal = async (password: string) => { - const mnemonic = await getDecryptedMnemonic(currentAccount, password); + const handleDeriveSeedphraseModal = async (password: string) => + handleAsyncAction(async () => { + const mnemonic = await getDecryptedMnemonic(currentAccount, password); - return openWith(); - }; + return openWith(, { size: "xl" }); + }); return ( - openWith() - } + onClick={() => openWith()} subtitle={ "Please verify your account, to unlock all features\n and keep your account secure." } diff --git a/apps/web/src/components/Onboarding/VerificationFlow/index.ts b/apps/web/src/components/Onboarding/VerificationFlow/index.ts new file mode 100644 index 0000000000..76b414b9bb --- /dev/null +++ b/apps/web/src/components/Onboarding/VerificationFlow/index.ts @@ -0,0 +1,5 @@ +export { CopySeedphraseModal } from "./CopySeedphraseModal"; +export { VerificationInfoModal } from "./VerificationInfoModal"; +export { VerifyMessage } from "./VerifyMessage"; +export { useIsAccountVerified } from "./useIsAccountVerified"; +export { ImportantNoticeModal } from "./ImportantNoticeModal"; diff --git a/apps/web/src/components/Onboarding/useIsAccountVerified.tsx b/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.tsx similarity index 100% rename from apps/web/src/components/Onboarding/useIsAccountVerified.tsx rename to apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.tsx diff --git a/apps/web/src/components/ViewOverlay/ViewOverlay.tsx b/apps/web/src/components/ViewOverlay/ViewOverlay.tsx index a82bbef558..9bda0b5a8b 100644 --- a/apps/web/src/components/ViewOverlay/ViewOverlay.tsx +++ b/apps/web/src/components/ViewOverlay/ViewOverlay.tsx @@ -2,7 +2,7 @@ import { Box, Icon } from "@chakra-ui/react"; import { CoinIcon, LockIcon, PyramidIcon, WalletIcon } from "../../assets/icons"; import { useColor } from "../../styles/useColor"; -import { useIsAccountVerified } from "../Onboarding/useIsAccountVerified"; +import { useIsAccountVerified } from "../Onboarding/VerificationFlow/useIsAccountVerified"; type ViewOverlayProps = { iconType: "activity" | "earn" | "nfts" | "tokens"; diff --git a/apps/web/src/views/Activity/Activity.tsx b/apps/web/src/views/Activity/Activity.tsx index bc40faf298..49066e4a5a 100644 --- a/apps/web/src/views/Activity/Activity.tsx +++ b/apps/web/src/views/Activity/Activity.tsx @@ -6,8 +6,9 @@ import { type UIEvent, useRef } from "react"; import loadingDots from "../../assets/loading-dots.gif"; import loadingWheel from "../../assets/loading-wheel.gif"; -import { EmptyMessage, VerifyMessage } from "../../components/EmptyMessage"; -import { useIsAccountVerified } from "../../components/Onboarding/useIsAccountVerified"; +import { EmptyMessage } from "../../components/EmptyMessage"; +import { VerifyMessage } from "../../components/Onboarding/VerificationFlow"; +import { useIsAccountVerified } from "../../components/Onboarding/VerificationFlow/useIsAccountVerified"; import { OperationTile } from "../../components/OperationTile"; import { ViewOverlay } from "../../components/ViewOverlay/ViewOverlay"; import { useColor } from "../../styles/useColor"; diff --git a/apps/web/src/views/NFTs/NFTs.tsx b/apps/web/src/views/NFTs/NFTs.tsx index 12d48d805d..6ac12582a5 100644 --- a/apps/web/src/views/NFTs/NFTs.tsx +++ b/apps/web/src/views/NFTs/NFTs.tsx @@ -7,8 +7,9 @@ import { range } from "lodash"; import { NFTCard } from "./NFTCard"; import { NFTDrawer } from "./NFTDrawer"; import { NFTFilter, useNFTFilter } from "./NFTFilter"; -import { EmptyMessage, VerifyMessage } from "../../components/EmptyMessage"; -import { useIsAccountVerified } from "../../components/Onboarding/useIsAccountVerified"; +import { EmptyMessage } from "../../components/EmptyMessage"; +import { VerifyMessage } from "../../components/Onboarding/VerificationFlow"; +import { useIsAccountVerified } from "../../components/Onboarding/VerificationFlow/useIsAccountVerified"; import { ViewOverlay } from "../../components/ViewOverlay/ViewOverlay"; import { useColor } from "../../styles/useColor"; diff --git a/apps/web/src/views/Tokens/Tokens.tsx b/apps/web/src/views/Tokens/Tokens.tsx index b3c0e854c8..5c9f167957 100644 --- a/apps/web/src/views/Tokens/Tokens.tsx +++ b/apps/web/src/views/Tokens/Tokens.tsx @@ -3,8 +3,9 @@ import { fullId } from "@umami/core"; import { useCurrentAccount, useGetAccountAllTokens } from "@umami/state"; import { Token } from "./Token"; -import { EmptyMessage, VerifyMessage } from "../../components/EmptyMessage"; -import { useIsAccountVerified } from "../../components/Onboarding/useIsAccountVerified"; +import { EmptyMessage } from "../../components/EmptyMessage"; +import { useIsAccountVerified } from "../../components/Onboarding/VerificationFlow/useIsAccountVerified"; +import { VerifyMessage } from "../../components/Onboarding/VerificationFlow/VerifyMessage"; import { ViewOverlay } from "../../components/ViewOverlay/ViewOverlay"; export const Tokens = () => {