Merge branch 'feature/accounts-loader' into sign/verify

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
 }
 
@@ -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,18 +105,11 @@ 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,
             };
         }
-
-        // 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
@@ -137,15 +130,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;
 };
 
@@ -171,6 +155,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;
@@ -190,13 +179,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/Notification/index.js

@@ -17,7 +17,7 @@ type Props = {
     cancelable?: boolean;
     title: string;
     className?: string;
-    message?: string;
+    message?: ?string;
     actions?: Array<CallbackAction>;
     close?: typeof NotificationActions.close,
     loading?: boolean

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

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

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,57 @@ 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: column;
+`;
+
+const Text = styled.div`
+    font-size: ${FONT_SIZE.BIG};
+    color: ${colors.TEXT_SECONDARY};
+    margin-left: 10px;
+`;
+
+const Message = styled.div`
+    font-size: ${FONT_SIZE.SMALL};
+    color: ${colors.TEXT_PRIMARY};
+`;
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: row;
+`;
+
 const Content = ({
     children,
+    title,
+    message,
+    type,
+    isLoading = false,
 }) => (
     <Wrapper>
-        {children}
+        {(!isLoading) && children}
+        {isLoading && (type === 'loader-progress' || type === 'loader-info') && (
+            <Loading>
+                <Row>
+                    {type === 'loader-progress' && <Loader size={30} />}
+                    <Text>{title || 'Initializing accounts'}</Text>
+                </Row>
+                {message && <Message>{message}</Message>}
+            </Loading>
+        )}
     </Wrapper>
 );
 
 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;
-
-    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,

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;
 

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

@@ -75,11 +75,12 @@ const AccountSummary = (props: Props) => {
         network,
         tokens,
         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);