arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-29 02:18:06 +00:00
Code Issues Releases Wiki Activity

add MODAL_CONTEXT

Browse Source 
- update MODAL action constants
- ModalReducer refactoring (field "opened" replaced by "context")
- implementing "context" in all components
This commit is contained in:
Szymon Lesisz 2018-10-10 21:27:07 +02:00
parent 0f592abfb1
commit 41b78390ed
17 changed files with 99 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/actions/ModalActions.js
View File

@ -13,8 +13,9 @@ import type { State } from 'reducers/ModalReducer';
export type ModalAction = {
type: typeof MODAL.CLOSE
} | {
type: typeof MODAL.REMEMBER,
device: TrezorDevice
type: typeof MODAL.OPEN_EXTERNAL_WALLET,
id: string,
url: string,
};
export const onPinSubmit = (value: string): Action => {
@ -38,13 +39,6 @@ export const onPassphraseSubmit = (passphrase: string): AsyncAction => async (di
});
};
// export const askForRemember = (device: TrezorDevice): Action => {
// return {
// type: MODAL.REMEMBER,
// device
// }
// }
export const onRememberDevice = (device: TrezorDevice): Action => ({
type: CONNECT.REMEMBER,
device,
@ -77,9 +71,9 @@ export const onRememberRequest = (prevState: State): ThunkAction => (dispatch: D
const state: State = getState().modal;
// handle case where forget modal is already opened
// TODO: 2 modals at once (two devices disconnected in the same time)
if (prevState.opened && prevState.windowType === CONNECT.REMEMBER_REQUEST) {
if (prevState.context === MODAL.CONTEXT_DEVICE && prevState.windowType === CONNECT.REMEMBER_REQUEST) {
// forget current (new)
if (state.opened) {
if (state.context === MODAL.CONTEXT_DEVICE) {
dispatch({
type: CONNECT.FORGET,
device: state.device,
@ -98,7 +92,7 @@ export const onDeviceConnect = (device: Device): ThunkAction => (dispatch: Dispa
// interrupt process of remembering device (force forget)
// TODO: the same for disconnect more than 1 device at once
const { modal } = getState();
if (modal.opened && modal.windowType === CONNECT.REMEMBER_REQUEST) {
if (modal.context === MODAL.CONTEXT_DEVICE && modal.windowType === CONNECT.REMEMBER_REQUEST) {
if (device.features && modal.device && modal.device.features && modal.device.features.device_id === device.features.device_id) {
dispatch({
type: MODAL.CLOSE,
@ -124,6 +118,16 @@ export const onWalletTypeRequest = (device: TrezorDevice, hidden: boolean, state
});
};
export const gotoExternalWallet = (id: string, url: string): ThunkAction => (dispatch: Dispatch): void => {
console.warn('OPEN', id, url);
dispatch({
type: MODAL.OPEN_EXTERNAL_WALLET,
id,
url,
});
};
export default {
onPinSubmit,
onPassphraseSubmit,
@ -134,4 +138,5 @@ export default {
onCancel,
onDuplicateDevice,
onWalletTypeRequest,
gotoExternalWallet,
};

3
src/actions/RouterActions.js
View File

@ -1,6 +1,7 @@
/* @flow */
import { push, LOCATION_CHANGE } from 'react-router-redux';
import { CONTEXT_NONE } from 'actions/constants/modal';
import { routes } from 'support/routes';
import * as deviceUtils from 'utils/device';
@ -138,7 +139,7 @@ export const getValidUrl = (action: RouterAction): PayloadAction<string> => (dis
// Modal is opened
// redirect to previous url
if (getState().modal.opened) {
if (getState().modal.context !== CONTEXT_NONE) {
// Corner case: modal is opened and currentParams are still valid
// example 1 (valid blocking): url changed while passphrase modal opened but device is still connected (we want user to finish this action)
// example 2 (invalid blocking): url changes while passphrase modal opened because device disconnect

3
src/actions/TrezorConnectActions.js
View File

@ -2,6 +2,7 @@
import TrezorConnect, {
DEVICE, DEVICE_EVENT, UI_EVENT, TRANSPORT_EVENT, BLOCKCHAIN_EVENT,
} from 'trezor-connect';
import { CONTEXT_NONE } from 'actions/constants/modal';
import * as CONNECT from 'actions/constants/TrezorConnect';
import * as NOTIFICATION from 'actions/constants/notification';
import { getDuplicateInstanceNumber } from 'reducers/utils';
@ -237,7 +238,7 @@ export const deviceDisconnect = (device: Device): AsyncAction => async (dispatch
const instances = getState().devices.filter(d => d.features && device.features && d.state && !d.remember && d.features.device_id === device.features.device_id);
if (instances.length > 0) {
const isSelected = deviceUtils.isSelectedDevice(getState().wallet.selectedDevice, instances[0]);
if (!isSelected && getState().modal.opened) {
if (!isSelected && getState().modal.context !== CONTEXT_NONE) {
dispatch({
type: CONNECT.FORGET_SILENT,
device: instances[0],

18
src/actions/constants/modal.js
View File

@ -1,17 +1,7 @@
/* @flow */
export const ON_PASSPHRASE_CHANGE: 'action__on_passphrase_change' = 'action__on_passphrase_change';
export const ON_PASSPHRASE_SHOW: 'action__on_passphrase_show' = 'action__on_passphrase_show';
export const ON_PASSPHRASE_HIDE: 'action__on_passphrase_hide' = 'action__on_passphrase_hide';
export const ON_PASSPHRASE_SAVE: 'action__on_passphrase_save' = 'action__on_passphrase_save';
export const ON_PASSPHRASE_FORGET: 'action__on_passphrase_forget' = 'action__on_passphrase_forget';
export const ON_PASSPHRASE_FOCUS: 'action__on_passphrase_focus' = 'action__on_passphrase_focus';
export const ON_PASSPHRASE_BLUR: 'action__on_passphrase_blur' = 'action__on_passphrase_blur';
export const ON_PASSPHRASE_SUBMIT: 'action__on_passphrase_submit' = 'action__on_passphrase_submit';
export const FORGET: 'modal__forget' = 'modal__forget';
export const REMEMBER: 'modal__remember' = 'modal__remember';
export const ON_FORGET: 'modal__on_forget' = 'modal__on_forget';
export const ON_REMEMBER: 'modal__on_remember' = 'modal__on_remember';
export const CLOSE: 'modal__close' = 'modal__close';
export const OPEN_EXTERNAL_WALLET: 'modal__external_wallet' = 'modal__external_wallet';
export const CONTEXT_NONE: 'modal_ctx_none' = 'modal_ctx_none';
export const CONTEXT_DEVICE: 'modal_ctx_device' = 'modal_ctx_device';
export const CONTEXT_EXTERNAL_WALLET: 'modal_ctx_external-wallet' = 'modal_ctx_external-wallet';

3
src/components/modals/confirm/SignTx/index.js
View File

@ -8,6 +8,7 @@ import Icon from 'components/Icon';
import icons from 'config/icons';
import { H3 } from 'components/Heading';
import { LINE_HEIGHT } from 'config/variables';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from '../../index';
@ -39,7 +40,7 @@ const Label = styled.div`
`;
const ConfirmSignTx = (props: Props) => {
if (!props.modal.opened) return null;
if (props.modal.context !== CONTEXT_DEVICE) return null;
const { device } = props.modal;
const {

10
src/components/modals/confirm/UnverifiedAddress/index.js
View File

@ -8,6 +8,7 @@ import colors from 'config/colors';
import icons from 'config/icons';
import Button from 'components/Button';
import Link from 'components/Link';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from '../../index';
@ -56,7 +57,6 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
}
verifyAddress() {
if (!this.props.modal.opened) return;
const { account } = this.props.selectedAccount;
if (!account) return;
this.props.modalActions.onCancel();
@ -64,17 +64,13 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
}
showUnverifiedAddress() {
if (!this.props.modal.opened) return;
this.props.modalActions.onCancel();
this.props.receiveActions.showUnverifiedAddress();
}
render() {
if (!this.props.modal.opened) return null;
const {
device,
} = this.props.modal;
if (this.props.modal.context !== CONTEXT_DEVICE) return null;
const { device } = this.props.modal;
const {
onCancel,

9
src/components/modals/device/Duplicate/index.js
View File

@ -11,6 +11,7 @@ import Icon from 'components/Icon';
import icons from 'config/icons';
import colors from 'config/colors';
import Link from 'components/Link';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from 'components/modals/index';
@ -66,8 +67,8 @@ export default class DuplicateDevice extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
const device = props.modal.opened ? props.modal.device : null;
if (!device) return;
if (props.modal.context !== CONTEXT_DEVICE) return;
const { device } = props.modal;
const instance = getDuplicateInstanceNumber(props.devices, device);
@ -114,13 +115,13 @@ export default class DuplicateDevice extends PureComponent<Props, State> {
keyboardHandler: (event: KeyboardEvent) => void;
submit() {
if (!this.props.modal.opened) return;
if (this.props.modal.context !== CONTEXT_DEVICE) return;
const extended: Object = { instanceName: this.state.instanceName, instance: this.state.instance };
this.props.modalActions.onDuplicateDevice({ ...this.props.modal.device, ...extended });
}
render() {
if (!this.props.modal.opened) return null;
if (this.props.modal.context !== CONTEXT_DEVICE) return null;
const { device } = this.props.modal;
const { onCancel } = this.props.modalActions;

8
src/components/modals/device/Forget/index.js
View File

@ -5,6 +5,7 @@ import styled from 'styled-components';
import { H3 } from 'components/Heading';
import P from 'components/Paragraph';
import Button from 'components/Button';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from '../../index';
@ -47,13 +48,12 @@ class ForgetDevice extends PureComponent<Props> {
keyboardHandler: (event: KeyboardEvent) => void;
forget() {
if (this.props.modal.opened) {
this.props.modalActions.onForgetSingleDevice(this.props.modal.device);
}
if (this.props.modal.context !== CONTEXT_DEVICE) return;
this.props.modalActions.onForgetSingleDevice(this.props.modal.device);
}
render() {
if (!this.props.modal.opened) return null;
if (this.props.modal.context !== CONTEXT_DEVICE) return null;
const { device } = this.props.modal;
const { onCancel } = this.props.modalActions;
return (

13
src/components/modals/device/Remember/index.js
View File

@ -5,6 +5,7 @@ import { H3 } from 'components/Heading';
import P from 'components/Paragraph';
import Loader from 'components/Loader';
import Button from 'components/Button';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from '../../index';
@ -62,9 +63,8 @@ export default class RememberDevice extends PureComponent<Props, State> {
// TODO: possible race condition,
// device could be already connected but it didn't emit Device.CONNECT event yet
window.clearInterval(this.state.ticker);
if (this.props.modal.opened) {
this.props.modalActions.onForgetDevice(this.props.modal.device);
}
if (this.props.modal.context !== CONTEXT_DEVICE) return;
this.props.modalActions.onForgetDevice(this.props.modal.device);
} else {
this.setState(previousState => ({
countdown: previousState.countdown - 1,
@ -98,13 +98,12 @@ export default class RememberDevice extends PureComponent<Props, State> {
keyboardHandler: (event: KeyboardEvent) => void;
forget() {
if (this.props.modal.opened) {
this.props.modalActions.onForgetDevice(this.props.modal.device);
}
if (this.props.modal.context !== CONTEXT_DEVICE) return;
this.props.modalActions.onForgetDevice(this.props.modal.device);
}
render() {
if (!this.props.modal.opened) return null;
if (this.props.modal.context !== CONTEXT_DEVICE) return null;
const { device, instances } = this.props.modal;
const { onRememberDevice } = this.props.modalActions;

5
src/components/modals/device/WalletType/index.js
View File

@ -11,6 +11,7 @@ import Link from 'components/Link';
import colors from 'config/colors';
import icons from 'config/icons';
import WalletTypeIcon from 'components/images/WalletType';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from 'components/modals/index';
@ -89,12 +90,12 @@ class WalletType extends PureComponent<Props> {
changeType(hidden: boolean, state: ?string) {
const { modal } = this.props;
if (!modal.opened) return;
if (modal.context !== CONTEXT_DEVICE) return;
this.props.modalActions.onWalletTypeRequest(modal.device, hidden, state);
}
render() {
if (!this.props.modal.opened) return null;
if (this.props.modal.context !== CONTEXT_DEVICE) return null;
const { device } = this.props.modal;
const { onCancel } = this.props.modalActions;

28
src/components/modals/index.js
View File

@ -12,6 +12,7 @@ import { UI } from 'trezor-connect';
import ModalActions from 'actions/ModalActions';
import ReceiveActions from 'actions/ReceiveActions';
import * as MODAL from 'actions/constants/modal';
import * as RECEIVE from 'actions/constants/receive';
import * as CONNECT from 'actions/constants/TrezorConnect';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
@ -87,9 +88,9 @@ const ModalWindow = styled.div`
class Modal extends React.PureComponent<Props> {
render() {
if (!this.props.modal.opened) return null;
if (this.props.modal.context === MODAL.CONTEXT_NONE) return null;
const { opened, windowType } = this.props.modal;
const { windowType } = this.props.modal;
let component = null;
switch (windowType) {
case UI.REQUEST_PIN:
@ -131,20 +132,15 @@ class Modal extends React.PureComponent<Props> {
component = null;
}
let ch = null;
if (opened) {
ch = (
<Fade key="1">
<ModalContainer>
<ModalWindow>
{ component }
</ModalWindow>
</ModalContainer>
</Fade>
);
}
return ch;
return (
<Fade key="1">
<ModalContainer>
<ModalWindow>
{ component }
</ModalWindow>
</ModalContainer>
</Fade>
);
}
}

12
src/components/modals/passphrase/Passphrase/index.js
View File

@ -8,6 +8,7 @@ import P from 'components/Paragraph';
import Checkbox from 'components/Checkbox';
import Button from 'components/Button';
import Input from 'components/inputs/Input';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from '../../index';
@ -80,10 +81,8 @@ class Passphrase extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
const device = props.modal.opened ? props.modal.device : null;
if (!device) {
return;
}
if (props.modal.context !== CONTEXT_DEVICE) return;
const { device } = props.modal;
// Check if this device is already known
// if device is already known then only one input is presented
@ -197,7 +196,6 @@ class Passphrase extends PureComponent<Props, State> {
handleKeyPress(event: KeyboardEvent) {
if (event.key === 'Enter') {
event.preventDefault();
console.warn('ENTER', this.state);
if (this.state.doPassphraseInputsMatch) {
this.submitPassphrase();
}
@ -205,9 +203,7 @@ class Passphrase extends PureComponent<Props, State> {
}
render() {
if (!this.props.modal.opened) {
return null;
}
if (this.props.modal.context !== CONTEXT_DEVICE) return null;
return (
<Wrapper>

3
src/components/modals/passphrase/Type/index.js
View File

@ -7,6 +7,7 @@ import icons from 'config/icons';
import styled from 'styled-components';
import { H3 } from 'components/Heading';
import P from 'components/Paragraph';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from 'components/modals/index';
@ -18,7 +19,7 @@ const Wrapper = styled.div`
const Header = styled.div``;
const Confirmation = (props: Props) => {
if (!props.modal.opened) return null;
if (props.modal.context !== CONTEXT_DEVICE) return null;
const { device } = props.modal;
return (

3
src/components/modals/pin/Invalid/index.js
View File

@ -4,6 +4,7 @@ import React from 'react';
import styled from 'styled-components';
import { H3 } from 'components/Heading';
import P from 'components/Paragraph';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import type { Props } from '../../index';
@ -12,7 +13,7 @@ const Wrapper = styled.div`
`;
const InvalidPin = (props: Props) => {
if (!props.modal.opened) return null;
if (props.modal.context !== CONTEXT_DEVICE) return null;
const { device } = props.modal;
return (

5
src/components/modals/pin/Pin/index.js
View File

@ -4,10 +4,11 @@ import { H2 } from 'components/Heading';
import React, { PureComponent } from 'react';
import Link from 'components/Link';
import styled from 'styled-components';
import Button from 'components/Button';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import PinButton from './components/Button';
import PinInput from './components/Input';
import type { Props } from '../../index';
type State = {
@ -132,7 +133,7 @@ class Pin extends PureComponent<Props, State> {
keyboardHandler: (event: KeyboardEvent) => void;
render() {
if (!this.props.modal.opened) return null;
if (this.props.modal.context !== CONTEXT_DEVICE) return null;
const { onPinSubmit } = this.props.modalActions;
const { device } = this.props.modal;
const { pin } = this.state;

64
src/reducers/ModalReducer.js
View File

@ -9,92 +9,70 @@ import * as CONNECT from 'actions/constants/TrezorConnect';
import type { Action, TrezorDevice } from 'flowtype';
export type State = {
opened: false;
context: typeof MODAL.CONTEXT_NONE;
} | {
opened: true;
context: typeof MODAL.CONTEXT_DEVICE,
device: TrezorDevice;
instances?: Array<TrezorDevice>;
windowType?: string;
} | {
context: typeof MODAL.CONTEXT_EXTERNAL_WALLET,
windowType?: string;
}
const initialState: State = {
opened: false,
// instances: null,
// windowType: null
context: MODAL.CONTEXT_NONE,
};
export default function modal(state: State = initialState, action: Action): State {
switch (action.type) {
case RECEIVE.REQUEST_UNVERIFIED:
return {
opened: true,
device: action.device,
windowType: action.type,
};
case CONNECT.FORGET_REQUEST:
case CONNECT.TRY_TO_DUPLICATE:
case CONNECT.REQUEST_WALLET_TYPE:
return {
opened: true,
context: MODAL.CONTEXT_DEVICE,
device: action.device,
windowType: action.type,
};
case CONNECT.REMEMBER_REQUEST:
return {
opened: true,
context: MODAL.CONTEXT_DEVICE,
device: action.device,
instances: action.instances,
windowType: action.type,
};
case CONNECT.FORGET_REQUEST:
return {
opened: true,
device: action.device,
windowType: action.type,
};
case CONNECT.TRY_TO_DUPLICATE:
return {
opened: true,
device: action.device,
windowType: action.type,
};
// device acquired
// close modal
case DEVICE.CHANGED:
if (state.opened && action.device.path === state.device.path && action.device.status === 'occupied') {
if (state.context === MODAL.CONTEXT_DEVICE && action.device.path === state.device.path && action.device.status === 'occupied') {
return initialState;
}
return state;
// device with context assigned to modal was disconnected
// close modal
case DEVICE.DISCONNECT:
if (state.opened && action.device.path === state.device.path) {
if (state.context === MODAL.CONTEXT_DEVICE && action.device.path === state.device.path) {
return initialState;
}
return state;
// case DEVICE.CONNECT :
// case DEVICE.CONNECT_UNACQUIRED :
// if (state.opened && state.windowType === CONNECT.TRY_TO_FORGET) {
// return {
// ...initialState,
// passphraseCached: state.passphraseCached
// }
// }
// return state;
case UI.REQUEST_PIN:
case UI.INVALID_PIN:
case UI.REQUEST_PASSPHRASE:
return {
opened: true,
context: MODAL.CONTEXT_DEVICE,
device: action.payload.device,
windowType: action.type,
};
case UI.REQUEST_BUTTON:
return {
opened: true,
context: MODAL.CONTEXT_DEVICE,
device: action.payload.device,
windowType: action.payload.code,
};
@ -106,6 +84,12 @@ export default function modal(state: State = initialState, action: Action): Stat
case CONNECT.REMEMBER:
return initialState;
case MODAL.OPEN_EXTERNAL_WALLET:
return {
context: MODAL.CONTEXT_EXTERNAL_WALLET,
windowType: action.id,
};
default:
return state;
}

9
src/views/Wallet/views/Account/Receive/index.js
View File

@ -148,14 +148,13 @@ const AccountReceive = (props: Props) => {
addressUnverified,
} = props.receive;
const isAddressVerifying = props.modal.context === 'device' && props.modal.windowType === 'ButtonRequest_Address';
const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
let address = `${account.address.substring(0, 20)}...`;
if (addressVerified
|| addressUnverified
|| (props.modal.opened && props.modal.windowType === 'ButtonRequest_Address')) {
if (addressVerified || addressUnverified || isAddressVerifying) {
({ address } = account);
}
const isAddressVerifying = props.modal.opened && props.modal.windowType === 'ButtonRequest_Address';
const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
return (
<Content>