fix(walletredesign): simpler wallet redesign for modal that has pubkey and address

app/components/ModalRoot/WalletDetails.js

@@ -1,17 +1,44 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import QRCode from 'qrcode.react'
 import styles from './WalletDetails.scss'
 
-const WalletDetails = () => {
+const WalletDetails = ({ info, address }) => {
   return (
     <div className={styles.walletdetails}>
-      wallet details
+      <div className={styles.inner}>
+        <div className={styles.left}>
+          <section>
+            <h4>Node Alias</h4>
+            <h1>Testing</h1>
+          </section>
+          <section>
+            <h4>Node Public Key</h4>
+            <p className={styles.copytext}>{info.data.identity_pubkey}</p>
+          </section>
+          <section>
+            <h4>Deposit Address</h4>
+            <div className={styles.qrcode}>
+              <QRCode value={address} />
+            </div>
+            <p className={styles.copytext}>{address}</p>
+          </section>
+        </div>
+        <div className={styles.right}>
+          <section>
+            <h2>
+              Network
+            </h2>
+          </section>
+        </div>
+      </div>
     </div>
   )
 }
 
 WalletDetails.propTypes = {
-  
+  info: PropTypes.object.isRequired,
+  address: PropTypes.string.isRequired
 }
 
 export default WalletDetails

app/components/ModalRoot/WalletDetails.scss

@@ -0,0 +1,70 @@
+@import '../../variables.scss';
+
+.walletdetails {
+}
+
+.inner {
+  width: 75%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+}
+
+.left, .right {
+  padding: 50px 0;
+  width: 100%;
+
+  section {
+    position: relative;
+    margin: 0 20px;
+    padding: 20px 0;
+  }
+}
+
+.left {
+  border-right: 1px solid $darkgrey;
+
+  section {
+    border-bottom: 1px solid $main;
+
+    h4 {
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      font-size: 10px;
+      margin-bottom: 15px;
+    }
+  }
+
+  h1 {
+    font-family: 'Roboto';
+    font-weight: 300;
+    font-size: 24px;
+  }
+
+  .qrcode {
+    text-align: center;
+    margin: 20px 0;
+  }
+
+  .copytext {
+    font-family: 'Roboto';
+    text-align: center;
+    font-size: 14px;
+    font-weight: 200;
+    border-radius: 7px;
+    background: $lightgrey;
+    border: 1px solid $darkestgrey;
+    padding: 10px;
+  }
+}
+
+.right {
+  section {
+    h2 {
+      text-transform: uppercase;
+      font-family: 'Roboto';
+      font-weight: 300;
+      font-size: 24px;
+    }
+  }
+}

app/components/Wallet/ReceiveModal.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactModal from 'react-modal'
+import copy from 'copy-to-clipboard'
+import QRCode from 'qrcode.react'
+import { showNotification } from 'notifications'
+import styles from './ReceiveModal.scss'
+
+const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address }) => {
+  const customStyles = {
+    overlay: {
+      cursor: 'pointer'
+    },
+    content: {
+      top: 'auto',
+      left: '20%',
+      right: '0',
+      bottom: 'auto',
+      width: '40%',
+      margin: '50px auto'
+    }
+  }
+
+  const copyOnClick = data => {
+    copy(data)
+    showNotification('Noice', 'Successfully copied to clipboard')
+  }
+
+  return (
+    <ReactModal
+      isOpen
+      ariaHideApp
+      shouldCloseOnOverlayClick
+      contentLabel='No Overlay Click Modal'
+      onRequestClose={() => hideActivityModal()}
+      parentSelector={() => document.body}
+      style={customStyles}
+    >
+      <div className={styles.container}>
+        <section>
+          <h4>Node Public Key (<span onClick={() => copyOnClick(pubkey)}>Copy</span>)</h4>
+          <p>{pubkey}</p>
+        </section>
+
+        <section>
+          <h4>Deposit Address (<span onClick={() => copyOnClick(address)}>Copy</span>)</h4>
+          <p>{address}</p>
+          <div className={styles.qrcode}>
+            <QRCode value={address} />
+          </div>
+        </section>
+      </div>
+    </ReactModal>
+  )
+}
+
+ReceiveModal.propTypes = {
+
+}
+
+export default ReceiveModal

app/components/Wallet/ReceiveModal.scss

@@ -0,0 +1,38 @@
+@import '../../variables.scss';
+
+.container {
+  section {
+    margin: 25px 0;
+    padding: 25px;
+    border-bottom: 1px solid $darkestgrey;
+
+    h4 {
+      font-size: 14px;
+      font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      margin-bottom: 10px;
+
+      span {
+        color: $blue;
+        cursor: pointer;
+      }
+    }
+
+    .qrcode {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    p {
+      font-family: 'Roboto';
+      text-align: center;
+      font-size: 14px;
+      font-weight: 200;
+      border-radius: 7px;
+      background: $lightgrey;
+      border: 1px solid $main;
+      padding: 10px;
+    }
+  }
+}

app/components/Wallet/Wallet.js

@@ -1,53 +1,83 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import copy from 'copy-to-clipboard'
+import { FaQrcode } from 'react-icons/lib/fa'
-import { showNotification } from 'notifications'
 import CryptoIcon from 'components/CryptoIcon'
 import { btc, usd } from 'utils'
+import ReceiveModal from './ReceiveModal'
 import styles from './Wallet.scss'
 
-const Wallet = ({ ticker, currentTicker, balance, address, pubkey, showModal }) => {
+class Wallet extends Component {
-  const copyOnClick = data => {
+  constructor(props) {
-    copy(data)
+    super(props)
-    showNotification('Noice', 'Successfully copied to clipboard')
+
+    this.state = {
+      modalOpen: false
+    }
   }
 
-  return (
+  render() {
-    <div className={styles.wallet} onClick={() => showModal('WALLET_DETAILS', {})}>
+    const {
-      <div className={styles.content}>
+      ticker,
-        <div className={styles.left}>
+      currentTicker,
-          <div className={styles.leftContent}>
+      balance,
-            <CryptoIcon currency={ticker.crypto} />
+      address,
-            <div className={styles.details}>
+      info,
-              <h1>{btc.satoshisToBtc(parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance))} BTC</h1>
+      showModal
-              <span>{btc.satoshisToBtc(balance.walletBalance)} available</span>
+    } = this.props
-              <span>{btc.satoshisToBtc(balance.channelBalance)} in channels</span>
+
+    const { modalOpen } = this.state
+
+    return (
+      <div className={styles.wallet}>
+        {
+          (modalOpen && 
+            <ReceiveModal
+              isOpen={modalOpen}
+              hideActivityModal={() => this.setState({ modalOpen: false })}
+              pubkey={info.data.identity_pubkey}
+              address={address}
+            />)
+        }
+        <div className={styles.content}>
+          <div className={styles.left}>
+            <div className={styles.leftContent}>
+              <CryptoIcon currency={ticker.crypto} />
+              <div className={styles.details}>
+                <h1>{btc.satoshisToBtc(parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance))} BTC</h1>
+                <span>{btc.satoshisToBtc(balance.walletBalance)} available</span>
+                <span>{btc.satoshisToBtc(balance.channelBalance)} in channels</span>
+              </div>
             </div>
           </div>
-        </div>
+          <div className={styles.right}>
-        <div className={styles.right}>
+            <div className={styles.rightContent}>
-          <div className={styles.rightContent}>
+              <div onClick={() => this.setState({ modalOpen: true })}>
-            <div className={styles.data}>
+                <FaQrcode />
-              <h2>Node public key (<span onClick={() => copyOnClick(pubkey)}>copy</span>)</h2>
+                Address
-              <p>{pubkey}</p>
+              </div>
-            </div>
-            <div className={styles.data}>
-              <h2>Deposit address (<span onClick={() => copyOnClick(address)}>copy</span>)</h2>
-              <p>{address}</p>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    )
-  )
+  }
 }
+// const Wallet = ({ ticker, currentTicker, balance, address, info, showModal }) => {
+//   const copyOnClick = data => {
+//     copy(data)
+//     showNotification('Noice', 'Successfully copied to clipboard')
+//   }
+
+//   return (
+//   )
+// }
 
 Wallet.propTypes = {
   ticker: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
   balance: PropTypes.object.isRequired,
   address: PropTypes.string.isRequired,
-  pubkey: PropTypes.string.isRequired,
+  info: PropTypes.object.isRequired,
   showModal: PropTypes.func.isRequired
 }
 

app/components/Wallet/Wallet.scss

@@ -4,16 +4,14 @@
   cursor: pointer;
   background: $lightgrey;
   transition: background 0.25s;
-
+  height: 150px;
-  &:hover {
-    background: $darkgrey;
-  }
 }
 
 .left, .right {
   display: inline-block;
   vertical-align: top;
   width: 50%;
+  height: 150px;
 
   .leftContent, .rightContent {
     padding: 25px;
@@ -51,26 +49,22 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
+  height: calc(100% - 50px);
 
-  .data {
+  div {
-    margin: 10px 0;
+    font-size: 20px;
-
+    padding: 10px 25px;
-    h2 {
+    background: $main;
-      margin-bottom: 5px;
+    transition: background 0.25s;
-      text-transform: uppercase;
-      font-size: 10px;
-      letter-spacing: 1.5px;
 
-      span {
+    &:hover {
-        color: #1DA1F2;
+      background: darken($main, 10%);
-        // text-decoration: underline;
-      }
     }
 
-    p {
+    svg {
-      font-size: 14px;
+      font-size: 35px;
-      padding-bottom: 5px;
+      margin-right: 10px;
-      border-bottom: 1px solid $main;
     }
   }
 }

app/routes/activity/components/components/Modal/Modal.js

@@ -11,8 +11,8 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
     TRANSACTION: Transaction,
     PAYMENT: Payment,
     INVOICE: Invoice
-
   }
+  
   const customStyles = {
     overlay: {
       cursor: 'pointer'

app/routes/app/components/App.js

@@ -88,7 +88,7 @@ class App extends Component {
             currentTicker={currentTicker}
             balance={balance}
             address={address}
-            pubkey={info.data.identity_pubkey}
+            info={info}
             showModal={showModal}
           />
           {children}

app/variables.scss

@@ -12,4 +12,5 @@ $bluegrey: #555459;
 
 $green: #0bb634;
 $red: #ff0b00;
+$blue: #007bb6;
 $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);