diff --git a/web/components/contract/liquidity-graph.tsx b/web/components/contract/liquidity-graph.tsx
index d85585ab..0c69bf8b 100644
--- a/web/components/contract/liquidity-graph.tsx
+++ b/web/components/contract/liquidity-graph.tsx
@@ -7,7 +7,7 @@ import { getDpmOutcomeProbabilities } from '../../../common/calculate-dpm'
import { NumericContract } from '../../../common/contract'
import { useWindowSize } from '../../hooks/use-window-size'
import { Col } from '../layout/col'
-import { formatLargeNumber } from 'common/util/format'
+import { formatLargeNumber, formatPercent } from 'common/util/format'
export type GraphPoint = {
// A probability between 0 and 1
@@ -21,8 +21,9 @@ export const LiquidityGraph = memo(function NumericGraph(props: {
max?: 1
points: GraphPoint[]
height?: number
+ marker?: number // Value between min and max to highlight on x-axis
}) {
- const { height, min, max, points } = props
+ const { height, min, max, points, marker } = props
// Really maxLiquidity
const maxLiquidity = 500
@@ -73,6 +74,18 @@ export const LiquidityGraph = memo(function NumericGraph(props: {
enableGridX={!!width && width >= 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)}`,
+ },
+ ]
+ : []
+ }
/>
)
diff --git a/web/pages/swap.tsx b/web/pages/swap.tsx
index a188122c..f2207cf3 100644
--- a/web/pages/swap.tsx
+++ b/web/pages/swap.tsx
@@ -120,7 +120,7 @@ function Graph(props: { pool: Swap3Pool }) {
points.push({ x: toProb(tickState.tick), y: liquidity })
}
points.push({ x: 1, y: liquidity })
- return
+ return
}
export default function Swap() {