Merge pull request #2866 from ethcore/ng-accounts-backup

Export accounts as JSON or CSV

js/src/ui/Actionbar/Export/export.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+
 import FileSaver from 'file-saver';
 import FileDownloadIcon from 'material-ui/svg-icons/file/file-download';
 
@@ -38,19 +39,18 @@ class ActionbarExport extends Component {
         className={ className }
         icon={ <FileDownloadIcon /> }
         label='export'
-        onClick={ this.onDownloadBackup } />
+        onClick={ this.handleExport }
+      />
     );
   }
 
-  onDownloadBackup = () => {
+  handleExport = () => {
     const { filename, content } = this.props;
 
-    const text = (typeof content === 'string')
-      ? content
-      : JSON.stringify(content, null, 4);
+    const text = JSON.stringify(content, null, 4);
 
-    const blob = new Blob([ text ], { type: 'text/plain;charset=utf-8' });
-    FileSaver.saveAs(blob, filename);
+    const blob = new Blob([ text ], { type: 'application/json' });
+    FileSaver.saveAs(blob, `${filename}.json`);
   }
 }
 

js/src/views/Accounts/accounts.js

@@ -22,7 +22,7 @@ import { uniq } from 'lodash';
 
 import List from './List';
 import { CreateAccount } from '../../modals';
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page, Tooltip } from '../../ui';
+import { Actionbar, ActionbarExport, ActionbarSearch, ActionbarSort, Button, Page, Tooltip } from '../../ui';
 
 import styles from './accounts.css';
 
@@ -97,13 +97,20 @@ class Accounts extends Component {
   }
 
   renderActionbar () {
+    const { accounts } = this.props;
+
     const buttons = [
       <Button
         key='newAccount'
         icon={ <ContentAdd /> }
         label='new account'
         onClick={ this.onNewAccountClick } />,
 
+      <ActionbarExport
+        key='exportAccounts'
+        content={ accounts }
+        filename='accounts' />,
+
       this.renderSearchButton(),
       this.renderSortButton()
     ];

js/src/views/Addresses/addresses.js

@@ -107,7 +107,7 @@ class Addresses extends Component {
       <ActionbarExport
         key='exportAddressbook'
         content={ contacts }
-        filename='addressbook.json' />,
+        filename='addressbook' />,
 
       <ActionbarImport
         key='importAddressbook'