diff --git a/src/actions/SendFormActions.js b/src/actions/SendFormActions.js index 16c6230a..6116c403 100644 --- a/src/actions/SendFormActions.js +++ b/src/actions/SendFormActions.js @@ -18,11 +18,11 @@ import * as EthereumSendFormActions from './ethereum/SendFormActions'; import * as RippleSendFormActions from './ripple/SendFormActions'; export type SendFormAction = { - type: typeof SEND.INIT | typeof SEND.VALIDATION | typeof SEND.CHANGE, + type: typeof SEND.INIT | typeof SEND.VALIDATION | typeof SEND.CHANGE | typeof SEND.CLEAR, networkType: 'ethereum', state: EthereumState, } | { - type: typeof SEND.INIT | typeof SEND.VALIDATION | typeof SEND.CHANGE, + type: typeof SEND.INIT | typeof SEND.VALIDATION | typeof SEND.CHANGE | typeof SEND.CLEAR, networkType: 'ripple', state: RippleState, } | { 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..52894fd0 100644 --- a/src/actions/ethereum/SendFormActions.js +++ b/src/actions/ethereum/SendFormActions.js @@ -152,6 +152,41 @@ export const toggleAdvanced = (): Action => ({ networkType: 'ethereum', }); +/* +* Called from UI from "clear" button +*/ +export const onClear = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise => { + const { network } = getState().selectedAccount; + const { advanced } = getState().sendFormEthereum; + + if (!network) return; + + // clear transaction draft from session storage + dispatch(SessionStorageActions.clear()); + + const gasPrice: BigNumber = await dispatch(BlockchainActions.getGasPrice(network.shortcut, network.defaultGasPrice)); + const gasLimit = network.defaultGasLimit.toString(); + const feeLevels = ValidationActions.getFeeLevels(network.symbol, gasPrice, gasLimit); + const selectedFeeLevel = ValidationActions.getSelectedFeeLevel(feeLevels, initialState.selectedFeeLevel); + + dispatch({ + type: SEND.CLEAR, + networkType: 'ethereum', + state: { + ...initialState, + networkName: network.shortcut, + networkSymbol: network.symbol, + currency: network.symbol, + feeLevels, + selectedFeeLevel, + recommendedGasPrice: gasPrice.toString(), + gasLimit, + gasPrice: gasPrice.toString(), + advanced, + }, + }); +}; + /* * Called from UI on "address" field change */ @@ -613,4 +648,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 562326a4..fc34916a 100644 --- a/src/actions/ripple/SendFormActions.js +++ b/src/actions/ripple/SendFormActions.js @@ -119,6 +119,38 @@ export const toggleAdvanced = (): Action => ({ networkType: 'ripple', }); +/* +* Called from UI from "clear" button +*/ +export const onClear = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise => { + const { network } = getState().selectedAccount; + const { advanced } = getState().sendFormRipple; + + if (!network) return; + + // clear transaction draft from session storage + dispatch(SessionStorageActions.clear()); + + const blockchainFeeLevels = dispatch(BlockchainActions.getFeeLevels(network)); + const feeLevels = dispatch(ValidationActions.getFeeLevels(blockchainFeeLevels)); + const selectedFeeLevel = ValidationActions.getSelectedFeeLevel(feeLevels, initialState.selectedFeeLevel); + + dispatch({ + type: SEND.CLEAR, + networkType: 'ripple', + state: { + ...initialState, + networkName: network.shortcut, + networkSymbol: network.symbol, + feeLevels, + selectedFeeLevel, + fee: network.fee.defaultFee, + sequence: '1', + advanced, + }, + }); +}; + /* * Called from UI on "address" field change */ @@ -368,4 +400,5 @@ export default { onFeeChange, onDestinationTagChange, onSend, + onClear, }; \ No newline at end of file diff --git a/src/reducers/SendFormEthereumReducer.js b/src/reducers/SendFormEthereumReducer.js index 5053f673..58b8e11d 100644 --- a/src/reducers/SendFormEthereumReducer.js +++ b/src/reducers/SendFormEthereumReducer.js @@ -82,6 +82,7 @@ export default (state: State = initialState, action: Action): State => { case SEND.INIT: case SEND.CHANGE: case SEND.VALIDATION: + case SEND.CLEAR: return action.state; case SEND.TOGGLE_ADVANCED: diff --git a/src/reducers/SendFormRippleReducer.js b/src/reducers/SendFormRippleReducer.js index f1c34ed3..6a77eb4c 100644 --- a/src/reducers/SendFormRippleReducer.js +++ b/src/reducers/SendFormRippleReducer.js @@ -77,6 +77,7 @@ export default (state: State = initialState, action: Action): State => { case SEND.INIT: case SEND.CHANGE: case SEND.VALIDATION: + case SEND.CLEAR: return action.state; case SEND.TOGGLE_ADVANCED: diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index 4da01e1d..7ce67e11 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,43 @@ 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 f6582587..e3776e45 100644 --- a/src/views/Wallet/views/Account/Send/ripple/index.js +++ b/src/views/Wallet/views/Account/Send/ripple/index.js @@ -139,17 +139,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)` @@ -214,6 +230,7 @@ const AccountSend = (props: Props) => { onFeeLevelChange, updateFeeLevels, onSend, + onClear, } = props.sendFormActions; if (!device || !account || !discovery || !network || !shouldRender) { @@ -359,24 +376,43 @@ const AccountSend = (props: Props) => { {isAdvancedSettingsHidden && ( - onSend()} > - {sendButtonText} - + onClear()} + > + Clear + + onSend()} + > + {sendButtonText} + + )} {advanced && ( - onSend()} + - {sendButtonText} - + onClear()} + > + Clear + + onSend()} + > + {sendButtonText} + + )}