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

Show tickStates in graph and table

Browse Source
This commit is contained in:
Austin Chen 2022-06-08 08:45:09 -07:00
parent 8734a14e6b
commit 81064e67cf
2 changed files with 95 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
common/calculate-swap3.ts
View File

@ -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
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
// Add liquidity as we pass through the smaller tick
const minTickState = pool.tickStates[minTick] || {
tick: minTick,
liquidityNet: 0,
liquidityGross: 0,
}
minTickState.liquidityNet -= deltaL
minTickState.liquidityGross -= deltaL
minTickState.liquidityNet += 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)
}

110
web/pages/swap.tsx
View File

@ -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,40 +63,63 @@ function BalanceTable() {
function PoolTable(props: { pool: Swap3Pool }) {
const { pool } = props
return (
<Row className="gap-4">
<div>
<label>Liquidity: </label>
{pool.liquidity}
</div>
<div>
<label>Tick: </label>
{pool.tick}
</div>
<div>
<label>Pool YES: </label>
{yesShares(pool).toFixed(2)}
</div>
<div>
<label>Pool NO: </label>
{noShares(pool).toFixed(2)}
</div>
<div>
<label>Implied: </label>
{formatPercent(getSwap3Probability(pool))}
</div>
</Row>
<>
<Row className="gap-4">
<div>
<label>Implied: </label>
{formatPercent(getSwap3Probability(pool))}
</div>
<div>
<label>Liquidity: </label>
{pool.liquidity}
</div>
<div>
<label>Tick: </label>
{pool.tick}
</div>
<div>
<label>Pool YES: </label>
{yesShares(pool).toFixed(2)}
</div>
<div>
<label>Pool NO: </label>
{noShares(pool).toFixed(2)}
</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 = [
{ 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 },
]
const { pool } = props
let liquidity = 100 // TODO unhardcode
const points = [{ x: 0, y: liquidity }]
for (const tickState of sortedTickStates(pool)) {
points.push({ x: toProb(tickState.tick), y: liquidity })
liquidity += tickState.liquidityNet
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) =>
setPool((p) => ({
...p,
tick: inputPercentToTick(e),
}))
}
onChange={(e) => {
pool.tick = inputPercentToTick(e)
setPool({ ...pool })
}}
/>
<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>