(fix) StrategyEditor: chart, derivatives, IDE (#705)

* fix issue with getting property of undefined

* fixed inherited leverage value from derivative to margin pair

* StrategyLiveChart: do not render chart if indicators are not present

* reset indicators state if strategy does not have own indicators

* Codemirror: update version

* CodeMirror: improve layout and code errors handling

* improve perf

package.json

@@ -58,7 +58,7 @@
     "@ufx-ui/bfx-containers": "0.16.0",
     "@ufx-ui/core": "0.16.0",
     "@ufx-ui/utils": "0.16.0",
-    "@uiw/codemirror-theme-vscode": "^4.21.13",
+    "@uiw/codemirror-theme-vscode": "^4.21.20",
     "@uiw/react-codemirror": "^4.21.13",
     "axios": "^1.1.3",
     "bfx-api-node-models": "^1.6.3",

public/locales/en-US/translations.json

@@ -833,6 +833,7 @@
       "realBalancesWarning": "NOTE: By pressing start, you will be executing your strategy on your live account with real balances.",
       "createStrategy": "Create a strategy to begin executing."
     },
+    "noIndicators": "There are no indicators for execution",
     "candleSeedCount": "Candle seed count",
     "noStrategiesToDisplay": "There are no strategies to display",
     "saveWithDifferentName": "Save with different name",

src/components/IDEPanel/IDEPanel.js

@@ -1,5 +1,5 @@
 import React, {
-  useState, memo, useMemo, useEffect,
+  useState, useMemo, useEffect,
 } from 'react'
 import PropTypes from 'prop-types'
 import ClassNames from 'clsx'
@@ -14,6 +14,7 @@ import Panel from '../../ui/Panel'
 import { STRATEGY_IDE_SECTIONS } from '../StrategyEditor/StrategyEditor.helpers'
 import { STRATEGY_SHAPE } from '../../constants/prop-types-shapes'
 import { PAPER_MODE } from '../../redux/reducers/ui'
+import PanelIconButton from '../../ui/Panel/Panel.IconButton'
 
 const IDEPanel = ({
   setStrategyDirty,
@@ -121,32 +122,25 @@ const IDEPanel = ({
             </li>
           ))}
         </ul>
-
-        <div className='hfui-strategyeditor__content-wrapper'>
-          <div
-            className={ClassNames('hfui-strategyeditor__editor-wrapper', {
-              'exec-error': execError || sectionErrors[activeContent],
-            })}
-          >
-            <CodeMirror
-              value={IDEcontent[activeContent] || ''}
-              activeContent={activeContent}
-              onChange={onEditorContentChange}
-              theme={settingsTheme}
-              editable={isPaperTrading}
-            />
-            {(execError || sectionErrors[activeContent]) && (
-              <div className='hfui-strategyeditor__editor-error-output'>
-                <p
-                  className='hfui-panel__close strategyeditor__close-icon'
-                  onClick={onClearErrors}
-                >
-                  &#10005;
-                </p>
-                <pre>{execError || sectionErrors[activeContent]}</pre>
-              </div>
-            )}
-          </div>
+        <div
+          className='hfui-strategyeditor__editor-wrapper'
+        >
+          <CodeMirror
+            value={IDEcontent[activeContent] || ''}
+            activeContent={activeContent}
+            onChange={onEditorContentChange}
+            theme={settingsTheme}
+            editable={isPaperTrading}
+          />
+          {(execError || sectionErrors[activeContent]) && (
+            <div className='hfui-strategyeditor__editor-error-output'>
+              <pre>{execError || sectionErrors[activeContent]}</pre>
+              <PanelIconButton
+                onClick={onClearErrors}
+                icon={<i className='icon-cancel' />}
+              />
+            </div>
+          )}
         </div>
       </div>
     </Panel>
@@ -171,7 +165,4 @@ IDEPanel.defaultProps = {
   },
 }
 
-export default memo(
-  IDEPanel,
-  ({ strategy: { id } }, { strategy: { id: _id } }) => id === _id,
-)
+export default IDEPanel

src/components/StrategyEditor/components/CodeMirror.js

@@ -6,6 +6,12 @@ import { vscodeDarkInit } from '@uiw/codemirror-theme-vscode'
 
 import { THEMES } from '../../../redux/selectors/ui'
 
+const codeMirrorBasicSetup = {
+  crosshairCursor: false,
+}
+
+const codeMirrorExtensions = [javascript({ jsx: false })]
+
 const CodeMirror = ({
   value, onChange, editable, theme: appTheme,
 }) => {
@@ -35,9 +41,10 @@ const CodeMirror = ({
       onChange={onChange}
       options={options}
       theme={theme}
-      extensions={[javascript({ jsx: false })]}
+      extensions={codeMirrorExtensions}
       editable={editable}
       height='100%'
+      basicSetup={codeMirrorBasicSetup}
       width='100%'
     />
   )

src/components/StrategyEditor/style.scss

@@ -15,7 +15,7 @@ body.hosted {
       flex-direction: column;
     }
 
-    .hfui-strategyeditor__content-wrapper {
+    .hfui-strategyeditor__editor-wrapper {
       width: 100%;
       height: 300px;
       margin-top: 10px;
@@ -36,7 +36,6 @@ body.hosted {
 .hfui-strategyeditor__wrapper {
   display: flex;
   height: 100%;
-  min-height: 530px;
   background-color: var(--background-color);
   position: relative;
 
@@ -99,12 +98,13 @@ body.hosted {
 }
 
 .hfui-strategyeditor__editor-wrapper {
-  width: 100%;
   display: flex;
   flex-direction: column;
   height: calc(100% - 25px);
   position: relative;
   z-index: 0;
+  width: calc(100% - 182px);
+  overflow: auto;
 
   &.noresults {
     height: 100%;
@@ -116,21 +116,19 @@ body.hosted {
   background: var(--darker-background-color);
   color: $red-color;
   font-size: 13px;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
+  position: fixed;
+  right: 30px;
+  bottom: 50px;
+  max-width: 500px;
   z-index: 3;
-
-  .strategyeditor__close-icon {
-    position: absolute;
-    top: 8px;
-    right: 5px;
-    padding-top: 6px;
-  }
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   pre {
     white-space: pre-wrap;
     width: calc(100% - 25px);
+    margin-right: 10px;
   }
 }
 
@@ -214,12 +212,6 @@ body.hosted {
   margin: 0 spacing(0.25);
 }
 
-.hfui-strategyeditor__content-wrapper {
-  width: calc(
-    100% - 182px
-  ); // width of hfui-strategyeditor__func-select + margin-right
-}
-
 .hfui-strategyeditor__panel {
   .notch-icon {
     font-size: 18px;

src/components/StrategyLiveChart/StrategyLiveChart.js

@@ -124,7 +124,7 @@ const StrategyLiveChart = ({
       {/* We have to use key prop for correct Chart rerender when strategy changed
           https://medium.com/@albertogasparin/forcing-state-reset-on-a-react-component-by-using-the-key-prop-14b36cd7448e
       */}
-      {chartMarket && (
+      {chartMarket && !_isEmpty(indicators) ? (
         <Chart
           market={chartMarket}
           theme={settingsTheme}
@@ -140,6 +140,8 @@ const StrategyLiveChart = ({
           chartRange={chartRange}
           key={executionId}
         />
+      ) : (
+        <p>{t('strategyEditor.noIndicators')}</p>
       )}
     </Panel>
   )

src/modals/Strategy/StrategySettingsModal/StrategySettingsModal.js

@@ -244,9 +244,9 @@ const StrategySettingsModal = (props) => {
       setTradeOnMargin(margin)
     }
 
-    if (!useMaxLeverage) {
-      setMarginTradeMode(MARGIN_TRADE_MODES.FIXED)
-    }
+    setMarginTradeMode(
+      useMaxLeverage ? MARGIN_TRADE_MODES.MAX : MARGIN_TRADE_MODES.FIXED,
+    )
 
     if (leverage) {
       setLeverageValue(convertNumberToString(leverage))

src/pages/Strategies/Strategies.js

@@ -10,7 +10,9 @@ import _map from 'lodash/map'
 // import _remove from 'lodash/remove'
 import _forEach from 'lodash/forEach'
 import _isEmpty from 'lodash/isEmpty'
-import Indicators from 'bfx-hf-indicators'
+import _every from 'lodash/every'
+import Indicators, { Indicator } from 'bfx-hf-indicators'
+import { useTranslation } from 'react-i18next'
 import { nonce } from 'bfx-api-node-util'
 import HFS from 'bfx-hf-strategy'
 import HFU from 'bfx-hf-util'
@@ -61,14 +63,7 @@ const StrategiesPage = ({
   ] = useToggle(false)
   const [actionStrategy, setActionStrategy] = useState({})
   const [nextStrategyToOpen, setNextStrategyToOpen] = useState(null)
-
-  // const onAddIndicator = (indicator) => {
-  //   setIndicators([...indicators, indicator])
-  // }
-
-  // const onDeleteIndicator = (index) => {
-  //   setIndicators(_remove(indicators, (el, id) => id !== index))
-  // }
+  const { t } = useTranslation()
 
   const onIndicatorsChange = useCallback((updatedIndicators) => {
     const newIndicators = _map(_values(updatedIndicators), (ind) => {
@@ -127,30 +122,36 @@ const StrategiesPage = ({
     (section, providedContent) => {
       const content = providedContent || strategy[section] || ''
 
-      if (section.substring(0, 6) === 'define') {
-        try {
+      try {
+        if (section === 'defineIndicators') {
           const func = eval(content); // eslint-disable-line
+          const definedIndicators = func(Indicators)
+          const areIndicatorsCorrect = !_isEmpty(definedIndicators)
+            && _every(definedIndicators, (i) => i instanceof Indicator)
+          if (!areIndicatorsCorrect) {
+            throw new Error(t('strategyEditor.noIndicators'))
+          }
           clearSectionError(section)
           return func
-        } catch (e) {
-          processSectionError(section, e)
-          return null
         }
-      } else if (section.substring(0, 2) === 'on') {
-        try {
+        if (section.substring(0, 6) === 'define') {
+          const func = eval(content); // eslint-disable-line
+          clearSectionError(section)
+          return func
+        }
+        if (section.substring(0, 2) === 'on') {
           const func = eval(content)({ HFS, HFU, _ }); // eslint-disable-line
           clearSectionError(section)
           return func
-        } catch (e) {
-          processSectionError(section, e)
-          return null
         }
-      } else {
         debug('unrecognised section handler prefix: %s', section)
         return null
+      } catch (e) {
+        processSectionError(section, e)
+        return null
       }
     },
-    [clearSectionError, processSectionError, strategy],
+    [clearSectionError, processSectionError, t, strategy],
   )
 
   const onDefineIndicatorsChange = useCallback(
@@ -199,10 +200,19 @@ const StrategiesPage = ({
         onDefineIndicatorsChange(
           strategyToLoad.strategyContent.defineIndicators,
         )
+      } else {
+        // reset indicators state if strategy does not have own indicators
+        processSectionError(
+          'defineIndicators',
+          new Error(t('strategyEditor.noIndicators')),
+        )
+        setIndicators([])
       }
     },
     [
       onDefineIndicatorsChange,
+      processSectionError,
+      t,
       openUnsavedStrategyModal,
       setStrategy,
       setStrategyDirty,

src/pages/Strategies/style.scss

@@ -3,7 +3,7 @@
 body.hosted {
   @media screen and (max-width: 1230px) {
     .hfui-strategyeditorpage__wrapper {
-      .hfui-strategyeditorpage__content-wrapper {
+      .hfui-strategyeditorpage__editor-wrapper {
         flex-direction: column;
       }