feature(wallet): build new wallet modal/refactor current wallet component

app/components/Form/Form.scss

@@ -24,4 +24,3 @@
     color: $white;
   }
 }
-

app/components/Form/Pay.js

@@ -60,9 +60,6 @@ class Pay extends Component {
       setCurrency
     } = this.props
 
-    console.log('errors: ', errors)
-    console.log('showErrors: ', showErrors)
-
     const displayNodeName = (pubkey) => {
       const node = find(nodes, n => n.pub_key === pubkey)
 
@@ -83,7 +80,6 @@ class Pay extends Component {
 
     return (
       <div className={styles.container}>
-        {showPayLoadingScreen && <LoadingBolt />}
         <header className={styles.header}>
           <Isvg src={paperPlane} />
           <h1>Make Payment</h1>

app/components/Wallet/ReceiveModal.js

@@ -1,55 +1,57 @@
 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 { FaCopy } from 'react-icons/lib/fa'
-import { MdClose } from 'react-icons/lib/md'
+import Isvg from 'react-inlinesvg'
+
+import x from 'icons/x.svg'
+import { showNotification } from 'notifications'
+
 import styles from './ReceiveModal.scss'
 
-const ReceiveModal = ({
-  isOpen, hideActivityModal, pubkey, address, newAddress, qrCodeType, changeQrCode
-}) => {
-  const customStyles = {
-    overlay: {
-      cursor: 'pointer'
-    },
-    content: {
-      top: 'auto',
-      left: '0',
-      right: '0',
-      bottom: 'auto',
-      width: '40%',
-      margin: '50px auto',
-      borderRadius: 'none',
-      padding: '0'
+class ReceiveModal extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      qrCodeType: 1
     }
   }
 
-  const copyOnClick = (data) => {
-    copy(data)
-    showNotification('Noice', 'Successfully copied to clipboard')
-  }
+  render() {
+    const copyOnClick = (data) => {
+      copy(data)
+      showNotification('Noice', 'Successfully copied to clipboard')
+    }
 
-  return (
-    <ReactModal
-      isOpen={isOpen}
-      ariaHideApp
-      shouldCloseOnOverlayClick
-      contentLabel='No Overlay Click Modal'
-      onRequestClose={() => hideActivityModal()}
-      parentSelector={() => document.body}
-      style={customStyles}
-    >
-      <div className={styles.closeContainer}>
-        <span onClick={() => hideActivityModal()}>
-          <MdClose />
-        </span>
-      </div>
+    const changeQrCode = () => {
+      if (this.state.qrCodeType === 1) {
+        this.setState({ qrCodeType: 2 })
+      } else {
+        this.setState({ qrCodeType: 1 })
+      }
+    }
+    
+    const {
+      isOpen,
+      pubkey,
+      address,
+      newAddress,
+      closeReceiveModal
+    } = this.props
 
+    const { qrCodeType } = this.state
+    
+    if (!isOpen) { return null }
+    return (
       <div className={styles.container}>
-        <header>
+        <div className={styles.closeContainer}>
+          <span onClick={closeReceiveModal}>
+            <Isvg src={x} />
+          </span>
+        </div>
+        <header className={styles.header}>
           <div className={styles.qrcodes}>
             <QRCode value={qrCodeType === 1 ? address : pubkey} />
           </div>
@@ -86,18 +88,15 @@ const ReceiveModal = ({
           </p>
         </section>
       </div>
-    </ReactModal>
-  )
+    )
+  }
 }
 
 ReceiveModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
-  hideActivityModal: PropTypes.func.isRequired,
   pubkey: PropTypes.string.isRequired,
   address: PropTypes.string.isRequired,
-  newAddress: PropTypes.func.isRequired,
-  changeQrCode: PropTypes.func.isRequired,
-  qrCodeType: PropTypes.number.isRequired
+  newAddress: PropTypes.func.isRequired
 }
 
 export default ReceiveModal

app/components/Wallet/ReceiveModal.scss

@@ -1,94 +1,105 @@
 @import '../../variables.scss';
 
+.container {
+  position: relative;
+  height: 100vh;
+  background: $bluegrey;
+}
+
 .closeContainer {
-  background: $lightgrey;
   text-align: right;
-  padding: 10px;
+  padding: 20px 40px 0px;
 
   span {
-    color: $darkestgrey;
-    font-size: 20px;
     cursor: pointer;
+    opacity: 1.0;
+    transition: 0.25s all;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  svg {
+    color: $white;
   }
 }
 
-.container {
-  header {
-    background: $lightgrey;
-    padding: 10px 40px 40px;
+.header {
+  background: $lightgrey;
+  padding: 10px 40px 40px;
+  text-align: center;
+
+  .qrcodes {
     text-align: center;
+    margin-top: 20px;
+  }
 
-    .qrcodes {
-      text-align: center;
-      margin-top: 20px;
-    }
+  .tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
 
-    .tabs {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      margin-top: 20px;
-
-      li {
-        margin: 0 20px;
-        color: $darkestgrey;
-        transition: all 0.25s;
-
-        &:hover {
-          color: $black;
-        }
-
-        &.active {
-          color: $black;
-          font-weight: bold;
-        }
+    li {
+      margin: 0 20px;
+      color: $darkestgrey;
+      transition: all 0.25s;
+
+      &:hover {
+        color: $black;
+      }
+
+      &.active {
+        color: $black;
+        font-weight: bold;
       }
     }
   }
+}
 
-  section {
-    margin: 25px 0;
-    padding: 25px;
+section {
+  margin: 25px 0;
+  padding: 25px;
 
-    h4 {
-      font-size: 14px;
-      font-weight: bold;
-      letter-spacing: 1.5px;
-      margin-bottom: 10px;
+  h4 {
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 1.5px;
+    margin-bottom: 10px;
 
-      span {
-        color: $blue;
-        cursor: pointer;
-      }
+    span {
+      color: $blue;
+      cursor: pointer;
     }
+  }
 
-    p {
-      display: flex;
-      flex-direction: row;
-      font-family: 'Roboto';
-      font-size: 14px;
-      font-weight: 200;
-      background: $lightgrey;
+  p {
+    display: flex;
+    flex-direction: row;
+    font-family: 'Roboto';
+    font-size: 14px;
+    font-weight: 200;
+    background: $lightgrey;
 
-      span {
-        padding: 15px;
-      }
+    span {
+      padding: 15px;
+    }
 
-      span:nth-child(1) {
-        flex: 9;
-        overflow-x: scroll;
-      }
+    span:nth-child(1) {
+      flex: 9;
+      overflow-x: scroll;
+    }
 
-      span:nth-child(2) {
-        background: $darkgrey;
-        color: $black;
-        cursor: pointer;
-        transition: all 0.25s;
+    span:nth-child(2) {
+      background: $darkgrey;
+      color: $black;
+      cursor: pointer;
+      transition: all 0.25s;
 
-        &:hover {
-          background: $darkestgrey;
-        }
+      &:hover {
+        background: $darkestgrey;
       }
     }
   }

app/components/Wallet/Wallet.js

@@ -2,107 +2,80 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { FaAngleDown } from 'react-icons/lib/fa'
 import Isvg from 'react-inlinesvg'
+
 import { btc } from 'utils'
 import Value from 'components/Value'
+
 import bitcoinIcon from 'icons/bitcoin.svg'
 import zapLogo from 'icons/zap_logo.svg'
 import qrCode from 'icons/qrcode.svg'
-import ReceiveModal from './ReceiveModal'
 
 import styles from './Wallet.scss'
 
-class Wallet extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      modalOpen: false,
-      qrCodeType: 1
-    }
-  }
-
-  render() {
-    const {
-      balance,
-      address,
-      info,
-      newAddress,
-      ticker,
-      currentTicker,
-      openPayForm,
-      openRequestForm
-    } = this.props
-
-    const { modalOpen, qrCodeType } = this.state
-    const usdAmount = btc.satoshisToUsd((parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10)), currentTicker.price_usd)
-
-    const changeQrCode = () => {
-      const qrCodeNum = this.state.qrCodeType === 1 ? 2 : 1
+const Wallet = ({
+  balance,
+  address,
+  info,
+  newAddress,
+  openReceiveModal,
+  ticker,
+  currentTicker,
+  openPayForm,
+  openRequestForm,
+  showPayLoadingScreen 
+}) => {
+  const usdAmount = btc.satoshisToUsd((parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10)), currentTicker.price_usd)
+  
+  return (
+    <div className={styles.wallet}>
+      <div className={styles.content}>
+        <header className={styles.header}>
+          <section className={styles.logo}>
+            <Isvg className={styles.bitcoinLogo} src={zapLogo} />
+          </section>
 
-      this.setState({ qrCodeType: qrCodeNum })
-    }
-
-    return (
-      <div className={styles.wallet}>
-        {
-          (
-            modalOpen &&
-            <ReceiveModal
-              isOpen={modalOpen}
-              hideActivityModal={() => this.setState({ modalOpen: false })}
-              pubkey={info.data.identity_pubkey}
-              address={address}
-              newAddress={newAddress}
-              qrCodeType={qrCodeType}
-              changeQrCode={changeQrCode}
-            />
-          )
-        }
-        <div className={styles.content}>
-          <header className={styles.header}>
-            <section className={styles.logo}>
-              <Isvg className={styles.bitcoinLogo} src={zapLogo} />
-            </section>
-
-            <section className={styles.user}>
-              <div>
-                <span>{info.data.alias}</span>
-                <FaAngleDown />
-              </div>
-            </section>
-          </header>
+          <section className={styles.user}>
+            <div>
+              <span>{info.data.alias}</span>
+              <FaAngleDown />
+            </div>
+          </section>
+        </header>
 
-          <div className={styles.left}>
-            <div className={styles.leftContent}>
-              <Isvg className={styles.bitcoinLogo} src={bitcoinIcon} />
-              <div className={styles.details}>
-                <h1>
-                  <span>
-                    <Value
-                      value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
-                      currency={ticker.currency}
-                      currentTicker={currentTicker}
-                    />
-                    <i className={styles.currency}>{btc.renderCurrency(ticker.currency)}</i>
-                  </span>
-                  <span onClick={() => this.setState({ modalOpen: true })}>
-                    <Isvg className={styles.bitcoinLogo} src={qrCode} />
-                  </span>
-                </h1>
-                <span className={styles.usdValue}>≈ ${usdAmount ? usdAmount.toLocaleString() : ''}</span>
-              </div>
+        <div className={styles.left}>
+          <div className={styles.leftContent}>
+            <Isvg className={styles.bitcoinLogo} src={bitcoinIcon} />
+            <div className={styles.details}>
+              <h1>
+                <span>
+                  <Value
+                    value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
+                    currency={ticker.currency}
+                    currentTicker={currentTicker}
+                  />
+                  <i className={styles.currency}>{btc.renderCurrency(ticker.currency)}</i>
+                </span>
+                <span onClick={openReceiveModal}>
+                  <Isvg className={styles.bitcoinLogo} src={qrCode} />
+                </span>
+              </h1>
+              <span className={styles.usdValue}>≈ ${usdAmount ? usdAmount.toLocaleString() : ''}</span>
             </div>
           </div>
-          <div className={styles.right}>
-            <div className={styles.rightContent}>
-              <div className={styles.pay} onClick={openPayForm}>Pay</div>
-              <div className={styles.request} onClick={openRequestForm}>Request</div>
-            </div>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.rightContent}>
+            <div className={styles.pay} onClick={openPayForm}>Pay</div>
+            <div className={styles.request} onClick={openRequestForm}>Request</div>
+          </div>
+          <div className={styles.notificationBox}>
+            <section className={styles.spinner} />
+            <section>Gang gang gang baby</section>
           </div>
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 Wallet.propTypes = {

app/components/Wallet/Wallet.scss

@@ -141,6 +141,27 @@
       margin-right: 20px;
     }
   }
+
+  .notificationBox {
+    text-align: right;
+    font-size: 12px;
+  }
 }
 
+.spinner {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left-color: rgba(0, 0, 0, 0.4);
+  -webkit-border-radius: 999px;
+  -moz-border-radius: 999px;
+  border-radius: 999px;
+}
 
+.spinner {
+  margin: 0 auto;
+  height: 20px;
+  width: 20px;
+  -webkit-animation: animation-rotate 1000ms linear infinite;
+  -moz-animation: animation-rotate 1000ms linear infinite;
+  -o-animation: animation-rotate 1000ms linear infinite;
+  animation: animation-rotate 1000ms linear infinite;
+}

app/reducers/address.js

@@ -5,6 +5,9 @@ import { ipcRenderer } from 'electron'
 export const GET_ADDRESS = 'GET_ADDRESS'
 export const RECEIVE_ADDRESS = 'RECEIVE_ADDRESS'
 
+export const OPEN_WALLET_MODAL = 'OPEN_WALLET_MODAL'
+export const CLOSE_WALLET_MODAL = 'CLOSE_WALLET_MODAL'
+
 // LND expects types to be sent as int, so this object will allow mapping from string to int
 const addressTypes = {
   p2wkh: 0,
@@ -21,6 +24,18 @@ export function getAddress() {
   }
 }
 
+export function openWalletModal() {
+  return {
+    type: OPEN_WALLET_MODAL
+  }
+}
+
+export function closeWalletModal() {
+  return {
+    type: CLOSE_WALLET_MODAL
+  }
+}
+
 // Send IPC event for getinfo
 export const newAddress = type => async (dispatch) => {
   dispatch(getAddress())
@@ -35,7 +50,10 @@ export const receiveAddress = (event, address) => dispatch => dispatch({ type: R
 // ------------------------------------
 const ACTION_HANDLERS = {
   [GET_ADDRESS]: state => ({ ...state, addressLoading: true }),
-  [RECEIVE_ADDRESS]: (state, { address }) => ({ ...state, addressLoading: false, address })
+  [RECEIVE_ADDRESS]: (state, { address }) => ({ ...state, addressLoading: false, address }),
+  
+  [OPEN_WALLET_MODAL]: state => ({ ...state, walletModal: true }),
+  [CLOSE_WALLET_MODAL]: state => ({ ...state, walletModal: false })
 }
 
 // ------------------------------------
@@ -43,7 +61,8 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const initialState = {
   addressLoading: false,
-  address: ''
+  address: '',
+  walletModal: false
 }
 
 export default function addressReducer(state = initialState, action) {

app/routes/activity/containers/ActivityContainer.js

@@ -20,9 +20,11 @@ import {
   activitySelectors,
   updateSearchText
 } from 'reducers/activity'
-import { newAddress } from 'reducers/address'
+import { newAddress, openWalletModal } from 'reducers/address'
 import { setFormType } from 'reducers/form'
 
+import { payFormSelectors } from 'reducers/payform'
+
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
@@ -37,6 +39,7 @@ const mapDispatchToProps = {
   changeFilter,
   toggleFilterPulldown,
   newAddress,
+  openWalletModal,
   fetchBalance,
   updateSearchText,
   setFormType
@@ -62,7 +65,9 @@ const mapStateToProps = state => ({
   currentTicker: tickerSelectors.currentTicker(state),
 
   currentActivity: activitySelectors.currentActivity(state)(state),
-  nonActiveFilters: activitySelectors.nonActiveFilters(state)
+  nonActiveFilters: activitySelectors.nonActiveFilters(state),
+
+  showPayLoadingScreen: payFormSelectors.showPayLoadingScreen(state),
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
@@ -72,9 +77,11 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     info: stateProps.info,
     ticker: stateProps.ticker,
     currentTicker: stateProps.currentTicker,
+    showPayLoadingScreen: stateProps.showPayLoadingScreen,
 
     setCurrency: dispatchProps.setCurrency,
     newAddress: dispatchProps.newAddress,
+    openReceiveModal: dispatchProps.openWalletModal,
     openPayForm: () => dispatchProps.setFormType('PAY_FORM'),
     openRequestForm: () => dispatchProps.setFormType('REQUEST_FORM')
   }

app/routes/app/components/App.js

@@ -11,6 +11,7 @@ import Network from 'components/Contacts/Network'
 import ContactModal from 'components/Contacts/ContactModal'
 import ContactsForm from 'components/Contacts/ContactsForm'
 
+import ReceiveModal from 'components/Wallet/ReceiveModal'
 import ActivityModal from 'components/Activity/ActivityModal'
 
 import styles from './App.scss'
@@ -57,6 +58,7 @@ class App extends Component {
       contactModalProps,
       contactsFormProps,
       networkTabProps,
+      receiveModalProps,
       activityModalProps,
 
       children
@@ -81,6 +83,7 @@ class App extends Component {
 
         <Form formType={form.formType} formProps={formProps} closeForm={closeForm} />
 
+        <ReceiveModal {...receiveModalProps} />
         <ActivityModal {...activityModalProps} />
 
         <div className={styles.content}>

app/routes/app/containers/AppContainer.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 
 import { fetchTicker, setCurrency, tickerSelectors } from 'reducers/ticker'
 
-import { newAddress } from 'reducers/address'
+import { newAddress, closeWalletModal } from 'reducers/address'
 
 import { fetchInfo } from 'reducers/info'
 
@@ -61,6 +61,7 @@ const mapDispatchToProps = {
   setCurrency,
 
   newAddress,
+  closeWalletModal,
 
   fetchInfo,
 
@@ -339,6 +340,14 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     }
   }
 
+  const receiveModalProps = {
+    isOpen: stateProps.address.walletModal,
+    pubkey: stateProps.info.data.identity_pubkey,
+    address: stateProps.address.address,
+    newAddress: dispatchProps.newAddress,
+    closeReceiveModal: dispatchProps.closeWalletModal
+  }
+
   return {
     ...stateProps,
     ...dispatchProps,
@@ -350,6 +359,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     contactsFormProps,
     // props for the contact modal
     contactModalProps,
+    // props for the receive modal
+    receiveModalProps,
     // props for the activity modals
     activityModalProps,
     // Props to pass to the pay form