diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index 7b1bd550..2e739178 100644 --- a/web/components/bet-panel.tsx +++ b/web/components/bet-panel.tsx @@ -47,9 +47,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
Average price
-
- {betChoice === 'YES' ? 0.57 : 0.43} points -
+
{betChoice === 'YES' ? 0.57 : 0.43} points
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/contracts-list.tsx b/web/components/contracts-list.tsx new file mode 100644 index 00000000..8169d164 --- /dev/null +++ b/web/components/contracts-list.tsx @@ -0,0 +1,63 @@ +import Link from 'next/link' +import { Contract, deleteContract } 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 ContractsList(props: { contracts: Contract[] }) { + const { contracts } = props + return ( +
    +
      + {contracts.map((contract) => ( + + ))} +
    +
    + ) +} 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..298812a6 --- /dev/null +++ b/web/pages/contract/index.tsx @@ -0,0 +1,175 @@ +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 +

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