mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-29 02:18:06 +00:00
send form clear button for ripple and eth
This commit is contained in:
parent
e24574d70b
commit
c77cd10f03
@ -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,
|
||||
};
|
||||
|
||||
|
||||
|
@ -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';
|
@ -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,
|
||||
};
|
@ -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,
|
||||
};
|
@ -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) => {
|
||||
</ToggleAdvancedSettingsButton>
|
||||
|
||||
{isAdvancedSettingsHidden && (
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
<FormButtons>
|
||||
<ClearButton
|
||||
isWhite
|
||||
onClick={() => onClear()}
|
||||
>
|
||||
Clear
|
||||
</ClearButton>
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
</FormButtons>
|
||||
)}
|
||||
</ToggleAdvancedSettingsWrapper>
|
||||
|
||||
{advanced && (
|
||||
<AdvancedForm {...props}>
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
<FormButtons>
|
||||
<ClearButton
|
||||
isWhite
|
||||
onClick={() => onClear()}
|
||||
>
|
||||
Clear
|
||||
</ClearButton>
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
</FormButtons>
|
||||
</AdvancedForm>
|
||||
)}
|
||||
|
||||
|
@ -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) => {
|
||||
</ToggleAdvancedSettingsButton>
|
||||
|
||||
{isAdvancedSettingsHidden && (
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
<FormButtons>
|
||||
<ClearButton
|
||||
isWhite
|
||||
onClick={() => onClear()}
|
||||
>
|
||||
Clear
|
||||
</ClearButton>
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
</FormButtons>
|
||||
)}
|
||||
</ToggleAdvancedSettingsWrapper>
|
||||
|
||||
{advanced && (
|
||||
<AdvancedForm {...props}>
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
<FormButtons>
|
||||
<ClearButton
|
||||
isWhite
|
||||
onClick={() => onClear()}
|
||||
>
|
||||
Clear
|
||||
</ClearButton>
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
</FormButtons>
|
||||
</AdvancedForm>
|
||||
)}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user