Graph the amount of liquidity available

web/components/contract/liquidity-graph.tsx

@@ -0,0 +1,101 @@
+import { DatumValue } from '@nivo/core'
+import { Point, ResponsiveLine } from '@nivo/line'
+import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
+import { memo } from 'react'
+import { range } from 'lodash'
+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'
+
+export type GraphPoint = {
+  // A probability between 0 and 1
+  x: number
+  // Amount of liquidity
+  y: number
+}
+
+export const LiquidityGraph = memo(function NumericGraph(props: {
+  min?: 0
+  max?: 1
+  points: GraphPoint[]
+  height?: number
+}) {
+  const { height, min, max, points } = props
+
+  // Really maxLiquidity
+  const maxLiquidity = 500
+  const data = [{ id: 'Probability', data: points, color: NUMERIC_GRAPH_COLOR }]
+
+  const yTickValues = [
+    0,
+    0.25 * maxLiquidity,
+    0.5 * maxLiquidity,
+    0.75 * maxLiquidity,
+    maxLiquidity,
+  ]
+
+  const { width } = useWindowSize()
+
+  const numXTickValues = !width || width < 800 ? 2 : 5
+
+  return (
+    <div
+      className="w-full overflow-hidden"
+      style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }}
+    >
+      <ResponsiveLine
+        data={data}
+        yScale={{ min: 0, max: maxLiquidity, type: 'linear' }}
+        yFormat={formatLiquidity}
+        axisLeft={{
+          tickValues: yTickValues,
+          format: formatLiquidity,
+        }}
+        xScale={{
+          type: 'linear',
+          min: min,
+          max: max,
+        }}
+        xFormat={(d) => `${formatLargeNumber(+d, 3)}`}
+        axisBottom={{
+          tickValues: numXTickValues,
+          format: (d) => `${formatLargeNumber(+d, 3)}`,
+        }}
+        colors={{ datum: 'color' }}
+        pointSize={0}
+        enableSlices="x"
+        sliceTooltip={({ slice }) => {
+          const point = slice.points[0]
+          return <Tooltip point={point} />
+        }}
+        enableGridX={!!width && width >= 800}
+        enableArea
+        margin={{ top: 20, right: 28, bottom: 22, left: 50 }}
+      />
+    </div>
+  )
+})
+
+function formatLiquidity(y: DatumValue) {
+  const p = Math.round(+y * 100) / 100
+  return `${p}L`
+}
+
+function Tooltip(props: { point: Point }) {
+  const { point } = props
+  return (
+    <Col className="border border-gray-300 bg-white py-2 px-3">
+      <div
+        className="pb-1"
+        style={{
+          color: point.serieColor,
+        }}
+      >
+        <strong>{point.serieId}</strong> {point.data.yFormatted}
+      </div>
+      <div>{formatLargeNumber(+point.data.x)}</div>
+    </Col>
+  )
+}

web/pages/swap.tsx

@@ -6,6 +6,7 @@ import {
 } from 'common/calculate-swap3'
 import { formatPercent } from 'common/util/format'
 import { useState } from 'react'
+import { LiquidityGraph } from 'web/components/contract/liquidity-graph'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 
@@ -86,12 +87,24 @@ function PoolTable(props: { pool: Swap3Pool }) {
   )
 }
 
+function Graph(props: { pool: Swap3Pool }) {
+  const points = [
+    { x: 0, y: 100 },
+    { x: 0.2, y: 100 },
+    { x: 0.2, y: 200 },
+    { x: 0.33, y: 200 },
+    { x: 0.33, y: 100 },
+    { x: 1, y: 100 },
+  ]
+  return <LiquidityGraph points={points} />
+}
+
 export default function Swap() {
   const [pool, setPool] = useState({
     liquidity: 100,
     sqrtRatio: 2,
     tick: fromProb(0.3),
-    ticks: [],
+    tickStates: [],
   })
 
   const [minTick, setMinTick] = useState(0)
@@ -106,8 +119,9 @@ export default function Swap() {
 
   return (
     <Col className="mx-auto max-w-2xl gap-20 p-4">
-      <BalanceTable />
+      {/* <BalanceTable /> */}
       <PoolTable pool={pool} />
+      <Graph pool={pool} />
       <input
         className="input"
         placeholder="Current Prob"