-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
200 additions
and
136 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
138 changes: 100 additions & 38 deletions
138
src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,108 @@ | ||
| import { Button, Stack } from '@stacks/ui'; | ||
| import { cx } from '@emotion/css'; | ||
| import { FiEyeOff, FiLock, FiRotateCcw } from 'react-icons/fi'; | ||
| import { Box, Button, color, Flex, Stack } from '@stacks/ui'; | ||
|
|
||
| import { Text, Title } from '@app/components/typography'; | ||
| import { Caption, Text, Title } from '@app/components/typography'; | ||
| import { Link } from '@app/components/link'; | ||
| import { getViewMode } from '@app/common/utils'; | ||
| import { isFullPage, isPopup } from '@app/common/utils'; | ||
| import KeyIllustrationFull from '@assets/images/onboarding/key-illustration-full.svg'; | ||
| import KeyIllustrationPopup from '@assets/images/onboarding/key-illustration-popup.svg'; | ||
| import SecretKey from '@assets/images/onboarding/secret-key.svg'; | ||
| import { useRouteHeader } from '@app/common/hooks/use-route-header'; | ||
| import { Header } from '@app/components/header'; | ||
|
|
||
| interface BackUpSecretKeyLayoutProps {} | ||
| import { | ||
| fullPageContentText, | ||
| fullPageTitle, | ||
| popupContentText, | ||
| popupTitle, | ||
| } from './back-up-secret-key.styles'; | ||
|
|
||
| interface BackUpSecretKeyLayoutProps { | ||
| hasCopied: boolean; | ||
| onBackedUpSecretKey(): void; | ||
| onCopyToClipboard(): void; | ||
| secretKey: string | undefined; | ||
| } | ||
| export function BackUpSecretKeyLayout(props: BackUpSecretKeyLayoutProps): JSX.Element { | ||
| const mode = getViewMode(); | ||
| const { hasCopied, onBackedUpSecretKey, onCopyToClipboard, secretKey } = props; | ||
| useRouteHeader(<Header hideActions />); | ||
|
|
||
| return ( | ||
| <>Placeholder</> | ||
| // <Stack className="welcome-page" isInline={mode === 'full'} width="100%"> | ||
| // <Stack className="content-image" flexGrow={1}> | ||
| // <img src={ExploreStacksLarge} className="image-large" /> | ||
| // <img src={ExploreStacksSmall} className="image-small" /> | ||
| // </Stack> | ||
| // <Stack className="content-text" flexGrow={1} justifyContent="center"> | ||
| // <Stack width="100%" textAlign="left" alignItems="start"> | ||
| // <Title className="title" fontWeight={500}> | ||
| // Explore the world of Stacks | ||
| // </Title> | ||
| // <Text className="text"> | ||
| // Hiro Wallet connects you to Stacks apps while keeping your account, data, and crypto | ||
| // secure. Create your Stacks account to get started. | ||
| // </Text> | ||
| // </Stack> | ||
| // <Stack spacing="loose" textAlign="left" {...props}> | ||
| // <Button | ||
| // borderRadius="10px" | ||
| // data-testid={InitialPageSelectors.SignUp} | ||
| // height="48px" | ||
| // isLoading={isGeneratingWallet} | ||
| // onClick={onStartOnboarding} | ||
| // width="198px" | ||
| // > | ||
| // Create Stacks Account | ||
| // </Button> | ||
| // <Link data-testid={InitialPageSelectors.SignIn} fontSize="14px" onClick={onRestoreWallet}> | ||
| // I already have an account | ||
| // </Link> | ||
| // </Stack> | ||
| // </Stack> | ||
| // </Stack> | ||
| <Stack isInline={isFullPage} width="100%"> | ||
| <Flex | ||
| className={cx({ [fullPageContentText]: isFullPage }, { [popupContentText]: isPopup })} | ||
| flexGrow={1} | ||
| justifyContent="center" | ||
| > | ||
| <Stack maxWidth="440px" spacing="loose"> | ||
| <img src={SecretKey} width="135px" /> | ||
| <Title | ||
| className={cx({ [fullPageTitle]: isFullPage }, { [popupTitle]: isPopup })} | ||
| fontWeight={500} | ||
| > | ||
| Back up your Secret Key | ||
| </Title> | ||
| <Text> | ||
| Here’s your Secret Key: 24 words that generated your Stacks account. You’ll need it to | ||
| access your account on a new device, in a different wallet, or in case you lose your | ||
| password — so back it up somewhere safe. | ||
| </Text> | ||
| <Stack alignItems="center" isInline> | ||
| <Box as={FiRotateCcw} color={color('text-caption')} size="12px" /> | ||
| <Caption>Your Secret Key gives access to your account</Caption> | ||
| </Stack> | ||
| <Stack alignItems="center" isInline> | ||
| <Box as={FiEyeOff} color={color('text-caption')} size="12px" /> | ||
| <Caption>Never share your Secret Key</Caption> | ||
| </Stack> | ||
| <Stack alignItems="center" isInline> | ||
| <Box as={FiLock} color={color('text-caption')} size="12px" /> | ||
| <Caption>Put it somewhere private and secure</Caption> | ||
| </Stack> | ||
| <Stack alignItems={isFullPage ? 'center' : 'start'} isInline={isFullPage} spacing="loose"> | ||
| <Button | ||
| borderRadius="10px" | ||
| height="48px" | ||
| mr="24px !important" | ||
| onClick={onBackedUpSecretKey} | ||
| width="198px" | ||
| > | ||
| I've backed it up | ||
| </Button> | ||
| <Stack isInline alignItems="center"> | ||
| <Caption mr="4px !important">Or</Caption> | ||
| <Link fontSize="14px" onClick={() => {}}> | ||
| back it up later | ||
| </Link> | ||
| </Stack> | ||
| </Stack> | ||
| </Stack> | ||
| </Flex> | ||
| <Flex | ||
| className={cx({ [fullPageContentText]: isFullPage }, { [popupContentText]: isPopup })} | ||
| flexGrow={1} | ||
| justifyContent="center" | ||
| > | ||
| <Box | ||
| border="1px solid" | ||
| borderColor={color('border')} | ||
| borderRadius="16px" | ||
| height="484px" | ||
| width="432px" | ||
| > | ||
| <Stack alignItems="center" pt="80px" spacing="loose"> | ||
| {isFullPage ? <img src={KeyIllustrationFull} /> : <img src={KeyIllustrationPopup} />} | ||
| <Title fontSize="20px">Your Secret Key</Title> | ||
| <Text px="loose" textAlign="center"> | ||
| {secretKey} | ||
| </Text> | ||
| <Link fontSize="14px" onClick={!hasCopied ? onCopyToClipboard : undefined}> | ||
| {!hasCopied ? 'Copy to clipboard' : 'Copied!'} | ||
| </Link> | ||
| </Stack> | ||
| </Box> | ||
| </Flex> | ||
| </Stack> | ||
| ); | ||
| } |
21 changes: 21 additions & 0 deletions
21
src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.styles.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { css } from '@emotion/css'; | ||
|
|
||
| export const fullPageContentText = css` | ||
| align-items: center; | ||
| `; | ||
|
|
||
| export const fullPageTitle = css` | ||
| font-size: 48px; | ||
| line-height: 60px; | ||
| `; | ||
|
|
||
| export const popupContentText = css` | ||
| margin-top: 16px; | ||
| `; | ||
|
|
||
| export const popupTitle = css` | ||
| font-size: 32px; | ||
| line-height: 44px; | ||
| margin-bottom: 16px !important; | ||
| width: 264px; | ||
| `; |
26 changes: 25 additions & 1 deletion
26
src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,31 @@ | ||
| import { memo } from 'react'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { useClipboard } from '@stacks/ui'; | ||
|
|
||
| import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; | ||
| import { useWallet } from '@app/common/hooks/use-wallet'; | ||
| import { RouteUrls } from '@shared/route-urls'; | ||
|
|
||
| import { BackUpSecretKeyLayout } from './back-up-secret-key.layout'; | ||
|
|
||
| export const BackUpSecretKeyPage = memo(() => { | ||
| return <BackUpSecretKeyLayout />; | ||
| const { secretKey } = useWallet(); | ||
| const { onCopy, hasCopied } = useClipboard(secretKey || ''); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const analytics = useAnalytics(); | ||
|
|
||
| const copyToClipboard = () => { | ||
| void analytics.track('copy_secret_key_to_clipboard'); | ||
| onCopy(); | ||
| }; | ||
|
|
||
| return ( | ||
| <BackUpSecretKeyLayout | ||
| hasCopied={hasCopied} | ||
| onBackedUpSecretKey={() => navigate(RouteUrls.SetPassword)} | ||
| onCopyToClipboard={copyToClipboard} | ||
| secretKey={secretKey} | ||
| /> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,66 @@ | ||
| import { css, cx } from '@emotion/css'; | ||
| import { Button, Stack } from '@stacks/ui'; | ||
| import { cx } from '@emotion/css'; | ||
| import { Flex, Button, Stack } from '@stacks/ui'; | ||
|
|
||
| import { Text, Title } from '@app/components/typography'; | ||
| import { Link } from '@app/components/link'; | ||
| import WelcomeStacksFull from '@assets/images/onboarding/welcome-full.svg'; | ||
| import WelcomeStacksPopup from '@assets/images/onboarding/welcome-popup.svg'; | ||
| import { InitialPageSelectors } from '@tests/integration/initial-page.selectors'; | ||
| import { getViewMode } from '@app/common/utils'; | ||
| import { isFullPage, isPopup } from '@app/common/utils'; | ||
| import { OnboardingSelectors } from '@tests/integration/onboarding.selectors'; | ||
|
|
||
| import { | ||
| fullPageContentImage, | ||
| fullPageContentText, | ||
| fullPageTitle, | ||
| popupTitle, | ||
| } from './welcome.styles'; | ||
| import { fullPageContentText, fullPageTitle, popupContentText, popupTitle } from './welcome.styles'; | ||
| interface WelcomeLayoutProps { | ||
| isGeneratingWallet: boolean; | ||
| onStartOnboarding(): void; | ||
| onRestoreWallet(): void; | ||
| } | ||
| export function WelcomeLayout(props: WelcomeLayoutProps): JSX.Element { | ||
| const { isGeneratingWallet, onStartOnboarding, onRestoreWallet } = props; | ||
| const mode = getViewMode(); | ||
| const isFullPage = mode === 'full'; | ||
| const isPopup = mode === 'popup'; | ||
|
|
||
| return ( | ||
| <Stack isInline={isFullPage} width="100%"> | ||
| <Stack className={cx({ [fullPageContentImage]: isFullPage })} flexGrow={1}> | ||
| {isFullPage ? <img src={WelcomeStacksFull} /> : <img src={WelcomeStacksPopup} />} | ||
| </Stack> | ||
| <Stack | ||
| className={cx({ [fullPageContentText]: isFullPage })} | ||
| <Flex flexGrow={1} justifyContent="center" order={isFullPage ? 1 : 0}> | ||
| {isFullPage ? ( | ||
| <img src={WelcomeStacksFull} /> | ||
| ) : ( | ||
| <img src={WelcomeStacksPopup} width="394px" /> | ||
| )} | ||
| </Flex> | ||
| <Flex | ||
| className={cx({ [fullPageContentText]: isFullPage }, { [popupContentText]: isPopup })} | ||
| flexGrow={1} | ||
| justifyContent="center" | ||
| > | ||
| <Stack width="100%" textAlign="left" alignItems="start"> | ||
| <Stack maxWidth="500px" spacing="loose"> | ||
| <Title | ||
| className={cx({ [fullPageTitle]: isFullPage }, { [popupTitle]: isPopup })} | ||
| fontWeight={500} | ||
| > | ||
| Explore the world of Stacks | ||
| </Title> | ||
| <Text className="text"> | ||
| <Text> | ||
| Hiro Wallet connects you to Stacks apps while keeping your account, data, and crypto | ||
| secure. Create your Stacks account to get started. | ||
| </Text> | ||
| </Stack> | ||
| <Stack spacing="loose" textAlign="left" {...props}> | ||
| <Button | ||
| borderRadius="10px" | ||
| data-testid={InitialPageSelectors.SignUp} | ||
| data-testid={OnboardingSelectors.SignUpBtn} | ||
| height="48px" | ||
| isLoading={isGeneratingWallet} | ||
| onClick={onStartOnboarding} | ||
| width="198px" | ||
| > | ||
| Create Stacks Account | ||
| </Button> | ||
| <Link data-testid={InitialPageSelectors.SignIn} fontSize="14px" onClick={onRestoreWallet}> | ||
| <Link | ||
| data-testid={OnboardingSelectors.SignInLink} | ||
| fontSize="14px" | ||
| onClick={onRestoreWallet} | ||
| > | ||
| I already have an account | ||
| </Link> | ||
| </Stack> | ||
| </Stack> | ||
| </Flex> | ||
| </Stack> | ||
| ); | ||
| } |
Oops, something went wrong.