diff --git a/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js b/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js index df98932ec..043a1e3ad 100644 --- a/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js +++ b/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js @@ -18,6 +18,8 @@ import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; +import { CopyToClipboard, QrCode } from '~/ui'; + import Value from '../Value'; import styles from '../shapeshift.css'; @@ -61,9 +63,7 @@ export default class AwaitingDepositStep extends Component { } } /> -
- { depositAddress } -
+ { this.renderAddress(depositAddress, coinSymbol) }
); } + + renderAddress (depositAddress, coinSymbol) { + const qrcode = ( + + ); + let protocolLink = null; + + // TODO: Expand for other coins where protocols are available + switch (coinSymbol) { + case 'BTC': + protocolLink = `bitcoin:${depositAddress}`; + break; + } + + return ( +
+ { + protocolLink + ? ( + + { qrcode } + + ) + : qrcode + } +
+ + { depositAddress } +
+
+ ); + } } diff --git a/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js b/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js index 53c116ad2..2e8cedf28 100644 --- a/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js +++ b/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js @@ -19,7 +19,10 @@ import React from 'react'; import AwaitingDepositStep from './'; +const TEST_ADDRESS = '0x123456789123456789123456789123456789'; + let component; +let instance; function render () { component = shallow( @@ -30,6 +33,7 @@ function render () { } } /> ); + instance = component.instance(); return component; } @@ -48,4 +52,61 @@ describe('modals/Shapeshift/AwaitingDepositStep', () => { render({ depositAddress: 'xyz' }); expect(component.find('FormattedMessage').first().props().id).to.match(/awaitingDeposit/); }); + + describe('instance methods', () => { + describe('renderAddress', () => { + let address; + + beforeEach(() => { + address = shallow(instance.renderAddress(TEST_ADDRESS)); + }); + + it('renders the address', () => { + expect(address.text()).to.contain(TEST_ADDRESS); + }); + + describe('CopyToClipboard', () => { + let copy; + + beforeEach(() => { + copy = address.find('Connect(CopyToClipboard)'); + }); + + it('renders the copy', () => { + expect(copy.length).to.equal(1); + }); + + it('passes the address', () => { + expect(copy.props().data).to.equal(TEST_ADDRESS); + }); + }); + + describe('QrCode', () => { + let qr; + + beforeEach(() => { + qr = address.find('QrCode'); + }); + + it('renders the QrCode', () => { + expect(qr.length).to.equal(1); + }); + + it('passed the address', () => { + expect(qr.props().value).to.equal(TEST_ADDRESS); + }); + + describe('protocol link', () => { + it('does not render a protocol link (unlinked type)', () => { + expect(address.find('a')).to.have.length(0); + }); + + it('renders protocol link for BTC', () => { + address = shallow(instance.renderAddress(TEST_ADDRESS, 'BTC')); + expect(address.find('a').props().href).to.equal(`bitcoin:${TEST_ADDRESS}`); + }); + }); + }); + }); + }); }); diff --git a/js/src/modals/Shapeshift/shapeshift.css b/js/src/modals/Shapeshift/shapeshift.css index 4ac63ed20..3d52bbb2d 100644 --- a/js/src/modals/Shapeshift/shapeshift.css +++ b/js/src/modals/Shapeshift/shapeshift.css @@ -14,9 +14,28 @@ /* You should have received a copy of the GNU General Public License /* along with Parity. If not, see . */ + .body { } +.addressInfo { + text-align: center; + + .address { + background: rgba(255, 255, 255, 0.1); + margin: 0.75em 0; + padding: 1em; + + span { + margin-left: 0.75em; + } + } + + .qrcode { + margin: 0.75em 0; + } +} + .shapeshift { position: absolute; bottom: 0.5em; diff --git a/js/src/ui/CopyToClipboard/copyToClipboard.js b/js/src/ui/CopyToClipboard/copyToClipboard.js index 52e4e44b9..0afd967fd 100644 --- a/js/src/ui/CopyToClipboard/copyToClipboard.js +++ b/js/src/ui/CopyToClipboard/copyToClipboard.js @@ -14,21 +14,21 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . +import { IconButton } from 'material-ui'; import React, { Component, PropTypes } from 'react'; +import Clipboard from 'react-copy-to-clipboard'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import { IconButton } from 'material-ui'; -import Clipboard from 'react-copy-to-clipboard'; -import CopyIcon from 'material-ui/svg-icons/content/content-copy'; -import Theme from '../Theme'; - import { showSnackbar } from '~/redux/providers/snackbarActions'; -const { textColor, disabledTextColor } = Theme.flatButton; +import { CopyIcon } from '../Icons'; +import Theme from '../Theme'; import styles from './copyToClipboard.css'; +const { textColor, disabledTextColor } = Theme.flatButton; + class CopyToClipboard extends Component { static propTypes = { showSnackbar: PropTypes.func.isRequired, diff --git a/js/src/ui/Icons/index.js b/js/src/ui/Icons/index.js index 0fec1a572..257353684 100644 --- a/js/src/ui/Icons/index.js +++ b/js/src/ui/Icons/index.js @@ -22,6 +22,7 @@ import CloseIcon from 'material-ui/svg-icons/navigation/close'; import CompareIcon from 'material-ui/svg-icons/action/compare-arrows'; import ComputerIcon from 'material-ui/svg-icons/hardware/desktop-mac'; import ContractIcon from 'material-ui/svg-icons/action/code'; +import CopyIcon from 'material-ui/svg-icons/content/content-copy'; import DashboardIcon from 'material-ui/svg-icons/action/dashboard'; import DeleteIcon from 'material-ui/svg-icons/action/delete'; import DoneIcon from 'material-ui/svg-icons/action/done-all'; @@ -50,6 +51,7 @@ export { CompareIcon, ComputerIcon, ContractIcon, + CopyIcon, DashboardIcon, DeleteIcon, DoneIcon, diff --git a/js/src/ui/QrCode/qrCode.js b/js/src/ui/QrCode/qrCode.js index 38c4fbc1c..26033f8f3 100644 --- a/js/src/ui/QrCode/qrCode.js +++ b/js/src/ui/QrCode/qrCode.js @@ -34,7 +34,7 @@ export default class QrCode extends Component { static defaultProps = { margin: 2, - size: 5 + size: 4 }; state = {