import { useEffect, useState } from 'react' import { ContractsList } from '../../components/contracts-list' import { Header } from '../../components/header' import { useUser } from '../../hooks/use-user' import { Contract, listContracts, setContract as pushContract, } from '../../lib/firebase/contracts' // Allow user to create a new contract // TODO: Extract to a reusable UI, for listing contracts too? export default function NewContract() { const creator = useUser() const [contract, setContract] = useState({ id: '', creatorId: '', question: '', description: '', seedAmounts: { YES: 100, NO: 100 }, // TODO: Set create time to Firestore timestamp createdTime: Date.now(), lastUpdatedTime: Date.now(), } as Contract) const [contracts, setContracts] = useState([]) useEffect(() => { if (creator?.id) { setContract((contract) => ({ ...contract, creatorId: creator.id, creatorName: creator.name, })) listContracts(creator?.id).then(setContracts) } }, [creator?.id]) async function saveContract() { await pushContract(contract) // Update local contract list setContracts([{ ...contract }, ...contracts]) } function saveField(field: keyof Contract) { return (changeEvent: React.ChangeEvent) => setContract((c) => ({ ...c, [field]: changeEvent.target.value })) } const descriptionPlaceholder = `e.g. This market will resolve to “Yes” if, by June 2, 2021, 11:59:59 PM ET, Paxlovid (also known under PF-07321332)...` return (

Create a new prediction market

{/* Create a Tailwind form that takes in all the fields needed for a new contract */} {/* When the form is submitted, create a new contract in the database */}
{ setContract({ ...contract, seedAmounts: { ...contract.seedAmounts, YES: parseInt(e.target.value), }, }) }} />
{ setContract({ ...contract, seedAmounts: { ...contract.seedAmounts, NO: parseInt(e.target.value), }, }) }} />
{/* TODO: Show a preview of the created market here? */}
{/* Show a separate card for each contract */}

Your markets

) }