From c77cd10f03fd928816377d5922817df03b964722 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Tue, 15 Jan 2019 13:54:34 +0100 Subject: [PATCH 1/3] send form clear button for ripple and eth --- src/actions/SendFormActions.js | 2 + src/actions/constants/send.js | 1 + src/actions/ethereum/SendFormActions.js | 19 ++++++ src/actions/ripple/SendFormActions.js | 20 ++++++ .../views/Account/Send/ethereum/index.js | 65 ++++++++++++++----- .../Wallet/views/Account/Send/ripple/index.js | 65 ++++++++++++++----- 6 files changed, 140 insertions(+), 32 deletions(-) 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} + + )} From a8d39d95c2256cb7aa3c35e42e39fa4ba278b0cf Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Tue, 15 Jan 2019 15:24:41 +0100 Subject: [PATCH 2/3] separate clear from init function --- src/actions/SendFormActions.js | 6 ++-- src/actions/ethereum/SendFormActions.js | 45 +++++++++++++++++-------- src/actions/ripple/SendFormActions.js | 41 ++++++++++++++-------- src/reducers/SendFormEthereumReducer.js | 1 + src/reducers/SendFormRippleReducer.js | 1 + 5 files changed, 62 insertions(+), 32 deletions(-) diff --git a/src/actions/SendFormActions.js b/src/actions/SendFormActions.js index 84d8fcf8..6116c403 100644 --- a/src/actions/SendFormActions.js +++ b/src/actions/SendFormActions.js @@ -18,19 +18,17 @@ 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, } | { 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/ethereum/SendFormActions.js b/src/actions/ethereum/SendFormActions.js index c2fde3bd..52894fd0 100644 --- a/src/actions/ethereum/SendFormActions.js +++ b/src/actions/ethereum/SendFormActions.js @@ -53,13 +53,6 @@ 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()); @@ -116,8 +109,6 @@ 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()); @@ -149,7 +140,6 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS recommendedGasPrice: gasPrice.toString(), gasLimit, gasPrice: gasPrice.toString(), - advanced, }, }); }; @@ -165,10 +155,37 @@ export const toggleAdvanced = (): Action => ({ /* * Called from UI from "clear" button */ -export const onClear = (): Action => ({ - type: SEND.CLEAR, - networkType: 'ethereum', -}); +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 diff --git a/src/actions/ripple/SendFormActions.js b/src/actions/ripple/SendFormActions.js index f763882e..90e78eec 100644 --- a/src/actions/ripple/SendFormActions.js +++ b/src/actions/ripple/SendFormActions.js @@ -35,13 +35,6 @@ 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()); @@ -87,8 +80,6 @@ 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()); @@ -116,7 +107,6 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS selectedFeeLevel, fee: network.fee.defaultFee, sequence: '1', - advanced, }, }); }; @@ -132,11 +122,34 @@ export const toggleAdvanced = (): Action => ({ /* * Called from UI from "clear" button */ -export const onClear = (): Action => ({ - type: SEND.CLEAR, - networkType: 'ripple', -}); +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 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 f56083bc..63a1a717 100644 --- a/src/reducers/SendFormRippleReducer.js +++ b/src/reducers/SendFormRippleReducer.js @@ -75,6 +75,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: From 12d6113b9cc8345ca1d79ff64dfbb081efdc27a8 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Tue, 15 Jan 2019 15:35:31 +0100 Subject: [PATCH 3/3] fix paddings on small screens --- src/views/Wallet/views/Account/Send/ethereum/index.js | 9 ++++++--- src/views/Wallet/views/Account/Send/ripple/index.js | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index 5a6df22f..7ce67e11 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/index.js @@ -404,7 +404,9 @@ const AccountSend = (props: Props) => { {isAdvancedSettingsHidden && ( - + onClear()} @@ -413,7 +415,6 @@ const AccountSend = (props: Props) => { onSend()} > {sendButtonText} @@ -424,7 +425,9 @@ const AccountSend = (props: Props) => { {advanced && ( - + onClear()} diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js index 7ed90ced..58650148 100644 --- a/src/views/Wallet/views/Account/Send/ripple/index.js +++ b/src/views/Wallet/views/Account/Send/ripple/index.js @@ -358,7 +358,9 @@ const AccountSend = (props: Props) => { {isAdvancedSettingsHidden && ( - + onClear()} @@ -367,7 +369,6 @@ const AccountSend = (props: Props) => { onSend()} > {sendButtonText} @@ -378,7 +379,9 @@ const AccountSend = (props: Props) => { {advanced && ( - + onClear()}