Merge pull request #6 from LN-Zap/feature/create-deposit-address

Feature/create deposit address

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,12 @@ export default function (lnd, event, msg, data) {
         .then(infoData => event.sender.send('receiveInfo', infoData))
         .catch(error => console.log('info error: ', error))
       break
+    case 'newaddress':
+    // Data looks like { address: '' }
+      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

@@ -0,0 +1,53 @@
+import { ipcRenderer } from 'electron'
+// ------------------------------------
+// Constants
+// ------------------------------------
+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
+// ------------------------------------
+export function getAddress() {
+  return {
+    type: GET_ADDRESS
+  }
+}
+
+// Send IPC event for getinfo
+export const newAddress = type => async (dispatch) => {
+  dispatch(getAddress())
+  ipcRenderer.send('lnd', { msg: 'newaddress', data: { type: addressTypes[type] } })
+}
+
+// Receive IPC event for info
+export const receiveAddress = (event, address) => dispatch => dispatch({ type: RECEIVE_ADDRESS, address })
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [GET_ADDRESS]: state => ({ ...state, addressLoading: true }),
+  [RECEIVE_ADDRESS]: (state, { address }) => ({ ...state, addressLoading: false, address })
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const initialState = {
+  addressLoading: false,
+  address: ''
+}
+
+export default function addressReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}

app/reducers/index.js

@@ -9,6 +9,7 @@ import peers from './peers'
 import channels from './channels'
 import form from './form'
 import invoice from './invoice'
+import address from './address'
 
 const rootReducer = combineReducers({
   router,
@@ -19,7 +20,8 @@ const rootReducer = combineReducers({
   peers,
   channels,
   form,
-  invoice
+  invoice,
+  address
 })
 
 export default rootReducer

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: { address },
       ticker,
       peers: { peersLoading, peers, peer, peerForm },
       channels: { channelsLoading, channels, channel, channelForm, pendingChannels },
@@ -35,8 +37,17 @@ class Wallet extends Component {
     return (
       <div className={styles.wallet}>
         <section className={styles.header}>
-          <ReactSVG path='../resources/zap_2.svg' />
-          <h1>{info.data.identity_pubkey}</h1>
+          <section className={styles.walletInfo}>
+            <ReactSVG path='../resources/zap_2.svg' />
+            <h1 data-hint='Node identity public key' className='hint--top'>{info.data.identity_pubkey}</h1>
+            <h4 className={`${styles.address} hint--top`} data-hint='Wallet address'>
+              <input
+                type='text'
+                value={address}
+                readOnly
+              />
+            </h4>
+          </section>
         </section>
         <section className={styles.walletData}>
           <Peers
@@ -87,7 +98,9 @@ Wallet.propTypes = {
   connectRequest: PropTypes.func.isRequired,
   disconnectRequest: PropTypes.func.isRequired,
   allChannels: PropTypes.array.isRequired,
-  openChannel: PropTypes.func.isRequired
+  openChannel: PropTypes.func.isRequired,
+  newAddress: PropTypes.func.isRequired,
+  address: PropTypes.string.isRequired
 }
 
 

app/routes/wallet/components/Wallet.scss

@@ -7,18 +7,42 @@
 .header {
 	background: $white;
 	padding: 80px 30px;
-	text-align: center;
 	border-bottom: 1px solid $darkgrey;
+	text-align: center;
+
+	.walletInfo {
+		width: 75%;
+		margin: 0 auto;
+	}
 
 	svg {
 		width: 100px;
 		height: 100px;
+		text-align: center;
 	}
 
 	h1 {
-		color: $black;
 		font-size: 20px;
 		margin: 20px 0;
+		font-weight: bold;
+		color: $black;
+		text-align: center;
+	}
+
+	.address {
+		text-align: center;
+		margin-top: 10px;
+
+		input[type=text] {
+			width: 50%;
+			text-align: center;
+			font-size: 14px;
+			font-weight: 200;
+			border-radius: 7px;
+			background: $lightgrey;
+			border: 1px solid $main;
+			padding: 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,