add MODAL_CONTEXT

- update MODAL action constants
- ModalReducer refactoring (field "opened" replaced by "context")
- implementing "context" in all components

src/actions/ModalActions.js

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

src/actions/RouterActions.js

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

src/actions/TrezorConnectActions.js

@@ -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],

src/actions/constants/modal.js

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

src/components/modals/confirm/SignTx/index.js

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

src/components/modals/confirm/UnverifiedAddress/index.js

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

src/components/modals/device/Duplicate/index.js

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

src/components/modals/device/Forget/index.js

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

src/components/modals/device/Remember/index.js

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

src/components/modals/device/WalletType/index.js

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

src/components/modals/index.js

@@ -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>
+        );
     }
 }
 

src/components/modals/passphrase/Passphrase/index.js

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

src/components/modals/passphrase/Type/index.js

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

src/components/modals/pin/Invalid/index.js

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

src/components/modals/pin/Pin/index.js

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

src/reducers/ModalReducer.js

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

src/views/Wallet/views/Account/Receive/index.js

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