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 = {