diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js index f3f7c919..82687ace 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 } @@ -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; 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 5dbddcbc..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) { + 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 (); + return ( + + ); } + return null; }; \ No newline at end of file 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, pending: Array, 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 1b2ef54e..3c02272e 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,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, }) => ( - {children} + {(!isLoading) && children} + {isLoading && (type === 'loader-progress' || type === 'loader-info') && ( + + + {type === 'loader-progress' && } + {title || 'Initializing accounts'} + + {message && {message}} + + )} ); 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 c56c7fd0..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 ; const { addressVerified, diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js index e86bf298..40551972 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 ; const isCurrentCurrencyToken = networkSymbol !== currency; diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js index f725a44d..8e88e921 100644 --- a/src/views/Wallet/views/Account/Summary/index.js +++ b/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 ; const explorerLink: string = `${network.explorer.address}${account.address}`; const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);