Skip to content

Commit

Permalink
refactor(suite): Refactor passphrase-related components (#16433)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jvaclavik
jvaclavik authored Jan 28, 2025
1 parent 7456dc6 commit 91189b3
Showing 1 changed file with 99 additions and 91 deletions.
190 changes: 99 additions & 91 deletions packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,98 @@ export const PassphraseModal = ({ device }: PassphraseModalProps) => {
[dispatch],
);

const PassphraseDefaultForm = () => (
<SwitchDeviceModal isAnimationEnabled onCancel={onEnterPassphraseDialogCancel}>
<CardWithDevice
onCancel={onEnterPassphraseDialogCancel}
device={device}
onBackButtonClick={onEnterPassphraseDialogBack}
isFullHeaderVisible
>
<Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
<H3>
<Translation id="TR_PASSPHRASE_HIDDEN_WALLET" />
</H3>
<List gap={spacings.sm} bulletGap={spacings.md} typographyStyle="hint">
<List.Item bulletComponent={<Icon name="info" size={16} />}>
<Translation
id="TR_PASSPHRASE_DESCRIPTION_ITEM1"
values={{
a: chunks => (
<TrezorLink
target="_blank"
variant="underline"
typographyStyle="hint"
href={HELP_CENTER_PASSPHRASE_URL}
>
{chunks}
</TrezorLink>
),
}}
/>
</List.Item>
<List.Item bulletComponent={<Icon name="asterisk" size={16} />}>
<Translation id="TR_PASSPHRASE_DESCRIPTION_ITEM2" />
</List.Item>
<List.Item bulletComponent={<Icon name="warningTriangle" size={16} />}>
<Translation id="TR_PASSPHRASE_DESCRIPTION_ITEM3" />
</List.Item>
</List>
<PassphraseTypeCard
submitLabel={<Translation id="TR_ACCESS_HIDDEN_WALLET" />}
type="hidden"
singleColModal
offerPassphraseOnDevice={onDeviceOffer}
onSubmit={onSubmit}
deviceModel={deviceModel ?? undefined}
deviceBackup={device.features?.backup_type}
learnMoreTooltipOnClick={
<OpenGuideFromTooltip
data-testid="@tooltip/guideAnchor"
id="/1_initialize-and-secure-your-trezor/6_passphrase.md"
/>
}
/>
</Column>
</CardWithDevice>
</SwitchDeviceModal>
);

const ConfirmPassphraseBeforeAction = () => (
<SwitchDeviceModal isAnimationEnabled onCancel={onEnterPassphraseDialogCancel}>
<CardWithDevice
onCancel={onEnterPassphraseDialogCancel}
device={device}
isFullHeaderVisible
icon="x"
>
<Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
<H3>
<Translation id="TR_CONFIRM_PASSPHRASE" />
</H3>
<Paragraph>
<Translation id="TR_CONFIRM_PASSPHRASE_WITHOUT_ADVICE_DESCRIPTION" />
</Paragraph>
<PassphraseTypeCard
submitLabel={<Translation id="TR_CONFIRM" />}
type="hidden"
singleColModal
offerPassphraseOnDevice={onDeviceOffer}
onSubmit={onSubmit}
deviceModel={deviceModel ?? undefined}
deviceBackup={device.features?.backup_type}
learnMoreTooltipOnClick={
<OpenGuideFromTooltip
data-testid="@tooltip/guideAnchor"
id="/1_initialize-and-secure-your-trezor/6_passphrase.md"
/>
}
/>
</Column>
</CardWithDevice>
</SwitchDeviceModal>
);

// passphrase needs to be confirmed because wallet is empty
if (authConfirmation) {
return (
Expand All @@ -77,95 +169,11 @@ export const PassphraseModal = ({ device }: PassphraseModalProps) => {
);
}

return (
<SwitchDeviceModal isAnimationEnabled onCancel={onEnterPassphraseDialogCancel}>
{hasDeviceState ? (
// "view-only" is active, device is reconnected and you fired an action that needs passphrase (e.g. add coin, show receive address)
<CardWithDevice
onCancel={onEnterPassphraseDialogCancel}
device={device}
isFullHeaderVisible
icon="x"
>
<Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
<H3>
<Translation id="TR_CONFIRM_PASSPHRASE" />
</H3>
<Paragraph>
<Translation id="TR_CONFIRM_PASSPHRASE_WITHOUT_ADVICE_DESCRIPTION" />
</Paragraph>
<PassphraseTypeCard
submitLabel={<Translation id="TR_CONFIRM" />}
type="hidden"
singleColModal
offerPassphraseOnDevice={onDeviceOffer}
onSubmit={onSubmit}
deviceModel={deviceModel ?? undefined}
deviceBackup={device.features?.backup_type}
learnMoreTooltipOnClick={
<OpenGuideFromTooltip
data-testid="@tooltip/guideAnchor"
id="/1_initialize-and-secure-your-trezor/6_passphrase.md"
/>
}
/>
</Column>
</CardWithDevice>
) : (
// first step of adding passphrase wallet from switch device modal
<CardWithDevice
onCancel={onEnterPassphraseDialogCancel}
device={device}
onBackButtonClick={onEnterPassphraseDialogBack}
isFullHeaderVisible
>
<Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
<H3>
<Translation id="TR_PASSPHRASE_HIDDEN_WALLET" />
</H3>
<List gap={spacings.sm} bulletGap={spacings.md} typographyStyle="hint">
<List.Item bulletComponent={<Icon name="info" size={16} />}>
<Translation
id="TR_PASSPHRASE_DESCRIPTION_ITEM1"
values={{
a: chunks => (
<TrezorLink
target="_blank"
variant="underline"
typographyStyle="hint"
href={HELP_CENTER_PASSPHRASE_URL}
>
{chunks}
</TrezorLink>
),
}}
/>
</List.Item>
<List.Item bulletComponent={<Icon name="asterisk" size={16} />}>
<Translation id="TR_PASSPHRASE_DESCRIPTION_ITEM2" />
</List.Item>
<List.Item bulletComponent={<Icon name="warningTriangle" size={16} />}>
<Translation id="TR_PASSPHRASE_DESCRIPTION_ITEM3" />
</List.Item>
</List>
<PassphraseTypeCard
submitLabel={<Translation id="TR_ACCESS_HIDDEN_WALLET" />}
type="hidden"
singleColModal
offerPassphraseOnDevice={onDeviceOffer}
onSubmit={onSubmit}
deviceModel={deviceModel ?? undefined}
deviceBackup={device.features?.backup_type}
learnMoreTooltipOnClick={
<OpenGuideFromTooltip
data-testid="@tooltip/guideAnchor"
id="/1_initialize-and-secure-your-trezor/6_passphrase.md"
/>
}
/>
</Column>
</CardWithDevice>
)}
</SwitchDeviceModal>
);
// "view-only" is active, device is reconnected and you fired an action that needs passphrase (e.g. add coin, show receive address)
if (hasDeviceState) {
return <ConfirmPassphraseBeforeAction />;
}

// first step of adding passphrase wallet from switch device modal
return <PassphraseDefaultForm />;
};

0 comments on commit 91189b3

Please sign in to comment.