From 6701d97cdb9cff6a8a820dd42ccfcb321c1d1485 Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Mon, 22 May 2023 03:56:00 +0200 Subject: [PATCH] feat: Add quick input to roi calculator --- .../LiquidityChartRangeInput/index.tsx | 31 +----- .../LiquidityChartRangeInput/types.ts | 101 ++++++++++++++++++ .../widgets/RoiCalculator/RoiCalculator.tsx | 79 ++++++++++++-- 3 files changed, 174 insertions(+), 37 deletions(-) diff --git a/packages/uikit/src/components/LiquidityChartRangeInput/index.tsx b/packages/uikit/src/components/LiquidityChartRangeInput/index.tsx index 0d3d7bc5f2d1c1..7a15e1a1ba28a9 100644 --- a/packages/uikit/src/components/LiquidityChartRangeInput/index.tsx +++ b/packages/uikit/src/components/LiquidityChartRangeInput/index.tsx @@ -12,39 +12,12 @@ import { parseNumberToFraction, formatFraction } from "@pancakeswap/utils/format import { InfoBox } from "./InfoBox"; import { Chart } from "./Chart"; import { useDensityChartData } from "./hooks"; -import { ZoomLevels, Bound, TickDataRaw } from "./types"; +import { Bound, TickDataRaw, LIQUIDITY_ZOOM_LEVELS } from "./types"; import { AutoColumn } from "../Column"; import Loader from "./Loader"; import { ChartDisableIcon, LineGraphIcon } from "../Svg"; import { BunnyKnownPlaceholder } from "../BunnyKnownPlaceholder"; -const ZOOM_LEVELS: Record = { - [FeeAmount.LOWEST]: { - initialMin: 0.999, - initialMax: 1.001, - min: 0.00001, - max: 1.5, - }, - [FeeAmount.LOW]: { - initialMin: 0.999, - initialMax: 1.001, - min: 0.00001, - max: 1.5, - }, - [FeeAmount.MEDIUM]: { - initialMin: 0.5, - initialMax: 2, - min: 0.00001, - max: 20, - }, - [FeeAmount.HIGH]: { - initialMin: 0.5, - initialMax: 2, - min: 0.00001, - max: 20, - }, -}; - const ChartWrapper = styled.div` position: relative; @@ -198,7 +171,7 @@ export function LiquidityChartRangeInput({ brushLabels={brushLabelValue} brushDomain={brushDomain} onBrushDomainChange={onBrushDomainChangeEnded} - zoomLevels={ZOOM_LEVELS[feeAmount ?? FeeAmount.MEDIUM]} + zoomLevels={LIQUIDITY_ZOOM_LEVELS[feeAmount ?? FeeAmount.MEDIUM]} ticksAtLimit={ticksAtLimit} /> diff --git a/packages/uikit/src/components/LiquidityChartRangeInput/types.ts b/packages/uikit/src/components/LiquidityChartRangeInput/types.ts index 3055391940f4a0..97e57c87c90c26 100644 --- a/packages/uikit/src/components/LiquidityChartRangeInput/types.ts +++ b/packages/uikit/src/components/LiquidityChartRangeInput/types.ts @@ -1,4 +1,5 @@ import { BigintIsh } from "@pancakeswap/sdk"; +import { FeeAmount } from "@pancakeswap/v3-sdk"; export interface ChartEntry { activeLiquidity: number; @@ -79,3 +80,103 @@ export interface TickProcessed { liquidityNet: bigint; price0: string; } + +export const LIQUIDITY_ZOOM_LEVELS: Record = { + [FeeAmount.LOWEST]: { + initialMin: 0.999, + initialMax: 1.001, + min: 0.00001, + max: 1.5, + }, + [FeeAmount.LOW]: { + initialMin: 0.999, + initialMax: 1.001, + min: 0.00001, + max: 1.5, + }, + [FeeAmount.MEDIUM]: { + initialMin: 0.5, + initialMax: 2, + min: 0.00001, + max: 20, + }, + [FeeAmount.HIGH]: { + initialMin: 0.5, + initialMax: 2, + min: 0.00001, + max: 20, + }, +}; + +export const LIQUIDITY_QUICK_ACTION_CONFIGS: Record = { + [FeeAmount.LOWEST]: { + 0.1: { + initialMin: 0.999, + initialMax: 1.001, + min: 0.00001, + max: 1.5, + }, + 0.5: { + initialMin: 0.995, + initialMax: 1.005, + min: 0.00001, + max: 1.5, + }, + 1: { + initialMin: 0.99, + initialMax: 1.01, + min: 0.00001, + max: 1.5, + }, + }, + [FeeAmount.LOW]: { + 5: { + initialMin: 0.95, + initialMax: 1.054, + min: 0.00001, + max: 1.5, + }, + 10: { + initialMin: 0.9, + initialMax: 1.11, + min: 0.00001, + max: 1.5, + }, + 20: { + initialMin: 0.8, + initialMax: 1.25, + min: 0.00001, + max: 1.5, + }, + }, + [FeeAmount.MEDIUM]: { + 10: { + initialMin: 0.9, + initialMax: 1.11, + min: 0.00001, + max: 20, + }, + 20: { + initialMin: 0.8, + initialMax: 1.25, + min: 0.00001, + max: 20, + }, + 50: LIQUIDITY_ZOOM_LEVELS[FeeAmount.MEDIUM], + }, + [FeeAmount.HIGH]: { + 10: { + initialMin: 0.9, + initialMax: 1.1, + min: 0.00001, + max: 1.5, + }, + 20: { + initialMin: 0.8, + initialMax: 1.25, + min: 0.00001, + max: 20, + }, + 50: LIQUIDITY_ZOOM_LEVELS[FeeAmount.HIGH], + }, +}; diff --git a/packages/uikit/src/widgets/RoiCalculator/RoiCalculator.tsx b/packages/uikit/src/widgets/RoiCalculator/RoiCalculator.tsx index beae636c33bf66..4c584e5d56fb8e 100644 --- a/packages/uikit/src/widgets/RoiCalculator/RoiCalculator.tsx +++ b/packages/uikit/src/widgets/RoiCalculator/RoiCalculator.tsx @@ -26,6 +26,11 @@ import { TwoColumns } from "./TwoColumns"; import { PriceChart } from "./PriceChart"; import { PriceInvertSwitch } from "./PriceInvertSwitch"; import { FarmingRewardsToggle } from "./FarmingRewardsToggle"; +import { + LIQUIDITY_QUICK_ACTION_CONFIGS, + LIQUIDITY_ZOOM_LEVELS, + ZoomLevels, +} from "../../components/LiquidityChartRangeInput/types"; export interface RoiCalculatorPositionInfo { priceLower?: Price; @@ -120,6 +125,7 @@ export function RoiCalculator({ const [compoundIndex, setCompoundIndex] = useState(3); const [invertBase, setInvertBase] = useState(false); const onSwitchBaseCurrency = useCallback(() => setInvertBase(!invertBase), [invertBase]); + const [activeQuickAction, setActiveQuickAction] = useState(); const { currencyA, currencyB, balanceA, balanceB, currencyAUsdPrice, currencyBUsdPrice } = useMemo( () => @@ -354,6 +360,26 @@ export function RoiCalculator({ ) : null; + const handleRefresh = useCallback( + (zoomLevel?: ZoomLevels) => { + setActiveQuickAction(undefined); + const currentPrice = price ? parseFloat((invertPrice ? price.invert() : price).toSignificant(8)) : undefined; + if (currentPrice) { + priceRange?.onLeftRangeInput( + ( + currentPrice * (zoomLevel?.initialMin ?? LIQUIDITY_ZOOM_LEVELS[feeAmount ?? FeeAmount.MEDIUM].initialMin) + ).toString() + ); + priceRange?.onRightRangeInput( + ( + currentPrice * (zoomLevel?.initialMax ?? LIQUIDITY_ZOOM_LEVELS[feeAmount ?? FeeAmount.MEDIUM].initialMax) + ).toString() + ); + } + }, + [price, feeAmount, invertPrice, priceRange] + ); + const priceRangeSettings = (
- + + {feeAmount && + LIQUIDITY_QUICK_ACTION_CONFIGS[feeAmount] && + Object.entries(LIQUIDITY_QUICK_ACTION_CONFIGS[feeAmount]) + ?.sort(([a], [b]) => +a - +b) + .map(([quickAction, zoomLevel]) => { + return ( + + ); + })} + +
);