Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: replace typography with text component in review recovery phrase #25265

Merged
merged 9 commits into from
Jul 24, 2024
Merged

refactor: replace typography with text component in review recovery phrase #25265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e16fa59
Update review-recovery-phrase.js wrt latest mappings
Devin-Apps Jun 12, 2024
173785f
update snapshots
Devin-Apps Jun 12, 2024
6ee13f6
Merge branch 'develop' into devin/typography-reviewrecov
Devin-Apps Jun 12, 2024
8bf199d
Removed deprecated box and used component-library version
Devin-Apps Jun 13, 2024
eeac091
Fixed import of Box
devin-ai-integration[bot] Jun 27, 2024
2556187
Merge branch 'develop' into devin/typography-reviewrecov
Devin-Apps Jun 27, 2024
b166f71
Updated snapshots
devin-ai-integration[bot] Jun 27, 2024
768852a
Merge branch 'devin/typography-reviewrecov' of https://github.com/Dev…
devin-ai-integration[bot] Jun 27, 2024
2c58e27
Minor fixes
Devin-Apps Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,50 +30,50 @@ exports[`Review Recovery Phrase Component should match snapshot 1`] = `
</ul>
</div>
<div
class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-center mm-box--text-align-center"
>
<h2
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography recovery-phrase__header typography--h2 typography--weight-bold typography--style-normal typography--color-text-default"
class="mm-box mm-text recovery-phrase__header mm-text--heading-lg mm-text--font-weight-bold mm-box--color-text-default"
>
Write down your Secret Recovery Phrase
</h2>
</div>
<div
class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-center mm-box--text-align-center"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
>
Write down this 12-word Secret Recovery Phrase and save it in a place that you trust and only you can access.
</h4>
</div>
<div
class="box recovery-phrase__tips box--margin-bottom-4 box--flex-direction-row box--text-align-left"
class="mm-box recovery-phrase__tips mm-box--margin-bottom-4 mm-box--text-align-left"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-box--color-text-default"
>
Tips
:
</h4>
<ul>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
>
Save in a password manager
</h4>
</li>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
>
Store in a safe deposit box
</h4>
</li>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
>
Write down and store in multiple secret places
</h4>
Expand Down Expand Up @@ -326,50 +326,50 @@ exports[`Review Recovery Phrase Component should match snapshot after reveal rec
</ul>
</div>
<div
class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-center mm-box--text-align-center"
>
<h2
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography recovery-phrase__header typography--h2 typography--weight-bold typography--style-normal typography--color-text-default"
class="mm-box mm-text recovery-phrase__header mm-text--heading-lg mm-text--font-weight-bold mm-box--color-text-default"
>
Write down your Secret Recovery Phrase
</h2>
</div>
<div
class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-center mm-box--text-align-center"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
>
Write down this 12-word Secret Recovery Phrase and save it in a place that you trust and only you can access.
</h4>
</div>
<div
class="box recovery-phrase__tips box--margin-bottom-4 box--flex-direction-row box--text-align-left"
class="mm-box recovery-phrase__tips mm-box--margin-bottom-4 mm-box--text-align-left"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-box--color-text-default"
>
Tips
:
</h4>
<ul>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
>
Save in a password manager
</h4>
</li>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
>
Store in a safe deposit box
</h4>
</li>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
>
Write down and store in multiple secret places
</h4>
Expand Down
61 changes: 34 additions & 27 deletions ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
import React, { useState, useContext } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import PropTypes from 'prop-types';
import Box from '../../../components/ui/box';
import Button from '../../../components/ui/button';
import Typography from '../../../components/ui/typography';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { ONBOARDING_CONFIRM_SRP_ROUTE } from '../../../helpers/constants/routes';
import {
TEXT_ALIGN,
TypographyVariant,
Text,
Icon,
IconName,
Box,
} from '../../../components/component-library';
import {
TextVariant,
TextAlign,
JustifyContent,
FONT_WEIGHT,
FontWeight,
IconColor,
} from '../../../helpers/constants/design-system';
import {
Expand All @@ -23,7 +27,6 @@ import {
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { Icon, IconName } from '../../../components/component-library';
import RecoveryPhraseChips from './recovery-phrase-chips';

export default function RecoveryPhrase({ secretRecoveryPhrase }) {
Expand All @@ -44,52 +47,56 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
<ThreeStepProgressBar stage={threeStepStages.RECOVERY_PHRASE_REVIEW} />
<Box
justifyContent={JustifyContent.center}
textAlign={TEXT_ALIGN.CENTER}
textAlign={TextAlign.Center}
marginBottom={4}
>
<Typography
variant={TypographyVariant.H2}
fontWeight={FONT_WEIGHT.BOLD}
<Text
variant={TextVariant.headingLg}
fontWeight={FontWeight.Bold}
className="recovery-phrase__header"
>
{t('seedPhraseWriteDownHeader')}
</Typography>
</Text>
</Box>
<Box
justifyContent={JustifyContent.center}
textAlign={TEXT_ALIGN.CENTER}
textAlign={TextAlign.Center}
marginBottom={4}
>
<Typography variant={TypographyVariant.H4}>
<Text variant={TextVariant.headingSm} fontWeight={FontWeight.Normal}>
{t('seedPhraseWriteDownDetails')}
</Typography>
</Text>
</Box>
<Box
textAlign={TEXT_ALIGN.LEFT}
textAlign={TextAlign.Left}
marginBottom={4}
className="recovery-phrase__tips"
>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('tips')}:
</Typography>
<Text variant={TextVariant.headingSm}>{t('tips')}:</Text>
<ul>
<li>
<Typography variant={TypographyVariant.H4}>
<Text
variant={TextVariant.headingSm}
fontWeight={FontWeight.Normal}
>
{t('seedPhraseIntroSidebarBulletOne')}
</Typography>
</Text>
</li>
<li>
<Typography variant={TypographyVariant.H4}>
<Text
variant={TextVariant.headingSm}
fontWeight={FontWeight.Normal}
>
{t('seedPhraseIntroSidebarBulletThree')}
</Typography>
</Text>
</li>
<li>
<Typography variant={TypographyVariant.H4}>
<Text
variant={TextVariant.headingSm}
fontWeight={FontWeight.Normal}
>
{t('seedPhraseIntroSidebarBulletFour')}
</Typography>
</Text>
</li>
</ul>
</Box>
Expand Down