Skip to content

Commit

Permalink
feat(suite): update modals to use NewModal component
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamhavel
adamhavel committed Sep 19, 2024
1 parent bd3c4d7 commit d120f3f
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 113 deletions.
54 changes: 23 additions & 31 deletions packages/suite/src/components/suite/modals/ReduxModal/CopyAddressModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
import styled from 'styled-components';
import { copyToClipboard } from '@trezor/dom-utils';
import { notificationsActions } from '@suite-common/toast-notifications';

import { Translation } from 'src/components/suite';
import { useDispatch } from 'src/hooks/suite/useDispatch';
import { Button, Checkbox } from '@trezor/components';
import { DialogModal } from '../Modal/DialogRenderer';
import { H2, Card, Paragraph, NewModal, Checkbox } from '@trezor/components';
import { AddressType } from '@suite-common/wallet-types';
import { spacings } from '@trezor/theme';
import { useState } from 'react';
import { setFlag } from 'src/actions/suite/suiteActions';

const StyledModal = styled(DialogModal)`
width: 600px;
`;

const getAddressTypeText = (addressType: AddressType) => {
switch (addressType) {
case 'contract':
Expand Down Expand Up @@ -50,34 +44,32 @@ export const CopyAddressModal = ({ address, onCancel, addressType }: CopyAddress
};

return (
<StyledModal
isCancelable
<NewModal
onCancel={onCancel}
icon="warningTriangleLight"
iconVariant="warning"
bodyHeading={<Translation id="TR_NOT_YOUR_RECEIVE_ADDRRESS" />}
body={
<>
<Translation id={getAddressTypeText(addressType)} />
<Checkbox
isChecked={checked}
onClick={() => setChecked(!checked)}
margin={{ top: spacings.md }}
>
<Translation id="TR_DO_NOT_SHOW_AGAIN" />
</Checkbox>
</>
}
bottomBarComponents={
icon="warning"
variant="warning"
bottomContent={
<>
<Button variant="warning" onClick={onCopyAddress}>
<Translation id="TR_COPY_TO_CLIPBOARD" />
</Button>
<Button variant="tertiary" onClick={onCancel}>
<NewModal.Button onClick={onCopyAddress}>
<Translation id="TR_UNHIDE" />
</NewModal.Button>
<NewModal.Button variant="tertiary" onClick={onCancel}>
<Translation id="TR_CANCEL" />
</Button>
</NewModal.Button>
</>
}
/>
>
<H2>
<Translation id="TR_NOT_YOUR_RECEIVE_ADDRRESS" />
</H2>
<Paragraph variant="tertiary" margin={{ top: spacings.xs }}>
<Translation id={getAddressTypeText(addressType)} />
</Paragraph>
<Card margin={{ top: spacings.xl }}>
<Checkbox isChecked={checked} onClick={() => setChecked(!checked)}>
<Translation id="TR_DO_NOT_SHOW_AGAIN" />
</Checkbox>
</Card>
</NewModal>
);
};
2 changes: 1 addition & 1 deletion ...es/suite/src/components/suite/modals/ReduxModal/DeviceConfirmationModal/NoBackupModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const NoBackupModal = () => {
return (
<NewModal
onCancel={close}
icon="warningTriangle"
icon="warning"
variant="warning"
size="small"
bottomContent={
Expand Down
53 changes: 22 additions & 31 deletions packages/suite/src/components/suite/modals/ReduxModal/UnhideTokenModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import styled from 'styled-components';

import { Translation } from 'src/components/suite';
import { useDispatch } from 'src/hooks/suite/useDispatch';
import { Button, Checkbox } from '@trezor/components';
import { DialogModal } from '../Modal/DialogRenderer';
import { H2, Paragraph, Card, Checkbox, NewModal } from '@trezor/components';
import {
DefinitionType,
tokenDefinitionsActions,
Expand All @@ -15,10 +12,6 @@ import { useState } from 'react';
import { spacings } from '@trezor/theme';
import { setFlag } from 'src/actions/suite/suiteActions';

const StyledModal = styled(DialogModal)`
width: 600px;
`;

interface UnhideTokenModalProps {
address: string;
onCancel: () => void;
Expand Down Expand Up @@ -48,34 +41,32 @@ export const UnhideTokenModal = ({ address, onCancel }: UnhideTokenModalProps) =
};

return (
<StyledModal
isCancelable
<NewModal
onCancel={onCancel}
icon="warningTriangleLight"
iconVariant="warning"
bodyHeading={<Translation id="TR_UNHIDE_TOKEN_TITLE" />}
body={
<>
<Translation id="TR_UNHIDE_TOKEN_TEXT" />
<Checkbox
isChecked={checked}
onClick={() => setChecked(!checked)}
margin={{ top: spacings.md }}
>
<Translation id="TR_DO_NOT_SHOW_AGAIN" />
</Checkbox>
</>
}
bottomBarComponents={
icon="warning"
variant="warning"
bottomContent={
<>
<Button variant="warning" onClick={onUnhide}>
<NewModal.Button onClick={onUnhide}>
<Translation id="TR_UNHIDE" />
</Button>
<Button variant="tertiary" onClick={onCancel}>
</NewModal.Button>
<NewModal.Button variant="tertiary" onClick={onCancel}>
<Translation id="TR_CANCEL" />
</Button>
</NewModal.Button>
</>
}
/>
>
<H2>
<Translation id="TR_UNHIDE_TOKEN_TITLE" />
</H2>
<Paragraph variant="tertiary" margin={{ top: spacings.xs }}>
<Translation id="TR_UNHIDE_TOKEN_TEXT" />
</Paragraph>
<Card margin={{ top: spacings.xl }}>
<Checkbox isChecked={checked} onClick={() => setChecked(!checked)}>
<Translation id="TR_DO_NOT_SHOW_AGAIN" />
</Checkbox>
</Card>
</NewModal>
);
};
106 changes: 56 additions & 50 deletions ...ges/suite/src/components/suite/modals/ReduxModal/UserContextModal/ApplicationLogModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,56 @@
import { useRef, useState } from 'react';
import { useState } from 'react';
import styled from 'styled-components';

import { selectLogs } from '@suite-common/logger';
import { Switch, Button, variables } from '@trezor/components';

import { ActionColumn, Modal, TextColumn, Translation } from 'src/components/suite';
import { SectionItem } from 'src/components/suite/section';
import {
Switch,
NewModal,
Card,
Paragraph,
Text,
Row,
Column,
H4,
variables,
useScrollShadow,
} from '@trezor/components';

import { Translation } from 'src/components/suite';
import { useSelector } from 'src/hooks/suite';
import { getApplicationInfo, getApplicationLog, prettifyLog } from 'src/utils/suite/logsUtils';
import { spacingsPx } from '@trezor/theme';
import { spacings, spacingsPx } from '@trezor/theme';

const ScrollContainer = styled.div`
overflow: auto;
`;

const LogWrapper = styled.pre`
padding: 20px;
height: 380px;
padding: ${spacingsPx.md};
height: 350px;
width: 100%;
overflow: auto;
background-color: ${({ theme }) => theme.legacy.BG_LIGHT_GREY};
color: ${({ theme }) => theme.legacy.TYPE_DARK_GREY};
font-size: ${variables.FONT_SIZE.TINY};
text-align: left;
word-break: break-all;
box-shadow: inset 0 0 6px -2px ${({ theme }) => theme.legacy.BG_GREY};
border-radius: 6px;
${variables.SCREEN_QUERY.BELOW_LAPTOP} {
height: 365px;
height: 320px;
}
${variables.SCREEN_QUERY.BELOW_TABLET} {
height: 330px;
}
`;

const BalanceInfoSection = styled(SectionItem)`
margin-top: ${spacingsPx.md};
&:not(:first-child) {
> div {
border-top: 0;
}
height: 280px;
}
`;

type ApplicationLogModalProps = { onCancel: () => void };

export const ApplicationLogModal = ({ onCancel }: ApplicationLogModalProps) => {
const htmlElement = useRef<HTMLPreElement>(null);
const [hideSensitiveInfo, setHideSensitiveInfo] = useState(false);
const logs = useSelector(selectLogs);

const state = useSelector(state => state);
const { ShadowTop, ShadowBottom, ShadowContainer, onScroll, scrollElementRef } =
useScrollShadow();

const actionLog = getApplicationLog(logs, hideSensitiveInfo);
const applicationInfo = getApplicationInfo(state, hideSensitiveInfo);

const log = prettifyLog([applicationInfo, ...actionLog]);

const download = () => {
Expand All @@ -70,34 +67,43 @@ export const ApplicationLogModal = ({ onCancel }: ApplicationLogModalProps) => {
};

return (
<Modal
isCancelable
<NewModal
onCancel={onCancel}
heading={<Translation id="TR_LOG" />}
description={<Translation id="LOG_DESCRIPTION" />}
data-testid="@modal/application-log"
bottomBarComponents={
<Button variant="primary" onClick={download} data-testid="@log/export-button">
bottomContent={
<NewModal.Button onClick={download} data-testid="@log/export-button">
<Translation id="TR_EXPORT_TO_FILE" />
</Button>
</NewModal.Button>
}
>
<LogWrapper ref={htmlElement} data-testid="@log/content">
{log}
</LogWrapper>

<BalanceInfoSection>
<TextColumn
title={<Translation id="LOG_INCLUDE_BALANCE_TITLE" />}
description={<Translation id="LOG_INCLUDE_BALANCE_DESCRIPTION" />}
<Card paddingType="none" margin={{ top: spacings.sm }} overflow="hidden">
<ShadowContainer>
<ShadowTop backgroundColor="backgroundSurfaceElevation1" />
<ScrollContainer onScroll={onScroll} ref={scrollElementRef}>
<LogWrapper data-testid="@log/content">
<Text typographyStyle="label">{log}</Text>
</LogWrapper>
</ScrollContainer>
<ShadowBottom backgroundColor="backgroundSurfaceElevation1" />
</ShadowContainer>
</Card>

<Row margin={{ top: spacings.xl }} gap={spacings.xxxxl}>
<Column gap={spacings.xxs} alignItems="flex-start">
<H4>
<Translation id="LOG_INCLUDE_BALANCE_TITLE" />
</H4>
<Paragraph variant="tertiary" typographyStyle="hint">
<Translation id="LOG_INCLUDE_BALANCE_DESCRIPTION" />
</Paragraph>
</Column>
<Switch
isChecked={!hideSensitiveInfo}
onChange={() => setHideSensitiveInfo(!hideSensitiveInfo)}
/>
<ActionColumn>
<Switch
isChecked={!hideSensitiveInfo}
onChange={() => setHideSensitiveInfo(!hideSensitiveInfo)}
/>
</ActionColumn>
</BalanceInfoSection>
</Modal>
</Row>
</NewModal>
);
};

0 comments on commit d120f3f

Please sign in to comment.