Create standalone send page - Closes #1495

i18n/locales/en/common.json

@@ -15,8 +15,7 @@
   "Add a Lisk ID": "Add a Lisk ID",
   "Add new": "Add new",
   "Add this account to your dashboard to keep track of its balance, and use it as a bookmark in the future.": "Add this account to your dashboard to keep track of its balance, and use it as a bookmark in the future.",
-  "Add to dashboard": "Add to dashboard",
-  "Add to followed accounts": "Add to followed accounts",
+  "Add to bookmarks": "Add to bookmarks",
   "Add to list": "Add to list",
   "Added votes": "Added votes",
   "Additional fee": "Additional fee",
@@ -126,7 +125,6 @@
   "Filter votes": "Filter votes",
   "Final confirmation": "Final confirmation",
   "Follow": "Follow",
-  "Follow Account": "Follow Account",
   "Following": "Following",
   "Get passphrase": "Get passphrase",
   "Get to your Dashboard": "Get to your Dashboard",

jest.config.js

@@ -81,6 +81,7 @@ module.exports = {
     'src/components/passphraseSteps/index.js', // FollowUp #1515
     'src/actions/peers.js', // FollowUp #1515
     'src/components/send/steps/confirm/confirm.js', // FollowUp #1515
+    'src/components/sendNew/',
   ],
   coverageThreshold: {
     global: {

src/components/multiStep/index.js

@@ -82,6 +82,7 @@ class MultiStep extends React.Component {
       prevStep: step.prevStep,
       reset: this.reset.bind(this),
       ...step.data[step.current],
+      finalCallback,
     };
 
     if (step.current === (children.length - 1)) {

src/components/resultBox/resultBox.css

@@ -9,7 +9,8 @@
 }
 
 .icon {
-  font-size: var(--icon-font-size);
+  height: 30px;
+  width: 38.5px;
   color: #ff6236;
 }
 
@@ -19,23 +20,37 @@
   flex-flow: column;
   display: flex;
   width: 100%;
+  height: 650px;
 
   & .header {
     position: relative;
   }
 
+  & header > h2 {
+    font-size: 28px;
+  }
+
   & footer {
     padding: 0px;
+    display: flex;
+    justify-content: space-evenly;
+
+    & > button {
+      width: 160px;
+    }
   }
 
   & p {
     color: var(--paragraph-color);
     line-height: var(--paragraph-line-height);
+    font-size: 16px;
   }
 
   & .copy {
     color: var(--copy-color);
     cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
   }
 }
 

src/components/resultBox/resultBox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '../toolbox/buttons/button';
+import { Button, ActionButton } from '../toolbox/buttons/button';
 import { FontIcon } from '../fontIcon';
 import CopyToClipboard from '../copyToClipboard';
 
@@ -45,29 +45,17 @@ class ResultBox extends React.Component {
         </div>
 
         <footer>
-          <Button className={`okay-button ${styles.okButton}`}
-            onClick={() => {
-              this.props.transactionFailedClear();
-              // istanbul ignore else
-              if (typeof this.props.finalCallback === 'function') {
-                this.props.finalCallback();
-              }
-              this.props.reset();
-              this.props.history.replace(this.props.history.location.pathname);
-            }}>
-            {this.props.t('Okay')}
-          </Button>
           {this.props.success &&
-            this.props.reciepientId && this.isNotYetFollowed(this.props.reciepientId) ?
+            this.props.recipientId && this.isNotYetFollowed(this.props.recipientId) ?
             <Button className={`add-follwed-account-button ${styles.addFollowedAccountButton}`}
               onClick={() => {
                 this.props.nextStep({ address: this.props.reciepientId });
               }}>
-              {this.props.t('Add to followed accounts')}
+              {this.props.t('Add to bookmarks')}
             </Button> : null
           }
           {!this.props.success && this.props.account.hwInfo ?
-            <Button className={`add-follwed-account-button ${styles.addFollowedAccountButton}`}
+            <Button className={`add-to-bookmarks ${styles.addFollowedAccountButton}`}
               onClick={() => {
                 this.props.transactionFailedClear();
                 this.props.prevStep({
@@ -81,6 +69,18 @@ class ResultBox extends React.Component {
               {this.props.t('Retry')}
             </Button> : null
           }
+          <ActionButton className={`okay-button ${styles.okButton}`}
+            onClick={() => {
+              this.props.transactionFailedClear();
+              // istanbul ignore else
+              if (typeof this.props.finalCallback === 'function') {
+                this.props.finalCallback();
+              }
+              this.props.reset();
+              this.props.history.replace(this.props.history.location.pathname);
+            }}>
+            {this.props.t('Okay')}
+          </ActionButton>
           <div className='subTitle'>{this.props.subTitle}</div>
         </footer>
       </div>

src/components/resultBox/resultBox.test.js

@@ -117,6 +117,6 @@ describe('Result Box', () => {
 
     wrapper = mount(<ResultBox {...props} />, options);
 
-    expect(wrapper).to.have.descendants('.add-follwed-account-button');
+    expect(wrapper).to.have.descendants('.add-to-bookmarks');
   });
 });

src/components/send/index.js

@@ -105,4 +105,3 @@ class Send extends React.Component {
 }
 
 export default translate()(Send);
-

src/components/sendNew/index.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
+
+// import { FontIcon } from '../fontIcon';
+import Box from '../box';
+import MultiStep from './../multiStep';
+import ResultBox from '../resultBox';
+import Form from './steps/form';
+import Confirm from './steps/confirm';
+import FollowAccount from '../sendTo/followAccount';
+import PassphraseSteps from './../passphraseSteps';
+import AccountInitialization from '../accountInitialization';
+import { parseSearchParams } from './../../utils/searchParams';
+import breakpoints from './../../constants/breakpoints';
+import styles from './send.css';
+
+class Send extends React.Component {
+  constructor(props) {
+    super(props);
+    const needsAccountInit = !props.account.serverPublicKey
+      && props.account.balance > 0
+      && props.pendingTransactions.length === 0;
+
+    const { amount, recipient } = this.getSearchParams();
+    this.state = {
+      isActiveOnMobile: !!recipient || !!amount || needsAccountInit,
+      isActiveTabSend: true,
+    };
+  }
+
+  getSearchParams() {
+    return parseSearchParams(this.props.history.location.search);
+  }
+
+  setActiveOnMobile({ isActiveOnMobile, isActiveTabSend = true }) {
+    this.setState({ isActiveOnMobile, isActiveTabSend });
+  }
+
+  setActiveTabSend(isActiveTabSend) {
+    this.setState({ isActiveTabSend });
+  }
+
+  goToWallet() {
+    this.props.history.push('/wallet');
+  }
+
+  render() {
+    const { amount, recipient, reference } = this.getSearchParams();
+
+    return (
+      <Box className={`send-box ${styles.send}`}>
+        <div className={`${grid.row} ${grid['center-xs']} ${grid['center-sd']} ${grid['center-md']} ${grid['center-lg']}`}>
+          <div className={`${grid['col-xs-8']} ${grid['col-sd-8']} ${grid['col-md-6']} ${grid['col-lg-4']}`}>
+            <MultiStep
+              key='send'
+              finalCallback={this.goToWallet.bind(this)}
+              className={styles.wrapper}>
+              <AccountInitialization address={recipient}/>
+              <Form
+                autoFocus={this.state.isActiveOnMobile || window.innerWidth > breakpoints.m}
+                address={recipient}
+                amount={amount}
+                reference={reference}
+                setTabSend={this.setActiveTabSend.bind(this)}
+                settingsUpdated={this.props.settingsUpdated}
+                settings={this.props.settings}
+                goToWallet={this.goToWallet.bind(this)}
+              />
+              <PassphraseSteps />
+              <Confirm />
+              <ResultBox history={this.props.history} goToWallet={this.goToWallet.bind(this)} />
+              <FollowAccount showConfirmationStep={true}/>
+              <ResultBox history={this.props.history} goToWallet={this.goToWallet.bind(this)}/>
+            </MultiStep>
+          </div>
+        </div>
+      </Box>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  account: state.account,
+});
+
+export default connect(mapStateToProps)(translate()(Send));
+

src/components/sendNew/send.css

@@ -0,0 +1,82 @@
+@import '../app/variables';
+
+.send {
+  position: relative;
+  background: linear-gradient(90deg, #fff, #f5f8fc);
+}
+
+.mobileMenu,
+.mobileClose {
+  display: none;
+}
+
+@media (--medium-viewport) {
+  .send {
+    position: fixed;
+    right: 0;
+    height: 100vh; /* stylelint-disable-line */
+    transition: top 300ms ease-in-out;
+    z-index: 10;
+
+    &.isActive {
+      top: var(--m-top-bar-height);
+
+      & .wrapper {
+        padding-bottom: 100px;
+      }
+    }
+  }
+
+  .mobileClose {
+    display: block;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .mobileMenu {
+    display: block;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+  }
+
+  .mobileMenuItem {
+    display: inline-block;
+    padding: 20px;
+    font-weight: 600;
+    font-family: var(--heading-font);
+    cursor: pointer;
+    font-size: 24px;
+  }
+}
+
+@media (--small-viewport) {
+  .send {
+    height: 100vh; /* stylelint-disable-line */
+
+    &.isActive {
+      top: var(--s-top-bar-height);
+
+      & .wrapper {
+        padding-bottom: 50px;
+      }
+    }
+  }
+
+  .mobileMenuItem {
+    font-size: 18px;
+  }
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+}