Add a "Show more..." button when there are more contracts

web/components/contract/contracts-list.tsx

@@ -25,15 +25,16 @@ export function ContractsGrid(props: {
   showCloseTime?: boolean
 }) {
   const { showCloseTime } = props
+  const PAGE_SIZE = 100
+  const [page, setPage] = useState(1)
 
   const [resolvedContracts, activeContracts] = _.partition(
     props.contracts,
     (c) => c.isResolved
   )
-  const contracts = [...activeContracts, ...resolvedContracts].slice(
-    0,
-    MAX_CONTRACTS_DISPLAYED
-  )
+  const allContracts = [...activeContracts, ...resolvedContracts]
+  const showMore = allContracts.length > PAGE_SIZE * page
+  const contracts = allContracts.slice(0, PAGE_SIZE * page)
 
   if (contracts.length === 0) {
     return (
@@ -47,6 +48,7 @@ export function ContractsGrid(props: {
   }
 
   return (
+    <>
       <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
         {contracts.map((contract) => (
           <ContractCard
@@ -57,6 +59,16 @@ export function ContractsGrid(props: {
           />
         ))}
       </ul>
+      {/* Show a link that increases the page num when clicked */}
+      {showMore && (
+        <button
+          className="btn btn-link float-right normal-case"
+          onClick={() => setPage(page + 1)}
+        >
+          Show more...
+        </button>
+      )}
+    </>
   )
 }