Skip to content

Commit

Permalink
fix(suite): Add translations
Browse files Browse the repository at this point in the history
  • Loading branch information
@jvaclavik
jvaclavik committed May 13, 2024
1 parent 4965f5a commit 0a014fd
Show file tree
Hide file tree
Showing 5 changed files with 248 additions and 139 deletions.
2 changes: 1 addition & 1 deletion ...es/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DeviceContextModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ export const DeviceContextModal = ({
data,
}: ReduxModalProps<typeof MODAL.CONTEXT_DEVICE>) => {
const device = useSelector(selectDevice);
const intl = useIntl();
const { isViewOnlyModeVisible } = useSelector(selectSuiteFlags);
const intl = useIntl();

if (!device) return null;

Expand Down
13 changes: 10 additions & 3 deletions ...suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseDescription.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
import { Icon, Text } from '@trezor/components';
import { PassphraseList, PassphraseItem } from './PassphraseList';
import { Translation } from 'src/components/suite/Translation';

export const PassphraseDescription = () => {
return (
<PassphraseList>
<PassphraseItem>
<Icon icon="INFO" size={16} />
<Text>Important to first learn how passphrase works</Text>
<Text>
<Translation id="TR_PASSPHRASE_DESCRIPTION_ITEM1" />
</Text>
</PassphraseItem>
<PassphraseItem>
<Icon icon="ASTERISK" size={16} />
<Text>Passphrase opens a wallet secured by that phrase</Text>
<Text>
<Translation id="TR_PASSPHRASE_DESCRIPTION_ITEM2" />
</Text>
</PassphraseItem>
<PassphraseItem>
<Icon icon="WARNING" size={16} />
<Text>No one can recover it, not even Trezor support</Text>
<Text>
<Translation id="TR_PASSPHRASE_DESCRIPTION_ITEM3" />
</Text>
</PassphraseItem>
</PassphraseList>
);
Expand Down
293 changes: 159 additions & 134 deletions ...rc/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TrezorDevice } from '@suite-common/suite-types';
import { AcquiredDevice, TrezorDevice } from '@suite-common/suite-types';
import {
Button,
Card,
Expand All @@ -16,164 +16,189 @@ import { CardWithDevice } from 'src/views/suite/SwitchDevice/CardWithDevice';
import { SwitchDeviceRenderer } from 'src/views/suite/SwitchDevice/SwitchDeviceRenderer';
import { PassphraseList, PassphraseItem } from './PassphraseList';
import { PassphraseHeading } from './PassphraseHeading';
import { HELP_CENTER_PASSPHRASE_URL } from '@trezor/urls';
import { TrezorLink } from 'src/components/suite/TrezorLink';
import { useDispatch } from 'src/hooks/suite';

interface PassphraseWalletConfirmationProps {
onCancel: () => void;
type ContentType = 'step1' | 'step2' | 'step3';

type PassphraseWalletConfirmationContentProps = {
authConfirmation?: boolean;
onSubmit: (value: string, passphraseOnDevice?: boolean) => void;
onDeviceOffer: boolean;
device: TrezorDevice;
}
onCancel: () => void;
};

type ContentType = 'step1' | 'step2' | 'step3';
type PassphraseWalletConfirmationProps = PassphraseWalletConfirmationContentProps & {
device: TrezorDevice;
};

export const PassphraseWalletConfirmation = ({
onCancel,
const PassphraseWalletConfirmationContent = ({
authConfirmation,
onSubmit,
onDeviceOffer,
device,
}: PassphraseWalletConfirmationProps) => {
onCancel,
}: PassphraseWalletConfirmationContentProps) => {
const [contentType, setContentType] = useState<ContentType>('step1');

const getContent = () => {
if (contentType === 'step1') {
return (
<>
<PassphraseHeading>This passphrase wallet is empty </PassphraseHeading>
<Rows gap={8}>
<Card
paddingType="small"
label={
<Columns justifyContent="space-between">
Learn how a passphrase works
// const dispatch = useDispatch();
if (contentType === 'step1') {
return (
<>
<PassphraseHeading>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_TITLE" />
</PassphraseHeading>
<Rows gap={8}>
<Card
paddingType="small"
label={
<Columns justifyContent="space-between">
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_HINT" />
<TrezorLink
type="hint"
variant="nostyle"
href={HELP_CENTER_PASSPHRASE_URL}
>
<Button
size="tiny"
variant="info"
iconAlignment="right"
icon="EXTERNAL_LINK"
>
Go
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_HINT_LINK" />
</Button>
</Columns>
}
>
<Rows gap={12}>
<Text typographyStyle="highlight">
Opening unused and knowingly empty passphrase wallet?
</Text>

<Button
isFullWidth
variant="primary"
onClick={() => {
setContentType('step2');
}}
>
Yes, open unused wallet
</Button>
</Rows>
</Card>
<Card paddingType="small">
<Rows gap={12}>
<Text typographyStyle="highlight">
Expecting passphrase wallet with funds?
</Text>
<Button isFullWidth variant="tertiary">
Try again
</Button>
</Rows>
</Card>
</Rows>
</>
);
}
</TrezorLink>
</Columns>
}
>
<Rows gap={12}>
<Text typographyStyle="highlight">
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_UNUSED_WALLET_DESCRIPTION" />
</Text>

if (contentType === 'step2')
return (
<>
<PassphraseHeading>What to do with new passphrase?</PassphraseHeading>
<PassphraseList>
<PassphraseItem>
<Icon icon="NEWSPAPER" size={16} />
<Text>
Write your passphrase on a piece of paper and always keep it offline
(no photos, USB, internet)
<Button
isFullWidth
variant="primary"
onClick={() => {
setContentType('step2');
}}
>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_UNUSED_WALLET_BUTTON" />
</Button>
</Rows>
</Card>
<Card paddingType="small">
<Rows gap={12}>
<Text typographyStyle="highlight">
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_WITH_FUNDS_DESCRIPTION" />
</Text>
</PassphraseItem>
<PassphraseItem>
<Icon icon="COPY" size={16} />
<Text>Store it in a different place than your backup seed</Text>
</PassphraseItem>
<PassphraseItem>
<Icon icon="HIDE" size={16} />
<Text>Never share it with anyone, not even with Trezor support</Text>
</PassphraseItem>
</PassphraseList>
<Button
isFullWidth
variant="tertiary"
onClick={() => {
onCancel();
// dispatch(
// createDeviceInstance({ device: device as AcquiredDevice }),
// );
// dispatch(authorizeDevice());
}}
>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_WITH_FUNDS_BUTTON" />
</Button>
</Rows>
</Card>
</Rows>
</>
);
}

<Warning>No one can recover it, not even Trezor support</Warning>
<Button
isFullWidth
variant="tertiary"
onClick={() => {
setContentType('step3');
}}
margin={{ top: 12 }}
>
Got it, continue
</Button>
</>
);
if (contentType === 'step2')
return (
<>
<PassphraseHeading>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP2_TITLE" />
</PassphraseHeading>
<PassphraseList>
<PassphraseItem>
<Icon icon="NEWSPAPER" size={16} />
<Text>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP2_ITEM1_DESCRIPTION" />
</Text>
</PassphraseItem>
<PassphraseItem>
<Icon icon="COPY" size={16} />
<Text>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP2_ITEM2_DESCRIPTION" />
</Text>
</PassphraseItem>
<PassphraseItem>
<Icon icon="HIDE" size={16} />
<Text>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP2_ITEM3_DESCRIPTION" />
</Text>
</PassphraseItem>
</PassphraseList>

if (contentType === 'step3')
return (
<>
<PassphraseHeading>Confirm passphrase</PassphraseHeading>
<Warning icon="INFO">
Create an offline backup of your passphrase. It is irrecoverable, even by
Trezor support.
</Warning>
<PassphraseTypeCard
type="hidden"
authConfirmation={authConfirmation}
submitLabel={<Translation id="TR_CONFIRM_PASSPHRASE" />}
offerPassphraseOnDevice={onDeviceOffer}
onSubmit={onSubmit}
singleColModal
learnMoreTooltipOnClick={
<OpenGuideFromTooltip
dataTest="@tooltip/guideAnchor"
id="/1_initialize-and-secure-your-trezor/6_passphrase.md"
/>
}
/>
</>
);
};
<Warning>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP2_WARNING" />
</Warning>
<Button
isFullWidth
variant="tertiary"
onClick={() => {
setContentType('step3');
}}
margin={{ top: 12 }}
>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP2_BUTTON" />
</Button>
</>
);

if (contentType === 'step3')
return (
<>
<PassphraseHeading>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP3_TITLE" />
</PassphraseHeading>
<Warning icon="INFO">
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP3_WARNING" />
</Warning>
<PassphraseTypeCard
type="hidden"
authConfirmation={authConfirmation}
submitLabel={<Translation id="TR_CONFIRM_PASSPHRASE" />}
offerPassphraseOnDevice={onDeviceOffer}
onSubmit={onSubmit}
singleColModal
learnMoreTooltipOnClick={
<OpenGuideFromTooltip
dataTest="@tooltip/guideAnchor"
id="/1_initialize-and-secure-your-trezor/6_passphrase.md"
/>
}
/>
</>
);

return null;
};

export const PassphraseWalletConfirmation = ({
onCancel,
authConfirmation,
onSubmit,
onDeviceOffer,
device,
}: PassphraseWalletConfirmationProps) => {
return (
<SwitchDeviceRenderer isCancelable onCancel={onCancel}>
{/* <TinyModal
heading={
!authConfirmation ? (
<Translation id="TR_ENTER_PASSPHRASE" />
) : (
<Translation id="TR_CONFIRM_EMPTY_HIDDEN_WALLET" />
)
}
isCancelable
onCancel={onCancel}
onBackClick={authConfirmation ? onRecreate : undefined}
description={
!authConfirmation ? (
<Translation id="TR_UNLOCK" />
) : (
<Translation id="TR_THIS_HIDDEN_WALLET_IS_EMPTY" />
)
}
> */}
<CardWithDevice onCancel={onCancel} device={device}>
{getContent()}
<PassphraseWalletConfirmationContent
authConfirmation={authConfirmation}
onSubmit={onSubmit}
onDeviceOffer={onDeviceOffer}
onCancel={onCancel}
/>
</CardWithDevice>
</SwitchDeviceRenderer>
);
Expand Down
Loading

0 comments on commit 0a014fd

Please sign in to comment.