🏠 Update files involve in PR #1377 as current version miss the update…

… because another PR

i18n/locales/en/common.json

@@ -305,6 +305,7 @@
   "Sender": "Sender",
   "Session timeout": "Session timeout",
   "Session timeout in": "Session timeout in",
+  "Set max. amount": "Set max. amount",
   "Set up Lisk Hub and your account.": "Set up Lisk Hub and your account.",
   "Settings": "Settings",
   "Show more": "Show more",

src/components/converter/converter.js

@@ -60,4 +60,3 @@ class Converter extends React.Component {
 }
 
 export default Converter;
-

src/components/converter/converter.test.js

@@ -1,7 +1,6 @@
 import { expect } from 'chai';
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
-
 import thunk from 'redux-thunk';
 
 import { mountWithContext } from '../../../test/utils/mountHelpers';

src/components/send/steps/form/form.css

@@ -18,6 +18,22 @@
   }
 }
 
+.amountWrapper {
+  /* display: flex;
+  flex-direction: row;
+  align-items: center; */
+}
+
+.setMaxAmount {
+  position: absolute;
+  right: 0px;
+  bottom: 30px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--color-primary-medium);
+  font-weight: var(--font-weight-bold);
+}
+
 .fee {
   text-align: right;
   margin-bottom: 24px;

src/components/send/steps/form/form.js

@@ -79,10 +79,35 @@ class Form extends React.Component {
     return fromRawLsk(Math.max(0, this.props.account.balance - this.fee));
   }
 
+  handleSetMaxAmount() {
+    const amount = parseFloat(this.getMaxAmount());
+    this.setState({
+      amount: {
+        value: amount.toString(),
+      },
+    });
+  }
+
   focusReference() {
     this.referenceInput.focus();
   }
 
+  handleFocus() {
+    this.setState({
+      showSetMaxAmount: true,
+    });
+  }
+
+  handleBlur() {
+    /* when click on set max amount link we need a small delay */
+    /* to process the click event before hiding */
+    setTimeout(() => {
+      this.setState({
+        showSetMaxAmount: false,
+      });
+    }, 200);
+  }
+
   render() {
     return (
       <div className={`${styles.sendWrapper}`}>
@@ -114,15 +139,26 @@ class Form extends React.Component {
             reference={this.state.reference}
             handleChange={this.handleChange.bind(this, 'reference', false)}
           />
-          <Converter
-            label={this.props.t('Amount (LSK)')}
-            className='amount'
-            theme={styles}
-            error={this.state.amount.error}
-            value={this.state.amount.value}
-            onChange={this.handleChange.bind(this, 'amount', true)}
-            t={this.props.t}
-          />
+          <div className={`amount-wrapper ${styles.amountWrapper}`}>
+            <Converter
+              label={this.props.t('Amount (LSK)')}
+              className='amount'
+              theme={styles}
+              error={this.state.amount.error}
+              value={this.state.amount.value}
+              onChange={this.handleChange.bind(this, 'amount', true)}
+              onFocus={this.handleFocus.bind(this)}
+              onBlur={this.handleBlur.bind(this)}
+              t={this.props.t}
+            />
+            {
+              this.state.showSetMaxAmount &&
+              !this.state.amount.value &&
+              this.getMaxAmount() > 0 ?
+                <a onClick={this.handleSetMaxAmount.bind(this)} className={`set-max-amount ${styles.setMaxAmount}`}>{ this.props.t('Set max. amount') }</a>
+              : <div></div>
+            }
+          </div>
         </form>
         <footer>
           <Button onClick={() => this.props.nextStep({

src/components/send/steps/form/form.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { expect } from 'chai';
+import { useFakeTimers } from 'sinon';
 import { mount } from 'enzyme';
 import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
@@ -11,10 +12,15 @@ import Form from './form';
 describe('Form Component', () => {
   let wrapper;
   let props;
+  let clock;
 
   beforeEach(() => {
     const account = accounts.delegate;
 
+    clock = useFakeTimers({
+      toFake: ['setTimeout', 'clearTimeout', 'Date', 'setInterval'],
+    });
+
     const priceTicker = {
       success: true,
       LSK: {
@@ -47,6 +53,10 @@ describe('Form Component', () => {
     });
   });
 
+  afterEach(() => {
+    clock.restore();
+  });
+
   it('renders three Input components', () => {
     expect(wrapper.find('Input')).to.have.length(3);
   });
@@ -117,4 +127,21 @@ describe('Form Component', () => {
 
     expect(wrapper.find('Bookmark')).to.have.length(1);
   });
+
+  it('Shows the Set max. amount link on amount focus', () => {
+    wrapper.find('.amount input').simulate('focus');
+    expect(wrapper.state('showSetMaxAmount')).to.equal(true);
+  });
+
+  it('Puts max amount into input field', () => {
+    wrapper.find('.amount input').simulate('focus');
+    wrapper.find('.set-max-amount').simulate('click');
+    expect(wrapper.state('amount').value).to.equal('999.9');
+  });
+
+  it('Hides the Set max. amount link on amount blur', () => {
+    wrapper.find('.amount input').simulate('blur');
+    clock.tick(1200);
+    expect(wrapper.state('showSetMaxAmount')).to.equal(false);
+  });
 });