From 8030aa71b13f8dc7695fd2643820090871d2bf73 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Wed, 31 Oct 2018 12:31:43 +0100
Subject: [PATCH 1/5] Added loading state for content

---
 src/views/Wallet/components/Content/index.js | 27 +++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js
index 1b2ef54e..b9304072 100644
--- a/src/views/Wallet/components/Content/index.js
+++ b/src/views/Wallet/components/Content/index.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import Loader from 'components/Loader';
+import { FONT_SIZE } from 'config/variables';
+import colors from 'config/colors';
 
 const Wrapper = styled.div`
     display: flex;
@@ -9,16 +12,38 @@ const Wrapper = styled.div`
     padding: 40px 35px 40px 35px;
 `;
 
+const Loading = styled.div`
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+`;
+
+const Text = styled.div`
+    font-size: ${FONT_SIZE.BIG};
+    color: ${colors.TEXT_SECONDARY};
+    margin-left: 10px;
+`;
+
 const Content = ({
     children,
+    isLoading = false,
 }) => (
     <Wrapper>
-        {children}
+        {!isLoading && children}
+        {isLoading && (
+            <Loading>
+                <Loader size={30} />
+                <Text>Initializing accounts</Text>
+            </Loading>
+        )}
     </Wrapper>
 );
 
 Content.propTypes = {
     children: PropTypes.element,
+    isLoading: PropTypes.bool,
 };
 
 export default Content;

From 90c0dd12768725b06fd096447833f1db36f8fa3f Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Wed, 31 Oct 2018 12:55:29 +0100
Subject: [PATCH 2/5] Added loader for all accounts views

---
 src/actions/SelectedAccountActions.js           | 16 ----------------
 src/views/Wallet/views/Account/Receive/index.js |  2 +-
 src/views/Wallet/views/Account/Send/index.js    |  2 +-
 src/views/Wallet/views/Account/Summary/index.js |  3 ++-
 4 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js
index 995e1cf8..e7ed924e 100644
--- a/src/actions/SelectedAccountActions.js
+++ b/src/actions/SelectedAccountActions.js
@@ -110,13 +110,6 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState):
                 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
@@ -136,15 +129,6 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState):
         };
     }
 
-    // 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;
 };
 
diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js
index c56c7fd0..41ade657 100644
--- a/src/views/Wallet/views/Account/Receive/index.js
+++ b/src/views/Wallet/views/Account/Receive/index.js
@@ -111,7 +111,7 @@ const AccountReceive = (props: Props) => {
     }
 
     return (
-        <Content>
+        <Content isLoading={!discovery.completed}>
             <React.Fragment>
                 <H2>Receive Ethereum or tokens</H2>
                 <AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js
index 74f17322..9dbe9a62 100644
--- a/src/views/Wallet/views/Account/Send/index.js
+++ b/src/views/Wallet/views/Account/Send/index.js
@@ -248,7 +248,7 @@ const AccountSend = (props: Props) => {
     const isAdvancedSettingsHidden = !advanced;
 
     return (
-        <Content>
+        <Content isLoading={!discovery.completed}>
             <React.Fragment>
                 <H2>Send Ethereum or tokens</H2>
                 <InputRow>
diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js
index 90da7d41..a494b67e 100644
--- a/src/views/Wallet/views/Account/Summary/index.js
+++ b/src/views/Wallet/views/Account/Summary/index.js
@@ -73,6 +73,7 @@ const AccountSummary = (props: Props) => {
         account,
         network,
         tokens,
+        discovery,
         pending,
         shouldRender,
     } = props.selectedAccount;
@@ -85,7 +86,7 @@ const AccountSummary = (props: Props) => {
     const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
 
     return (
-        <Content>
+        <Content isLoading={!discovery.completed}>
             <React.Fragment>
                 <AccountHeading>
                     <AccountName>

From 53ca124a5553ae41135d30921bf08ebdd86916ce Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Mon, 5 Nov 2018 12:07:32 +0100
Subject: [PATCH 3/5] Added messages to loading, added more cases

---
 src/actions/SelectedAccountActions.js         | 21 +++++++++-----
 .../Context/components/Account/index.js       |  2 +-
 src/reducers/SelectedAccountReducer.js        | 14 +++++----
 src/views/Wallet/components/Content/index.js  | 29 +++++++++++++++----
 .../Wallet/views/Account/Receive/index.js     |  7 +++--
 src/views/Wallet/views/Account/Send/index.js  |  7 +++--
 .../Wallet/views/Account/Summary/index.js     |  8 ++---
 7 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js
index e7ed924e..b170a453 100644
--- a/src/actions/SelectedAccountActions.js
+++ b/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, {
diff --git a/src/components/notifications/Context/components/Account/index.js b/src/components/notifications/Context/components/Account/index.js
index 5dbddcbc..90dc4ced 100644
--- a/src/components/notifications/Context/components/Account/index.js
+++ b/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
diff --git a/src/reducers/SelectedAccountReducer.js b/src/reducers/SelectedAccountReducer.js
index fbd4f643..b0411a0a 100644
--- a/src/reducers/SelectedAccountReducer.js
+++ b/src/reducers/SelectedAccountReducer.js
@@ -17,10 +17,10 @@ export type State = {
     tokens: Array<Token>,
     pending: Array<PendingTx>,
     discovery: ?Discovery,
-    notification: ?{
-        type: string,
-        title: string,
-        message?: string,
+    notification: {
+        type: ?string,
+        title: ?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,
 };
 
diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js
index b9304072..4157dee0 100644
--- a/src/views/Wallet/components/Content/index.js
+++ b/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 && (
+        {(!isLoading) && children}
+        {isLoading && (type === 'loader-progress' || type === 'loader-info') && (
             <Loading>
-                <Loader size={30} />
-                <Text>Initializing accounts</Text>
+                <Row>
+                    {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;
diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js
index 41ade657..35475aa7 100644
--- a/src/views/Wallet/views/Account/Receive/index.js
+++ b/src/views/Wallet/views/Account/Receive/index.js
@@ -93,9 +93,10 @@ const AccountReceive = (props: Props) => {
         account,
         discovery,
         shouldRender,
+        notification,
     } = props.selectedAccount;
-
-    if (!device || !account || !discovery || !shouldRender) return null;
+    const { type, title, message } = notification;
+    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}>
diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js
index 9dbe9a62..7ada7490 100644
--- a/src/views/Wallet/views/Account/Send/index.js
+++ b/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;
-
-    if (!device || !account || !discovery || !network || !shouldRender) return null;
+    const { type, title, message } = notification;
+    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>
diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js
index a494b67e..93034480 100644
--- a/src/views/Wallet/views/Account/Summary/index.js
+++ b/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
-    if (!device || !account || !network || !shouldRender) return null;
+    const { type, title, message } = notification;
+    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>

From 83e46bd0121b6e34d78063a87d5c3144f4a95e49 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Mon, 5 Nov 2018 12:12:22 +0100
Subject: [PATCH 4/5] Fixed row

---
 src/views/Wallet/components/Content/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js
index 4157dee0..3c02272e 100644
--- a/src/views/Wallet/components/Content/index.js
+++ b/src/views/Wallet/components/Content/index.js
@@ -33,7 +33,7 @@ const Message = styled.div`
 
 const Row = styled.div`
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
 `;
 
 const Content = ({

From f93eb3bebd878283ffd8a436f66ff4b430d290fa Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Thu, 15 Nov 2018 16:19:04 +0100
Subject: [PATCH 5/5] Fix flow

---
 src/actions/SelectedAccountActions.js                 |  6 +++---
 src/components/Notification/index.js                  |  2 +-
 .../notifications/Context/components/Account/index.js | 11 +++++++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js
index b170a453..409ae846 100644
--- a/src/actions/SelectedAccountActions.js
+++ b/src/actions/SelectedAccountActions.js
@@ -28,9 +28,9 @@ export type SelectedAccountAction = {
 };
 
 type AccountStatus = {
-    type: string; // notification type
-    title: string; // notification title
-    message?: string; // notification message
+    type: ?string; // notification type
+    title: ?string; // notification title
+    message?: ?string; // notification message
     shouldRender: boolean; // should render account page
 }
 
diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js
index fdff20e7..cd3caa3f 100644
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@@ -19,7 +19,7 @@ type Props = {
     cancelable?: boolean;
     title: string;
     className?: string;
-    message?: string;
+    message?: ?string;
     actions?: Array<CallbackAction>;
     close?: typeof NotificationActions.close,
     loading?: boolean
diff --git a/src/components/notifications/Context/components/Account/index.js b/src/components/notifications/Context/components/Account/index.js
index 90dc4ced..3b8e4709 100644
--- a/src/components/notifications/Context/components/Account/index.js
+++ b/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.type && notification.type !== 'loader-progress' && notification.type !== 'loader-info') {
+    if (network && notification.type && notification.title && 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
@@ -27,7 +27,14 @@ export default (props: Props) => {
                 />
             );
         }
-        return (<Notification type={notification.type} title={notification.title} message={notification.message} />);
+        return (
+            <Notification
+                type={notification.type}
+                title={notification.title}
+                message={notification.message}
+            />
+        );
     }
+
     return null;
 };
\ No newline at end of file