1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-29 02:18:06 +00:00

add button to scan qr code next to the address input

This commit is contained in:
slowbackspace 2019-01-17 17:13:21 +01:00
parent 549ae16b0e
commit 01b789a78e
4 changed files with 50 additions and 0 deletions

View File

@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import SendFormActions from 'actions/ethereum/SendFormActions';
import { openQrModal } from 'actions/ModalActions';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import AccountSend from './index';
@ -20,6 +21,7 @@ export type StateProps = {
export type DispatchProps = {
sendFormActions: typeof SendFormActions,
openQrModal: typeof openQrModal,
}
export type Props = StateProps & DispatchProps;
@ -34,6 +36,8 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
sendFormActions: bindActionCreators(SendFormActions, dispatch),
openQrModal: bindActionCreators(openQrModal, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(AccountSend);

View File

@ -159,6 +159,14 @@ const AdvancedSettingsIcon = styled(Icon)`
margin-left: 10px;
`;
const QrButton = styled(Button)`
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: 0px;
height: 40px;
padding: 0 10px;
`;
// render helpers
const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
let state = '';
@ -281,6 +289,19 @@ const AccountSend = (props: Props) => {
bottomText={errors.address || warnings.address || infos.address}
value={address}
onChange={event => onAddressChange(event.target.value)}
sideAddons={[(
<QrButton
key="qrButton"
isWhite
onClick={props.openQrModal}
>
<Icon
size={25}
color={colors.TEXT_SECONDARY}
icon={ICONS.QRCODE}
/>
</QrButton>
)]}
/>
</InputRow>
<InputRow>

View File

@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import SendFormActions from 'actions/ripple/SendFormActions';
import { openQrModal } from 'actions/ModalActions';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import AccountSend from './index';
@ -20,6 +21,7 @@ export type StateProps = {
export type DispatchProps = {
sendFormActions: typeof SendFormActions,
openQrModal: typeof openQrModal,
}
export type Props = StateProps & DispatchProps;
@ -34,6 +36,7 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
sendFormActions: bindActionCreators(SendFormActions, dispatch),
openQrModal: bindActionCreators(openQrModal, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(AccountSend);

View File

@ -156,6 +156,15 @@ const AdvancedSettingsIcon = styled(Icon)`
margin-left: 10px;
`;
const QrButton = styled(Button)`
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: 0px;
height: 40px;
padding: 0 10px;
`;
// render helpers
const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
let state = '';
@ -254,6 +263,19 @@ const AccountSend = (props: Props) => {
bottomText={errors.address || warnings.address || infos.address}
value={address}
onChange={event => onAddressChange(event.target.value)}
sideAddons={[(
<QrButton
key="qrButton"
isWhite
onClick={props.openQrModal}
>
<Icon
size={25}
color={colors.TEXT_SECONDARY}
icon={ICONS.QRCODE}
/>
</QrButton>
)]}
/>
</InputRow>
<InputRow>