diff --git a/js/package.json b/js/package.json
index 9bfcfb9be..d84b21d25 100644
--- a/js/package.json
+++ b/js/package.json
@@ -109,6 +109,7 @@
"blockies": "0.0.2",
"bytes": "^2.4.0",
"es6-promise": "^3.2.1",
+ "file-saver": "^1.3.3",
"format-json": "^1.0.3",
"format-number": "^2.0.1",
"geopattern": "^1.2.3",
diff --git a/js/src/ui/Actionbar/Export/export.js b/js/src/ui/Actionbar/Export/export.js
new file mode 100644
index 000000000..64e153734
--- /dev/null
+++ b/js/src/ui/Actionbar/Export/export.js
@@ -0,0 +1,57 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+import React, { Component, PropTypes } from 'react';
+import FileSaver from 'file-saver';
+import FileDownloadIcon from 'material-ui/svg-icons/file/file-download';
+
+import { Button } from '../../';
+
+class ActionbarExport extends Component {
+ static propTypes = {
+ content: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.object
+ ]).isRequired,
+ filename: PropTypes.string.isRequired,
+ className: PropTypes.string
+ }
+
+ render () {
+ const { className } = this.props;
+
+ return (
+ }
+ label='export'
+ onClick={ this.onDownloadBackup } />
+ );
+ }
+
+ onDownloadBackup = () => {
+ const { filename, content } = this.props;
+
+ const text = (typeof content === 'string')
+ ? content
+ : JSON.stringify(content, null, 4);
+
+ const blob = new Blob([ text ], { type: 'text/plain;charset=utf-8' });
+ FileSaver.saveAs(blob, filename);
+ }
+}
+
+export default ActionbarExport;
diff --git a/js/src/ui/Actionbar/Export/index.js b/js/src/ui/Actionbar/Export/index.js
new file mode 100644
index 000000000..f4ac7092e
--- /dev/null
+++ b/js/src/ui/Actionbar/Export/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+export default from './export';
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
index 8c7117a5f..72ad058e0 100644
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@@ -15,6 +15,7 @@
// along with Parity. If not, see .
import Actionbar from './Actionbar';
+import ActionbarExport from './Actionbar/Export';
import ActionbarSearch from './Actionbar/Search';
import ActionbarSort from './Actionbar/Sort';
import Badge from './Badge';
@@ -39,6 +40,7 @@ import TxHash from './TxHash';
export {
Actionbar,
+ ActionbarExport,
ActionbarSearch,
ActionbarSort,
AddressSelect,
diff --git a/js/src/views/Addresses/addresses.js b/js/src/views/Addresses/addresses.js
index 2ddb53881..13c512713 100644
--- a/js/src/views/Addresses/addresses.js
+++ b/js/src/views/Addresses/addresses.js
@@ -22,7 +22,7 @@ import { uniq } from 'lodash';
import List from '../Accounts/List';
import { AddAddress } from '../../modals';
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '../../ui';
+import { Actionbar, ActionbarExport, ActionbarSearch, ActionbarSort, Button, Page } from '../../ui';
import styles from './addresses.css';
@@ -93,6 +93,8 @@ class Addresses extends Component {
}
renderActionbar () {
+ const { contacts } = this.props;
+
const buttons = [
,
+ ,
+
this.renderSearchButton(),
this.renderSortButton()
];