diff --git a/src/actions/SendFormActions.js b/src/actions/SendFormActions.js index 16c6230a..84d8fcf8 100644 --- a/src/actions/SendFormActions.js +++ b/src/actions/SendFormActions.js @@ -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, }; diff --git a/src/actions/constants/send.js b/src/actions/constants/send.js index a5d12906..577bdac2 100644 --- a/src/actions/constants/send.js +++ b/src/actions/constants/send.js @@ -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'; \ No newline at end of file diff --git a/src/actions/ethereum/SendFormActions.js b/src/actions/ethereum/SendFormActions.js index 82f4a25d..c2fde3bd 100644 --- a/src/actions/ethereum/SendFormActions.js +++ b/src/actions/ethereum/SendFormActions.js @@ -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, }; \ No newline at end of file diff --git a/src/actions/ripple/SendFormActions.js b/src/actions/ripple/SendFormActions.js index ebe3fdc2..f763882e 100644 --- a/src/actions/ripple/SendFormActions.js +++ b/src/actions/ripple/SendFormActions.js @@ -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, }; \ No newline at end of file diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index 4da01e1d..5a6df22f 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/index.js @@ -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) => { {isAdvancedSettingsHidden && ( - onSend()} - > - {sendButtonText} - + + onClear()} + > + Clear + + onSend()} + > + {sendButtonText} + + )} {advanced && ( - onSend()} - > - {sendButtonText} - + + onClear()} + > + Clear + + onSend()} + > + {sendButtonText} + + )} diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js index e9bc5e06..7ed90ced 100644 --- a/src/views/Wallet/views/Account/Send/ripple/index.js +++ b/src/views/Wallet/views/Account/Send/ripple/index.js @@ -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) => { {isAdvancedSettingsHidden && ( - onSend()} - > - {sendButtonText} - + + onClear()} + > + Clear + + onSend()} + > + {sendButtonText} + + )} {advanced && ( - onSend()} - > - {sendButtonText} - + + onClear()} + > + Clear + + onSend()} + > + {sendButtonText} + + )}