-
Notifications
You must be signed in to change notification settings - Fork 132
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "feat: add back up secret key page"
This reverts commit cdb3fbd.
- Loading branch information
Showing
14 changed files
with
136 additions
and
200 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: 38 additions & 100 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,108 +1,46 @@ | ||
import { cx } from '@emotion/css'; | ||
import { FiEyeOff, FiLock, FiRotateCcw } from 'react-icons/fi'; | ||
import { Box, Button, color, Flex, Stack } from '@stacks/ui'; | ||
import { Button, Stack } from '@stacks/ui'; | ||
|
||
import { Caption, Text, Title } from '@app/components/typography'; | ||
import { Text, Title } from '@app/components/typography'; | ||
import { Link } from '@app/components/link'; | ||
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'; | ||
import { getViewMode } from '@app/common/utils'; | ||
|
||
import { | ||
fullPageContentText, | ||
fullPageTitle, | ||
popupContentText, | ||
popupTitle, | ||
} from './back-up-secret-key.styles'; | ||
|
||
interface BackUpSecretKeyLayoutProps { | ||
hasCopied: boolean; | ||
onBackedUpSecretKey(): void; | ||
onCopyToClipboard(): void; | ||
secretKey: string | undefined; | ||
} | ||
interface BackUpSecretKeyLayoutProps {} | ||
export function BackUpSecretKeyLayout(props: BackUpSecretKeyLayoutProps): JSX.Element { | ||
const { hasCopied, onBackedUpSecretKey, onCopyToClipboard, secretKey } = props; | ||
useRouteHeader(<Header hideActions />); | ||
const mode = getViewMode(); | ||
|
||
return ( | ||
<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> | ||
<>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> | ||
); | ||
} |
21 changes: 0 additions & 21 deletions
21
src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.styles.tsx
This file was deleted.
Oops, something went wrong.
26 changes: 1 addition & 25 deletions
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,31 +1,7 @@ | ||
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(() => { | ||
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} | ||
/> | ||
); | ||
return <BackUpSecretKeyLayout />; | ||
}); |
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,66 +1,68 @@ | ||
import { cx } from '@emotion/css'; | ||
import { Flex, Button, Stack } from '@stacks/ui'; | ||
import { css, cx } from '@emotion/css'; | ||
import { 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 { isFullPage, isPopup } from '@app/common/utils'; | ||
import { OnboardingSelectors } from '@tests/integration/onboarding.selectors'; | ||
import { InitialPageSelectors } from '@tests/integration/initial-page.selectors'; | ||
import { getViewMode } from '@app/common/utils'; | ||
|
||
import { fullPageContentText, fullPageTitle, popupContentText, popupTitle } from './welcome.styles'; | ||
import { | ||
fullPageContentImage, | ||
fullPageContentText, | ||
fullPageTitle, | ||
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%"> | ||
<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 })} | ||
<Stack className={cx({ [fullPageContentImage]: isFullPage })} flexGrow={1}> | ||
{isFullPage ? <img src={WelcomeStacksFull} /> : <img src={WelcomeStacksPopup} />} | ||
</Stack> | ||
<Stack | ||
className={cx({ [fullPageContentText]: isFullPage })} | ||
flexGrow={1} | ||
justifyContent="center" | ||
> | ||
<Stack maxWidth="500px" spacing="loose"> | ||
<Stack width="100%" textAlign="left" alignItems="start"> | ||
<Title | ||
className={cx({ [fullPageTitle]: isFullPage }, { [popupTitle]: isPopup })} | ||
fontWeight={500} | ||
> | ||
Explore the world of Stacks | ||
</Title> | ||
<Text> | ||
<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={OnboardingSelectors.SignUpBtn} | ||
data-testid={InitialPageSelectors.SignUp} | ||
height="48px" | ||
isLoading={isGeneratingWallet} | ||
onClick={onStartOnboarding} | ||
width="198px" | ||
> | ||
Create Stacks Account | ||
</Button> | ||
<Link | ||
data-testid={OnboardingSelectors.SignInLink} | ||
fontSize="14px" | ||
onClick={onRestoreWallet} | ||
> | ||
<Link data-testid={InitialPageSelectors.SignIn} fontSize="14px" onClick={onRestoreWallet}> | ||
I already have an account | ||
</Link> | ||
</Stack> | ||
</Flex> | ||
</Stack> | ||
</Stack> | ||
); | ||
} |
Oops, something went wrong.