From b15c66e169c597c0a8726968d76c459afc566d4f Mon Sep 17 00:00:00 2001
From: Graydon <salsachipsyt@gmail.com>
Date: Wed, 27 Jun 2018 12:50:14 -0500
Subject: [PATCH] Copy button Generic CopyableText component CopyableText in
 wallet CopyableText in shapeshift

---
 src/renderer/component/copyableText/index.js  |  7 +++
 src/renderer/component/copyableText/view.jsx  | 55 +++++++++++++++++++
 .../shapeShift/internal/active-shift.jsx      |  5 +-
 src/renderer/component/walletAddress/view.jsx |  4 +-
 src/renderer/page/backup/view.jsx             | 20 ++++++-
 5 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/component/copyableText/index.js
 create mode 100644 src/renderer/component/copyableText/view.jsx

diff --git a/src/renderer/component/copyableText/index.js b/src/renderer/component/copyableText/index.js
new file mode 100644
index 000000000..57e7bf9db
--- /dev/null
+++ b/src/renderer/component/copyableText/index.js
@@ -0,0 +1,7 @@
+import { connect } from 'react-redux';
+import { doNotify } from 'lbry-redux';
+import Address from './view';
+
+export default connect(null, {
+  doNotify,
+})(Address);
diff --git a/src/renderer/component/copyableText/view.jsx b/src/renderer/component/copyableText/view.jsx
new file mode 100644
index 000000000..0958c60b2
--- /dev/null
+++ b/src/renderer/component/copyableText/view.jsx
@@ -0,0 +1,55 @@
+// @flow
+import * as React from 'react';
+import { clipboard } from 'electron';
+import { FormRow } from 'component/common/form';
+import Button from 'component/button';
+import * as icons from 'constants/icons';
+
+type Props = {
+  copyable: string,
+  doNotify: ({ message: string, displayType: Array<string> }) => void,
+};
+
+export default class CopyableInput extends React.PureComponent<Props> {
+  constructor() {
+    super();
+
+    this.input = null;
+  }
+
+  input: ?HTMLInputElement;
+
+  render() {
+    const { copyable, doNotify } = this.props;
+
+    return (
+      <FormRow verticallyCentered padded stretch>
+        <input
+          className="input-copyable form-field__input"
+          readOnly
+          value={copyable || ''}
+          ref={input => {
+            this.input = input;
+          }}
+          onFocus={() => {
+            if (this.input) {
+              this.input.select();
+            }
+          }}
+        />
+        <Button
+          noPadding
+          button="secondary"
+          icon={icons.CLIPBOARD}
+          onClick={() => {
+            clipboard.writeText(copyable);
+            doNotify({
+              message: __('Text copied'),
+              displayType: ['snackbar'],
+            });
+          }}
+        />
+      </FormRow>
+    );
+  }
+}
diff --git a/src/renderer/component/shapeShift/internal/active-shift.jsx b/src/renderer/component/shapeShift/internal/active-shift.jsx
index 7d2af51c9..9969685c2 100644
--- a/src/renderer/component/shapeShift/internal/active-shift.jsx
+++ b/src/renderer/component/shapeShift/internal/active-shift.jsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import QRCode from 'component/common/qr-code';
 import { FormRow } from 'component/common/form';
 import * as statuses from 'constants/shape_shift';
-import Address from 'component/address';
+import CopyableText from 'component/copyableText';
 import Button from 'component/button';
 import type { Dispatch } from 'redux/actions/shape_shift';
 import ShiftMarketInfo from './market_info';
@@ -94,7 +94,7 @@ class ActiveShapeShift extends React.PureComponent<Props> {
             {shiftDepositAddress && (
               <FormRow verticallyCentered padded>
                 <QRCode value={shiftDepositAddress} paddingRight />
-                <Address address={shiftDepositAddress} showCopyButton padded />
+                <CopyableText copyable={shiftDepositAddress} showCopyButton padded />
               </FormRow>
             )}
           </div>
@@ -145,3 +145,4 @@ class ActiveShapeShift extends React.PureComponent<Props> {
 }
 
 export default ActiveShapeShift;
+
diff --git a/src/renderer/component/walletAddress/view.jsx b/src/renderer/component/walletAddress/view.jsx
index 50f43dd34..469677527 100644
--- a/src/renderer/component/walletAddress/view.jsx
+++ b/src/renderer/component/walletAddress/view.jsx
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import Address from 'component/address';
+import CopyableText from 'component/copyableText';
 import QRCode from 'component/common/qr-code';
 import * as icons from 'constants/icons';
 
@@ -48,7 +48,7 @@ class WalletAddress extends React.PureComponent<Props> {
         </p>
 
         <div className="card__content">
-          <Address address={receiveAddress} showCopyButton />
+          <CopyableText copyable={receiveAddress} showCopyButton />
         </div>
 
         <div className="card__actions">
diff --git a/src/renderer/page/backup/view.jsx b/src/renderer/page/backup/view.jsx
index 5fee3c0d4..73aae9788 100644
--- a/src/renderer/page/backup/view.jsx
+++ b/src/renderer/page/backup/view.jsx
@@ -2,6 +2,8 @@
 import * as React from 'react';
 import Button from 'component/button';
 import Page from 'component/page';
+import { shell } from 'electron';
+import CopyableText from 'component/copyableText';
 
 type Props = {
   daemonSettings: {
@@ -37,10 +39,24 @@ class BackupPage extends React.PureComponent<Props> {
                 </p>
                 <p>
                   {__(
-                    'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
+                    'However, it is fairly easy to back up manually. To backup your wallet, click the button below to open your wallet directory, and copy the files to a safe location.'
                   )}
                 </p>
-                <p className="card__success-msg">{lbryumWalletDir}</p>
+				<div className="walletbackup__actions">
+                <Button
+                  button="primary"
+                  label={__('Open Wallet Directory')}
+                  onClick={() => shell.showItemInFolder(lbryumWalletDir)}
+                />
+                </div>
+		          <p>
+				  {__(
+				    'Alternatively, you may navigate to this folder on your hard drive and copy the contents:'
+				  )}
+				  </p>
+                <div className="card__content">
+                <CopyableText copyable={lbryumWalletDir} showCopyButton />
+                </div>
                 <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.'
-- 
2.45.3