feature(settings): add export private keys in settings view

app/views/settings.js

@@ -3,10 +3,12 @@ import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 
 import { Button } from '../components/button';
-import { ModalComponent } from '../components/modal';
 import { ConfirmDialogComponent } from '../components/confirm-dialog';
 import { TextComponent } from '../components/text';
 import { InputComponent } from '../components/input';
+import { InputLabelComponent } from '../components/input-label';
+import { RowComponent } from '../components/row';
+import { Clipboard } from '../components/clipboard';
 
 import rpc from '../../services/api';
 
@@ -17,10 +19,26 @@ const Wrapper = styled.div`
 const ModalContent = styled.div`
   padding: 20px;
   width: 100%;
-  overflow-x: hidden;
+  max-height: 600px;
+  overflow-y: auto;
+
+  p {
+    word-break: break-all;
+  }
 `;
 
-type ViewKey = {
+const Btn = styled(Button)`
+  margin-bottom: 10px;
+`;
+
+const ClipboardButton = styled(Clipboard)`
+  width: 50px;
+  border-radius: ${props => props.theme.boxBorderRadius};
+  height: 45px;
+  margin-left: 5px;
+`;
+
+type Key = {
   zAddress: string,
   key: string,
 };
@@ -29,18 +47,20 @@ type Props = {
   addresses: string[],
 };
 type State = {
-  viewKeys: ViewKey[],
+  viewKeys: Key[],
+  privateKeys: Key[],
   isLoading: boolean,
   successExportViewKeys: boolean,
-  message: string | null,
+  successExportPrivateKeys: boolean,
 };
 
 export class SettingsView extends PureComponent<Props, State> {
   state = {
     viewKeys: [],
+    privateKeys: [],
     isLoading: false,
     successExportViewKeys: false,
-    message: null,
+    successExportPrivateKeys: false,
   };
 
   exportViewKeys = () => {
@@ -48,6 +68,8 @@ export class SettingsView extends PureComponent<Props, State> {
 
     const zAddresses = addresses.filter(addr => addr.startsWith('z'));
 
+    this.setState({ isLoading: true });
+
     Promise.all(
       zAddresses.map(async (zAddr) => {
         const viewKey = await rpc.z_exportviewingkey(zAddr);
@@ -57,76 +79,116 @@ export class SettingsView extends PureComponent<Props, State> {
       this.setState({
         viewKeys,
         successExportViewKeys: true,
+        isLoading: false,
       });
     });
   };
 
-  handleCloseModal = (fn: () => void) => () => {
-    this.setState(
-      {
-        message: null,
-      },
-      fn,
-    );
+  exportPrivateKeys = () => {
+    const { addresses } = this.props;
+
+    const zAddresses = addresses.filter(addr => addr.startsWith('z'));
+
+    this.setState({ isLoading: true });
+
+    Promise.all(
+      zAddresses.map(async (zAddr) => {
+        const privateKey = await rpc.z_exportkey(zAddr);
+        return { zAddress: zAddr, key: privateKey };
+      }),
+    ).then((privateKeys) => {
+      this.setState({
+        privateKeys,
+        successExportPrivateKeys: true,
+        isLoading: false,
+      });
+    });
   };
 
   render = () => {
     const {
-      viewKeys, isLoading, successExportViewKeys, message,
+      viewKeys,
+      isLoading,
+      successExportViewKeys,
+      privateKeys,
+      successExportPrivateKeys,
     } = this.state;
 
     return (
       <Wrapper>
-        <ModalComponent
+        <ConfirmDialogComponent
+          title='Export view keys'
           renderTrigger={toggleVisibility => (
-            <Button label='Export view keys' onClick={toggleVisibility} />
+            <Btn label='Export view keys' onClick={toggleVisibility} />
           )}
-          closeOnBackdropClick={false}
-          closeOnEsc={false}
+          onConfirm={this.exportViewKeys}
+          showButtons={!successExportViewKeys}
+          width={750}
         >
-          {toggleVisibility => (
-            <ConfirmDialogComponent
-              title='Export view keys'
-              handleClose={this.handleCloseModal(toggleVisibility)}
-              onConfirm={this.exportViewKeys}
-              showButtons={!successExportViewKeys}
-              width={750}
-            >
-              <ModalContent>
-                {successExportViewKeys ? (
-                  <>
+          <ModalContent>
+            {successExportViewKeys ? (
+              viewKeys.map(({ zAddress, key }) => (
+                <>
+                  <InputLabelComponent value={zAddress} />
+                  <RowComponent alignItems='center'>
                     <InputComponent
-                      inputType='textarea'
-                      rows={10}
-                      value={viewKeys.reduce(
-                        (acc, cur, idx) => `${acc}${cur.key} ${
-                          idx === viewKeys.length - 1 ? '' : '\n\n'
-                        }`,
-                        '',
-                      )}
+                      value={key}
                       onFocus={(event) => {
                         event.currentTarget.select();
-                        document.execCommand('copy');
-                        this.setState({ message: 'Copied to clipboard!' });
                       }}
                     />
-                    {message && (
-                      <TextComponent value={message} align='center' />
-                    )}
-                  </>
-                ) : (
-                  <TextComponent
-                    value={
-                      isLoading
-                        ? 'Loading...'
-                        : 'Ut id vulputate arcu. Curabitur mattis aliquam magna sollicitudin vulputate. Morbi tempus bibendum porttitor. Quisque dictum ac ipsum a luctus. Donec et lacus ac erat consectetur molestie a id erat.'
-                    }
-                  />
-                )}
-              </ModalContent>
-            </ConfirmDialogComponent>
+                    <ClipboardButton text={key} />
+                  </RowComponent>
+                </>
+              ))
+            ) : (
+              <TextComponent
+                value={
+                  isLoading
+                    ? 'Loading...'
+                    : 'Ut id vulputate arcu. Curabitur mattis aliquam magna sollicitudin vulputate. Morbi tempus bibendum porttitor. Quisque dictum ac ipsum a luctus. Donec et lacus ac erat consectetur molestie a id erat.'
+                }
+              />
+            )}
+          </ModalContent>
+        </ConfirmDialogComponent>
+
+        <ConfirmDialogComponent
+          title='Export private keys'
+          renderTrigger={toggleVisibility => (
+            <Btn label='Export private keys' onClick={toggleVisibility} />
           )}
-        </ModalComponent>
+          onConfirm={this.exportPrivateKeys}
+          showButtons={!successExportPrivateKeys}
+          width={750}
+        >
+          <ModalContent>
+            {successExportPrivateKeys ? (
+              privateKeys.map(({ zAddress, key }) => (
+                <>
+                  <InputLabelComponent value={zAddress} />
+                  <RowComponent alignItems='center'>
+                    <InputComponent
+                      value={key}
+                      onFocus={(event) => {
+                        event.currentTarget.select();
+                      }}
+                    />
+                    <ClipboardButton text={key} />
+                  </RowComponent>
+                </>
+              ))
+            ) : (
+              <TextComponent
+                value={
+                  isLoading
+                    ? 'Loading...'
+                    : 'Ut id vulputate arcu. Curabitur mattis aliquam magna sollicitudin vulputate. Morbi tempus bibendum porttitor. Quisque dictum ac ipsum a luctus. Donec et lacus ac erat consectetur molestie a id erat.'
+                }
+              />
+            )}
+          </ModalContent>
+        </ConfirmDialogComponent>
       </Wrapper>
     );
   };