From 5e6d58bc01032ab942627621ac5baa24e8ba9b56 Mon Sep 17 00:00:00 2001
From: Joshua Campbell <jcamp0x2a@gmail.com>
Date: Fri, 21 Jun 2019 14:29:22 -0700
Subject: [PATCH 1/2] Copy path, open, and backup buttons for wallet on Help
 page

---
 package.json                           |   1 +
 src/ui/component/walletBackup/view.jsx | 112 ++++++++++++++++++++++++-
 2 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8eb59eb26..2ad28e7e3 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "@reach/tabs": "^0.1.5",
     "@reach/tooltip": "^0.2.1",
     "@types/three": "^0.93.1",
+    "adm-zip": "^0.4.13",
     "async-exit-hook": "^2.0.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
diff --git a/src/ui/component/walletBackup/view.jsx b/src/ui/component/walletBackup/view.jsx
index 322cf0dec..73d2d0812 100644
--- a/src/ui/component/walletBackup/view.jsx
+++ b/src/ui/component/walletBackup/view.jsx
@@ -1,6 +1,9 @@
 // @flow
 import * as React from 'react';
+import { shell, clipboard, remote } from 'electron';
 import Button from 'component/button';
+import AdmZip from 'adm-zip';
+import path from 'path';
 
 type Props = {
   daemonSettings: {
@@ -8,7 +11,95 @@ type Props = {
   },
 };
 
-class WalletBackup extends React.PureComponent<Props> {
+type State = {
+  errorMessage: ?string,
+  successMessage: ?string,
+};
+
+class WalletBackup extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      errorMessage: null,
+      successMessage: null,
+    };
+  }
+
+  showErrorMessage(message: string) {
+    this.setState({ errorMessage: message });
+  }
+
+  showSuccessMessage(message: string) {
+    this.setState({ successMessage: message });
+  }
+
+  flashSuccessMessage(message: string, delay: ?number) {
+    delay = delay || 2000;
+    this.showSuccessMessage(message);
+    setTimeout(() => this.setState({ successMessage: null }), delay, { once: true });
+  }
+
+  clearMessages() {
+    this.setState({ errorMessage: null, successMessage: null });
+  }
+
+  backupWalletDir(lbryumWalletDir: ?string) {
+    this.clearMessages();
+
+    if (!lbryumWalletDir) {
+      this.showErrorMessage(__('No wallet folder was found.'));
+      return;
+    }
+
+    // Colon fails on Windows. Backups should be portable, so replace it on other platforms, too.
+    const filenameTime = new Date().toISOString().replace(/:/g, '-');
+
+    const outputFilename = [path.basename(lbryumWalletDir), '-', filenameTime, '.zip'].join('');
+
+    // Prefer placing backup in user's Downloads folder, then their home folder, and finally
+    // right next to the lbryum folder itself.
+    let outputDir = path.dirname(lbryumWalletDir);
+    if (remote && remote.app) {
+      outputDir = remote.app.getPath('downloads') || remote.app.getPath('home') || outputDir;
+    }
+
+    const outputPath = path.join(outputDir, outputFilename);
+
+    const zip = new AdmZip();
+
+    try {
+      zip.addLocalFolder(lbryumWalletDir);
+    } catch (err) {
+      console.error(err);
+      this.showErrorMessage(__('The wallet folder could not be added to the zip archive.'));
+      return;
+    }
+
+    try {
+      zip.writeZip(outputPath);
+    } catch (err) {
+      console.error(err);
+      this.showErrorMessage(__('There was a problem writing the zip archive to disk.'));
+      return;
+    }
+
+    this.showSuccessMessage(__('Saved zip archive to ' + outputPath));
+
+    shell.showItemInFolder(outputPath);
+  }
+
+  copyWalletDirToClipboard(lbryumWalletDir: ?string) {
+    this.clearMessages();
+
+    if (lbryumWalletDir) {
+      clipboard.writeText(lbryumWalletDir);
+      this.flashSuccessMessage(__('Copied path to clipboard.'));
+    } else {
+      this.showErrorMessage(__('No wallet folder was found.'));
+    }
+  }
+
   render() {
     const { daemonSettings } = this.props;
     const { wallet_dir: lbryumWalletDir } = daemonSettings;
@@ -55,6 +146,25 @@ class WalletBackup extends React.PureComponent<Props> {
                 <Button button="link" href="https://lbry.com/faq/how-to-backup-wallet" label={__('see this article')} />
                 .
               </p>
+              <p className={'card__message card__message--error' + (this.state.errorMessage ? '' : ' hidden')}>
+                {this.state.errorMessage}
+              </p>
+              <p className={'card__message card__message--success' + (this.state.successMessage ? '' : ' hidden')}>
+                {this.state.successMessage}
+              </p>
+              <div className="card__actions">
+                <Button
+                  button="primary"
+                  label={__('Copy Folder Path')}
+                  onClick={() => this.copyWalletDirToClipboard(lbryumWalletDir)}
+                />
+                <Button button="primary" label={__('Open Folder')} onClick={() => shell.openItem(lbryumWalletDir)} />
+                <Button
+                  button="primary"
+                  label={__('Create Backup')}
+                  onClick={() => this.backupWalletDir(lbryumWalletDir)}
+                />
+              </div>
             </div>
           </React.Fragment>
         )}
-- 
2.45.3


From 7544b231a095bf30633f9a30387c1c6c8f6e0350 Mon Sep 17 00:00:00 2001
From: Joshua Campbell <jcamp0x2a@gmail.com>
Date: Mon, 1 Jul 2019 14:00:20 -0700
Subject: [PATCH 2/2] Replace copy button by using CopyableText for the lbryum
 path.

---
 src/ui/component/walletBackup/view.jsx | 27 +++-----------------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/src/ui/component/walletBackup/view.jsx b/src/ui/component/walletBackup/view.jsx
index 73d2d0812..c37a3160f 100644
--- a/src/ui/component/walletBackup/view.jsx
+++ b/src/ui/component/walletBackup/view.jsx
@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
-import { shell, clipboard, remote } from 'electron';
+import { shell, remote } from 'electron';
 import Button from 'component/button';
+import CopyableText from 'component/copyableText';
 import AdmZip from 'adm-zip';
 import path from 'path';
 
@@ -34,12 +35,6 @@ class WalletBackup extends React.PureComponent<Props, State> {
     this.setState({ successMessage: message });
   }
 
-  flashSuccessMessage(message: string, delay: ?number) {
-    delay = delay || 2000;
-    this.showSuccessMessage(message);
-    setTimeout(() => this.setState({ successMessage: null }), delay, { once: true });
-  }
-
   clearMessages() {
     this.setState({ errorMessage: null, successMessage: null });
   }
@@ -89,17 +84,6 @@ class WalletBackup extends React.PureComponent<Props, State> {
     shell.showItemInFolder(outputPath);
   }
 
-  copyWalletDirToClipboard(lbryumWalletDir: ?string) {
-    this.clearMessages();
-
-    if (lbryumWalletDir) {
-      clipboard.writeText(lbryumWalletDir);
-      this.flashSuccessMessage(__('Copied path to clipboard.'));
-    } else {
-      this.showErrorMessage(__('No wallet folder was found.'));
-    }
-  }
-
   render() {
     const { daemonSettings } = this.props;
     const { wallet_dir: lbryumWalletDir } = daemonSettings;
@@ -135,7 +119,7 @@ class WalletBackup extends React.PureComponent<Props, State> {
                   'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
                 )}
               </p>
-              <p className="card__message">{lbryumWalletDir}</p>
+              <CopyableText copyable={lbryumWalletDir} snackMessage={__('Path copied.')} />
               <p>
                 {__(
                   'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
@@ -153,11 +137,6 @@ class WalletBackup extends React.PureComponent<Props, State> {
                 {this.state.successMessage}
               </p>
               <div className="card__actions">
-                <Button
-                  button="primary"
-                  label={__('Copy Folder Path')}
-                  onClick={() => this.copyWalletDirToClipboard(lbryumWalletDir)}
-                />
                 <Button button="primary" label={__('Open Folder')} onClick={() => shell.openItem(lbryumWalletDir)} />
                 <Button
                   button="primary"
-- 
2.45.3