mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-29 02:18:06 +00:00
Merge pull request #336 from trezor/feature/send-form-clear-button
Feature/Send form clear button
This commit is contained in:
commit
a1b96535a5
@ -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…
Reference in New Issue
Block a user