diff --git a/web/components/contract/add-liquidity-button.tsx b/web/components/contract/add-liquidity-button.tsx new file mode 100644 index 00000000..1288206f --- /dev/null +++ b/web/components/contract/add-liquidity-button.tsx @@ -0,0 +1,36 @@ +import { useState } from 'react' +import clsx from 'clsx' + +import { buttonClass } from 'web/components/button' +import { CPMMContract } from 'common/contract' +import { LiquidityModal } from './liquidity-modal' + +export function AddLiquidityButton(props: { + contract: CPMMContract + className?: string +}) { + const { contract, className } = props + + const [open, setOpen] = useState(false) + + const disabled = + contract.isResolved || (contract.closeTime ?? Infinity) < Date.now() + + if (disabled) return <></> + + return ( + <a + className={clsx( + buttonClass('2xs', 'override'), + 'cursor-pointer', + 'gap-1 border-2 border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white', + className + )} + onClick={() => setOpen(true)} + target="_blank" + > + <div>💧 Add liquidity</div> + <LiquidityModal contract={contract} isOpen={open} setOpen={setOpen} /> + </a> + ) +} diff --git a/web/components/contract/contract-info-dialog.tsx b/web/components/contract/contract-info-dialog.tsx index e1c36901..a41be451 100644 --- a/web/components/contract/contract-info-dialog.tsx +++ b/web/components/contract/contract-info-dialog.tsx @@ -20,6 +20,7 @@ import { DuplicateContractButton } from '../duplicate-contract-button' import { Row } from '../layout/row' import { BETTORS, User } from 'common/user' import { Button } from '../button' +import { AddLiquidityButton } from './add-liquidity-button' export const contractDetailsButtonClassName = 'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500' @@ -241,6 +242,9 @@ export function ContractInfoDialog(props: { </table> <Row className="flex-wrap"> + {mechanism === 'cpmm-1' && ( + <AddLiquidityButton contract={contract} className="mr-2" /> + )} <DuplicateContractButton contract={contract} /> </Row> </Col> diff --git a/web/components/contract/extra-contract-actions-row.tsx b/web/components/contract/extra-contract-actions-row.tsx index d81132b9..0c77c666 100644 --- a/web/components/contract/extra-contract-actions-row.tsx +++ b/web/components/contract/extra-contract-actions-row.tsx @@ -9,7 +9,6 @@ import { FollowMarketButton } from 'web/components/follow-market-button' import { LikeMarketButton } from 'web/components/contract/like-market-button' import { ContractInfoDialog } from 'web/components/contract/contract-info-dialog' import { Tooltip } from '../tooltip' -import { LiquidityButton } from './liquidity-button' export function ExtraContractActionsRow(props: { contract: Contract }) { const { contract } = props @@ -19,10 +18,9 @@ export function ExtraContractActionsRow(props: { contract: Contract }) { return ( <Row> <FollowMarketButton contract={contract} user={user} /> - {contract.mechanism === 'cpmm-1' && ( - <LiquidityButton contract={contract} user={user} /> - )} + <LikeMarketButton contract={contract} user={user} /> + <Tooltip text="Share" placement="bottom" noTap noFade> <Button size="sm" @@ -39,6 +37,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) { /> </Button> </Tooltip> + <ContractInfoDialog contract={contract} user={user} /> </Row> ) diff --git a/web/components/contract/liquidity-modal.tsx b/web/components/contract/liquidity-modal.tsx index 1cc337cd..068377b2 100644 --- a/web/components/contract/liquidity-modal.tsx +++ b/web/components/contract/liquidity-modal.tsx @@ -23,7 +23,7 @@ export function LiquidityModal(props: { return ( <Modal open={isOpen} setOpen={setOpen} size="sm"> <Col className="gap-2.5 rounded bg-white p-4 pb-8 sm:gap-4"> - <Title className="!mt-0 !mb-2" text="💧 Add a subsidy" /> + <Title className="!mt-0 !mb-2" text="💧 Add liquidity" /> <div>Total liquidity subsidies: {formatMoney(totalLiquidity)}</div> <AddLiquidityPanel contract={contract as CPMMContract} /> @@ -91,7 +91,7 @@ function AddLiquidityPanel(props: { contract: CPMMContract }) { label="M$" error={error} disabled={isLoading} - inputClassName="w-16 mr-4" + inputClassName="w-28 mr-4" /> <Button size="md" color="blue" onClick={submit} disabled={isLoading}> Add