(feature) DMS removal disclaimer (#714)

* DMS removal disclaimer

* update disclaimer text

public/locales/en-US/translations.json

@@ -564,6 +564,10 @@
     "text2": "From now on, each component, including the Order form and Ticker symbols, is independent and can be added or removed in the layout settings.",
     "text3": "If needed, you can add these components to your custom layout in the layout settings, sorry for the inconvenience."
   },
+  "dmsRemovalDisclaimerModal": {
+    "title": "IMPORTANT NOTICE",
+    "text": "As <url>announced</url>, on November 6, 2024 Bitfinex Honey will no longer support the 'dead-man switch' or 'DMS' feature. This will apply to all versions of Bitfinex Honey. Your version of Bitfinex Honey will be affected. This change will mean that the orders you created using any version of Bitfinex Honey will continue running even if you turn off the machine running Bitfinex Honey. Previously, the DMS feature would have stopped those orders when you disconnected. If you do not want those orders to continue, you can close open orders before you disconnect Bitfinex Honey, or close them manually by logging into Bitfinex. Please plan accordingly for this change."
+  },
   "orderBookModal": {
     "title": "Order Book",
     "sumAmountsCheckbox": "Sum Amounts",

src/hooks/useCountdown.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react'
+
+const useCountdown = (initialCount, isActive = true) => {
+  const [countdown, setCountdown] = useState(initialCount)
+
+  useEffect(() => {
+    let timer
+    if (isActive && countdown > 0) {
+      timer = setInterval(() => {
+        setCountdown((prevCountdown) => prevCountdown - 1)
+      }, 1000)
+    }
+    return () => {
+      if (timer) clearInterval(timer)
+    }
+  }, [isActive, countdown])
+
+  const resetCountdown = () => setCountdown(initialCount)
+
+  return { countdown, isFinished: countdown === 0, resetCountdown }
+}
+
+export default useCountdown

src/modals/DMSRemovalDisclaimerModal/DMSRemovalDisclaimerModal.container.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+
+import { changeUIModalState } from '../../redux/actions/ui'
+import { UI_MODAL_KEYS } from '../../redux/constants/modals'
+import { getUIModalStateForKey } from '../../redux/selectors/ui'
+import DMSRemovalDisclaimerModal from './DMSRemovalDisclaimerModal'
+
+const mapStateToProps = (state = {}) => ({
+  visible: getUIModalStateForKey(state, UI_MODAL_KEYS.DMS_REMOVAL_DISCLAIMER),
+})
+
+const mapDispatchToProps = {
+  changeUIModalState,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DMSRemovalDisclaimerModal)

src/modals/DMSRemovalDisclaimerModal/DMSRemovalDisclaimerModal.js

@@ -0,0 +1,64 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+import { Trans, useTranslation } from 'react-i18next'
+import Modal from '../../ui/Modal'
+import { UI_MODAL_KEYS } from '../../redux/constants/modals'
+import { DO_NOT_SHOW_DMS_REMOVAL_DISCLAIMER } from '../../redux/reducers/ui'
+import useCountdown from '../../hooks/useCountdown'
+import { DISCONTINUE_DMS_SUPPORT_ARTICLE_DMS } from '../../redux/config'
+
+const DMSRemovalDisclaimerModal = ({ changeUIModalState, visible }) => {
+  const { t } = useTranslation()
+  const { countdown, isFinished } = useCountdown(10, visible)
+
+  const onSubmit = () => {
+    if (!isFinished) {
+      return
+    }
+    changeUIModalState(UI_MODAL_KEYS.DMS_REMOVAL_DISCLAIMER, false)
+    localStorage.setItem(DO_NOT_SHOW_DMS_REMOVAL_DISCLAIMER, 'true')
+  }
+
+  return (
+    <Modal
+      label={t('dmsRemovalDisclaimerModal.title')}
+      isCloseButtonShown={isFinished}
+      isOpen={visible}
+      onClose={onSubmit}
+      onSubmit={onSubmit}
+    >
+      <Trans
+        t={t}
+        i18nKey='dmsRemovalDisclaimerModal.text'
+        components={{
+          url: (
+            <a
+              href={DISCONTINUE_DMS_SUPPORT_ARTICLE_DMS}
+              target='_blank'
+              rel='noopener noreferrer'
+            />
+          ),
+        }}
+      />
+      <Modal.Footer>
+        <Modal.Button
+          onClick={onSubmit}
+          primary
+          disabled={!isFinished}
+        >
+          {!isFinished
+            ? `${t('ui.closeBtn')} (${countdown})`
+            : t('ui.closeBtn')}
+        </Modal.Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+DMSRemovalDisclaimerModal.propTypes = {
+  changeUIModalState: PropTypes.func.isRequired,
+  visible: PropTypes.bool.isRequired,
+}
+
+export default memo(DMSRemovalDisclaimerModal)

src/modals/DMSRemovalDisclaimerModal/index.js

@@ -0,0 +1,3 @@
+import DMSRemovalDisclaimerModal from './DMSRemovalDisclaimerModal.container'
+
+export default DMSRemovalDisclaimerModal

src/modals/ModalsWrapper/ModalsWrapper.js

@@ -2,6 +2,7 @@ import React, { lazy, memo } from 'react'
 import PropTypes from 'prop-types'
 import AppSettingsModal from '../AppSettingsModal'
 import CloseSessionModal from '../CloseSessionModal'
+import DMSRemovalDisclaimerModal from '../DMSRemovalDisclaimerModal'
 
 const BadConnectionModal = lazy(() => import('../BadConnectionModal'))
 const NoConnectionActionModal = lazy(() => import('../NoConnectionActionModal'))
@@ -31,6 +32,7 @@ const ModalsWrapper = ({ isElectronApp }) => {
       <CcyInfoModal />
       <EditOrderModal />
       <ClosePositionModal />
+      <DMSRemovalDisclaimerModal />
     </>
   )
 }

src/redux/constants/modals.js

@@ -13,4 +13,5 @@ export const UI_MODAL_KEYS = {
   RESET_LIVE_API_KEY_MODAL: 'ResetLiveApiKeyModal',
   RESET_PAPER_API_KEY_MODAL: 'ResetPaperApiKeyModal',
   HELP_US_IMPROVE_HONEY_MODAL: 'HelpUsImproveHoneyModal',
+  DMS_REMOVAL_DISCLAIMER: 'DMSRemovalDisclaimerModal',
 }

src/redux/reducers/ui/index.js

@@ -48,6 +48,7 @@ export const ALLOWED_RC_VERSIONS = 'HF_UI_ALLOWED_RC_VERSIONS'
 export const IS_PAPER_TRADING = 'IS_PAPER_TRADING'
 export const PAPER_MODE = 'paper'
 export const MAIN_MODE = 'main'
+export const DO_NOT_SHOW_DMS_REMOVAL_DISCLAIMER = 'DO_NOT_SHOW_DMS_REMOVAL_DISCLAIMER'
 let shownOldFormatModal = false
 
 export const BACKTEST_TAB_SECTIONS = {
@@ -168,6 +169,10 @@ function getInitialState() {
 
       defaultState.isRCDisclaimerShown = showModal
     }
+    const doNotShowDmsRemovalDisclaimer = localStorage.getItem(DO_NOT_SHOW_DMS_REMOVAL_DISCLAIMER) === 'true'
+    if (!doNotShowDmsRemovalDisclaimer) {
+      defaultState.modals[`is${UI_MODAL_KEYS.DMS_REMOVAL_DISCLAIMER}Open`] = true
+    }
 
     defaultState.layouts = nextFormatLayouts
   } catch (e) {