Yaswanth/88385/pnl calculator console warning fix (#4173)

yaswanth-deriv · web-flow · commit 6ffe151931f2 · 2023-02-16T10:46:24.000+06:00
* refactor: adding hard lazy loading in cfd page

* refactor: adding hard lazy loading in cfd page

* refactor: adding hard lazy loading in cfd page

* refactor: adding hard lazy loading in cfd page

* refactor: plp margin calculator bug fix

* refactor: plp margin calculator bug fix

* refactor: hard lazy load in dmt5 page

* refactor: hard lazy loader in dmt5 page

* refactor: to fix console warning for pnl margin
diff --git a/src/pages/dmt5/index.tsx b/src/pages/dmt5/index.tsx
@@ -12,6 +12,7 @@ import {
 import Numbers from './_numbers'
 import WhatIsTrader from './_what-is-trader'
 import DHero from 'components/custom/_dhero-dmt5'
+import { DotLoader } from 'components/elements'
 import BackgroundPatternDMT5 from 'images/svg/dmt5/bg_banner_dmt5.svg'
 import BackgroundPatternDMT5_mobile from 'images/svg/dmt5/bg_banner_dmt5_mobile.svg'
 import Layout from 'components/layout/layout'
@@ -22,6 +23,7 @@ import { size } from 'themes/device'
 import { isBrowser } from 'common/utility'
 import { MetaAttributesType } from 'types/page.types'
 import { useIsRtl } from 'components/hooks/use-isrtl'
+import { useHandleLazyLoad } from 'components/hooks/use-handle-lazy-load'
 
 const meta_attributes: MetaAttributesType = {
     og_title: localize('DMT5 | MetaTrader 5 | Deriv'),
@@ -46,7 +48,22 @@ const query = graphql`
         }
     }
 `
-
+const target = '#gatsby-focus-wrapper'
+const options = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.7,
+}
+const lazy_components = (
+    <>
+        <WhyTrader fallback={<DotLoader />} />
+        <StartTrader />
+        <DownloadApp />
+        <MarginCalculator />
+        <Flexibility />
+        <SwapFreeTrading fallback={<DotLoader />} />
+    </>
+)
 const DMT5 = () => {
     const [is_mobile, setMobile] = useState(false)
     const data = useStaticQuery(query)
@@ -59,6 +76,7 @@ const DMT5 = () => {
         window.addEventListener('resize', handleResizeWindow)
     }, [])
 
+    const lazyTemplate = useHandleLazyLoad(lazy_components, target, options)
     const is_rtl = useIsRtl()
     const background = useMemo(() => {
         if (is_mobile) {
@@ -107,15 +125,9 @@ const DMT5 = () => {
                     background={background}
                 />
             </Mobile>
-
             <Numbers />
             <WhatIsTrader />
-            <WhyTrader />
-            <StartTrader />
-            <DownloadApp />
-            <MarginCalculator />
-            <Flexibility />
-            <SwapFreeTrading />
+            {lazyTemplate}
             <DBanner
                 background_pattern={
                     is_mobile ? BackgroundPatternDMT5_mobile : BackgroundPatternDMT5
diff --git a/src/pages/trader-tools/common/_utility.tsx b/src/pages/trader-tools/common/_utility.tsx
@@ -89,7 +89,7 @@ export const getPnlMarginCommon = (values, action) => {
             return toFixed(take_profit_level_formula)
         }
         case 'getStopLossLevelBuy': {
-            const stop_loss_level_formula = assetPrice + [-stopLossAmount / (volume * contractSize)]
+            const stop_loss_level_formula = assetPrice + -[stopLossAmount / (volume * contractSize)]
             return toFixed(stop_loss_level_formula)
         }
         case 'getTakeProfitLevelBuy': {

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ export const getPnlMarginCommon = (values, action) => {`
`89`	`89`	`return toFixed(take_profit_level_formula)`
`90`	`90`	`}`
`91`	`91`	`case 'getStopLossLevelBuy': {`
`92`		`- const stop_loss_level_formula = assetPrice + [-stopLossAmount / (volume * contractSize)]`
	`92`	`+ const stop_loss_level_formula = assetPrice + -[stopLossAmount / (volume * contractSize)]`
`93`	`93`	`return toFixed(stop_loss_level_formula)`
`94`	`94`	`}`
`95`	`95`	`case 'getTakeProfitLevelBuy': {`