Skip to content

Commit

Permalink
feat: Add quick input to roi calculator
Browse files Browse the repository at this point in the history
  • Loading branch information
@memoyil
memoyil committed May 26, 2023
1 parent fdc7634 commit 6701d97
Show file tree
Hide file tree
Showing 3 changed files with 174 additions and 37 deletions.
31 changes: 2 additions & 29 deletions packages/uikit/src/components/LiquidityChartRangeInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, ZoomLevels> = {
[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;
Expand Down Expand Up @@ -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}
/>
</ChartWrapper>
Expand Down
101 changes: 101 additions & 0 deletions packages/uikit/src/components/LiquidityChartRangeInput/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { BigintIsh } from "@pancakeswap/sdk";
import { FeeAmount } from "@pancakeswap/v3-sdk";

export interface ChartEntry {
activeLiquidity: number;
Expand Down Expand Up @@ -79,3 +80,103 @@ export interface TickProcessed {
liquidityNet: bigint;
price0: string;
}

export const LIQUIDITY_ZOOM_LEVELS: Record<FeeAmount, ZoomLevels> = {
[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, { [percentage: number]: ZoomLevels }> = {
[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],
},
};
79 changes: 71 additions & 8 deletions packages/uikit/src/widgets/RoiCalculator/RoiCalculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<Currency, Currency>;
Expand Down Expand Up @@ -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<number>();

const { currencyA, currencyB, balanceA, balanceB, currencyAUsdPrice, currencyBUsdPrice } = useMemo(
() =>
Expand Down Expand Up @@ -354,6 +360,26 @@ export function RoiCalculator({
</Section>
) : 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 = (
<Section title={t("Set price range")}>
<LiquidityChartRangeInput
Expand Down Expand Up @@ -386,14 +412,51 @@ export function RoiCalculator({
feeAmount={feeAmount}
ticksAtLimit={priceRange?.ticksAtLimit || {}}
/>
<Button
onClick={priceRange?.toggleFullRange}
variant={priceRange?.fullRange ? "primary" : "secondary"}
mb="16px"
scale="sm"
>
{t("Full Range")}
</Button>
<Flex justifyContent="space-between" width="100%" style={{ gap: "8px" }}>
{feeAmount &&
LIQUIDITY_QUICK_ACTION_CONFIGS[feeAmount] &&
Object.entries<ZoomLevels>(LIQUIDITY_QUICK_ACTION_CONFIGS[feeAmount])
?.sort(([a], [b]) => +a - +b)
.map(([quickAction, zoomLevel]) => {
return (
<Button
width="100%"
key={`quickActions${quickAction}`}
onClick={() => {
if (priceRange?.fullRange) {
priceRange?.toggleFullRange();
}
if (+quickAction === activeQuickAction) {
handleRefresh(LIQUIDITY_ZOOM_LEVELS[feeAmount]);
return;
}
handleRefresh(zoomLevel);

setActiveQuickAction(+quickAction);
}}
variant={+quickAction === activeQuickAction ? "primary" : "secondary"}
scale="sm"
>
{quickAction}%
</Button>
);
})}
<Button
width="200%"
onClick={() => {
priceRange?.toggleFullRange();
if (activeQuickAction === 100) {
setActiveQuickAction(undefined);
} else {
setActiveQuickAction(100);
}
}}
variant={activeQuickAction === 100 ? "primary" : "secondary"}
scale="sm"
>
{t("Full Range")}
</Button>
</Flex>
</DynamicSection>
</Section>
);
Expand Down

0 comments on commit 6701d97

Please sign in to comment.