From 443b742c4a9d5aba0beb986c1aa3f456092782fe Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Fri, 10 Dec 2021 00:21:12 -0600
Subject: [PATCH] Implement skeleton ContractPage

---
 web/components/bet-panel.tsx         | 55 +++++++++++++++++++++++
 web/components/contract-overview.tsx | 67 ++++++++++++++++++++++++----
 web/lib/firebase/contracts.ts        |  3 ++
 web/pages/contract/[contractId].tsx  | 25 +++++++----
 4 files changed, 133 insertions(+), 17 deletions(-)
 create mode 100644 web/components/bet-panel.tsx

diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
new file mode 100644
index 00000000..2949ffef
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index fb90749f..543aa98a 100644
--- a/web/components/contract-overview.tsx
+++ b/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>
   )
-}
\ No newline at end of file
+}
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index 42166817..87d49c04 100644
--- a/web/lib/firebase/contracts.ts
+++ b/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')
diff --git a/web/pages/contract/[contractId].tsx b/web/pages/contract/[contractId].tsx
index 4b34715a..f2e9c785 100644
--- a/web/pages/contract/[contractId].tsx
+++ b/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>
   )
 }