import {
addPosition,
calculateLPCost,
fromProb,
getSwap3Probability,
noShares,
sortedTickStates,
Swap3Pool,
toProb,
yesShares,
} 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'
const users = {
alice: {
M: 100,
YES: 0,
NO: 0,
},
bob: {
M: 200,
YES: 0,
NO: 0,
},
kipply: {
M: 300,
YES: 0,
NO: 0,
},
}
function BalanceTable() {
/* Display all users current M, YES, and NO in a table */
return (
User |
M |
YES |
NO |
{Object.keys(users).map((user) => (
{user} |
{users[user].M} |
{users[user].YES} |
{users[user].NO} |
))}
)
}
/* Show the values in pool */
function PoolTable(props: { pool: Swap3Pool }) {
const { pool } = props
return (
<>
{formatPercent(getSwap3Probability(pool))}
{pool.liquidity}
{pool.tick}
{yesShares(pool).toFixed(2)}
{noShares(pool).toFixed(2)}
{/* Render each tickState as another row in a table */}
Tick |
Prob |
Net Liquidity |
{sortedTickStates(pool).map((tickState, i) => (
{tickState.tick} |
{formatPercent(toProb(tickState.tick))}
|
{tickState.liquidityNet} |
))}
>
)
}
function Graph(props: { pool: Swap3Pool }) {
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
}
export default function Swap() {
const [pool, setPool] = useState({
liquidity: 100,
tick: fromProb(0.3),
tickStates: [],
})
const [minTick, setMinTick] = useState(0)
const [maxTick, setMaxTick] = useState(0)
const { requiredN, requiredY } = calculateLPCost(
pool.tick,
minTick,
maxTick,
100 // deltaL
)
return (
{/* */}
{
pool.tick = inputPercentToTick(e)
setPool({ ...pool })
}}
/>
Alice: Add liquidity
{/* */}
setMinTick(inputPercentToTick(e))}
/>
Min Tick: {minTick}
setMaxTick(inputPercentToTick(e))}
/>
Max Tick: {maxTick}
Y required: {requiredY}
N required: {requiredN}
{' '}
Bob: Buy Tokens
{/* */}
)
}
function inputPercentToTick(event: React.ChangeEvent) {
return fromProb(parseFloat(event.target.value) / 100)
}