Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix temporary display of incorrect range bounds when loading a pool #4414

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from
+119 −47
Draft

fix temporary display of incorrect range bounds when loading a pool #4414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
34402a8
improve handling of loading pool prices
benwolski Dec 2, 2024
242809e
Merge branch 'develop' of github.com:CrocSwap/ambient-ts-app into fix…
benwolski Dec 2, 2024
27e071d
Merge branch 'develop' into fix-momentary-display-of-incorrect-defaul…
benwolski Dec 5, 2024
4685e01
Merge branch 'develop' into fix-momentary-display-of-incorrect-defaul…
benwolski Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Global/Sidebar/PoolsListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -203,6 +204,7 @@ export default function PoolsListItem(props: propsIF) {
color='text2'
onClick={() => {
if (isPoolDropdownOpen) setIsPoolDropdownOpen(false);
setPoolPriceNonDisplay(0);
}}
>
{[
Expand Down
38 changes: 33 additions & 5 deletions src/components/Trade/Range/RangePriceInfo/RangePriceInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -139,6 +145,8 @@ function RangePriceInfo(props: propsIF) {
maxPriceNum = parseFloat(pinnedMaxPrice) * (basePrice || 0);
}

console.log({ maxPriceNum, pinnedMaxPrice, quotePrice, isDenomBase });

const minDisplayUsdPriceString = isAmbient
? '$0'
: getFormattedNumber({
Expand Down Expand Up @@ -187,6 +195,26 @@ function RangePriceInfo(props: propsIF) {
</div>
);

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 ? (
<div className={styles.price_display}>
Expand Down
11 changes: 11 additions & 0 deletions src/contexts/PoolContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
!(
Expand All @@ -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]);
Expand Down
25 changes: 13 additions & 12 deletions src/contexts/TradeDataContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export interface TradeDataContextIF {
primaryQuantity: string;
limitTick: number | undefined;
poolPriceNonDisplay: number;
currentPoolPriceTick: number;
currentPoolPriceTick: number | undefined;
slippageTolerance: number;

setTokenA: Dispatch<SetStateAction<TokenIF>>;
Expand Down Expand Up @@ -158,8 +158,8 @@ export const TradeDataContextProvider = (props: { children: ReactNode }) => {
areDefaultTokensUpdatedForChain,
setAreDefaultTokensUpdatedForChain,
] = useState<boolean>(false);

const [isDenomBase, setDenomInBase] = useState<boolean>(true);
// TODO: this can likely be refactored out
const [didUserFlipDenom, setDidUserFlipDenom] = useState<boolean>(false);

const { baseToken, quoteToken, isTokenABase } = useMemo(() => {
Expand All @@ -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);
};
Expand Down Expand Up @@ -224,18 +229,14 @@ export const TradeDataContextProvider = (props: { children: ReactNode }) => {
const [limitTick, setLimitTick] = useState<number | undefined>(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<number>(0.5);

Expand Down
36 changes: 23 additions & 13 deletions src/pages/platformAmbient/Chart/Chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -2026,7 +2030,11 @@ export default function Chart(props: propsIF) {
rectCanvas,
);

if (!cancelDrag && liquidityData) {
if (
!cancelDrag &&
liquidityData &&
currentPoolPriceTick !== undefined
) {
setIsLineDrag(true);
setCrosshairActive('none');

Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;

Expand Down
7 changes: 5 additions & 2 deletions src/pages/platformAmbient/Chart/RangeLine/RangeLinesChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 &&
Expand Down
41 changes: 29 additions & 12 deletions src/pages/platformAmbient/Trade/Range/Range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -303,7 +305,7 @@ function Range() {
useRangeInputDisable(
isAmbient,
isTokenABase,
currentPoolPriceTick,
currentPoolPriceTick || 0,
defaultLowTick,
defaultHighTick,
isDenomBase,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -512,6 +516,7 @@ function Range() {

useEffect(() => {
setNewRangeTransactionHash('');
console.log('setting pinned prices to undefined');
setPinnedDisplayPrices(undefined);
}, [baseToken.address + quoteToken.address]);

Expand All @@ -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;

Expand All @@ -542,7 +556,7 @@ function Range() {
highTick,
gridSize,
);

console.log({ pinnedDisplayPrices });
setPinnedDisplayPrices(pinnedDisplayPrices);

setRangeLowBoundNonDisplayPrice(
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
),
Expand Down Expand Up @@ -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,
),
Expand Down
4 changes: 2 additions & 2 deletions src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading