feat(receive): add getnewaddress button

app/containers/receive.js

@@ -7,6 +7,9 @@ import { ReceiveView } from '../views/receive';
 import {
   loadAddressesSuccess,
   loadAddressesError,
+  getNewAddressSuccess,
+  getNewAddressError,
+  type addressType,
 } from '../redux/modules/receive';
 
 import rpc from '../../services/api';
@@ -22,9 +25,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   loadAddresses: async () => {
     const [zAddressesErr, zAddresses] = await eres(rpc.z_listaddresses());
 
-    const [tAddressesErr, transparentAddresses] = await eres(
-      rpc.getaddressesbyaccount(''),
-    );
+    const [tAddressesErr, transparentAddresses] = await eres(rpc.getaddressesbyaccount(''));
 
     if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
 
@@ -34,6 +35,15 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
       }),
     );
   },
+  getNewAddress: async ({ type }: { type: addressType }) => {
+    const [error, address] = await eres(
+      type === 'shielded' ? rpc.z_getnewaddress() : rpc.getnewaddress(''),
+    );
+
+    if (error || !address) return getNewAddressError({ error: 'Unable to generate a new address' });
+
+    getNewAddressSuccess({ address });
+  },
 });
 
 // $FlowFixMe

app/redux/modules/receive.js

@@ -4,6 +4,8 @@ import type { Action } from '../../types/redux';
 // Actions
 export const LOAD_ADDRESSES_SUCCESS = 'LOAD_ADDRESSES_SUCCESS';
 export const LOAD_ADDRESSES_ERROR = 'LOAD_ADDRESSES_ERROR';
+export const GET_NEW_ADDRESS_SUCCESS = 'GET_NEW_ADDRESS_SUCCESS';
+export const GET_NEW_ADDRESS_ERROR = 'GET_NEW_ADDRESS_ERROR';
 
 export const loadAddressesSuccess = ({ addresses }: { addresses: string[] }) => ({
   type: LOAD_ADDRESSES_SUCCESS,
@@ -17,6 +19,22 @@ export const loadAddressesError = ({ error }: { error: string }) => ({
   payload: { error },
 });
 
+export const getNewAddressSuccess = ({ address }: { address: string }) => ({
+  type: GET_NEW_ADDRESS_SUCCESS,
+  payload: {
+    address,
+  },
+});
+
+export const getNewAddressError = ({ error }: { error: string }) => ({
+  type: GET_NEW_ADDRESS_ERROR,
+  payload: {
+    error,
+  },
+});
+
+export type addressType = 'transparent' | 'shielded';
+
 export type State = {
   addresses: string[],
   error: string | null,
@@ -40,6 +58,16 @@ export default (state: State = initialState, action: Action) => {
         error: action.payload.error,
         addresses: [],
       };
+    case GET_NEW_ADDRESS_SUCCESS:
+      return {
+        error: null,
+        addresses: [...state.addresses, action.payload.address],
+      };
+    case GET_NEW_ADDRESS_ERROR:
+      return {
+        ...state,
+        error: action.payload.error,
+      };
     default:
       return state;
   }

app/views/receive.js

@@ -9,6 +9,9 @@ import { TextComponent } from '../components/text';
 import { WalletAddress } from '../components/wallet-address';
 
 import MenuIcon from '../assets/images/menu_icon.svg';
+import PlusIcon from '../assets/images/plus_icon.svg';
+
+import type { addressType } from '../redux/modules/receive';
 
 const Row = styled(RowComponent)`
   margin-bottom: 10px;
@@ -22,7 +25,7 @@ const Label = styled(InputLabelComponent)`
   margin-bottom: 5px;
 `;
 
-const ShowMoreButton = styled.button`
+const ActionButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -39,12 +42,13 @@ const ShowMoreButton = styled.button`
   }
 `;
 
-const ShowMoreIcon = styled.img`
+const ActionIcon = styled.img`
   width: 25px;
   height: 25px;
   border: 1px solid ${props => props.theme.colors.text};
   border-radius: 100%;
   margin-right: 11.5px;
+  padding: 5px;
 `;
 
 const RevealsMain = styled.div`
@@ -65,6 +69,7 @@ const RevealsMain = styled.div`
 type Props = {
   addresses: Array<string>,
   loadAddresses: () => void,
+  getNewAddress: ({ type: addressType }) => void,
 };
 
 type State = {
@@ -97,10 +102,18 @@ export class ReceiveView extends PureComponent<Props, State> {
           <WalletAddress address={address} />
         </Row>
         <Row>
-          <ShowMoreButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
-            <ShowMoreIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
+          <ActionButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
+            <ActionIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
             <TextComponent value={buttonText} />
-          </ShowMoreButton>
+          </ActionButton>
+          <ActionButton onClick={() => this.generateNewAddress('shielded')}>
+            <ActionIcon src={PlusIcon} alt='New Shielded Address' />
+            <TextComponent value='New Shielded Address' />
+          </ActionButton>
+          <ActionButton onClick={() => this.generateNewAddress('transparent')}>
+            <ActionIcon src={PlusIcon} alt='New Transparent Address' />
+            <TextComponent value='New Transparent Address' />
+          </ActionButton>
         </Row>
       </Fragment>
     );
@@ -109,6 +122,8 @@ export class ReceiveView extends PureComponent<Props, State> {
   renderTransparentAddresses = (address: string) => {
     const { showAdditionalOptions } = this.state;
 
+    console.log(address);
+
     return (
       <RevealsMain key={address}>
         <Transition
@@ -138,15 +153,20 @@ export class ReceiveView extends PureComponent<Props, State> {
     );
   };
 
+  generateNewAddress = (type: addressType) => {
+    const { getNewAddress } = this.props;
+
+    getNewAddress({ type });
+  };
+
   render() {
     const { addresses } = this.props;
 
     return (
       <div>
-        {(addresses || []).map((address, index) => {
-          if (index === 0) return this.renderShieldedAddresses(address);
-          return this.renderTransparentAddresses(address);
-        })}
+        {(addresses || []).map((address, index) => (index === 0
+          ? this.renderShieldedAddresses(address)
+          : this.renderTransparentAddresses(address)))}
       </div>
     );
   }