Added modals for external wallets - ada, xlm

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<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;

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<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;

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 (<NemWallet onCancel={modalActions.onCancel} />);
+            return (<Nem onCancel={modalActions.onCancel} />);
+        case 'xlm':
+            return (<Stellar onCancel={modalActions.onCancel} />);
+        case 'ada':
+            return (<Cardano onCancel={modalActions.onCancel} />);
         default:
             return null;
     }

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,
+    },
 ];