diff --git a/web/components/button.tsx b/web/components/button.tsx new file mode 100644 index 00000000..d7e40579 --- /dev/null +++ b/web/components/button.tsx @@ -0,0 +1,32 @@ +export function Button(props: { + className?: string + onClick?: () => void + color: 'green' | 'red' | 'deemphasized' + hideFocusRing?: boolean + children?: any +}) { + const { className, onClick, children, color, hideFocusRing } = props + + return ( + + ) +} + +function classNames(...classes: any[]) { + return classes.filter(Boolean).join(' ') +} diff --git a/web/components/convert-kit-email-form.tsx b/web/components/convert-kit-email-form.tsx index 4d8f06c3..d9593d64 100644 --- a/web/components/convert-kit-email-form.tsx +++ b/web/components/convert-kit-email-form.tsx @@ -9,8 +9,8 @@ const convertkitHTML = {
-
- +
+
+
+
+ +
+
+

{user?.name}

+

{user?.email}

+

${user?.balanceUsd} USD

+
+ +
- {/* Lorem ipsum table. TODO: fill in user's bets and markets */} -

- {user?.username}'s Bets +

+ Your markets

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameJobcompanylocationLast LoginFavorite Color
1Cy GandertonQuality Control SpecialistLittel, Schaden and VandervortCanada12/16/2020Blue
2Hart HagertyDesktop Support TechnicianZemlak, Daniel and LeannonUnited States12/5/2020Purple
3Brice SwyreTax AccountantCarroll GroupChina8/15/2020Red
4Marjy FerenczOffice Assistant IRowe-SchoenRussia3/25/2021Crimson
5Yancy TearCommunity Outreach SpecialistWyman-LednerBrazil5/22/2020Indigo
6Irma VasilikEditorWiza, Bins and EmardVenezuela12/8/2020Purple
-
+
) diff --git a/web/pages/contract/index.tsx b/web/pages/contract/index.tsx new file mode 100644 index 00000000..b164f6d0 --- /dev/null +++ b/web/pages/contract/index.tsx @@ -0,0 +1,237 @@ +import Link from 'next/link' +import { useEffect, useState } from 'react' +import { Header } from '../../components/header' +import { useUser } from '../../hooks/use-user' +import { + Contract, + deleteContract, + listContracts, + setContract as pushContract, +} from '../../lib/firebase/contracts' + +function ContractCard(props: { contract: Contract }) { + const { contract } = props + return ( +
  • + + +
    +
    +

    + {contract.question} +

    +
    +

    + {contract.outcomeType} +

    +
    +
    +
    +
    +

    {contract.id}

    +

    + {contract.description} +

    +
    +
    +

    + Created on{' '} + +

    + +
    +
    +
    +     + +
    • + ) +} + +export function ContractList(props: { contracts: Contract[] }) { + const { contracts } = props + return ( +
    + +
    + ) +} + +// 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({ ...contract, [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 +

    + + +
    +
    + ) +} diff --git a/web/pages/simulator/index.tsx b/web/pages/simulator/index.tsx index 5f57f49d..7697f6d6 100644 --- a/web/pages/simulator/index.tsx +++ b/web/pages/simulator/index.tsx @@ -249,7 +249,7 @@ export default function Simulator() { } return ( -
    +
    {/* Left column */} diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 1a2d0073..ece84771 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -5,6 +5,7 @@ module.exports = { theme: { fontFamily: { 'major-mono': ['Major Mono Display', 'monospace'], + 'readex-pro': ['Readex Pro', 'sans-serif'], }, extend: { backgroundImage: {