diff --git a/web/components/contract/liquidity-graph.tsx b/web/components/contract/liquidity-graph.tsx index 0c69bf8b..38f422ad 100644 --- a/web/components/contract/liquidity-graph.tsx +++ b/web/components/contract/liquidity-graph.tsx @@ -1,4 +1,4 @@ -import { DatumValue } from '@nivo/core' +import { CartesianMarkerProps, DatumValue } from '@nivo/core' import { Point, ResponsiveLine } from '@nivo/line' import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants' import { memo } from 'react' @@ -22,8 +22,9 @@ export const LiquidityGraph = memo(function NumericGraph(props: { points: GraphPoint[] height?: number marker?: number // Value between min and max to highlight on x-axis + previewMarker?: number }) { - const { height, min, max, points, marker } = props + const { height, min, max, points, marker, previewMarker } = props // Really maxLiquidity const maxLiquidity = 500 @@ -41,6 +42,23 @@ export const LiquidityGraph = memo(function NumericGraph(props: { const numXTickValues = !width || width < 800 ? 2 : 5 + const markers: CartesianMarkerProps[] = [] + if (marker) { + markers.push({ + axis: 'x', + value: marker, + lineStyle: { stroke: '#000', strokeWidth: 2 }, + legend: `Implied: ${formatPercent(marker)}`, + }) + } + if (previewMarker) { + markers.push({ + axis: 'x', + value: previewMarker, + lineStyle: { stroke: '#8888', strokeWidth: 2 }, + }) + } + return (
= 800} enableArea margin={{ top: 20, right: 28, bottom: 22, left: 50 }} - markers={ - marker - ? [ - { - axis: 'x', - value: marker, - lineStyle: { stroke: '#000', strokeWidth: 2 }, - legend: `Implied: ${formatPercent(marker)}`, - }, - ] - : [] - } + markers={markers} />
) diff --git a/web/pages/swap.tsx b/web/pages/swap.tsx index 6e5aeb7b..7d99e546 100644 --- a/web/pages/swap.tsx +++ b/web/pages/swap.tsx @@ -115,8 +115,8 @@ function PoolTable(props: { pool: Swap3Pool }) { ) } -function Graph(props: { pool: Swap3Pool }) { - const { pool } = props +function Graph(props: { pool: Swap3Pool; previewMarker?: number }) { + const { pool, previewMarker } = props const points = [] let lastGross = 0 for (const tickState of sortedTickStates(pool)) { @@ -125,7 +125,13 @@ function Graph(props: { pool: Swap3Pool }) { points.push({ x: toProb(tick), y: liquidityGross }) lastGross = liquidityGross } - return + return ( + + ) } export default function Swap() { @@ -159,7 +165,12 @@ export default function Swap() { {/* */} - +