diff --git a/src/views/Wallet/views/Account/Receive/Container.js b/src/views/Wallet/views/Account/Receive/ethereum/Container.js
similarity index 100%
rename from src/views/Wallet/views/Account/Receive/Container.js
rename to src/views/Wallet/views/Account/Receive/ethereum/Container.js
diff --git a/src/views/Wallet/views/Account/Receive/ethereum/index.js b/src/views/Wallet/views/Account/Receive/ethereum/index.js
new file mode 100644
index 00000000..b0666921
--- /dev/null
+++ b/src/views/Wallet/views/Account/Receive/ethereum/index.js
@@ -0,0 +1,180 @@
+/* @flow */
+import React from 'react';
+import { QRCode } from 'react-qr-svg';
+import styled from 'styled-components';
+import media from 'styled-media-query';
+
+import { H2 } from 'components/Heading';
+import Button from 'components/Button';
+import Icon from 'components/Icon';
+import Tooltip from 'components/Tooltip';
+import Input from 'components/inputs/Input';
+
+import ICONS from 'config/icons';
+import colors from 'config/colors';
+import { CONTEXT_DEVICE } from 'actions/constants/modal';
+
+import Content from 'views/Wallet/components/Content';
+import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
+
+import type { Props } from './Container';
+
+const Label = styled.div`
+ padding: 25px 0 5px 0;
+ color: ${colors.TEXT_SECONDARY};
+`;
+
+const AddressWrapper = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+`;
+
+const StyledQRCode = styled(QRCode)`
+ padding: 15px;
+ margin-top: 0 25px;
+ border: 1px solid ${colors.BODY};
+`;
+
+const ShowAddressButton = styled(Button)`
+ min-width: 195px;
+ padding: 0;
+ white-space: nowrap;
+ display: flex;
+ height: 40px;
+ align-items: center;
+ justify-content: center;
+
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+
+ ${media.lessThan('795px')`
+ margin-top: 10px;
+ `}
+`;
+
+const ShowAddressIcon = styled(Icon)`
+ margin-right: 7px;
+ position: relative;
+ top: 2px;
+`;
+
+const EyeButton = styled(Button)`
+ z-index: 10001;
+ padding: 0;
+ width: 30px;
+ background: white;
+ top: 5px;
+ position: absolute;
+ right: 10px;
+
+ &:hover {
+ background: white;
+ }
+`;
+
+const Row = styled.div`
+ display: flex;
+ width: 100%;
+
+ ${media.lessThan('795px')`
+ flex-direction: column;
+ `}
+`;
+
+const QrWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const AccountReceive = (props: Props) => {
+ const device = props.wallet.selectedDevice;
+ const {
+ account,
+ discovery,
+ shouldRender,
+ loader,
+ } = props.selectedAccount;
+ const { type, title, message } = loader;
+ if (!device || !account || !discovery || !shouldRender) return ;
+
+ const {
+ addressVerified,
+ addressUnverified,
+ } = props.receive;
+
+ const isAddressVerifying = props.modal.context === CONTEXT_DEVICE && props.modal.windowType === 'ButtonRequest_Address';
+ const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
+
+ let address = `${account.address.substring(0, 20)}...`;
+ if (addressVerified || addressUnverified || isAddressVerifying) {
+ ({ address } = account);
+ }
+
+ return (
+
+
+ Receive Ethereum or tokens
+
+
+
+
+
+ Check address on your Trezor
+
+ ) : null}
+ icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
+
+ )}
+ >
+ props.showAddress(account.addressPath)}>
+
+
+
+ )}
+ />
+ {!(addressVerified || addressUnverified) && (
+ props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
+ Show full address
+
+ )}
+
+ {(addressVerified || addressUnverified) && !isAddressVerifying && (
+
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default AccountReceive;
diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js
index 755fcb43..60919d3f 100644
--- a/src/views/Wallet/views/Account/Receive/index.js
+++ b/src/views/Wallet/views/Account/Receive/index.js
@@ -1,180 +1,28 @@
/* @flow */
import React from 'react';
-import { QRCode } from 'react-qr-svg';
-import styled from 'styled-components';
-import media from 'styled-media-query';
+import { connect } from 'react-redux';
-import { H2 } from 'components/Heading';
-import Button from 'components/Button';
-import Icon from 'components/Icon';
-import Tooltip from 'components/Tooltip';
-import Input from 'components/inputs/Input';
+import type { State } from 'flowtype';
+import EthereumTypeReceiveForm from './ethereum/Container';
+import RippleTypeReceiveForm from './ripple/Container';
-import ICONS from 'config/icons';
-import colors from 'config/colors';
-import { CONTEXT_DEVICE } from 'actions/constants/modal';
+export type BaseProps = {
+ selectedAccount: $ElementType,
+}
-import Content from 'views/Wallet/components/Content';
-import VerifyAddressTooltip from './components/VerifyAddressTooltip';
+// return container for requested network type
+export default connect((state: State): BaseProps => ({
+ selectedAccount: state.selectedAccount,
+}), null)((props) => {
+ const { network } = props.selectedAccount;
+ if (!network) return null;
-import type { Props } from './Container';
-
-const Label = styled.div`
- padding: 25px 0 5px 0;
- color: ${colors.TEXT_SECONDARY};
-`;
-
-const AddressWrapper = styled.div`
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
-`;
-
-const StyledQRCode = styled(QRCode)`
- padding: 15px;
- margin-top: 0 25px;
- border: 1px solid ${colors.BODY};
-`;
-
-const ShowAddressButton = styled(Button)`
- min-width: 195px;
- padding: 0;
- white-space: nowrap;
- display: flex;
- height: 40px;
- align-items: center;
- justify-content: center;
-
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
-
- ${media.lessThan('795px')`
- margin-top: 10px;
- `}
-`;
-
-const ShowAddressIcon = styled(Icon)`
- margin-right: 7px;
- position: relative;
- top: 2px;
-`;
-
-const EyeButton = styled(Button)`
- z-index: 10001;
- padding: 0;
- width: 30px;
- background: white;
- top: 5px;
- position: absolute;
- right: 10px;
-
- &:hover {
- background: white;
+ switch (network.type) {
+ case 'ethereum':
+ return ;
+ case 'ripple':
+ return ;
+ default:
+ return null;
}
-`;
-
-const Row = styled.div`
- display: flex;
- width: 100%;
-
- ${media.lessThan('795px')`
- flex-direction: column;
- `}
-`;
-
-const QrWrapper = styled.div`
- display: flex;
- flex-direction: column;
-`;
-
-const AccountReceive = (props: Props) => {
- const device = props.wallet.selectedDevice;
- const {
- account,
- discovery,
- shouldRender,
- loader,
- } = props.selectedAccount;
- const { type, title, message } = loader;
- if (!device || !account || !discovery || !shouldRender) return ;
-
- const {
- addressVerified,
- addressUnverified,
- } = props.receive;
-
- const isAddressVerifying = props.modal.context === CONTEXT_DEVICE && props.modal.windowType === 'ButtonRequest_Address';
- const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
-
- let address = `${account.address.substring(0, 20)}...`;
- if (addressVerified || addressUnverified || isAddressVerifying) {
- ({ address } = account);
- }
-
- return (
-
-
- Receive Ethereum or tokens
-
-
-
-
-
- Check address on your Trezor
-
- ) : null}
- icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
-
- )}
- >
- props.showAddress(account.addressPath)}>
-
-
-
- )}
- />
- {!(addressVerified || addressUnverified) && (
- props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
- Show full address
-
- )}
-
- {(addressVerified || addressUnverified) && !isAddressVerifying && (
-
-
-
-
- )}
-
-
-
- );
-};
-
-export default AccountReceive;
+});
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Receive/ripple/Container.js b/src/views/Wallet/views/Account/Receive/ripple/Container.js
new file mode 100644
index 00000000..27212056
--- /dev/null
+++ b/src/views/Wallet/views/Account/Receive/ripple/Container.js
@@ -0,0 +1,36 @@
+/* @flow */
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { showAddress } from 'actions/ReceiveActions';
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import type { State, Dispatch } from 'flowtype';
+import Receive from './index';
+
+type OwnProps = { }
+
+type StateProps = {
+ selectedAccount: $ElementType,
+ receive: $ElementType,
+ modal: $ElementType,
+ wallet: $ElementType,
+}
+
+type DispatchProps = {
+ showAddress: typeof showAddress
+};
+
+export type Props = StateProps & DispatchProps;
+
+const mapStateToProps: MapStateToProps = (state: State): StateProps => ({
+ selectedAccount: state.selectedAccount,
+ receive: state.receive,
+ modal: state.modal,
+ wallet: state.wallet,
+});
+
+const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+ showAddress: bindActionCreators(showAddress, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Receive);
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Receive/ripple/index.js b/src/views/Wallet/views/Account/Receive/ripple/index.js
new file mode 100644
index 00000000..db7974b6
--- /dev/null
+++ b/src/views/Wallet/views/Account/Receive/ripple/index.js
@@ -0,0 +1,180 @@
+/* @flow */
+import React from 'react';
+import { QRCode } from 'react-qr-svg';
+import styled from 'styled-components';
+import media from 'styled-media-query';
+
+import { H2 } from 'components/Heading';
+import Button from 'components/Button';
+import Icon from 'components/Icon';
+import Tooltip from 'components/Tooltip';
+import Input from 'components/inputs/Input';
+
+import ICONS from 'config/icons';
+import colors from 'config/colors';
+import { CONTEXT_DEVICE } from 'actions/constants/modal';
+
+import Content from 'views/Wallet/components/Content';
+import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
+
+import type { Props } from './Container';
+
+const Label = styled.div`
+ padding: 25px 0 5px 0;
+ color: ${colors.TEXT_SECONDARY};
+`;
+
+const AddressWrapper = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+`;
+
+const StyledQRCode = styled(QRCode)`
+ padding: 15px;
+ margin-top: 0 25px;
+ border: 1px solid ${colors.BODY};
+`;
+
+const ShowAddressButton = styled(Button)`
+ min-width: 195px;
+ padding: 0;
+ white-space: nowrap;
+ display: flex;
+ height: 40px;
+ align-items: center;
+ justify-content: center;
+
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+
+ ${media.lessThan('795px')`
+ margin-top: 10px;
+ `}
+`;
+
+const ShowAddressIcon = styled(Icon)`
+ margin-right: 7px;
+ position: relative;
+ top: 2px;
+`;
+
+const EyeButton = styled(Button)`
+ z-index: 10001;
+ padding: 0;
+ width: 30px;
+ background: white;
+ top: 5px;
+ position: absolute;
+ right: 10px;
+
+ &:hover {
+ background: white;
+ }
+`;
+
+const Row = styled.div`
+ display: flex;
+ width: 100%;
+
+ ${media.lessThan('795px')`
+ flex-direction: column;
+ `}
+`;
+
+const QrWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const AccountReceive = (props: Props) => {
+ const device = props.wallet.selectedDevice;
+ const {
+ account,
+ discovery,
+ shouldRender,
+ loader,
+ } = props.selectedAccount;
+ const { type, title, message } = loader;
+ if (!device || !account || !discovery || !shouldRender) return ;
+
+ const {
+ addressVerified,
+ addressUnverified,
+ } = props.receive;
+
+ const isAddressVerifying = props.modal.context === CONTEXT_DEVICE && props.modal.windowType === 'ButtonRequest_Address';
+ const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
+
+ let address = `${account.address.substring(0, 20)}...`;
+ if (addressVerified || addressUnverified || isAddressVerifying) {
+ ({ address } = account);
+ }
+
+ return (
+
+
+ Receive Ripple
+
+
+
+
+
+ Check address on your Trezor
+
+ ) : null}
+ icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
+
+ )}
+ >
+ props.showAddress(account.addressPath)}>
+
+
+
+ )}
+ />
+ {!(addressVerified || addressUnverified) && (
+ props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
+ Show full address
+
+ )}
+
+ {(addressVerified || addressUnverified) && !isAddressVerifying && (
+
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default AccountReceive;
diff --git a/src/views/index.js b/src/views/index.js
index 994effdb..6e37aef5 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -18,7 +18,7 @@ import ImportView from 'views/Landing/views/Import/Container';
import WalletContainer from 'views/Wallet';
import AccountSummary from 'views/Wallet/views/Account/Summary';
import AccountSend from 'views/Wallet/views/Account/Send';
-import AccountReceive from 'views/Wallet/views/Account/Receive/Container';
+import AccountReceive from 'views/Wallet/views/Account/Receive';
import AccountSignVerify from 'views/Wallet/views/Account/SignVerify/Container';
import WalletDashboard from 'views/Wallet/views/Dashboard';