Skip to content

Commit

Permalink
feat: Imporve calculate ticks and fee boost
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinoosss
jinoosss committed Nov 14, 2023
1 parent b2eac4f commit 658d106
Show file tree
Hide file tree
Showing 6 changed files with 837 additions and 67 deletions.
3 changes: 3 additions & 0 deletions packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export interface PoolSelectionGraphProps {
setMaxPrice: (tick: number | null) => void;
selectedFullRange: boolean;
setFullRange: (fullRange: boolean) => void;
finishMove: () => void;
focusPosition: number | null;
width: number;
height: number;
Expand Down Expand Up @@ -139,6 +140,7 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
setFullRange,
focusPosition,
zoomLevel,
finishMove,
margin = {
left: 0,
right: 0,
Expand Down Expand Up @@ -272,6 +274,7 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
selectionElement.select("#end").remove();
return;
}
finishMove();
}

const zeroPosition = scaleX(0);
Expand Down
11 changes: 9 additions & 2 deletions packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ const SelectPriceRangeCustom: React.FC<SelectPriceRangeCustomProps> = ({
.domain(getHeightRange())
.range([GRAPH_HEIGHT, 0]);

const availSelect = Array.isArray(selectPool.liquidityOfTickPoints) && selectPool.renderState === "DONE";
const isLoading = priceRangeType === "Custom" && selectPool.renderState === "LOADING";

const availSelect = priceRangeType === "Custom" && Array.isArray(selectPool.liquidityOfTickPoints) && selectPool.renderState === "DONE";

const comparedTokenA = selectPool.compareToken?.symbol !== tokenB.symbol;

Expand Down Expand Up @@ -145,6 +147,10 @@ const SelectPriceRangeCustom: React.FC<SelectPriceRangeCustomProps> = ({
changeStartingPrice(startingPriceValue);
}, [startingPriceValue]);

const finishMove = useCallback(() => {
selectPool.setInteractionType("TICK_UPDATE");
}, [selectPool]);

useEffect(() => {
selectPool.setCompareToken(tokenA);
}, []);
Expand Down Expand Up @@ -196,7 +202,7 @@ const SelectPriceRangeCustom: React.FC<SelectPriceRangeCustomProps> = ({
</div>
</div>
{
selectPool.renderState === "LOADING" && (
isLoading && (
<div className="loading-wrapper">
<LoadingSpinner />
</div>
Expand Down Expand Up @@ -225,6 +231,7 @@ const SelectPriceRangeCustom: React.FC<SelectPriceRangeCustomProps> = ({
focusPosition={selectPool.focusPosition}
width={GRAPH_WIDTH}
height={GRAPH_HEIGHT}
finishMove={finishMove}
/>
</div>
</>
Expand Down
119 changes: 77 additions & 42 deletions packages/web/src/hooks/pool/use-select-pool.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export interface SelectPool {
zoomIn: () => void;
zoomOut: () => void;
liquidityOfTickPoints: [number, number][];
setInteractionType: (type: "NONE" | "INTERACTION" | "TICK_UPDATE" | "FINISH") => void;
}


Expand All @@ -65,6 +66,7 @@ export const useSelectPool = ({
const [maxPosition, setMaxPosition] = useState<number | null>(null);
const [compareToken, setCompareToken] = useState<TokenModel | null>(tokenA);
const [poolInfo, setPoolInfo] = useState<PoolInfoModel | null>(null);
const [interactionType, setInteractionType] = useState<"NONE" | "INTERACTION" | "TICK_UPDATE" | "FINISH">("NONE");

const renderState: RenderState = useMemo(() => {
if (!tokenA || !tokenB || !feeTier) {
Expand Down Expand Up @@ -123,56 +125,77 @@ export const useSelectPool = ({

const tickSpacing = useMemo(() => poolInfo?.tickSpacing || 2, [poolInfo?.tickSpacing]);

const increaseMinTick = useCallback(() => {
if (!poolInfo || !minPrice) {
function excuteInteraction(callback: () => void) {
if (interactionType === "INTERACTION") {
return;
}
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(minPrice, tickSpacing);
if (nearTick < MAX_TICK - tickSpacing) {
setMinPosition(tickToPrice(nearTick + tickSpacing));
}
}, [minPrice, poolInfo]);
setInteractionType("INTERACTION");
new Promise(resolve => resolve(callback()))
.then(() => setInteractionType("FINISH"));
}

const increaseMinTick = useCallback(() => {
excuteInteraction(() => {
if (!poolInfo || !minPrice) {
return;
}
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(minPrice, tickSpacing);
if (nearTick < MAX_TICK - tickSpacing) {
console.log(nearTick + tickSpacing);
setMinPosition(tickToPrice(nearTick + tickSpacing));
}
});
}, [poolInfo, minPrice, interactionType]);

const decreaseMinTick = useCallback(() => {
if (!poolInfo || !minPrice) {
return;
}
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(minPrice, tickSpacing);
if (nearTick > MIN_TICK + tickSpacing) {
setMinPosition(tickToPrice(nearTick - tickSpacing));
}
}, [minPrice, poolInfo]);
excuteInteraction(() => {
if (!poolInfo || !minPrice) {
return;
}
setInteractionType("INTERACTION");
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(minPrice, tickSpacing);
if (nearTick > MIN_TICK + tickSpacing) {
setMinPosition(tickToPrice(nearTick - tickSpacing));
}
});
}, [minPrice, poolInfo, interactionType]);

const increaseMaxTick = useCallback(() => {
if (!poolInfo || !maxPrice) {
return;
}
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(maxPrice, tickSpacing);
if (nearTick < MAX_TICK - tickSpacing) {
setMaxPosition(tickToPrice(nearTick + tickSpacing));
}
}, [maxPrice, poolInfo]);
excuteInteraction(() => {
if (!poolInfo || !maxPrice) {
return;
}
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(maxPrice, tickSpacing);
if (nearTick < MAX_TICK - tickSpacing) {
setMaxPosition(tickToPrice(nearTick + tickSpacing));
}
});
}, [interactionType, poolInfo, maxPrice]);

const decreaseMaxTick = useCallback(() => {
if (!poolInfo || !maxPrice) {
return;
}
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(maxPrice, tickSpacing);
if (nearTick > MIN_TICK + tickSpacing) {
setMaxPosition(tickToPrice(nearTick - tickSpacing));
}
}, [maxPrice, poolInfo]);
excuteInteraction(() => {
if (!poolInfo || !maxPrice) {
return;
}
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(maxPrice, tickSpacing);
if (nearTick > MIN_TICK + tickSpacing) {
setMaxPosition(tickToPrice(nearTick - tickSpacing));
}
});
}, [maxPrice, poolInfo, interactionType]);

const resetRange = useCallback(() => {
setZoomLevel(10);
setFullRange(false);
setMinPosition(null);
setMaxPosition(null);
}, []);
excuteInteraction(() => {
setZoomLevel(10);
setFullRange(false);
setMinPosition(null);
setMaxPosition(null);
});
}, [interactionType]);

const zoomIn = useCallback(() => {
if (zoomLevel > 1) {
Expand Down Expand Up @@ -238,7 +261,18 @@ export const useSelectPool = ({
}
}, [poolRepository, feeTier, tokenA, tokenB, compareToken, isCreate, startPrice]);


useEffect(() => {
if (interactionType === "TICK_UPDATE") {
if (minPosition === null || maxPosition === null) {
return;
}
const minNearTick = priceToNearTick(minPosition, tickSpacing);
const maxNearTick = priceToNearTick(maxPosition, tickSpacing);
setMaxPosition(tickToPrice(minNearTick));
setMaxPosition(tickToPrice(maxNearTick));
setInteractionType("FINISH");
}
}, [interactionType]);

return {
renderState,
Expand Down Expand Up @@ -269,6 +303,7 @@ export const useSelectPool = ({
zoomIn,
zoomOut,
liquidityOfTickPoints,
isCreate
isCreate,
setInteractionType
};
};
Loading

0 comments on commit 658d106

Please sign in to comment.