Added messages to loading, added more cases

src/actions/SelectedAccountActions.js

@@ -42,7 +42,7 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState):
     const device = state.wallet.selectedDevice;
     if (!device || !device.state) {
         return {
-            type: 'info',
+            type: 'loader-progress',
             title: 'Loading device...',
             shouldRender: false,
         };
@@ -57,7 +57,7 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState):
     // corner case: accountState didn't finish loading state after LOCATION_CHANGE action
     if (!network) {
         return {
-            type: 'info',
+            type: 'loader-progress',
             title: 'Loading account state...',
             shouldRender: false,
         };
@@ -79,14 +79,14 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState):
                 // case 1: device is connected but discovery not started yet (probably waiting for auth)
                 if (device.available) {
                     return {
-                        type: 'info',
+                        type: 'loader-progress',
                         title: 'Authenticating device...',
                         shouldRender: false,
                     };
                 }
                 // case 2: device is unavailable (created with different passphrase settings) account cannot be accessed
                 return {
-                    type: 'info',
+                    type: 'loader-info',
                     title: `Device ${device.instanceLabel} is unavailable`,
                     message: 'Change passphrase settings to use this device',
                     shouldRender: false,
@@ -95,7 +95,7 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState):
 
             // case 3: device is disconnected
             return {
-                type: 'info',
+                type: 'loader-info',
                 title: `Device ${device.instanceLabel} is disconnected`,
                 message: 'Connect device to load accounts',
                 shouldRender: false,
@@ -105,7 +105,7 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState):
         if (discovery.completed) {
             // case 4: account not found and discovery is completed
             return {
-                type: 'warning',
+                type: 'loader-info',
                 title: 'Account does not exist',
                 shouldRender: false,
             };
@@ -154,6 +154,11 @@ export const observe = (prevState: State, action: Action): PayloadAction<boolean
     if (actions.indexOf(action.type) < 0) return false;
 
     const state: State = getState();
+    const notification = {
+        type: null,
+        message: null,
+        title: null,
+    };
     const { location } = state.router;
     // displayed route is not an account route
     if (!location.state.account) return false;
@@ -173,13 +178,13 @@ export const observe = (prevState: State, action: Action): PayloadAction<boolean
         discovery,
         tokens,
         pending,
-        notification: null,
+        notification,
         shouldRender: false,
     };
 
     // get "selectedAccount" status from newState
     const status = getAccountStatus(state, newState);
-    newState.notification = status || null;
+    newState.notification = status || notification;
     newState.shouldRender = status ? status.shouldRender : true;
     // check if newState is different than previous state
     const stateChanged = reducerUtils.observeChanges(prevState.selectedAccount, newState, {

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

@@ -7,7 +7,7 @@ import type { Props } from '../../index';
 // There could be only one account notification
 export default (props: Props) => {
     const { network, notification } = props.selectedAccount;
-    if (network && notification) {
+    if (network && notification.type && notification.type !== 'loader-progress' && notification.type !== 'loader-info') {
         if (notification.type === 'backend') {
             // special case: backend is down
             // TODO: this is a different component with "auto resolve" button

src/reducers/SelectedAccountReducer.js

@@ -17,10 +17,10 @@ export type State = {
     tokens: Array<Token>,
     pending: Array<PendingTx>,
     discovery: ?Discovery,
-    notification: ?{
+    notification: {
-        type: string,
+        type: ?string,
-        title: string,
+        title: ?string,
-        message?: string,
+        message: ?string,
     },
     shouldRender: boolean,
 };
@@ -32,7 +32,11 @@ export const initialState: State = {
     tokens: [],
     pending: [],
     discovery: null,
-    notification: null,
+    notification: {
+        type: null,
+        title: null,
+        message: null,
+    },
     shouldRender: false,
 };
 

src/views/Wallet/components/Content/index.js

@@ -17,7 +17,7 @@ const Loading = styled.div`
     flex: 1;
     align-items: center;
     justify-content: center;
-    flex-direction: row;
+    flex-direction: column;
 `;
 
 const Text = styled.div`
@@ -26,16 +26,32 @@ const Text = styled.div`
     margin-left: 10px;
 `;
 
+const Message = styled.div`
+    font-size: ${FONT_SIZE.SMALL};
+    color: ${colors.TEXT_PRIMARY};
+`;
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
 const Content = ({
     children,
+    title,
+    message,
+    type,
     isLoading = false,
 }) => (
     <Wrapper>
-        {!isLoading && children}
+        {(!isLoading) && children}
-        {isLoading && (
+        {isLoading && (type === 'loader-progress' || type === 'loader-info') && (
             <Loading>
-                <Loader size={30} />
+                <Row>
-                <Text>Initializing accounts</Text>
+                    {type === 'loader-progress' && <Loader size={30} />}
+                    <Text>{title || 'Initializing accounts'}</Text>
+                </Row>
+                {message && <Message>{message}</Message>}
             </Loading>
         )}
     </Wrapper>
@@ -44,6 +60,9 @@ const Content = ({
 Content.propTypes = {
     children: PropTypes.element,
     isLoading: PropTypes.bool,
+    title: PropTypes.string,
+    message: PropTypes.string,
+    type: PropTypes.string,
 };
 
 export default Content;

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

@@ -93,9 +93,10 @@ const AccountReceive = (props: Props) => {
         account,
         discovery,
         shouldRender,
+        notification,
     } = props.selectedAccount;
-
+    const { type, title, message } = notification;
-    if (!device || !account || !discovery || !shouldRender) return null;
+    if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
 
     const {
         addressVerified,
@@ -111,7 +112,7 @@ const AccountReceive = (props: Props) => {
     }
 
     return (
-        <Content isLoading={!discovery.completed}>
+        <Content>
             <React.Fragment>
                 <H2>Receive Ethereum or tokens</H2>
                 <AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>

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

@@ -185,6 +185,7 @@ const AccountSend = (props: Props) => {
         discovery,
         tokens,
         shouldRender,
+        notification,
     } = props.selectedAccount;
     const {
         address,
@@ -213,8 +214,8 @@ const AccountSend = (props: Props) => {
         updateFeeLevels,
         onSend,
     } = props.sendFormActions;
-
+    const { type, title, message } = notification;
-    if (!device || !account || !discovery || !network || !shouldRender) return null;
+    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
 
     const isCurrentCurrencyToken = networkSymbol !== currency;
 
@@ -248,7 +249,7 @@ const AccountSend = (props: Props) => {
     const isAdvancedSettingsHidden = !advanced;
 
     return (
-        <Content isLoading={!discovery.completed}>
+        <Content>
             <React.Fragment>
                 <H2>Send Ethereum or tokens</H2>
                 <InputRow>

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

@@ -73,20 +73,20 @@ const AccountSummary = (props: Props) => {
         account,
         network,
         tokens,
-        discovery,
         pending,
+        notification,
         shouldRender,
     } = props.selectedAccount;
 
-    // flow
+    const { type, title, message } = notification;
-    if (!device || !account || !network || !shouldRender) return null;
+    if (!device || !account || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
 
     const explorerLink: string = `${network.explorer.address}${account.address}`;
     const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
     const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
 
     return (
-        <Content isLoading={!discovery.completed}>
+        <Content>
             <React.Fragment>
                 <AccountHeading>
                     <AccountName>