Move delete button to resolved contracts

web/components/contracts-list.tsx

@@ -1,71 +1,8 @@
-import dayjs from 'dayjs'
-import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useUser } from '../hooks/use-user'
-import {
-  Contract,
-  deleteContract,
-  listContracts,
-} from '../lib/firebase/contracts'
+import { Contract, listContracts } from '../lib/firebase/contracts'
 import { ContractsGrid } from '../pages/markets'
 
-function ContractCard(props: { contract: Contract }) {
-  const { contract } = props
-
-  // only show delete button if there's not bets
-  const showDelete =
-    contract.pot.YES === contract.seedAmounts.YES &&
-    contract.pot.NO === contract.seedAmounts.NO
-
-  const [isDeleted, setIsDeleted] = useState(false) // temporary fix until we stream changes
-
-  if (isDeleted) return <></>
-
-  return (
-    <li>
-      <Link href={`/contract/${contract.id}`}>
-        <a className="block hover:bg-gray-200">
-          <div className="px-4 py-4 sm:px-6">
-            <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-indigo-700">
-                {contract.question}
-              </p>
-            </div>
-            <div className="mt-2 sm:flex sm:flex-col sm:justify-between text-gray-600">
-              {/* <div className="sm:flex">
-                <p className="flex items-center text-sm">{contract.id}</p>
-                <p className="mt-2 flex items-center text-sm">
-                  {contract.description}
-                </p>
-              </div> */}
-              <div className="mt-2 flex flex-row items-center justify-between text-sm">
-                <p>
-                  <time dateTime={`${contract.createdTime}`}>
-                    {dayjs(contract.createdTime).format('MMM D')}
-                  </time>
-                </p>
-
-                {showDelete && (
-                  <button
-                    className="btn btn-xs btn-error btn-outline ml-2"
-                    onClick={async (e) => {
-                      e.preventDefault()
-                      await deleteContract(contract.id)
-                      setIsDeleted(true)
-                    }}
-                  >
-                    Delete
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </a>
-      </Link>
-    </li>
-  )
-}
-
 export function ContractsList(props: {}) {
   const creator = useUser()
 

web/components/resolved-panel.tsx

@@ -1,8 +1,9 @@
 import clsx from 'clsx'
 import dayjs from 'dayjs'
+import { useRouter } from 'next/router'
 import React from 'react'
 
-import { Contract } from '../lib/firebase/contracts'
+import { Contract, deleteContract } from '../lib/firebase/contracts'
 import { formatMoney } from '../lib/util/format'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
@@ -11,6 +12,8 @@ export function ResolvedPanel(props: {
   contract: Contract
   className?: string
 }) {
+  const router = useRouter()
+
   const { contract, className } = props
 
   const { resolution, resolutionTime, pot, seedAmounts } = contract
@@ -52,6 +55,20 @@ export function ResolvedPanel(props: {
           <>All bets have been returned.</>
         )}
       </div>
+
+      {/* Show a delete button for contracts without any trading */}
+      {total === 0 && (
+        <button
+          className="btn btn-xs btn-error btn-outline mt-1 max-w-fit"
+          onClick={async (e) => {
+            e.preventDefault()
+            await deleteContract(contract.id)
+            router.push('/markets')
+          }}
+        >
+          Delete
+        </button>
+      )}
     </Col>
   )
 }