Code cleanup and minor fixings

src/components/pricedButton/index.js

@@ -3,24 +3,28 @@ import Button from 'react-toolbox/lib/button';
 import { fromRawLsk } from '../../utils/lsk';
 import styles from './pricedButton.css';
 
-const PricedButton = (props) => {
-  const hasFunds = props.balance >= props.fee;
+const PricedButton = ({
+  balance, fee, label, customClassName, onClick, disabled,
+}) => {
+  const hasFunds = balance >= fee;
   return (
     <div className='primary-button'>
       {
-        props.fee &&
-          <span className={`${styles.fee} ${hasFunds ? '' : styles.error}`}>
+        fee &&
+          (<span className={`${styles.fee} ${hasFunds ? '' : styles.error}`}>
             {
-              hasFunds ? `Fee: ${fromRawLsk(props.fee)} LSK` :
-              `Not enough credit to pay ${fromRawLsk(props.fee)} LSK fee`
+              hasFunds ? `Fee: ${fromRawLsk(fee)} LSK` :
+              `Insufficient funds for ${fromRawLsk(fee)} LSK fee`
             }
-          </span>
+          </span>)
       }
-      <Button label={props.label}
-        primary={true} raised={true}
-        className={`next-button ${props.customClassName}`}
-        disabled={props.disabled || (props.fee && !hasFunds)}
-        onClick={props.onClick.bind(this)}/>
+      <Button
+        label={label}
+        primary={true}
+        raised={true}
+        className={`next-button ${customClassName}`}
+        disabled={disabled || (fee && !hasFunds)}
+        onClick={onClick.bind(this)} />
     </div>
   );
 };

src/components/pricedButton/index.test.js

@@ -16,15 +16,15 @@ describe('DialogElement', () => {
     fee: 5e8,
     onClick: sinon.spy(),
   };
-  const insufficientBalance = 0;
+  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 credit', () => {
+  describe('Sufficient funds', () => {
     beforeEach(() => {
       wrapper = shallow(<PricedButton {...props} balance={sufficientBalance} />);
     });
@@ -39,13 +39,13 @@ describe('DialogElement', () => {
     });
   });
 
-  describe('Insufficient credit', () => {
+  describe('Insufficient funds', () => {
     beforeEach(() => {
       wrapper = shallow(<PricedButton {...props} balance={insufficientBalance} />);
     });
 
-    it('renders a span saying "Not enough credit to pay 5 LSK fee"', () => {
-      expect(wrapper.find('span').text()).to.be.equal('Not enough credit to pay 5 LSK fee');
+    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', () => {

src/components/pricedButton/pricedButton.css

@@ -6,6 +6,7 @@
   margin: 0 16px;
   transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
 }
+
 .error {
   color: #dd2c00 !important;
 }