new components

src/components/notifications/Context/components/Account/index.js

@@ -0,0 +1,19 @@
+/* @flow */
+import * as React from 'react';
+import { Notification } from 'components/Notification';
+
+import type { Props } from '../../index';
+
+// There could be only one account notification
+export default (props: Props) => {
+    const { notification } = props.selectedAccount;
+    if (notification) {
+        if (notification.type === 'backend') {
+            // special case: backend is down
+            // TODO: this is a different component with "auto resolve" button
+            return (<Notification type="error" title={notification.title} message={notification.message} />);
+        }
+        return (<Notification type={notification.type} title={notification.title} message={notification.message} />);
+    }
+    return null;
+};

src/components/notifications/Context/components/Action/index.js

@@ -0,0 +1,20 @@
+/* @flow */
+import * as React from 'react';
+import { Notification } from 'components/Notification';
+
+import type { Props } from '../../index';
+
+export default (props: Props) => {
+    const { notifications, close } = props;
+    return notifications.map(n => (
+        <Notification
+            key={n.title}
+            type={n.type}
+            title={n.title}
+            message={n.message}
+            cancelable={n.cancelable}
+            actions={n.actions}
+            close={close}
+        />
+    ));
+};

src/components/notifications/Context/components/Static/index.js

@@ -0,0 +1,17 @@
+/* @flow */
+import * as React from 'react';
+import { Notification } from 'components/Notification';
+
+import type { Props } from '../../index';
+
+export default (props: Props) => {
+    const { location } = props.router;
+    if (!location) return null;
+
+    const notifications: Array<Notification> = [];
+    if (location.state.device) {
+        notifications.push(<Notification key="example" type="info" title="Static example" />);
+    }
+
+    return notifications;
+};

src/components/notifications/Context/index.js

@@ -0,0 +1,55 @@
+/* @flow */
+import * as React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import type { State, Dispatch } from 'flowtype';
+
+import { reconnect } from 'actions/DiscoveryActions';
+import * as NotificationActions from 'actions/NotificationActions';
+
+import StaticNotifications from './components/Static';
+import AccountNotifications from './components/Account';
+import ActionNotifications from './components/Action';
+
+export type StateProps = {
+    router: $ElementType<State, 'router'>;
+    notifications: $ElementType<State, 'notifications'>;
+    selectedAccount: $ElementType<State, 'selectedAccount'>;
+    wallet: $ElementType<State, 'wallet'>;
+    blockchain: $ElementType<State, 'blockchain'>;
+    children?: React.Node;
+}
+
+export type DispatchProps = {
+    close: typeof NotificationActions.close;
+    blockchainReconnect: typeof reconnect;
+}
+
+export type Props = StateProps & DispatchProps;
+
+type OwnProps = {};
+
+const Notifications = (props: Props) => (
+    <div>
+        <StaticNotifications {...props} />
+        <AccountNotifications {...props} />
+        <ActionNotifications {...props} />
+    </div>
+);
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    router: state.router,
+    notifications: state.notifications,
+    selectedAccount: state.selectedAccount,
+    wallet: state.wallet,
+    blockchain: state.blockchain,
+});
+
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
+    close: bindActionCreators(NotificationActions.close, dispatch),
+    blockchainReconnect: bindActionCreators(reconnect, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Notifications);