mirror of https://github.com/trezor/trezor-wallet
Vladimir Volek
5 years ago
committed by
GitHub
commit
7e6639119d
@ -0,0 +1,82 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import icons from 'config/icons';
|
||||
import colors from 'config/colors';
|
||||
|
||||
import { H2 } from 'components/Heading';
|
||||
import P from 'components/Paragraph';
|
||||
import Icon from 'components/Icon';
|
||||
import Button from 'components/Button';
|
||||
import Link from 'components/Link';
|
||||
|
||||
import type { Props as BaseProps } from '../../Container';
|
||||
|
||||
type Props = {
|
||||
onReceiveConfirmation: $ElementType<$ElementType<BaseProps, 'modalActions'>, 'onReceiveConfirmation'>;
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
max-width: 370px;
|
||||
padding: 30px 48px;
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
`;
|
||||
|
||||
const BackupButton = styled(Button)`
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
|
||||
const ProceedButton = styled(Button)`
|
||||
background: transparent;
|
||||
border-color: ${colors.WARNING_PRIMARY};
|
||||
color: ${colors.WARNING_PRIMARY};
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: ${colors.WHITE};
|
||||
background: ${colors.WARNING_PRIMARY};
|
||||
box-shadow: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledP = styled(P)`
|
||||
padding-bottom: 20px;
|
||||
`;
|
||||
|
||||
const Row = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Confirmation = (props: Props) => (
|
||||
<Wrapper>
|
||||
<StyledLink onClick={() => props.onReceiveConfirmation(false)}>
|
||||
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
|
||||
</StyledLink>
|
||||
<H2>Your Trezor is not backed up</H2>
|
||||
<Icon size={48} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
|
||||
<StyledP isSmaller>If your device is ever lost or damaged, your funds will be lost. Backup your device first, to protect your coins against such events.</StyledP>
|
||||
<Row>
|
||||
<Link href="https://wallet.trezor.io/?backup">
|
||||
<BackupButton onClick={() => props.onReceiveConfirmation(false)}>Create a backup in 3 minutes</BackupButton>
|
||||
</Link>
|
||||
<ProceedButton isWhite onClick={() => props.onReceiveConfirmation(true)}>Show address, I will take the risk</ProceedButton>
|
||||
</Row>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
Confirmation.propTypes = {
|
||||
onReceiveConfirmation: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default Confirmation;
|
||||
@ -0,0 +1,25 @@
|
||||
/* @flow */
|
||||
import * as React from 'react';
|
||||
import Notification from 'components/Notification';
|
||||
|
||||
import type { Props } from '../../index';
|
||||
|
||||
export default (props: Props) => {
|
||||
const { selectedDevice } = props.wallet;
|
||||
const needsBackup = selectedDevice && selectedDevice.features && selectedDevice.features.needs_backup;
|
||||
if (!needsBackup) return null;
|
||||
return (
|
||||
<Notification
|
||||
key="no-backup"
|
||||
type="warning"
|
||||
title="Your Trezor is not backed up!"
|
||||
message="If your device is ever lost or damaged, your funds will be lost. Backup your device first, to protect your coins against such events."
|
||||
actions={
|
||||
[{
|
||||
label: 'Create a backup',
|
||||
callback: props.routerActions.gotoBackup,
|
||||
}]
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in new issue