added new files

common/contest.ts

@@ -0,0 +1,23 @@
+import { GROUP_CHAT_SLUG } from 'common/group'
+
+export const CONTEST_DATA = {
+  'cause-exploration-prize': {
+    link: 'https://www.causeexplorationprizes.com/',
+    description:
+      'Open Philanthropy’s contest to find ideas for the best ways to use their resources, with focus on new areas to support, health development, and worldview investigations.',
+  },
+}
+
+export const CONTEST_SLUGS = Object.keys(CONTEST_DATA)
+
+export function contestPath(
+  contestSlug: string,
+  subpath?:
+    | 'edit'
+    | 'markets'
+    | 'about'
+    | typeof GROUP_CHAT_SLUG
+    | 'leaderboards'
+) {
+  return `/contest/${contestSlug}${subpath ? `/${subpath}` : ''}`
+}

web/components/submission-search.tsx

@@ -0,0 +1,362 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import algoliasearch from 'algoliasearch/lite'
+
+import { Contract } from 'common/contract'
+import { Sort, useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
+import {
+  ContractHighlightOptions,
+  ContractsGrid,
+} from './contract/contracts-list'
+import { Row } from './layout/row'
+import { useEffect, useMemo, useState } from 'react'
+import { Spacer } from './layout/spacer'
+import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
+import { useUser } from 'web/hooks/use-user'
+import { useFollows } from 'web/hooks/use-follows'
+import { track, trackCallback } from 'web/lib/service/analytics'
+import ContractSearchFirestore from 'web/pages/contract-search-firestore'
+import { useMemberGroups } from 'web/hooks/use-group'
+import { Group, NEW_USER_GROUP_SLUGS } from 'common/group'
+import { PillButton } from './buttons/pill-button'
+import { range, sortBy } from 'lodash'
+import { DEFAULT_CATEGORY_GROUPS } from 'common/categories'
+import { Col } from './layout/col'
+import SubmissionSearchFirestore from 'web/pages/submission-search-firestore'
+import { SubmissionsGrid } from './submission/submission-list'
+
+const searchClient = algoliasearch(
+  'GJQPAYENIF',
+  '75c28fc084a80e1129d427d470cf41a3'
+)
+
+const indexPrefix = ENV === 'DEV' ? 'dev-' : ''
+const searchIndexName = ENV === 'DEV' ? 'dev-contracts' : 'contractsIndex'
+
+const sortOptions = [
+  { label: 'Newest', value: 'newest' },
+  { label: 'Trending', value: 'score' },
+  { label: 'Most traded', value: 'most-traded' },
+  { label: '24h volume', value: '24-hour-vol' },
+  { label: 'Last updated', value: 'last-updated' },
+  { label: 'Subsidy', value: 'liquidity' },
+  { label: 'Close date', value: 'close-date' },
+  { label: 'Resolve date', value: 'resolve-date' },
+]
+export const DEFAULT_SORT = 'score'
+
+type filter = 'personal' | 'open' | 'closed' | 'resolved' | 'all'
+
+export function SubmissionSearch(props: {
+  querySortOptions?: {
+    defaultSort: Sort
+    defaultFilter?: filter
+    shouldLoadFromStorage?: boolean
+  }
+  additionalFilter?: {
+    creatorId?: string
+    tag?: string
+    excludeContractIds?: string[]
+    groupSlug?: string
+  }
+  highlightOptions?: ContractHighlightOptions
+  onContractClick?: (contract: Contract) => void
+  showPlaceHolder?: boolean
+  hideOrderSelector?: boolean
+  overrideGridClassName?: string
+  cardHideOptions?: {
+    hideGroupLink?: boolean
+    hideQuickBet?: boolean
+  }
+}) {
+  const {
+    querySortOptions,
+    additionalFilter,
+    onContractClick,
+    overrideGridClassName,
+    hideOrderSelector,
+    showPlaceHolder,
+    cardHideOptions,
+    highlightOptions,
+  } = props
+
+  const user = useUser()
+  const memberGroups = (useMemberGroups(user?.id) ?? []).filter(
+    (group) => !NEW_USER_GROUP_SLUGS.includes(group.slug)
+  )
+  const memberGroupSlugs =
+    memberGroups.length > 0
+      ? memberGroups.map((g) => g.slug)
+      : DEFAULT_CATEGORY_GROUPS.map((g) => g.slug)
+
+  const memberPillGroups = sortBy(
+    memberGroups.filter((group) => group.contractIds.length > 0),
+    (group) => group.contractIds.length
+  ).reverse()
+
+  const defaultPillGroups = DEFAULT_CATEGORY_GROUPS as Group[]
+
+  const pillGroups =
+    memberPillGroups.length > 0 ? memberPillGroups : defaultPillGroups
+
+  const follows = useFollows(user?.id)
+
+  const { shouldLoadFromStorage, defaultSort } = querySortOptions ?? {}
+  const { query, setQuery, sort, setSort } = useQueryAndSortParams({
+    defaultSort,
+    shouldLoadFromStorage,
+  })
+
+  const [filter, setFilter] = useState<filter>(
+    querySortOptions?.defaultFilter ?? 'open'
+  )
+  const pillsEnabled = !additionalFilter
+
+  const [pillFilter, setPillFilter] = useState<string | undefined>(undefined)
+
+  const selectPill = (pill: string | undefined) => () => {
+    setPillFilter(pill)
+    setPage(0)
+    track('select search category', { category: pill ?? 'all' })
+  }
+
+  const additionalFilters = [
+    additionalFilter?.creatorId
+      ? `creatorId:${additionalFilter.creatorId}`
+      : '',
+    additionalFilter?.tag ? `lowercaseTags:${additionalFilter.tag}` : '',
+    additionalFilter?.groupSlug
+      ? `groupLinks.slug:${additionalFilter.groupSlug}`
+      : '',
+  ]
+  let facetFilters = query
+    ? additionalFilters
+    : [
+        ...additionalFilters,
+        filter === 'open' ? 'isResolved:false' : '',
+        filter === 'closed' ? 'isResolved:false' : '',
+        filter === 'resolved' ? 'isResolved:true' : '',
+        pillFilter && pillFilter !== 'personal' && pillFilter !== 'your-bets'
+          ? `groupLinks.slug:${pillFilter}`
+          : '',
+        pillFilter === 'personal'
+          ? // Show contracts in groups that the user is a member of
+            memberGroupSlugs
+              .map((slug) => `groupLinks.slug:${slug}`)
+              // Show contracts created by users the user follows
+              .concat(follows?.map((followId) => `creatorId:${followId}`) ?? [])
+              // Show contracts bet on by users the user follows
+              .concat(
+                follows?.map((followId) => `uniqueBettorIds:${followId}`) ?? []
+              )
+          : '',
+        // Subtract contracts you bet on from For you.
+        pillFilter === 'personal' && user ? `uniqueBettorIds:-${user.id}` : '',
+        pillFilter === 'your-bets' && user
+          ? // Show contracts bet on by the user
+            `uniqueBettorIds:${user.id}`
+          : '',
+      ].filter((f) => f)
+  // Hack to make Algolia work.
+  facetFilters = ['', ...facetFilters]
+
+  const numericFilters = query
+    ? []
+    : [
+        filter === 'open' ? `closeTime > ${Date.now()}` : '',
+        filter === 'closed' ? `closeTime <= ${Date.now()}` : '',
+      ].filter((f) => f)
+
+  const indexName = `${indexPrefix}contracts-${sort}`
+  const index = useMemo(() => searchClient.initIndex(indexName), [indexName])
+  const searchIndex = useMemo(
+    () => searchClient.initIndex(searchIndexName),
+    [searchIndexName]
+  )
+
+  const [page, setPage] = useState(0)
+  const [numPages, setNumPages] = useState(1)
+  const [hitsByPage, setHitsByPage] = useState<{ [page: string]: Contract[] }>(
+    {}
+  )
+
+  useEffect(() => {
+    let wasMostRecentQuery = true
+    const algoliaIndex = query ? searchIndex : index
+
+    algoliaIndex
+      .search(query, {
+        facetFilters,
+        numericFilters,
+        page,
+        hitsPerPage: 20,
+      })
+      .then((results) => {
+        if (!wasMostRecentQuery) return
+
+        if (page === 0) {
+          setHitsByPage({
+            [0]: results.hits as any as Contract[],
+          })
+        } else {
+          setHitsByPage((hitsByPage) => ({
+            ...hitsByPage,
+            [page]: results.hits,
+          }))
+        }
+        setNumPages(results.nbPages)
+      })
+    return () => {
+      wasMostRecentQuery = false
+    }
+    // Note numeric filters are unique based on current time, so can't compare
+    // them by value.
+  }, [query, page, index, searchIndex, JSON.stringify(facetFilters), filter])
+
+  const loadMore = () => {
+    if (page >= numPages - 1) return
+
+    const haveLoadedCurrentPage = hitsByPage[page]
+    if (haveLoadedCurrentPage) setPage(page + 1)
+  }
+
+  const hits = range(0, page + 1)
+    .map((p) => hitsByPage[p] ?? [])
+    .flat()
+
+  const contracts = hits.filter(
+    (c) => !additionalFilter?.excludeContractIds?.includes(c.id)
+  )
+
+  const showTime =
+    sort === 'close-date' || sort === 'resolve-date' ? sort : undefined
+
+  const updateQuery = (newQuery: string) => {
+    setQuery(newQuery)
+    setPage(0)
+  }
+
+  const selectFilter = (newFilter: filter) => {
+    if (newFilter === filter) return
+    setFilter(newFilter)
+    setPage(0)
+    trackCallback('select search filter', { filter: newFilter })
+  }
+
+  const selectSort = (newSort: Sort) => {
+    if (newSort === sort) return
+
+    setPage(0)
+    setSort(newSort)
+    track('select sort', { sort: newSort })
+  }
+
+  if (IS_PRIVATE_MANIFOLD || process.env.NEXT_PUBLIC_FIREBASE_EMULATE) {
+    return (
+      <SubmissionSearchFirestore
+        querySortOptions={querySortOptions}
+        additionalFilter={additionalFilter}
+      />
+    )
+  }
+
+  return (
+    <Col>
+      <Row className="gap-1 sm:gap-2">
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => updateQuery(e.target.value)}
+          placeholder={showPlaceHolder ? `Search ${filter} markets` : ''}
+          className="input input-bordered w-full"
+        />
+        {!query && (
+          <select
+            className="select select-bordered"
+            value={filter}
+            onChange={(e) => selectFilter(e.target.value as filter)}
+          >
+            <option value="open">Open</option>
+            <option value="closed">Closed</option>
+            <option value="resolved">Resolved</option>
+            <option value="all">All</option>
+          </select>
+        )}
+        {!hideOrderSelector && !query && (
+          <select
+            className="select select-bordered"
+            value={sort}
+            onChange={(e) => selectSort(e.target.value as Sort)}
+          >
+            {sortOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        )}
+      </Row>
+
+      <Spacer h={3} />
+
+      {pillsEnabled && (
+        <Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
+          <PillButton
+            key={'all'}
+            selected={pillFilter === undefined}
+            onSelect={selectPill(undefined)}
+          >
+            All
+          </PillButton>
+          <PillButton
+            key={'personal'}
+            selected={pillFilter === 'personal'}
+            onSelect={selectPill('personal')}
+          >
+            {user ? 'For you' : 'Featured'}
+          </PillButton>
+
+          {user && (
+            <PillButton
+              key={'your-bets'}
+              selected={pillFilter === 'your-bets'}
+              onSelect={selectPill('your-bets')}
+            >
+              Your bets
+            </PillButton>
+          )}
+
+          {pillGroups.map(({ name, slug }) => {
+            return (
+              <PillButton
+                key={slug}
+                selected={pillFilter === slug}
+                onSelect={selectPill(slug)}
+              >
+                {name}
+              </PillButton>
+            )
+          })}
+        </Row>
+      )}
+
+      <Spacer h={3} />
+
+      {filter === 'personal' &&
+      (follows ?? []).length === 0 &&
+      memberGroupSlugs.length === 0 ? (
+        <>You're not following anyone, nor in any of your own groups yet.</>
+      ) : (
+        <SubmissionsGrid
+          contracts={contracts}
+          loadMore={loadMore}
+          hasMore={true}
+          showTime={showTime}
+          onContractClick={onContractClick}
+          overrideGridClassName={overrideGridClassName}
+          highlightOptions={highlightOptions}
+          cardHideOptions={cardHideOptions}
+        />
+      )}
+    </Col>
+  )
+}

web/components/submission/submission-card.tsx

@@ -0,0 +1,354 @@
+import clsx from 'clsx'
+import Link from 'next/link'
+import { Row } from '../layout/row'
+import { formatLargeNumber, formatPercent } from 'common/util/format'
+import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
+import { Col } from '../layout/col'
+import {
+  BinaryContract,
+  Contract,
+  FreeResponseContract,
+  MultipleChoiceContract,
+  NumericContract,
+  PseudoNumericContract,
+} from 'common/contract'
+import {
+  AnswerLabel,
+  BinaryContractOutcomeLabel,
+  CancelLabel,
+  FreeResponseOutcomeLabel,
+} from '../outcome-label'
+import {
+  getOutcomeProbability,
+  getProbability,
+  getTopAnswer,
+} from 'common/calculate'
+import {
+  AvatarDetails,
+  MiscDetails,
+  ShowTime,
+} from '../contract/contract-details'
+import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
+import { getColor, ProbBar, QuickBet } from '../contract/quick-bet'
+import { useContractWithPreload } from 'web/hooks/use-contract'
+import { useUser } from 'web/hooks/use-user'
+import { track } from '@amplitude/analytics-browser'
+import { trackCallback } from 'web/lib/service/analytics'
+import { formatNumericProbability } from 'common/pseudo-numeric'
+import { Title } from '../title'
+
+export function SubmissionCard(props: {
+  contract: Contract
+  showHotVolume?: boolean
+  showTime?: ShowTime
+  className?: string
+  onClick?: () => void
+  hideQuickBet?: boolean
+  hideGroupLink?: boolean
+}) {
+  const {
+    showHotVolume,
+    showTime,
+    className,
+    onClick,
+    hideQuickBet,
+    hideGroupLink,
+  } = props
+  const contract = useContractWithPreload(props.contract) ?? props.contract
+  const { question, outcomeType } = contract
+  const { resolution } = contract
+
+  const user = useUser()
+
+  const marketClosed =
+    (contract.closeTime || Infinity) < Date.now() || !!resolution
+
+  const showQuickBet =
+    user &&
+    !marketClosed &&
+    (outcomeType === 'BINARY' || outcomeType === 'PSEUDO_NUMERIC') &&
+    !hideQuickBet
+
+  return (
+    <div>
+      <Col
+        className={clsx(
+          'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-5 shadow-md hover:cursor-pointer hover:bg-gray-100',
+          className
+        )}
+      >
+        <Row>
+          <Col className="relative flex-1 gap-3 pr-1">
+            <div
+              className={clsx(
+                'peer absolute -left-6 -top-4 -bottom-4 right-0 z-10'
+              )}
+            >
+              {onClick ? (
+                <a
+                  className="absolute top-0 left-0 right-0 bottom-0"
+                  href={contractPath(contract)}
+                  onClick={(e) => {
+                    // Let the browser handle the link click (opens in new tab).
+                    if (e.ctrlKey || e.metaKey) return
+
+                    e.preventDefault()
+                    track('click market card', {
+                      slug: contract.slug,
+                      contractId: contract.id,
+                    })
+                    onClick()
+                  }}
+                />
+              ) : (
+                <Link href={contractPath(contract)}>
+                  <a
+                    onClick={trackCallback('click market card', {
+                      slug: contract.slug,
+                      contractId: contract.id,
+                    })}
+                    className="absolute top-0 left-0 right-0 bottom-0"
+                  />
+                </Link>
+              )}
+            </div>
+            {/* <AvatarDetails contract={contract} /> */}
+            <p
+              className="break-words font-semibold text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2"
+              style={{ /* For iOS safari */ wordBreak: 'break-word' }}
+            >
+              {question}
+            </p>
+
+            {(outcomeType === 'FREE_RESPONSE' ||
+              outcomeType === 'MULTIPLE_CHOICE') &&
+              (resolution ? (
+                <FreeResponseOutcomeLabel
+                  contract={contract}
+                  resolution={resolution}
+                  truncate={'long'}
+                />
+              ) : (
+                <FreeResponseTopAnswer contract={contract} truncate="long" />
+              ))}
+
+            <MiscDetails
+              contract={contract}
+              showHotVolume={showHotVolume}
+              showTime={showTime}
+              hideGroupLink={hideGroupLink}
+            />
+          </Col>
+          {showQuickBet ? (
+            <QuickBet contract={contract} user={user} />
+          ) : (
+            <Col className="m-auto pl-2">
+              {outcomeType === 'BINARY' && (
+                <BinaryResolutionOrChance
+                  className="items-center"
+                  contract={contract}
+                />
+              )}
+
+              {outcomeType === 'PSEUDO_NUMERIC' && (
+                <PseudoNumericResolutionOrExpectation
+                  className="items-center"
+                  contract={contract}
+                />
+              )}
+
+              {outcomeType === 'NUMERIC' && (
+                <NumericResolutionOrExpectation
+                  className="items-center"
+                  contract={contract}
+                />
+              )}
+
+              {(outcomeType === 'FREE_RESPONSE' ||
+                outcomeType === 'MULTIPLE_CHOICE') && (
+                <FreeResponseResolutionOrChance
+                  className="self-end text-gray-600"
+                  contract={contract}
+                  truncate="long"
+                />
+              )}
+              <ProbBar contract={contract} />
+            </Col>
+          )}
+        </Row>
+      </Col>
+    </div>
+  )
+}
+
+export function BinaryResolutionOrChance(props: {
+  contract: BinaryContract
+  large?: boolean
+  className?: string
+}) {
+  const { contract, large, className } = props
+  const { resolution } = contract
+  const textColor = `text-${getColor(contract)}`
+
+  return (
+    <Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
+      {resolution ? (
+        <>
+          <div
+            className={clsx('text-gray-500', large ? 'text-xl' : 'text-base')}
+          >
+            Resolved
+          </div>
+          <BinaryContractOutcomeLabel
+            contract={contract}
+            resolution={resolution}
+          />
+        </>
+      ) : (
+        <>
+          <div className={textColor}>{getBinaryProbPercent(contract)}</div>
+          <div className={clsx(textColor, large ? 'text-xl' : 'text-base')}>
+            chance
+          </div>
+        </>
+      )}
+    </Col>
+  )
+}
+
+function FreeResponseTopAnswer(props: {
+  contract: FreeResponseContract | MultipleChoiceContract
+  truncate: 'short' | 'long' | 'none'
+  className?: string
+}) {
+  const { contract, truncate } = props
+
+  const topAnswer = getTopAnswer(contract)
+
+  return topAnswer ? (
+    <AnswerLabel
+      className="!text-gray-600"
+      answer={topAnswer}
+      truncate={truncate}
+    />
+  ) : null
+}
+
+export function FreeResponseResolutionOrChance(props: {
+  contract: FreeResponseContract | MultipleChoiceContract
+  truncate: 'short' | 'long' | 'none'
+  className?: string
+}) {
+  const { contract, truncate, className } = props
+  const { resolution } = contract
+
+  const topAnswer = getTopAnswer(contract)
+  const textColor = `text-${getColor(contract)}`
+
+  return (
+    <Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
+      {resolution ? (
+        <>
+          <div className={clsx('text-base text-gray-500 sm:hidden')}>
+            Resolved
+          </div>
+          {(resolution === 'CANCEL' || resolution === 'MKT') && (
+            <FreeResponseOutcomeLabel
+              contract={contract}
+              resolution={resolution}
+              truncate={truncate}
+              answerClassName="text-3xl uppercase text-blue-500"
+            />
+          )}
+        </>
+      ) : (
+        topAnswer && (
+          <Row className="items-center gap-6">
+            <Col className={clsx('text-3xl', textColor)}>
+              <div>
+                {formatPercent(getOutcomeProbability(contract, topAnswer.id))}
+              </div>
+              <div className="text-base">chance</div>
+            </Col>
+          </Row>
+        )
+      )}
+    </Col>
+  )
+}
+
+export function NumericResolutionOrExpectation(props: {
+  contract: NumericContract
+  className?: string
+}) {
+  const { contract, className } = props
+  const { resolution } = contract
+  const textColor = `text-${getColor(contract)}`
+
+  const resolutionValue =
+    contract.resolutionValue ?? getValueFromBucket(resolution ?? '', contract)
+
+  return (
+    <Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
+      {resolution ? (
+        <>
+          <div className={clsx('text-base text-gray-500')}>Resolved</div>
+
+          {resolution === 'CANCEL' ? (
+            <CancelLabel />
+          ) : (
+            <div className="text-blue-400">
+              {formatLargeNumber(resolutionValue)}
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <div className={clsx('text-3xl', textColor)}>
+            {formatLargeNumber(getExpectedValue(contract))}
+          </div>
+          <div className={clsx('text-base', textColor)}>expected</div>
+        </>
+      )}
+    </Col>
+  )
+}
+
+export function PseudoNumericResolutionOrExpectation(props: {
+  contract: PseudoNumericContract
+  className?: string
+}) {
+  const { contract, className } = props
+  const { resolution, resolutionValue, resolutionProbability } = contract
+  const textColor = `text-blue-400`
+
+  return (
+    <Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
+      {resolution ? (
+        <>
+          <div className={clsx('text-base text-gray-500')}>Resolved</div>
+
+          {resolution === 'CANCEL' ? (
+            <CancelLabel />
+          ) : (
+            <div className="text-blue-400">
+              {resolutionValue
+                ? formatLargeNumber(resolutionValue)
+                : formatNumericProbability(
+                    resolutionProbability ?? 0,
+                    contract
+                  )}
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <div className={clsx('text-3xl', textColor)}>
+            {formatNumericProbability(getProbability(contract), contract)}
+          </div>
+          <div className={clsx('text-base', textColor)}>expected</div>
+        </>
+      )}
+    </Col>
+  )
+}

web/components/submission/submission-list.tsx

@@ -0,0 +1,112 @@
+import { Contract } from 'web/lib/firebase/contracts'
+import { User } from 'web/lib/firebase/users'
+import { Col } from '../layout/col'
+import { SiteLink } from '../site-link'
+import { ContractCard } from '../contract/contract-card'
+import { ShowTime } from '../contract/contract-details'
+import { ContractSearch } from '../contract-search'
+import { useIsVisible } from 'web/hooks/use-is-visible'
+import { useEffect, useState } from 'react'
+import clsx from 'clsx'
+import { SubmissionCard } from './submission-card'
+import { SubmissionSearch } from '../submission-search'
+
+export type ContractHighlightOptions = {
+  contractIds?: string[]
+  highlightClassName?: string
+}
+
+export function SubmissionsGrid(props: {
+  contracts: Contract[]
+  loadMore: () => void
+  hasMore: boolean
+  showTime?: ShowTime
+  onContractClick?: (contract: Contract) => void
+  overrideGridClassName?: string
+  cardHideOptions?: {
+    hideQuickBet?: boolean
+    hideGroupLink?: boolean
+  }
+  highlightOptions?: ContractHighlightOptions
+}) {
+  const {
+    contracts,
+    showTime,
+    hasMore,
+    loadMore,
+    onContractClick,
+    overrideGridClassName,
+    cardHideOptions,
+    highlightOptions,
+  } = props
+  const { hideQuickBet, hideGroupLink } = cardHideOptions || {}
+
+  const { contractIds, highlightClassName } = highlightOptions || {}
+  const [elem, setElem] = useState<HTMLElement | null>(null)
+  const isBottomVisible = useIsVisible(elem)
+
+  useEffect(() => {
+    if (isBottomVisible && hasMore) {
+      loadMore()
+    }
+  }, [isBottomVisible, hasMore, loadMore])
+
+  if (contracts.length === 0) {
+    return (
+      <p className="mx-2 text-gray-500">
+        No markets found. Why not{' '}
+        <SiteLink href="/create" className="font-bold text-gray-700">
+          create one?
+        </SiteLink>
+      </p>
+    )
+  }
+
+  return (
+    <Col className="gap-8">
+      <ul
+        className={clsx(
+          overrideGridClassName
+            ? overrideGridClassName
+            : 'grid w-full grid-cols-1 gap-4 md:grid-cols-2'
+        )}
+      >
+        {contracts.map((contract) => (
+          <SubmissionCard
+            contract={contract}
+            key={contract.id}
+            showTime={showTime}
+            onClick={
+              onContractClick ? () => onContractClick(contract) : undefined
+            }
+            hideQuickBet={hideQuickBet}
+            hideGroupLink={hideGroupLink}
+            className={
+              contractIds?.includes(contract.id)
+                ? highlightClassName
+                : undefined
+            }
+          />
+        ))}
+      </ul>
+      <div ref={setElem} className="relative -top-96 h-1" />
+    </Col>
+  )
+}
+
+export function CreatorContractsList(props: { creator: User }) {
+  const { creator } = props
+
+  return (
+    <SubmissionSearch
+      querySortOptions={{
+        defaultSort: 'newest',
+        defaultFilter: 'all',
+        shouldLoadFromStorage: false,
+      }}
+      additionalFilter={{
+        creatorId: creator.id,
+      }}
+    />
+  )
+}

web/pages/contest/[...slugs]/index.tsx

@@ -0,0 +1,665 @@
+import { debounce, sortBy, take } from 'lodash'
+import PlusSmIcon from '@heroicons/react/solid/PlusSmIcon'
+
+import { Group, GROUP_CHAT_SLUG } from 'common/group'
+import { Page } from 'web/components/page'
+import { listAllBets } from 'web/lib/firebase/bets'
+import { Contract, listContractsByGroupSlug } from 'web/lib/firebase/contracts'
+import {
+  addContractToGroup,
+  getGroupBySlug,
+  groupPath,
+  joinGroup,
+  updateGroup,
+} from 'web/lib/firebase/groups'
+import { Row } from 'web/components/layout/row'
+import { UserLink } from 'web/components/user-page'
+import { firebaseLogin, getUser, User } from 'web/lib/firebase/users'
+import { Col } from 'web/components/layout/col'
+import { useUser } from 'web/hooks/use-user'
+import { listMembers, useGroup, useMembers } from 'web/hooks/use-group'
+import { useRouter } from 'next/router'
+import { scoreCreators, scoreTraders } from 'common/scoring'
+import { Leaderboard } from 'web/components/leaderboard'
+import { formatMoney } from 'common/util/format'
+import { EditGroupButton } from 'web/components/groups/edit-group-button'
+import Custom404 from '../../404'
+import { SEO } from 'web/components/SEO'
+import { Linkify } from 'web/components/linkify'
+import { fromPropz, usePropz } from 'web/hooks/use-propz'
+import { Tabs } from 'web/components/layout/tabs'
+import { CreateQuestionButton } from 'web/components/create-question-button'
+import React, { useState } from 'react'
+import { GroupChat } from 'web/components/groups/group-chat'
+import { LoadingIndicator } from 'web/components/loading-indicator'
+import { Modal } from 'web/components/layout/modal'
+import { getSavedSort } from 'web/hooks/use-sort-and-query-params'
+import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
+import { toast } from 'react-hot-toast'
+import { useCommentsOnGroup } from 'web/hooks/use-comments'
+import { REFERRAL_AMOUNT } from 'common/user'
+import { ContractSearch } from 'web/components/contract-search'
+import clsx from 'clsx'
+import { FollowList } from 'web/components/follow-list'
+import { SearchIcon } from '@heroicons/react/outline'
+import { useTipTxns } from 'web/hooks/use-tip-txns'
+import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
+import { searchInAny } from 'common/util/parse'
+import { useWindowSize } from 'web/hooks/use-window-size'
+import { CopyLinkButton } from 'web/components/copy-link-button'
+import { ENV_CONFIG } from 'common/envs/constants'
+import { useSaveReferral } from 'web/hooks/use-save-referral'
+import { Button } from 'web/components/button'
+import { SubmissionSearch } from 'web/components/submission-search'
+
+export const getStaticProps = fromPropz(getStaticPropz)
+export async function getStaticPropz(props: { params: { slugs: string[] } }) {
+  const { slugs } = props.params
+
+  const group = await getGroupBySlug(slugs[0])
+  const members = group && (await listMembers(group))
+  const creatorPromise = group ? getUser(group.creatorId) : null
+
+  const contracts =
+    (group && (await listContractsByGroupSlug(group.slug))) ?? []
+
+  const bets = await Promise.all(
+    contracts.map((contract: Contract) => listAllBets(contract.id))
+  )
+
+  const creatorScores = scoreCreators(contracts)
+  const traderScores = scoreTraders(contracts, bets)
+  const [topCreators, topTraders] =
+    (members && [
+      toTopUsers(creatorScores, members),
+      toTopUsers(traderScores, members),
+    ]) ??
+    []
+
+  const creator = await creatorPromise
+
+  return {
+    props: {
+      group,
+      members,
+      creator,
+      traderScores,
+      topTraders,
+      creatorScores,
+      topCreators,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+function toTopUsers(userScores: { [userId: string]: number }, users: User[]) {
+  const topUserPairs = take(
+    sortBy(Object.entries(userScores), ([_, score]) => -1 * score),
+    10
+  ).filter(([_, score]) => score >= 0.5)
+
+  const topUsers = topUserPairs.map(
+    ([userId]) => users.filter((user) => user.id === userId)[0]
+  )
+  return topUsers.filter((user) => user)
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: 'blocking' }
+}
+const groupSubpages = [
+  undefined,
+  GROUP_CHAT_SLUG,
+  'markets',
+  'leaderboards',
+  'about',
+] as const
+
+export default function GroupPage(props: {
+  group: Group | null
+  members: User[]
+  creator: User
+  traderScores: { [userId: string]: number }
+  topTraders: User[]
+  creatorScores: { [userId: string]: number }
+  topCreators: User[]
+}) {
+  props = usePropz(props, getStaticPropz) ?? {
+    group: null,
+    members: [],
+    creator: null,
+    traderScores: {},
+    topTraders: [],
+    creatorScores: {},
+    topCreators: [],
+  }
+  const {
+    creator,
+    members,
+    traderScores,
+    topTraders,
+    creatorScores,
+    topCreators,
+  } = props
+
+  const router = useRouter()
+  const { slugs } = router.query as { slugs: string[] }
+  const page = slugs?.[1] as typeof groupSubpages[number]
+
+  const group = useGroup(props.group?.id) ?? props.group
+  const tips = useTipTxns({ groupId: group?.id })
+
+  const messages = useCommentsOnGroup(group?.id)
+
+  const user = useUser()
+
+  useSaveReferral(user, {
+    defaultReferrer: creator.username,
+    groupId: group?.id,
+  })
+
+  const { width } = useWindowSize()
+  const chatDisabled = !group || group.chatDisabled
+  const showChatSidebar = !chatDisabled && (width ?? 1280) >= 1280
+  const showChatTab = !chatDisabled && !showChatSidebar
+
+  if (group === null || !groupSubpages.includes(page) || slugs[2]) {
+    return <Custom404 />
+  }
+  const { memberIds } = group
+  const isCreator = user && group && user.id === group.creatorId
+  const isMember = user && memberIds.includes(user.id)
+
+  const leaderboard = (
+    <Col>
+      <GroupLeaderboards
+        traderScores={traderScores}
+        creatorScores={creatorScores}
+        topTraders={topTraders}
+        topCreators={topCreators}
+        members={members}
+        user={user}
+      />
+    </Col>
+  )
+
+  const aboutTab = (
+    <Col>
+      <GroupOverview
+        group={group}
+        creator={creator}
+        isCreator={!!isCreator}
+        user={user}
+        members={members}
+      />
+    </Col>
+  )
+
+  const chatTab = (
+    <Col className="">
+      {messages ? (
+        <GroupChat messages={messages} user={user} group={group} tips={tips} />
+      ) : (
+        <LoadingIndicator />
+      )}
+    </Col>
+  )
+
+  const questionsTab = (
+    <SubmissionSearch
+      querySortOptions={{
+        shouldLoadFromStorage: true,
+        defaultSort: getSavedSort() ?? 'newest',
+        defaultFilter: 'open',
+      }}
+      additionalFilter={{ groupSlug: group.slug }}
+    />
+  )
+
+  const tabs = [
+    ...(!showChatTab
+      ? []
+      : [
+          {
+            title: 'Chat',
+            content: chatTab,
+            href: groupPath(group.slug, GROUP_CHAT_SLUG),
+          },
+        ]),
+    {
+      title: 'Markets',
+      content: questionsTab,
+      href: groupPath(group.slug, 'markets'),
+    },
+    {
+      title: 'Leaderboards',
+      content: leaderboard,
+      href: groupPath(group.slug, 'leaderboards'),
+    },
+    {
+      title: 'About',
+      content: aboutTab,
+      href: groupPath(group.slug, 'about'),
+    },
+  ]
+
+  const tabIndex = tabs.map((t) => t.title).indexOf(page ?? GROUP_CHAT_SLUG)
+
+  return (
+    <Page
+      rightSidebar={showChatSidebar ? chatTab : undefined}
+      rightSidebarClassName={showChatSidebar ? '!top-0' : ''}
+      className={showChatSidebar ? '!max-w-7xl !pb-0' : ''}
+    >
+      <SEO
+        title={group.name}
+        description={`Created by ${creator.name}. ${group.about}`}
+        url={groupPath(group.slug)}
+      />
+      <Col className="px-3">
+        <Row className={'items-center justify-between gap-4'}>
+          <div className={'sm:mb-1'}>
+            <div
+              className={'line-clamp-1 my-2 text-2xl text-indigo-700 sm:my-3'}
+            >
+              {group.name}
+            </div>
+            <div className={'hidden sm:block'}>
+              <Linkify text={group.about} />
+            </div>
+          </div>
+        </Row>
+      </Col>
+      <Tabs
+        currentPageForAnalytics={groupPath(group.slug)}
+        className={'mb-0 sm:mb-2'}
+        defaultIndex={tabIndex > 0 ? tabIndex : 0}
+        tabs={tabs}
+      />
+    </Page>
+  )
+}
+
+function JoinOrAddQuestionsButtons(props: {
+  group: Group
+  user: User | null | undefined
+  isMember: boolean
+}) {
+  const { group, user, isMember } = props
+  return user && isMember ? (
+    <Row className={'mt-0 justify-end'}>
+      <AddContractButton group={group} user={user} />
+    </Row>
+  ) : group.anyoneCanJoin ? (
+    <JoinGroupButton group={group} user={user} />
+  ) : null
+}
+
+function GroupOverview(props: {
+  group: Group
+  creator: User
+  user: User | null | undefined
+  isCreator: boolean
+  members: User[]
+}) {
+  const { group, creator, isCreator, user, members } = props
+  const anyoneCanJoinChoices: { [key: string]: string } = {
+    Closed: 'false',
+    Open: 'true',
+  }
+  const [anyoneCanJoin, setAnyoneCanJoin] = useState(group.anyoneCanJoin)
+  function updateAnyoneCanJoin(newVal: boolean) {
+    if (group.anyoneCanJoin == newVal || !isCreator) return
+    setAnyoneCanJoin(newVal)
+    toast.promise(updateGroup(group, { ...group, anyoneCanJoin: newVal }), {
+      loading: 'Updating group...',
+      success: 'Updated group!',
+      error: "Couldn't update group",
+    })
+  }
+
+  const postFix = user ? '?referrer=' + user.username : ''
+  const shareUrl = `https://${ENV_CONFIG.domain}${groupPath(
+    group.slug
+  )}${postFix}`
+
+  return (
+    <>
+      <Col className="gap-2 rounded-b bg-white p-2">
+        <Row className={'flex-wrap justify-between'}>
+          <div className={'inline-flex items-center'}>
+            <div className="mr-1 text-gray-500">Created by</div>
+            <UserLink
+              className="text-neutral"
+              name={creator.name}
+              username={creator.username}
+            />
+          </div>
+          {isCreator ? (
+            <EditGroupButton className={'ml-1'} group={group} />
+          ) : (
+            user &&
+            group.memberIds.includes(user?.id) && (
+              <Row>
+                <JoinOrLeaveGroupButton group={group} />
+              </Row>
+            )
+          )}
+        </Row>
+        <div className={'block sm:hidden'}>
+          <Linkify text={group.about} />
+        </div>
+        <Row className={'items-center gap-1'}>
+          <span className={'text-gray-500'}>Membership</span>
+          {user && user.id === creator.id ? (
+            <ChoicesToggleGroup
+              currentChoice={anyoneCanJoin.toString()}
+              choicesMap={anyoneCanJoinChoices}
+              setChoice={(choice) =>
+                updateAnyoneCanJoin(choice.toString() === 'true')
+              }
+              toggleClassName={'h-10'}
+              className={'ml-2'}
+            />
+          ) : (
+            <span className={'text-gray-700'}>
+              {anyoneCanJoin ? 'Open' : 'Closed'}
+            </span>
+          )}
+        </Row>
+
+        {anyoneCanJoin && user && (
+          <Col className="my-4 px-2">
+            <div className="text-lg">Invite</div>
+            <div className={'mb-2 text-gray-500'}>
+              Invite a friend to this group and get M${REFERRAL_AMOUNT} if they
+              sign up!
+            </div>
+
+            <CopyLinkButton
+              url={shareUrl}
+              tracking="copy group share link"
+              buttonClassName="btn-md rounded-l-none"
+              toastClassName={'-left-28 mt-1'}
+            />
+          </Col>
+        )}
+
+        <Col className={'mt-2'}>
+          <div className="mb-2 text-lg">Members</div>
+          <GroupMemberSearch members={members} group={group} />
+        </Col>
+      </Col>
+    </>
+  )
+}
+
+function SearchBar(props: { setQuery: (query: string) => void }) {
+  const { setQuery } = props
+  const debouncedQuery = debounce(setQuery, 50)
+  return (
+    <div className={'relative'}>
+      <SearchIcon className={'absolute left-5 top-3.5 h-5 w-5 text-gray-500'} />
+      <input
+        type="text"
+        onChange={(e) => debouncedQuery(e.target.value)}
+        placeholder="Find a member"
+        className="input input-bordered mb-4 w-full pl-12"
+      />
+    </div>
+  )
+}
+
+function GroupMemberSearch(props: { members: User[]; group: Group }) {
+  const [query, setQuery] = useState('')
+  const { group } = props
+  let { members } = props
+
+  // Use static members on load, but also listen to member changes:
+  const listenToMembers = useMembers(group)
+  if (listenToMembers) {
+    members = listenToMembers
+  }
+
+  // TODO use find-active-contracts to sort by?
+  const matches = sortBy(members, [(member) => member.name]).filter((m) =>
+    searchInAny(query, m.name, m.username)
+  )
+  const matchLimit = 25
+
+  return (
+    <div>
+      <SearchBar setQuery={setQuery} />
+      <Col className={'gap-2'}>
+        {matches.length > 0 && (
+          <FollowList userIds={matches.slice(0, matchLimit).map((m) => m.id)} />
+        )}
+        {matches.length > 25 && (
+          <div className={'text-center'}>
+            And {matches.length - matchLimit} more...
+          </div>
+        )}
+      </Col>
+    </div>
+  )
+}
+
+function SortedLeaderboard(props: {
+  users: User[]
+  scoreFunction: (user: User) => number
+  title: string
+  header: string
+  maxToShow?: number
+}) {
+  const { users, scoreFunction, title, header, maxToShow } = props
+  const sortedUsers = users.sort((a, b) => scoreFunction(b) - scoreFunction(a))
+  return (
+    <Leaderboard
+      className="max-w-xl"
+      users={sortedUsers}
+      title={title}
+      columns={[
+        { header, renderCell: (user) => formatMoney(scoreFunction(user)) },
+      ]}
+      maxToShow={maxToShow}
+    />
+  )
+}
+
+function GroupLeaderboards(props: {
+  traderScores: { [userId: string]: number }
+  creatorScores: { [userId: string]: number }
+  topTraders: User[]
+  topCreators: User[]
+  members: User[]
+  user: User | null | undefined
+}) {
+  const { traderScores, creatorScores, members, topTraders, topCreators } =
+    props
+  const maxToShow = 50
+  // Consider hiding M$0
+  // If it's just one member (curator), show all bettors, otherwise just show members
+  return (
+    <Col>
+      <div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
+        {members.length > 1 ? (
+          <>
+            <SortedLeaderboard
+              users={members}
+              scoreFunction={(user) => traderScores[user.id] ?? 0}
+              title="🏅 Top traders"
+              header="Profit"
+              maxToShow={maxToShow}
+            />
+            <SortedLeaderboard
+              users={members}
+              scoreFunction={(user) => creatorScores[user.id] ?? 0}
+              title="🏅 Top creators"
+              header="Market volume"
+              maxToShow={maxToShow}
+            />
+          </>
+        ) : (
+          <>
+            <Leaderboard
+              className="max-w-xl"
+              title="🏅 Top traders"
+              users={topTraders}
+              columns={[
+                {
+                  header: 'Profit',
+                  renderCell: (user) => formatMoney(traderScores[user.id] ?? 0),
+                },
+              ]}
+              maxToShow={maxToShow}
+            />
+            <Leaderboard
+              className="max-w-xl"
+              title="🏅 Top creators"
+              users={topCreators}
+              columns={[
+                {
+                  header: 'Market volume',
+                  renderCell: (user) =>
+                    formatMoney(creatorScores[user.id] ?? 0),
+                },
+              ]}
+              maxToShow={maxToShow}
+            />
+          </>
+        )}
+      </div>
+    </Col>
+  )
+}
+
+function AddContractButton(props: { group: Group; user: User }) {
+  const { group, user } = props
+  const [open, setOpen] = useState(false)
+  const [contracts, setContracts] = useState<Contract[]>([])
+  const [loading, setLoading] = useState(false)
+
+  async function addContractToCurrentGroup(contract: Contract) {
+    if (contracts.map((c) => c.id).includes(contract.id)) {
+      setContracts(contracts.filter((c) => c.id !== contract.id))
+    } else setContracts([...contracts, contract])
+  }
+
+  async function doneAddingContracts() {
+    Promise.all(
+      contracts.map(async (contract) => {
+        setLoading(true)
+        await addContractToGroup(group, contract, user.id)
+      })
+    ).then(() => {
+      setLoading(false)
+      setOpen(false)
+      setContracts([])
+    })
+  }
+
+  return (
+    <>
+      <div className={'flex justify-center'}>
+        <button
+          className={clsx('btn btn-sm btn-outline')}
+          onClick={() => setOpen(true)}
+        >
+          <PlusSmIcon className="h-6 w-6" aria-hidden="true" /> question
+        </button>
+      </div>
+
+      <Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
+        <Col className={' w-full gap-4 rounded-md bg-white'}>
+          <Col className="p-8 pb-0">
+            <div className={'text-xl text-indigo-700'}>
+              Add a question to your group
+            </div>
+
+            {contracts.length === 0 ? (
+              <Col className="items-center justify-center">
+                <CreateQuestionButton
+                  user={user}
+                  overrideText={'New question'}
+                  className={'w-48 flex-shrink-0 '}
+                  query={`?groupId=${group.id}`}
+                />
+
+                <div className={'mt-1 text-lg text-gray-600'}>
+                  (or select old questions)
+                </div>
+              </Col>
+            ) : (
+              <Col className={'w-full '}>
+                {!loading ? (
+                  <Row className={'justify-end gap-4'}>
+                    <Button onClick={doneAddingContracts} color={'indigo'}>
+                      Add {contracts.length} question
+                      {contracts.length > 1 && 's'}
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        setContracts([])
+                      }}
+                      color={'gray'}
+                    >
+                      Cancel
+                    </Button>
+                  </Row>
+                ) : (
+                  <Row className={'justify-center'}>
+                    <LoadingIndicator />
+                  </Row>
+                )}
+              </Col>
+            )}
+          </Col>
+
+          <div className={'overflow-y-scroll sm:px-8'}>
+            <SubmissionSearch
+              hideOrderSelector={true}
+              onContractClick={addContractToCurrentGroup}
+              overrideGridClassName={
+                'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
+              }
+              showPlaceHolder={true}
+              cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
+              additionalFilter={{ excludeContractIds: group.contractIds }}
+              highlightOptions={{
+                contractIds: contracts.map((c) => c.id),
+                highlightClassName: '!bg-indigo-100 border-indigo-100 border-2',
+              }}
+            />
+          </div>
+        </Col>
+      </Modal>
+    </>
+  )
+}
+
+function JoinGroupButton(props: {
+  group: Group
+  user: User | null | undefined
+}) {
+  const { group, user } = props
+  function addUserToGroup() {
+    if (user && !group.memberIds.includes(user.id)) {
+      toast.promise(joinGroup(group, user.id), {
+        loading: 'Joining group...',
+        success: 'Joined group!',
+        error: "Couldn't join group, try again?",
+      })
+    }
+  }
+  return (
+    <div>
+      <button
+        onClick={user ? addUserToGroup : firebaseLogin}
+        className={'btn-md btn-outline btn whitespace-nowrap normal-case'}
+      >
+        {user ? 'Join group' : 'Login to join group'}
+      </button>
+    </div>
+  )
+}

web/pages/contests.tsx

@@ -0,0 +1,202 @@
+import { debounce, sortBy } from 'lodash'
+import Link from 'next/link'
+import React, { useEffect, useState } from 'react'
+import { Group } from 'common/group'
+import { CreateGroupButton } from 'web/components/groups/create-group-button'
+import { Col } from 'web/components/layout/col'
+import { Row } from 'web/components/layout/row'
+import { Page } from 'web/components/page'
+import { Title } from 'web/components/title'
+import { useGroups, useMemberGroupIds, useMembers } from 'web/hooks/use-group'
+import { useUser } from 'web/hooks/use-user'
+import { groupPath, listAllGroups } from 'web/lib/firebase/groups'
+import { getUser, User } from 'web/lib/firebase/users'
+import { Tabs } from 'web/components/layout/tabs'
+import { SiteLink } from 'web/components/site-link'
+import clsx from 'clsx'
+import { Avatar } from 'web/components/avatar'
+import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
+import { UserLink } from 'web/components/user-page'
+import { searchInAny } from 'common/util/parse'
+import { SEO } from 'web/components/SEO'
+import { CONTEST_SLUGS, CONTEST_DATA, contestPath } from 'common/contest'
+
+export async function getStaticProps() {
+  const groups = await listAllGroups().catch((_) => [])
+
+  const creators = await Promise.all(
+    groups.map((group) => getUser(group.creatorId))
+  )
+  const creatorsDict = Object.fromEntries(
+    creators.map((creator) => [creator.id, creator])
+  )
+
+  return {
+    props: {
+      groups: groups,
+      creatorsDict,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+export default function Contests(props: {
+  groups: Group[]
+  creatorsDict: { [k: string]: User }
+}) {
+  const [creatorsDict, setCreatorsDict] = useState(props.creatorsDict)
+
+  const contests = (useGroups() ?? props.groups).filter((group) =>
+    CONTEST_SLUGS.includes(group.slug)
+  )
+  //const contests = groups.filter((group) => CONTEST_SLUGS.includes(group.slug))
+  console.log(contests)
+  const user = useUser()
+  const memberGroupIds = useMemberGroupIds(user) || []
+
+  // useEffect(() => {
+  //   // Load User object for creator of new Groups.
+  //   const newGroups = groups.filter(({ creatorId }) => !creatorsDict[creatorId])
+  //   if (newGroups.length > 0) {
+  //     Promise.all(newGroups.map(({ creatorId }) => getUser(creatorId))).then(
+  //       (newUsers) => {
+  //         const newUsersDict = Object.fromEntries(
+  //           newUsers.map((user) => [user.id, user])
+  //         )
+  //         setCreatorsDict({ ...creatorsDict, ...newUsersDict })
+  //       }
+  //     )
+  //   }
+  // }, [creatorsDict, groups])
+
+  const [query, setQuery] = useState('')
+
+  // List groups with the highest question count, then highest member count
+  // TODO use find-active-contracts to sort by?
+  const matches = sortBy(contests, [
+    (contest) => -1 * contest.contractIds.length,
+    (contest) => -1 * contest.memberIds.length,
+  ]).filter((g) =>
+    searchInAny(
+      query,
+      g.name,
+      g.about || '',
+      creatorsDict[g.creatorId].username
+    )
+  )
+
+  const matchesOrderedByRecentActivity = sortBy(contests, [
+    (contest) =>
+      -1 *
+      (contest.mostRecentChatActivityTime ??
+        contest.mostRecentContractAddedTime ??
+        contest.mostRecentActivityTime),
+  ]).filter((c) =>
+    searchInAny(
+      query,
+      c.name,
+      c.about || '',
+      creatorsDict[c.creatorId].username
+    )
+  )
+
+  // Not strictly necessary, but makes the "hold delete" experience less laggy
+  const debouncedQuery = debounce(setQuery, 50)
+
+  return (
+    <Page>
+      <SEO
+        title="Contests"
+        description="Discuss real world contests. Vote on your favorite submissions, get rewarded in mana if you're right."
+        url="/contests"
+      />
+      <Col className="items-center">
+        <Col className="w-full max-w-2xl px-4 sm:px-2">
+          <Col className="mt-12 items-center">
+            <img className="object-fit w-32" src="contests/ManiTrophy.png" />
+            <Title text="Contests" />
+          </Col>
+
+          <div className="mb-6 text-gray-500">
+            Discuss real world contests. Vote on your favorite submissions, get
+            rewarded in mana if you're right.
+          </div>
+
+          <Col>
+            <input
+              type="text"
+              onChange={(e) => debouncedQuery(e.target.value)}
+              placeholder="Search contests"
+              className="input input-bordered mb-4 w-full"
+            />
+
+            <div className="flex flex-wrap justify-center gap-4">
+              {matches.map((contest) => (
+                <ContestCard key={contest.id} contest={contest} />
+              ))}
+            </div>
+          </Col>
+        </Col>
+      </Col>
+    </Page>
+  )
+}
+
+export function ContestCard(props: { contest: Group }) {
+  const { contest } = props
+  const slug = contest.slug
+  return (
+    <Col className="relative min-w-[20rem]  max-w-xs gap-1 rounded-xl bg-white p-8 shadow-md hover:shadow-xl">
+      <Link href={contestPath(contest.slug)}>
+        <a className="absolute left-0 right-0 top-0 bottom-0 z-0" />
+      </Link>
+      <img
+        className="mb-2 h-24 w-24 self-center"
+        src={`contests/${contest.slug}.png`}
+      />
+      <Row className="items-center justify-between gap-2">
+        <span className="text-xl text-indigo-700">{contest.name}</span>
+      </Row>
+      <Row>
+        <div className="text-sm text-gray-500">{contest.about}</div>
+      </Row>
+    </Col>
+  )
+}
+
+function GroupMembersList(props: { group: Group }) {
+  const { group } = props
+  const maxMembersToShow = 3
+  const members = useMembers(group, maxMembersToShow).filter(
+    (m) => m.id !== group.creatorId
+  )
+  if (group.memberIds.length === 1) return <div />
+  return (
+    <div className="text-neutral flex flex-wrap gap-1">
+      <span className={'text-gray-500'}>Other members</span>
+      {members.slice(0, maxMembersToShow).map((member, i) => (
+        <div key={member.id} className={'flex-shrink'}>
+          <UserLink name={member.name} username={member.username} />
+          {members.length > 1 && i !== members.length - 1 && <span>,</span>}
+        </div>
+      ))}
+      {group.memberIds.length > maxMembersToShow && (
+        <span> & {group.memberIds.length - maxMembersToShow} more</span>
+      )}
+    </div>
+  )
+}
+
+export function GroupLinkItem(props: { group: Group; className?: string }) {
+  const { group, className } = props
+
+  return (
+    <SiteLink
+      href={groupPath(group.slug)}
+      className={clsx('z-10 truncate', className)}
+    >
+      {group.name}
+    </SiteLink>
+  )
+}

web/pages/submission-search-firestore.tsx

@@ -0,0 +1,123 @@
+import { Answer } from 'common/answer'
+import { searchInAny } from 'common/util/parse'
+import { sortBy } from 'lodash'
+import { useState } from 'react'
+import { ContractsGrid } from 'web/components/contract/contracts-list'
+import { LoadingIndicator } from 'web/components/loading-indicator'
+import { useContracts } from 'web/hooks/use-contracts'
+import {
+  Sort,
+  useInitialQueryAndSort,
+} from 'web/hooks/use-sort-and-query-params'
+
+const MAX_CONTRACTS_RENDERED = 100
+
+export default function ContractSearchFirestore(props: {
+  querySortOptions?: {
+    defaultSort: Sort
+    shouldLoadFromStorage?: boolean
+  }
+  additionalFilter?: {
+    creatorId?: string
+    tag?: string
+  }
+}) {
+  const contracts = useContracts()
+  const { querySortOptions, additionalFilter } = props
+
+  const { initialSort, initialQuery } = useInitialQueryAndSort(querySortOptions)
+  const [sort, setSort] = useState(initialSort || 'newest')
+  const [query, setQuery] = useState(initialQuery)
+
+  let matches = (contracts ?? []).filter((c) =>
+    searchInAny(
+      query,
+      c.question,
+      c.creatorName,
+      c.lowercaseTags.map((tag) => `#${tag}`).join(' '),
+      ((c as any).answers ?? []).map((answer: Answer) => answer.text).join(' ')
+    )
+  )
+
+  if (sort === 'newest') {
+    matches.sort((a, b) => b.createdTime - a.createdTime)
+  } else if (sort === 'resolve-date') {
+    matches = sortBy(matches, (contract) => -1 * (contract.resolutionTime ?? 0))
+  } else if (sort === 'oldest') {
+    matches.sort((a, b) => a.createdTime - b.createdTime)
+  } else if (sort === 'close-date') {
+    matches = sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
+    matches = sortBy(
+      matches,
+      (contract) =>
+        (sort === 'close-date' ? -1 : 1) * (contract.closeTime ?? Infinity)
+    )
+  } else if (sort === 'most-traded') {
+    matches.sort((a, b) => b.volume - a.volume)
+  } else if (sort === 'score') {
+    matches.sort((a, b) => (b.popularityScore ?? 0) - (a.popularityScore ?? 0))
+  } else if (sort === '24-hour-vol') {
+    // Use lodash for stable sort, so previous sort breaks all ties.
+    matches = sortBy(matches, ({ volume7Days }) => -1 * volume7Days)
+    matches = sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
+  }
+
+  if (additionalFilter) {
+    const { creatorId, tag } = additionalFilter
+
+    if (creatorId) {
+      matches = matches.filter((c) => c.creatorId === creatorId)
+    }
+
+    if (tag) {
+      matches = matches.filter((c) =>
+        c.lowercaseTags.includes(tag.toLowerCase())
+      )
+    }
+  }
+
+  matches = matches.slice(0, MAX_CONTRACTS_RENDERED)
+
+  const showTime = ['close-date', 'closed'].includes(sort)
+    ? 'close-date'
+    : sort === 'resolve-date'
+    ? 'resolve-date'
+    : undefined
+
+  return (
+    <div>
+      {/* Show a search input next to a sort dropdown */}
+      <div className="mt-2 mb-8 flex justify-between gap-2">
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search markets"
+          className="input input-bordered w-full"
+        />
+        <select
+          className="select select-bordered"
+          value={sort}
+          onChange={(e) => setSort(e.target.value as Sort)}
+        >
+          <option value="newest">Newest</option>
+          <option value="oldest">Oldest</option>
+          <option value="score">Most popular</option>
+          <option value="most-traded">Most traded</option>
+          <option value="24-hour-vol">24h volume</option>
+          <option value="close-date">Closing soon</option>
+        </select>
+      </div>
+      {contracts === undefined ? (
+        <LoadingIndicator />
+      ) : (
+        <ContractsGrid
+          contracts={matches}
+          loadMore={() => {}}
+          hasMore={false}
+          showTime={showTime}
+        />
+      )}
+    </div>
+  )
+}