Show a preview of where the buy goes to

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<DatumValue>[] = []
+  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 (
     <div
       className="w-full overflow-hidden"
@@ -74,18 +92,7 @@ export const LiquidityGraph = memo(function NumericGraph(props: {
         enableGridX={!!width && width >= 800}
         enableArea
         margin={{ top: 20, right: 28, bottom: 22, left: 50 }}
-        markers={
+        markers={markers}
-          marker
-            ? [
-                {
-                  axis: 'x',
-                  value: marker,
-                  lineStyle: { stroke: '#000', strokeWidth: 2 },
-                  legend: `Implied: ${formatPercent(marker)}`,
-                },
-              ]
-            : []
-        }
       />
     </div>
   )

web/pages/swap.tsx

@@ -115,8 +115,8 @@ function PoolTable(props: { pool: Swap3Pool }) {
   )
 }
 
-function Graph(props: { pool: Swap3Pool }) {
+function Graph(props: { pool: Swap3Pool; previewMarker?: number }) {
-  const { pool } = props
+  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 <LiquidityGraph points={points} marker={toProb(pool.tick)} />
+  return (
+    <LiquidityGraph
+      points={points}
+      marker={toProb(pool.tick)}
+      previewMarker={previewMarker}
+    />
+  )
 }
 
 export default function Swap() {
@@ -159,7 +165,12 @@ export default function Swap() {
     <Col className="mx-auto max-w-2xl gap-10 p-4">
       {/* <BalanceTable /> */}
       <PoolTable pool={pool} />
-      <Graph pool={pool} />
+      <Graph
+        pool={pool}
+        previewMarker={
+          newPoolTick === pool.tick ? undefined : toProb(newPoolTick)
+        }
+      />
       <input
         className="input"
         placeholder="Current%"