Merge pull request #340 from LiskHQ/336-send-to-this-address

Open send layover when coming from "send to this address" - Closes #336

src/components/accountVisual/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Gradients, gradientSchemes } from './gradients';
+import breakpoints from './../../constants/breakpoints';
 import styles from './accountVisual.css';
 
 /*
@@ -163,7 +164,7 @@ const pickTwo = (chunk, options) => ([
 class AccountVisual extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { isMobile: window.innerWidth < 1024 };
+    this.state = { isMobile: window.innerWidth < breakpoints.m };
   }
 
   shouldComponentUpdate(nextProps, state) {
@@ -172,7 +173,7 @@ class AccountVisual extends React.Component {
   }
 
   resizeWindow() {
-    this.setState({ isMobile: window.innerWidth < 1024 });
+    this.setState({ isMobile: window.innerWidth < breakpoints.m });
   }
 
   componentDidMount() {

src/components/send/index.js

@@ -8,13 +8,16 @@ import ResultBox from '../resultBox';
 import SendWritable from '../sendWritable';
 import SendReadable from './../sendReadable';
 import PassphraseSteps from './../passphraseSteps';
+import { parseSearchParams } from './../../utils/searchParams';
+import breakpoints from './../../constants/breakpoints';
 import styles from './styles.css';
 
 class Send extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
+    this.address = parseSearchParams(props.search).address;
     this.state = {
-      sendIsActive: false,
+      sendIsActive: !!this.address,
     };
   }
 
@@ -39,7 +42,10 @@ class Send extends React.Component {
           </span>
           <MultiStep finalCallback={this.setSendIsActive.bind(this, false)}
             className={styles.wrapper}>
-            <SendWritable autoFocus={this.state.sendIsActive || window.innerWidth > 1024}/>
+            <SendWritable
+              autoFocus={this.state.sendIsActive || window.innerWidth > breakpoints.m}
+              address={this.address}
+            />
             <PassphraseSteps />
             <SendReadable />
             <ResultBox />

src/components/send/index.test.js

@@ -27,10 +27,11 @@ describe('Send', () => {
     context = {
       storeState,
     };
-    wrapper = mountWithContext(<Send/>, context);
+    wrapper = mountWithContext(<Send search={''}/>, context);
   });
 
   it('should render MultiStep component ', () => {
+    console.log(wrapper.debug());
     expect(wrapper.find(MultiStep)).to.have.lengthOf(1);
   });
 

src/components/sendWritable/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import { translate } from 'react-i18next';
-import { withRouter } from 'react-router-dom';
 
 import { sent } from '../../actions/account';
 import Send from './send';
@@ -15,4 +14,4 @@ const mapDispatchToProps = dispatch => ({
   sent: data => dispatch(sent(data)),
 });
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(translate()(Send)));
+export default connect(mapStateToProps, mapDispatchToProps)(translate()(Send));

src/components/sendWritable/send.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { fromRawLsk } from '../../utils/lsk';
-import { parseSearchParams } from './../../utils/searchParams';
 import { Button } from './../toolbox/buttons/button';
 import { authStatePrefill } from '../../utils/form';
 import AccountVisual from '../accountVisual';
@@ -13,10 +12,9 @@ import inputTheme from './input.css';
 class SendWritable extends React.Component {
   constructor(props) {
     super(props);
-    const { address } = parseSearchParams(props.history.location.search);
     this.state = {
       recipient: {
-        value: address || '',
+        value: this.props.address || '',
       },
       amount: {
         value: '',

src/components/transactionDashboard/index.js

@@ -10,7 +10,7 @@ class TransactionsDashboard extends React.Component {
   render() {
     return <div className={`${grid.row} ${styles.wrapper}`}>
       <div className={`${grid['col-md-4']} ${styles.gridPadding}`}>
-        <Send/>
+        <Send search={this.props.location.search}/>
       </div>
       <div className={`${grid['col-sm-12']} ${styles.transactions} ${grid['col-md-8']}`}>
         <Transactions {...this.props} />

src/constants/breakpoints.js

@@ -0,0 +1,3 @@
+export default {
+  m: 1024,
+};

test/integration/wallet.test.js

@@ -100,7 +100,7 @@ describe('@integration: Wallet', () => {
     store.dispatch(activePeerSet({ network: getNetwork(networks.mainnet.code) }));
     accountAPIStub.withArgs(match.any).returnsPromise().resolves({ ...account });
     store.dispatch(accountLoggedIn(account));
-    wrapper = mount(renderWithRouter(Wallet, store));
+    wrapper = mount(renderWithRouter(Wallet, store, { location: { search: '' } }));
   };
 
   const fillInputField = (value, field) => {