mirror of https://github.com/trezor/trezor-wallet
parent
a7690f765f
commit
1bfe5887d0
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,70 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
import icons from 'config/icons';
|
||||
import Icon from 'components/Icon';
|
||||
import Link from 'components/Link';
|
||||
import Button from 'components/Button';
|
||||
import { H2 } from 'components/Heading';
|
||||
import P from 'components/Paragraph';
|
||||
import coins from 'constants/coins';
|
||||
|
||||
import CardanoImage from './images/cardano.png';
|
||||
import type { Props as BaseProps } from '../../Container';
|
||||
|
||||
type Props = {
|
||||
onCancel: $ElementType<$ElementType<BaseProps, 'modalActions'>, 'onCancel'>;
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
padding: 30px 48px;
|
||||
`;
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
margin: 10px 0 10px 0;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
`;
|
||||
|
||||
const Img = styled.img`
|
||||
display: block;
|
||||
max-width: 100px;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
padding-bottom: 20px;
|
||||
`;
|
||||
|
||||
const StellarWallet = (props: Props) => (
|
||||
<Wrapper>
|
||||
<StyledLink onClick={props.onCancel}>
|
||||
<Icon
|
||||
size={20}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
icon={icons.CLOSE}
|
||||
/>
|
||||
</StyledLink>
|
||||
<Img src={CardanoImage} />
|
||||
<H2>Cardano wallet</H2>
|
||||
<P isSmaller>You will be redirected to external wallet</P>
|
||||
|
||||
<Link href={coins.find(i => i.id === 'ada').url}>
|
||||
<StyledButton>Go to external wallet</StyledButton>
|
||||
</Link>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
StellarWallet.propTypes = {
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default StellarWallet;
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 83 KiB |
After Width: | Height: | Size: 6.3 KiB |
@ -0,0 +1,70 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
import icons from 'config/icons';
|
||||
import Icon from 'components/Icon';
|
||||
import Link from 'components/Link';
|
||||
import Button from 'components/Button';
|
||||
import { H2 } from 'components/Heading';
|
||||
import P from 'components/Paragraph';
|
||||
import coins from 'constants/coins';
|
||||
|
||||
import StellarImage from './images/xlm.png';
|
||||
import type { Props as BaseProps } from '../../Container';
|
||||
|
||||
type Props = {
|
||||
onCancel: $ElementType<$ElementType<BaseProps, 'modalActions'>, 'onCancel'>;
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
padding: 30px 48px;
|
||||
`;
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
margin: 10px 0 10px 0;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
`;
|
||||
|
||||
const Img = styled.img`
|
||||
display: block;
|
||||
max-width: 100px;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
padding-bottom: 20px;
|
||||
`;
|
||||
|
||||
const StellarWallet = (props: Props) => (
|
||||
<Wrapper>
|
||||
<StyledLink onClick={props.onCancel}>
|
||||
<Icon
|
||||
size={20}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
icon={icons.CLOSE}
|
||||
/>
|
||||
</StyledLink>
|
||||
<Img src={StellarImage} />
|
||||
<H2>Stellar wallet</H2>
|
||||
<P isSmaller>You will be redirected to external wallet</P>
|
||||
|
||||
<Link href={coins.find(i => i.id === 'xlm').url}>
|
||||
<StyledButton>Go to external wallet</StyledButton>
|
||||
</Link>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
StellarWallet.propTypes = {
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default StellarWallet;
|
Loading…
Reference in new issue