diff --git a/src/components/images/CoinLogo/images/ada.png b/src/components/images/CoinLogo/images/ada.png new file mode 100644 index 00000000..b07b5c1b Binary files /dev/null and b/src/components/images/CoinLogo/images/ada.png differ diff --git a/src/components/images/CoinLogo/images/xlm.png b/src/components/images/CoinLogo/images/xlm.png new file mode 100644 index 00000000..7c0deeb3 Binary files /dev/null and b/src/components/images/CoinLogo/images/xlm.png differ diff --git a/src/components/modals/external/Cardano/images/cardano.png b/src/components/modals/external/Cardano/images/cardano.png new file mode 100644 index 00000000..b07b5c1b Binary files /dev/null and b/src/components/modals/external/Cardano/images/cardano.png differ diff --git a/src/components/modals/external/Cardano/index.js b/src/components/modals/external/Cardano/index.js new file mode 100644 index 00000000..3578051c --- /dev/null +++ b/src/components/modals/external/Cardano/index.js @@ -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, '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) => ( + + + + + +

Cardano wallet

+

You will be redirected to external wallet

+ + i.id === 'ada').url}> + Go to external wallet + +
+); + +StellarWallet.propTypes = { + onCancel: PropTypes.func.isRequired, +}; + +export default StellarWallet; \ No newline at end of file diff --git a/src/components/modals/external/NemWallet/images/nem-download.png b/src/components/modals/external/Nem/images/nem-download.png similarity index 100% rename from src/components/modals/external/NemWallet/images/nem-download.png rename to src/components/modals/external/Nem/images/nem-download.png diff --git a/src/components/modals/external/NemWallet/index.js b/src/components/modals/external/Nem/index.js similarity index 100% rename from src/components/modals/external/NemWallet/index.js rename to src/components/modals/external/Nem/index.js diff --git a/src/components/modals/external/Stellar/images/xlm.png b/src/components/modals/external/Stellar/images/xlm.png new file mode 100644 index 00000000..7c0deeb3 Binary files /dev/null and b/src/components/modals/external/Stellar/images/xlm.png differ diff --git a/src/components/modals/external/Stellar/index.js b/src/components/modals/external/Stellar/index.js new file mode 100644 index 00000000..c9a005a0 --- /dev/null +++ b/src/components/modals/external/Stellar/index.js @@ -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, '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) => ( + + + + + +

Stellar wallet

+

You will be redirected to external wallet

+ + i.id === 'xlm').url}> + Go to external wallet + +
+); + +StellarWallet.propTypes = { + onCancel: PropTypes.func.isRequired, +}; + +export default StellarWallet; \ No newline at end of file diff --git a/src/components/modals/index.js b/src/components/modals/index.js index 1b75af8f..e3e24ec4 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -25,7 +25,9 @@ import DuplicateDevice from 'components/modals/device/Duplicate'; import WalletType from 'components/modals/device/WalletType'; // external context -import NemWallet from 'components/modals/external/NemWallet'; +import Nem from 'components/modals/external/Nem'; +import Cardano from 'components/modals/external/Cardano'; +import Stellar from 'components/modals/external/Stellar'; import type { Props } from './Container'; @@ -162,7 +164,11 @@ const getExternalContextModal = (props: Props) => { switch (modal.windowType) { case 'xem': - return (); + return (); + case 'xlm': + return (); + case 'ada': + return (); default: return null; } diff --git a/src/constants/coins.js b/src/constants/coins.js index ec89bbce..13753734 100644 --- a/src/constants/coins.js +++ b/src/constants/coins.js @@ -55,4 +55,16 @@ export default [ url: 'https://nem.io/downloads/', external: true, }, + { + id: 'xlm', + coinName: 'Stellar', + url: 'https://trezor.io/stellar', + external: true, + }, + { + id: 'ada', + coinName: 'Cardano', + url: 'https://adalite.io/app', + external: true, + }, ]; \ No newline at end of file