Added a loading state and some copy-changes

web/components/confirmation-button.tsx

@@ -22,6 +22,7 @@ export function ConfirmationButton(props: {
   onSubmit?: () => void
   onOpenChanged?: (isOpen: boolean) => void
   onSubmitWithSuccess?: () => Promise<boolean>
+  disabled?: boolean
 }) {
   const {
     openModalBtn,
@@ -31,6 +32,7 @@ export function ConfirmationButton(props: {
     children,
     onOpenChanged,
     onSubmitWithSuccess,
+    disabled,
   } = props
 
   const [open, setOpen] = useState(false)
@@ -68,7 +70,15 @@ export function ConfirmationButton(props: {
           </Row>
         </Col>
       </Modal>
-      <div className={openModalBtn.className} onClick={() => updateOpen(true)}>
+      <div
+        className={openModalBtn.className}
+        onClick={() => {
+          if (disabled) {
+            return
+          }
+          updateOpen(true)
+        }}
+      >
         {openModalBtn.icon}
         {openModalBtn.label}
       </div>

web/components/contract/contract-card.tsx

@@ -35,7 +35,6 @@ import { getMappedValue } from 'common/pseudo-numeric'
 import { Tooltip } from '../tooltip'
 import { SiteLink } from '../site-link'
 import { ProbChange } from './prob-change-table'
-import { ContractReportResolution } from './contract-report-resolution'
 
 export function ContractCard(props: {
   contract: Contract

web/components/contract/contract-report-resolution.tsx

@@ -7,23 +7,27 @@ import { ConfirmationButton } from '../confirmation-button'
 import { Row } from '../layout/row'
 import { FlagIcon } from '@heroicons/react/solid'
 import { buildArray } from 'common/lib/util/array'
+import { useState } from 'react'
 
 export function ContractReportResolution(props: { contract: Contract }) {
   const { contract } = props
   const user = useUser()
+  const [reporting, setReporting] = useState(false)
   if (!user) {
     return <></>
   }
   const userReported = contract.flaggedByUsernames?.includes(user.id)
 
   const onSubmit = async () => {
-    if (!user) {
+    if (!user || userReported) {
       return true
     }
+    setReporting(true)
 
     await updateContract(contract.id, {
       flaggedByUsernames: buildArray(contract.flaggedByUsernames, user.id),
     })
+    setReporting(false)
     return true
   }
 
@@ -33,12 +37,18 @@ export function ContractReportResolution(props: { contract: Contract }) {
   )
 
   return (
-    <Tooltip text="Flag this market as incorrectly resolved">
+    <Tooltip
+      text={
+        userReported
+          ? "You've reported this market as incorrectly resolved"
+          : 'Flag this market as incorrectly resolved '
+      }
+    >
       <ConfirmationButton
         openModalBtn={{
           label: '',
           icon: <FlagIcon className="h-5 w-5" />,
-          className: flagClass,
+          className: clsx(flagClass, reporting && 'btn-disabled loading'),
         }}
         cancelBtn={{
           label: 'Cancel',
@@ -49,10 +59,18 @@ export function ContractReportResolution(props: { contract: Contract }) {
           className: 'btn-secondary',
         }}
         onSubmitWithSuccess={onSubmit}
+        disabled={userReported}
       >
-        <Row className="items-center text-xl">
-          Flag this market as incorrectly resolved
-        </Row>
+        <div>
+          <Row className="items-center text-xl">
+            Flag this market as incorrectly resolved
+          </Row>
+          <Row className="text-sm text-gray-500">
+            Report that the market was not resolved according to its resolution
+            criteria. If a creator's markets get flagged too often, they'll be
+            marked as unreliable.
+          </Row>
+        </div>
       </ConfirmationButton>
     </Tooltip>
   )