From c5a9c8fdb77e5904324defa4c6ebdb3143b09ad1 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 5 Nov 2018 12:07:32 +0100 Subject: [PATCH] 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 { 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, 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 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, }) => ( - {!isLoading && children} - {isLoading && ( + {(!isLoading) && children} + {isLoading && (type === 'loader-progress' || type === 'loader-info') && ( - - Initializing accounts + + {type === 'loader-progress' && } + {title || 'Initializing accounts'} + + {message && {message}} )} @@ -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 7d38c917..3ab9cf77 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, @@ -111,7 +112,7 @@ const AccountReceive = (props: Props) => { } return ( - +

Receive Ethereum or tokens

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 ; const isCurrentCurrencyToken = networkSymbol !== currency; @@ -248,7 +249,7 @@ const AccountSend = (props: Props) => { const isAdvancedSettingsHidden = !advanced; return ( - +

Send Ethereum or tokens

diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js index d7918922..54b3b8d8 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 ; 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 ( - +