Merge pull request #336 from trezor/feature/send-form-clear-button

Feature/Send form clear button
pull/345/head
Vladimir Volek 5 years ago committed by GitHub
commit a1b96535a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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,
} | {

@ -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';

@ -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<void> => {
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,
};

@ -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<void> => {
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,
};

@ -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:

@ -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:

@ -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) => {
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
<FormButtons
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
<ClearButton
isWhite
onClick={() => onClear()}
>
Clear
</ClearButton>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</FormButtons>
)}
</ToggleAdvancedSettingsWrapper>
{advanced && (
<AdvancedForm {...props}>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
<FormButtons
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
>
{sendButtonText}
</SendButton>
<ClearButton
isWhite
onClick={() => onClear()}
>
Clear
</ClearButton>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</FormButtons>
</AdvancedForm>
)}

@ -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) => {
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
<FormButtons
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
<ClearButton
isWhite
onClick={() => onClear()}
>
Clear
</ClearButton>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</FormButtons>
)}
</ToggleAdvancedSettingsWrapper>
{advanced && (
<AdvancedForm {...props}>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
<FormButtons
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
>
{sendButtonText}
</SendButton>
<ClearButton
isWhite
onClick={() => onClear()}
>
Clear
</ClearButton>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</FormButtons>
</AdvancedForm>
)}

Loading…
Cancel
Save