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>
+  )
+}

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>

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>
   )

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