Merge pull request #61 from andrerfneves/feature/receive-get-new-address

Feature/receive get new address

app/assets/images/plus_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#FFF" d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/></svg>

app/components/wallet-address.js

@@ -3,7 +3,6 @@ import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import { Transition, animated } from 'react-spring';
 
-import { ColumnComponent } from './column';
 import { Button } from './button';
 import { QRCode } from './qrcode';
 
@@ -18,6 +17,7 @@ const AddressWrapper = styled.div`
   border-radius: 6px;
   padding: 7px 13px;
   width: 100%;
+  margin-bottom: 5px;
 `;
 
 const Input = styled.input`
@@ -56,7 +56,6 @@ const QRCodeWrapper = styled.div`
   background-color: #000;
   border-radius: 6px;
   padding: 20px;
-  margin-top: 10px;
   width: 100%;
 `;
 
@@ -108,7 +107,7 @@ export class WalletAddress extends PureComponent<Props, State> {
     const buttonLabel = `${isVisible ? 'Hide' : 'Show'} details and QR Code`;
 
     return (
-      <ColumnComponent width='100%'>
+      <div>
         <AddressWrapper>
           <Input
             value={isVisible ? address : truncateAddress(address)}
@@ -152,7 +151,7 @@ export class WalletAddress extends PureComponent<Props, State> {
             }
           </Transition>
         </RevealsMain>
-      </ColumnComponent>
+      </div>
     );
   }
 }

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 dispatch(getNewAddressError({ error: 'Unable to generate a new address' }));
+
+    dispatch(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

@@ -1,5 +1,5 @@
 // @flow
-import React, { Fragment, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import { Transition, animated } from 'react-spring';
 
@@ -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`
@@ -54,17 +58,12 @@ const RevealsMain = styled.div`
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-
-  & > div {
-    top: 0;
-    right: 0;
-    left: 0;
-  }
 `;
 
 type Props = {
   addresses: Array<string>,
   loadAddresses: () => void,
+  getNewAddress: ({ type: addressType }) => void,
 };
 
 type State = {
@@ -86,67 +85,65 @@ export class ReceiveView extends PureComponent<Props, State> {
     showAdditionalOptions: !prevState.showAdditionalOptions,
   }));
 
-  renderShieldedAddresses = (address: string) => {
-    const { showAdditionalOptions } = this.state;
-    const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
+  generateNewAddress = (type: addressType) => {
+    const { getNewAddress } = this.props;
 
-    return (
-      <Fragment key={address}>
-        <Label value='Shielded Address' />
-        <Row alignItems='center' justifyContent='space-between'>
-          <WalletAddress address={address} />
-        </Row>
-        <Row>
-          <ShowMoreButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
-            <ShowMoreIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
-            <TextComponent value={buttonText} />
-          </ShowMoreButton>
-        </Row>
-      </Fragment>
-    );
-  };
-
-  renderTransparentAddresses = (address: string) => {
-    const { showAdditionalOptions } = this.state;
-
-    return (
-      <RevealsMain key={address}>
-        <Transition
-          native
-          items={showAdditionalOptions}
-          enter={[{ height: 'auto', opacity: 1 }]}
-          leave={{ height: 0, opacity: 0 }}
-          from={{
-            position: 'absolute',
-            overflow: 'hidden',
-            height: 0,
-            opacity: 0,
-          }}
-        >
-          {show => show
-            && (props => (
-              <animated.div style={props}>
-                <Label value='Transparent Address (not private)' />
-                <Row key={address} alignItems='center' justifyContent='space-between'>
-                  <WalletAddress address={address} />
-                </Row>
-              </animated.div>
-            ))
-          }
-        </Transition>
-      </RevealsMain>
-    );
+    getNewAddress({ type });
   };
 
   render() {
     const { addresses } = this.props;
+    const { showAdditionalOptions } = this.state;
+    const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
+
+    const shieldedAddresses = addresses.filter(addr => addr.startsWith('z'));
+    const transparentAddresses = addresses.filter(addr => addr.startsWith('t'));
 
     return (
       <div>
-        {(addresses || []).map((address, index) => {
-          if (index === 0) return this.renderShieldedAddresses(address);
-          return this.renderTransparentAddresses(address);
-        })}
+        <Label value='Shielded Address' />
+        {shieldedAddresses.map(addr => (
+          <WalletAddress key={addr} address={addr} />
+        ))}
+        <Row>
+          <ActionButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
+            <ActionIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
+            <TextComponent value={buttonText} />
+          </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>
+        <RevealsMain>
+          <Transition
+            native
+            items={showAdditionalOptions}
+            enter={[{ opacity: 1 }]}
+            leave={{ height: 0, opacity: 0 }}
+            from={{
+              position: 'absolute',
+              overflow: 'hidden',
+              height: 0,
+              opacity: 0,
+            }}
+          >
+            {show => show
+              && (props => (
+                <animated.div style={{ ...props, width: '100%', height: 'auto' }}>
+                  <Label value='Transparent Address (not private)' />
+                  {transparentAddresses.map(addr => (
+                    <WalletAddress key={addr} address={addr} />
+                  ))}
+                </animated.div>
+              ))
+            }
+          </Transition>
+        </RevealsMain>
       </div>
     );
   }