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