2022-06-08 18:00:49 +00:00
|
|
|
import clsx from 'clsx'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
|
|
|
|
import { CPMMContract } from 'common/contract'
|
|
|
|
import { formatMoney } from 'common/util/format'
|
|
|
|
import { useUser } from 'web/hooks/use-user'
|
|
|
|
import { addLiquidity, withdrawLiquidity } from 'web/lib/firebase/fn-call'
|
|
|
|
import { AmountInput } from './amount-input'
|
|
|
|
import { Row } from './layout/row'
|
|
|
|
import { useUserLiquidity } from 'web/hooks/use-liquidity'
|
|
|
|
import { Tabs } from './layout/tabs'
|
|
|
|
import { NoLabel, YesLabel } from './outcome-label'
|
|
|
|
import { Col } from './layout/col'
|
2022-06-12 23:14:15 +00:00
|
|
|
import { InfoTooltip } from './info-tooltip'
|
2022-06-08 18:00:49 +00:00
|
|
|
|
|
|
|
export function LiquidityPanel(props: { contract: CPMMContract }) {
|
|
|
|
const { contract } = props
|
|
|
|
|
|
|
|
const user = useUser()
|
|
|
|
const lpShares = useUserLiquidity(contract, user?.id ?? '')
|
|
|
|
|
|
|
|
const [showWithdrawal, setShowWithdrawal] = useState(false)
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!showWithdrawal && lpShares && lpShares.YES && lpShares.NO)
|
|
|
|
setShowWithdrawal(true)
|
|
|
|
}, [showWithdrawal, lpShares])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Tabs
|
|
|
|
tabs={[
|
|
|
|
{
|
2022-06-12 23:14:15 +00:00
|
|
|
title: 'Subsidize',
|
2022-06-08 18:00:49 +00:00
|
|
|
content: <AddLiquidityPanel contract={contract} />,
|
|
|
|
},
|
|
|
|
...(showWithdrawal
|
|
|
|
? [
|
|
|
|
{
|
2022-06-12 23:14:15 +00:00
|
|
|
title: 'Withdraw',
|
2022-06-08 18:00:49 +00:00
|
|
|
content: (
|
|
|
|
<WithdrawLiquidityPanel
|
|
|
|
contract={contract}
|
|
|
|
lpShares={lpShares as { YES: number; NO: number }}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
2022-06-12 23:14:15 +00:00
|
|
|
{
|
|
|
|
title: 'Pool',
|
|
|
|
content: <ViewLiquidityPanel contract={contract} />,
|
|
|
|
},
|
2022-06-08 18:00:49 +00:00
|
|
|
]}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function AddLiquidityPanel(props: { contract: CPMMContract }) {
|
|
|
|
const { contract } = props
|
|
|
|
const { id: contractId } = contract
|
|
|
|
|
|
|
|
const user = useUser()
|
|
|
|
|
|
|
|
const [amount, setAmount] = useState<number | undefined>(undefined)
|
|
|
|
const [error, setError] = useState<string | undefined>(undefined)
|
|
|
|
const [isSuccess, setIsSuccess] = useState(false)
|
|
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
|
|
|
|
const onAmountChange = (amount: number | undefined) => {
|
|
|
|
setIsSuccess(false)
|
|
|
|
setAmount(amount)
|
|
|
|
|
|
|
|
// Check for errors.
|
|
|
|
if (amount !== undefined) {
|
|
|
|
if (user && user.balance < amount) {
|
|
|
|
setError('Insufficient balance')
|
|
|
|
} else if (amount < 1) {
|
|
|
|
setError('Minimum amount: ' + formatMoney(1))
|
|
|
|
} else {
|
|
|
|
setError(undefined)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const submit = () => {
|
|
|
|
if (!amount) return
|
|
|
|
|
|
|
|
setIsLoading(true)
|
|
|
|
setIsSuccess(false)
|
|
|
|
|
|
|
|
addLiquidity({ amount, contractId })
|
|
|
|
.then((r) => {
|
|
|
|
if (r.status === 'success') {
|
|
|
|
setIsSuccess(true)
|
|
|
|
setError(undefined)
|
|
|
|
setIsLoading(false)
|
|
|
|
} else {
|
|
|
|
setError('Server error')
|
|
|
|
}
|
|
|
|
})
|
2022-06-13 03:55:48 +00:00
|
|
|
.catch((e) => setError('Server error'))
|
2022-06-08 18:00:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2022-06-12 23:14:15 +00:00
|
|
|
<div className="align-center mb-4 text-gray-500">
|
|
|
|
Subsidize this market by adding M$ to the liquidity pool.{' '}
|
2022-06-13 02:40:02 +00:00
|
|
|
<InfoTooltip text="The greater the M$ subsidy, the greater the incentive for traders to participate, the more accurate the market will be." />
|
2022-06-08 18:00:49 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<Row>
|
|
|
|
<AmountInput
|
|
|
|
amount={amount}
|
|
|
|
onChange={onAmountChange}
|
|
|
|
label="M$"
|
|
|
|
error={error}
|
|
|
|
disabled={isLoading}
|
|
|
|
/>
|
|
|
|
<button
|
|
|
|
className={clsx('btn btn-primary ml-2', isLoading && 'btn-disabled')}
|
|
|
|
onClick={submit}
|
|
|
|
disabled={isLoading}
|
|
|
|
>
|
|
|
|
Add
|
|
|
|
</button>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
{isSuccess && amount && (
|
|
|
|
<div>Success! Added {formatMoney(amount)} in liquidity.</div>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{isLoading && <div>Processing...</div>}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-06-12 23:14:15 +00:00
|
|
|
function ViewLiquidityPanel(props: { contract: CPMMContract }) {
|
|
|
|
const { contract } = props
|
|
|
|
const { id: contractId, pool } = contract
|
|
|
|
const { YES: yesShares, NO: noShares } = pool
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Col className="mb-4">
|
|
|
|
<div className="mb-4 text-gray-500">
|
|
|
|
The liquidity pool for this market currently contains:
|
|
|
|
</div>
|
|
|
|
<span>
|
|
|
|
{yesShares.toFixed(2)} <YesLabel /> shares
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span>
|
|
|
|
{noShares.toFixed(2)} <NoLabel /> shares
|
|
|
|
</span>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-06-08 18:00:49 +00:00
|
|
|
function WithdrawLiquidityPanel(props: {
|
|
|
|
contract: CPMMContract
|
|
|
|
lpShares: { YES: number; NO: number }
|
|
|
|
}) {
|
|
|
|
const { contract, lpShares } = props
|
|
|
|
const { YES: yesShares, NO: noShares } = lpShares
|
|
|
|
|
2022-06-13 03:55:48 +00:00
|
|
|
const [error, setError] = useState<string | undefined>(undefined)
|
2022-06-08 18:00:49 +00:00
|
|
|
const [isSuccess, setIsSuccess] = useState(false)
|
|
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
|
|
|
|
const submit = () => {
|
|
|
|
setIsLoading(true)
|
|
|
|
setIsSuccess(false)
|
|
|
|
|
|
|
|
withdrawLiquidity({ contractId: contract.id })
|
2022-06-13 03:55:48 +00:00
|
|
|
.then((r) => {
|
2022-06-08 18:00:49 +00:00
|
|
|
setIsSuccess(true)
|
|
|
|
setError(undefined)
|
|
|
|
setIsLoading(false)
|
|
|
|
})
|
2022-06-13 03:55:48 +00:00
|
|
|
.catch((e) => setError('Server error'))
|
2022-06-08 18:00:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (isSuccess)
|
|
|
|
return (
|
|
|
|
<div className="text-gray-500">
|
|
|
|
Success! Your liquidity was withdrawn.
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
|
|
|
if (!yesShares && !noShares)
|
|
|
|
return (
|
|
|
|
<div className="text-gray-500">
|
|
|
|
You do not have any liquidity positions to withdraw.
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Col>
|
|
|
|
<div className="mb-4 text-gray-500">
|
|
|
|
Your liquidity position is currently:
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<span>
|
|
|
|
{yesShares.toFixed(2)} <YesLabel /> shares
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span>
|
|
|
|
{noShares.toFixed(2)} <NoLabel /> shares
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<Row className="mt-4 mb-2">
|
|
|
|
<button
|
|
|
|
className={clsx(
|
|
|
|
'btn btn-outline btn-sm ml-2',
|
|
|
|
isLoading && 'btn-disabled'
|
|
|
|
)}
|
|
|
|
onClick={submit}
|
|
|
|
disabled={isLoading}
|
|
|
|
>
|
|
|
|
Withdraw
|
|
|
|
</button>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
{isLoading && <div>Processing...</div>}
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|