add back copy wif key; refactor receive coin buttons into context menu

react/src/actions/actions/settings.js

@@ -440,4 +440,42 @@ export function getWalletDatKeys(chain, keyMatchPattern) {
       resolve(json);
     });
   });
+}
+
+export function dumpPrivKey(coin, address) {
+  return new Promise((resolve, reject) => {
+    const payload = {
+      mode: null,
+      chain: coin,
+      cmd: 'dumpprivkey',
+      params: [ address ]
+    };
+
+    const _fetchConfig = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ 'payload': payload }),
+    };
+
+    fetch(
+      `http://127.0.0.1:${Config.agamaPort}/shepherd/cli`,
+      _fetchConfig
+    )
+    .catch(function(error) {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'dumpPrivKey',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      resolve(json.result ? json.result : json);
+    })
+  });
 }

react/src/components/dashboard/qrModal/qrModal.js

@@ -70,12 +70,12 @@ class QRModal extends React.Component {
   }
 
   saveAsImage(e) {
-      const qrCanvas = document.getElementById('qrModalCanvas' + this.props.content);
-      const canvas = qrCanvas.getElementsByTagName('canvas');
-      const dataURL = canvas[0].toDataURL();
-      const a = document.getElementById('saveModalImage' + this.props.content);
-      a.href = dataURL;
-      a.download = this.props.content;
+    const qrCanvas = document.getElementById('qrModalCanvas' + this.props.content);
+    const canvas = qrCanvas.getElementsByTagName('canvas');
+    const dataURL = canvas[0].toDataURL();
+    const a = document.getElementById('saveModalImage' + this.props.content);
+    a.href = dataURL;
+    a.download = this.props.content;
   }
 
   render() {

react/src/components/dashboard/qrModal/qrModal.render.js

@@ -5,10 +5,11 @@ import QRCode from 'qrcode.react';
 export const QRModalRender = function() {
   return (
     <span>
-      <span className="label label-default margin-left-10 action"
+      <span
+        className="qrcode-modal"
         title={ translate('INDEX.QRCODE') }
         onClick={ this.openModal }>
-        <i className="icon fa-qrcode"></i>
+        <i className="icon fa-qrcode margin-right-5"></i> generate QR-code
       </span>
       <div
         className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
@@ -26,7 +27,7 @@ export const QRModalRender = function() {
             </div>
             <div className="modal-body">
               <div className="animsition vertical-align fade-in">
-                <div 
+                <div
                   id={ 'qrModalCanvas' + this.props.content }
                   className="page-content vertical-align-middle text-center">
                   <QRCode

react/src/components/dashboard/receiveCoin/receiveCoin.js

@@ -2,7 +2,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import {
   copyCoinAddress,
-  getNewKMDAddresses
+  getNewKMDAddresses,
+  dumpPrivKey,
+  copyString,
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
 import {
@@ -20,12 +22,20 @@ class ReceiveCoin extends React.Component {
     this.state = {
       openDropMenu: false,
       hideZeroAdresses: false,
+      toggledAddressMenu: null,
     };
     this.openDropMenu = this.openDropMenu.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.toggleVisibleAddress = this.toggleVisibleAddress.bind(this);
     this.checkTotalBalance = this.checkTotalBalance.bind(this);
     this.ReceiveCoinTableRender = _ReceiveCoinTableRender.bind(this);
+    this.toggleAddressMenu = this.toggleAddressMenu.bind(this);
+  }
+
+  toggleAddressMenu(address) {
+    this.setState({
+      toggledAddressMenu: this.state.toggledAddressMenu === address ? null : address,
+    });
   }
 
   ReceiveCoinTableRender() {
@@ -48,11 +58,30 @@ class ReceiveCoin extends React.Component {
     );
   }
 
+  dumpPrivKey(address) {
+    this.toggleAddressMenu(address);
+    dumpPrivKey(this.props.coin, address)
+    .then((json) => {
+      if (json.length &&
+          json.length > 10) {
+        Store.dispatch(copyString(json, 'WIF address copied to clipboard'));
+      }
+    });
+  }
+
   handleClickOutside(e) {
-    if (e.srcElement.className.indexOf('dropdown') === -1 &&
+    if (e &&
+        e.srcElement &&
+        e.srcElement.offsetParent &&
+        e.srcElement.offsetParent.className.indexOf('dropdown') === -1 &&
       (e.srcElement.offsetParent && e.srcElement.offsetParent.className.indexOf('dropdown') === -1)) {
       this.setState({
         openDropMenu: false,
+        toggledAddressMenu:
+          e.srcElement.className.indexOf('receive-address-context-menu-trigger') === -1 &&
+          e.srcElement.className.indexOf('fa-qrcode') === -1 &&
+          e.srcElement.className.indexOf('receive-address-context-menu-get-qr') === -1 &&
+          e.srcElement.className.indexOf('qrcode-modal') === -1 ? null : this.state.toggledAddressMenu,
       });
     }
   }
@@ -64,6 +93,7 @@ class ReceiveCoin extends React.Component {
   }
 
   _copyCoinAddress(address) {
+    this.toggleAddressMenu(address);
     Store.dispatch(copyCoinAddress(address));
   }
 

react/src/components/dashboard/receiveCoin/receiveCoin.render.js

@@ -7,15 +7,34 @@ export const AddressActionsNonBasiliskModeRender = function(address, type) {
   return (
     <td>
       <span className={ 'label label-' + (type === 'public' ? 'default' : 'dark') }>
-        <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>
+        <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;
         { type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') }
       </span>
       <button
-        className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
-        onClick={ () => this._copyCoinAddress(address) }>
-          <i className="icon wb-copy"></i> { translate('INDEX.COPY') }
+        onClick={ () => this.toggleAddressMenu(address) }
+        className="btn btn-default btn-xs clipboard-edexaddr margin-left-10 receive-address-context-menu-trigger">
+        <i
+          title="Toggle address context menu"
+          className="fa fa-ellipsis-v receive-address-context-menu-trigger"></i>
       </button>
-      <QRModal content={ address } />
+      { this.state.toggledAddressMenu &&
+        this.state.toggledAddressMenu === address &&
+        <div className="receive-address-context-menu">
+          <ul>
+            <li onClick={ () => this._copyCoinAddress(address) }>
+              <i className="icon wb-copy margin-right-5"></i> { translate('INDEX.COPY') + ' pub key' }
+            </li>
+            { address[0] !== 'b' &&
+              <li onClick={ () => this.dumpPrivKey(address) }>
+                <i className="icon fa-key margin-right-5"></i> { translate('INDEX.COPY') + ' priv key (WIF)' }
+              </li>
+            }
+            <li className="receive-address-context-menu-get-qr">
+              <QRModal content={ address } />
+            </li>
+          </ul>
+        </div>
+      }
     </td>
   );
 };

react/src/components/overrides.scss

@@ -546,4 +546,49 @@ select{
 .settings-coind-stdout-textarea {
   border: none;
   background-image: none !important;
+}
+
+.receive-address-context-menu {
+  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.4);
+  background: #fff;
+  position: absolute;
+  z-index: 100;
+  margin-left: 65px;
+  margin-top: 5px;
+
+  ul {
+    margin: 0;
+    list-style: none;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+    -webkit-margin-start: 0;
+    -webkit-margin-end: 0;
+    -webkit-padding-start: 0;
+
+    li {
+      padding: 5px 15px;
+
+      &:first-child {
+        margin-top: 5px;
+      }
+      &:last-child {
+        margin-bottom: 5px;
+      }
+      &:hover {
+        background: #f9f9f9;
+        cursor: pointer;
+      }
+    }
+  }
+  &.closed {
+    z-index: 1700;
+    position: absolute;
+    top: -100%;
+    left: -100%;
+  }
+  .receive-address-context-menu-get-qr {
+    .modal {
+      cursor: default;
+    }
+  }
 }