From cc1811da16660cd2195d477221bd361092bb18cc Mon Sep 17 00:00:00 2001 From: mulan xia Date: Wed, 21 Feb 2024 07:42:18 -0500 Subject: [PATCH 1/3] turn orderlines on --- src/hooks/tradingView/useChartLines.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/tradingView/useChartLines.ts b/src/hooks/tradingView/useChartLines.ts index 81620e1..ee94968 100644 --- a/src/hooks/tradingView/useChartLines.ts +++ b/src/hooks/tradingView/useChartLines.ts @@ -30,7 +30,7 @@ export const useChartLines = ({ displayButton: HTMLElement | null; isChartReady?: boolean; }) => { - const [showOrderLines, setShowOrderLines] = useState(false); + const [showOrderLines, setShowOrderLines] = useState(true); const stringGetter = useStringGetter(); From 24e7cdac143788b4941027cb44f5be60f6c72b86 Mon Sep 17 00:00:00 2001 From: mulan xia Date: Wed, 21 Feb 2024 13:38:42 -0500 Subject: [PATCH 2/3] wip --- src/hooks/tradingView/useChartLines.ts | 40 ++++++++----------- .../useChartMarketAndResolution.ts | 2 +- src/views/charts/TvChart.tsx | 7 +++- 3 files changed, 22 insertions(+), 27 deletions(-) diff --git a/src/hooks/tradingView/useChartLines.ts b/src/hooks/tradingView/useChartLines.ts index ee94968..ea2b27e 100644 --- a/src/hooks/tradingView/useChartLines.ts +++ b/src/hooks/tradingView/useChartLines.ts @@ -15,8 +15,6 @@ import { getAppTheme, getAppColorMode } from '@/state/configsSelectors'; import { MustBigNumber } from '@/lib/numbers'; import { getChartLineColors } from '@/lib/tradingView/utils'; -let chartLines: Record = {}; - /** * @description Hook to handle drawing chart lines */ @@ -25,10 +23,12 @@ export const useChartLines = ({ tvWidget, displayButton, isChartReady, + chartLinesRef, }: { tvWidget: TvWidget | null; displayButton: HTMLElement | null; - isChartReady?: boolean; + isChartReady: boolean; + chartLinesRef: React.MutableRefObject>; }) => { const [showOrderLines, setShowOrderLines] = useState(true); @@ -42,26 +42,20 @@ export const useChartLines = ({ useEffect(() => { if (isChartReady && displayButton) { - displayButton.onclick = () => { - const newShowOrderLinesState = !showOrderLines; - if (newShowOrderLinesState) { - displayButton?.classList?.add('order-lines-active'); - } else { - displayButton?.classList?.remove('order-lines-active'); - } - setShowOrderLines(newShowOrderLinesState); - }; + displayButton.onclick = () => setShowOrderLines(!showOrderLines); } }, [isChartReady, showOrderLines]); useEffect(() => { - if (tvWidget && isChartReady) { + if (isChartReady && tvWidget) { tvWidget.onChartReady(() => { tvWidget.chart().dataReady(() => { if (showOrderLines) { + displayButton?.classList?.add('order-lines-active'); drawOrderLines(); drawPositionLine(); } else { + displayButton?.classList?.remove('order-lines-active'); deleteChartLines(); } }); @@ -78,13 +72,13 @@ export const useChartLines = ({ const key = currentMarketPositionData.id; const price = MustBigNumber(entryPrice).toNumber(); - const maybePositionLine = chartLines[key]?.line; + const maybePositionLine = chartLinesRef.current[key]?.line; const shouldShow = size && size !== 0; if (!shouldShow) { if (maybePositionLine) { maybePositionLine.remove(); - delete chartLines[key]; + delete chartLinesRef.current[key]; return; } } else { @@ -106,9 +100,9 @@ export const useChartLines = ({ .setQuantity(quantity); if (positionLine) { - const chartLine = { line: positionLine, chartLineType: 'position' }; + const chartLine: ChartLine = { line: positionLine, chartLineType: 'position' }; setLineColors({ chartLine: chartLine }); - chartLines[key] = chartLine; + chartLinesRef.current[key] = chartLine; } } } @@ -143,12 +137,12 @@ export const useChartLines = ({ !cancelReason && (status === AbacusOrderStatus.open || status === AbacusOrderStatus.untriggered); - const maybeOrderLine = chartLines[key]?.line; + const maybeOrderLine = chartLinesRef.current[key]?.line; if (!shouldShow) { if (maybeOrderLine) { maybeOrderLine.remove(); - delete chartLines[key]; + delete chartLinesRef.current[key]; return; } } else { @@ -170,7 +164,7 @@ export const useChartLines = ({ chartLineType: ORDER_SIDES[side.name], }; setLineColors({ chartLine: chartLine }); - chartLines[key] = chartLine; + chartLinesRef.current[key] = chartLine; } } } @@ -179,10 +173,10 @@ export const useChartLines = ({ }; const deleteChartLines = () => { - Object.values(chartLines).forEach(({ line }) => { + Object.values(chartLinesRef.current).forEach(({ line }) => { line.remove(); }); - chartLines = {}; + chartLinesRef.current = {}; }; const setLineColors = ({ chartLine }: { chartLine: ChartLine }) => { @@ -204,6 +198,4 @@ export const useChartLines = ({ maybeQuantityColor && line.setLineColor(maybeQuantityColor).setQuantityBackgroundColor(maybeQuantityColor); }; - - return { chartLines }; }; diff --git a/src/hooks/tradingView/useChartMarketAndResolution.ts b/src/hooks/tradingView/useChartMarketAndResolution.ts index a6b5451..9b4f71d 100644 --- a/src/hooks/tradingView/useChartMarketAndResolution.ts +++ b/src/hooks/tradingView/useChartMarketAndResolution.ts @@ -38,7 +38,7 @@ export const useChartMarketAndResolution = ({ * @description Hook to handle changing markets - intentionally should avoid triggering on change of resolutions. */ useEffect(() => { - if (currentMarketId && isWidgetReady) { + if (isWidgetReady && currentMarketId !== tvWidget?.activeChart().symbol()) { const resolution = savedResolution || selectedResolution; tvWidget?.setSymbol(currentMarketId, resolution as ResolutionString, () => {}); } diff --git a/src/views/charts/TvChart.tsx b/src/views/charts/TvChart.tsx index 45b4455..62a6242 100644 --- a/src/views/charts/TvChart.tsx +++ b/src/views/charts/TvChart.tsx @@ -4,7 +4,7 @@ import styled, { type AnyStyledComponent, css } from 'styled-components'; import type { ResolutionString } from 'public/tradingview/charting_library'; -import type { TvWidget } from '@/constants/tvchart'; +import type { ChartLine, TvWidget } from '@/constants/tvchart'; import { useChartLines, @@ -27,13 +27,16 @@ export const TvChart = () => { const displayButtonRef = useRef(null); const displayButton = displayButtonRef.current; + const chartLinesRef = useRef>({}); + const chartLines = chartLinesRef.current; + const { savedResolution } = useTradingView({ tvWidgetRef, displayButtonRef, setIsChartReady }); useChartMarketAndResolution({ tvWidget, isWidgetReady, savedResolution: savedResolution as ResolutionString | undefined, }); - const { chartLines } = useChartLines({ tvWidget, displayButton, isChartReady }); + useChartLines({ tvWidget, displayButton, isChartReady, chartLinesRef }); useTradingViewTheme({ tvWidget, isWidgetReady, chartLines }); return ( From 7d6dd402a2caf17220e93922abbde3e1dd2af177 Mon Sep 17 00:00:00 2001 From: mulan xia Date: Wed, 21 Feb 2024 16:28:45 -0500 Subject: [PATCH 3/3] remove order lines on wallet disconnect --- src/hooks/tradingView/useChartLines.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/hooks/tradingView/useChartLines.ts b/src/hooks/tradingView/useChartLines.ts index ea2b27e..591c7a0 100644 --- a/src/hooks/tradingView/useChartLines.ts +++ b/src/hooks/tradingView/useChartLines.ts @@ -9,7 +9,11 @@ import type { ChartLine, TvWidget } from '@/constants/tvchart'; import { useStringGetter } from '@/hooks'; -import { getCurrentMarketOrders, getCurrentMarketPositionData } from '@/state/accountSelectors'; +import { + getCurrentMarketOrders, + getCurrentMarketPositionData, + getIsAccountConnected, +} from '@/state/accountSelectors'; import { getAppTheme, getAppColorMode } from '@/state/configsSelectors'; import { MustBigNumber } from '@/lib/numbers'; @@ -37,6 +41,8 @@ export const useChartLines = ({ const appTheme = useSelector(getAppTheme); const appColorMode = useSelector(getAppColorMode); + const isAccountConnected = useSelector(getIsAccountConnected); + const currentMarketPositionData = useSelector(getCurrentMarketPositionData, shallowEqual); const currentMarketOrders: SubaccountOrder[] = useSelector(getCurrentMarketOrders, shallowEqual); @@ -46,6 +52,12 @@ export const useChartLines = ({ } }, [isChartReady, showOrderLines]); + useEffect(() => { + if (!isAccountConnected) { + deleteChartLines(); + } + }, [isAccountConnected]); + useEffect(() => { if (isChartReady && tvWidget) { tvWidget.onChartReady(() => {