Skip to content

Commit

Permalink
chore(suite): update ReconnectDevicePromp to use NewModal component
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamhavel
adamhavel committed Oct 7, 2024
1 parent 6ee3980 commit 0e3aa62
Showing 1 changed file with 68 additions and 190 deletions.
258 changes: 68 additions & 190 deletions packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,137 +1,21 @@
import { ReactNode } from 'react';
import styled, { css } from 'styled-components';
import * as semver from 'semver';

import styled from 'styled-components';
import { getFirmwareVersion } from '@trezor/device-utils';
import { H2, Button, variables, DeviceAnimation } from '@trezor/components';
import { H2, DeviceAnimation, NewModal, Paragraph, List } from '@trezor/components';
import { DEVICE, Device, DeviceModelInternal, UI } from '@trezor/connect';
import { Modal, Translation, WebUsbButton } from 'src/components/suite';
import { Translation, WebUsbButton } from 'src/components/suite';
import { DeviceConfirmImage } from 'src/components/suite/DeviceConfirmImage';
import { useDevice, useFirmware, useSelector } from 'src/hooks/suite';
import { AbortButton } from 'src/components/suite/modals/AbortButton';
import { ConfirmOnDevice } from '@trezor/product-components';
import { TranslationKey } from '@suite-common/intl-types';
import { spacings } from '@trezor/theme';
import { selectDeviceLabelOrName } from '@suite-common/wallet-core';

const StyledModal = styled(Modal)`
width: 600px;
${Modal.Body} {
padding: 38px 22px 6px;
}
`;

const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
${variables.SCREEN_QUERY.MOBILE} {
flex-direction: column;
}
`;

const Content = styled.div`
display: flex;
flex-direction: column;
padding: 10px 14px;
margin-left: 24px;
`;

const BulletPointWrapper = styled.div`
const ImageWrapper = styled.div`
display: flex;
align-items: center;
& + & {
margin-top: 24px;
}
`;

const BulletPointNumber = styled.div<{ $active?: boolean }>`
display: flex;
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
justify-content: center;
align-items: center;
margin-right: 14px;
font-size: ${variables.FONT_SIZE.SMALL};
font-weight: ${variables.FONT_WEIGHT.MEDIUM};
color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
background: ${({ theme }) => theme.legacy.BG_GREY};
font-variant-numeric: tabular-nums;
${({ $active, theme }) =>
$active &&
css`
color: ${theme.legacy.TYPE_GREEN};
background: ${theme.legacy.BG_LIGHT_GREEN};
`}
`;

const BulletPointText = styled.span<{ $active?: boolean }>`
font-size: ${variables.FONT_SIZE.NORMAL};
font-weight: ${variables.FONT_WEIGHT.MEDIUM};
color: ${({ theme, $active }) =>
$active ? theme.legacy.TYPE_GREEN : theme.legacy.TYPE_LIGHT_GREY};
text-align: left;
`;

const CenteredPointText = styled(BulletPointText)`
text-align: center;
`;

// eslint-disable-next-line local-rules/no-override-ds-component
const StyledDeviceAnimation = styled(DeviceAnimation)`
flex: 0 0 220px;
width: 220px;
height: 220px;
${variables.SCREEN_QUERY.MOBILE} {
align-self: center;
}
`;

const StyledConfirmImage = styled(DeviceConfirmImage)`
flex: 0 0 200px;
width: 200px;
height: 200px;
`;

const StyledWebUsbButton = styled(WebUsbButton)`
margin-top: 24px;
`;

const StyledAbortButton = styled(AbortButton)`
position: absolute;
top: 12px;
right: 12px;
`;

interface ReconnectStepProps {
order?: number;
active: boolean;
children: ReactNode;
'data-testid'?: string;
}

const ReconnectStep = ({
order,
active,
'data-testid': dataTest,
children,
}: ReconnectStepProps) => (
<BulletPointWrapper>
{order && <BulletPointNumber $active={active}>{order}</BulletPointNumber>}

<BulletPointText $active={active} data-testid={active ? dataTest : undefined}>
{children}
</BulletPointText>
</BulletPointWrapper>
);

const RebootDeviceGraphics = ({
device,
isManualRebootRequired,
Expand All @@ -140,7 +24,7 @@ const RebootDeviceGraphics = ({
isManualRebootRequired: boolean;
}) => {
if (!isManualRebootRequired) {
return device ? <StyledConfirmImage device={device} /> : null;
return device ? <DeviceConfirmImage device={device} /> : null;
}

const deviceModelInternal = device?.features?.internal_model;
Expand All @@ -164,11 +48,10 @@ const RebootDeviceGraphics = ({
};

return (
<StyledDeviceAnimation
<DeviceAnimation
type={getRebootType()}
height="220px"
width="220px"
shape="ROUNDED"
deviceModelInternal={deviceModelInternal}
loop
/>
Expand Down Expand Up @@ -261,74 +144,69 @@ export const ReconnectDevicePrompt = ({ onClose, onSuccess }: ReconnectDevicePro
};

return (
<StyledModal
modalPrompt={
!isManualRebootRequired && (
<ConfirmOnDevice
title={<Translation id="TR_CONFIRM_ON_TREZOR" />}
deviceModelInternal={deviceModelInternal}
deviceUnitColor={device?.features?.unit_color}
isConfirmed={uiEvent?.type !== 'button'}
/>
)
}
>
{isAbortable && <StyledAbortButton onAbort={onClose} />}

<Wrapper data-testid="@firmware/reconnect-device">
<NewModal.Backdrop onClick={isAbortable ? onClose : undefined}>
{!isManualRebootRequired && !isRebootDone && (
<ConfirmOnDevice
title={<Translation id="TR_CONFIRM_ON_TREZOR" />}
deviceModelInternal={deviceModelInternal}
deviceUnitColor={device?.features?.unit_color}
isConfirmed={uiEvent?.type !== 'button'}
/>
)}
<NewModal.ModalBase
onCancel={isAbortable ? onClose : undefined}
data-testid="@firmware/reconnect-device"
size="tiny"
bottomContent={
isRebootDone && (
<NewModal.Button onClick={onSuccess} data-testid="@firmware/install-button">
<Translation id="TR_INSTALL" />
</NewModal.Button>
)
}
>
{!isRebootDone && (
<RebootDeviceGraphics
device={uiEvent?.payload.device}
isManualRebootRequired={isManualRebootRequired}
/>
<ImageWrapper>
<RebootDeviceGraphics
device={uiEvent?.payload.device}
isManualRebootRequired={isManualRebootRequired}
/>
</ImageWrapper>
)}

<Content>
<H2 margin={{ bottom: spacings.md }} align="center">
<Translation id={getHeading()} />
</H2>

{!isRebootDone ? (
<>
{isManualRebootRequired ? (
<>
{/* First step asks for disconnecting a device */}
<ReconnectStep
order={1}
active={rebootPhase !== 'disconnected'}
data-testid="@firmware/disconnect-message"
>
<Translation id="TR_DISCONNECT_YOUR_DEVICE" />
</ReconnectStep>

{/* Second step reconnect in bootloader */}
<ReconnectStep
order={2}
active={rebootPhase === 'disconnected'}
data-testid="@firmware/connect-in-bootloader-message"
>
<Translation id={getSecondStep()} />
</ReconnectStep>
</>
) : (
<CenteredPointText>
<Translation
id="TR_CONFIRM_ACTION_ON_YOUR"
values={{ deviceLabel }}
/>
</CenteredPointText>
)}
{showWebUsbButton && <StyledWebUsbButton />}
</>
) : (
<>
<Button onClick={onSuccess} data-testid="@firmware/install-button">
<Translation id="TR_INSTALL" />
</Button>
</>
)}
</Content>
</Wrapper>
</StyledModal>
<H2 align="center">
<Translation id={getHeading()} />
</H2>
{!isRebootDone && (
<>
{isManualRebootRequired ? (
<List isOrdered margin={{ top: spacings.md }}>
{/* First step asks for disconnecting a device */}
<List.Item data-testid="@firmware/disconnect-message">
<Translation id="TR_DISCONNECT_YOUR_DEVICE" />
</List.Item>

{/* Second step reconnect in bootloader */}
<List.Item data-testid="@firmware/connect-in-bootloader-message">
<Translation id={getSecondStep()} />
</List.Item>
</List>
) : (
<Paragraph
typographyStyle="hint"
variant="tertiary"
align="center"
margin={{ top: spacings.xs }}
>
<Translation
id="TR_CONFIRM_ACTION_ON_YOUR"
values={{ deviceLabel }}
/>
</Paragraph>
)}
{showWebUsbButton && <WebUsbButton />}
</>
)}
</NewModal.ModalBase>
</NewModal.Backdrop>
);
};

0 comments on commit 0e3aa62

Please sign in to comment.