diff --git a/src/components/pricedButton/index.js b/src/components/pricedButton/index.js
new file mode 100644
index 000000000..d70760127
--- /dev/null
+++ b/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 (
+
+ {
+ fee &&
+ (
+ {
+ hasFunds ? `Fee: ${fromRawLsk(fee)} LSK` :
+ `Insufficient funds for ${fromRawLsk(fee)} LSK fee`
+ }
+ )
+ }
+
+
+ );
+};
+
+export default PricedButton;
diff --git a/src/components/pricedButton/index.test.js b/src/components/pricedButton/index.test.js
new file mode 100644
index 000000000..add256e08
--- /dev/null
+++ b/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 component from react-toolbox', () => {
+ wrapper = shallow();
+ expect(wrapper.find(Button)).to.have.length(1);
+ });
+
+ describe('Sufficient funds', () => {
+ beforeEach(() => {
+ wrapper = shallow();
+ });
+
+ 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();
+ });
+
+ 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);
+ });
+ });
+});
diff --git a/src/components/pricedButton/pricedButton.css b/src/components/pricedButton/pricedButton.css
new file mode 100644
index 000000000..9a3dbffe7
--- /dev/null
+++ b/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;
+}
diff --git a/src/constants/fees.js b/src/constants/fees.js
new file mode 100644
index 000000000..8343a7b16
--- /dev/null
+++ b/src/constants/fees.js
@@ -0,0 +1,6 @@
+export default {
+ setSecondPassphrase: 5e8,
+ send: 0.1e8,
+ registerDelegate: 25e8,
+ vote: 1e8,
+};