Skip to content

Commit

Permalink
feat: Imporve Graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinoosss
jinoosss committed Nov 14, 2023
1 parent c5eb8e7 commit cd674d0
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 54 deletions.
75 changes: 32 additions & 43 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 @@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
import { PoolSelectionGraphWrapper } from "./PoolSelectionGraph.styles";
import * as d3 from "d3";
import { numberToFormat } from "@utils/string-utils";
import BigNumber from "bignumber.js";

function makeBadge(
refer: d3.Selection<any, unknown, null, undefined>,
Expand Down Expand Up @@ -166,13 +167,17 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
return width / 20;
};

function getInvertX(x: number) {
return Number(BigNumber(scaleX.invert(x)).toFixed(16));
}

const resolvedBins = () => {
const binWidth = getBinWidth();
const startXPosition = (scaleX.invert(0) % binWidth) * -1;
const startXPosition = (getInvertX(0) % binWidth) * -1;

return Array.from({ length: 22 }, (_, index) => {
const x = startXPosition + (binWidth * index);
const y = liquidityOfTickPoints.find((point, pIndex) => {
const x: number = startXPosition + (binWidth * index);
const y: number = liquidityOfTickPoints.find((point, pIndex) => {
const pointPosition = scaleX(point[0]);
if (liquidityOfTickPoints.length <= pIndex + 1) {
return x >= pointPosition;
Expand Down Expand Up @@ -224,8 +229,8 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
x,
y,
fill,
width,
height
width: width > 0 ? width : 0,
height: height > 0 ? height : 0
};
});
};
Expand All @@ -243,48 +248,35 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
if (!event?.type || !brushRef.current) {
return;
}

if (event.selection === null || !Array.isArray(event.selection)) {
return;
}
if (typeof event.selection[0] !== "number" || typeof event.selection[1] !== "number") {
return;
}

if (event.type === "brush") {
if (event.selection[0] === event.selection[1]) {
if (event.type === "end") {
setMinPrice(null);
setMaxPrice(null);
const selectionElement = d3.select(brushRef.current);
selectionElement.select("#start").remove();
selectionElement.select("#end").remove();
return;
}
} else {
if (event.mode) {
setFullRange(false);
}
return;
}
if (event.type === "end") {
if (event.selection[0] === event.selection[1]) {
setMinPrice(null);
setMaxPrice(null);
const selectionElement = d3.select(brushRef.current);
selectionElement.select("#start").remove();
selectionElement.select("#end").remove();
return;
}
finishMove();
if (typeof event.selection[0] !== "number" || typeof event.selection[1] !== "number") {
return;
}
if (event.type === "brush" && !event.mode) {
return;
}

const zeroPosition = scaleX(0);
const minPricePosition = event.selection[0] > zeroPosition ? event.selection[0] : zeroPosition;
const minPrice = scaleX.invert(minPricePosition);
const minPrice = getInvertX(minPricePosition);
const maxPricePosition = event.selection[1] > zeroPosition ? event.selection[1] : zeroPosition;
const maxPrice = scaleX.invert(maxPricePosition);
setMinPrice(minPrice);
setMaxPrice(maxPrice);
const maxPrice = getInvertX(maxPricePosition);
if (event.mode === "handle" || event.mode === "drag") {
setFullRange(false);
setMinPrice(minPrice);
setMaxPrice(maxPrice);
}
initBrushGradient(currentPrice, minPrice, maxPrice);
finishMove();
} catch { }
}

Expand Down Expand Up @@ -331,7 +323,7 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
const endLineElement = selectionElement.insert("svg")
.attr("id", "end");

endLineElement.insert("line")
endLineElement.append("line")
.attr("y1", boundsHeight + paddingHeight)
.attr("y2", 0)
.style("stroke", "#2eff82")
Expand Down Expand Up @@ -436,11 +428,12 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
if (brushRef.current) {
try {
const brushElement = d3.select(brushRef.current);
if (minPrice && maxPrice) {
initBrushGradient(currentPrice, minPrice, maxPrice);
if (!selectedFullRange && minPrice !== null && maxPrice !== null) {
const minPricePosition = scaleX(minPrice);
const zeroPostion = scaleX(0);
brush.move(
brushElement,
[scaleX(minPrice), scaleX(maxPrice)]
[minPricePosition > zeroPostion ? minPricePosition : zeroPostion, scaleX(maxPrice)]
);
} else {
brush.clear(brushElement);
Expand All @@ -456,18 +449,14 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
}, [zoomLevel, focusPosition, minPrice, maxPrice, currentPrice, selectedFullRange]);

useEffect(() => {
if (selectedFullRange && brushRef.current && scaleX && brush?.move) {
if (selectedFullRange && brushRef.current && brush) {
const x1 = scaleX(0);
const minPrice = 0;
const maxPrice = scaleX.invert(width);
setMinPrice(minPrice);
setMaxPrice(maxPrice);
brush?.move(
d3.select(brushRef.current),
[x1, width]
);
}
}, [selectedFullRange, zoomLevel]);
}, [zoomLevel, selectedFullRange]);

useEffect(() => {
const svgElement = d3.select(svgRef.current)
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -105,7 +105,7 @@ const SelectPriceRangeCustom: React.FC<SelectPriceRangeCustomProps> = ({
}, [selectPool, tokenA, tokenB]);

const selectFullRange = useCallback(() => {
selectPool.setFullRange(true);
selectPool.selectFullRange();
}, [selectPool]);

function initPriceRange() {
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const EarnAddLiquidityContainer: React.FC = () => {
estimatedApr: "-",
};
}
if (selectPool.minPrice && selectPool.maxPrice && selectPool.currentPrice) {
if (selectPool.minPrice !== null && selectPool.maxPrice !== null && selectPool.currentPrice !== null) {
const { tokenARatio, tokenBRatio } = calculateDeposiRatio(selectPool.minPrice, selectPool.maxPrice, selectPool.currentPrice);
const tokenARatioStr = BigNumber(tokenARatio).toFixed(1);
const tokenBRatioStr = BigNumber(tokenBRatio).toFixed(1);
Expand Down
39 changes: 31 additions & 8 deletions packages/web/src/hooks/pool/use-select-pool.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface SelectPool {
decreaseMaxTick: () => void;
selectedFullRange: boolean;
setFullRange: (fullRange: boolean) => void;
selectFullRange: () => void;
resetRange: () => void;
focusPosition: number;
setFocusPosition: (position: number) => void;
Expand Down Expand Up @@ -134,6 +135,22 @@ export const useSelectPool = ({
.then(() => setInteractionType("FINISH"));
}

const changeMinPosition = useCallback((num: number | null) => {
if (num === null) {
setMinPosition(null);
return;
}
setMinPosition(Number(num.toFixed(16)));
}, []);

const changeMaxPosition = useCallback((num: number | null) => {
if (num === null) {
setMaxPosition(null);
return;
}
setMaxPosition(Number(num.toFixed(16)));
}, []);

const increaseMinTick = useCallback(() => {
excuteInteraction(() => {
if (!poolInfo || !minPrice) {
Expand All @@ -143,7 +160,7 @@ export const useSelectPool = ({
const nearTick = priceToNearTick(minPrice, tickSpacing);
if (nearTick < MAX_TICK - tickSpacing) {
console.log(nearTick + tickSpacing);
setMinPosition(tickToPrice(nearTick + tickSpacing));
changeMinPosition(tickToPrice(nearTick + tickSpacing));
}
});
}, [poolInfo, minPrice, interactionType]);
Expand All @@ -157,7 +174,7 @@ export const useSelectPool = ({
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(minPrice, tickSpacing);
if (nearTick > MIN_TICK + tickSpacing) {
setMinPosition(tickToPrice(nearTick - tickSpacing));
changeMinPosition(tickToPrice(nearTick - tickSpacing));
}
});
}, [minPrice, poolInfo, interactionType]);
Expand All @@ -170,7 +187,7 @@ export const useSelectPool = ({
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(maxPrice, tickSpacing);
if (nearTick < MAX_TICK - tickSpacing) {
setMaxPosition(tickToPrice(nearTick + tickSpacing));
changeMaxPosition(tickToPrice(nearTick + tickSpacing));
}
});
}, [interactionType, poolInfo, maxPrice]);
Expand All @@ -183,7 +200,7 @@ export const useSelectPool = ({
const tickSpacing = poolInfo.tickSpacing;
const nearTick = priceToNearTick(maxPrice, tickSpacing);
if (nearTick > MIN_TICK + tickSpacing) {
setMaxPosition(tickToPrice(nearTick - tickSpacing));
changeMaxPosition(tickToPrice(nearTick - tickSpacing));
}
});
}, [maxPrice, poolInfo, interactionType]);
Expand All @@ -192,8 +209,8 @@ export const useSelectPool = ({
excuteInteraction(() => {
setZoomLevel(10);
setFullRange(false);
setMinPosition(null);
setMaxPosition(null);
changeMinPosition(null);
changeMaxPosition(null);
});
}, [interactionType]);

Expand All @@ -209,6 +226,11 @@ export const useSelectPool = ({
}
}, [zoomLevel]);

const selectFullRange = useCallback(() => {
setZoomLevel(9);
setFullRange(true);
}, []);

useEffect(() => {
if (!tokenA || !tokenB || !feeTier) {
return;
Expand Down Expand Up @@ -279,9 +301,9 @@ export const useSelectPool = ({
feeTier,
tickSpacing,
minPosition,
setMinPosition,
setMinPosition: changeMinPosition,
maxPosition,
setMaxPosition,
setMaxPosition: changeMaxPosition,
compareToken,
setCompareToken,
currentPrice: price,
Expand All @@ -296,6 +318,7 @@ export const useSelectPool = ({
decreaseMaxTick,
selectedFullRange: fullRange,
setFullRange,
selectFullRange,
resetRange,
focusPosition,
setFocusPosition,
Expand Down
14 changes: 13 additions & 1 deletion packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,21 @@ export const useEarnAddLiquidityConfirmModal = ({
if (!selectPool) {
return null;
}
const currentPrice = `${selectPool.currentPrice}`;
if (selectPool.selectedFullRange) {
return {
currentPrice,
minPrice: "0.0000",
maxPrice: "∞",
priceLabel,
feeBoost: "x1",
estimatedAPR: "N/A",
};
}

const feeBoost = feeBoostRateByPrices(selectPool.minPrice, selectPool.maxPrice);
return {
currentPrice: `${selectPool.currentPrice}`,
currentPrice,
minPrice: numberToFormat(`${selectPool.minPrice || 0}`, 4),
maxPrice: numberToFormat(`${selectPool.maxPrice || 0}`, 4),
priceLabel,
Expand Down

0 comments on commit cd674d0

Please sign in to comment.