diff --git a/src/components/Global/Sidebar/PoolsListItem.tsx b/src/components/Global/Sidebar/PoolsListItem.tsx index 66ad7f194c..fcd662964e 100644 --- a/src/components/Global/Sidebar/PoolsListItem.tsx +++ b/src/components/Global/Sidebar/PoolsListItem.tsx @@ -109,7 +109,8 @@ export default function PoolsListItem(props: propsIF) { return output as pageNames; }, [pathname, isFuta]); - const { tokenA, tokenB } = useContext(TradeDataContext); + const { tokenA, tokenB, setPoolPriceNonDisplay } = + useContext(TradeDataContext); // hook to generate navigation actions with pre-loaded path const linkGenMarket: linkGenMethodsIF = useLinkGen(navTarget); @@ -203,6 +204,7 @@ export default function PoolsListItem(props: propsIF) { color='text2' onClick={() => { if (isPoolDropdownOpen) setIsPoolDropdownOpen(false); + setPoolPriceNonDisplay(0); }} > {[ diff --git a/src/components/Trade/Range/RangePriceInfo/RangePriceInfo.tsx b/src/components/Trade/Range/RangePriceInfo/RangePriceInfo.tsx index 9c77dc5471..a8923196dc 100644 --- a/src/components/Trade/Range/RangePriceInfo/RangePriceInfo.tsx +++ b/src/components/Trade/Range/RangePriceInfo/RangePriceInfo.tsx @@ -117,18 +117,24 @@ function RangePriceInfo(props: propsIF) { useEffect(() => { setUserFlippedMaxMinDisplay(false); + setMaxPriceUsdEquivalent('...'); + setMinPriceUsdEquivalent('...'); updateMainnetPricesAsync(); - }, [ - crocEnv !== undefined, - baseToken.address + quoteToken.address, - poolPriceDisplay, - ]); + }, [crocEnv !== undefined, baseToken.address + quoteToken.address]); useEffect(() => { if (!pinnedMinPrice || !pinnedMaxPrice) return; let minPriceNum, maxPriceNum; + console.log({ + isDenomBase, + basePrice, + quotePrice, + pinnedMinPrice, + pinnedMaxPrice, + }); + if (isDenomBase) { minPriceNum = parseFloat(pinnedMinPrice) * (quotePrice || 0); @@ -139,6 +145,8 @@ function RangePriceInfo(props: propsIF) { maxPriceNum = parseFloat(pinnedMaxPrice) * (basePrice || 0); } + console.log({ maxPriceNum, pinnedMaxPrice, quotePrice, isDenomBase }); + const minDisplayUsdPriceString = isAmbient ? '$0' : getFormattedNumber({ @@ -187,6 +195,26 @@ function RangePriceInfo(props: propsIF) { ); + useEffect(() => { + console.log({ + isTradeDollarizationEnabled, + minPriceUsdEquivalent, + minPrice, + maxPriceUsdEquivalent, + maxPrice, + pinnedMinPrice, + pinnedMaxPrice, + }); + }, [ + isTradeDollarizationEnabled, + minPriceUsdEquivalent, + minPrice, + maxPriceUsdEquivalent, + maxPrice, + pinnedMinPrice, + pinnedMaxPrice, + ]); + // JSX frag for highest price in range const maximumPrice = nonDenomTokenDollarEquivalentExists ? (
diff --git a/src/contexts/PoolContext.tsx b/src/contexts/PoolContext.tsx index ce49b0c120..202c0fa72e 100644 --- a/src/contexts/PoolContext.tsx +++ b/src/contexts/PoolContext.tsx @@ -142,6 +142,15 @@ export const PoolContextProvider = (props: { children: ReactNode }) => { baseToken.address === ZERO_ADDRESS && isWbtcOrStakedBTCToken(quoteToken.address); + console.log({ + usdPrice, + isPairStablePair, + isPairEthPair, + isPoolBtcPair, + isPairEthWbtc, + excludeFromUsdConversion, + }); + if ( usdPrice !== undefined && !( @@ -152,8 +161,10 @@ export const PoolContextProvider = (props: { children: ReactNode }) => { excludeFromUsdConversion ) ) { + console.log('setting dollarization to true'); setIsTradeDollarizationEnabled(true); } else { + console.log('setting dollarization to false'); setIsTradeDollarizationEnabled(false); } }, [baseToken.address, quoteToken.address, usdPrice !== undefined]); diff --git a/src/contexts/TradeDataContext.tsx b/src/contexts/TradeDataContext.tsx index 2206388c9e..598d5bcc43 100644 --- a/src/contexts/TradeDataContext.tsx +++ b/src/contexts/TradeDataContext.tsx @@ -35,7 +35,7 @@ export interface TradeDataContextIF { primaryQuantity: string; limitTick: number | undefined; poolPriceNonDisplay: number; - currentPoolPriceTick: number; + currentPoolPriceTick: number | undefined; slippageTolerance: number; setTokenA: Dispatch>; @@ -158,8 +158,8 @@ export const TradeDataContextProvider = (props: { children: ReactNode }) => { areDefaultTokensUpdatedForChain, setAreDefaultTokensUpdatedForChain, ] = useState(false); + const [isDenomBase, setDenomInBase] = useState(true); - // TODO: this can likely be refactored out const [didUserFlipDenom, setDidUserFlipDenom] = useState(false); const { baseToken, quoteToken, isTokenABase } = useMemo(() => { @@ -184,6 +184,11 @@ export const TradeDataContextProvider = (props: { children: ReactNode }) => { } }, [tokenA, tokenB]); + useEffect(() => { + setPoolPriceNonDisplay(0); + setDidUserFlipDenom(false); + }, [baseToken.address + quoteToken.address]); + const toggleDidUserFlipDenom = () => { setDidUserFlipDenom(!didUserFlipDenom); }; @@ -224,18 +229,14 @@ export const TradeDataContextProvider = (props: { children: ReactNode }) => { const [limitTick, setLimitTick] = useState(undefined); const [poolPriceNonDisplay, setPoolPriceNonDisplay] = useState(0); - const currentPoolPriceTick = useMemo( - () => - poolPriceNonDisplay === undefined || poolPriceNonDisplay === 0 - ? 0 - : Math.log(poolPriceNonDisplay) / Math.log(1.0001), - [poolPriceNonDisplay], - ); + const currentPoolPriceTick = + poolPriceNonDisplay === undefined || poolPriceNonDisplay === 0 + ? undefined + : Math.log(poolPriceNonDisplay) / Math.log(1.0001); useEffect(() => { - setPoolPriceNonDisplay(0); - setDidUserFlipDenom(false); - }, [baseToken.address + quoteToken.address]); + console.log({ poolPriceNonDisplay, currentPoolPriceTick }); + }, [poolPriceNonDisplay, currentPoolPriceTick]); const [slippageTolerance, setSlippageTolerance] = useState(0.5); diff --git a/src/pages/platformAmbient/Chart/Chart.tsx b/src/pages/platformAmbient/Chart/Chart.tsx index b5651c80f0..c98f0acb30 100644 --- a/src/pages/platformAmbient/Chart/Chart.tsx +++ b/src/pages/platformAmbient/Chart/Chart.tsx @@ -1660,7 +1660,11 @@ export default function Chart(props: propsIF) { // calculate range value for denom useEffect(() => { - if (!advancedMode && simpleRangeWidth === 100) { + if ( + !advancedMode && + simpleRangeWidth === 100 && + currentPoolPriceTick !== undefined + ) { const lowTick = currentPoolPriceTick - simpleRangeWidth * 100; const highTick = currentPoolPriceTick + simpleRangeWidth * 100; @@ -2026,7 +2030,11 @@ export default function Chart(props: propsIF) { rectCanvas, ); - if (!cancelDrag && liquidityData) { + if ( + !cancelDrag && + liquidityData && + currentPoolPriceTick !== undefined + ) { setIsLineDrag(true); setCrosshairActive('none'); @@ -2810,7 +2818,7 @@ export default function Chart(props: propsIF) { ]); const onClickRange = async (event: PointerEvent) => { - if (scaleData && liquidityData) { + if (scaleData && liquidityData && currentPoolPriceTick !== undefined) { let newRangeValue: lineValue[]; const low = ranges.filter( @@ -4233,15 +4241,17 @@ export default function Chart(props: propsIF) { }, [market, marketLine]); useEffect(() => { - const noGoZoneBoundaries = noGoZone( - currentPoolPriceTick, - baseTokenDecimals, - quoteTokenDecimals, - gridSize, - ); - setNoGoZoneBoundaries(() => { - return noGoZoneBoundaries; - }); + if (currentPoolPriceTick !== undefined) { + const noGoZoneBoundaries = noGoZone( + currentPoolPriceTick, + baseTokenDecimals, + quoteTokenDecimals, + gridSize, + ); + setNoGoZoneBoundaries(() => { + return noGoZoneBoundaries; + }); + } }, [ currentPoolPriceTick, baseTokenDecimals, @@ -4403,7 +4413,7 @@ export default function Chart(props: propsIF) { } function changeScaleRangeOrReposition(isTriggeredByZoom: boolean) { - if (scaleData && rescale) { + if (scaleData && rescale && currentPoolPriceTick !== undefined) { const min = minPrice; const max = maxPrice; diff --git a/src/pages/platformAmbient/Chart/RangeLine/RangeLinesChart.tsx b/src/pages/platformAmbient/Chart/RangeLine/RangeLinesChart.tsx index 5f2b45bd0b..3a69522298 100644 --- a/src/pages/platformAmbient/Chart/RangeLine/RangeLinesChart.tsx +++ b/src/pages/platformAmbient/Chart/RangeLine/RangeLinesChart.tsx @@ -21,7 +21,7 @@ interface propsIF { tokenB: TokenIF; isDenomBase: boolean; rescale: boolean | undefined; - currentPoolPriceTick: number; + currentPoolPriceTick: number | undefined; poolPriceDisplay: number; /* eslint-disable @typescript-eslint/no-explicit-any */ changeScale: any; @@ -307,7 +307,10 @@ export default function RangeLinesChart(props: propsIF) { }; const setBalancedLines = (isRepositionLinesSet = false) => { - if (tokenA.address !== tokenB.address) { + if ( + tokenA.address !== tokenB.address && + currentPoolPriceTick !== undefined + ) { if ( location.pathname.includes('reposition') && position !== undefined && diff --git a/src/pages/platformAmbient/Trade/Range/Range.tsx b/src/pages/platformAmbient/Trade/Range/Range.tsx index 678258d51c..5c673bbe7c 100644 --- a/src/pages/platformAmbient/Trade/Range/Range.tsx +++ b/src/pages/platformAmbient/Trade/Range/Range.tsx @@ -244,11 +244,13 @@ function Range() { const shouldResetAdvancedLowTick = !ticksInParams && + currentPoolPriceTick && (advancedHighTick > currentPoolPriceTick + 100000 || advancedLowTick < currentPoolPriceTick - 100000); const shouldResetAdvancedHighTick = !ticksInParams && + currentPoolPriceTick && (advancedHighTick > currentPoolPriceTick + 100000 || advancedLowTick < currentPoolPriceTick - 100000); @@ -303,7 +305,7 @@ function Range() { useRangeInputDisable( isAmbient, isTokenABase, - currentPoolPriceTick, + currentPoolPriceTick || 0, defaultLowTick, defaultHighTick, isDenomBase, @@ -343,8 +345,10 @@ function Range() { tokenAInputQtyNoExponentString !== '' || tokenBInputQtyNoExponentString !== ''; - const rangeSpanAboveCurrentPrice = defaultHighTick - currentPoolPriceTick; - const rangeSpanBelowCurrentPrice = currentPoolPriceTick - defaultLowTick; + const rangeSpanAboveCurrentPrice = + defaultHighTick - (currentPoolPriceTick || 0); + const rangeSpanBelowCurrentPrice = + (currentPoolPriceTick || 0) - defaultLowTick; const isOutOfRange = !advancedMode ? false : rangeSpanAboveCurrentPrice < 0 || rangeSpanBelowCurrentPrice < 0; @@ -512,6 +516,7 @@ function Range() { useEffect(() => { setNewRangeTransactionHash(''); + console.log('setting pinned prices to undefined'); setPinnedDisplayPrices(undefined); }, [baseToken.address + quoteToken.address]); @@ -528,9 +533,18 @@ function Range() { setRangeHighBoundNonDisplayPrice(Infinity); } else if (advancedMode) { setIsAmbient(false); - } else { + } else if (currentPoolPriceTick !== undefined) { + console.log({ + rangeWidthPercentage, + advancedMode, + isDenomBase, + currentPoolPriceTick, + baseToken, + quoteToken, + baseTokenDecimals, + quoteTokenDecimals, + }); setIsAmbient(false); - if (Math.abs(currentPoolPriceTick) === Infinity) return; const lowTick = currentPoolPriceTick - rangeWidthPercentage * 100; const highTick = currentPoolPriceTick + rangeWidthPercentage * 100; @@ -542,7 +556,7 @@ function Range() { highTick, gridSize, ); - + console.log({ pinnedDisplayPrices }); setPinnedDisplayPrices(pinnedDisplayPrices); setRangeLowBoundNonDisplayPrice( @@ -628,9 +642,10 @@ function Range() { setAdvancedHighTick(pinnedDisplayPrices.pinnedHighTick); const highTickDiff = - pinnedDisplayPrices.pinnedHighTick - currentPoolPriceTick; + pinnedDisplayPrices.pinnedHighTick - + (currentPoolPriceTick || 0); const lowTickDiff = - pinnedDisplayPrices.pinnedLowTick - currentPoolPriceTick; + pinnedDisplayPrices.pinnedLowTick - (currentPoolPriceTick || 0); const highGeometricDifferencePercentage = Math.abs(highTickDiff) < 200 @@ -741,14 +756,15 @@ function Range() { const highGeometricDifferencePercentage = parseFloat( truncateDecimals( (pinnedDisplayPrices.pinnedHighTick - - currentPoolPriceTick) / + (currentPoolPriceTick || 0)) / 100, 0, ), ); const lowGeometricDifferencePercentage = parseFloat( truncateDecimals( - (pinnedDisplayPrices.pinnedLowTick - currentPoolPriceTick) / + (pinnedDisplayPrices.pinnedLowTick - + (currentPoolPriceTick || 0)) / 100, 0, ), @@ -829,14 +845,15 @@ function Range() { const highGeometricDifferencePercentage = parseFloat( truncateDecimals( (pinnedDisplayPrices.pinnedHighTick - - currentPoolPriceTick) / + (currentPoolPriceTick || 0)) / 100, 0, ), ); const lowGeometricDifferencePercentage = parseFloat( truncateDecimals( - (pinnedDisplayPrices.pinnedLowTick - currentPoolPriceTick) / + (pinnedDisplayPrices.pinnedLowTick - + (currentPoolPriceTick || 0)) / 100, 0, ), diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx index 2fd283493d..4512450691 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx @@ -278,8 +278,8 @@ function TradeCandleStickChart(props: propsIF) { let topBoundary = 0; let lowBoundary = 0; - const lowTick = currentPoolPriceTick - 100 * 101; - const highTick = currentPoolPriceTick + 100 * 101; + const lowTick = (currentPoolPriceTick || 0) - 100 * 101; + const highTick = (currentPoolPriceTick || 0) + 100 * 101; const rangeBoundary = getPinnedPriceValuesFromTicks( isDenomBase,