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

Jump to bottom

Add localization for onboarding flow Ledger Live warning screen #532

Merged
merged 2 commits into from
Jul 27, 2023
Merged

Add localization for onboarding flow Ledger Live warning screen #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ab73c1
Add localization for onboarding flow Ledger Live warning screen
dhriaznov Jul 26, 2023
f5a9069
Merge branch 'develop' into denys/eng-2484-add-localization-for-onboa…
yknl Jul 27, 2023
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
58 changes: 30 additions & 28 deletions src/app/screens/ledger/importLedgerAccount/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import ArrowLeftIconSVG from '@assets/img/ledger/arrow_left_icon.svg';
import LedgerFailView from '@components/ledger/failLedgerView';
import LedgerConnectionView from '../../../components/ledger/connectLedgerView';

// TODO: Add link to Ledger guide
const LINK_TO_LEDGER_ACCOUNT_ISSUE_GUIDE =
'https://support.xverse.app/hc/en-us/articles/17901278165773';
const LINK_TO_LEDGER_PASSPHRASE_GUIDE =
Expand Down Expand Up @@ -70,12 +69,12 @@ const ImportStartImage = styled.img((props) => ({
marginLeft: props.theme.spacing(0),
}));

const ImportStartContainer = styled.div((props) => ({
const ImportStartContainer = styled.div({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
maxWidth: '328px',
}));
});

const ImportBeforeStartContainer = styled.div((props) => ({
display: 'flex',
Expand Down Expand Up @@ -250,6 +249,7 @@ const ConfirmationStepsContainer = styled.div((props) => ({
}));

const OptionsContainer = styled.div((props) => ({
width: '100%',
marginTop: props.theme.spacing(16),
}));

Expand Down Expand Up @@ -748,82 +748,81 @@ function ImportLedger(): JSX.Element {
)}
{currentStepIndex === 0.5 && (
<ImportBeforeStartContainer>
<ImportBeforeStartTitle>Before getting started</ImportBeforeStartTitle>
<ImportBeforeStartTitle>
{t('LEDGER_BEFORE_GETTING_STARTED.TITLE')}
</ImportBeforeStartTitle>
<ImportBeforeStartText>
Do you use Ledger Live with the hardware wallet device you wish to connect?
{t('LEDGER_BEFORE_GETTING_STARTED.DESCRIPTION')}
</ImportBeforeStartText>
<OptionsContainer>
<Option
onClick={() => setSelectedLedgerLiveOption('using')}
selected={selectedLedgerLiveOption === 'using'}
>
<OptionIcon selected={selectedLedgerLiveOption === 'using'} />I use Ledger Live
with the device.
<OptionIcon selected={selectedLedgerLiveOption === 'using'} />
{t('LEDGER_BEFORE_GETTING_STARTED.OPTIONS.USE_LEDGER_LIVE')}
</Option>
<Option
onClick={() => setSelectedLedgerLiveOption('not using')}
selected={selectedLedgerLiveOption === 'not using'}
>
<OptionIcon selected={selectedLedgerLiveOption === 'not using'} />I do not use
Ledger Live with the device.
<OptionIcon selected={selectedLedgerLiveOption === 'not using'} />
{t('LEDGER_BEFORE_GETTING_STARTED.OPTIONS.DONT_USE_LEDGER_LIVE')}
</Option>
</OptionsContainer>
</ImportBeforeStartContainer>
)}
{currentStepIndex === 0.75 && (
<ImportBeforeStartContainer>
<WarningIcon src={warningIcon} alt="Warning" />
<ImportBeforeStartTitle>Important - Please read</ImportBeforeStartTitle>
<ImportBeforeStartTitle>
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.TITLE')}
</ImportBeforeStartTitle>
{selectedLedgerLiveOption === 'using' ? (
<ImportBeforeStartText>
It is not recommended to use Xverse and Ledger Live, or other Bitcoin wallets
with the same hardware device as this could lead to unintentional transfers of
Ordinals. <br />
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.TEXT_1')}
<br />
<CustomLink
href={LINK_TO_LEDGER_ACCOUNT_ISSUE_GUIDE}
target="_blank"
rel="noopener noreferrer"
>
Learn More
{t('LEARN_MORE')}
</CustomLink>
<br />
<br />
You should use a separate device for Xverse and Ordinals or set a passphrase on
your Ledger to create a different set of accounts for Xverse. See{' '}
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.TEXT_2')}{' '}
<CustomLink
href={LINK_TO_LEDGER_PASSPHRASE_GUIDE}
target="_blank"
rel="noopener noreferrer"
>
How To Set A Passphrase For Ordinals
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.PASSPHRASE_FOR_ORDINALS')}
</CustomLink>
.
<br />
<br />
{`Only continue if you're an advanced user and you know what you're doing. Do not
create and use a taproot address on Ledger Live if you are using Xverse.`}
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.TEXT_3')}
</ImportBeforeStartText>
) : (
<ImportBeforeStartText>
It is not recommended to use Xverse and Ledger Live, or other Bitcoin wallets
with the same device as this could lead to unintentional transfers of Ordinals.{' '}
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.TEXT_1')}{' '}
<CustomLink
href={LINK_TO_LEDGER_ACCOUNT_ISSUE_GUIDE}
target="_blank"
rel="noopener noreferrer"
>
Learn More
{t('LEARN_MORE')}
</CustomLink>
<br />
<br />
You should use a separate device for Xverse and Ordinals or set a passphrase on
your Ledger to create a different set of accounts for Xverse. See{' '}
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.TEXT_2')}{' '}
<CustomLink
href={LINK_TO_LEDGER_PASSPHRASE_GUIDE}
target="_blank"
rel="noopener noreferrer"
>
How To Set A Passphrase For Ordinals
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.PASSPHRASE_FOR_ORDINALS')}
</CustomLink>
.
</ImportBeforeStartText>
Expand All @@ -838,11 +837,14 @@ function ImportLedger(): JSX.Element {
checkedIcon={false}
/>
{selectedLedgerLiveOption === 'using' ? (
<TogglerText>I understand the risks and wish to continue anyway</TogglerText>
<TogglerText>
{t('LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.UNDERSTAND_THE_RISKS')}
</TogglerText>
) : (
<TogglerText>
I understand I should not use Ledger Live or other Bitcoin wallets with the
same hardware device
{t(
'LEDGER_BEFORE_GETTING_STARTED.IMPORTANT_WARNING.UNDERSTAND_SHOULD_NOT_USE_LEDGER_LIVE',
)}
</TogglerText>
)}
</TogglerContainer>
Expand Down
20 changes: 19 additions & 1 deletion src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,25 @@
"LEDGER_IMPORT_CLOSE_BUTTON": "Close",
"LEDGER_IMPORT_TRY_AGAIN_BUTTON": "Try again",
"LEDGER_IMPORT_YES_BUTTON": "Add a new account",
"LEDGER_IMPORT_CANCEL_BUTTON": "Cancel"
"LEDGER_IMPORT_CANCEL_BUTTON": "Cancel",
"LEARN_MORE": "Learn More",
"LEDGER_BEFORE_GETTING_STARTED": {
"TITLE": "Before getting started",
"DESCRIPTION": "Do you use Ledger Live with the hardware wallet device you wish to connect?",
"OPTIONS": {
"USE_LEDGER_LIVE": "I use Ledger Live with the device.",
"DONT_USE_LEDGER_LIVE": "I do not use Ledger Live with the device."
},
"IMPORTANT_WARNING": {
"TITLE": "Important - Please read",
"TEXT_1": "It is not recommended to use Xverse and Ledger Live, or other Bitcoin wallets with the same hardware device as this could lead to unintentional transfers of Ordinals.",
"TEXT_2": "You should use a separate device for Xverse and Ordinals or set a passphrase on your Ledger to create a different set of accounts for Xverse. See",
"TEXT_3": "Only continue if you're an advanced user and you know what you're doing. Do not create and use a taproot address on Ledger Live if you are using Xverse.",
"PASSPHRASE_FOR_ORDINALS": "How To Set A Passphrase For Ordinals",
"UNDERSTAND_THE_RISKS": "I understand the risks and wish to continue anyway",
"UNDERSTAND_SHOULD_NOT_USE_LEDGER_LIVE": "I understand I should not use Ledger Live or other Bitcoin wallets with the same hardware device"
}
}
},
"LEDGER_VERIFY_SCREEN": {
"TITLE_VERIFY_BTC": "Verify Bitcoin payment address",
Expand Down