BadConnectionModal: show only on enabled dms

src/modals/BadConnectionModal/BadConnectionModal.container.js

@@ -1,16 +1,16 @@
 import { connect } from 'react-redux'
 import UIActions from '../../redux/actions/ui'
-import { UI_KEYS } from '../../redux/constants/ui_keys'
-import { getUIState } from '../../redux/selectors/ui'
+import { getUIModalStateForKey } from '../../redux/selectors/ui'
 
 import BadConnectionModal from './BadConnectionModal'
+import { UI_MODAL_KEYS } from '../../redux/constants/modals'
 
 const mapStateToProps = (state = {}) => ({
-  visible: getUIState(state, UI_KEYS.isBadInternetConnection, false),
+  visible: getUIModalStateForKey(state, UI_MODAL_KEYS.BAD_INTERNET_CONNECTION_MODAL),
 })
 
 const mapDispatchToProps = dispatch => ({
-  changeBadInternetConnectionState: (visible) => dispatch(UIActions.setUIValue(UI_KEYS.isBadInternetConnection, visible)),
+  onClose: (visible) => dispatch(UIActions.changeUIModalState(UI_MODAL_KEYS.BAD_INTERNET_CONNECTION_MODAL, visible)),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(BadConnectionModal)

src/modals/BadConnectionModal/BadConnectionModal.js

@@ -8,14 +8,10 @@ import { isElectronApp } from '../../redux/config'
 import './style.css'
 
 const BadConnection = ({
-  changeBadInternetConnectionState, visible,
+  onClose, visible,
 }) => {
   const { t } = useTranslation()
 
-  const onClose = () => {
-    changeBadInternetConnectionState(false)
-  }
-
   const onRestart = () => {
     const path = isElectronApp ? '/index.html' : ''
     location.replace(path) // eslint-disable-line
@@ -37,15 +33,15 @@ const BadConnection = ({
           {action}
         </Modal.Button>
         <Modal.Button onClick={onClose} primary>
-          {t('ui.ok')}
+          {t('ui.proceed')}
         </Modal.Button>
       </Modal.Footer>
     </Modal>
   )
 }
 
 BadConnection.propTypes = {
-  changeBadInternetConnectionState: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
   visible: PropTypes.bool.isRequired,
 }
 

src/modals/NoConnectionActionModal/NoConnectionActionModal.container.js

@@ -10,7 +10,7 @@ const mapStateToProps = (state = {}) => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-  changeIsNoConnectionModalState: (isOpen) => dispatch(UIActions.changeUIModalState(UI_MODAL_KEYS.NO_CONNECTION_MODAL, isOpen)),
+  onClose: () => dispatch(UIActions.changeUIModalState(UI_MODAL_KEYS.NO_CONNECTION_MODAL, false)),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(NoConnectionActionModal)

src/redux/actions/ui.js

@@ -180,6 +180,10 @@ export const setBacktestActiveSection = (section) => ({
   payload: { section },
 })
 
+export const handleBadConnectionAction = {
+  type: types.HANDLE_BAD_CONNECTION,
+}
+
 export default {
   setUIValue,
   updateUIValue,
@@ -207,4 +211,5 @@ export default {
   logInformation,
   setBacktestActiveSection,
   setNotifications,
+  handleBadConnectionAction,
 }

src/redux/constants/modals.js

@@ -14,4 +14,5 @@ export const UI_MODAL_KEYS = {
   RESET_LIVE_API_KEY_MODAL: 'ResetLiveApiKeyModal',
   RESET_PAPER_API_KEY_MODAL: 'ResetPaperApiKeyModal',
   HELP_US_IMPROVE_HONEY_MODAL: 'HelpUsImproveHoneyModal',
+  BAD_INTERNET_CONNECTION_MODAL: 'BadInternetConnectionModal',
 }

src/redux/constants/ui.js

@@ -45,4 +45,6 @@ module.exports = {
   LOG: 'UI_LOG',
 
   SET_BACKTEST_ACTIVE_SECTION: 'UI_SET_BACKTEST_ACTIVE_SECTION',
+
+  HANDLE_BAD_CONNECTION: 'UI_HANDLE_BAD_CONNECTION',
 }

src/redux/middleware/ws/on_close.js

@@ -3,7 +3,6 @@ import WSActions from '../../actions/ws'
 import UIActions from '../../actions/ui'
 import { getAuthToken, getSocket } from '../../selectors/ws'
 import { isElectronApp, env } from '../../config'
-import { UI_KEYS } from '../../constants/ui_keys'
 import { LOG_LEVELS } from '../../../constants/logging'
 
 export default (alias, store) => () => {
@@ -15,7 +14,7 @@ export default (alias, store) => () => {
   // do not show in hosted mode since it re-attepmpts new connection
   // do not mark bad connection if user is still on login screen and ws onClose is triggered
   if (!_isNil(socket?.lastActivity) && isElectronApp && isLoggedIn) {
-    store.dispatch(UIActions.setUIValue(UI_KEYS.isBadInternetConnection, true))
+    store.dispatch(UIActions.handleBadConnectionAction)
   }
 
   if (env === 'electron') {

src/redux/middleware/ws/on_message.js

@@ -324,7 +324,7 @@ export default (alias, store) => (e = {}) => {
         store.dispatch(WSActions.recvClientStatusUpdate({ status, mode }))
 
         if (status === WS_CONNECTION.CLOSED) {
-          store.dispatch(UIActions.setUIValue(UI_KEYS.isBadInternetConnection, true))
+          store.dispatch(UIActions.handleBadConnectionAction)
         }
 
         if (status === WS_CONNECTION.OPENED) {

src/redux/sagas/ui/index.js

@@ -14,6 +14,7 @@ import removeComponent from './on_remove_component'
 import createLayout from './on_create_layout'
 import deleteLayout from './on_delete_layout'
 import onLog from './on_log'
+import onBadConnection from './on_bad_connection'
 import { isElectronApp } from '../../config'
 
 export default function* () {
@@ -27,6 +28,7 @@ export default function* () {
   yield takeEvery(UITypes.REMOVE_COMPONENT, removeComponent)
   yield takeEvery(UITypes.CREATE_LAYOUT, createLayout)
   yield takeEvery(UITypes.DELETE_LAYOUT, deleteLayout)
+  yield takeEvery(UITypes.HANDLE_BAD_CONNECTION, onBadConnection)
 
   if (isElectronApp) {
     yield takeEvery(UITypes.DATA_NOTIFICATION, onShowNotification)

src/redux/sagas/ui/on_bad_connection.js

@@ -0,0 +1,16 @@
+import { put, select } from 'redux-saga/effects'
+import UIActions from '../../actions/ui'
+import { UI_KEYS } from '../../constants/ui_keys'
+import { UI_MODAL_KEYS } from '../../constants/modals'
+import { getDMSSetting } from '../../selectors/ui'
+
+function* onBadConnection() {
+  yield put(UIActions.setUIValue(UI_KEYS.isBadInternetConnection, true))
+  const dms = yield select(getDMSSetting)
+
+  if (dms) {
+    yield put(UIActions.changeUIModalState(UI_MODAL_KEYS.BAD_INTERNET_CONNECTION_MODAL, true))
+  }
+}
+
+export default onBadConnection