Merge branch 'main' into theoremone

2022-03-07 13:39:00 -08:00 · 2022-03-07 13:39:00 -08:00 · 5d64d53c65
commit 5d64d53c65
parent 5e4a205025 ff92338873
43 changed files with 988 additions and 451 deletions
--- a/common/bet.ts
+++ b/common/bet.ts
@ -4,6 +4,7 @@ export type Bet = {
  contractId: string

  amount: number // bet size; negative if SELL bet
+  loanAmount?: number
  outcome: string
  shares: number // dynamic parimutuel pool weight; negative if SELL bet

@ -21,3 +22,5 @@ export type Bet = {

  createdTime: number
 }
+
+export const MAX_LOAN_PER_CONTRACT = 20
--- a/common/new-bet.ts
+++ b/common/new-bet.ts
@ -1,4 +1,5 @@
-import { Bet } from './bet'
+import * as _ from 'lodash'
+import { Bet, MAX_LOAN_PER_CONTRACT } from './bet'
 import {
  calculateShares,
  getProbability,
@ -11,6 +12,7 @@ export const getNewBinaryBetInfo = (
  user: User,
  outcome: 'YES' | 'NO',
  amount: number,
+  loanAmount: number,
  contract: Contract,
  newBetId: string
 ) => {
@ -45,6 +47,7 @@ export const getNewBinaryBetInfo = (
    userId: user.id,
    contractId: contract.id,
    amount,
+    loanAmount,
    shares,
    outcome,
    probBefore,
@ -52,7 +55,7 @@ export const getNewBinaryBetInfo = (
    createdTime: Date.now(),
  }

-  const newBalance = user.balance - amount
+  const newBalance = user.balance - (amount - loanAmount)

  return { newBet, newPool, newTotalShares, newTotalBets, newBalance }
 }
@ -61,6 +64,7 @@ export const getNewMultiBetInfo = (
  user: User,
  outcome: string,
  amount: number,
+  loanAmount: number,
  contract: Contract,
  newBetId: string
 ) => {
@ -85,6 +89,7 @@ export const getNewMultiBetInfo = (
    userId: user.id,
    contractId: contract.id,
    amount,
+    loanAmount,
    shares,
    outcome,
    probBefore,
@ -92,7 +97,17 @@ export const getNewMultiBetInfo = (
    createdTime: Date.now(),
  }

-  const newBalance = user.balance - amount
+  const newBalance = user.balance - (amount - loanAmount)

  return { newBet, newPool, newTotalShares, newTotalBets, newBalance }
 }
+
+export const getLoanAmount = (yourBets: Bet[], newBetAmount: number) => {
+  const openBets = yourBets.filter((bet) => !bet.isSold && !bet.sale)
+  const prevLoanAmount = _.sumBy(openBets, (bet) => bet.loanAmount ?? 0)
+  const loanAmount = Math.min(
+    newBetAmount,
+    MAX_LOAN_PER_CONTRACT - prevLoanAmount
+  )
+  return loanAmount
+}
--- a/common/payouts.ts
+++ b/common/payouts.ts
@ -138,8 +138,7 @@ export const getPayoutsMultiOutcome = (
    const prob = resolutions[outcome] / probTotal
    const winnings = (shares / sharesByOutcome[outcome]) * prob * poolTotal
    const profit = winnings - amount
-
-    const payout = amount + (1 - FEES) * Math.max(0, profit)
+    const payout = deductFees(amount, winnings)
    return { userId, profit, payout }
  })

@ -161,3 +160,12 @@ export const getPayoutsMultiOutcome = (
    .map(({ userId, payout }) => ({ userId, payout }))
    .concat([{ userId: contract.creatorId, payout: creatorPayout }]) // add creator fee
 }
+
+export const getLoanPayouts = (bets: Bet[]) => {
+  const betsWithLoans = bets.filter((bet) => bet.loanAmount)
+  const betsByUser = _.groupBy(betsWithLoans, (bet) => bet.userId)
+  const loansByUser = _.mapValues(betsByUser, (bets) =>
+    _.sumBy(bets, (bet) => -(bet.loanAmount ?? 0))
+  )
+  return _.toPairs(loansByUser).map(([userId, payout]) => ({ userId, payout }))
+}
--- a/common/scoring.ts
+++ b/common/scoring.ts
@ -45,8 +45,9 @@ export function scoreUsersByContract(contract: Contract, bets: Bet[]) {
  const investments = bets
    .filter((bet) => !bet.sale)
    .map((bet) => {
-      const { userId, amount } = bet
-      return { userId, payout: -amount }
+      const { userId, amount, loanAmount } = bet
+      const payout = -amount - (loanAmount ?? 0)
+      return { userId, payout }
    })

  const netPayouts = [...resolvePayouts, ...salePayouts, ...investments]
--- a/common/sell-bet.ts
+++ b/common/sell-bet.ts
@ -11,7 +11,7 @@ export const getSellBetInfo = (
  newBetId: string
 ) => {
  const { pool, totalShares, totalBets } = contract
-  const { id: betId, amount, shares, outcome } = bet
+  const { id: betId, amount, shares, outcome, loanAmount } = bet

  const adjShareValue = calculateShareValue(contract, bet)

@ -57,7 +57,7 @@ export const getSellBetInfo = (
    },
  }

-  const newBalance = user.balance + saleAmount
+  const newBalance = user.balance + saleAmount - (loanAmount ?? 0)

  return {
    newBet,
--- a/functions/src/create-answer.ts
+++ b/functions/src/create-answer.ts
@ -3,10 +3,11 @@ import * as admin from 'firebase-admin'

 import { Contract } from '../../common/contract'
 import { User } from '../../common/user'
-import { getNewMultiBetInfo } from '../../common/new-bet'
+import { getLoanAmount, getNewMultiBetInfo } from '../../common/new-bet'
 import { Answer } from '../../common/answer'
 import { getContract, getValues } from './utils'
 import { sendNewAnswerEmail } from './emails'
+import { Bet } from '../../common/bet'

 export const createAnswer = functions.runWith({ minInstances: 1 }).https.onCall(
  async (
@ -55,6 +56,11 @@ export const createAnswer = functions.runWith({ minInstances: 1 }).https.onCall(
      if (closeTime && Date.now() > closeTime)
        return { status: 'error', message: 'Trading is closed' }

+      const yourBetsSnap = await transaction.get(
+        contractDoc.collection('bets').where('userId', '==', userId)
+      )
+      const yourBets = yourBetsSnap.docs.map((doc) => doc.data() as Bet)
+
      const [lastAnswer] = await getValues<Answer>(
        firestore
          .collection(`contracts/${contractId}/answers`)
@ -92,8 +98,17 @@ export const createAnswer = functions.runWith({ minInstances: 1 }).https.onCall(
        .collection(`contracts/${contractId}/bets`)
        .doc()

+      const loanAmount = getLoanAmount(yourBets, amount)
+
      const { newBet, newPool, newTotalShares, newTotalBets, newBalance } =
-        getNewMultiBetInfo(user, answerId, amount, contract, newBetDoc.id)
+        getNewMultiBetInfo(
+          user,
+          answerId,
+          amount,
+          loanAmount,
+          contract,
+          newBetDoc.id
+        )

      transaction.create(newBetDoc, newBet)
      transaction.update(contractDoc, {
--- a/functions/src/emails.ts
+++ b/functions/src/emails.ts
@ -223,6 +223,10 @@ export const sendNewAnswerEmail = async (
 ) => {
  // Send to just the creator for now.
  const { creatorId: userId } = contract
+
+  // Don't send the creator's own answers.
+  if (answer.userId === userId) return
+
  const privateUser = await getPrivateUser(userId)
  if (
    !privateUser ||
--- a/functions/src/place-bet.ts
+++ b/functions/src/place-bet.ts
@ -3,7 +3,12 @@ import * as admin from 'firebase-admin'

 import { Contract } from '../../common/contract'
 import { User } from '../../common/user'
-import { getNewBinaryBetInfo, getNewMultiBetInfo } from '../../common/new-bet'
+import {
+  getLoanAmount,
+  getNewBinaryBetInfo,
+  getNewMultiBetInfo,
+} from '../../common/new-bet'
+import { Bet } from '../../common/bet'

 export const placeBet = functions.runWith({ minInstances: 1 }).https.onCall(
  async (
@ -33,9 +38,6 @@ export const placeBet = functions.runWith({ minInstances: 1 }).https.onCall(
        return { status: 'error', message: 'User not found' }
      const user = userSnap.data() as User

-      if (user.balance < amount)
-        return { status: 'error', message: 'Insufficient balance' }
-
      const contractDoc = firestore.doc(`contracts/${contractId}`)
      const contractSnap = await transaction.get(contractDoc)
      if (!contractSnap.exists)
@ -46,6 +48,15 @@ export const placeBet = functions.runWith({ minInstances: 1 }).https.onCall(
      if (closeTime && Date.now() > closeTime)
        return { status: 'error', message: 'Trading is closed' }

+      const yourBetsSnap = await transaction.get(
+        contractDoc.collection('bets').where('userId', '==', userId)
+      )
+      const yourBets = yourBetsSnap.docs.map((doc) => doc.data() as Bet)
+
+      const loanAmount = getLoanAmount(yourBets, amount)
+      if (user.balance < amount - loanAmount)
+        return { status: 'error', message: 'Insufficient balance' }
+
      if (outcomeType === 'FREE_RESPONSE') {
        const answerSnap = await transaction.get(
          contractDoc.collection('answers').doc(outcome)
@ -64,10 +75,18 @@ export const placeBet = functions.runWith({ minInstances: 1 }).https.onCall(
              user,
              outcome as 'YES' | 'NO',
              amount,
+              loanAmount,
+              contract,
+              newBetDoc.id
+            )
+          : getNewMultiBetInfo(
+              user,
+              outcome,
+              amount,
+              loanAmount,
              contract,
              newBetDoc.id
            )
-          : getNewMultiBetInfo(user, outcome, amount, contract, newBetDoc.id)

      transaction.create(newBetDoc, newBet)
      transaction.update(contractDoc, {
--- a/functions/src/resolve-market.ts
+++ b/functions/src/resolve-market.ts
@ -7,7 +7,11 @@ import { User } from '../../common/user'
 import { Bet } from '../../common/bet'
 import { getUser, payUser } from './utils'
 import { sendMarketResolutionEmail } from './emails'
-import { getPayouts, getPayoutsMultiOutcome } from '../../common/payouts'
+import {
+  getLoanPayouts,
+  getPayouts,
+  getPayoutsMultiOutcome,
+} from '../../common/payouts'
 import { removeUndefinedProps } from '../../common/util/object'

 export const resolveMarket = functions
@ -99,13 +103,23 @@ export const resolveMarket = functions
          ? getPayoutsMultiOutcome(resolutions, contract, openBets)
          : getPayouts(outcome, contract, openBets, resolutionProbability)

+      const loanPayouts = getLoanPayouts(openBets)
+
      console.log('payouts:', payouts)

-      const groups = _.groupBy(payouts, (payout) => payout.userId)
+      const groups = _.groupBy(
+        [...payouts, ...loanPayouts],
+        (payout) => payout.userId
+      )
      const userPayouts = _.mapValues(groups, (group) =>
        _.sumBy(group, (g) => g.payout)
      )

+      const groupsWithoutLoans = _.groupBy(payouts, (payout) => payout.userId)
+      const userPayoutsWithoutLoans = _.mapValues(groupsWithoutLoans, (group) =>
+        _.sumBy(group, (g) => g.payout)
+      )
+
      const payoutPromises = Object.entries(userPayouts).map(
        ([userId, payout]) => payUser(userId, payout)
      )
@ -116,7 +130,7 @@ export const resolveMarket = functions

      await sendResolutionEmails(
        openBets,
-        userPayouts,
+        userPayoutsWithoutLoans,
        creator,
        contract,
        outcome,
--- a/functions/src/update-user-metrics.ts
+++ b/functions/src/update-user-metrics.ts
@ -52,7 +52,8 @@ const computeInvestmentValue = async (
    if (!contract || contract.isResolved) return 0
    if (bet.sale || bet.isSold) return 0

-    return calculatePayout(contract, bet, 'MKT')
+    const payout = calculatePayout(contract, bet, 'MKT')
+    return payout - (bet.loanAmount ?? 0)
  })
 }

--- a/functions/src/utils.ts
+++ b/functions/src/utils.ts
@ -68,8 +68,7 @@ const updateUserBalance = (
 }

 export const payUser = (userId: string, payout: number, isDeposit = false) => {
-  if (!isFinite(payout) || payout <= 0)
-    throw new Error('Payout is not positive: ' + payout)
+  if (!isFinite(payout)) throw new Error('Payout is not finite: ' + payout)

  return updateUserBalance(userId, payout, isDeposit)
 }
--- a/web/components/activity-feed.tsx
+++ b/web/components/activity-feed.tsx
@ -1,9 +1,12 @@
 import _ from 'lodash'
-import { ContractFeed, ContractSummaryFeed } from '../components/contract-feed'
-import { Page } from '../components/page'
+import {
+  ContractActivityFeed,
+  ContractFeed,
+  ContractSummaryFeed,
+} from './contract-feed'
 import { Contract } from '../lib/firebase/contracts'
 import { Comment } from '../lib/firebase/comments'
-import { Col } from '../components/layout/col'
+import { Col } from './layout/col'
 import { Bet } from '../../common/bet'

 const MAX_ACTIVE_CONTRACTS = 75
@ -72,30 +75,44 @@ export function findActiveContracts(

 export function ActivityFeed(props: {
  contracts: Contract[]
-  contractBets: Bet[][]
-  contractComments: Comment[][]
+  recentBets: Bet[]
+  recentComments: Comment[]
+  loadBetAndCommentHistory?: boolean
 }) {
-  const { contracts, contractBets, contractComments } = props
+  const { contracts, recentBets, recentComments, loadBetAndCommentHistory } =
+    props

-  return contracts.length > 0 ? (
+  const groupedBets = _.groupBy(recentBets, (bet) => bet.contractId)
+  const groupedComments = _.groupBy(
+    recentComments,
+    (comment) => comment.contractId
+  )
+
+  return (
    <Col className="items-center">
-      <Col className="w-full max-w-3xl">
+      <Col className="w-full">
        <Col className="w-full divide-y divide-gray-300 self-center bg-white">
-          {contracts.map((contract, i) => (
+          {contracts.map((contract) => (
            <div key={contract.id} className="py-6 px-2 sm:px-4">
-              <ContractFeed
-                contract={contract}
-                bets={contractBets[i]}
-                comments={contractComments[i]}
-                feedType="activity"
-              />
+              {loadBetAndCommentHistory ? (
+                <ContractFeed
+                  contract={contract}
+                  bets={groupedBets[contract.id] ?? []}
+                  comments={groupedComments[contract.id] ?? []}
+                  feedType="activity"
+                />
+              ) : (
+                <ContractActivityFeed
+                  contract={contract}
+                  bets={groupedBets[contract.id] ?? []}
+                  comments={groupedComments[contract.id] ?? []}
+                />
+              )}
            </div>
          ))}
        </Col>
      </Col>
    </Col>
-  ) : (
-    <></>
  )
 }

@ -116,11 +133,3 @@ export function SummaryActivityFeed(props: { contracts: Contract[] }) {
    </Col>
  )
 }
-
-export default function ActivityPage() {
-  return (
-    <Page>
-      <ActivityFeed contracts={[]} contractBets={[]} contractComments={[]} />
-    </Page>
-  )
-}
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@ -1,15 +1,20 @@
 import clsx from 'clsx'
+import _ from 'lodash'
 import { useUser } from '../hooks/use-user'
 import { formatMoney } from '../../common/util/format'
-import { AddFundsButton } from './add-funds-button'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
+import { useUserContractBets } from '../hooks/use-user-bets'
+import { MAX_LOAN_PER_CONTRACT } from '../../common/bet'
+import { InfoTooltip } from './info-tooltip'
+import { Spacer } from './layout/spacer'

 export function AmountInput(props: {
  amount: number | undefined
  onChange: (newAmount: number | undefined) => void
  error: string | undefined
  setError: (error: string | undefined) => void
+  contractIdForLoan: string | undefined
  minimumAmount?: number
  disabled?: boolean
  className?: string
@ -22,6 +27,7 @@ export function AmountInput(props: {
    onChange,
    error,
    setError,
+    contractIdForLoan,
    disabled,
    className,
    inputClassName,
@ -31,14 +37,32 @@ export function AmountInput(props: {

  const user = useUser()

+  const userBets = useUserContractBets(user?.id, contractIdForLoan) ?? []
+  const openUserBets = userBets.filter((bet) => !bet.isSold && !bet.sale)
+  const prevLoanAmount = _.sumBy(openUserBets, (bet) => bet.loanAmount ?? 0)
+
+  const loanAmount = contractIdForLoan
+    ? Math.min(amount ?? 0, MAX_LOAN_PER_CONTRACT - prevLoanAmount)
+    : 0
+
  const onAmountChange = (str: string) => {
+    if (str.includes('-')) {
+      onChange(undefined)
+      return
+    }
    const amount = parseInt(str.replace(/[^\d]/, ''))

    if (str && isNaN(amount)) return
+    if (amount >= 10 ** 9) return

    onChange(str ? amount : undefined)

-    if (user && user.balance < amount) {
+    const loanAmount = contractIdForLoan
+      ? Math.min(amount, MAX_LOAN_PER_CONTRACT - prevLoanAmount)
+      : 0
+    const amountNetLoan = amount - loanAmount
+
+    if (user && user.balance < amountNetLoan) {
      setError('Insufficient balance')
    } else if (minimumAmount && amount < minimumAmount) {
      setError('Minimum amount: ' + formatMoney(minimumAmount))
@ -47,7 +71,8 @@ export function AmountInput(props: {
    }
  }

-  const remainingBalance = Math.max(0, (user?.balance ?? 0) - (amount ?? 0))
+  const amountNetLoan = (amount ?? 0) - loanAmount
+  const remainingBalance = Math.max(0, (user?.balance ?? 0) - amountNetLoan)

  return (
    <Col className={className}>
@ -68,19 +93,34 @@ export function AmountInput(props: {
          onChange={(e) => onAmountChange(e.target.value)}
        />
      </label>
+
+      <Spacer h={4} />
+
      {error && (
-        <div className="mr-auto mt-4 self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
+        <div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
          {error}
        </div>
      )}
      {user && (
-        <Col className="mt-3 text-sm">
-          <div className="mb-2 whitespace-nowrap text-gray-500">
-            Remaining balance
-          </div>
-          <Row className="gap-4">
-            <div>{formatMoney(Math.floor(remainingBalance))}</div>
-            {user.balance !== 1000 && <AddFundsButton />}
+        <Col className="gap-3 text-sm">
+          {contractIdForLoan && (
+            <Row className="items-center justify-between gap-2 text-gray-500">
+              <Row className="items-center gap-2">
+                Amount loaned{' '}
+                <InfoTooltip
+                  text={`In every market, you get an interest-free loan on the first ${formatMoney(
+                    MAX_LOAN_PER_CONTRACT
+                  )}.`}
+                />
+              </Row>
+              <span className="text-neutral">{formatMoney(loanAmount)}</span>{' '}
+            </Row>
+          )}
+          <Row className="items-center justify-between gap-2 text-gray-500">
+            Remaining balance{' '}
+            <span className="text-neutral">
+              {formatMoney(Math.floor(remainingBalance))}
+            </span>
          </Row>
        </Col>
      )}
--- a/web/components/analytics/charts.tsx
+++ b/web/components/analytics/charts.tsx
@ -0,0 +1,49 @@
+import { ResponsiveLine } from '@nivo/line'
+import dayjs from 'dayjs'
+import _ from 'lodash'
+import { useWindowSize } from '../../hooks/use-window-size'
+
+export function DailyCountChart(props: {
+  startDate: number
+  dailyCounts: number[]
+  small?: boolean
+}) {
+  const { dailyCounts, startDate, small } = props
+  const { width } = useWindowSize()
+
+  const dates = dailyCounts.map((_, i) =>
+    dayjs(startDate).add(i, 'day').toDate()
+  )
+
+  const points = _.zip(dates, dailyCounts).map(([date, betCount]) => ({
+    x: date,
+    y: betCount,
+  }))
+  const data = [{ id: 'Count', data: points, color: '#11b981' }]
+
+  return (
+    <div
+      className="w-full"
+      style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
+    >
+      <ResponsiveLine
+        data={data}
+        yScale={{ type: 'linear', stacked: false }}
+        xScale={{
+          type: 'time',
+        }}
+        axisBottom={{
+          format: (date) => dayjs(date).format('MMM DD'),
+        }}
+        colors={{ datum: 'color' }}
+        pointSize={width && width >= 800 ? 10 : 0}
+        pointBorderWidth={1}
+        pointBorderColor="#fff"
+        enableSlices="x"
+        enableGridX={!!width && width >= 800}
+        enableArea
+        margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
+      />
+    </div>
+  )
+}
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@ -30,8 +30,9 @@ export function AnswerBetPanel(props: {
  answer: Answer
  contract: Contract
  closePanel: () => void
+  className?: string
 }) {
-  const { answer, contract, closePanel } = props
+  const { answer, contract, closePanel, className } = props
  const { id: answerId } = answer

  const user = useUser()
@ -48,11 +49,6 @@ export function AnswerBetPanel(props: {
  async function submitBet() {
    if (!user || !betAmount) return

-    if (user.balance < betAmount) {
-      setError('Insufficient balance')
-      return
-    }
-
    setError(undefined)
    setIsSubmitting(true)

@ -97,12 +93,12 @@ export function AnswerBetPanel(props: {
  const currentReturnPercent = (currentReturn * 100).toFixed() + '%'

  return (
-    <Col className="items-start px-2 pb-2 pt-4 sm:pt-0">
-      <Row className="self-stretch items-center justify-between">
+    <Col className={clsx('px-2 pb-2 pt-4 sm:pt-0', className)}>
+      <Row className="items-center justify-between self-stretch">
        <div className="text-xl">Buy this answer</div>

        <button className="btn-ghost btn-circle" onClick={closePanel}>
-          <XIcon className="w-8 h-8 text-gray-500 mx-auto" aria-hidden="true" />
+          <XIcon className="mx-auto h-8 w-8 text-gray-500" aria-hidden="true" />
        </button>
      </Row>
      <div className="my-3 text-left text-sm text-gray-500">Amount </div>
@ -114,40 +110,44 @@ export function AnswerBetPanel(props: {
        setError={setError}
        disabled={isSubmitting}
        inputRef={inputRef}
+        contractIdForLoan={contract.id}
      />
+      <Col className="mt-3 w-full gap-3">
+        <Row className="items-center justify-between text-sm">
+          <div className="text-gray-500">Probability</div>
+          <Row>
+            <div>{formatPercent(initialProb)}</div>
+            <div className="mx-2">→</div>
+            <div>{formatPercent(resultProb)}</div>
+          </Row>
+        </Row>

-      <Spacer h={4} />
-
-      <div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
-      <Row>
-        <div>{formatPercent(initialProb)}</div>
-        <div className="mx-2">→</div>
-        <div>{formatPercent(resultProb)}</div>
-      </Row>
-
-      <Spacer h={4} />
-
-      <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
-        Payout if chosen
-        <InfoTooltip
-          text={`Current payout for ${formatWithCommas(
-            shares
-          )} / ${formatWithCommas(
-            shares + contract.totalShares[answerId]
-          )} shares`}
-        />
-      </Row>
-      <div>
-        {formatMoney(currentPayout)}
-        &nbsp; <span>(+{currentReturnPercent})</span>
-      </div>
+        <Row className="items-start justify-between gap-2 text-sm">
+          <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
+            <div>Payout if chosen</div>
+            <InfoTooltip
+              text={`Current payout for ${formatWithCommas(
+                shares
+              )} / ${formatWithCommas(
+                shares + contract.totalShares[answerId]
+              )} shares`}
+            />
+          </Row>
+          <Row className="flex-wrap items-end justify-end gap-2">
+            <span className="whitespace-nowrap">
+              {formatMoney(currentPayout)}
+            </span>
+            <span>(+{currentReturnPercent})</span>
+          </Row>
+        </Row>
+      </Col>

      <Spacer h={6} />

      {user ? (
        <button
          className={clsx(
-            'btn',
+            'btn self-stretch',
            betDisabled ? 'btn-disabled' : 'btn-primary',
            isSubmitting ? 'loading' : ''
          )}
@ -157,7 +157,7 @@ export function AnswerBetPanel(props: {
        </button>
      ) : (
        <button
-          className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
+          className="btn self-stretch whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
          onClick={firebaseLogin}
        >
          Sign in to trade!
--- a/web/components/answers/answer-item.tsx
+++ b/web/components/answers/answer-item.tsx
@ -97,6 +97,7 @@ export function AnswerItem(props: {
          answer={answer}
          contract={contract}
          closePanel={() => setIsBetting(false)}
+          className="sm:w-72"
        />
      ) : (
        <Row className="items-center justify-end gap-4 self-end sm:self-start">
--- a/web/components/answers/answer-resolve-panel.tsx
+++ b/web/components/answers/answer-resolve-panel.tsx
@ -71,9 +71,9 @@ export function AnswerResolvePanel(props: {
      : 'btn-disabled'

  return (
-    <Col className="gap-4 p-4 bg-gray-50 rounded">
+    <Col className="gap-4 rounded bg-gray-50 p-4">
      <div>Resolve your market</div>
-      <Col className="sm:flex-row sm:items-center gap-4">
+      <Col className="gap-4 sm:flex-row sm:items-center">
        <ChooseCancelSelector
          className="sm:!flex-row sm:items-center"
          selected={resolveOption}
--- a/web/components/answers/answers-panel.tsx
+++ b/web/components/answers/answers-panel.tsx
@ -95,9 +95,9 @@ export function AnswersPanel(props: { contract: Contract; answers: Answer[] }) {
      ))}

      {sortedAnswers.length === 0 ? (
-        <div className="text-gray-500 p-4">No answers yet...</div>
+        <div className="p-4 text-gray-500">No answers yet...</div>
      ) : (
-        <div className="text-gray-500 self-end p-4">
+        <div className="self-end p-4 text-gray-500">
          None of the above:{' '}
          {formatPercent(getOutcomeProbability(contract.totalShares, '0'))}
        </div>
--- a/web/components/answers/create-answer-panel.tsx
+++ b/web/components/answers/create-answer-panel.tsx
@ -36,6 +36,7 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
  const submitAnswer = async () => {
    if (canSubmit) {
      setIsSubmitting(true)
+
      const result = await createAnswer({
        contractId: contract.id,
        text,
@ -48,7 +49,7 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
        setText('')
        setBetAmount(10)
        setAmountError(undefined)
-      }
+      } else setAmountError(result.message)
    }
  }

@ -72,7 +73,7 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
  const currentReturnPercent = (currentReturn * 100).toFixed() + '%'

  return (
-    <Col className="gap-4 p-4 bg-gray-50 rounded">
+    <Col className="gap-4 rounded bg-gray-50 p-4">
      <Col className="flex-1 gap-2">
        <div className="mb-1">Add your answer</div>
        <Textarea
@ -86,14 +87,14 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
        <div />
        <Col
          className={clsx(
-            'sm:flex-row gap-4',
+            'gap-4 sm:flex-row sm:items-end',
            text ? 'justify-between' : 'self-end'
          )}
        >
          {text && (
            <>
-              <Col className="gap-2 mt-1">
-                <div className="text-gray-500 text-sm">Buy amount</div>
+              <Col className="mt-1 gap-2">
+                <div className="text-sm text-gray-500">Buy amount</div>
                <AmountInput
                  amount={betAmount}
                  onChange={setBetAmount}
@ -101,34 +102,42 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
                  setError={setAmountError}
                  minimumAmount={1}
                  disabled={isSubmitting}
+                  contractIdForLoan={contract.id}
                />
              </Col>
-              <Col className="gap-2 mt-1">
-                <div className="text-sm text-gray-500">Implied probability</div>
-                <Row>
-                  <div>{formatPercent(0)}</div>
-                  <div className="mx-2">→</div>
-                  <div>{formatPercent(resultProb)}</div>
+              <Col className="gap-3">
+                <Row className="items-center justify-between text-sm">
+                  <div className="text-gray-500">Probability</div>
+                  <Row>
+                    <div>{formatPercent(0)}</div>
+                    <div className="mx-2">→</div>
+                    <div>{formatPercent(resultProb)}</div>
+                  </Row>
                </Row>
-                <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
-                  Payout if chosen
-                  <InfoTooltip
-                    text={`Current payout for ${formatWithCommas(
-                      shares
-                    )} / ${formatWithCommas(shares)} shares`}
-                  />
+
+                <Row className="justify-between gap-2 text-sm">
+                  <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
+                    <div>Payout if chosen</div>
+                    <InfoTooltip
+                      text={`Current payout for ${formatWithCommas(
+                        shares
+                      )} / ${formatWithCommas(shares)} shares`}
+                    />
+                  </Row>
+                  <Row className="flex-wrap items-end justify-end gap-2">
+                    <span className="whitespace-nowrap">
+                      {formatMoney(currentPayout)}
+                    </span>
+                    <span>(+{currentReturnPercent})</span>
+                  </Row>
                </Row>
-                <div>
-                  {formatMoney(currentPayout)}
-                  &nbsp; <span>(+{currentReturnPercent})</span>
-                </div>
              </Col>
            </>
          )}
          {user ? (
            <button
              className={clsx(
-                'btn self-end mt-2',
+                'btn mt-2',
                canSubmit ? 'btn-outline' : 'btn-disabled',
                isSubmitting && 'loading'
              )}
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@ -78,11 +78,6 @@ export function BetPanel(props: {
  async function submitBet() {
    if (!user || !betAmount) return

-    if (user.balance < betAmount) {
-      setError('Insufficient balance')
-      return
-    }
-
    setError(undefined)
    setIsSubmitting(true)

@ -144,7 +139,6 @@ export function BetPanel(props: {
        text={panelTitle}
      />

-      {/* <div className="mt-2 mb-1 text-sm text-gray-500">Outcome</div> */}
      <YesNoSelector
        className="mb-4"
        selected={betChoice}
@ -160,45 +154,49 @@ export function BetPanel(props: {
        setError={setError}
        disabled={isSubmitting}
        inputRef={inputRef}
+        contractIdForLoan={contract.id}
      />

-      <Spacer h={4} />
+      <Col className="mt-3 w-full gap-3">
+        <Row className="items-center justify-between text-sm">
+          <div className="text-gray-500">Probability</div>
+          <Row>
+            <div>{formatPercent(initialProb)}</div>
+            <div className="mx-2">→</div>
+            <div>{formatPercent(resultProb)}</div>
+          </Row>
+        </Row>

-      <div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
-      <Row>
-        <div>{formatPercent(initialProb)}</div>
-        <div className="mx-2">→</div>
-        <div>{formatPercent(resultProb)}</div>
-      </Row>
-
-      {betChoice && (
-        <>
-          <Spacer h={4} />
-          <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
-            Payout if <OutcomeLabel outcome={betChoice} />
+        <Row className="items-start justify-between gap-2 text-sm">
+          <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
+            <div>
+              Payout if <OutcomeLabel outcome={betChoice ?? 'YES'} />
+            </div>
            <InfoTooltip
              text={`Current payout for ${formatWithCommas(
                shares
              )} / ${formatWithCommas(
                shares +
-                  totalShares[betChoice] -
-                  (phantomShares ? phantomShares[betChoice] : 0)
+                  totalShares[betChoice ?? 'YES'] -
+                  (phantomShares ? phantomShares[betChoice ?? 'YES'] : 0)
              )} ${betChoice} shares`}
            />
          </Row>
-          <div>
-            {formatMoney(currentPayout)}
-            &nbsp; <span>(+{currentReturnPercent})</span>
-          </div>
-        </>
-      )}
+          <Row className="flex-wrap items-end justify-end gap-2">
+            <span className="whitespace-nowrap">
+              {formatMoney(currentPayout)}
+            </span>
+            <span>(+{currentReturnPercent})</span>
+          </Row>
+        </Row>
+      </Col>

-      <Spacer h={6} />
+      <Spacer h={8} />

      {user && (
        <button
          className={clsx(
-            'btn',
+            'btn flex-1',
            betDisabled
              ? 'btn-disabled'
              : betChoice === 'YES'
@ -213,7 +211,7 @@ export function BetPanel(props: {
      )}
      {user === null && (
        <button
-          className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
+          className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
          onClick={firebaseLogin}
        >
          Sign in to trade!
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@ -82,7 +82,8 @@ export function BetsList(props: { user: User }) {
        if (bet.isSold || bet.sale) return 0

        const contract = contracts.find((c) => c.id === contractId)
-        return contract ? calculatePayout(contract, bet, 'MKT') : 0
+        const payout = contract ? calculatePayout(contract, bet, 'MKT') : 0
+        return payout - (bet.loanAmount ?? 0)
      })
    }
  )
@ -126,8 +127,8 @@ export function BetsList(props: { user: User }) {
  const totalPortfolio = currentBetsValue + user.balance

  const totalPnl = totalPortfolio - user.totalDeposits
-  const totalProfit = (totalPnl / user.totalDeposits) * 100
-  const investedProfit =
+  const totalProfitPercent = (totalPnl / user.totalDeposits) * 100
+  const investedProfitPercent =
    ((currentBetsValue - currentInvestment) / currentInvestment) * 100

  return (
@ -135,17 +136,17 @@ export function BetsList(props: { user: User }) {
      <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
        <Row className="gap-8">
          <Col>
-            <div className="text-sm text-gray-500">Invested</div>
+            <div className="text-sm text-gray-500">Investment value</div>
            <div className="text-lg">
              {formatMoney(currentBetsValue)}{' '}
-              <ProfitBadge profitPercent={investedProfit} />
+              <ProfitBadge profitPercent={investedProfitPercent} />
            </div>
          </Col>
          <Col>
-            <div className="text-sm text-gray-500">Total portfolio</div>
+            <div className="text-sm text-gray-500">Total profit</div>
            <div className="text-lg">
-              {formatMoney(totalPortfolio)}{' '}
-              <ProfitBadge profitPercent={totalProfit} />
+              {formatMoney(totalPnl)}{' '}
+              <ProfitBadge profitPercent={totalProfitPercent} />
            </div>
          </Col>
        </Row>
@ -457,6 +458,7 @@ function BetRow(props: { bet: Bet; contract: Contract; saleBet?: Bet }) {
    shares,
    isSold,
    isAnte,
+    loanAmount,
  } = bet

  const { isResolved, closeTime } = contract
@ -464,7 +466,7 @@ function BetRow(props: { bet: Bet; contract: Contract; saleBet?: Bet }) {

  const saleAmount = saleBet?.sale?.amount

-  const saleDisplay = bet.isAnte ? (
+  const saleDisplay = isAnte ? (
    'ANTE'
  ) : saleAmount !== undefined ? (
    <>{formatMoney(saleAmount)} (sold)</>
@ -491,7 +493,10 @@ function BetRow(props: { bet: Bet; contract: Contract; saleBet?: Bet }) {
      <td>
        <OutcomeLabel outcome={outcome} />
      </td>
-      <td>{formatMoney(amount)}</td>
+      <td>
+        {formatMoney(amount)}
+        {loanAmount ? ` (${formatMoney(loanAmount ?? 0)} loan)` : ''}
+      </td>
      <td>{saleDisplay}</td>
      {!isResolved && <td>{payoutIfChosenDisplay}</td>}
      <td>
@ -510,21 +515,23 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
  }, [])

  const { contract, bet } = props
-  const isBinary = contract.outcomeType === 'BINARY'
+  const { outcome, shares, loanAmount } = bet
+
  const [isSubmitting, setIsSubmitting] = useState(false)

  const initialProb = getOutcomeProbability(
    contract.totalShares,
-    bet.outcome === 'NO' ? 'YES' : bet.outcome
+    outcome === 'NO' ? 'YES' : outcome
  )

  const outcomeProb = getProbabilityAfterSale(
    contract.totalShares,
-    bet.outcome,
-    bet.shares
+    outcome,
+    shares
  )

  const saleAmount = calculateSaleAmount(contract, bet)
+  const profit = saleAmount - bet.amount

  return (
    <ConfirmationButton
@ -533,7 +540,7 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
        className: clsx('btn-sm', isSubmitting && 'btn-disabled loading'),
        label: 'Sell',
      }}
-      submitBtn={{ className: 'btn-primary' }}
+      submitBtn={{ className: 'btn-primary', label: 'Sell' }}
      onSubmit={async () => {
        setIsSubmitting(true)
        await sellBet({ contractId: contract.id, betId: bet.id })
@ -541,17 +548,21 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
      }}
    >
      <div className="mb-4 text-2xl">
-        Sell <OutcomeLabel outcome={bet.outcome} />
-      </div>
-      <div>
-        Do you want to sell {formatWithCommas(bet.shares)} shares of{' '}
-        <OutcomeLabel outcome={bet.outcome} /> for {formatMoney(saleAmount)}?
+        Sell {formatWithCommas(shares)} shares of{' '}
+        <OutcomeLabel outcome={outcome} /> for {formatMoney(saleAmount)}?
      </div>
+      {!!loanAmount && (
+        <div className="mt-2">
+          You will also pay back {formatMoney(loanAmount)} of your loan, for a
+          net of {formatMoney(saleAmount - loanAmount)}.
+        </div>
+      )}

-      <div className="mt-2 mb-1 text-sm text-gray-500">
-        ({isBinary ? 'Updated' : <OutcomeLabel outcome={bet.outcome} />}{' '}
-        probability: {formatPercent(initialProb)} → {formatPercent(outcomeProb)}
-        )
+      <div className="mt-2 mb-1 text-sm">
+        {profit > 0 ? 'Profit' : 'Loss'}: {formatMoney(profit).replace('-', '')}
+        <br />
+        Market probability: {formatPercent(initialProb)} →{' '}
+        {formatPercent(outcomeProb)}
      </div>
    </ConfirmationButton>
  )
--- a/web/components/client-render.tsx
+++ b/web/components/client-render.tsx
@ -0,0 +1,13 @@
+// Adapted from https://stackoverflow.com/a/50884055/1222351
+import { useEffect, useState } from 'react'
+
+export function ClientRender(props: { children: React.ReactNode }) {
+  const { children } = props
+
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted ? <>{children}</> : null
+}
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@ -150,7 +150,8 @@ function AbbrContractDetails(props: {
        ) : showCloseTime ? (
          <Row className="gap-1">
            <ClockIcon className="h-5 w-5" />
-            Closes {fromNow(closeTime || 0)}
+            {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
+            {fromNow(closeTime || 0)}
          </Row>
        ) : (
          <Row className="gap-1">
@ -312,7 +313,7 @@ function EditableCloseDate(props: {
            className="btn btn-xs btn-ghost"
            onClick={() => setIsEditingCloseTime(true)}
          >
-            <PencilIcon className="inline h-4 w-4 mr-2" /> Edit
+            <PencilIcon className="mr-2 inline h-4 w-4" /> Edit
          </button>
        ))}
    </>
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@ -25,7 +25,7 @@ import {
 import { useUser } from '../hooks/use-user'
 import { Linkify } from './linkify'
 import { Row } from './layout/row'
-import { createComment } from '../lib/firebase/comments'
+import { createComment, MAX_COMMENT_LENGTH } from '../lib/firebase/comments'
 import { useComments } from '../hooks/use-comments'
 import { formatMoney } from '../../common/util/format'
 import { ResolutionOrChance } from './contract-card'
@ -135,8 +135,9 @@ function FeedBet(props: { activityItem: any; feedType: FeedType }) {
                className="textarea textarea-bordered w-full"
                placeholder="Add a comment..."
                rows={3}
+                maxLength={MAX_COMMENT_LENGTH}
                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && e.ctrlKey) {
+                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
                    submitComment()
                  }
                }}
@ -181,7 +182,7 @@ function EditContract(props: {
          e.target.setSelectionRange(text.length, text.length)
        }
        onKeyDown={(e) => {
-          if (e.key === 'Enter' && e.ctrlKey) {
+          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
            onSave(text)
          }
        }}
@ -289,7 +290,10 @@ function TruncatedComment(props: {
  }

  return (
-    <div className="mt-2 whitespace-pre-line break-words text-gray-700">
+    <div
+      className="mt-2 whitespace-pre-line break-words text-gray-700"
+      style={{ fontSize: 15 }}
+    >
      <Linkify text={truncated} />
      {truncated != comment && (
        <SiteLink href={moreHref} className="text-indigo-700">
@ -300,8 +304,11 @@ function TruncatedComment(props: {
  )
 }

-function FeedQuestion(props: { contract: Contract }) {
-  const { contract } = props
+function FeedQuestion(props: {
+  contract: Contract
+  showDescription?: boolean
+}) {
+  const { contract, showDescription } = props
  const { creatorName, creatorUsername, question, resolution, outcomeType } =
    contract
  const { truePool } = contractMetrics(contract)
@ -336,22 +343,34 @@ function FeedQuestion(props: { contract: Contract }) {
            {closeMessage}
          </span>
        </div>
-        <Col className="mb-4 items-start justify-between gap-2 sm:flex-row sm:gap-4">
-          <SiteLink
-            href={contractPath(contract)}
-            className="text-lg text-indigo-700 sm:text-xl"
-          >
-            {question}
-          </SiteLink>
+        <Col className="items-start justify-between gap-2 sm:flex-row sm:gap-4">
+          <Col>
+            <SiteLink
+              href={contractPath(contract)}
+              className="text-lg text-indigo-700 sm:text-xl"
+            >
+              {question}
+            </SiteLink>
+            {!showDescription && (
+              <SiteLink
+                href={contractPath(contract)}
+                className="relative top-4 self-end text-sm sm:self-start"
+              >
+                <div className="pb-1.5 text-gray-500">See more...</div>
+              </SiteLink>
+            )}
+          </Col>
          {(isBinary || resolution) && (
            <ResolutionOrChance className="items-center" contract={contract} />
          )}
        </Col>
-        <TruncatedComment
-          comment={contract.description}
-          moreHref={contractPath(contract)}
-          shouldTruncate
-        />
+        {showDescription && (
+          <TruncatedComment
+            comment={contract.description}
+            moreHref={contractPath(contract)}
+            shouldTruncate
+          />
+        )}
      </div>
    </>
  )
@ -680,6 +699,7 @@ type ActivityItem = {
    | 'close'
    | 'resolve'
    | 'expand'
+    | undefined
 }

 type FeedType =
@ -690,64 +710,24 @@ type FeedType =
  // Grouped for a multi-category outcome
  | 'multi'

-export function ContractFeed(props: {
+function FeedItems(props: {
  contract: Contract
-  bets: Bet[]
-  comments: Comment[]
+  items: ActivityItem[]
  feedType: FeedType
+  setExpanded: (expanded: boolean) => void
  outcome?: string // Which multi-category outcome to filter
  betRowClassName?: string
 }) {
-  const { contract, feedType, outcome, betRowClassName } = props
-  const { id, outcomeType } = contract
+  const { contract, items, feedType, outcome, setExpanded, betRowClassName } =
+    props
+  const { outcomeType } = contract
  const isBinary = outcomeType === 'BINARY'

-  const [expanded, setExpanded] = useState(false)
-  const user = useUser()
-
-  let bets = useBets(contract.id) ?? props.bets
-  bets = isBinary
-    ? bets.filter((bet) => !bet.isAnte)
-    : bets.filter((bet) => !(bet.isAnte && (bet.outcome as string) === '0'))
-
-  if (feedType === 'multi') {
-    bets = bets.filter((bet) => bet.outcome === outcome)
-  }
-
-  const comments = useComments(id) ?? props.comments
-
-  const groupWindow = feedType == 'activity' ? 10 * DAY_IN_MS : DAY_IN_MS
-
-  const allItems = [
-    { type: 'start', id: 0 },
-    ...groupBets(bets, comments, groupWindow, user?.id),
-  ]
-  if (contract.closeTime && contract.closeTime <= Date.now()) {
-    allItems.push({ type: 'close', id: `${contract.closeTime}` })
-  }
-  if (contract.resolution) {
-    allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
-  }
-  if (feedType === 'multi') {
-    // Hack to add some more padding above the 'multi' feedType, by adding a null item
-    allItems.unshift({ type: '', id: -1 })
-  }
-
-  // If there are more than 5 items, only show the first, an expand item, and last 3
-  let items = allItems
-  if (!expanded && allItems.length > 5 && feedType == 'activity') {
-    items = [
-      allItems[0],
-      { type: 'expand', id: 'expand' },
-      ...allItems.slice(-3),
-    ]
-  }
-
  return (
    <div className="flow-root pr-2 md:pr-0">
-      <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
+      <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
        {items.map((activityItem, activityItemIdx) => (
-          <div key={activityItem.id} className="relative pb-8">
+          <div key={activityItem.id} className="relative pb-6">
            {activityItemIdx !== items.length - 1 ? (
              <span
                className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
@ -791,6 +771,117 @@ export function ContractFeed(props: {
  )
 }

+export function ContractFeed(props: {
+  contract: Contract
+  bets: Bet[]
+  comments: Comment[]
+  feedType: FeedType
+  outcome?: string // Which multi-category outcome to filter
+  betRowClassName?: string
+}) {
+  const { contract, feedType, outcome, betRowClassName } = props
+  const { id, outcomeType } = contract
+  const isBinary = outcomeType === 'BINARY'
+
+  const [expanded, setExpanded] = useState(false)
+  const user = useUser()
+
+  let bets = useBets(contract.id) ?? props.bets
+  bets = isBinary
+    ? bets.filter((bet) => !bet.isAnte)
+    : bets.filter((bet) => !(bet.isAnte && (bet.outcome as string) === '0'))
+
+  if (feedType === 'multi') {
+    bets = bets.filter((bet) => bet.outcome === outcome)
+  }
+
+  const comments = useComments(id) ?? props.comments
+
+  const groupWindow = feedType == 'activity' ? 10 * DAY_IN_MS : DAY_IN_MS
+
+  const allItems: ActivityItem[] = [
+    { type: 'start', id: '0' },
+    ...groupBets(bets, comments, groupWindow, user?.id),
+  ]
+  if (contract.closeTime && contract.closeTime <= Date.now()) {
+    allItems.push({ type: 'close', id: `${contract.closeTime}` })
+  }
+  if (contract.resolution) {
+    allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
+  }
+  if (feedType === 'multi') {
+    // Hack to add some more padding above the 'multi' feedType, by adding a null item
+    allItems.unshift({ type: undefined, id: '-1' })
+  }
+
+  // If there are more than 5 items, only show the first, an expand item, and last 3
+  let items = allItems
+  if (!expanded && allItems.length > 5 && feedType == 'activity') {
+    items = [
+      allItems[0],
+      { type: 'expand', id: 'expand' },
+      ...allItems.slice(-3),
+    ]
+  }
+
+  return (
+    <FeedItems
+      contract={contract}
+      items={items}
+      feedType={feedType}
+      setExpanded={setExpanded}
+      betRowClassName={betRowClassName}
+      outcome={outcome}
+    />
+  )
+}
+
+export function ContractActivityFeed(props: {
+  contract: Contract
+  bets: Bet[]
+  comments: Comment[]
+  betRowClassName?: string
+}) {
+  const { contract, betRowClassName, bets, comments } = props
+
+  const user = useUser()
+
+  bets.sort((b1, b2) => b1.createdTime - b2.createdTime)
+  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
+
+  const allItems: ActivityItem[] = [
+    { type: 'start', id: '0' },
+    ...groupBets(bets, comments, DAY_IN_MS, user?.id),
+  ]
+  if (contract.closeTime && contract.closeTime <= Date.now()) {
+    allItems.push({ type: 'close', id: `${contract.closeTime}` })
+  }
+  if (contract.resolution) {
+    allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
+  }
+
+  // Remove all but last bet group.
+  const betGroups = allItems.filter((item) => item.type === 'betgroup')
+  const lastBetGroup = betGroups[betGroups.length - 1]
+  const filtered = allItems.filter(
+    (item) => item.type !== 'betgroup' || item.id === lastBetGroup?.id
+  )
+
+  // Only show the first item plus the last three items.
+  const items =
+    filtered.length > 3 ? [filtered[0], ...filtered.slice(-3)] : filtered
+
+  return (
+    <FeedItems
+      contract={contract}
+      items={items}
+      feedType="activity"
+      setExpanded={() => {}}
+      betRowClassName={betRowClassName}
+    />
+  )
+}
+
 export function ContractSummaryFeed(props: {
  contract: Contract
  betRowClassName?: string
@ -804,7 +895,7 @@ export function ContractSummaryFeed(props: {
      <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
        <div className="relative pb-8">
          <div className="relative flex items-start space-x-3">
-            <FeedQuestion contract={contract} />
+            <FeedQuestion contract={contract} showDescription />
          </div>
        </div>
      </div>
--- a/web/components/contract-prob-graph.tsx
+++ b/web/components/contract-prob-graph.tsx
@ -83,7 +83,7 @@ export function ContractProbGraph(props: { contract: Contract; bets: Bet[] }) {
          format: (time) => formatTime(+time, lessThanAWeek),
        }}
        colors={{ datum: 'color' }}
-        pointSize={10}
+        pointSize={bets.length > 100 ? 0 : 10}
        pointBorderWidth={1}
        pointBorderColor="#fff"
        enableSlices="x"
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@ -229,11 +229,13 @@ export function SearchableGrid(props: {
    )
  } else if (sort === 'oldest') {
    matches.sort((a, b) => a.createdTime - b.createdTime)
-  } else if (sort === 'close-date') {
+  } else if (sort === 'close-date' || sort === 'closed') {
    matches = _.sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
    matches = _.sortBy(matches, (contract) => contract.closeTime)
-    // Hide contracts that have already closed
-    matches = matches.filter(({ closeTime }) => (closeTime || 0) > Date.now())
+    const hideClosed = sort === 'closed'
+    matches = matches.filter(
+      ({ closeTime }) => closeTime && closeTime > Date.now() !== hideClosed
+    )
  } else if (sort === 'most-traded') {
    matches.sort(
      (a, b) => contractMetrics(b).truePool - contractMetrics(a).truePool
@ -272,6 +274,7 @@ export function SearchableGrid(props: {
          <option value="most-traded">Most traded</option>
          <option value="24-hour-vol">24h volume</option>
          <option value="close-date">Closing soon</option>
+          <option value="closed">Closed</option>
          <option value="newest">Newest</option>
          <option value="oldest">Oldest</option>

@ -289,7 +292,7 @@ export function SearchableGrid(props: {
      ) : (
        <ContractsGrid
          contracts={matches}
-          showCloseTime={sort == 'close-date'}
+          showCloseTime={['close-date', 'closed'].includes(sort)}
        />
      )}
    </div>
--- a/web/components/datetime-tooltip.tsx
+++ b/web/components/datetime-tooltip.tsx
@ -2,6 +2,7 @@ import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
 import advanced from 'dayjs/plugin/advancedFormat'
+import { ClientRender } from './client-render'

 dayjs.extend(utc)
 dayjs.extend(timezone)
@ -19,13 +20,15 @@ export function DateTimeTooltip(props: {

  return (
    <>
-      <span
-        className="tooltip hidden cursor-default sm:inline-block"
-        data-tip={toolTip}
-      >
-        {props.children}
-      </span>
-      <span className="sm:hidden whitespace-nowrap">{props.children}</span>
+      <ClientRender>
+        <span
+          className="tooltip hidden cursor-default sm:inline-block"
+          data-tip={toolTip}
+        >
+          {props.children}
+        </span>
+      </ClientRender>
+      <span className="whitespace-nowrap sm:hidden">{props.children}</span>
    </>
  )
 }
--- a/web/components/fast-fold-following.tsx
+++ b/web/components/fast-fold-following.tsx
@ -88,7 +88,7 @@ export const FastFoldFollowing = (props: {
        user={user}
        followedFoldSlugs={followedFoldSlugs}
        folds={[
-          { name: 'Politics', slug: 'politics' },
+          { name: 'Russia/Ukraine', slug: 'russia-ukraine' },
          { name: 'Crypto', slug: 'crypto' },
          { name: 'Sports', slug: 'sports' },
          { name: 'Science', slug: 'science' },
--- a/web/components/feed-create.tsx
+++ b/web/components/feed-create.tsx
@ -1,5 +1,6 @@
+import { SparklesIcon, XIcon } from '@heroicons/react/solid'
 import { Avatar } from './avatar'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { NewContract } from '../pages/create'
 import { firebaseLogin, User } from '../lib/firebase/users'
@ -7,44 +8,51 @@ import { ContractsGrid } from './contracts-list'
 import { Contract } from '../../common/contract'
 import { Col } from './layout/col'
 import clsx from 'clsx'
+import { Row } from './layout/row'

 export function FeedPromo(props: { hotContracts: Contract[] }) {
  const { hotContracts } = props

  return (
    <>
-      <Col className="w-full bg-white p-6 sm:rounded-lg">
+      <Col className="m-6 mb-1 text-center sm:m-12">
        <h1 className="mt-4 text-4xl sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
-          <div className="mb-2">Create your own</div>
-          <div className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text  font-bold text-transparent">
-            prediction markets
+          <div className="font-semibold sm:mb-2">
+            A{' '}
+            <span className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
+              market{' '}
+            </span>
+            for
+          </div>
+          <div className="font-semibold">
+            every{' '}
+            <span className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
+              prediction
+            </span>
          </div>
        </h1>
        <Spacer h={6} />
        <div className="mb-4 text-gray-500">
-          Find prediction markets run by your favorite creators, or make your
-          own.
+          Find prediction markets on any topic imaginable. Or create your own!
          <br />
-          Sign up to get M$ 1,000 for free and start trading!
+          Sign up to get M$ 1,000 and start trading.
          <br />
        </div>
        <Spacer h={6} />
        <button
-          className="btn btn-lg self-center border-none bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+          className="btn btn-lg self-center border-none bg-gradient-to-r from-teal-500 to-green-500  normal-case hover:from-teal-600 hover:to-green-600"
          onClick={firebaseLogin}
        >
-          Sign up now
+          Sign up for free
        </button>{' '}
      </Col>

-      <Spacer h={6} />
-      {/* 
-      <TagsList
-        className="mt-2"
-        tags={['#politics', '#crypto', '#covid', '#sports', '#meta']}
-      />
-      <Spacer h={6} /> */}
+      <Spacer h={12} />

+      <Row className="m-4 mb-6 items-center gap-1 text-xl font-semibold text-gray-800">
+        <SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
+        Trending today
+      </Row>
      <ContractsGrid
        contracts={hotContracts?.slice(0, 10) || []}
        showHotVolume
@ -61,7 +69,8 @@ export default function FeedCreate(props: {
 }) {
  const { user, tag, className } = props
  const [question, setQuestion] = useState('')
-  const [focused, setFocused] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const inputRef = useRef<HTMLTextAreaElement | null>()

  const placeholders = [
    'Will anyone I know get engaged this year?',
@ -78,60 +87,60 @@ export default function FeedCreate(props: {
  )
  const placeholder = props.placeholder ?? `e.g. ${placeholders[randIndex]}`

-  const panelRef = useRef<HTMLElement | null>()
-  const inputRef = useRef<HTMLTextAreaElement | null>()
-
-  useEffect(() => {
-    const onClick = () => {
-      if (
-        panelRef.current &&
-        document.activeElement &&
-        !panelRef.current.contains(document.activeElement)
-      )
-        setFocused(false)
-    }
-    window.addEventListener('click', onClick)
-    return () => window.removeEventListener('click', onClick)
-  })
-
  return (
    <div
      className={clsx(
-        'mt-2 w-full rounded bg-white p-4 shadow-md',
-        question || focused ? 'ring-2 ring-indigo-300' : '',
+        'mt-2 w-full cursor-text rounded bg-white p-4 shadow-md',
+        isExpanded ? 'ring-2 ring-indigo-300' : '',
        className
      )}
-      onClick={() => !focused && inputRef.current?.focus()}
-      ref={(elem) => (panelRef.current = elem)}
+      onClick={() => {
+        !isExpanded && inputRef.current?.focus()
+      }}
    >
      <div className="relative flex items-start space-x-3">
        <Avatar username={user?.username} avatarUrl={user?.avatarUrl} noLink />

        <div className="min-w-0 flex-1">
-          {/* TODO: Show focus, for accessibility */}
-          <div>
+          <Row className="justify-between">
            <p className="my-0.5 text-sm">Ask a question... </p>
-          </div>
+            {isExpanded && (
+              <button
+                className="btn btn-xs btn-circle btn-ghost rounded"
+                onClick={() => setIsExpanded(false)}
+              >
+                <XIcon
+                  className="mx-auto h-6 w-6 text-gray-500"
+                  aria-hidden="true"
+                />
+              </button>
+            )}
+          </Row>
          <textarea
            ref={inputRef as any}
-            className="w-full resize-none appearance-none border-transparent bg-transparent p-0 text-lg text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent sm:text-xl"
+            className={clsx(
+              'w-full resize-none appearance-none border-transparent bg-transparent p-0 text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent',
+              question && 'text-lg sm:text-xl',
+              !question && 'text-base sm:text-lg'
+            )}
            placeholder={placeholder}
            value={question}
+            rows={question.length > 68 ? 4 : 2}
            onClick={(e) => e.stopPropagation()}
            onChange={(e) => setQuestion(e.target.value.replace('\n', ''))}
-            onFocus={() => setFocused(true)}
+            onFocus={() => setIsExpanded(true)}
          />
        </div>
      </div>

      {/* Hide component instead of deleting, so edits to NewContract don't get lost */}
-      <div className={question || focused ? '' : 'hidden'}>
+      <div className={isExpanded ? '' : 'hidden'}>
        <NewContract question={question} tag={tag} />
      </div>

      {/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
-      {!(question || focused) && (
-        <div className="flex justify-end">
+      {!isExpanded && (
+        <div className="flex justify-end sm:-mt-4">
          <button className="btn btn-sm" disabled>
            Create Market
          </button>
--- a/web/hooks/use-find-active-contracts.ts
+++ b/web/hooks/use-find-active-contracts.ts
@ -4,11 +4,11 @@ import { useMemo, useRef } from 'react'
 import { Fold } from '../../common/fold'
 import { User } from '../../common/user'
 import { filterDefined } from '../../common/util/array'
-import { Bet, getRecentBets } from '../lib/firebase/bets'
+import { Bet } from '../lib/firebase/bets'
 import { Comment, getRecentComments } from '../lib/firebase/comments'
 import { Contract, getActiveContracts } from '../lib/firebase/contracts'
 import { listAllFolds } from '../lib/firebase/folds'
-import { findActiveContracts } from '../pages/activity'
+import { findActiveContracts } from '../components/activity-feed'
 import { useInactiveContracts } from './use-contracts'
 import { useFollowedFolds } from './use-fold'
 import { useUserBetContracts } from './use-user-bets'
@ -20,12 +20,9 @@ export const getAllContractInfo = async () => {
    listAllFolds().catch(() => []),
  ])

-  const [recentBets, recentComments] = await Promise.all([
-    getRecentBets(),
-    getRecentComments(),
-  ])
+  const recentComments = await getRecentComments()

-  return { contracts, recentBets, recentComments, folds }
+  return { contracts, recentComments, folds }
 }

 export const useFilterYourContracts = (
--- a/web/hooks/use-sort-and-query-params.tsx
+++ b/web/hooks/use-sort-and-query-params.tsx
@ -10,6 +10,7 @@ export type Sort =
  | 'most-traded'
  | '24-hour-vol'
  | 'close-date'
+  | 'closed'
  | 'resolved'
  | 'all'

--- a/web/hooks/use-user-bets.ts
+++ b/web/hooks/use-user-bets.ts
@ -1,6 +1,10 @@
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
-import { Bet, listenForUserBets } from '../lib/firebase/bets'
+import {
+  Bet,
+  listenForUserBets,
+  listenForUserContractBets,
+} from '../lib/firebase/bets'

 export const useUserBets = (userId: string | undefined) => {
  const [bets, setBets] = useState<Bet[] | undefined>(undefined)
@ -12,6 +16,20 @@ export const useUserBets = (userId: string | undefined) => {
  return bets
 }

+export const useUserContractBets = (
+  userId: string | undefined,
+  contractId: string | undefined
+) => {
+  const [bets, setBets] = useState<Bet[] | undefined>(undefined)
+
+  useEffect(() => {
+    if (userId && contractId)
+      return listenForUserContractBets(userId, contractId, setBets)
+  }, [userId, contractId])
+
+  return bets
+}
+
 export const useUserBetContracts = (userId: string | undefined) => {
  const [contractIds, setContractIds] = useState<string[] | undefined>()

--- a/web/lib/firebase/bets.ts
+++ b/web/lib/firebase/bets.ts
@ -74,6 +74,21 @@ export function listenForUserBets(
  })
 }

+export function listenForUserContractBets(
+  userId: string,
+  contractId: string,
+  setBets: (bets: Bet[]) => void
+) {
+  const betsQuery = query(
+    collection(db, 'contracts', contractId, 'bets'),
+    where('userId', '==', userId)
+  )
+  return listenForValues<Bet>(betsQuery, (bets) => {
+    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
+    setBets(bets)
+  })
+}
+
 export function withoutAnteBets(contract: Contract, bets?: Bet[]) {
  const { createdTime } = contract

@ -88,3 +103,24 @@ export function withoutAnteBets(contract: Contract, bets?: Bet[]) {

  return bets?.filter((bet) => !bet.isAnte) ?? []
 }
+
+const getBetsQuery = (startTime: number, endTime: number) =>
+  query(
+    collectionGroup(db, 'bets'),
+    where('createdTime', '>=', startTime),
+    where('createdTime', '<', endTime),
+    orderBy('createdTime', 'asc')
+  )
+
+export async function getDailyBets(startTime: number, numberOfDays: number) {
+  const query = getBetsQuery(startTime, startTime + DAY_IN_MS * numberOfDays)
+  const bets = await getValues<Bet>(query)
+
+  const betsByDay = _.range(0, numberOfDays).map(() => [] as Bet[])
+  for (const bet of bets) {
+    const dayIndex = Math.floor((bet.createdTime - startTime) / DAY_IN_MS)
+    betsByDay[dayIndex].push(bet)
+  }
+
+  return betsByDay
+}
--- a/web/lib/firebase/comments.ts
+++ b/web/lib/firebase/comments.ts
@ -7,6 +7,7 @@ import {
  where,
  orderBy,
 } from 'firebase/firestore'
+import _ from 'lodash'

 import { getValues, listenForValues } from './utils'
 import { db } from './init'
@ -14,6 +15,8 @@ import { User } from '../../../common/user'
 import { Comment } from '../../../common/comment'
 export type { Comment }

+export const MAX_COMMENT_LENGTH = 10000
+
 export async function createComment(
  contractId: string,
  betId: string,
@ -27,7 +30,7 @@ export async function createComment(
    contractId,
    betId,
    userId: commenter.id,
-    text,
+    text: text.slice(0, MAX_COMMENT_LENGTH),
    createdTime: Date.now(),
    userName: commenter.name,
    userUsername: commenter.username,
@ -87,3 +90,30 @@ export function listenForRecentComments(
 ) {
  return listenForValues<Comment>(recentCommentsQuery, setComments)
 }
+
+const getCommentsQuery = (startTime: number, endTime: number) =>
+  query(
+    collectionGroup(db, 'comments'),
+    where('createdTime', '>=', startTime),
+    where('createdTime', '<', endTime),
+    orderBy('createdTime', 'asc')
+  )
+
+export async function getDailyComments(
+  startTime: number,
+  numberOfDays: number
+) {
+  const query = getCommentsQuery(
+    startTime,
+    startTime + DAY_IN_MS * numberOfDays
+  )
+  const comments = await getValues<Comment>(query)
+
+  const commentsByDay = _.range(0, numberOfDays).map(() => [] as Comment[])
+  for (const comment of comments) {
+    const dayIndex = Math.floor((comment.createdTime - startTime) / DAY_IN_MS)
+    commentsByDay[dayIndex].push(comment)
+  }
+
+  return commentsByDay
+}
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@ -209,3 +209,32 @@ export async function getClosingSoonContracts() {
    (contract) => contract.closeTime
  )
 }
+
+const getContractsQuery = (startTime: number, endTime: number) =>
+  query(
+    collection(db, 'contracts'),
+    where('createdTime', '>=', startTime),
+    where('createdTime', '<', endTime),
+    orderBy('createdTime', 'asc')
+  )
+
+const DAY_IN_MS = 24 * 60 * 60 * 1000
+
+export async function getDailyContracts(
+  startTime: number,
+  numberOfDays: number
+) {
+  const query = getContractsQuery(
+    startTime,
+    startTime + DAY_IN_MS * numberOfDays
+  )
+  const contracts = await getValues<Contract>(query)
+
+  const contractsByDay = _.range(0, numberOfDays).map(() => [] as Contract[])
+  for (const contract of contracts) {
+    const dayIndex = Math.floor((contract.createdTime - startTime) / DAY_IN_MS)
+    contractsByDay[dayIndex].push(contract)
+  }
+
+  return contractsByDay
+}
--- a/web/lib/firebase/utils.ts
+++ b/web/lib/firebase/utils.ts
@ -1,6 +1,5 @@
 import { db } from './init'
 import {
-  doc,
  getDoc,
  getDocs,
  onSnapshot,
@ -22,7 +21,9 @@ export function listenForValue<T>(
  docRef: DocumentReference,
  setValue: (value: T | null) => void
 ) {
-  return onSnapshot(docRef, (snapshot) => {
+  // Exclude cached snapshots so we only trigger on fresh data.
+  // includeMetadataChanges ensures listener is called even when server data is the same as cached data.
+  return onSnapshot(docRef, { includeMetadataChanges: true }, (snapshot) => {
    if (snapshot.metadata.fromCache) return

    const value = snapshot.exists() ? (snapshot.data() as T) : null
@ -34,7 +35,9 @@ export function listenForValues<T>(
  query: Query,
  setValues: (values: T[]) => void
 ) {
-  return onSnapshot(query, (snapshot) => {
+  // Exclude cached snapshots so we only trigger on fresh data.
+  // includeMetadataChanges ensures listener is called even when server data is the same as cached data.
+  return onSnapshot(query, { includeMetadataChanges: true }, (snapshot) => {
    if (snapshot.metadata.fromCache) return

    const values = snapshot.docs.map((doc) => doc.data() as T)
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@ -127,7 +127,7 @@ export default function ContractPage(props: {
      )}

      <Col className="w-full justify-between md:flex-row">
-        <div className="flex-[3] rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
+        <div className="flex-1 rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
          <ContractOverview
            contract={contract}
            bets={bets ?? []}
@ -154,9 +154,9 @@ export default function ContractPage(props: {
          <>
            <div className="md:ml-6" />

-            <Col className="flex-1">
+            <Col className="flex-shrink-0 md:w-[310px]">
              {allowTrade && (
-                <BetPanel className="hidden lg:inline" contract={contract} />
+                <BetPanel className="hidden lg:flex" contract={contract} />
              )}
              {allowResolve && (
                <ResolutionPanel creator={user} contract={contract} />
--- a/web/pages/about.tsx
+++ b/web/pages/about.tsx
@ -118,6 +118,13 @@ function Contents() {
          </p>
        </li>
      </ol>
+      <p>
+        More questions? Check out{' '}
+        <a href="https://outsidetheasylum.blog/manifold-markets-faq/">
+          this community-driven FAQ
+        </a>
+        !
+      </p>
      <h3 id="can-prediction-markets-work-without-real-money-">
        Can prediction markets work without real money?
      </h3>
@ -148,6 +155,40 @@ function Contents() {
        </a>
        .
      </p>
+
+      <h3 id="why-is-this-important-">Why is this important?</h3>
+      <p>
+        Prediction markets aggregate and reveal crucial information that would
+        not otherwise be known. They are a bottom-up mechanism that can
+        influence everything from politics, economics, and business, to
+        scientific research and education.
+      </p>
+      <p>
+        Prediction markets can predict{' '}
+        <a href="https://www.pnas.org/content/112/50/15343">
+          which research papers will replicate
+        </a>
+        ; which drug is the most effective; which policy would generate the most
+        tax revenue; which charity will be underfunded; or which startup idea is
+        the most promising. By surfacing and quantifying our collective
+        knowledge, we as a society become wiser.
+      </p>
+
+      <h3 id="how-does-betting-work">How does betting work?</h3>
+      <ul>
+        <li>Markets are structured around a question with a binary outcome.</li>
+        <li>
+          Traders can place a bet on either YES or NO. The trader receives some
+          shares of the betting pool. The number of shares depends on the
+          current probability.
+        </li>
+        <li>
+          When the market is resolved, the traders who bet on the correct
+          outcome are paid out of the final pool in proportion to the number of
+          shares they own.
+        </li>
+      </ul>
+
      <h3 id="how-are-markets-resolved-">How are markets resolved?</h3>
      <p>
        The creator of the prediction market decides the outcome and earns{' '}
@ -166,29 +207,9 @@ function Contents() {
        or even personal. (E.g. &quot;Will I enjoy participating in the
        Metaverse in 2023?&quot;)
      </p>
-      <h3 id="why-is-this-important-">Why is this important?</h3>
-      <p>
-        Prediction markets aggregate and reveal crucial information that would
-        not otherwise be known. They are a bottom-up mechanism that can
-        influence everything from politics, economics, and business, to
-        scientific research and education.
-      </p>
-      <p>
-        Prediction markets can predict{' '}
-        <a href="https://www.pnas.org/content/112/50/15343">
-          which research papers will replicate
-        </a>
-        ; which drug is the most effective; which policy would generate the most
-        tax revenue; which charity will be underfunded; or, which startup idea
-        is the most promising.
-      </p>
-      <p>
-        By surfacing and quantifying our collective knowledge, we as a society
-        become wiser.
-      </p>
-      <h3 id="how-is-this-different-from-metaculus-or-hypermind-">
+      {/* <h3 id="how-is-this-different-from-metaculus-or-hypermind-">
        How is this different from Metaculus or Hypermind?
-      </h3>
+      </h3> */}
      {/* <p>
        We believe that in order to get the best results, you have to have skin
        in the game. We require that people use real money to buy the currency
@ -199,28 +220,13 @@ function Contents() {
        carefully and can&#39;t rig the outcome by creating multiple accounts.
        The result is more accurate predictions.
      </p> */}
-      <p>
+      {/* <p>
        Manifold Markets is focused on accessibility and allowing anyone to
        quickly create and judge a prediction market. When we all have the power
        to create and share prediction markets in seconds and apply our own
        judgment on the outcome, it leads to a qualitative shift in the number,
        variety, and usefulness of prediction markets.
-      </p>
-
-      <h3 id="how-does-betting-work">How does betting work?</h3>
-      <ul>
-        <li>Markets are structured around a question with a binary outcome.</li>
-        <li>
-          Traders can place a bet on either YES or NO. The trader receives some
-          shares of the betting pool. The number of shares depends on the
-          current probability.
-        </li>
-        <li>
-          When the market is resolved, the traders who bet on the correct
-          outcome are paid out of the final pool in proportion to the number of
-          shares they own.
-        </li>
-      </ul>
+      </p> */}

      <h3 id="type-of-market-maker">What kind of betting system do you use?</h3>
      <p>
@ -249,6 +255,20 @@ function Contents() {
        to find out more!
      </p>

+      <h3 id="private-markets">Can I create private markets?</h3>
+      <p>
+        Soon! We're running a pilot version of Manifold for Teams - private
+        Manifold instances where you can discuss internal topics and predict on
+        outcomes for your organization.
+      </p>
+      <p>
+        If this sounds like something you’d want,{' '}
+        <a href="https://docs.google.com/forms/d/e/1FAIpQLSfM_rxRHemCjKE6KPiYXGyP2nBSInZNKn_wc7yS1-rvlLAVnA/viewform?usp=sf_link">
+          join the waitlist here
+        </a>
+        !
+      </p>
+
      <h3 id="who-are-we-">Who are we?</h3>
      <p>Manifold Markets is currently a team of three:</p>
      <ul>
@ -296,19 +316,24 @@ function Contents() {
      <h2 id="further-reading">Further Reading</h2>

      <ul>
+        <li>
+          <a href="https://outsidetheasylum.blog/manifold-markets-faq/">
+            An in-depth, unofficial FAQ by Isaac King
+          </a>
+        </li>
        <li>
          <a href="https://manifoldmarkets.notion.site/Technical-Guide-to-Manifold-Markets-b9b48a09ea1f45b88d991231171730c5">
-            Technical Guide to Manifold Markets
+            How Manifold's market maker works
+          </a>
+        </li>
+        <li>
+          <a href="https://astralcodexten.substack.com/p/play-money-and-reputation-systems">
+            Scott Alexander on play-money prediction markets
          </a>
        </li>
        <li>
          <a href="https://sideways-view.com/2019/10/27/prediction-markets-for-internet-points/">
-            Paul Christiano: Prediction markets for internet points
-          </a>
-        </li>
-        <li>
-          <a href="https://thezvi.wordpress.com/2021/12/02/covid-prediction-markets-at-polymarket/">
-            Zvi Mowshowitz on resolving prediction markets
+            Paul Christiano on prediction markets for internet points
          </a>
        </li>
      </ul>
--- a/web/pages/analytics.tsx
+++ b/web/pages/analytics.tsx
@ -1,17 +1,121 @@
+import dayjs from 'dayjs'
+import _ from 'lodash'
+import { DailyCountChart } from '../components/analytics/charts'
+import { Col } from '../components/layout/col'
+import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
+import { Title } from '../components/title'
+import { getDailyBets } from '../lib/firebase/bets'
+import { getDailyComments } from '../lib/firebase/comments'
+import { getDailyContracts } from '../lib/firebase/contracts'

-export default function Analytics() {
-  // Edit dashboard at https://datastudio.google.com/u/0/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3/edit
+export async function getStaticProps() {
+  const numberOfDays = 80
+  const today = dayjs(dayjs().format('YYYY-MM-DD'))
+  const startDate = today.subtract(numberOfDays, 'day')
+
+  const [dailyBets, dailyContracts, dailyComments] = await Promise.all([
+    getDailyBets(startDate.valueOf(), numberOfDays),
+    getDailyContracts(startDate.valueOf(), numberOfDays),
+    getDailyComments(startDate.valueOf(), numberOfDays),
+  ])
+
+  const dailyBetCounts = dailyBets.map((bets) => bets.length)
+  const dailyContractCounts = dailyContracts.map(
+    (contracts) => contracts.length
+  )
+  const dailyCommentCounts = dailyComments.map((comments) => comments.length)
+
+  const dailyActiveUsers = _.zip(dailyContracts, dailyBets, dailyComments).map(
+    ([contracts, bets, comments]) => {
+      const creatorIds = (contracts ?? []).map((c) => c.creatorId)
+      const betUserIds = (bets ?? []).map((bet) => bet.userId)
+      const commentUserIds = (comments ?? []).map((comment) => comment.userId)
+      return _.uniq([...creatorIds, ...betUserIds, commentUserIds]).length
+    }
+  )
+
+  return {
+    props: {
+      startDate: startDate.valueOf(),
+      dailyActiveUsers,
+      dailyBetCounts,
+      dailyContractCounts,
+      dailyCommentCounts,
+    },
+    revalidate: 12 * 60 * 60, // regenerate after half a day
+  }
+}
+
+export default function Analytics(props: {
+  startDate: number
+  dailyActiveUsers: number[]
+  dailyBetCounts: number[]
+  dailyContractCounts: number[]
+  dailyCommentCounts: number[]
+}) {
  return (
    <Page>
-      <iframe
-        className="w-full"
-        height={2200}
-        src="https://datastudio.google.com/embed/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3"
-        frameBorder="0"
-        style={{ border: 0 }}
-        allowFullScreen
-      ></iframe>
+      <CustomAnalytics {...props} />
+      <Spacer h={8} />
+      <FirebaseAnalytics />
    </Page>
  )
 }
+
+function CustomAnalytics(props: {
+  startDate: number
+  dailyActiveUsers: number[]
+  dailyBetCounts: number[]
+  dailyContractCounts: number[]
+  dailyCommentCounts: number[]
+}) {
+  const {
+    startDate,
+    dailyActiveUsers,
+    dailyBetCounts,
+    dailyContractCounts,
+    dailyCommentCounts,
+  } = props
+  return (
+    <Col>
+      <Title text="Active users" />
+      <DailyCountChart dailyCounts={dailyActiveUsers} startDate={startDate} />
+
+      <Title text="Bets count" />
+      <DailyCountChart
+        dailyCounts={dailyBetCounts}
+        startDate={startDate}
+        small
+      />
+
+      <Title text="Markets count" />
+      <DailyCountChart
+        dailyCounts={dailyContractCounts}
+        startDate={startDate}
+        small
+      />
+
+      <Title text="Comments count" />
+      <DailyCountChart
+        dailyCounts={dailyCommentCounts}
+        startDate={startDate}
+        small
+      />
+    </Col>
+  )
+}
+
+function FirebaseAnalytics() {
+  // Edit dashboard at https://datastudio.google.com/u/0/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3/edit
+  return (
+    <iframe
+      className="w-full"
+      height={2200}
+      src="https://datastudio.google.com/embed/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3"
+      frameBorder="0"
+      style={{ border: 0 }}
+      allowFullScreen
+    />
+  )
+}
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@ -137,7 +137,7 @@ export function NewContract(props: { question: string; tag?: string }) {
        <span className="mb-1">Answer type</span>
      </label>
      <Row className="form-control gap-2">
-        <label className="cursor-pointer label gap-2">
+        <label className="label cursor-pointer gap-2">
          <input
            className="radio"
            type="radio"
@ -149,7 +149,7 @@ export function NewContract(props: { question: string; tag?: string }) {
          <span className="label-text">Yes / No</span>
        </label>

-        <label className="cursor-pointer label gap-2">
+        <label className="label cursor-pointer gap-2">
          <input
            className="radio"
            type="radio"
@ -248,6 +248,7 @@ export function NewContract(props: { question: string; tag?: string }) {
          error={anteError}
          setError={setAnteError}
          disabled={isSubmitting}
+          contractIdForLoan={undefined}
        />
      </div>

--- a/web/pages/fold/[...slugs]/index.tsx
+++ b/web/pages/fold/[...slugs]/index.tsx
@ -5,19 +5,17 @@ import { Fold } from '../../../../common/fold'
 import { Comment } from '../../../../common/comment'
 import { Page } from '../../../components/page'
 import { Title } from '../../../components/title'
-import {
-  Bet,
-  getRecentContractBets,
-  listAllBets,
-} from '../../../lib/firebase/bets'
-import { listAllComments } from '../../../lib/firebase/comments'
+import { Bet, listAllBets } from '../../../lib/firebase/bets'
 import { Contract } from '../../../lib/firebase/contracts'
 import {
  foldPath,
  getFoldBySlug,
  getFoldContracts,
 } from '../../../lib/firebase/folds'
-import { ActivityFeed, findActiveContracts } from '../../activity'
+import {
+  ActivityFeed,
+  findActiveContracts,
+} from '../../../components/activity-feed'
 import { TagsList } from '../../../components/tags-list'
 import { Row } from '../../../components/layout/row'
 import { UserLink } from '../../../components/user-page'
@ -42,6 +40,9 @@ import { useTaggedContracts } from '../../../hooks/use-contracts'
 import { Linkify } from '../../../components/linkify'
 import { usePropz } from '../../../hooks/use-propz'
 import { filterDefined } from '../../../../common/util/array'
+import { useRecentBets } from '../../../hooks/use-bets'
+import { useRecentComments } from '../../../hooks/use-comments'
+import { LoadingIndicator } from '../../../components/loading-indicator'

 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
  const { slugs } = props.params
@ -51,42 +52,17 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) {

  const contracts = fold ? await getFoldContracts(fold).catch((_) => []) : []

-  const betsPromise = Promise.all(
+  const bets = await Promise.all(
    contracts.map((contract) => listAllBets(contract.id))
  )

-  const [contractComments, contractRecentBets] = await Promise.all([
-    Promise.all(
-      contracts.map((contract) => listAllComments(contract.id).catch((_) => []))
-    ),
-    Promise.all(
-      contracts.map((contract) =>
-        getRecentContractBets(contract.id).catch((_) => [])
-      )
-    ),
-  ])
-
-  let activeContracts = findActiveContracts(
-    contracts,
-    _.flatten(contractComments),
-    _.flatten(contractRecentBets)
-  )
+  let activeContracts = findActiveContracts(contracts, [], _.flatten(bets))
  const [resolved, unresolved] = _.partition(
    activeContracts,
    ({ isResolved }) => isResolved
  )
  activeContracts = [...unresolved, ...resolved]

-  const activeContractBets = await Promise.all(
-    activeContracts.map((contract) => listAllBets(contract.id).catch((_) => []))
-  )
-  const activeContractComments = activeContracts.map(
-    (contract) =>
-      contractComments[contracts.findIndex((c) => c.id === contract.id)]
-  )
-
-  const bets = await betsPromise
-
  const creatorScores = scoreCreators(contracts, bets)
  const traderScores = scoreTraders(contracts, bets)
  const [topCreators, topTraders] = await Promise.all([
@ -102,8 +78,6 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) {
      curator,
      contracts,
      activeContracts,
-      activeContractBets,
-      activeContractComments,
      traderScores,
      topTraders,
      creatorScores,
@ -156,15 +130,8 @@ export default function FoldPage(props: {
    creatorScores: {},
    topCreators: [],
  }
-  const {
-    curator,
-    activeContractBets,
-    activeContractComments,
-    traderScores,
-    topTraders,
-    creatorScores,
-    topCreators,
-  } = props
+  const { curator, traderScores, topTraders, creatorScores, topCreators } =
+    props

  const router = useRouter()
  const { slugs } = router.query as { slugs: string[] }
@ -190,6 +157,9 @@ export default function FoldPage(props: {
    props.activeContracts.map((contract) => contractsMap[contract.id])
  )

+  const recentBets = useRecentBets()
+  const recentComments = useRecentComments()
+
  if (fold === null || !foldSubpages.includes(page) || slugs[2]) {
    return <Custom404 />
  }
@ -272,19 +242,24 @@ export default function FoldPage(props: {
              />
            )}
            {page === 'activity' ? (
-              <>
-                <ActivityFeed
-                  contracts={activeContracts}
-                  contractBets={activeContractBets}
-                  contractComments={activeContractComments}
-                />
-                {activeContracts.length === 0 && (
-                  <div className="mx-2 mt-4 text-gray-500 lg:mx-0">
-                    No activity from matching markets.{' '}
-                    {isCurator && 'Try editing to add more tags!'}
-                  </div>
-                )}
-              </>
+              recentBets && recentComments ? (
+                <>
+                  <ActivityFeed
+                    contracts={activeContracts}
+                    recentBets={recentBets ?? []}
+                    recentComments={recentComments ?? []}
+                    loadBetAndCommentHistory
+                  />
+                  {activeContracts.length === 0 && (
+                    <div className="mx-2 mt-4 text-gray-500 lg:mx-0">
+                      No activity from matching markets.{' '}
+                      {isCurator && 'Try editing to add more tags!'}
+                    </div>
+                  )}
+                </>
+              ) : (
+                <LoadingIndicator className="mt-4" />
+              )
            ) : (
              <SearchableGrid
                contracts={contracts}
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@ -6,9 +6,8 @@ import _ from 'lodash'

 import { Contract } from '../lib/firebase/contracts'
 import { Page } from '../components/page'
-import { ActivityFeed, SummaryActivityFeed } from './activity'
+import { ActivityFeed, SummaryActivityFeed } from '../components/activity-feed'
 import { Comment } from '../lib/firebase/comments'
-import { Bet } from '../lib/firebase/bets'
 import FeedCreate from '../components/feed-create'
 import { Spacer } from '../components/layout/spacer'
 import { Col } from '../components/layout/col'
@ -23,10 +22,11 @@ import {
  useFilterYourContracts,
  useFindActiveContracts,
 } from '../hooks/use-find-active-contracts'
-import { useGetRecentBets } from '../hooks/use-bets'
 import { usePropz } from '../hooks/use-propz'
-import { useActiveContracts } from '../hooks/use-contracts'
 import { IS_PRIVATE_MANIFOLD } from '../lib/firebase/init'
+import { useGetRecentBets, useRecentBets } from '../hooks/use-bets'
+import { useActiveContracts } from '../hooks/use-contracts'
+import { useRecentComments } from '../hooks/use-comments'

 export async function getStaticPropz() {
  const contractInfo = await getAllContractInfo()
@ -40,7 +40,6 @@ export async function getStaticPropz() {
 const Home = (props: {
  contracts: Contract[]
  folds: Fold[]
-  recentBets: Bet[]
  recentComments: Comment[]
 }) => {
  props = usePropz(getStaticPropz) ?? {
@ -48,7 +47,7 @@ const Home = (props: {
    folds: [],
    recentComments: [],
  }
-  const { folds, recentComments } = props
+  const { folds } = props
  const user = useUser()

  const contracts = useActiveContracts() ?? props.contracts
@ -58,13 +57,15 @@ const Home = (props: {
    contracts
  )

-  const recentBets = useGetRecentBets()
-  const { activeContracts, activeBets, activeComments } =
-    useFindActiveContracts({
-      contracts: yourContracts,
-      recentBets: recentBets ?? [],
-      recentComments,
-    })
+  const initialRecentBets = useGetRecentBets()
+  const recentBets = useRecentBets() ?? initialRecentBets
+  const recentComments = useRecentComments() ?? props.recentComments
+
+  const { activeContracts } = useFindActiveContracts({
+    contracts: yourContracts,
+    recentBets: initialRecentBets ?? [],
+    recentComments: props.recentComments,
+  })

  const exploreContracts = useExploreContracts()

@ -78,7 +79,7 @@ const Home = (props: {
  return (
    <Page assertUser="signed-in">
      <Col className="items-center">
-        <Col className="w-full max-w-3xl">
+        <Col className="w-full max-w-[700px]">
          <FeedCreate user={user ?? undefined} />
          <Spacer h={6} />

@ -93,7 +94,7 @@ const Home = (props: {

          <Spacer h={5} />

-          <Col className="mx-3 mb-3 gap-2 text-sm text-gray-800 sm:flex-row">
+          <Col className="mb-3 gap-2 text-sm text-gray-800 sm:flex-row">
            <Row className="gap-2">
              <div className="tabs">
                <div
@ -124,8 +125,8 @@ const Home = (props: {
            (recentBets ? (
              <ActivityFeed
                contracts={activeContracts}
-                contractBets={activeBets}
-                contractComments={activeComments}
+                recentBets={recentBets}
+                recentComments={recentComments}
              />
            ) : (
              <LoadingIndicator className="mt-4" />
--- a/web/pages/make-predictions.tsx
+++ b/web/pages/make-predictions.tsx
@ -245,6 +245,7 @@ ${TEST_VALUE}
            error={anteError}
            setError={setAnteError}
            disabled={isSubmitting}
+            contractIdForLoan={undefined}
          />
        </div>