From 2fdb962a14bfb60987bd201dbc4d397cca692d3c Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 8 Jun 2022 08:57:15 -0700
Subject: [PATCH] Show current prob on graph

---
 web/components/contract/liquidity-graph.tsx | 17 +++++++++++++++--
 web/pages/swap.tsx                          |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

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)}`,
+                },
+              ]
+            : []
+        }
       />
     </div>
   )
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 <LiquidityGraph points={points} />
+  return <LiquidityGraph points={points} marker={toProb(pool.tick)} />
 }
 
 export default function Swap() {