Modal.

bigearth · Feb 26, 2018 · a442763 · a442763
1 parent 663f18d
commit a442763
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "BITBOX",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A development framework for Bitcoin Cash",
   "main": "main.js",
   "productName": "BITBOX",

diff --git a/src/App.js b/src/App.js
@@ -373,7 +373,7 @@ class App extends Component {
                   activeClassName="pure-menu-selected"
                   className="pure-menu-link"
                   to="/convert">
-                  <i className="fas fa-calculator"></i> Convert
+                  <i className="fas fa-qrcode" /> Convert
                 </NavLink>
               </li>
               <li className="pure-menu-item">

diff --git a/src/components/AddressDisplay.js b/src/components/AddressDisplay.js
@@ -8,42 +8,23 @@ class AddressDisplay extends Component {
     let privateKeyWIF = this.props.address.privateKeyWIF;
     let address = BitcoinCash.fromWIF(privateKeyWIF, this.props.wallet.network).getAddress();
     this.state = {
-      address: address,
-      showPrivKey: false
+      address: address
     }
   }
 
-  showKey(key) {
-    this.setState({
-      address: key,
-      showPrivKey: true
-    });
-  }
-
-  hideKey(key) {
-    this.setState({
-      showPrivKey: false,
-      address: key
-    });
+  showKey(address, privateKeyWIF, xpriv, xpub) {
+    this.props.showKey(address, privateKeyWIF, xpriv, xpub);
   }
 
   render() {
     let btn;
     let address;
-    if(this.state.showPrivKey) {
+    btn = <td><button className="pure-button" onClick={this.showKey.bind(this, this.state.address, this.props.address.privateKeyWIF, this.props.address.xpriv, this.props.address.xpub)}><i className="fas fa-key" /></button></td>;
 
-      btn = <td><button className="pure-button danger-background" onClick={this.hideKey.bind(this, BitcoinCash.fromWIF(this.state.address, this.props.wallet.network).getAddress())}><i className="fas fa-key" /></button></td>;
-      address = <span><span className='danger'>{this.state.address}</span><br />
-                <span className='danger'>{this.props.address.xpriv}</span><br />
-                <span className='danger'>{this.props.address.xpub}</span></span>;
+    if(this.props.wallet.displayCashaddr) {
+      address = <span>{BitcoinCash.toCashAddress(this.state.address)}</span>;
     } else {
-      btn = <td><button className="pure-button" onClick={this.showKey.bind(this, this.props.address.privateKeyWIF)}><i className="fas fa-key" /></button></td>;
-
-      if(this.props.wallet.displayCashaddr) {
-        address = <span>{BitcoinCash.toCashAddress(this.state.address)}</span>;
-      } else {
-        address = <span>{this.state.address}</span>;
-      }
+      address = <span>{this.state.address}</span>;
     }
 
     let coinbase;

diff --git a/src/components/ModalDisplay.js b/src/components/ModalDisplay.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import BitcoinCash from '../utilities/BitcoinCash';
+
+class ModalDisplay extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  hideKey() {
+    this.props.hideKey();
+  }
+
+  render() {
+
+    let address;
+    if(this.props.wallet.displayCashaddr) {
+      address = BitcoinCash.toCashAddress(this.props.address);
+    } else {
+      address = this.props.address;
+    }
+
+    return (
+      <div id="keyModal" className="modal">
+        <div className="modal-content">
+          <div className="modal-header">
+            <span onClick={this.hideKey.bind(this)} className="close">&times;</span>
+            <h2><i className="fas fa-qrcode" /> {address}</h2>
+          </div>
+          <div className="modal-body">
+            <h3><i className="fas fa-key" /> Private Key WIF</h3>
+            <p>{this.props.privateKeyWIF}</p>
+            <h4><i className="fas fa-lock" /> Extended Private</h4>
+            <p>{this.props.xpriv}</p>
+            <h4><i className="fas fa-lock-open" /> Extended Public</h4>
+            <p>{this.props.xpub}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ModalDisplay;
diff --git a/src/components/WalletDisplay.js b/src/components/WalletDisplay.js
@@ -3,9 +3,37 @@ import BitcoinCash from '../utilities/BitcoinCash';
 import Crypto from '../utilities/Crypto';
 import Bitcoin from 'bitcoinjs-lib';
 import AddressDisplay from './AddressDisplay';
+import ModalDisplay from './ModalDisplay';
 import underscore from 'underscore';
 
 class WalletDisplay extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+      address: '',
+      privateKeyWIF: '',
+      xpriv: '',
+      xpub: ''
+    };
+  }
+
+  showKey(address, privateKeyWIF, xpriv, xpub) {
+    this.setState({
+      showModal: true,
+      address: address,
+      privateKeyWIF: privateKeyWIF,
+      xpriv: xpriv,
+      xpub: xpub
+    })
+  }
+
+  hideKey() {
+    this.setState({
+      showModal: false
+    })
+  }
+
   render() {
     let list = [];
     if (this.props.addresses.length) {
@@ -74,14 +102,29 @@ class WalletDisplay extends Component {
             transactionsCount={transactionsCount}
             displayCashaddr={this.props.displayCashaddr}
             wallet={this.props.wallet}
+            showKey={this.showKey.bind(this)}
           />
         );
       });
     }
 
+    let modal;
+    if(this.state.showModal === true) {
+      modal = <ModalDisplay
+        address={this.state.address}
+        privateKeyWIF={this.state.privateKeyWIF}
+        xpriv={this.state.xpriv}
+        xpub={this.state.xpub}
+        hideKey={this.hideKey.bind(this)}
+        wallet={this.props.wallet}
+      />;
+    }
+
     return (
       <div className="WalletDisplay content pure-g">
         <div className="pure-u-1-1">
+          {modal}
+
           <ul className='subheader'>
             <li className=''>MNEMONIC</li>
             <li className='right'>HD PATH</li>

diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -427,7 +427,6 @@ a.pure-button-primary {
   .danger:first-of-type {
     font-size: 1em;
   }
-
 }
 
 .pure-button {
@@ -614,3 +613,58 @@ a.pure-button-primary {
 #signature1 {
   color: darkGrey;
 }
+
+/* The Modal (background) */
+.modal {
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 250px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+    width: 80%;
+}
+
+.modal-header {
+    padding: 2px 16px;
+    background-color: $medBlue;
+    h2 {
+      color: white;
+    }
+}
+
+.modal-body {
+  padding: 2px 16px;
+  h3, h4 {
+    margin-bottom: 0;
+  }
+  p {
+    margin-top: 0;
+  }
+}
+
+/* The Close Button */
+.close {
+    color: $white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}