open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract out liquidity component

Browse Source
This commit is contained in:
Austin Chen 2022-06-10 09:22:40 -07:00
parent 3898ec95ed
commit 6ac29106f2
1 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
web/pages/swap.tsx
View File

@ -134,24 +134,14 @@ function Graph(props: { pool: Swap3Pool; previewMarker?: number }) {
)
}
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)
function LiquidityPanel(props: {
pool: Swap3Pool
setPool: (pool: Swap3Pool) => void
}) {
const { pool, setPool } = props
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>