diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js index 409ae846..c3db8d7c 100644 --- a/src/actions/SelectedAccountActions.js +++ b/src/actions/SelectedAccountActions.js @@ -38,36 +38,27 @@ export const dispose = (): Action => ({ type: ACCOUNT.DISPOSE, }); -const getAccountStatus = (state: State, selectedAccount: SelectedAccountState): ?AccountStatus => { +const getAccountLoader = (state: State, selectedAccount: SelectedAccountState): ?AccountStatus => { const device = state.wallet.selectedDevice; - if (!device || !device.state) { - return { - type: 'loader-progress', - title: 'Loading device...', - shouldRender: false, - }; - } - const { account, discovery, network, } = selectedAccount; - // corner case: accountState didn't finish loading state after LOCATION_CHANGE action - if (!network) { + if (!device || !device.state) { return { - type: 'loader-progress', - title: 'Loading account state...', + type: 'progress', + title: 'Loading device...', shouldRender: false, }; } - const blockchain = state.blockchain.find(b => b.shortcut === network.shortcut); - if (blockchain && !blockchain.connected) { + // corner case: accountState didn't finish loading state after LOCATION_CHANGE action + if (!network) { return { - type: 'backend', - title: `${network.name} backend is not connected`, + type: 'progress', + title: 'Loading account state...', shouldRender: false, }; } @@ -79,14 +70,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: 'loader-progress', + type: 'progress', title: 'Authenticating device...', shouldRender: false, }; } // case 2: device is unavailable (created with different passphrase settings) account cannot be accessed return { - type: 'loader-info', + type: 'info', title: `Device ${device.instanceLabel} is unavailable`, message: 'Change passphrase settings to use this device', shouldRender: false, @@ -95,7 +86,7 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState): // case 3: device is disconnected return { - type: 'loader-info', + type: 'info', title: `Device ${device.instanceLabel} is disconnected`, message: 'Connect device to load accounts', shouldRender: false, @@ -105,28 +96,46 @@ const getAccountStatus = (state: State, selectedAccount: SelectedAccountState): if (discovery.completed) { // case 4: account not found and discovery is completed return { - type: 'loader-info', + type: 'info', title: 'Account does not exist', 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, - }; + return null; +}; + +const getAccountNotification = (state: State, selectedAccount: SelectedAccountState): ?AccountStatus => { + const device = state.wallet.selectedDevice; + const { network } = selectedAccount; + + if (device && network) { + const blockchain = state.blockchain.find(b => b.shortcut === network.shortcut); + if (blockchain && !blockchain.connected) { + return { + type: 'backend', + title: `${network.name} backend is not connected`, + 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, + }; + } } return null; @@ -152,13 +161,18 @@ const actions = [ export const observe = (prevState: State, action: Action): PayloadAction => (dispatch: Dispatch, getState: GetState): boolean => { // ignore not listed actions if (actions.indexOf(action.type) < 0) return false; - const state: State = getState(); const notification = { type: null, message: null, title: null, }; + const loader = { + type: null, + message: null, + title: null, + }; + const { location } = state.router; // displayed route is not an account route if (!location.state.account) return false; @@ -179,13 +193,18 @@ export const observe = (prevState: State, action: Action): PayloadAction { const { network, notification } = props.selectedAccount; - if (network && notification.type && notification.title && notification.type !== 'loader-progress' && notification.type !== 'loader-info') { + if (network && notification.type && notification.title) { 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 b0411a0a..a7ce0b65 100644 --- a/src/reducers/SelectedAccountReducer.js +++ b/src/reducers/SelectedAccountReducer.js @@ -22,6 +22,11 @@ export type State = { title: ?string, message: ?string, }, + loader: { + type: ?string, + title: ?string, + message: ?string, + }, shouldRender: boolean, }; @@ -37,6 +42,11 @@ export const initialState: State = { title: null, message: null, }, + loader: { + 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 3c02272e..3f1958db 100644 --- a/src/views/Wallet/components/Content/index.js +++ b/src/views/Wallet/components/Content/index.js @@ -45,10 +45,10 @@ const Content = ({ }) => ( {(!isLoading) && children} - {isLoading && (type === 'loader-progress' || type === 'loader-info') && ( + {isLoading && (type === 'progress' || type === 'info') && ( - {type === 'loader-progress' && } + {type === 'progress' && } {title || 'Initializing accounts'} {message && {message}} diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 3ab9cf77..8befe6f1 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -93,9 +93,9 @@ const AccountReceive = (props: Props) => { account, discovery, shouldRender, - notification, + loader, } = props.selectedAccount; - const { type, title, message } = notification; + const { type, title, message } = loader; if (!device || !account || !discovery || !shouldRender) return ; const { diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js index 7ada7490..587d4279 100644 --- a/src/views/Wallet/views/Account/Send/index.js +++ b/src/views/Wallet/views/Account/Send/index.js @@ -185,7 +185,7 @@ const AccountSend = (props: Props) => { discovery, tokens, shouldRender, - notification, + loader, } = props.selectedAccount; const { address, @@ -214,7 +214,7 @@ const AccountSend = (props: Props) => { updateFeeLevels, onSend, } = props.sendFormActions; - const { type, title, message } = notification; + const { type, title, message } = loader; 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 54b3b8d8..b18a420b 100644 --- a/src/views/Wallet/views/Account/Summary/index.js +++ b/src/views/Wallet/views/Account/Summary/index.js @@ -74,11 +74,12 @@ const AccountSummary = (props: Props) => { network, tokens, pending, - notification, + loader, shouldRender, } = props.selectedAccount; - const { type, title, message } = notification; + const { type, title, message } = loader; + if (!device || !account || !network || !shouldRender) return ; const explorerLink: string = `${network.explorer.address}${account.address}`;