Show tickStates in graph and table

common/calculate-swap3.ts

@@ -105,7 +105,8 @@ export function calculateLPCost(
 }
 
 // TODO: Untested
-function addPosition(
+// Currently, this mutates the pool. Should it return a new object instead?
+export function addPosition(
   pool: Swap3Pool,
   minTick: number,
   maxTick: number,
@@ -119,34 +120,42 @@ function addPosition(
   )
   console.log(`Deducting required N: ${requiredN} and required Y: ${requiredY}`)
 
-  // Add liquidity as we pass through the larger tick
+  // Add liquidity as we pass through the smaller tick
-  const maxTickState = pool.tickStates[maxTick] || {
-    tick: maxTick,
-    liquidityNet: 0,
-    liquidityGross: 0,
-  }
-
-  maxTickState.liquidityNet += deltaL
-  maxTickState.liquidityGross += deltaL
-
-  // And remove it as we pass through the lower one
   const minTickState = pool.tickStates[minTick] || {
     tick: minTick,
     liquidityNet: 0,
     liquidityGross: 0,
   }
 
-  minTickState.liquidityNet -= deltaL
+  minTickState.liquidityNet += deltaL
-  minTickState.liquidityGross -= deltaL
+  minTickState.liquidityGross += deltaL
+  pool.tickStates[minTick] = minTickState
+
+  // And remove it as we pass through the larger one
+  const maxTickState = pool.tickStates[maxTick] || {
+    tick: maxTick,
+    liquidityNet: 0,
+    liquidityGross: 0,
+  }
+
+  maxTickState.liquidityNet -= deltaL
+  maxTickState.liquidityGross -= deltaL
+  pool.tickStates[maxTick] = maxTickState
 
   // TODO: add deltaL to liquidityGross of tickStates between minTick and maxTick
+
+  return pool
+}
+
+export function sortedTickStates(pool: Swap3Pool) {
+  return Object.values(pool.tickStates).sort((a, b) => a.tick - b.tick)
 }
 
 function toRatio(tick: number) {
   return 1.0001 ** tick
 }
 
-function toProb(tick: number) {
+export function toProb(tick: number) {
   const ratio = toRatio(tick)
   return ratio / (ratio + 1)
 }

web/pages/swap.tsx

@@ -1,9 +1,12 @@
 import {
+  addPosition,
   calculateLPCost,
   fromProb,
   getSwap3Probability,
   noShares,
+  sortedTickStates,
   Swap3Pool,
+  toProb,
   yesShares,
 } from 'common/calculate-swap3'
 import { formatPercent } from 'common/util/format'
@@ -60,7 +63,13 @@ function BalanceTable() {
 function PoolTable(props: { pool: Swap3Pool }) {
   const { pool } = props
   return (
+    <>
       <Row className="gap-4">
+        <div>
+          <label>Implied: </label>
+          {formatPercent(getSwap3Probability(pool))}
+        </div>
+
         <div>
           <label>Liquidity: </label>
           {pool.liquidity}
@@ -77,23 +86,40 @@ function PoolTable(props: { pool: Swap3Pool }) {
           <label>Pool NO: </label>
           {noShares(pool).toFixed(2)}
         </div>
-      <div>
-        <label>Implied: </label>
-        {formatPercent(getSwap3Probability(pool))}
-      </div>
       </Row>
+      {/* Render each tickState as another row in a table */}
+      <table className="w-full">
+        <thead>
+          <tr>
+            <th className="px-4 py-2">Tick</th>
+            <th className="px-4 py-2">Prob</th>
+            <th className="px-4 py-2">Net Liquidity</th>
+          </tr>
+        </thead>
+        {sortedTickStates(pool).map((tickState, i) => (
+          <tr key={i}>
+            <td className="px-4 py-2">{tickState.tick}</td>
+            <td className="px-4 py-2">
+              {formatPercent(toProb(tickState.tick))}
+            </td>
+            <td className="px-4 py-2">{tickState.liquidityNet}</td>
+          </tr>
+        ))}
+      </table>
+    </>
   )
 }
 
 function Graph(props: { pool: Swap3Pool }) {
-  const points = [
+  const { pool } = props
-    { x: 0, y: 100 },
+  let liquidity = 100 // TODO unhardcode
-    { x: 0.2, y: 100 },
+  const points = [{ x: 0, y: liquidity }]
-    { x: 0.2, y: 200 },
+  for (const tickState of sortedTickStates(pool)) {
-    { x: 0.33, y: 200 },
+    points.push({ x: toProb(tickState.tick), y: liquidity })
-    { x: 0.33, y: 100 },
+    liquidity += tickState.liquidityNet
-    { x: 1, y: 100 },
+    points.push({ x: toProb(tickState.tick), y: liquidity })
-  ]
+  }
+  points.push({ x: 1, y: liquidity })
   return <LiquidityGraph points={points} />
 }
 
@@ -115,7 +141,7 @@ export default function Swap() {
   )
 
   return (
-    <Col className="mx-auto max-w-2xl gap-20 p-4">
+    <Col className="mx-auto max-w-2xl gap-10 p-4">
       {/* <BalanceTable /> */}
       <PoolTable pool={pool} />
       <Graph pool={pool} />
@@ -123,17 +149,15 @@ export default function Swap() {
         className="input"
         placeholder="Current%"
         type="number"
-        onChange={(e) =>
+        onChange={(e) => {
-          setPool((p) => ({
+          pool.tick = inputPercentToTick(e)
-            ...p,
+          setPool({ ...pool })
-            tick: inputPercentToTick(e),
+        }}
-          }))
-        }
       />
 
       <Col>
         Alice: Add liquidity
-        <input className="input" placeholder="Amount" type="number" />
+        {/* <input className="input" placeholder="Amount" type="number" /> */}
         <input
           className="input"
           placeholder="Min%"
@@ -152,7 +176,15 @@ export default function Swap() {
           <div>Y required: {requiredY}</div>
           <div>N required: {requiredN}</div>{' '}
         </Row>
-        <button className="btn">Create pool</button>
+        <button
+          className="btn"
+          onClick={() => {
+            addPosition(pool, minTick, maxTick, 100)
+            setPool({ ...pool })
+          }}
+        >
+          Create pool
+        </button>
       </Col>
 
       <Col>