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/Dashboard/index.js

74 lines
1.6 KiB

/* @flow */
import React from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import Content from 'views/Wallet/components/Content';
import { CoinLogo, H4, P } from 'trezor-ui-components';
import { FormattedMessage } from 'react-intl';
import l10nMessages from './index.messages';
const Wrapper = styled.div`
display: flex;
flex-direction: column;
`;
const Row = styled.div`
flex: 1;
display: flex;
padding: 50px 0;
flex-direction: column;
align-items: center;
`;
const StyledP = styled(P)`
&& {
padding: 0 0 15px 0;
text-align: center;
}
`;
const Overlay = styled.div`
display: flex;
width: 100%;
height: 40px;
justify-content: center;
align-items: center;
opacity: 0.2;
background: white;
`;
const StyledCoinLogo = styled(CoinLogo)`
margin-right: 10px;
&:last-child {
margin-right: 0px;
}
`;
const Dashboard = () => (
<Content>
<Wrapper>
<Row data-test="Dashboard__page__content">
<H4>
<FormattedMessage {...l10nMessages.TR_PLEASE_SELECT_YOUR} />
</H4>
<StyledP>
<FormattedMessage {...l10nMessages.TR_YOU_WILL_GAIN_ACCESS} />
</StyledP>
<Overlay>
<StyledCoinLogo network="eth" height={32} />
<StyledCoinLogo network="xrp" height={32} />
</Overlay>
</Row>
</Wrapper>
</Content>
);
export default connect(
null,
null
)(Dashboard);