You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
trezor-wallet/src/views/Wallet/views/FirmwareUpdate/index.js

159 lines
9.5 KiB

/* @flow */
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { getOldWalletReleaseUrl } from 'utils/url';
import styled from 'styled-components';
import { H1 } from 'components/Heading';
import P from 'components/Paragraph';
import colors from 'config/colors';
import Link from 'components/Link';
import Button from 'components/Button';
import { FONT_SIZE } from 'config/variables';
import * as deviceUtils from 'utils/device';
import * as RouterActions from 'actions/RouterActions';
import l10nCommonMessages from 'views/common.messages';
import type {
TrezorDevice,
State,
Dispatch,
} from 'flowtype';
import l10nMessages from './index.messages';
type Props = {
device: ?TrezorDevice;
}
const Wrapper = styled.section`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 90px 35px 40px 35px;
`;
const StyledNavLink = styled(Link)`
color: ${colors.TEXT_SECONDARY};
padding-top: 20px;
font-size: ${FONT_SIZE.BASE};
`;
const Image = styled.div`
padding-bottom: 30px;
`;
const StyledP = styled(P)`
padding: 0 0 15px 0;
text-align: center;
`;
const FirmwareUpdate = (props: Props) => (
<Wrapper>
<Image>
<svg width="181px" height="134px" viewBox="0 0 181 134" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>Chip</title>
<defs>
<linearGradient x1="-18.9038234%" y1="84.5976591%" x2="72.6763662%" y2="84.5976587%" id="linearGradient-1">
<stop stopColor="#FFFFFF" offset="0%" />
<stop stopColor="#E8E8E8" offset="71.3377225%" />
<stop stopColor="#F5F5F5" offset="75.783547%" />
<stop stopColor="#EDEEEE" offset="80.9337916%" />
<stop stopColor="#DDDDDD" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="linearGradient-2">
<stop stopColor="#FFFFFF" offset="0%" />
<stop stopColor="#EDEEEE" offset="100%" />
</linearGradient>
<linearGradient x1="-18.9038234%" y1="84.5976591%" x2="72.6763662%" y2="84.5976587%" id="linearGradient-3">
<stop stopColor="#858585" offset="0%" />
<stop stopColor="#505050" offset="71.3377225%" />
<stop stopColor="#606060" offset="75.783547%" />
<stop stopColor="#2A2A2A" offset="80.9337916%" />
<stop stopColor="#202020" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="linearGradient-4">
<stop stopColor="#141313" offset="0%" />
<stop stopColor="#5B5B5B" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="97.3898121%" id="linearGradient-5">
<stop stopColor="#FFDA7F" offset="0%" />
<stop stopColor="#FF8007" offset="100%" />
</linearGradient>
</defs>
<g id="Styles" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="08-Connect-modals" transform="translate(-1141.000000, -3424.000000)">
<g id="Group-7-Copy-6" transform="translate(55.000000, 166.000000)">
<g id="Window-Copy-4" transform="translate(0.000000, 3045.000000)">
<g id="window-copy-14" transform="translate(693.000000, 0.000000)">
<g id="CPU" transform="translate(379.000000, 209.000000)">
<g id="Group">
<g id="Group-2">
<path
d="M21.8335471,60.1448964 L93.8285497,13.6856547 C101.059567,9.01939202 110.370641,9.09079236 117.529248,13.8673994 L186.744363,60.051444 C194.462353,65.2013017 196.544236,75.6327535 191.394378,83.3507436 C190.123073,85.2560229 188.475594,86.8812158 186.553178,88.1264547 L115.743016,133.993501 C108.5983,138.621466 99.4016995,138.621466 92.2569841,133.993501 L21.8093241,88.361264 C14.021914,83.3169951 11.7981586,72.9148639 16.8424276,65.1274538 C18.1348647,63.1321721 19.8360493,61.4339058 21.8335471,60.1448964 Z"
id="Path-29"
fill="url(#linearGradient-1)"
/>
<path
d="M21.8335471,54.1448964 L93.8285497,7.68565469 C101.059567,3.01939202 110.370641,3.09079236 117.529248,7.86739936 L186.744363,54.051444 C194.462353,59.2013017 196.544236,69.6327535 191.394378,77.3507436 C190.123073,79.2560229 188.475594,80.8812158 186.553178,82.1264547 L115.743016,127.993501 C108.5983,132.621466 99.4016995,132.621466 92.2569841,127.993501 L21.8093241,82.361264 C14.021914,77.3169951 11.7981586,66.9148639 16.8424276,59.1274538 C18.1348647,57.1321721 19.8360493,55.4339058 21.8335471,54.1448964 Z"
id="Path-29"
fill="url(#linearGradient-2)"
/>
</g>
<g id="Group-2" transform="translate(31.260116, 16.800000)">
<path
d="M15.2430528,41.4528673 L65.6068201,8.88594655 C70.6741421,5.6092442 77.2046046,5.65936263 82.2210382,9.01345336 L130.640608,41.3877741 C136.039791,44.9977792 137.490207,52.3011696 133.880202,57.700353 C132.993166,59.027019 131.845386,60.1592599 130.506752,61.0281312 L80.9718465,93.1799281 C75.9649846,96.4297497 69.5147842,96.4297497 64.5079223,93.1799281 L15.2260928,61.1923964 C9.77820645,57.6563175 8.22838031,50.3733748 11.7644592,44.9254885 C12.6664405,43.5358442 13.8518606,42.3524594 15.2430528,41.4528673 Z"
id="Path-29"
fill="url(#linearGradient-3)"
/>
<path
d="M15.2430528,37.9656878 L65.6068201,5.39876706 C70.6741421,2.12206472 77.2046046,2.17218314 82.2210382,5.52627387 L130.640608,37.9005946 C136.039791,41.5105997 137.490207,48.8139901 133.880202,54.2131735 C132.993166,55.5398395 131.845386,56.6720804 130.506752,57.5409517 L80.9718465,89.6927487 C75.9649846,92.9425702 69.5147842,92.9425702 64.5079223,89.6927487 L15.2260928,57.7052169 C9.77820645,54.1691381 8.22838031,46.8861953 11.7644592,41.438309 C12.6664405,40.0486647 13.8518606,38.8652799 15.2430528,37.9656878 Z"
id="Path-29"
fill="url(#linearGradient-4)"
/>
</g>
<path
d="M121.606605,64.9975648 L125.626327,67.5589431 L103.910719,82.8 L86.0383539,77.3254798 L79.3526012,62.5099845 L98.1471069,50.0491032 L102.168735,52.6116966 L105.034567,51.1344005 C109.861921,48.0738333 118.623742,46.4622394 123.729362,50.0491032 C128.834982,53.6359669 128.283618,59.272519 124.472437,62.6880754 L121.606605,64.9975648 Z M102.97286,76.2495098 L114.957457,67.2042987 L98.0545701,56.0419014 L86.6587496,64.0099213 L91.3919047,73.0510939 L102.97286,76.2495098 Z M110.020127,54.3112144 L107.154296,55.7885105 L117.139544,62.0684197 L119.486876,60.3434548 C121.761419,59.1709601 122.964194,55.7885105 119.486876,53.4790211 C116.009558,51.1695317 112.294669,53.1387197 110.020127,54.3112144 Z"
id="Logotype"
fill="url(#linearGradient-5)"
/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</Image>
<H1>
<FormattedMessage {...l10nMessages.TR_ITS_TIME_TO_UPDATE_FIRMWARE} />
</H1>
<StyledP>
<FormattedMessage {...l10nMessages.TR_PLEASE_USE_OLD_WALLET} />
</StyledP>
<Link href={getOldWalletReleaseUrl(props.device)} target="_self">
<Button>
<FormattedMessage {...l10nCommonMessages.TR_TAKE_ME_TO_BITCOIN_WALLET} />
</Button>
</Link>
{deviceUtils.isDeviceAccessible(props.device) && (
<StyledNavLink to="/"><FormattedMessage {...l10nCommonMessages.TR_I_WILL_DO_THAT_LATER} /></StyledNavLink>
)}
</Wrapper>
);
export default connect(
(state: State) => ({
device: state.wallet.selectedDevice,
}),
(dispatch: Dispatch) => ({
cancel: bindActionCreators(RouterActions.selectFirstAvailableDevice, dispatch),
}),
)(FirmwareUpdate);