From 34314d766aec5277bf6010af7cfa3f09dd7d1c51 Mon Sep 17 00:00:00 2001 From: George Lima Date: Thu, 10 Jan 2019 11:51:32 -0300 Subject: [PATCH] feature: show info screen after send coins --- app/containers/send.js | 9 ++++-- app/redux/modules/send.js | 36 ++++++++++++++++++++---- app/views/send.js | 59 +++++++++++++++++++++++++++++---------- 3 files changed, 81 insertions(+), 23 deletions(-) diff --git a/app/containers/send.js b/app/containers/send.js index fad3971..6e8dc8d 100644 --- a/app/containers/send.js +++ b/app/containers/send.js @@ -10,6 +10,7 @@ import { sendTransaction, sendTransactionSuccess, sendTransactionError, + resetSendTransaction, } from '../redux/modules/send'; import filterObjectNullKeys from '../utils/filterObjectNullKeys'; @@ -31,6 +32,7 @@ const mapStateToProps = ({ walletSummary, sendStatus }: AppState) => ({ addresses: walletSummary.addresses, error: sendStatus.error, isSending: sendStatus.isSending, + operationId: sendStatus.operationId, }); const mapDispatchToProps = (dispatch: Dispatch) => ({ @@ -43,7 +45,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ }: SendTransactionInput) => { dispatch(sendTransaction()); - const [sendErr] = await eres( + const [sendErr, operationId] = await eres( rpc.z_sendmany( from, // $FlowFixMe @@ -60,10 +62,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ ); // eslint-disable-next-line - if (sendErr) return dispatch(sendTransactionError({ error: sendErr.message })); + if (sendErr || !operationId) return dispatch(sendTransactionError({ error: sendErr.message })); - dispatch(sendTransactionSuccess()); + dispatch(sendTransactionSuccess({ operationId })); }, + resetSendView: () => dispatch(resetSendTransaction()), }); export const SendContainer = connect( diff --git a/app/redux/modules/send.js b/app/redux/modules/send.js index c21daae..5d9480e 100644 --- a/app/redux/modules/send.js +++ b/app/redux/modules/send.js @@ -4,15 +4,22 @@ import type { Action } from '../../types/redux'; export const SEND_TRANSACTION = 'SEND_TRANSACTION'; export const SEND_TRANSACTION_SUCCESS = 'SEND_TRANSACTION_SUCCESS'; export const SEND_TRANSACTION_ERROR = 'SEND_TRANSACTION_ERROR'; +export const RESET_SEND_TRANSACTION = 'RESET_SEND_TRANSACTION'; export const sendTransaction = () => ({ type: SEND_TRANSACTION, payload: {}, }); -export const sendTransactionSuccess = () => ({ +export const sendTransactionSuccess = ({ + operationId, +}: { + operationId: string, +}) => ({ type: SEND_TRANSACTION_SUCCESS, - payload: {}, + payload: { + operationId, + }, }); export const sendTransactionError = ({ error }: { error: string }) => ({ @@ -22,24 +29,41 @@ export const sendTransactionError = ({ error }: { error: string }) => ({ }, }); +export const resetSendTransaction = () => ({ + type: RESET_SEND_TRANSACTION, + payload: {}, +}); + export type State = { isSending: boolean, error: string | null, + operationId: string | null, }; const initialState = { isSending: false, error: null, + operationId: null, }; -export default (state: State = initialState, action: Action) => { +export default (state: State = initialState, action: Action): State => { switch (action.type) { case SEND_TRANSACTION: - return { isSending: true, error: null }; + return { isSending: true, error: null, operationId: null }; case SEND_TRANSACTION_SUCCESS: - return { isSending: false, error: null }; + return { + isSending: false, + error: null, + operationId: action.payload.operationId, + }; case SEND_TRANSACTION_ERROR: - return { isSending: false, error: action.payload.error }; + return { + isSending: false, + error: action.payload.error, + operationId: null, + }; + case RESET_SEND_TRANSACTION: + return initialState; default: return state; } diff --git a/app/views/send.js b/app/views/send.js index 71a9128..3aa8dd0 100644 --- a/app/views/send.js +++ b/app/views/send.js @@ -17,6 +17,7 @@ import { Button } from '../components/button'; import formatNumber from '../utils/formatNumber'; import type { SendTransactionInput } from '../containers/send'; +import type { State as SendState } from '../redux/modules/send'; const FormWrapper = styled.div` margin-top: ${props => props.theme.layoutContentPaddingTop}; @@ -77,14 +78,20 @@ const FormButton = styled(Button)` } `; -type Props = { +const SuccessWrapper = styled(ColumnComponent)` + align-items: center; + justify-content: center; + height: 100%; +`; + +type Props = SendState & { balance: number, zecPrice: number, addresses: string[], sendTransaction: SendTransactionInput => void, - // error: string | null, - isSending: boolean, + resetSendView: () => void, }; + type State = { showFee: boolean, from: string, @@ -95,16 +102,18 @@ type State = { memo: string, }; +const initialState = { + showFee: false, + from: '', + amount: '0', + to: '', + feeType: FEES.LOW, + fee: FEES.LOW, + memo: '', +}; + export class SendView extends PureComponent { - state = { - showFee: false, - from: '', - amount: '0', - to: '', - feeType: FEES.LOW, - fee: FEES.LOW, - memo: '', - }; + state = initialState; handleChange = (field: string) => (value: string) => { this.setState(() => ({ @@ -149,9 +158,20 @@ export class SendView extends PureComponent { }); }; + reset = () => { + const { resetSendView } = this.props; + + this.setState(initialState, () => resetSendView()); + }; + render() { const { - addresses, balance, zecPrice, isSending, + addresses, + balance, + zecPrice, + isSending, + error, + operationId, } = this.props; const { showFee, from, amount, to, memo, fee, feeType, @@ -171,9 +191,20 @@ export class SendView extends PureComponent { append: 'USD $', }); - return ( + return operationId ? ( + + + + + + + + ) : ( + {error && }