[ETCM-487] Sync info improvements. (#71)

src/App.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames'
-import React from 'react'
+import React, {useEffect} from 'react'
 import _ from 'lodash/fp'
 import {SplashScreen} from './SplashScreen'
 import {
@@ -54,6 +54,10 @@ const migrations = mergeMigrations([migrationsForBackendData])
 const store = createPersistentStore({defaults: defaultData, migrations})
 
 const AppContent: React.FC = () => {
+  useEffect(() => {
+    rendererLog.info('Mantis Wallet renderer started')
+  })
+
   const backendState = BackendState.useContainer()
   const {
     currentRoute: {menu},

src/common/SyncStatus.scss

@@ -40,9 +40,15 @@
   }
 }
 
-.ant-popover .syncStatusLine > strong {
-  @extend %monospace;
-  font-weight: 700;
+.ant-popover {
+  .ant-popover-inner-content {
+    max-width: 250px;
+  }
+
+  .syncStatusLine > strong {
+    @extend %monospace;
+    font-weight: 700;
+  }
 }
 
 @keyframes spin {

src/common/SyncStatus.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import SVG from 'react-inlinesvg'
 import {Popover} from 'antd'
-import {SynchronizationStatus, WalletState} from './wallet-state'
+import {SynchronizationStatus, WalletState, SynchronizationStatusOnline} from './wallet-state'
 import {BackendState} from './backend-state'
 import {SettingsState} from '../settings-state'
 import {Trans} from './Trans'
@@ -14,19 +14,30 @@ interface SyncStatusProps {
   syncStatus: SynchronizationStatus
 }
 
+const getSyncBlocksProgress = (syncStatus: SynchronizationStatusOnline): number => {
+  if (syncStatus.highestKnownBlock === 0) return 0
+  return (syncStatus.currentBlock / syncStatus.highestKnownBlock) * 100
+}
+
 export const SyncMessage = ({syncStatus}: SyncStatusProps): JSX.Element => {
-  if (syncStatus.mode === 'offline') return <Trans k={['wallet', 'syncStatus', 'syncConnecting']} />
-  if (syncStatus.mode === 'synced') return <Trans k={['wallet', 'syncStatus', 'fullySynced']} />
-  return (
-    <Trans
-      k={
-        syncStatus.currentBlock === syncStatus.highestKnownBlock
-          ? ['wallet', 'syncStatus', 'syncingState']
-          : ['wallet', 'syncStatus', 'syncingBlocks']
-      }
-      values={{percentage: syncStatus.percentage.toFixed(2)}}
-    />
-  )
+  switch (syncStatus.mode) {
+    case 'offline':
+      return <Trans k={['wallet', 'syncStatus', 'syncConnecting']} />
+    case 'synced':
+      return <Trans k={['wallet', 'syncStatus', 'fullySynced']} />
+    case 'online':
+      return syncStatus.type === 'blocks' ? (
+        <Trans
+          k={['wallet', 'syncStatus', 'syncingBlocks']}
+          values={{percentage: getSyncBlocksProgress(syncStatus)}}
+        />
+      ) : (
+        <Trans
+          k={['wallet', 'syncStatus', 'syncingState']}
+          values={{processed: syncStatus.pulledStates, total: syncStatus.knownStates}}
+        />
+      )
+  }
 }
 
 export const SyncStatusContent = ({syncStatus}: SyncStatusProps): JSX.Element => {
@@ -43,14 +54,19 @@ export const SyncStatusContent = ({syncStatus}: SyncStatusProps): JSX.Element =>
           values={{blockNumber: syncStatus.currentBlock}}
         />
       </div>
-      {syncStatus.mode === 'online' && (
+      {syncStatus.mode === 'online' && syncStatus.type === 'blocks' && (
         <div className="syncStatusLine">
           <Trans
             k={['wallet', 'syncStatus', 'highestBlock']}
             values={{blockNumber: syncStatus.highestKnownBlock}}
           />
         </div>
       )}
+      {syncStatus.mode === 'online' && syncStatus.type === 'state' && (
+        <div className="syncStatusLine">
+          <Trans k={['wallet', 'syncStatus', 'syncingStateDescription']} />
+        </div>
+      )}
     </span>
   )
   return (

src/common/backend-state.ts

@@ -1,14 +1,15 @@
-import {Dispatch, SetStateAction, useEffect, useState} from 'react'
+import {Dispatch, SetStateAction, useState} from 'react'
 import {createContainer} from 'unstated-next'
 import _ from 'lodash/fp'
 import {updateNetworkName} from './ipc-util'
-import {rendererLog} from './logger'
 import {createInMemoryStore, Store} from './store'
 import {NetworkName} from '../config/type'
-import {usePersistedState} from './hook-utils'
+import {usePersistedState, useRecurringTimeout} from './hook-utils'
 import {config} from '../config/renderer'
 import {defaultWeb3, MantisWeb3} from '../web3'
 
+const BACKEND_CHECK_INTERVAL = 1000
+
 export interface BackendState {
   isBackendRunning: boolean
   setBackendRunning: Dispatch<SetStateAction<boolean>>
@@ -39,21 +40,14 @@ function useBackendState(params?: Partial<BackendStateParams>): BackendState {
   const [isBackendRunning, setBackendRunning] = useState(false)
   const [networkName, _setNetworkName] = usePersistedState(store, 'networkName')
 
-  useEffect(() => {
-    const checkBackend = async (): Promise<void> => {
-      try {
-        await web3.eth.getProtocolVersion()
-        setBackendRunning(true)
-        setTimeout(checkBackend, 5000)
-      } catch (e) {
-        setBackendRunning(false)
-        setTimeout(checkBackend, 1000)
-      }
+  useRecurringTimeout(async () => {
+    try {
+      await web3.eth.getProtocolVersion()
+      setBackendRunning(true)
+    } catch (e) {
+      setBackendRunning(false)
     }
-
-    rendererLog.info('Mantis Wallet renderer started')
-    checkBackend()
-  }, [])
+  }, BACKEND_CHECK_INTERVAL)
 
   const setNetworkName = (networkName: NetworkName): void => {
     _setNetworkName(networkName)

src/common/wallet-state.ts

@@ -24,20 +24,21 @@ import {
 import {BackendState} from './backend-state'
 
 const EXPECTED_LAST_BLOCK_CHANGE_SECONDS = 60
+const SYNC_STATUS_REFRESH_INTERVAL = 500
 
 interface SynchronizationStatusOffline {
   mode: 'offline'
   currentBlock: number
   lastNewBlockTimestamp: number
 }
 
-interface SynchronizationStatusOnline {
+export interface SynchronizationStatusOnline {
   mode: 'online'
+  type: 'blocks' | 'state'
   currentBlock: number
   highestKnownBlock: number
   pulledStates: number
   knownStates: number
-  percentage: number
   lastNewBlockTimestamp: number
 }
 
@@ -469,21 +470,13 @@ function useWalletState(initialState?: Partial<WalletStateParams>): WalletData {
       }
     }
 
-    const allBlocks = syncing.highestBlock
-    const syncedBlocks = syncing.currentBlock
-
-    const syncedRatio =
-      allBlocks + syncing.knownStates === 0
-        ? 0
-        : (syncedBlocks + syncing.pulledStates) / (allBlocks + syncing.knownStates)
-
     return {
       mode: 'online',
+      type: syncing.currentBlock === syncing.highestBlock ? 'state' : 'blocks',
       currentBlock: syncing.currentBlock,
       highestKnownBlock: syncing.highestBlock,
       pulledStates: syncing.pulledStates,
       knownStates: syncing.knownStates,
-      percentage: syncedRatio * 100,
       lastNewBlockTimestamp,
     }
   }
@@ -658,7 +651,7 @@ function useWalletState(initialState?: Partial<WalletStateParams>): WalletData {
   useRecurringTimeout(async () => {
     await refreshSyncStatus()
     rendererLog.debug(`sync status`, option.getOrElseW(() => null)(syncStatusOption))
-  }, 3000)
+  }, SYNC_STATUS_REFRESH_INTERVAL)
 
   return {
     walletStatus,

src/translations/en/renderer.json

@@ -156,8 +156,9 @@
     "syncStatus": {
       "syncConnecting": "Connecting",
       "fullySynced": "Fully Synced",
-      "syncingBlocks": "Syncing Blocks {{percentage}}%",
-      "syncingState": "Syncing State {{percentage}}%",
+      "syncingBlocks": "Syncing Blocks: {{percentage}}%",
+      "syncingState": "Syncing State: {{processed}} of {{total}}",
+      "syncingStateDescription": "Mantis Wallet is fetching all accounts state, including balances and smart contract codes",
       "currentBlock": "Current block: <strong>{{blockNumber}}</strong>",
       "highestBlock": "Highest block: <strong>{{blockNumber}}</strong>",
       "networkName": "Network: <strong>{{networkName}}</strong>"

src/wallets/BalanceDisplay.stories.tsx

@@ -30,20 +30,20 @@ export const syncStatus = (): JSX.Element => {
     },
     syncing: {
       mode: 'online',
+      type: 'blocks',
       currentBlock: 0,
       highestKnownBlock: 0,
       pulledStates: 0,
       knownStates: 0,
-      percentage: 50,
       lastNewBlockTimestamp: 0,
     },
     synced: {
       mode: 'online',
+      type: 'blocks',
       currentBlock: 0,
       highestKnownBlock: 0,
       pulledStates: 0,
       knownStates: 0,
-      percentage: 100,
       lastNewBlockTimestamp: 0,
     },
   }