send form clear button for ripple and eth

pull/336/head
slowbackspace 5 years ago
parent e24574d70b
commit c77cd10f03

@ -29,6 +29,8 @@ export type SendFormAction = {
type: typeof SEND.TOGGLE_ADVANCED | typeof SEND.TX_SENDING | typeof SEND.TX_ERROR,
} | {
type: typeof SEND.TX_COMPLETE,
} | {
type: typeof SEND.CLEAR,
};

@ -7,3 +7,4 @@ export const TX_SENDING: 'send__tx_sending' = 'send__tx_sending';
export const TX_COMPLETE: 'send__tx_complete' = 'send__tx_complete';
export const TX_ERROR: 'send__tx_error' = 'send__tx_error';
export const TOGGLE_ADVANCED: 'send__toggle_advanced' = 'send__toggle_advanced';
export const CLEAR: 'send__clear' = 'send__clear';

@ -53,6 +53,13 @@ export const observe = (prevState: ReducersState, action: Action): ThunkAction =
return;
}
// clear transaction draft from session storage and reinitialize send form
if (action.type === SEND.CLEAR) {
dispatch(SessionStorageActions.clear());
dispatch(init());
return;
}
// if send form was not initialized
if (currentState.sendFormEthereum.currency === '') {
dispatch(init());
@ -109,6 +116,8 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
network,
} = getState().selectedAccount;
const { advanced } = getState().sendFormEthereum;
if (!account || !network) return;
const stateFromStorage = dispatch(SessionStorageActions.loadEthereumDraftTransaction());
@ -140,6 +149,7 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
recommendedGasPrice: gasPrice.toString(),
gasLimit,
gasPrice: gasPrice.toString(),
advanced,
},
});
};
@ -152,6 +162,14 @@ export const toggleAdvanced = (): Action => ({
networkType: 'ethereum',
});
/*
* Called from UI from "clear" button
*/
export const onClear = (): Action => ({
type: SEND.CLEAR,
networkType: 'ethereum',
});
/*
* Called from UI on "address" field change
*/
@ -613,4 +631,5 @@ export default {
onNonceChange,
onDataChange,
onSend,
onClear,
};

@ -35,6 +35,13 @@ export const observe = (prevState: ReducersState, action: Action): ThunkAction =
return;
}
// clear transaction draft from session storage and reinitialize send form
if (action.type === SEND.CLEAR) {
dispatch(SessionStorageActions.clear());
dispatch(init());
return;
}
// if send form was not initialized
if (currentState.sendFormRipple.networkSymbol === '') {
dispatch(init());
@ -80,6 +87,8 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
network,
} = getState().selectedAccount;
const { advanced } = getState().sendFormEthereum;
if (!account || account.networkType !== 'ripple' || !network) return;
const stateFromStorage = dispatch(SessionStorageActions.loadRippleDraftTransaction());
@ -107,6 +116,7 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
selectedFeeLevel,
fee: network.fee.defaultFee,
sequence: '1',
advanced,
},
});
};
@ -119,6 +129,15 @@ export const toggleAdvanced = (): Action => ({
networkType: 'ripple',
});
/*
* Called from UI from "clear" button
*/
export const onClear = (): Action => ({
type: SEND.CLEAR,
networkType: 'ripple',
});
/*
* Called from UI on "address" field change
*/
@ -368,4 +387,5 @@ export default {
onFeeChange,
onDestinationTagChange,
onSend,
onClear,
};

@ -142,17 +142,33 @@ const ToggleAdvancedSettingsButton = styled(Button)`
min-height: 40px;
padding: 0;
display: flex;
flex: 1 1 0;
align-items: center;
font-weight: ${FONT_WEIGHT.SEMIBOLD};
`;
const SendButton = styled(Button)`
min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
word-break: break-all;
const FormButtons = styled.div`
display: flex;
flex: 1 1;
@media screen and (max-width: ${SmallScreenWidth}) {
margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
}
Button + Button {
margin-left: 5px;
}
`;
const SendButton = styled(Button)`
word-break: break-all;
flex: 1;
`;
const ClearButton = styled(Button)`
`;
const AdvancedSettingsIcon = styled(Icon)`
@ -228,6 +244,7 @@ const AccountSend = (props: Props) => {
onFeeLevelChange,
updateFeeLevels,
onSend,
onClear,
} = props.sendFormActions;
if (!device || !account || !discovery || !network || !shouldRender) {
@ -387,24 +404,40 @@ const AccountSend = (props: Props) => {
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
<FormButtons>
<ClearButton
isWhite
onClick={() => onClear()}
>
Clear
</ClearButton>
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</FormButtons>
)}
</ToggleAdvancedSettingsWrapper>
{advanced && (
<AdvancedForm {...props}>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
<FormButtons>
<ClearButton
isWhite
onClick={() => onClear()}
>
Clear
</ClearButton>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</FormButtons>
</AdvancedForm>
)}

@ -129,17 +129,33 @@ const ToggleAdvancedSettingsButton = styled(Button)`
min-height: 40px;
padding: 0;
display: flex;
flex: 1 1 0;
align-items: center;
font-weight: ${FONT_WEIGHT.SEMIBOLD};
`;
const SendButton = styled(Button)`
min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
word-break: break-all;
const FormButtons = styled.div`
display: flex;
flex: 1 1;
@media screen and (max-width: ${SmallScreenWidth}) {
margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
}
Button + Button {
margin-left: 5px;
}
`;
const SendButton = styled(Button)`
word-break: break-all;
flex: 1;
`;
const ClearButton = styled(Button)`
`;
const AdvancedSettingsIcon = styled(Icon)`
@ -204,6 +220,7 @@ const AccountSend = (props: Props) => {
onFeeLevelChange,
updateFeeLevels,
onSend,
onClear,
} = props.sendFormActions;
if (!device || !account || !discovery || !network || !shouldRender) {
@ -341,24 +358,40 @@ const AccountSend = (props: Props) => {
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
<FormButtons>
<ClearButton
isWhite
onClick={() => onClear()}
>
Clear
</ClearButton>
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</FormButtons>
)}
</ToggleAdvancedSettingsWrapper>
{advanced && (
<AdvancedForm {...props}>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
<FormButtons>
<ClearButton
isWhite
onClick={() => onClear()}
>
Clear
</ClearButton>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</FormButtons>
</AdvancedForm>
)}

Loading…
Cancel
Save