Create priced button component - Closes #583

src/components/pricedButton/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from 'react-toolbox/lib/button';
+import { fromRawLsk } from '../../utils/lsk';
+import styles from './pricedButton.css';
+
+const PricedButton = ({
+  balance, fee, label, customClassName, onClick, disabled,
+}) => {
+  const hasFunds = balance >= fee;
+  return (
+    <div className='primary-button'>
+      {
+        fee &&
+          (<span className={`${styles.fee} ${hasFunds ? '' : styles.error}`}>
+            {
+              hasFunds ? `Fee: ${fromRawLsk(fee)} LSK` :
+              `Insufficient funds for ${fromRawLsk(fee)} LSK fee`
+            }
+          </span>)
+      }
+      <Button
+        label={label}
+        primary={true}
+        raised={true}
+        className={`next-button ${customClassName}`}
+        disabled={disabled || (fee && !hasFunds)}
+        onClick={onClick} />
+    </div>
+  );
+};
+
+export default PricedButton;

src/components/pricedButton/index.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import chai, { expect } from 'chai';
+import sinonChai from 'sinon-chai';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+import chaiEnzyme from 'chai-enzyme';
+import Button from 'react-toolbox/lib/button';
+import PricedButton from './index';
+
+chai.use(sinonChai);
+chai.use(chaiEnzyme());
+
+describe('PricedButton', () => {
+  let wrapper;
+  const props = {
+    fee: 5e8,
+    onClick: sinon.spy(),
+  };
+  const insufficientBalance = 4.9999e8;
+  const sufficientBalance = 6e8;
+
+  it('renders <Button /> component from react-toolbox', () => {
+    wrapper = shallow(<PricedButton {...props} balance={sufficientBalance} />);
+    expect(wrapper.find(Button)).to.have.length(1);
+  });
+
+  describe('Sufficient funds', () => {
+    beforeEach(() => {
+      wrapper = shallow(<PricedButton {...props} balance={sufficientBalance} />);
+    });
+
+    it('renders a span saying "Fee: 5 LSK"', () => {
+      expect(wrapper.find('span').text()).to.be.equal('Fee: 5 LSK');
+    });
+
+    it('allows to click on Button', () => {
+      wrapper.find(Button).simulate('click');
+      expect(props.onClick).to.have.been.calledWithExactly();
+    });
+  });
+
+  describe('Insufficient funds', () => {
+    beforeEach(() => {
+      wrapper = shallow(<PricedButton {...props} balance={insufficientBalance} />);
+    });
+
+    it('renders a span saying "Insufficient funds for 5 LSK fee"', () => {
+      expect(wrapper.find('span').text()).to.be.equal('Insufficient funds for 5 LSK fee');
+    });
+
+    it('sets the disabled attribute of the button', () => {
+      const buttonProps = wrapper.find(Button).props();
+      expect(buttonProps.disabled).to.be.equal(true);
+    });
+  });
+});

src/components/pricedButton/pricedButton.css

@@ -0,0 +1,12 @@
+.fee {
+  font-size: 12px;
+  line-height: 14px;
+  color: grey;
+  text-align: right;
+  margin: 0 16px;
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+}
+
+.error {
+  color: #dd2c00 !important;
+}

src/constants/fees.js

@@ -0,0 +1,6 @@
+export default {
+  setSecondPassphrase: 5e8,
+  send: 0.1e8,
+  registerDelegate: 25e8,
+  vote: 1e8,
+};