Merge branch 'develop' of https://github.com/andrerfneves/zec-react-wallet into feature/test-components-with-jest

app/components/select.js

@@ -70,23 +70,30 @@ const OptionsWrapper = styled.div`
   flex-direction: column;
   position: absolute;
   width: 100%;
-  ${props => `${props.placement}: ${`-${props.optionsAmount * 62}px`}`};
+  ${props => `${props.placement}: ${`-${props.optionsAmount * 40}px`}`};
   overflow-y: auto;
 `;
 
 const Option = styled.button`
   border: none;
   background: none;
-  height: 60px;
-  background-color: ${
-  props => props.bgColor || props.theme.colors.inputBackground};
+  height: 40px;
+  background-color: #5d5d5d;
   cursor: pointer;
   z-index: 99;
   text-transform: capitalize;
+  padding: 5px 10px;
+  border-bottom: 1px solid #4e4b4b;
 
   &:hover {
     background-color: ${props => props.theme.colors.background};
   }
+
+  &:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-bottom: 1px solid transparent;
+  }
 `;
 
 type Props = {
@@ -135,10 +142,10 @@ export class SelectComponent extends PureComponent<Props, State> {
     const { isOpen } = this.state;
 
     if (placement === 'top') {
-      return isOpen ? ChevronUp : ChevronDown;
+      return !isOpen ? ChevronUp : ChevronDown;
     }
 
-    return isOpen ? ChevronDown : ChevronUp;
+    return !isOpen ? ChevronDown : ChevronUp;
   };
 
   render() {

app/containers/send.js

@@ -3,10 +3,12 @@ import { connect } from 'react-redux';
 import eres from 'eres';
 import { BigNumber } from 'bignumber.js';
 
+import store from '../../config/electron-store';
 import rpc from '../../services/api';
 import { SendView } from '../views/send';
 
 import {
+  loadZECPrice,
   sendTransaction,
   sendTransactionSuccess,
   sendTransactionError,
@@ -33,10 +35,10 @@ export type SendTransactionInput = {
   memo: string,
 };
 
-const mapStateToProps = ({ walletSummary, sendStatus }: AppState) => ({
+const mapStateToProps = ({ walletSummary, sendStatus, receive }: AppState) => ({
   balance: walletSummary.total,
-  zecPrice: walletSummary.zecPrice,
-  addresses: walletSummary.addresses,
+  zecPrice: sendStatus.zecPrice,
+  addresses: receive.addresses,
   error: sendStatus.error,
   isSending: sendStatus.isSending,
   operationId: sendStatus.operationId,
@@ -145,6 +147,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
       }),
     );
   },
+  loadZECPrice: () => dispatch(
+    loadZECPrice({
+      value: store.get('ZEC_DOLLAR_PRICE'),
+    }),
+  ),
 });
 
 // $FlowFixMe

app/redux/modules/send.js

@@ -7,6 +7,7 @@ export const SEND_TRANSACTION_ERROR = 'SEND_TRANSACTION_ERROR';
 export const RESET_SEND_TRANSACTION = 'RESET_SEND_TRANSACTION';
 export const VALIDATE_ADDRESS_SUCCESS = 'VALIDATE_ADDRESS_SUCCESS';
 export const VALIDATE_ADDRESS_ERROR = 'VALIDATE_ADDRESS_SUCCESS';
+export const LOAD_ZEC_PRICE = 'LOAD_ZEC_PRICE';
 
 export const sendTransaction = () => ({
   type: SEND_TRANSACTION,
@@ -48,11 +49,19 @@ export const validateAddressError = () => ({
   payload: {},
 });
 
+export const loadZECPrice = ({ value }: { value: number }) => ({
+  type: LOAD_ZEC_PRICE,
+  payload: {
+    value,
+  },
+});
+
 export type State = {
   isSending: boolean,
   isToAddressValid: boolean,
   error: string | null,
   operationId: string | null,
+  zecPrice: number,
 };
 
 const initialState: State = {
@@ -60,6 +69,7 @@ const initialState: State = {
   error: null,
   operationId: null,
   isToAddressValid: false,
+  zecPrice: 0,
 };
 
 export default (state: State = initialState, action: Action): State => {
@@ -95,6 +105,8 @@ export default (state: State = initialState, action: Action): State => {
         ...state,
         isToAddressValid: false,
       };
+    case LOAD_ZEC_PRICE:
+      return { ...state, zecPrice: action.payload.value };
     case RESET_SEND_TRANSACTION:
       return initialState;
     default:

app/views/send.js

@@ -52,12 +52,13 @@ const FormWrapper = styled.div`
 `;
 
 const SendWrapper = styled(ColumnComponent)`
-  margin-top: 60px;
   width: 25%;
+  margin-top: 60px;
 `;
 
 const AmountWrapper = styled.div`
   width: 100%;
+
   &:before {
     content: 'ZEC';
     font-family: ${props => props.theme.fontFamily};
@@ -66,28 +67,16 @@ const AmountWrapper = styled.div`
     margin-left: 15px;
     display: block;
     transition: all 0.05s ease-in-out;
-    opacity: ${props => (props.isEmpty ? '0' : '1')};
+    opacity: ${props => (props.isEmpty ? 0.25 : 1)};
     color: #fff;
+    z-index: 20;
   }
 `;
 
 const AmountInput = styled(InputComponent)`
-  padding-left: ${props => (props.isEmpty ? '15' : '50')}px;
+  padding-left: 50px;
 `;
 
-// const ShowFeeButton = styled.button`
-//   align-items: center;
-//   background: none;
-//   border: none;
-//   cursor: pointer;
-//   display: flex;
-//   width: 100%;
-//   color: ${props => props.theme.colors.text};
-//   outline: none;
-//   margin-bottom: 15px;
-//   margin-top: 15px;
-// `;
-
 const ShowFeeButton = styled.button`
   background: none;
   border: none;
@@ -141,6 +130,7 @@ const InfoCardUSD = styled(TextComponent)`
 `;
 
 const FormButton = styled(Button)`
+  width: 100%;
   margin: 10px 0;
   border-color: ${props => (props.focused
     ? props.theme.colors.activeItem
@@ -210,6 +200,8 @@ type Props = {
   sendTransaction: SendTransactionInput => void,
   resetSendView: () => void,
   validateAddress: ({ address: string }) => void,
+  loadAddresses: () => void,
+  loadZECPrice: () => void,
 };
 
 type State = {
@@ -236,9 +228,11 @@ export class SendView extends PureComponent<Props, State> {
   state = initialState;
 
   componentDidMount() {
-    const { resetSendView } = this.props;
+    const { resetSendView, loadAddresses, loadZECPrice } = this.props;
 
     resetSendView();
+    loadAddresses();
+    loadZECPrice();
   }
 
   handleChange = (field: string) => (value: string) => {
@@ -340,7 +334,7 @@ export class SendView extends PureComponent<Props, State> {
     /* eslint-disable react/no-unused-prop-types */
     valueSent: string,
     valueSentInUsd: string,
-    toggle: () => void
+    toggle: () => void,
     /* eslint-enable react/no-unused-prop-types */
   }) => {
     // eslint-disable-next-line react/prop-types
@@ -464,7 +458,7 @@ export class SendView extends PureComponent<Props, State> {
               type='number'
               onChange={this.handleChange('amount')}
               value={String(amount)}
-              placeholder='ZEC 0.0'
+              placeholder='0.0'
               min={0.01}
             />
           </AmountWrapper>