Extract out liquidity component

web/pages/swap.tsx

@@ -134,24 +134,14 @@ function Graph(props: { pool: Swap3Pool; previewMarker?: number }) {
   )
 }
 
-export default function Swap() {
+function LiquidityPanel(props: {
-  // Set up an initial pool with 100 liquidity from 0% to 100%
+  pool: Swap3Pool
-  // TODO: Not sure why maxTick of 2**23 breaks it, but 2**20 is okay...
+  setPool: (pool: Swap3Pool) => void
-  let INIT_POOL: Swap3Pool = {
+}) {
-    liquidity: 0,
+  const { pool, setPool } = props
-    tick: fromProb(0.3),
-    tickStates: [],
-  }
-  INIT_POOL = addPosition(INIT_POOL, -(2 ** 23), 2 ** 20, 100)
-  INIT_POOL = addPosition(INIT_POOL, fromProb(0.32), fromProb(0.35), 100)
-  INIT_POOL = grossLiquidity(INIT_POOL)
-
-  const [pool, setPool] = useState(INIT_POOL)
-
   const [minTick, setMinTick] = useState(0)
   const [maxTick, setMaxTick] = useState(0)
   const [deltaL, setDeltaL] = useState(100)
-  const [buyAmount, setBuyAmount] = useState(0)
 
   const { requiredN, requiredY } = calculateLPCost(
     pool.tick,
@@ -160,28 +150,7 @@ export default function Swap() {
     deltaL
   )
 
-  const { newPoolTick, yesPurchased } = buyYes(pool, buyAmount)
-
   return (
-    <Col className="mx-auto max-w-2xl gap-10 p-4">
-      {/* <BalanceTable /> */}
-      <PoolTable pool={pool} />
-      <Graph
-        pool={pool}
-        previewMarker={
-          newPoolTick === pool.tick ? undefined : toProb(newPoolTick)
-        }
-      />
-      <input
-        className="input"
-        placeholder="Current%"
-        type="number"
-        onChange={(e) => {
-          pool.tick = inputPercentToTick(e)
-          setPool({ ...pool })
-        }}
-      />
-
     <Col>
       <h2 className="my-2 text-xl">Add liquidity</h2>
       {/* <input className="input" placeholder="Amount" type="number" /> */}
@@ -215,7 +184,7 @@ export default function Swap() {
       <button
         className="btn"
         onClick={() => {
-            addPosition(pool, minTick, maxTick, 100)
+          addPosition(pool, minTick, maxTick, deltaL)
           grossLiquidity(pool)
           setPool({ ...pool })
         }}
@@ -223,6 +192,47 @@ export default function Swap() {
         Create pool
       </button>
     </Col>
+  )
+}
+
+export default function Swap() {
+  // Set up an initial pool with 100 liquidity from 0% to 100%
+  // TODO: Not sure why maxTick of 2**23 breaks it, but 2**20 is okay...
+  let INIT_POOL: Swap3Pool = {
+    liquidity: 0,
+    tick: fromProb(0.3),
+    tickStates: [],
+  }
+  INIT_POOL = addPosition(INIT_POOL, -(2 ** 23), 2 ** 20, 100)
+  INIT_POOL = addPosition(INIT_POOL, fromProb(0.32), fromProb(0.35), 100)
+  INIT_POOL = grossLiquidity(INIT_POOL)
+
+  const [pool, setPool] = useState(INIT_POOL)
+  const [buyAmount, setBuyAmount] = useState(0)
+
+  const { newPoolTick, yesPurchased } = buyYes(pool, buyAmount)
+
+  return (
+    <Col className="mx-auto max-w-2xl gap-10 p-4">
+      {/* <BalanceTable /> */}
+      <PoolTable pool={pool} />
+      <Graph
+        pool={pool}
+        previewMarker={
+          newPoolTick === pool.tick ? undefined : toProb(newPoolTick)
+        }
+      />
+      <input
+        className="input"
+        placeholder="Current%"
+        type="number"
+        onChange={(e) => {
+          pool.tick = inputPercentToTick(e)
+          setPool({ ...pool })
+        }}
+      />
+
+      <LiquidityPanel pool={pool} setPool={setPool} />
 
       <Col>
         <h2 className="my-2 text-xl">Limit Order</h2>