From f42e3c23da34ca360bad179316ecf806f4e50c1c Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Mon, 13 Dec 2021 23:59:04 -0800
Subject: [PATCH] Split markets into Open and Resolved

---
 web/components/title.tsx |   2 +-
 web/pages/markets.tsx    | 103 +++++++++++++++++++++++----------------
 2 files changed, 61 insertions(+), 44 deletions(-)

diff --git a/web/components/title.tsx b/web/components/title.tsx
index df53dcad..d96b5162 100644
--- a/web/components/title.tsx
+++ b/web/components/title.tsx
@@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) {
   return (
     <h1
       className={clsx(
-        'text-2xl font-major-mono text-indigo-700 font-bold mt-6 mb-4',
+        'text-3xl font-major-mono tracking-tight text-indigo-700 font-bold mt-6 mb-4',
         className
       )}
     >
diff --git a/web/pages/markets.tsx b/web/pages/markets.tsx
index 6544a1c3..75620bd1 100644
--- a/web/pages/markets.tsx
+++ b/web/pages/markets.tsx
@@ -1,4 +1,5 @@
 import dayjs from 'dayjs'
+import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
 import { Header } from '../components/header'
 import { Col } from '../components/layout/col'
@@ -19,48 +20,50 @@ function ContractCard(props: { contract: Contract }) {
   const probPercent = Math.round(prob * 100) + '%'
 
   return (
-    <li className="col-span-1 bg-white hover:bg-gray-100 rounded-lg shadow divide-y divide-gray-200">
-      <div className="card">
-        <div className="card-body p-6">
-          <div className="flex justify-between gap-2">
-            {/* Left side of card */}
-            <div>
-              <p className="font-medium text-indigo-700">{contract.question}</p>
-              <Spacer h={8} />
-              {/* Copied from contract-overview.tsx */}
-              <Row className="flex-wrap text-sm text-gray-600">
-                <div className="whitespace-nowrap">
-                  By {contract.creatorName}
+    <Link href={`/contract/${contract.id}`}>
+      <a>
+        <li className="col-span-1 bg-white hover:bg-gray-100 rounded-lg shadow divide-y divide-gray-200">
+          <div className="card">
+            <div className="card-body p-6">
+              <div className="flex justify-between gap-2">
+                {/* Left side of card */}
+                <div>
+                  <p className="font-medium text-indigo-700">
+                    {contract.question}
+                  </p>
+                  <Spacer h={8} />
+                  {/* Copied from contract-overview.tsx */}
+                  <Row className="flex-wrap text-sm text-gray-500">
+                    <div className="whitespace-nowrap">
+                      By {contract.creatorName}
+                    </div>
+                    <div className="mx-2">•</div>
+                    <div className="whitespace-nowrap">
+                      {dayjs(createdTime).format('MMM D')}
+                    </div>
+                    <div className="mx-2">•</div>
+                    <div className="whitespace-nowrap">
+                      {formatWithCommas(volume)} vol
+                    </div>
+                  </Row>
                 </div>
-                <div className="mx-2">•</div>
-                <div className="whitespace-nowrap">
-                  {dayjs(createdTime).format('MMM D')}
-                </div>
-                <div className="mx-2">•</div>
-                <div className="whitespace-nowrap">
-                  {formatWithCommas(volume)} vol
-                </div>
-              </Row>
-            </div>
-            {/* Right side of card */}
-            <Col>
-              <Col className="text-4xl mb-2 mx-auto text-primary items-end">
-                {probPercent}
-              </Col>
-              {/* Show a yes and a no button side-by-side */}
-              <div className="flex items-center text-xs gap-1">
-                <button className="bg-primary text-white font-medium px-4 py-2 rounded-lg">
-                  YES
-                </button>
-                <button className="bg-gray-200 text-gray-600 font-medium px-4 py-2 rounded-lg">
-                  NO
-                </button>
+                {/* Right side of card */}
+                <Col>
+                  <Col className="text-4xl mx-auto  items-end">
+                    {contract.resolution || (
+                      <div className="text-primary">
+                        {probPercent}
+                        <div className="text-lg">chance</div>
+                      </div>
+                    )}
+                  </Col>
+                </Col>
               </div>
-            </Col>
+            </div>
           </div>
-        </div>
-      </div>
-    </li>
+        </li>
+      </a>
+    </Link>
   )
 }
 
@@ -74,14 +77,28 @@ export default function Markets() {
     <div>
       <Header />
       <div className="max-w-4xl py-8 mx-auto">
-        <Title text="Newest markets" />
+        <Title text="Open markets" />
         <ul
           role="list"
           className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2"
         >
-          {contracts.map((contract) => (
-            <ContractCard contract={contract} key={contract.id} />
-          ))}
+          {contracts
+            .filter((c) => !c.resolution)
+            .map((contract) => (
+              <ContractCard contract={contract} key={contract.id} />
+            ))}
+        </ul>
+
+        <Title text="Resolved markets" className="mt-20" />
+        <ul
+          role="list"
+          className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2"
+        >
+          {contracts
+            .filter((c) => c.resolution)
+            .map((contract) => (
+              <ContractCard contract={contract} key={contract.id} />
+            ))}
         </ul>
       </div>
     </div>