Implement skeleton ContractPage

web/components/bet-panel.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { Contract } from '../lib/firebase/contracts'
+import { Button } from './button'
+import { Col } from './layout/col'
+import { Spacer } from './layout/spacer'
+import { YesNoSelector } from './yes-no-selector'
+
+export function BetPanel(props: { contract: Contract }) {
+  const { contract } = props
+
+  const [betChoice, setBetChoice] = useState<'yes' | 'no'>('yes')
+  const [shares, setShares] = useState(0)
+
+  return (
+    <Col>
+      <Spacer h={12} />
+
+      <div className="p-2 font-medium">Pick outcome</div>
+      <YesNoSelector
+        className="p-2"
+        selected={betChoice}
+        onSelect={setBetChoice}
+        yesLabel="Yes 57"
+        noLabel="No 43"
+      />
+
+      <Spacer h={4} />
+
+      <div className="p-2 font-medium">Shares</div>
+      <div className="p-2">
+        <input
+          className="input input-bordered input-md"
+          style={{ maxWidth: 80 }}
+          type="text"
+          value={shares}
+          onChange={(e) => setShares(parseInt(e.target.value) || 0)}
+          onFocus={(e) => e.target.select()}
+        />
+      </div>
+
+      <Spacer h={4} />
+
+      <div className="p-2 font-medium">Price</div>
+      <div className="px-2">
+        {shares * (betChoice === 'yes' ? 57 : 43)} points
+      </div>
+
+      <Spacer h={6} />
+
+      {shares !== 0 && (
+        <Button color={shares ? 'green' : 'deemphasized'}>Place bet</Button>
+      )}
+    </Col>
+  )
+}

web/components/contract-overview.tsx

@@ -1,15 +1,64 @@
+import React from 'react'
+import { Line } from 'react-chartjs-2'
+import {
+  CategoryScale,
+  Chart,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js'
 import { Contract } from '../lib/firebase/contracts'
+import { Col } from './layout/col'
+import { Row } from './layout/row'
+import { Spacer } from './layout/spacer'
 
-export const ContractOverview = (props: {
-  contract: Contract
-}) => {
+// Auto import doesn't work for some reason...
+// So we manually register ChartJS components instead:
+Chart.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+)
+const chartData = {
+  labels: Array.from({ length: 0 }, (_, i) => i + 1),
+  datasets: [
+    {
+      label: 'Implied probability',
+      data: [],
+      borderColor: 'rgb(75, 192, 192)',
+    },
+  ],
+}
+
+export const ContractOverview = (props: { contract: Contract }) => {
   const { contract } = props
 
   return (
-    <div className="w-full flex">
-      <div className="text-xl font-medium p-10">
-        {contract.question}
-      </div>
-    </div>
+    <Col className="max-w-3xl w-full">
+      <div className="text-3xl font-medium p-2">{contract.question}</div>
+
+      <Row>
+        <div className="p-2">By {contract.creatorName}</div>
+        <div className="py-2">•</div>
+        <div className="p-2">Dec 9</div>
+        <div className="py-2">•</div>
+        <div className="p-2">200,000 volume</div>
+      </Row>
+
+      <Spacer h={4} />
+
+      <Line data={chartData} height={150} />
+
+      <Spacer h={12} />
+
+      <div className="text-gray-200">{contract.description}</div>
+    </Col>
   )
-}
+}

web/lib/firebase/contracts.ts

@@ -3,7 +3,10 @@ import { db } from './init'
 
 export type Contract = {
   id: string
+  creatorId: string
+  creatorName: string
   question: string
+  description: string
 }
 
 const contractCollection = collection(db, 'contracts')

web/pages/contract/[contractId].tsx

@@ -1,27 +1,36 @@
+import React from 'react'
 import { useRouter } from 'next/router'
 import { useContract } from '../../hooks/use-contract'
-import { useUser } from '../../hooks/use-user'
+import { Header } from '../../components/header'
+import { Row } from '../../components/layout/row'
+import { ContractOverview } from '../../components/contract-overview'
+import { BetPanel } from '../../components/bet-panel'
 
 export default function ContractPage() {
-  const user = useUser()
-
   const router = useRouter()
   const { contractId } = router.query as { contractId: string }
 
   const contract = useContract(contractId)
 
   if (contract === 'loading') {
-    return <div>Loading...</div>
+    return <div />
   }
 
-  if (contract === null) {
+  if (!contract) {
     return <div>Contract not found...</div>
   }
 
   return (
-    <div>
-      <div>{contract.id}</div>
-      <div>{contract.question}</div>
+    <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <Header />
+
+      <div className="w-full flex flex-col p-4 mt-4">
+        <Row className="justify-between">
+          <ContractOverview contract={contract} />
+
+          <BetPanel contract={contract} />
+        </Row>
+      </div>
     </div>
   )
 }