mirror of https://github.com/trezor/trezor-wallet
Vladimir Volek
6 years ago
commit
151101a61c
@ -1,4 +1,4 @@
|
||||
# Browsers that we support
|
||||
> 5%
|
||||
IE > 9 # sorry
|
||||
last 10 versions
|
||||
IE > 8
|
||||
last 5 versions
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,64 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
background: #ebebeb;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
background: #1A1A1A;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.unsupported-browsers {
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
img {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a {
|
||||
clear: both;
|
||||
color: #01B757;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -1,100 +1,210 @@
|
||||
/* @flow */
|
||||
|
||||
|
||||
import { LOCATION_CHANGE } from 'react-router-redux';
|
||||
import * as WALLET from 'actions/constants/wallet';
|
||||
import * as ACCOUNT from 'actions/constants/account';
|
||||
import * as NOTIFICATION from 'actions/constants/notification';
|
||||
import * as DISCOVERY from 'actions/constants/discovery';
|
||||
import * as TOKEN from 'actions/constants/token';
|
||||
import * as PENDING from 'actions/constants/pendingTx';
|
||||
|
||||
import * as stateUtils from 'reducers/utils';
|
||||
import * as reducerUtils from 'reducers/utils';
|
||||
|
||||
import type {
|
||||
AsyncAction,
|
||||
PayloadAction,
|
||||
Action,
|
||||
GetState,
|
||||
Dispatch,
|
||||
State,
|
||||
} from 'flowtype';
|
||||
|
||||
type SelectedAccountState = $ElementType<State, 'selectedAccount'>;
|
||||
|
||||
export type SelectedAccountAction = {
|
||||
type: typeof ACCOUNT.DISPOSE,
|
||||
} | {
|
||||
type: typeof ACCOUNT.UPDATE_SELECTED_ACCOUNT,
|
||||
payload: $ElementType<State, 'selectedAccount'>
|
||||
payload: SelectedAccountState,
|
||||
};
|
||||
|
||||
type AccountStatus = {
|
||||
type: string; // notification type
|
||||
title: string; // notification title
|
||||
message?: string; // notification message
|
||||
shouldRender: boolean; // should render account page
|
||||
}
|
||||
|
||||
export const dispose = (): Action => ({
|
||||
type: ACCOUNT.DISPOSE,
|
||||
});
|
||||
|
||||
export const updateSelectedValues = (prevState: State, action: Action): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
|
||||
const locationChange: boolean = action.type === LOCATION_CHANGE;
|
||||
const state: State = getState();
|
||||
const { location } = state.router;
|
||||
const getAccountStatus = (state: State, selectedAccount: SelectedAccountState): ?AccountStatus => {
|
||||
const device = state.wallet.selectedDevice;
|
||||
if (!device || !device.state) {
|
||||
return {
|
||||
type: 'info',
|
||||
title: 'Loading device...',
|
||||
shouldRender: false,
|
||||
};
|
||||
}
|
||||
|
||||
const {
|
||||
account,
|
||||
discovery,
|
||||
network,
|
||||
} = selectedAccount;
|
||||
|
||||
// corner case: accountState didn't finish loading state after LOCATION_CHANGE action
|
||||
if (!network) {
|
||||
return {
|
||||
type: 'info',
|
||||
title: 'Loading account state...',
|
||||
shouldRender: false,
|
||||
};
|
||||
}
|
||||
|
||||
// handle devices state change (from trezor-connect events or location change)
|
||||
if (locationChange
|
||||
|| prevState.accounts !== state.accounts
|
||||
|| prevState.discovery !== state.discovery
|
||||
|| prevState.tokens !== state.tokens
|
||||
|| prevState.pending !== state.pending) {
|
||||
const account = stateUtils.getSelectedAccount(state);
|
||||
const network = stateUtils.getSelectedNetwork(state);
|
||||
const discovery = stateUtils.getDiscoveryProcess(state);
|
||||
const tokens = stateUtils.getAccountTokens(state, account);
|
||||
const pending = stateUtils.getAccountPendingTx(state.pending, account);
|
||||
|
||||
const payload: $ElementType<State, 'selectedAccount'> = {
|
||||
location: location.pathname,
|
||||
account,
|
||||
network,
|
||||
discovery,
|
||||
tokens,
|
||||
pending,
|
||||
const blockchain = state.blockchain.find(b => b.name === network.network);
|
||||
if (blockchain && !blockchain.connected) {
|
||||
return {
|
||||
type: 'backend',
|
||||
title: `${network.name} backend is not connected`,
|
||||
shouldRender: false,
|
||||
};
|
||||
}
|
||||
|
||||
let needUpdate: boolean = false;
|
||||
Object.keys(payload).forEach((key) => {
|
||||
if (Array.isArray(payload[key])) {
|
||||
if (Array.isArray(state.selectedAccount[key]) && payload[key].length !== state.selectedAccount[key].length) {
|
||||
needUpdate = true;
|
||||
// account not found (yet). checking why...
|
||||
if (!account) {
|
||||
if (!discovery || discovery.waitingForDevice) {
|
||||
if (device.connected) {
|
||||
// case 1: device is connected but discovery not started yet (probably waiting for auth)
|
||||
if (device.available) {
|
||||
return {
|
||||
type: 'info',
|
||||
title: 'Loading accounts...',
|
||||
shouldRender: false,
|
||||
};
|
||||
}
|
||||
} else if (payload[key] !== state.selectedAccount[key]) {
|
||||
needUpdate = true;
|
||||
// case 2: device is unavailable (created with different passphrase settings) account cannot be accessed
|
||||
return {
|
||||
type: 'info',
|
||||
title: `Device ${device.instanceLabel} is unavailable`,
|
||||
message: 'Change passphrase settings to use this device',
|
||||
shouldRender: false,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
if (needUpdate) {
|
||||
dispatch({
|
||||
type: ACCOUNT.UPDATE_SELECTED_ACCOUNT,
|
||||
payload,
|
||||
});
|
||||
|
||||
if (location.state.send) {
|
||||
const rejectedTxs = pending.filter(tx => tx.rejected);
|
||||
rejectedTxs.forEach((tx) => {
|
||||
dispatch({
|
||||
type: NOTIFICATION.ADD,
|
||||
payload: {
|
||||
type: 'warning',
|
||||
title: 'Pending transaction rejected',
|
||||
message: `Transaction with id: ${tx.id} not found.`,
|
||||
cancelable: true,
|
||||
actions: [
|
||||
{
|
||||
label: 'OK',
|
||||
callback: () => {
|
||||
dispatch({
|
||||
type: PENDING.TX_RESOLVED,
|
||||
tx,
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
// case 3: device is disconnected
|
||||
return {
|
||||
type: 'info',
|
||||
title: `Device ${device.instanceLabel} is disconnected`,
|
||||
message: 'Connect device to load accounts',
|
||||
shouldRender: false,
|
||||
};
|
||||
}
|
||||
|
||||
if (discovery.completed) {
|
||||
// case 4: account not found and discovery is completed
|
||||
return {
|
||||
type: 'warning',
|
||||
title: 'Account does not exist',
|
||||
shouldRender: false,
|
||||
};
|
||||
}
|
||||
|
||||
// case 6: discovery is not completed yet
|
||||
return {
|
||||
type: 'info',
|
||||
title: 'Loading accounts...',
|
||||
shouldRender: false,
|
||||
};
|
||||
}
|
||||
|
||||
// Additional status: account does exists and it's visible but shouldn't be active
|
||||
if (!device.connected) {
|
||||
return {
|
||||
type: 'info',
|
||||
title: `Device ${device.instanceLabel} is disconnected`,
|
||||
shouldRender: true,
|
||||
};
|
||||
}
|
||||
if (!device.available) {
|
||||
return {
|
||||
type: 'info',
|
||||
title: `Device ${device.instanceLabel} is unavailable`,
|
||||
message: 'Change passphrase settings to use this device',
|
||||
shouldRender: true,
|
||||
};
|
||||
}
|
||||
|
||||
// Additional status: account does exists, but waiting for discovery to complete
|
||||
if (discovery && !discovery.completed) {
|
||||
return {
|
||||
type: 'info',
|
||||
title: 'Loading accounts...',
|
||||
shouldRender: true,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// list of all actions which has influence on "selectedAccount" reducer
|
||||
// other actions will be ignored
|
||||
const actions = [
|
||||
LOCATION_CHANGE,
|
||||
WALLET.SET_SELECTED_DEVICE,
|
||||
WALLET.UPDATE_SELECTED_DEVICE,
|
||||
...Object.values(ACCOUNT).filter(v => typeof v === 'string' && v !== ACCOUNT.UPDATE_SELECTED_ACCOUNT), // exported values got unwanted "__esModule: true" as first element
|
||||
...Object.values(DISCOVERY).filter(v => typeof v === 'string'),
|
||||
...Object.values(TOKEN).filter(v => typeof v === 'string'),
|
||||
...Object.values(PENDING).filter(v => typeof v === 'string'),
|
||||
];
|
||||
|
||||
/*
|
||||
* Called from WalletService
|
||||
*/
|
||||
export const observe = (prevState: State, action: Action): PayloadAction<boolean> => (dispatch: Dispatch, getState: GetState): boolean => {
|
||||
// ignore not listed actions
|
||||
if (actions.indexOf(action.type) < 0) return false;
|
||||
|
||||
const state: State = getState();
|
||||
const { location } = state.router;
|
||||
// displayed route is not an account route
|
||||
if (!location.state.account) return false;
|
||||
|
||||
// get new values for selected account
|
||||
const account = reducerUtils.getSelectedAccount(state);
|
||||
const network = reducerUtils.getSelectedNetwork(state);
|
||||
const discovery = reducerUtils.getDiscoveryProcess(state);
|
||||
const tokens = reducerUtils.getAccountTokens(state, account);
|
||||
const pending = reducerUtils.getAccountPendingTx(state.pending, account);
|
||||
|
||||
// prepare new state for "selectedAccount" reducer
|
||||
const newState: SelectedAccountState = {
|
||||
location: state.router.location.pathname,
|
||||
account,
|
||||
network,
|
||||
discovery,
|
||||
tokens,
|
||||
pending,
|
||||
notification: null,
|
||||
shouldRender: false,
|
||||
};
|
||||
|
||||
// get "selectedAccount" status from newState
|
||||
const status = getAccountStatus(state, newState);
|
||||
newState.notification = status || null;
|
||||
newState.shouldRender = status ? status.shouldRender : true;
|
||||
// check if newState is different than previous state
|
||||
const stateChanged = reducerUtils.observeChanges(prevState.selectedAccount, newState, {
|
||||
account: ['balance', 'nonce'],
|
||||
discovery: ['accountIndex', 'interrupted', 'completed', 'waitingForBlockchain', 'waitingForDevice'],
|
||||
});
|
||||
|
||||
if (stateChanged) {
|
||||
// update values in reducer
|
||||
dispatch({
|
||||
type: ACCOUNT.UPDATE_SELECTED_ACCOUNT,
|
||||
payload: newState,
|
||||
});
|
||||
}
|
||||
return stateChanged;
|
||||
};
|
||||
|
||||
@ -0,0 +1,113 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import Icon from 'components/Icon';
|
||||
import ICONS from 'config/icons';
|
||||
import colors from 'config/colors';
|
||||
import { Notification } from 'components/Notification';
|
||||
import { getIcon, getColor } from 'utils/notification';
|
||||
|
||||
const Wrapper = styled.div``;
|
||||
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
background: ${colors.WHITE};
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid ${colors.BACKGROUND};
|
||||
`;
|
||||
|
||||
const Left = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Right = styled.div``;
|
||||
const Body = styled.div``;
|
||||
|
||||
const Title = styled.div`
|
||||
color: ${props => props.color};
|
||||
`;
|
||||
|
||||
class Group extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
visibleCount: 1,
|
||||
visible: true,
|
||||
};
|
||||
}
|
||||
|
||||
toggle = () => {
|
||||
if (this.state.visible) {
|
||||
this.setState({
|
||||
visible: false,
|
||||
visibleCount: 0,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
visible: true,
|
||||
visibleCount: this.props.groupNotifications.length,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { type, groupNotifications } = this.props;
|
||||
const color = getColor(type);
|
||||
return (
|
||||
<Wrapper>
|
||||
{groupNotifications.length > 1 && (
|
||||
<Header onClick={this.toggle}>
|
||||
<Left>
|
||||
<Icon
|
||||
color={color}
|
||||
size={30}
|
||||
icon={getIcon(type)}
|
||||
/>
|
||||
<Title color={color}>
|
||||
{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
|
||||
</Title>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon
|
||||
icon={ICONS.ARROW_DOWN}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
isActive={this.state.visible}
|
||||
canAnimate
|
||||
/>
|
||||
</Right>
|
||||
</Header>
|
||||
)}
|
||||
<Body>
|
||||
{groupNotifications
|
||||
.slice(0, this.state.visibleCount)
|
||||
.map(notification => (
|
||||
<Notification
|
||||
key={notification.title}
|
||||
type={notification.type}
|
||||
title={notification.title}
|
||||
message={notification.message}
|
||||
/>
|
||||
))}
|
||||
</Body>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Group.propTypes = {
|
||||
type: PropTypes.string,
|
||||
groupNotifications: PropTypes.arrayOf({
|
||||
key: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
message: PropTypes.string,
|
||||
}),
|
||||
};
|
||||
|
||||
export default Group;
|
||||
@ -0,0 +1,56 @@
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { PRIORITY } from 'constants/notifications';
|
||||
import Group from './components/Group';
|
||||
|
||||
const Wrapper = styled.div``;
|
||||
|
||||
class NotificationsGroup extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.notifications = [
|
||||
{ type: 'warning', title: 'adddaa', message: 'aaaa' },
|
||||
{ type: 'error', title: 'aaddda', message: 'aaaa' },
|
||||
{ type: 'info', title: 'aafffa', message: 'aaaa' },
|
||||
{ type: 'error', title: 'aggaa', message: 'aaaa' },
|
||||
{ type: 'warning', title: 'aasssa', message: 'aaaa' },
|
||||
{ type: 'success', title: 'afaa', message: 'aaaa' },
|
||||
{ type: 'error', title: 'aada', message: 'aaaa' },
|
||||
{ type: 'error', title: 'aafffa', message: 'aaaa' },
|
||||
];
|
||||
}
|
||||
|
||||
groupNotifications = notifications => notifications
|
||||
.reduce((acc, obj) => {
|
||||
const key = obj.type;
|
||||
if (!acc[key]) {
|
||||
acc[key] = [];
|
||||
}
|
||||
acc[key].push(obj);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
sortByPriority(notifications) {
|
||||
return notifications;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { notifications } = this;
|
||||
const notificationGroups = this.groupNotifications(notifications);
|
||||
const sortedNotifications = this.sortByPriority(notificationGroups);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{Object.keys(sortedNotifications).map(group => (
|
||||
<Group
|
||||
groupNotifications={notificationGroups[group]}
|
||||
type={group}
|
||||
/>
|
||||
))}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NotificationsGroup;
|
||||
@ -0,0 +1,36 @@
|
||||
/* @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}
|
||||
actions={
|
||||
[{
|
||||
label: 'Connect',
|
||||
callback: async () => {
|
||||
await props.blockchainReconnect('trop');
|
||||
},
|
||||
}]
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
// return (<Notification type="error" title={notification.title} message={notification.message} />);
|
||||
}
|
||||
return (<Notification type={notification.type} title={notification.title} message={notification.message} />);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
@ -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}
|
||||
/>
|
||||
));
|
||||
};
|
||||
@ -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;
|
||||
};
|
||||
@ -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) => (
|
||||
<React.Fragment>
|
||||
<StaticNotifications {...props} />
|
||||
<AccountNotifications {...props} />
|
||||
<ActionNotifications {...props} />
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
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);
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
PRIORITY: {
|
||||
error: 0,
|
||||
warning: 1,
|
||||
info: 2,
|
||||
success: 3,
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,31 @@
|
||||
import colors from 'config/colors';
|
||||
import icons from 'config/icons';
|
||||
|
||||
const getColor = (type) => {
|
||||
let color;
|
||||
switch (type) {
|
||||
case 'info':
|
||||
color = colors.INFO_PRIMARY;
|
||||
break;
|
||||
case 'error':
|
||||
color = colors.ERROR_PRIMARY;
|
||||
break;
|
||||
case 'warning':
|
||||
color = colors.WARNING_PRIMARY;
|
||||
break;
|
||||
case 'success':
|
||||
color = colors.SUCCESS_PRIMARY;
|
||||
break;
|
||||
default:
|
||||
color = null;
|
||||
}
|
||||
|
||||
return color;
|
||||
};
|
||||
|
||||
const getIcon = type => icons[type.toUpperCase()];
|
||||
|
||||
export {
|
||||
getColor,
|
||||
getIcon,
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Notification } from 'components/Notification';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-width: 720px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const InitializationError = (props: { error: ?string }) => (
|
||||
<Wrapper>
|
||||
<Notification
|
||||
title="Initialization error"
|
||||
message={props.error || ''}
|
||||
type="error"
|
||||
cancelable={false}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
export default InitializationError;
|
||||
Loading…
Reference in new issue