feature(address): hard code basic address html mock w/ basic reducer

app/reducers/address.js

@@ -0,0 +1,46 @@
+import { ipcRenderer } from 'electron'
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const GET_ADDRESS = 'GET_ADDRESS'
+export const RECEIVE_ADDRESS = 'RECEIVE_ADDRESS'
+
+// ------------------------------------
+// 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' })
+}
+
+// Receive IPC event for info
+export const receiveAddress = (event, address) => dispatch => dispatch({ type: RECEIVE_INFO, address })
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [GET_ADDRESS]: state => ({ ...state, infoLoading: 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/routes/wallet/components/Wallet.js

@@ -35,8 +35,18 @@ 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>{info.data.identity_pubkey}</h1>
+            <section className={styles.address}>
+              <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>
+            </section>
+          </section>
         </section>
         <section className={styles.walletData}>
           <Peers

app/routes/wallet/components/Wallet.scss

@@ -7,18 +7,56 @@
 .header {
 	background: $white;
 	padding: 80px 30px;
-	text-align: center;
 	border-bottom: 1px solid $darkgrey;
+	text-align: center;
+
+	.walletInfo {
+		width: 50%;
+		margin: 0 auto;
+	}
 
 	svg {
 		width: 100px;
 		height: 100px;
+		text-align: center;
 	}
 
 	h1 {
-		color: $black;
-		font-size: 20px;
 		margin: 20px 0;
+		font-weight: 200;
+		font-size: 20px;
+		color: $black;
+		text-align: left;
+	}
+
+	.address {
+		text-align: left;
+		margin-top: 30px;
+
+		.addressButton {
+			display: inline-block;
+			border: 1px solid $main;
+			border-radius: 7px;
+			font-size: 10px;
+			cursor: pointer;
+			padding: 10px;
+			color: $main;
+			transition: all 0.25s;
+			
+			&:hover {
+				color: $white;
+				background: $main;
+			}
+		}
+
+		.addressOptions {
+			display: inline-block;
+			margin-left: 30px;
+
+			span {
+				margin: 0 5px;
+			}
+		}
 	}
 }