feature: show info screen after send coins
This commit is contained in:
parent
cf59a4183e
commit
34314d766a
|
@ -10,6 +10,7 @@ import {
|
||||||
sendTransaction,
|
sendTransaction,
|
||||||
sendTransactionSuccess,
|
sendTransactionSuccess,
|
||||||
sendTransactionError,
|
sendTransactionError,
|
||||||
|
resetSendTransaction,
|
||||||
} from '../redux/modules/send';
|
} from '../redux/modules/send';
|
||||||
|
|
||||||
import filterObjectNullKeys from '../utils/filterObjectNullKeys';
|
import filterObjectNullKeys from '../utils/filterObjectNullKeys';
|
||||||
|
@ -31,6 +32,7 @@ const mapStateToProps = ({ walletSummary, sendStatus }: AppState) => ({
|
||||||
addresses: walletSummary.addresses,
|
addresses: walletSummary.addresses,
|
||||||
error: sendStatus.error,
|
error: sendStatus.error,
|
||||||
isSending: sendStatus.isSending,
|
isSending: sendStatus.isSending,
|
||||||
|
operationId: sendStatus.operationId,
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||||
|
@ -43,7 +45,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||||
}: SendTransactionInput) => {
|
}: SendTransactionInput) => {
|
||||||
dispatch(sendTransaction());
|
dispatch(sendTransaction());
|
||||||
|
|
||||||
const [sendErr] = await eres(
|
const [sendErr, operationId] = await eres(
|
||||||
rpc.z_sendmany(
|
rpc.z_sendmany(
|
||||||
from,
|
from,
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
|
@ -60,10 +62,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||||
);
|
);
|
||||||
|
|
||||||
// eslint-disable-next-line
|
// 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(
|
export const SendContainer = connect(
|
||||||
|
|
|
@ -4,15 +4,22 @@ import type { Action } from '../../types/redux';
|
||||||
export const SEND_TRANSACTION = 'SEND_TRANSACTION';
|
export const SEND_TRANSACTION = 'SEND_TRANSACTION';
|
||||||
export const SEND_TRANSACTION_SUCCESS = 'SEND_TRANSACTION_SUCCESS';
|
export const SEND_TRANSACTION_SUCCESS = 'SEND_TRANSACTION_SUCCESS';
|
||||||
export const SEND_TRANSACTION_ERROR = 'SEND_TRANSACTION_ERROR';
|
export const SEND_TRANSACTION_ERROR = 'SEND_TRANSACTION_ERROR';
|
||||||
|
export const RESET_SEND_TRANSACTION = 'RESET_SEND_TRANSACTION';
|
||||||
|
|
||||||
export const sendTransaction = () => ({
|
export const sendTransaction = () => ({
|
||||||
type: SEND_TRANSACTION,
|
type: SEND_TRANSACTION,
|
||||||
payload: {},
|
payload: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const sendTransactionSuccess = () => ({
|
export const sendTransactionSuccess = ({
|
||||||
|
operationId,
|
||||||
|
}: {
|
||||||
|
operationId: string,
|
||||||
|
}) => ({
|
||||||
type: SEND_TRANSACTION_SUCCESS,
|
type: SEND_TRANSACTION_SUCCESS,
|
||||||
payload: {},
|
payload: {
|
||||||
|
operationId,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const sendTransactionError = ({ error }: { error: string }) => ({
|
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 = {
|
export type State = {
|
||||||
isSending: boolean,
|
isSending: boolean,
|
||||||
error: string | null,
|
error: string | null,
|
||||||
|
operationId: string | null,
|
||||||
};
|
};
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
isSending: false,
|
isSending: false,
|
||||||
error: null,
|
error: null,
|
||||||
|
operationId: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default (state: State = initialState, action: Action) => {
|
export default (state: State = initialState, action: Action): State => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case SEND_TRANSACTION:
|
case SEND_TRANSACTION:
|
||||||
return { isSending: true, error: null };
|
return { isSending: true, error: null, operationId: null };
|
||||||
case SEND_TRANSACTION_SUCCESS:
|
case SEND_TRANSACTION_SUCCESS:
|
||||||
return { isSending: false, error: null };
|
return {
|
||||||
|
isSending: false,
|
||||||
|
error: null,
|
||||||
|
operationId: action.payload.operationId,
|
||||||
|
};
|
||||||
case SEND_TRANSACTION_ERROR:
|
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:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@ import { Button } from '../components/button';
|
||||||
import formatNumber from '../utils/formatNumber';
|
import formatNumber from '../utils/formatNumber';
|
||||||
|
|
||||||
import type { SendTransactionInput } from '../containers/send';
|
import type { SendTransactionInput } from '../containers/send';
|
||||||
|
import type { State as SendState } from '../redux/modules/send';
|
||||||
|
|
||||||
const FormWrapper = styled.div`
|
const FormWrapper = styled.div`
|
||||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
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,
|
balance: number,
|
||||||
zecPrice: number,
|
zecPrice: number,
|
||||||
addresses: string[],
|
addresses: string[],
|
||||||
sendTransaction: SendTransactionInput => void,
|
sendTransaction: SendTransactionInput => void,
|
||||||
// error: string | null,
|
resetSendView: () => void,
|
||||||
isSending: boolean,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
showFee: boolean,
|
showFee: boolean,
|
||||||
from: string,
|
from: string,
|
||||||
|
@ -95,16 +102,18 @@ type State = {
|
||||||
memo: string,
|
memo: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
showFee: false,
|
||||||
|
from: '',
|
||||||
|
amount: '0',
|
||||||
|
to: '',
|
||||||
|
feeType: FEES.LOW,
|
||||||
|
fee: FEES.LOW,
|
||||||
|
memo: '',
|
||||||
|
};
|
||||||
|
|
||||||
export class SendView extends PureComponent<Props, State> {
|
export class SendView extends PureComponent<Props, State> {
|
||||||
state = {
|
state = initialState;
|
||||||
showFee: false,
|
|
||||||
from: '',
|
|
||||||
amount: '0',
|
|
||||||
to: '',
|
|
||||||
feeType: FEES.LOW,
|
|
||||||
fee: FEES.LOW,
|
|
||||||
memo: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChange = (field: string) => (value: string) => {
|
handleChange = (field: string) => (value: string) => {
|
||||||
this.setState(() => ({
|
this.setState(() => ({
|
||||||
|
@ -149,9 +158,20 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
reset = () => {
|
||||||
|
const { resetSendView } = this.props;
|
||||||
|
|
||||||
|
this.setState(initialState, () => resetSendView());
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
addresses, balance, zecPrice, isSending,
|
addresses,
|
||||||
|
balance,
|
||||||
|
zecPrice,
|
||||||
|
isSending,
|
||||||
|
error,
|
||||||
|
operationId,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const {
|
const {
|
||||||
showFee, from, amount, to, memo, fee, feeType,
|
showFee, from, amount, to, memo, fee, feeType,
|
||||||
|
@ -171,9 +191,20 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
append: 'USD $',
|
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'>
|
<RowComponent justifyContent='space-between'>
|
||||||
<FormWrapper>
|
<FormWrapper>
|
||||||
|
{error && <TextComponent value={error} />}
|
||||||
<InputLabelComponent value='From' />
|
<InputLabelComponent value='From' />
|
||||||
<SelectComponent
|
<SelectComponent
|
||||||
onChange={this.handleChange('from')}
|
onChange={this.handleChange('from')}
|
||||||
|
|
Loading…
Reference in New Issue