feature(newaddress): tie frontend to LND, creating and displaying real addresses

app/lnd/methods/index.js

@@ -8,6 +8,7 @@ import disconnectpeer from './disconnectpeer'
 import info from './info'
 import invoice from './invoice'
 import invoices from './invoices'
+import newaddress from './newaddress'
 import openchannel from './openchannel'
 import payinvoice from './payinvoice'
 import payments from './payments'
@@ -22,6 +23,11 @@ export default function (lnd, event, msg, data) {
         .then(infoData => event.sender.send('receiveInfo', infoData))
         .catch(error => console.log('info error: ', error))
       break
+    case 'newaddress':
+      newaddress(lnd, data.type)
+        .then(({ address }) => event.sender.send('receiveAddress', address))
+        .catch(error => console.log('newaddress error: ', error))
+      break
     case 'peers':
     // Data looks like { peers: [] }
       peers(lnd)

app/lnd/methods/newaddress.js

@@ -0,0 +1,10 @@
+// LND Generate New Address
+export default function info(lnd, type) {
+  return new Promise((resolve, reject) => {
+    lnd.newAddress({ type }, (err, data) => {
+      if (err) { reject(err) }
+
+      resolve(data)
+    })
+  })
+}

app/reducers/address.js

@@ -5,6 +5,13 @@ import { ipcRenderer } from 'electron'
 export const GET_ADDRESS = 'GET_ADDRESS'
 export const RECEIVE_ADDRESS = 'RECEIVE_ADDRESS'
 
+// LND expects types to be sent as int, so this object will allow mapping from string to int 
+const addressTypes = {
+  p2wkh: 0,
+  np2wkh: 1,
+  p2pkh: 2
+}
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -17,17 +24,17 @@ export function getAddress() {
 // Send IPC event for getinfo
 export const newAddress = (type) => async (dispatch) => {
   dispatch(getAddress())
-  ipcRenderer.send('lnd', { msg: 'newaddress' })
+  ipcRenderer.send('lnd', { msg: 'newaddress', data: { type: addressTypes[type] } })
 }
 
 // Receive IPC event for info
-export const receiveAddress = (event, address) => dispatch => dispatch({ type: RECEIVE_INFO, address })
+export const receiveAddress = (event, address) => dispatch => dispatch({ type: RECEIVE_ADDRESS, address })
 
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [GET_ADDRESS]: state => ({ ...state, infoLoading: true }),
+  [GET_ADDRESS]: state => ({ ...state, addressLoading: true }),
   [RECEIVE_ADDRESS]: (state, { address }) => ({ ...state, addressLoading: false, address })
 }
 

app/reducers/ipc.js

@@ -1,5 +1,6 @@
 import createIpc from 'redux-electron-ipc'
 import { receiveInfo } from './info'
+import { receiveAddress } from './address'
 import { receivePeers, connectSuccess, disconnectSuccess } from './peers'
 import {
   receiveChannels,
@@ -30,7 +31,8 @@ const ipc = createIpc({
   pushchannelerror,
   pushchannelstatus,
   connectSuccess,
-  disconnectSuccess
+  disconnectSuccess,
+  receiveAddress
 })
 
 export default ipc

app/routes/wallet/components/Wallet.js

@@ -7,16 +7,18 @@ import styles from './Wallet.scss'
 
 class Wallet extends Component {
   componentWillMount() {
-    const { fetchInfo, fetchPeers, fetchChannels } = this.props
+    const { fetchInfo, fetchPeers, fetchChannels, newAddress } = this.props
 
     fetchInfo()
     fetchPeers()
     fetchChannels()
+    newAddress('p2pkh')
   }
 
   render() {
     const {
       info,
+      address: { addressLoading, address },
       ticker,
       peers: { peersLoading, peers, peer, peerForm },
       channels: { channelsLoading, channels, channel, channelForm, pendingChannels },
@@ -29,7 +31,8 @@ class Wallet extends Component {
       connectRequest,
       disconnectRequest,
       allChannels,
-      openChannel
+      openChannel,
+      newAddress
     } = this.props
 
     return (
@@ -38,13 +41,14 @@ class Wallet extends Component {
           <section className={styles.walletInfo}>
             <ReactSVG path='../resources/zap_2.svg' />
             <h1>{info.data.identity_pubkey}</h1>
-            <section className={styles.address}>
+            <section className={styles.addressContainer}>
               <span className={`${styles.addressButton} ${styles.newAddress}`}>New wallet address</span>
               <div className={styles.addressOptions}>
                 <span className={`${styles.addressButton} ${styles.p2wkh}`}>p2wkh</span>
                 <span className={`${styles.addressButton} ${styles.np2wkh}`}>np2wkh</span>
                 <span className={`${styles.addressButton} ${styles.p2pkh}`}>p2pkh</span>
               </div>
+              <div className={styles.address}>{address}</div>
             </section>
           </section>
         </section>

app/routes/wallet/components/Wallet.scss

@@ -24,12 +24,11 @@
 	h1 {
 		margin: 20px 0;
 		font-weight: 200;
-		font-size: 20px;
 		color: $black;
 		text-align: left;
 	}
 
-	.address {
+	.addressContainer {
 		text-align: left;
 		margin-top: 30px;
 
@@ -57,6 +56,14 @@
 				margin: 0 5px;
 			}
 		}
+
+		.address {
+			padding: 10px;
+			background: $darkgrey;
+			text-align: center;
+			border-radius: 7px;
+			margin-top: 10px;
+		}
 	}
 }
 

app/routes/wallet/containers/WalletContainer.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { newAddress } from '../../../reducers/address'
 import { fetchInfo } from '../../../reducers/info'
 import {
   fetchPeers,
@@ -19,6 +20,8 @@ import {
 import Wallet from '../components/Wallet'
 
 const mapDispatchToProps = {
+  newAddress,
+  
   fetchInfo,
 
   fetchPeers,
@@ -37,6 +40,7 @@ const mapDispatchToProps = {
 
 const mapStateToProps = state => ({
   info: state.info,
+  address: state.address,
   ticker: state.ticker,
 
   peers: state.peers,