From 0cf32a2d4a5ae75bcaa1955ad0fa16722a1d9014 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Sat, 12 Jan 2019 15:02:34 -0300
Subject: [PATCH] feature(settings): add export view keys button

---
 app/views/settings.js | 132 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 130 insertions(+), 2 deletions(-)

diff --git a/app/views/settings.js b/app/views/settings.js
index 670e277..0aa0df0 100644
--- a/app/views/settings.js
+++ b/app/views/settings.js
@@ -1,5 +1,133 @@
 // @flow
+import React, { PureComponent } from 'react';
+import styled from 'styled-components';
 
-import React from 'react';
+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';
 
-export const SettingsView = () => <div className='settings'>settings</div>;
+import rpc from '../../services/api';
+
+const Wrapper = styled.div`
+  margin-top: ${props => props.theme.layoutContentPaddingTop};
+`;
+
+const ModalContent = styled.div`
+  padding: 20px;
+  width: 100%;
+  overflow-x: hidden;
+`;
+
+type ViewKey = {
+  zAddress: string,
+  key: string,
+};
+
+type Props = {
+  addresses: string[],
+};
+type State = {
+  viewKeys: ViewKey[],
+  isLoading: boolean,
+  successExportViewKeys: boolean,
+  message: string | null,
+};
+
+export class SettingsView extends PureComponent<Props, State> {
+  state = {
+    viewKeys: [],
+    isLoading: false,
+    successExportViewKeys: false,
+    message: null,
+  };
+
+  exportViewKeys = () => {
+    const { addresses } = this.props;
+
+    const zAddresses = addresses.filter(addr => addr.startsWith('z'));
+
+    Promise.all(
+      zAddresses.map(async (zAddr) => {
+        const viewKey = await rpc.z_exportviewingkey(zAddr);
+        return { zAddress: zAddr, key: viewKey };
+      }),
+    ).then((viewKeys) => {
+      this.setState({
+        viewKeys,
+        successExportViewKeys: true,
+      });
+    });
+  };
+
+  handleCloseModal = (fn: () => void) => () => {
+    this.setState(
+      {
+        message: null,
+      },
+      fn,
+    );
+  };
+
+  render = () => {
+    const {
+      viewKeys, isLoading, successExportViewKeys, message,
+    } = this.state;
+
+    return (
+      <Wrapper>
+        <ModalComponent
+          renderTrigger={toggleVisibility => (
+            <Button label='Export view keys' onClick={toggleVisibility} />
+          )}
+          closeOnBackdropClick={false}
+          closeOnEsc={false}
+        >
+          {toggleVisibility => (
+            <ConfirmDialogComponent
+              title='Export view keys'
+              handleClose={this.handleCloseModal(toggleVisibility)}
+              onConfirm={this.exportViewKeys}
+              showButtons={!successExportViewKeys}
+              width={750}
+            >
+              <ModalContent>
+                {successExportViewKeys ? (
+                  <>
+                    <InputComponent
+                      inputType='textarea'
+                      rows={10}
+                      value={viewKeys.reduce(
+                        (acc, cur, idx) => `${acc}${cur.key} ${
+                          idx === viewKeys.length - 1 ? '' : '\n\n'
+                        }`,
+                        '',
+                      )}
+                      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>
+          )}
+        </ModalComponent>
+      </Wrapper>
+    );
+  };
+}