Skip to content

Commit

Permalink
Merge pull request #4641 from tncoskun/fix-candles-broken-when-refres…
Browse files Browse the repository at this point in the history 
…h-swap-page

Fix candles broken when refresh swap page
  • Loading branch information
@benwolski
benwolski authored Jan 15, 2025
2 parents 2b60fbc + c20e8fe commit 9e7491a
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 31 deletions.
87 changes: 56 additions & 31 deletions src/contexts/CandleContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export interface CandleContextIF {
setIsCondensedModeEnabled: Dispatch<SetStateAction<boolean>>;
showFutaCandles: boolean;
setShowFutaCandles: Dispatch<SetStateAction<boolean>>;
setIsChartOpen: Dispatch<SetStateAction<boolean>>;
}

export const CandleContext = createContext({} as CandleContextIF);
Expand Down Expand Up @@ -83,6 +84,9 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
const { cachedFetchTokenPrice, cachedQuerySpotPrice } =
useContext(CachedDataContext);

const baseTokenAddressRef = useRef(baseTokenAddress);
const quoteTokenAddressRef = useRef(quoteTokenAddress);

const isPoolInitialized = useSimulatedIsPoolInitialized();

const [candleData, setCandleData] = useState<
Expand Down Expand Up @@ -110,6 +114,9 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
});

const [offlineFetcher, setOfflineFetcher] = useState<NodeJS.Timeout>();

const [isChartOpen, setIsChartOpen] = useState(false);

const offlineFetcherRef = useRef<NodeJS.Timeout>();
offlineFetcherRef.current = offlineFetcher;

Expand Down Expand Up @@ -179,6 +186,7 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
setIsCondensedModeEnabled,
showFutaCandles,
setShowFutaCandles,
setIsChartOpen,
};

useEffect(() => {
Expand All @@ -191,6 +199,11 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
setTimeOfEndCandle(undefined);
setIsCondensedModeEnabled(true);
}

baseTokenAddressRef.current =
baseTokenAddress.toLocaleLowerCase('en-US');
quoteTokenAddressRef.current =
quoteTokenAddress.toLocaleLowerCase('en-US');
}, [poolTokenAddress, chainId]);

// only works when the period changes
Expand All @@ -209,6 +222,10 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
isUserOnline &&
(await crocEnv.context).chain.chainId === chainId &&
isChartEnabled &&
baseTokenAddressRef.current ===
baseTokenAddress.toLocaleLowerCase('en-US') &&
quoteTokenAddressRef.current ===
quoteTokenAddress.toLocaleLowerCase('en-US') &&
candleData === undefined
) {
fetchCandles();
Expand All @@ -224,14 +241,18 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
candleData === undefined,
crocEnv,
chainId,
baseTokenAddressRef.current ===
baseTokenAddress.toLocaleLowerCase('en-US'),
quoteTokenAddressRef.current ===
quoteTokenAddress.toLocaleLowerCase('en-US'),
]);

useEffect(() => {
if (
isChartEnabled &&
isUserOnline &&
candleScale.isShowLatestCandle &&
!isFetchingCandle &&
isChartOpen &&
location.pathname.includes('/trade')
) {
if (
Expand All @@ -250,7 +271,6 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
isUserIdle
? Math.floor(Date.now() / CACHE_UPDATE_FREQ_IN_MS)
: Math.floor(Date.now() / (2 * CACHE_UPDATE_FREQ_IN_MS)),
poolTokenAddress,
candleScale.isShowLatestCandle,
]);

Expand Down Expand Up @@ -333,28 +353,35 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
poolPriceRef.current,
)
.then((candles) => {
setCandleData(candles);
const candleSeries = candles?.candles;
if (candleSeries && candleSeries.length > 0) {
if (candles?.candles.length < nCandles) {
const localCandles = candles?.candles;

setTimeOfEndCandle(
localCandles[localCandles.length - 1].time *
1000,
);
if (
baseTokenAddressRef.current ===
baseTokenAddress.toLocaleLowerCase('en-US') &&
quoteTokenAddressRef.current ===
quoteTokenAddress.toLocaleLowerCase('en-US')
) {
setCandleData(candles);
const candleSeries = candles?.candles;
if (candleSeries && candleSeries.length > 0) {
if (candles?.candles.length < nCandles) {
const localCandles = candles?.candles;

setTimeOfEndCandle(
localCandles[localCandles.length - 1].time *
1000,
);
}
setIsCandleDataNull(false);
} else {
setIsCandleDataNull(true);
}
setIsCandleDataNull(false);
} else {
setIsCandleDataNull(true);
}

if (candleSeries && candleSeries.length > 0) {
setIsFetchingCandle(false);
}
setIsFirstFetch(false);
if (candleSeries && candleSeries.length > 0) {
setIsFetchingCandle(false);
}
setIsFirstFetch(false);

return candles;
return candles;
}
})
.then(() => {
setIsFinishRequest(true);
Expand Down Expand Up @@ -426,16 +453,14 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
setCandleData(incrCandles);
} else {
const newCandles: CandleDataIF[] = [];
if (incrCandles.candles.length === 0) {
candleData.candles.sort(
(a: CandleDataIF, b: CandleDataIF) =>
b.time - a.time,
);
setTimeOfEndCandle(
candleData.candles[
candleData.candles.length - 1
].time * 1000,
if (
incrCandles.candles.length === 0 ||
incrCandles.candles.length < numDurations - 1
) {
const minDate = Math.min(
...incrCandles.candles.map((i) => i.time),
);
minDate && setTimeOfEndCandle(minDate * 1000);
}

for (
Expand Down Expand Up @@ -482,7 +507,7 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
crocEnv &&
(await crocEnv.context).chain.chainId === chainId
) {
if (numDurationsNeeded > 0 && !isFetchingCandle) {
if (numDurationsNeeded > 0 && isChartOpen) {
minTimeMemo &&
fetchCandlesByNumDurations(
numDurationsNeeded > 2999
Expand Down
10 changes: 10 additions & 0 deletions src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ function TradeCandleStickChart(props: propsIF) {
isCondensedModeEnabled,
candleDomains,
setCandleDomains,
setIsChartOpen,
} = useContext(CandleContext);
const { chartSettings, isChangeScaleChart, setSelectedDrawnShape } =
useContext(ChartContext);
Expand Down Expand Up @@ -1059,9 +1060,18 @@ function TradeCandleStickChart(props: propsIF) {
prevPeriod === period &&
scaleData &&
period === candleData?.duration &&
candleData.pool.baseAddress.toLocaleLowerCase('en-US') ===
baseTokenAddress.toLocaleLowerCase('en-US') &&
candleData.pool.quoteAddress.toLocaleLowerCase('en-US') ===
quoteTokenAddress.toLocaleLowerCase('en-US') &&
!isFetchingCandle &&
!isFetchingEnoughData;

useEffect(() => {
isOpenChart !== undefined &&
setIsChartOpen(isOpenChart && !isCompletedFetchData);
}, [isOpenChart, isCompletedFetchData]);

const loadingText = (
<div
style={{ height: '100%', width: '100%' }}
Expand Down

0 comments on commit 9e7491a

Please sign in to comment.