Merge pull request #331 from trezor/fix/connect-backend-spinner

Fix/spinner for connect backend button

src/actions/BlockchainActions.js

@@ -19,6 +19,9 @@ export type BlockchainAction = {
     type: typeof BLOCKCHAIN.UPDATE_FEE,
     shortcut: string,
     feeLevels: Array<BlockchainFeeLevel>,
+} | {
+    type: typeof BLOCKCHAIN.START_SUBSCRIBE,
+    shortcut: string,
 }
 
 // Conditionally subscribe to blockchain backend
@@ -52,6 +55,11 @@ export const subscribe = (networkName: string): PromiseAction<void> => async (di
     const network = config.networks.find(c => c.shortcut === networkName);
     if (!network) return;
 
+    dispatch({
+        type: BLOCKCHAIN.START_SUBSCRIBE,
+        shortcut: network.shortcut,
+    });
+
     switch (network.type) {
         case 'ethereum':
             await dispatch(EthereumBlockchainActions.subscribe(networkName));

src/actions/constants/blockchain.js

@@ -1,4 +1,5 @@
 /* @flow */
 
+export const START_SUBSCRIBE: 'blockchain__start_subscribe' = 'blockchain__start_subscribe';
 export const READY: 'blockchain__ready' = 'blockchain__ready';
 export const UPDATE_FEE: 'blockchain__update_fee' = 'blockchain__update_fee';

src/components/notifications/Context/components/Account/index.js

@@ -8,6 +8,7 @@ import type { Props } from '../../index';
 export default (props: Props) => {
     const { network, notification } = props.selectedAccount;
     if (!network || !notification) return null;
+    const blockchain = props.blockchain.find(b => b.shortcut === network.shortcut);
 
     if (notification.type === 'backend') {
         // special case: backend is down
@@ -17,6 +18,7 @@ export default (props: Props) => {
                 type="error"
                 title={notification.title}
                 message={notification.message}
+                isActionInProgress={blockchain && blockchain.connecting}
                 actions={
                     [{
                         label: 'Connect',

src/reducers/BlockchainReducer.js

@@ -16,6 +16,7 @@ export type BlockchainNetwork = {
     feeTimestamp: number,
     feeLevels: Array<BlockchainFeeLevel>,
     connected: boolean,
+    connecting: boolean,
     block: number,
 };
 
@@ -23,6 +24,26 @@ export type State = Array<BlockchainNetwork>;
 
 export const initialState: State = [];
 
+const onStartSubscribe = (state: State, shortcut: string): State => {
+    const network = state.find(b => b.shortcut === shortcut);
+    if (network) {
+        const others = state.filter(b => b !== network);
+        return others.concat([{
+            ...network,
+            connecting: true,
+        }]);
+    }
+
+    return state.concat([{
+        shortcut,
+        connected: false,
+        connecting: true,
+        block: 0,
+        feeTimestamp: 0,
+        feeLevels: [],
+    }]);
+};
+
 const onConnect = (state: State, action: BlockchainConnect): State => {
     const shortcut = action.payload.coin.shortcut.toLowerCase();
     const network = state.find(b => b.shortcut === shortcut);
@@ -31,13 +52,16 @@ const onConnect = (state: State, action: BlockchainConnect): State => {
         const others = state.filter(b => b !== network);
         return others.concat([{
             ...network,
+            block: info.block,
             connected: true,
+            connecting: false,
         }]);
     }
 
     return state.concat([{
         shortcut,
         connected: true,
+        connecting: false,
         block: info.block,
         feeTimestamp: 0,
         feeLevels: [],
@@ -52,12 +76,14 @@ const onError = (state: State, action: BlockchainError): State => {
         return others.concat([{
             ...network,
             connected: false,
+            connecting: false,
         }]);
     }
 
     return state.concat([{
         shortcut,
         connected: false,
+        connecting: false,
         block: 0,
         feeTimestamp: 0,
         feeLevels: [],
@@ -93,6 +119,8 @@ const updateFee = (state: State, shortcut: string, feeLevels: Array<BlockchainFe
 
 export default (state: State = initialState, action: Action): State => {
     switch (action.type) {
+        case BLOCKCHAIN_ACTION.START_SUBSCRIBE:
+            return onStartSubscribe(state, action.shortcut);
         case BLOCKCHAIN_EVENT.CONNECT:
             return onConnect(state, action);
         case BLOCKCHAIN_EVENT.ERROR: