feature: show info screen after send coins

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(

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;
   }

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<Props, State> {
-  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<Props, State> {
     });
   };
 
+  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<Props, State> {
       append: 'USD $',
     });
 
-    return (
+    return operationId ? (
+      <SuccessWrapper>
+        <TextComponent value={`Processing operation: ${operationId}`} />
+        <TextComponent value={`Amount: ${amount}`} />
+        <TextComponent value={`From: ${from}`} />
+        <TextComponent value={`To: ${to}`} />
+        <button type='button' onClick={this.reset}>
+          Send again!
+        </button>
+      </SuccessWrapper>
+    ) : (
       <RowComponent justifyContent='space-between'>
         <FormWrapper>
+          {error && <TextComponent value={error} />}
           <InputLabelComponent value='From' />
           <SelectComponent
             onChange={this.handleChange('from')}