Merge branch 'main' of https://github.com/marsteralex/manifold

common/antes.ts

@@ -5,12 +5,14 @@ import {
   CPMMBinaryContract,
   DPMBinaryContract,
   FreeResponseContract,
+  MultipleChoiceContract,
   NumericContract,
 } from './contract'
 import { User } from './user'
 import { LiquidityProvision } from './liquidity-provision'
 import { noFees } from './fees'
 import { ENV_CONFIG } from './envs/constants'
+import { Answer } from './answer'
 
 export const FIXED_ANTE = ENV_CONFIG.fixedAnte ?? 100
 
@@ -111,6 +113,50 @@ export function getFreeAnswerAnte(
   return anteBet
 }
 
+export function getMultipleChoiceAntes(
+  creator: User,
+  contract: MultipleChoiceContract,
+  answers: string[],
+  betDocIds: string[]
+) {
+  const { totalBets, totalShares } = contract
+  const amount = totalBets['0']
+  const shares = totalShares['0']
+  const p = 1 / answers.length
+
+  const { createdTime } = contract
+
+  const bets: Bet[] = answers.map((answer, i) => ({
+    id: betDocIds[i],
+    userId: creator.id,
+    contractId: contract.id,
+    amount,
+    shares,
+    outcome: i.toString(),
+    probBefore: p,
+    probAfter: p,
+    createdTime,
+    isAnte: true,
+    fees: noFees,
+  }))
+
+  const { username, name, avatarUrl } = creator
+
+  const answerObjects: Answer[] = answers.map((answer, i) => ({
+    id: i.toString(),
+    number: i,
+    contractId: contract.id,
+    createdTime,
+    userId: creator.id,
+    username,
+    name,
+    avatarUrl,
+    text: answer,
+  }))
+
+  return { bets, answerObjects }
+}
+
 export function getNumericAnte(
   anteBettorId: string,
   contract: NumericContract,

common/api.ts

@@ -12,7 +12,9 @@ export class APIError extends Error {
 }
 
 export function getFunctionUrl(name: string) {
-  if (process.env.NEXT_PUBLIC_FIREBASE_EMULATE) {
+  if (process.env.NEXT_PUBLIC_FUNCTIONS_URL) {
+    return `${process.env.NEXT_PUBLIC_FUNCTIONS_URL}/${name}`
+  } else if (process.env.NEXT_PUBLIC_FIREBASE_EMULATE) {
     const { projectId, region } = ENV_CONFIG.firebaseConfig
     return `http://localhost:5001/${projectId}/${region}/${name}`
   } else {

common/calculate-cpmm.ts

@@ -123,6 +123,7 @@ export function calculateCpmmAmountToProb(
   prob: number,
   outcome: 'YES' | 'NO'
 ) {
+  if (prob <= 0 || prob >= 1 || isNaN(prob)) return Infinity
   if (outcome === 'NO') prob = 1 - prob
 
   // First, find an upper bound that leads to a more extreme probability than prob.

common/calculate.ts

@@ -23,6 +23,7 @@ import {
   BinaryContract,
   FreeResponseContract,
   PseudoNumericContract,
+  MultipleChoiceContract,
 } from './contract'
 import { floatingEqual } from './util/math'
 
@@ -200,7 +201,9 @@ export function getContractBetNullMetrics() {
   }
 }
 
-export function getTopAnswer(contract: FreeResponseContract) {
+export function getTopAnswer(
+  contract: FreeResponseContract | MultipleChoiceContract
+) {
   const { answers } = contract
   const top = maxBy(
     answers?.map((answer) => ({

common/categories.ts

@@ -31,10 +31,8 @@ export const EXCLUDED_CATEGORIES: category[] = [
   'manifold',
   'personal',
   'covid',
-  'culture',
   'gaming',
   'crypto',
-  'world',
 ]
 
 export const DEFAULT_CATEGORIES = difference(CATEGORY_LIST, EXCLUDED_CATEGORIES)

common/charity.ts

@@ -169,7 +169,7 @@ export const charities: Charity[] = [
   {
     name: "Founder's Pledge Climate Change Fund",
     website: 'https://founderspledge.com/funds/climate-change-fund',
-    photo: 'https://i.imgur.com/ZAhzHu4.png',
+    photo: 'https://i.imgur.com/9turaJW.png',
     preview:
       'The Climate Change Fund aims to sustainably reach net-zero emissions globally, while still allowing growth to free millions from energy poverty.',
     description: `The Climate Change Fund aims to sustainably reach net-zero emissions globally.
@@ -183,7 +183,7 @@ export const charities: Charity[] = [
   {
     name: "Founder's Pledge Patient Philanthropy Fund",
     website: 'https://founderspledge.com/funds/patient-philanthropy-fund',
-    photo: 'https://i.imgur.com/ZAhzHu4.png',
+    photo: 'https://i.imgur.com/LLR6CI6.png',
     preview:
       'The Patient Philanthropy Project aims to safeguard and benefit the long-term future of humanity',
     description: `The Patient Philanthropy Project focuses on how we can collectively grow our resources to support the long-term flourishing of humanity. It addresses a crucial gap: as a society, we spend much too little on safeguarding and benefiting future generations. In fact, we spend more money on ice cream each year than we do on preventing our own extinction. However, people in the future - who do not have a voice in their future survival or environment - matter. Lots of them may yet come into existence and we have the ability to positively affect their lives now, if only by making sure we avoid major catastrophes that could destroy our common future.
@@ -551,6 +551,20 @@ With an emphasis on approval voting, we bring better elections to people across
 
 The movement for a better way to vote is rapidly gaining momentum as voters grow tired of election results that don’t represent the will of the people. In 2018, we worked with locals in Fargo, ND to help them become the first city in the U.S. to adopt approval voting. And in 2020, we helped grassroots activists empower the 300k people of St. Louis, MO with stronger democracy through approval voting.`,
   },
+  {
+    name: 'Founders Pledge Global Health and Development Fund',
+    website: 'https://founderspledge.com/funds/global-health-and-development',
+    photo: 'https://i.imgur.com/EXbxH7T.png',
+    preview:
+      'Tackling the vast global inequalities in health, wealth and opportunity',
+    description: `Nearly half the world lives on less than $2.50 a day, yet giving by the world’s richest often overlooks the world’s poorest and most vulnerable. Despite the average American household being richer than 90% of the rest of the world, only 6% of US charitable giving goes to charities which work internationally.
+
+This Fund is focused on helping those who need it most, wherever that help can make the biggest difference. By building a mixed portfolio of direct and indirect interventions, such as policy work, we aim to:
+
+Improve the lives of the world's most vulnerable people.
+Reduce the number of easily preventable deaths worldwide.
+Work towards sustainable, systemic change.`,
+  },
 ].map((charity) => {
   const slug = charity.name.toLowerCase().replace(/\s/g, '-')
   return {

common/contract.ts

@@ -1,15 +1,22 @@
 import { Answer } from './answer'
 import { Fees } from './fees'
 import { JSONContent } from '@tiptap/core'
+import { GroupLink } from 'common/group'
 
 export type AnyMechanism = DPM | CPMM
-export type AnyOutcomeType = Binary | PseudoNumeric | FreeResponse | Numeric
+export type AnyOutcomeType =
+  | Binary
+  | MultipleChoice
+  | PseudoNumeric
+  | FreeResponse
+  | Numeric
 export type AnyContractType =
   | (CPMM & Binary)
   | (CPMM & PseudoNumeric)
   | (DPM & Binary)
   | (DPM & FreeResponse)
   | (DPM & Numeric)
+  | (DPM & MultipleChoice)
 
 export type Contract<T extends AnyContractType = AnyContractType> = {
   id: string
@@ -46,6 +53,7 @@ export type Contract<T extends AnyContractType = AnyContractType> = {
   collectedFees: Fees
 
   groupSlugs?: string[]
+  groupLinks?: GroupLink[]
   uniqueBettorIds?: string[]
   uniqueBettorCount?: number
   popularityScore?: number
@@ -55,6 +63,7 @@ export type BinaryContract = Contract & Binary
 export type PseudoNumericContract = Contract & PseudoNumeric
 export type NumericContract = Contract & Numeric
 export type FreeResponseContract = Contract & FreeResponse
+export type MultipleChoiceContract = Contract & MultipleChoice
 export type DPMContract = Contract & DPM
 export type CPMMContract = Contract & CPMM
 export type DPMBinaryContract = BinaryContract & DPM
@@ -102,6 +111,13 @@ export type FreeResponse = {
   resolutions?: { [outcome: string]: number } // Used for MKT resolution.
 }
 
+export type MultipleChoice = {
+  outcomeType: 'MULTIPLE_CHOICE'
+  answers: Answer[]
+  resolution?: string | 'MKT' | 'CANCEL'
+  resolutions?: { [outcome: string]: number } // Used for MKT resolution.
+}
+
 export type Numeric = {
   outcomeType: 'NUMERIC'
   bucketCount: number
@@ -116,6 +132,7 @@ export type resolution = 'YES' | 'NO' | 'MKT' | 'CANCEL'
 export const RESOLUTIONS = ['YES', 'NO', 'MKT', 'CANCEL'] as const
 export const OUTCOME_TYPES = [
   'BINARY',
+  'MULTIPLE_CHOICE',
   'FREE_RESPONSE',
   'PSEUDO_NUMERIC',
   'NUMERIC',

common/group.ts

@@ -19,3 +19,11 @@ export const MAX_ABOUT_LENGTH = 140
 export const MAX_ID_LENGTH = 60
 export const NEW_USER_GROUP_SLUGS = ['updates', 'bugs', 'welcome']
 export const GROUP_CHAT_SLUG = 'chat'
+
+export type GroupLink = {
+  slug: string
+  name: string
+  groupId: string
+  createdTime: number
+  userId?: string
+}

common/new-bet.ts

@@ -1,4 +1,4 @@
-import { sortBy, sumBy } from 'lodash'
+import { sortBy, sum, sumBy } from 'lodash'
 
 import { Bet, fill, LimitBet, MAX_LOAN_PER_CONTRACT, NumericBet } from './bet'
 import {
@@ -18,6 +18,7 @@ import {
   CPMMBinaryContract,
   DPMBinaryContract,
   FreeResponseContract,
+  MultipleChoiceContract,
   NumericContract,
   PseudoNumericContract,
 } from './contract'
@@ -142,6 +143,13 @@ export const computeFills = (
   limitProb: number | undefined,
   unfilledBets: LimitBet[]
 ) => {
+  if (isNaN(betAmount)) {
+    throw new Error('Invalid bet amount: ${betAmount}')
+  }
+  if (isNaN(limitProb ?? 0)) {
+    throw new Error('Invalid limitProb: ${limitProb}')
+  }
+
   const sortedBets = sortBy(
     unfilledBets.filter((bet) => bet.outcome !== outcome),
     (bet) => (outcome === 'YES' ? bet.limitProb : -bet.limitProb),
@@ -239,6 +247,32 @@ export const getBinaryCpmmBetInfo = (
   }
 }
 
+export const getBinaryBetStats = (
+  outcome: 'YES' | 'NO',
+  betAmount: number,
+  contract: CPMMBinaryContract | PseudoNumericContract,
+  limitProb: number,
+  unfilledBets: LimitBet[]
+) => {
+  const { newBet } = getBinaryCpmmBetInfo(
+    outcome,
+    betAmount ?? 0,
+    contract,
+    limitProb,
+    unfilledBets as LimitBet[]
+  )
+  const remainingMatched =
+    ((newBet.orderAmount ?? 0) - newBet.amount) /
+    (outcome === 'YES' ? limitProb : 1 - limitProb)
+  const currentPayout = newBet.shares + remainingMatched
+
+  const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
+
+  const totalFees = sum(Object.values(newBet.fees))
+
+  return { currentPayout, currentReturn, totalFees, newBet }
+}
+
 export const getNewBinaryDpmBetInfo = (
   outcome: 'YES' | 'NO',
   amount: number,
@@ -289,7 +323,7 @@ export const getNewBinaryDpmBetInfo = (
 export const getNewMultiBetInfo = (
   outcome: string,
   amount: number,
-  contract: FreeResponseContract,
+  contract: FreeResponseContract | MultipleChoiceContract,
   loanAmount: number
 ) => {
   const { pool, totalShares, totalBets } = contract

common/new-contract.ts

@@ -5,6 +5,7 @@ import {
   CPMM,
   DPM,
   FreeResponse,
+  MultipleChoice,
   Numeric,
   outcomeType,
   PseudoNumeric,
@@ -30,7 +31,10 @@ export function getNewContract(
   bucketCount: number,
   min: number,
   max: number,
-  isLogScale: boolean
+  isLogScale: boolean,
+
+  // for multiple choice
+  answers: string[]
 ) {
   const tags = parseTags(
     [
@@ -48,6 +52,8 @@ export function getNewContract(
       ? getPseudoNumericCpmmProps(initialProb, ante, min, max, isLogScale)
       : outcomeType === 'NUMERIC'
       ? getNumericProps(ante, bucketCount, min, max)
+      : outcomeType === 'MULTIPLE_CHOICE'
+      ? getMultipleChoiceProps(ante, answers)
       : getFreeAnswerProps(ante)
 
   const contract: Contract = removeUndefinedProps({
@@ -151,6 +157,26 @@ const getFreeAnswerProps = (ante: number) => {
   return system
 }
 
+const getMultipleChoiceProps = (ante: number, answers: string[]) => {
+  const numAnswers = answers.length
+  const betAnte = ante / numAnswers
+  const betShares = Math.sqrt(ante ** 2 / numAnswers)
+
+  const defaultValues = (x: any) =>
+    Object.fromEntries(range(0, numAnswers).map((k) => [k, x]))
+
+  const system: DPM & MultipleChoice = {
+    mechanism: 'dpm-2',
+    outcomeType: 'MULTIPLE_CHOICE',
+    pool: defaultValues(betAnte),
+    totalShares: defaultValues(betShares),
+    totalBets: defaultValues(betAnte),
+    answers: [],
+  }
+
+  return system
+}
+
 const getNumericProps = (
   ante: number,
   bucketCount: number,

common/numeric-constants.ts

@@ -3,4 +3,4 @@ export const NUMERIC_FIXED_VAR = 0.005
 
 export const NUMERIC_GRAPH_COLOR = '#5fa5f9'
 export const NUMERIC_TEXT_COLOR = 'text-blue-500'
-export const UNIQUE_BETTOR_BONUS_AMOUNT = 5
+export const UNIQUE_BETTOR_BONUS_AMOUNT = 10

common/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@tiptap/extension-image": "2.0.0-beta.30",
     "@tiptap/extension-link": "2.0.0-beta.43",
+    "@tiptap/extension-mention": "2.0.0-beta.102",
     "@tiptap/starter-kit": "2.0.0-beta.190",
     "lodash": "4.17.21"
   },

common/payouts-dpm.ts

@@ -2,7 +2,11 @@ import { sum, groupBy, sumBy, mapValues } from 'lodash'
 
 import { Bet, NumericBet } from './bet'
 import { deductDpmFees, getDpmProbability } from './calculate-dpm'
-import { DPMContract, FreeResponseContract } from './contract'
+import {
+  DPMContract,
+  FreeResponseContract,
+  MultipleChoiceContract,
+} from './contract'
 import { DPM_CREATOR_FEE, DPM_FEES, DPM_PLATFORM_FEE } from './fees'
 import { addObjects } from './util/object'
 
@@ -180,7 +184,7 @@ export const getDpmMktPayouts = (
 
 export const getPayoutsMultiOutcome = (
   resolutions: { [outcome: string]: number },
-  contract: FreeResponseContract,
+  contract: FreeResponseContract | MultipleChoiceContract,
   bets: Bet[]
 ) => {
   const poolTotal = sum(Object.values(contract.pool))

common/payouts.ts

@@ -117,6 +117,7 @@ export const getDpmPayouts = (
   resolutionProbability?: number
 ): PayoutInfo => {
   const openBets = bets.filter((b) => !b.isSold && !b.sale)
+  const { outcomeType } = contract
 
   switch (outcome) {
     case 'YES':
@@ -124,7 +125,8 @@ export const getDpmPayouts = (
       return getDpmStandardPayouts(outcome, contract, openBets)
 
     case 'MKT':
-      return contract.outcomeType === 'FREE_RESPONSE' // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return outcomeType === 'FREE_RESPONSE' ||
+        outcomeType === 'MULTIPLE_CHOICE' // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         ? getPayoutsMultiOutcome(resolutions!, contract, openBets)
         : getDpmMktPayouts(contract, openBets, resolutionProbability)
     case 'CANCEL':
@@ -132,7 +134,7 @@ export const getDpmPayouts = (
       return getDpmCancelPayouts(contract, openBets)
 
     default:
-      if (contract.outcomeType === 'NUMERIC')
+      if (outcomeType === 'NUMERIC')
         return getNumericDpmPayouts(outcome, contract, openBets as NumericBet[])
 
       // Outcome is a free response answer id.

common/pseudo-numeric.ts

@@ -37,6 +37,9 @@ export const getPseudoProbability = (
   max: number,
   isLogScale = false
 ) => {
+  if (value < min) return 0
+  if (value > max) return 1
+
   if (isLogScale) {
     return Math.log10(value - min + 1) / Math.log10(max - min + 1)
   }

common/util/parse.ts

@@ -20,6 +20,8 @@ import { Text } from '@tiptap/extension-text'
 // other tiptap extensions
 import { Image } from '@tiptap/extension-image'
 import { Link } from '@tiptap/extension-link'
+import { Mention } from '@tiptap/extension-mention'
+import Iframe from './tiptap-iframe'
 
 export function parseTags(text: string) {
   const regex = /(?:^|\s)(?:[#][a-z0-9_]+)/gi
@@ -80,8 +82,9 @@ export const exhibitExts = [
 
   Image,
   Link,
+  Mention,
+  Iframe,
 ]
-// export const exhibitExts = [StarterKit as unknown as Extension, Image]
 
 export function richTextToString(text?: JSONContent) {
   return !text ? '' : generateText(text, exhibitExts)

common/util/tiptap-iframe.ts

@@ -0,0 +1,92 @@
+// Adopted from https://github.com/ueberdosis/tiptap/blob/main/demos/src/Experiments/Embeds/Vue/iframe.ts
+
+import { Node } from '@tiptap/core'
+
+export interface IframeOptions {
+  allowFullscreen: boolean
+  HTMLAttributes: {
+    [key: string]: any
+  }
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    iframe: {
+      setIframe: (options: { src: string }) => ReturnType
+    }
+  }
+}
+
+// These classes style the outer wrapper and the inner iframe;
+// Adopted from css in https://github.com/ueberdosis/tiptap/blob/main/demos/src/Experiments/Embeds/Vue/index.vue
+const wrapperClasses = 'relative h-auto w-full overflow-hidden'
+const iframeClasses = 'absolute top-0 left-0 h-full w-full'
+
+export default Node.create<IframeOptions>({
+  name: 'iframe',
+
+  group: 'block',
+
+  atom: true,
+
+  addOptions() {
+    return {
+      allowFullscreen: true,
+      HTMLAttributes: {
+        class: 'iframe-wrapper' + ' ' + wrapperClasses,
+        // Tailwind JIT doesn't seem to pick up `pb-[20rem]`, so we hack this in:
+        style: 'padding-bottom: 20rem;',
+      },
+    }
+  },
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      frameborder: {
+        default: 0,
+      },
+      allowfullscreen: {
+        default: this.options.allowFullscreen,
+        parseHTML: () => this.options.allowFullscreen,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'iframe' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      this.options.HTMLAttributes,
+      [
+        'iframe',
+        {
+          ...HTMLAttributes,
+          class: HTMLAttributes.class + ' ' + iframeClasses,
+        },
+      ],
+    ]
+  },
+
+  addCommands() {
+    return {
+      setIframe:
+        (options: { src: string }) =>
+        ({ tr, dispatch }) => {
+          const { selection } = tr
+          const node = this.type.create(options)
+
+          if (dispatch) {
+            tr.replaceRangeWith(selection.from, selection.to, node)
+          }
+
+          return true
+        },
+    }
+  },
+})

dev.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+
+ENV=${1:-dev}
+case $ENV in
+    dev)
+      FIREBASE_PROJECT=dev
+      NEXT_ENV=DEV ;;
+    prod)
+      FIREBASE_PROJECT=prod
+      NEXT_ENV=PROD ;;
+    localdb)
+      FIREBASE_PROJECT=dev
+      NEXT_ENV=DEV
+      EMULATOR=true ;;
+    *)
+      echo "Invalid environment; must be dev, prod, or localdb."
+      exit 1
+esac
+
+firebase use $FIREBASE_PROJECT
+
+if [ ! -z $EMULATOR ]
+then
+  npx concurrently \
+      -n FIRESTORE,FUNCTIONS,NEXT,TS \
+      -c green,white,magenta,cyan \
+      "yarn --cwd=functions firestore" \
+      "cross-env FIRESTORE_EMULATOR_HOST=localhost:8080 yarn --cwd=functions dev" \
+      "cross-env NEXT_PUBLIC_FUNCTIONS_URL=http://localhost:8088 \
+               NEXT_PUBLIC_FIREBASE_EMULATE=TRUE \
+               NEXT_PUBLIC_FIREBASE_ENV=${NEXT_ENV} \
+               yarn --cwd=web serve" \
+      "cross-env yarn --cwd=web ts-watch"
+else
+  npx concurrently \
+      -n FUNCTIONS,NEXT,TS \
+      -c white,magenta,cyan \
+      "yarn --cwd=functions dev" \
+      "cross-env NEXT_PUBLIC_FUNCTIONS_URL=http://localhost:8088 \
+               NEXT_PUBLIC_FIREBASE_ENV=${NEXT_ENV} \
+               yarn --cwd=web serve" \
+      "cross-env yarn --cwd=web ts-watch"
+fi

docs/docs/api.md

@@ -579,6 +579,26 @@ $ curl https://manifold.markets/api/v0/market/{marketId}/resolve -X POST \
                  ]}'
 ```
 
+### `POST /v0/market/[marketId]/sell`
+
+Sells some quantity of shares in a market on behalf of the authorized user.
+
+Parameters:
+
+- `outcome`: Required. One of `YES`, `NO`, or a `number` indicating the numeric
+  bucket ID, depending on the market type.
+- `shares`: Optional. The amount of shares to sell of the outcome given
+  above. If not provided, all the shares you own will be sold.
+
+Example request:
+
+```
+$ curl https://manifold.markets/api/v0/market/{marketId}/sell -X POST \
+    -H 'Content-Type: application/json' \
+    -H 'Authorization: Key {...}' \
+    --data-raw '{"outcome": "YES", "shares": 10}'
+```
+
 ### `GET /v0/bets`
 
 Gets a list of bets, ordered by creation date descending.

docs/docs/awesome-manifold.md

@@ -15,6 +15,7 @@ A list of community-created projects built on, or related to, Manifold Markets.
 
 - [PyManifold](https://github.com/bcongdon/PyManifold) - Python client for the Manifold API
 - [manifold-markets-python](https://github.com/vluzko/manifold-markets-python) - Python tools for working with Manifold Markets (including various accuracy metrics)
+- [ManifoldMarketManager](https://github.com/gappleto97/ManifoldMarketManager) - Python script and library to automatically manage markets
 - [manifeed](https://github.com/joy-void-joy/manifeed) - Tool that creates an RSS feed for new Manifold markets
 
 ## Bots

firestore.rules

@@ -74,7 +74,7 @@ service cloud.firestore {
     match /contracts/{contractId} {
       allow read;
       allow update: if request.resource.data.diff(resource.data).affectedKeys()
-                                                                 .hasOnly(['tags', 'lowercaseTags', 'groupSlugs']);
+                                                                 .hasOnly(['tags', 'lowercaseTags', 'groupSlugs', 'groupLinks']);
       allow update: if request.resource.data.diff(resource.data).affectedKeys()
                                                                  .hasOnly(['description', 'closeTime', 'question'])
                        && resource.data.creatorId == request.auth.uid;

functions/package.json

@@ -12,6 +12,8 @@
     "start": "yarn shell",
     "deploy": "firebase deploy --only functions",
     "logs": "firebase functions:log",
+    "dev": "nodemon src/serve.ts",
+    "firestore": "firebase emulators:start --only firestore --import=./firestore_export",
     "serve": "firebase use dev && yarn build && firebase emulators:start --only functions,firestore --import=./firestore_export",
     "db:update-local-from-remote": "yarn db:backup-remote && gsutil rsync -r gs://$npm_package_config_firestore/firestore_export ./firestore_export",
     "db:backup-local": "firebase emulators:export --force ./firestore_export",
@@ -27,7 +29,10 @@
     "@tiptap/core": "2.0.0-beta.181",
     "@tiptap/extension-image": "2.0.0-beta.30",
     "@tiptap/extension-link": "2.0.0-beta.43",
+    "@tiptap/extension-mention": "2.0.0-beta.102",
     "@tiptap/starter-kit": "2.0.0-beta.190",
+    "cors": "2.8.5",
+    "express": "4.18.1",
     "firebase-admin": "10.0.0",
     "firebase-functions": "3.21.2",
     "lodash": "4.17.21",

functions/src/api.ts

@@ -1,6 +1,7 @@
 import * as admin from 'firebase-admin'
-import { logger } from 'firebase-functions/v2'
+import { Request, RequestHandler, Response } from 'express'
-import { HttpsOptions, onRequest, Request } from 'firebase-functions/v2/https'
+import { error } from 'firebase-functions/logger'
+import { HttpsOptions } from 'firebase-functions/v2/https'
 import { log } from './utils'
 import { z } from 'zod'
 import { APIError } from '../../common/api'
@@ -45,7 +46,7 @@ export const parseCredentials = async (req: Request): Promise<Credentials> => {
         return { kind: 'jwt', data: await auth.verifyIdToken(payload) }
       } catch (err) {
         // This is somewhat suspicious, so get it into the firebase console
-        logger.error('Error verifying Firebase JWT: ', err)
+        error('Error verifying Firebase JWT: ', err)
         throw new APIError(403, 'Error validating token.')
       }
     case 'Key':
@@ -83,6 +84,11 @@ export const zTimestamp = () => {
   }, z.date())
 }
 
+export type EndpointDefinition = {
+  opts: EndpointOptions & { method: string }
+  handler: RequestHandler
+}
+
 export const validate = <T extends z.ZodTypeAny>(schema: T, val: unknown) => {
   const result = schema.safeParse(val)
   if (!result.success) {
@@ -99,12 +105,12 @@ export const validate = <T extends z.ZodTypeAny>(schema: T, val: unknown) => {
   }
 }
 
-interface EndpointOptions extends HttpsOptions {
+export interface EndpointOptions extends HttpsOptions {
-  methods?: string[]
+  method?: string
 }
 
 const DEFAULT_OPTS = {
-  methods: ['POST'],
+  method: 'POST',
   minInstances: 1,
   concurrency: 100,
   memory: '2GiB',
@@ -113,28 +119,29 @@ const DEFAULT_OPTS = {
 }
 
 export const newEndpoint = (endpointOpts: EndpointOptions, fn: Handler) => {
-  const opts = Object.assign(endpointOpts, DEFAULT_OPTS)
+  const opts = Object.assign({}, DEFAULT_OPTS, endpointOpts)
-  return onRequest(opts, async (req, res) => {
+  return {
-    log('Request processing started.')
+    opts,
-    try {
+    handler: async (req: Request, res: Response) => {
-      if (!opts.methods.includes(req.method)) {
+      log(`${req.method} ${req.url} ${JSON.stringify(req.body)}`)
-        const allowed = opts.methods.join(', ')
+      try {
-        throw new APIError(405, `This endpoint supports only ${allowed}.`)
+        if (opts.method !== req.method) {
-      }
+          throw new APIError(405, `This endpoint supports only ${opts.method}.`)
-      const authedUser = await lookupUser(await parseCredentials(req))
+        }
-      log('User credentials processed.')
+        const authedUser = await lookupUser(await parseCredentials(req))
-      res.status(200).json(await fn(req, authedUser))
+        res.status(200).json(await fn(req, authedUser))
-    } catch (e) {
+      } catch (e) {
-      if (e instanceof APIError) {
+        if (e instanceof APIError) {
-        const output: { [k: string]: unknown } = { message: e.message }
+          const output: { [k: string]: unknown } = { message: e.message }
-        if (e.details != null) {
+          if (e.details != null) {
-          output.details = e.details
+            output.details = e.details
+          }
+          res.status(e.code).json(output)
+        } else {
+          error(e)
+          res.status(500).json({ message: 'An unknown error occurred.' })
         }
-        res.status(e.code).json(output)
-      } else {
-        logger.error(e)
-        res.status(500).json({ message: 'An unknown error occurred.' })
       }
-    }
+    },
-  })
+  } as EndpointDefinition
 }

functions/src/cancel-bet.ts

@@ -10,7 +10,7 @@ const bodySchema = z.object({
 export const cancelbet = newEndpoint({}, async (req, auth) => {
   const { betId } = validate(bodySchema, req.body)
 
-  const result = await firestore.runTransaction(async (trans) => {
+  return await firestore.runTransaction(async (trans) => {
     const snap = await trans.get(
       firestore.collectionGroup('bets').where('id', '==', betId)
     )
@@ -28,8 +28,6 @@ export const cancelbet = newEndpoint({}, async (req, auth) => {
 
     return { ...bet, isCancelled: true }
   })
-
-  return result
 })
 
 const firestore = admin.firestore()

functions/src/create-contract.ts

@@ -2,11 +2,12 @@ import * as admin from 'firebase-admin'
 import { z } from 'zod'
 
 import {
-  CPMMBinaryContract,
   Contract,
+  CPMMBinaryContract,
   FreeResponseContract,
   MAX_QUESTION_LENGTH,
   MAX_TAG_LENGTH,
+  MultipleChoiceContract,
   NumericContract,
   OUTCOME_TYPES,
 } from '../../common/contract'
@@ -20,15 +21,18 @@ import {
   FIXED_ANTE,
   getCpmmInitialLiquidity,
   getFreeAnswerAnte,
+  getMultipleChoiceAntes,
   getNumericAnte,
 } from '../../common/antes'
-import { getNoneAnswer } from '../../common/answer'
+import { Answer, getNoneAnswer } from '../../common/answer'
 import { getNewContract } from '../../common/new-contract'
 import { NUMERIC_BUCKET_COUNT } from '../../common/numeric-constants'
 import { User } from '../../common/user'
 import { Group, MAX_ID_LENGTH } from '../../common/group'
 import { getPseudoProbability } from '../../common/pseudo-numeric'
 import { JSONContent } from '@tiptap/core'
+import { zip } from 'lodash'
+import { Bet } from 'common/bet'
 
 const descScehma: z.ZodType<JSONContent> = z.lazy(() =>
   z.intersection(
@@ -79,11 +83,15 @@ const numericSchema = z.object({
   isLogScale: z.boolean().optional(),
 })
 
+const multipleChoiceSchema = z.object({
+  answers: z.string().trim().min(1).array().min(2),
+})
+
 export const createmarket = newEndpoint({}, async (req, auth) => {
   const { question, description, tags, closeTime, outcomeType, groupId } =
     validate(bodySchema, req.body)
 
-  let min, max, initialProb, isLogScale
+  let min, max, initialProb, isLogScale, answers
 
   if (outcomeType === 'PSEUDO_NUMERIC' || outcomeType === 'NUMERIC') {
     let initialValue
@@ -97,12 +105,22 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
     initialProb = getPseudoProbability(initialValue, min, max, isLogScale) * 100
 
     if (initialProb < 1 || initialProb > 99)
-      throw new APIError(400, 'Invalid initial value.')
+      if (outcomeType === 'PSEUDO_NUMERIC')
+        throw new APIError(
+          400,
+          `Initial value is too ${initialProb < 1 ? 'low' : 'high'}`
+        )
+      else throw new APIError(400, 'Invalid initial probability.')
   }
+
   if (outcomeType === 'BINARY') {
     ;({ initialProb } = validate(binarySchema, req.body))
   }
 
+  if (outcomeType === 'MULTIPLE_CHOICE') {
+    ;({ answers } = validate(multipleChoiceSchema, req.body))
+  }
+
   const userDoc = await firestore.collection('users').doc(auth.uid).get()
   if (!userDoc.exists) {
     throw new APIError(400, 'No user exists with the authenticated user ID.')
@@ -120,7 +138,7 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
 
   let group = null
   if (groupId) {
-    const groupDocRef = await firestore.collection('groups').doc(groupId)
+    const groupDocRef = firestore.collection('groups').doc(groupId)
     const groupDoc = await groupDocRef.get()
     if (!groupDoc.exists) {
       throw new APIError(400, 'No group exists with the given group ID.')
@@ -162,7 +180,8 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
     NUMERIC_BUCKET_COUNT,
     min ?? 0,
     max ?? 0,
-    isLogScale ?? false
+    isLogScale ?? false,
+    answers ?? []
   )
 
   if (ante) await chargeUser(user.id, ante, true)
@@ -184,6 +203,31 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
     )
 
     await liquidityDoc.set(lp)
+  } else if (outcomeType === 'MULTIPLE_CHOICE') {
+    const betCol = firestore.collection(`contracts/${contract.id}/bets`)
+    const betDocs = (answers ?? []).map(() => betCol.doc())
+
+    const answerCol = firestore.collection(`contracts/${contract.id}/answers`)
+    const answerDocs = (answers ?? []).map((_, i) =>
+      answerCol.doc(i.toString())
+    )
+
+    const { bets, answerObjects } = getMultipleChoiceAntes(
+      user,
+      contract as MultipleChoiceContract,
+      answers ?? [],
+      betDocs.map((bd) => bd.id)
+    )
+
+    await Promise.all(
+      zip(bets, betDocs).map(([bet, doc]) => doc?.create(bet as Bet))
+    )
+    await Promise.all(
+      zip(answerObjects, answerDocs).map(([answer, doc]) =>
+        doc?.create(answer as Answer)
+      )
+    )
+    await contractRef.update({ answers: answerObjects })
   } else if (outcomeType === 'FREE_RESPONSE') {
     const noneAnswerDoc = firestore
       .collection(`contracts/${contract.id}/answers`)

functions/src/create-notification.ts

@@ -29,12 +29,22 @@ export const createNotification = async (
   sourceUser: User,
   idempotencyKey: string,
   sourceText: string,
-  sourceContract?: Contract,
+  miscData?: {
-  relatedSourceType?: notification_source_types,
+    contract?: Contract
-  relatedUserId?: string,
+    relatedSourceType?: notification_source_types
-  sourceSlug?: string,
+    relatedUserId?: string
-  sourceTitle?: string
+    slug?: string
+    title?: string
+  }
 ) => {
+  const {
+    contract: sourceContract,
+    relatedSourceType,
+    relatedUserId,
+    slug,
+    title,
+  } = miscData ?? {}
+
   const shouldGetNotification = (
     userId: string,
     userToReasonTexts: user_to_reason_texts
@@ -70,8 +80,8 @@ export const createNotification = async (
           sourceContractCreatorUsername: sourceContract?.creatorUsername,
           sourceContractTitle: sourceContract?.question,
           sourceContractSlug: sourceContract?.slug,
-          sourceSlug: sourceSlug ? sourceSlug : sourceContract?.slug,
+          sourceSlug: slug ? slug : sourceContract?.slug,
-          sourceTitle: sourceTitle ? sourceTitle : sourceContract?.question,
+          sourceTitle: title ? title : sourceContract?.question,
         }
         await notificationRef.set(removeUndefinedProps(notification))
       })

functions/src/create-user.ts

@@ -63,10 +63,7 @@ export const createuser = newEndpoint(opts, async (req, auth) => {
   const deviceUsedBefore =
     !deviceToken || (await isPrivateUserWithDeviceToken(deviceToken))
 
-  const ipCount = req.ip ? await numberUsersWithIp(req.ip) : 0
+  const balance = deviceUsedBefore ? SUS_STARTING_BALANCE : STARTING_BALANCE
-
-  const balance =
-    deviceUsedBefore || ipCount > 2 ? SUS_STARTING_BALANCE : STARTING_BALANCE
 
   const user: User = {
     id: auth.uid,
@@ -113,7 +110,7 @@ const isPrivateUserWithDeviceToken = async (deviceToken: string) => {
   return !snap.empty
 }
 
-const numberUsersWithIp = async (ipAddress: string) => {
+export const numberUsersWithIp = async (ipAddress: string) => {
   const snap = await firestore
     .collection('private-users')
     .where('initialIpAddress', '==', ipAddress)
@@ -159,7 +156,7 @@ const addUserToDefaultGroups = async (user: User) => {
         id: welcomeCommentDoc.id,
         groupId: group.id,
         userId: manifoldAccount,
-        text: `Welcome, ${user.name} (@${user.username})!`,
+        text: `Welcome, @${user.username} aka ${user.name}!`,
         createdTime: Date.now(),
         userName: 'Manifold Markets',
         userUsername: MANIFOLD_USERNAME,

functions/src/health.ts

@@ -1,6 +1,6 @@
 import { newEndpoint } from './api'
 
-export const health = newEndpoint({ methods: ['GET'] }, async (_req, auth) => {
+export const health = newEndpoint({ method: 'GET' }, async (_req, auth) => {
   return {
     message: 'Server is working.',
     uid: auth.uid,

functions/src/index.ts

@@ -1,4 +1,6 @@
 import * as admin from 'firebase-admin'
+import { onRequest } from 'firebase-functions/v2/https'
+import { EndpointDefinition } from './api'
 
 admin.initializeApp()
 
@@ -25,20 +27,63 @@ export * from './on-delete-group'
 export * from './score-contracts'
 
 // v2
-export * from './health'
+import { health } from './health'
-export * from './transact'
+import { transact } from './transact'
-export * from './change-user-info'
+import { changeuserinfo } from './change-user-info'
-export * from './create-user'
+import { createuser } from './create-user'
-export * from './create-answer'
+import { createanswer } from './create-answer'
-export * from './place-bet'
+import { placebet } from './place-bet'
-export * from './cancel-bet'
+import { cancelbet } from './cancel-bet'
-export * from './sell-bet'
+import { sellbet } from './sell-bet'
-export * from './sell-shares'
+import { sellshares } from './sell-shares'
-export * from './claim-manalink'
+import { claimmanalink } from './claim-manalink'
-export * from './create-contract'
+import { createmarket } from './create-contract'
-export * from './add-liquidity'
+import { addliquidity } from './add-liquidity'
-export * from './withdraw-liquidity'
+import { withdrawliquidity } from './withdraw-liquidity'
-export * from './create-group'
+import { creategroup } from './create-group'
-export * from './resolve-market'
+import { resolvemarket } from './resolve-market'
-export * from './unsubscribe'
+import { unsubscribe } from './unsubscribe'
-export * from './stripe'
+import { stripewebhook, createcheckoutsession } from './stripe'
+
+const toCloudFunction = ({ opts, handler }: EndpointDefinition) => {
+  return onRequest(opts, handler as any)
+}
+const healthFunction = toCloudFunction(health)
+const transactFunction = toCloudFunction(transact)
+const changeUserInfoFunction = toCloudFunction(changeuserinfo)
+const createUserFunction = toCloudFunction(createuser)
+const createAnswerFunction = toCloudFunction(createanswer)
+const placeBetFunction = toCloudFunction(placebet)
+const cancelBetFunction = toCloudFunction(cancelbet)
+const sellBetFunction = toCloudFunction(sellbet)
+const sellSharesFunction = toCloudFunction(sellshares)
+const claimManalinkFunction = toCloudFunction(claimmanalink)
+const createMarketFunction = toCloudFunction(createmarket)
+const addLiquidityFunction = toCloudFunction(addliquidity)
+const withdrawLiquidityFunction = toCloudFunction(withdrawliquidity)
+const createGroupFunction = toCloudFunction(creategroup)
+const resolveMarketFunction = toCloudFunction(resolvemarket)
+const unsubscribeFunction = toCloudFunction(unsubscribe)
+const stripeWebhookFunction = toCloudFunction(stripewebhook)
+const createCheckoutSessionFunction = toCloudFunction(createcheckoutsession)
+
+export {
+  healthFunction as health,
+  transactFunction as transact,
+  changeUserInfoFunction as changeuserinfo,
+  createUserFunction as createuser,
+  createAnswerFunction as createanswer,
+  placeBetFunction as placebet,
+  cancelBetFunction as cancelbet,
+  sellBetFunction as sellbet,
+  sellSharesFunction as sellshares,
+  claimManalinkFunction as claimmanalink,
+  createMarketFunction as createmarket,
+  addLiquidityFunction as addliquidity,
+  withdrawLiquidityFunction as withdrawliquidity,
+  createGroupFunction as creategroup,
+  resolveMarketFunction as resolvemarket,
+  unsubscribeFunction as unsubscribe,
+  stripeWebhookFunction as stripewebhook,
+  createCheckoutSessionFunction as createcheckoutsession,
+}

functions/src/market-close-notifications.ts

@@ -64,7 +64,7 @@ async function sendMarketCloseEmails() {
       user,
       'closed' + contract.id.slice(6, contract.id.length),
       contract.closeTime?.toString() ?? new Date().toString(),
-      contract
+      { contract }
     )
   }
 }

functions/src/on-create-answer.ts

@@ -10,14 +10,14 @@ export const onCreateAnswer = functions.firestore
       contractId: string
     }
     const { eventId } = context
-    const contract = await getContract(contractId)
-    if (!contract)
-      throw new Error('Could not find contract corresponding with answer')
-
     const answer = change.data() as Answer
     // Ignore ante answer.
     if (answer.number === 0) return
 
+    const contract = await getContract(contractId)
+    if (!contract)
+      throw new Error('Could not find contract corresponding with answer')
+
     const answerCreator = await getUser(answer.userId)
     if (!answerCreator) throw new Error('Could not find answer creator')
 
@@ -28,6 +28,6 @@ export const onCreateAnswer = functions.firestore
       answerCreator,
       eventId,
       answer.text,
-      contract
+      { contract }
     )
   })

functions/src/on-create-bet.ts

@@ -64,10 +64,7 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
 
   if (!previousUniqueBettorIds) {
     const contractBets = (
-      await firestore
+      await firestore.collection(`contracts/${contractId}/bets`).get()
-        .collection(`contracts/${contractId}/bets`)
-        .where('userId', '!=', contract.creatorId)
-        .get()
     ).docs.map((doc) => doc.data() as Bet)
 
     if (contractBets.length === 0) {
@@ -82,9 +79,7 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
     )
   }
 
-  const isNewUniqueBettor =
+  const isNewUniqueBettor = !previousUniqueBettorIds.includes(bettorId)
-    !previousUniqueBettorIds.includes(bettorId) &&
-    bettorId !== contract.creatorId
 
   const newUniqueBettorIds = uniq([...previousUniqueBettorIds, bettorId])
   // Update contract unique bettors
@@ -96,7 +91,9 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
       uniqueBettorCount: newUniqueBettorIds.length,
     })
   }
-  if (!isNewUniqueBettor) return
+
+  // No need to give a bonus for the creator's bet
+  if (!isNewUniqueBettor || bettorId == contract.creatorId) return
 
   // Create combined txn for all new unique bettors
   const bonusTxnDetails = {
@@ -134,12 +131,11 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
       fromUser,
       eventId + '-bonus',
       result.txn.amount + '',
-      contract,
+      {
-      undefined,
+        contract,
-      // No need to set the user id, we'll use the contract creator id
+        slug: contract.slug,
-      undefined,
+        title: contract.question,
-      contract.slug,
+      }
-      contract.question
     )
   }
 }

functions/src/on-create-comment-on-contract.ts

@@ -68,7 +68,7 @@ export const onCreateCommentOnContract = functions
       ? 'answer'
       : undefined
 
-    const relatedUser = comment.replyToCommentId
+    const relatedUserId = comment.replyToCommentId
       ? comments.find((c) => c.id === comment.replyToCommentId)?.userId
       : answer?.userId
 
@@ -79,9 +79,7 @@ export const onCreateCommentOnContract = functions
       commentCreator,
       eventId,
       comment.text,
-      contract,
+      { contract, relatedSourceType, relatedUserId }
-      relatedSourceType,
-      relatedUser
     )
 
     const recipientUserIds = uniq([

functions/src/on-create-contract.ts

@@ -21,6 +21,6 @@ export const onCreateContract = functions.firestore
       contractCreator,
       eventId,
       richTextToString(contract.description as JSONContent),
-      contract
+      { contract }
     )
   })

functions/src/on-create-group.ts

@@ -20,11 +20,11 @@ export const onCreateGroup = functions.firestore
         groupCreator,
         eventId,
         group.about,
-        undefined,
+        {
-        undefined,
+          relatedUserId: memberId,
-        memberId,
+          slug: group.slug,
-        group.slug,
+          title: group.name,
-        group.name
+        }
       )
     }
   })

functions/src/on-create-liquidity-provision.ts

@@ -8,14 +8,14 @@ export const onCreateLiquidityProvision = functions.firestore
   .onCreate(async (change, context) => {
     const liquidity = change.data() as LiquidityProvision
     const { eventId } = context
-    const contract = await getContract(liquidity.contractId)
-
-    if (!contract)
-      throw new Error('Could not find contract corresponding with liquidity')
 
     // Ignore Manifold Markets liquidity for now - users see a notification for free market liquidity provision
     if (liquidity.userId === 'IPTOzEqrpkWmEzh6hwvAyY9PqFb2') return
 
+    const contract = await getContract(liquidity.contractId)
+    if (!contract)
+      throw new Error('Could not find contract corresponding with liquidity')
+
     const liquidityProvider = await getUser(liquidity.userId)
     if (!liquidityProvider) throw new Error('Could not find liquidity provider')
 
@@ -26,6 +26,6 @@ export const onCreateLiquidityProvision = functions.firestore
       liquidityProvider,
       eventId,
       liquidity.amount.toString(),
-      contract
+      { contract }
     )
   })

functions/src/on-delete-group.ts

@@ -3,6 +3,7 @@ import * as admin from 'firebase-admin'
 
 import { Group } from 'common/group'
 import { Contract } from 'common/contract'
+
 const firestore = admin.firestore()
 
 export const onDeleteGroup = functions.firestore
@@ -15,17 +16,21 @@ export const onDeleteGroup = functions.firestore
       .collection('contracts')
       .where('groupSlugs', 'array-contains', group.slug)
       .get()
+    console.log("contracts with group's slug:", contracts)
 
     for (const doc of contracts.docs) {
       const contract = doc.data() as Contract
+      const newGroupLinks = contract.groupLinks?.filter(
+        (link) => link.slug !== group.slug
+      )
+
       // remove the group from the contract
       await firestore
         .collection('contracts')
         .doc(contract.id)
         .update({
-          groupSlugs: (contract.groupSlugs ?? []).filter(
+          groupSlugs: contract.groupSlugs?.filter((s) => s !== group.slug),
-            (groupSlug) => groupSlug !== group.slug
+          groupLinks: newGroupLinks ?? [],
-          ),
         })
     }
   })

functions/src/on-follow-user.ts

@@ -30,9 +30,7 @@ export const onFollowUser = functions.firestore
       followingUser,
       eventId,
       '',
-      undefined,
+      { relatedUserId: follow.userId }
-      undefined,
-      follow.userId
     )
   })
 

functions/src/on-update-contract.ts

@@ -36,7 +36,7 @@ export const onUpdateContract = functions.firestore
         contractUpdater,
         eventId,
         resolutionText,
-        contract
+        { contract }
       )
     } else if (
       previousValue.closeTime !== contract.closeTime ||
@@ -62,7 +62,7 @@ export const onUpdateContract = functions.firestore
         contractUpdater,
         eventId,
         sourceText,
-        contract
+        { contract }
       )
     }
   })

functions/src/on-update-user.ts

@@ -103,8 +103,8 @@ async function handleUserUpdatedReferral(user: User, eventId: string) {
       description: `Referred new user id: ${user.id} for ${REFERRAL_AMOUNT}`,
     }
 
-    const txnDoc = await firestore.collection(`txns/`).doc(txn.id)
+    const txnDoc = firestore.collection(`txns/`).doc(txn.id)
-    await transaction.set(txnDoc, txn)
+    transaction.set(txnDoc, txn)
     console.log('created referral with txn id:', txn.id)
     // We're currently not subtracting M$ from the house, not sure if we want to for accounting purposes.
     transaction.update(referredByUserDoc, {

functions/src/place-bet.ts

@@ -96,7 +96,10 @@ export const placebet = newEndpoint({}, async (req, auth) => {
           limitProb,
           unfilledBets
         )
-      } else if (outcomeType == 'FREE_RESPONSE' && mechanism == 'dpm-2') {
+      } else if (
+        (outcomeType == 'FREE_RESPONSE' || outcomeType === 'MULTIPLE_CHOICE') &&
+        mechanism == 'dpm-2'
+      ) {
         const { outcome } = validate(freeResponseSchema, req.body)
         const answerDoc = contractDoc.collection('answers').doc(outcome)
         const answerSnap = await trans.get(answerDoc)

functions/src/resolve-market.ts

@@ -5,6 +5,7 @@ import { difference, uniq, mapValues, groupBy, sumBy } from 'lodash'
 import {
   Contract,
   FreeResponseContract,
+  MultipleChoiceContract,
   RESOLUTIONS,
 } from '../../common/contract'
 import { User } from '../../common/user'
@@ -245,7 +246,10 @@ function getResolutionParams(contract: Contract, body: string) {
       ...validate(pseudoNumericSchema, body),
       resolutions: undefined,
     }
-  } else if (outcomeType === 'FREE_RESPONSE') {
+  } else if (
+    outcomeType === 'FREE_RESPONSE' ||
+    outcomeType === 'MULTIPLE_CHOICE'
+  ) {
     const freeResponseParams = validate(freeResponseSchema, body)
     const { outcome } = freeResponseParams
     switch (outcome) {
@@ -292,7 +296,10 @@ function getResolutionParams(contract: Contract, body: string) {
   throw new APIError(500, `Invalid outcome type: ${outcomeType}`)
 }
 
-function validateAnswer(contract: FreeResponseContract, answer: number) {
+function validateAnswer(
+  contract: FreeResponseContract | MultipleChoiceContract,
+  answer: number
+) {
   const validIds = contract.answers.map((a) => a.id)
   if (!validIds.includes(answer.toString())) {
     throw new APIError(400, `${answer} is not a valid answer ID`)

functions/src/scripts/backfill-comment-ids.ts

@@ -0,0 +1,55 @@
+// We have some old comments without IDs and user IDs. Let's fill them in.
+// Luckily, this was back when all comments had associated bets, so it's possible
+// to retrieve the user IDs through the bets.
+
+import * as admin from 'firebase-admin'
+import { QueryDocumentSnapshot } from 'firebase-admin/firestore'
+import { initAdmin } from './script-init'
+import { log, writeAsync } from '../utils'
+import { Bet } from '../../../common/bet'
+
+initAdmin()
+const firestore = admin.firestore()
+
+const getUserIdsByCommentId = async (comments: QueryDocumentSnapshot[]) => {
+  const bets = await firestore.collectionGroup('bets').get()
+  log(`Loaded ${bets.size} bets.`)
+  const betsById = Object.fromEntries(
+    bets.docs.map((b) => [b.id, b.data() as Bet])
+  )
+  return Object.fromEntries(
+    comments.map((c) => [c.id, betsById[c.data().betId].userId])
+  )
+}
+
+if (require.main === module) {
+  const commentsQuery = firestore.collectionGroup('comments')
+  commentsQuery.get().then(async (commentSnaps) => {
+    log(`Loaded ${commentSnaps.size} comments.`)
+    const needsFilling = commentSnaps.docs.filter((ct) => {
+      return !('id' in ct.data()) || !('userId' in ct.data())
+    })
+    log(`${needsFilling.length} comments need IDs.`)
+    const userIdNeedsFilling = needsFilling.filter((ct) => {
+      return !('userId' in ct.data())
+    })
+    log(`${userIdNeedsFilling.length} comments need user IDs.`)
+    const userIdsByCommentId =
+      userIdNeedsFilling.length > 0
+        ? await getUserIdsByCommentId(userIdNeedsFilling)
+        : {}
+    const updates = needsFilling.map((ct) => {
+      const fields: { [k: string]: unknown } = {}
+      if (!ct.data().id) {
+        fields.id = ct.id
+      }
+      if (!ct.data().userId && userIdsByCommentId[ct.id]) {
+        fields.userId = userIdsByCommentId[ct.id]
+      }
+      return { doc: ct.ref, fields }
+    })
+    log(`Updating ${updates.length} comments.`)
+    await writeAsync(firestore, updates)
+    log(`Updated all comments.`)
+  })
+}

functions/src/scripts/convert-categories.ts

@@ -1,14 +1,9 @@
 import * as admin from 'firebase-admin'
 
 import { initAdmin } from './script-init'
-initAdmin()
-
 import { getValues, isProd } from '../utils'
-import {
+import { CATEGORIES_GROUP_SLUG_POSTFIX } from 'common/categories'
-  CATEGORIES_GROUP_SLUG_POSTFIX,
+import { Group, GroupLink } from 'common/group'
-  DEFAULT_CATEGORIES,
-} from 'common/categories'
-import { Group } from 'common/group'
 import { uniq } from 'lodash'
 import { Contract } from 'common/contract'
 import { User } from 'common/user'
@@ -18,28 +13,12 @@ import {
   HOUSE_LIQUIDITY_PROVIDER_ID,
 } from 'common/antes'
 
+initAdmin()
+
 const adminFirestore = admin.firestore()
 
-async function convertCategoriesToGroups() {
+const convertCategoriesToGroupsInternal = async (categories: string[]) => {
-  const groups = await getValues<Group>(adminFirestore.collection('groups'))
+  for (const category of categories) {
-  const contracts = await getValues<Contract>(
-    adminFirestore.collection('contracts')
-  )
-  for (const group of groups) {
-    const groupContracts = contracts.filter((contract) =>
-      group.contractIds.includes(contract.id)
-    )
-    for (const contract of groupContracts) {
-      await adminFirestore
-        .collection('contracts')
-        .doc(contract.id)
-        .update({
-          groupSlugs: uniq([...(contract.groupSlugs ?? []), group.slug]),
-        })
-    }
-  }
-
-  for (const category of Object.values(DEFAULT_CATEGORIES)) {
     const markets = await getValues<Contract>(
       adminFirestore
         .collection('contracts')
@@ -77,7 +56,7 @@ async function convertCategoriesToGroups() {
       createdTime: Date.now(),
       anyoneCanJoin: true,
       memberIds: [manifoldAccount],
-      about: 'Official group for all things related to ' + category,
+      about: 'Default group for all things related to ' + category,
       mostRecentActivityTime: Date.now(),
       contractIds: markets.map((market) => market.id),
       chatDisabled: true,
@@ -93,16 +72,35 @@ async function convertCategoriesToGroups() {
       })
 
     for (const market of markets) {
+      if (market.groupLinks?.map((l) => l.groupId).includes(newGroup.id))
+        continue // already in that group
+
+      const newGroupLinks = [
+        ...(market.groupLinks ?? []),
+        {
+          groupId: newGroup.id,
+          createdTime: Date.now(),
+          slug: newGroup.slug,
+          name: newGroup.name,
+        } as GroupLink,
+      ]
       await adminFirestore
         .collection('contracts')
         .doc(market.id)
         .update({
-          groupSlugs: uniq([...(market?.groupSlugs ?? []), newGroup.slug]),
+          groupSlugs: uniq([...(market.groupSlugs ?? []), newGroup.slug]),
+          groupLinks: newGroupLinks,
         })
     }
   }
 }
 
+async function convertCategoriesToGroups() {
+  // const defaultCategories = Object.values(DEFAULT_CATEGORIES)
+  const moreCategories = ['world', 'culture']
+  await convertCategoriesToGroupsInternal(moreCategories)
+}
+
 if (require.main === module) {
   convertCategoriesToGroups()
     .then(() => process.exit())

functions/src/scripts/link-contracts-to-groups.ts

@@ -0,0 +1,53 @@
+import { getValues } from 'functions/src/utils'
+import { Group } from 'common/group'
+import { Contract } from 'common/contract'
+import { initAdmin } from 'functions/src/scripts/script-init'
+import * as admin from 'firebase-admin'
+import { filterDefined } from 'common/util/array'
+import { uniq } from 'lodash'
+
+initAdmin()
+
+const adminFirestore = admin.firestore()
+
+const addGroupIdToContracts = async () => {
+  const groups = await getValues<Group>(adminFirestore.collection('groups'))
+
+  for (const group of groups) {
+    const groupContracts = await getValues<Contract>(
+      adminFirestore
+        .collection('contracts')
+        .where('groupSlugs', 'array-contains', group.slug)
+    )
+
+    for (const contract of groupContracts) {
+      const oldGroupLinks = contract.groupLinks?.filter(
+        (l) => l.slug != group.slug
+      )
+      const newGroupLinks = filterDefined([
+        ...(oldGroupLinks ?? []),
+        group.id
+          ? {
+              slug: group.slug,
+              name: group.name,
+              groupId: group.id,
+              createdTime: Date.now(),
+            }
+          : undefined,
+      ])
+      await adminFirestore
+        .collection('contracts')
+        .doc(contract.id)
+        .update({
+          groupSlugs: uniq([...(contract.groupSlugs ?? []), group.slug]),
+          groupLinks: newGroupLinks,
+        })
+    }
+  }
+}
+
+if (require.main === module) {
+  addGroupIdToContracts()
+    .then(() => process.exit())
+    .catch(console.log)
+}

functions/src/scripts/script-init.ts

@@ -66,10 +66,18 @@ export const getServiceAccountCredentials = (env?: string) => {
 }
 
 export const initAdmin = (env?: string) => {
-  const serviceAccount = getServiceAccountCredentials(env)
+  try {
-  console.log(`Initializing connection to ${serviceAccount.project_id}...`)
+    const serviceAccount = getServiceAccountCredentials(env)
-  return admin.initializeApp({
+    console.log(
-    projectId: serviceAccount.project_id,
+      `Initializing connection to ${serviceAccount.project_id} Firebase...`
-    credential: admin.credential.cert(serviceAccount),
+    )
-  })
+    return admin.initializeApp({
+      projectId: serviceAccount.project_id,
+      credential: admin.credential.cert(serviceAccount),
+    })
+  } catch (err) {
+    console.error(err)
+    console.log(`Initializing connection to default Firebase...`)
+    return admin.initializeApp()
+  }
 }

functions/src/sell-shares.ts

@@ -16,7 +16,7 @@ import { redeemShares } from './redeem-shares'
 
 const bodySchema = z.object({
   contractId: z.string(),
-  shares: z.number(),
+  shares: z.number().optional(), // leave it out to sell all shares
   outcome: z.enum(['YES', 'NO']),
 })
 
@@ -49,11 +49,12 @@ export const sellshares = newEndpoint({}, async (req, auth) => {
 
     const outcomeBets = userBets.filter((bet) => bet.outcome == outcome)
     const maxShares = sumBy(outcomeBets, (bet) => bet.shares)
+    const sharesToSell = shares ?? maxShares
 
-    if (!floatingLesserEqual(shares, maxShares))
+    if (!floatingLesserEqual(sharesToSell, maxShares))
       throw new APIError(400, `You can only sell up to ${maxShares} shares.`)
 
-    const soldShares = Math.min(shares, maxShares)
+    const soldShares = Math.min(sharesToSell, maxShares)
 
     const unfilledBetsSnap = await transaction.get(
       getUnfilledBetsQuery(contractDoc)

functions/src/serve.ts

@@ -0,0 +1,68 @@
+import * as cors from 'cors'
+import * as express from 'express'
+import { Express, Request, Response, NextFunction } from 'express'
+import { EndpointDefinition } from './api'
+
+const PORT = 8088
+
+import { initAdmin } from './scripts/script-init'
+initAdmin()
+
+import { health } from './health'
+import { transact } from './transact'
+import { changeuserinfo } from './change-user-info'
+import { createuser } from './create-user'
+import { createanswer } from './create-answer'
+import { placebet } from './place-bet'
+import { cancelbet } from './cancel-bet'
+import { sellbet } from './sell-bet'
+import { sellshares } from './sell-shares'
+import { claimmanalink } from './claim-manalink'
+import { createmarket } from './create-contract'
+import { addliquidity } from './add-liquidity'
+import { withdrawliquidity } from './withdraw-liquidity'
+import { creategroup } from './create-group'
+import { resolvemarket } from './resolve-market'
+import { unsubscribe } from './unsubscribe'
+import { stripewebhook, createcheckoutsession } from './stripe'
+
+type Middleware = (req: Request, res: Response, next: NextFunction) => void
+const app = express()
+
+const addEndpointRoute = (
+  path: string,
+  endpoint: EndpointDefinition,
+  ...middlewares: Middleware[]
+) => {
+  const method = endpoint.opts.method.toLowerCase() as keyof Express
+  const corsMiddleware = cors({ origin: endpoint.opts.cors })
+  const allMiddleware = [...middlewares, corsMiddleware]
+  app.options(path, corsMiddleware) // preflight requests
+  app[method](path, ...allMiddleware, endpoint.handler)
+}
+
+const addJsonEndpointRoute = (name: string, endpoint: EndpointDefinition) => {
+  addEndpointRoute(name, endpoint, express.json())
+}
+
+addEndpointRoute('/health', health)
+addJsonEndpointRoute('/transact', transact)
+addJsonEndpointRoute('/changeuserinfo', changeuserinfo)
+addJsonEndpointRoute('/createuser', createuser)
+addJsonEndpointRoute('/createanswer', createanswer)
+addJsonEndpointRoute('/placebet', placebet)
+addJsonEndpointRoute('/cancelbet', cancelbet)
+addJsonEndpointRoute('/sellbet', sellbet)
+addJsonEndpointRoute('/sellshares', sellshares)
+addJsonEndpointRoute('/claimmanalink', claimmanalink)
+addJsonEndpointRoute('/createmarket', createmarket)
+addJsonEndpointRoute('/addliquidity', addliquidity)
+addJsonEndpointRoute('/withdrawliquidity', withdrawliquidity)
+addJsonEndpointRoute('/creategroup', creategroup)
+addJsonEndpointRoute('/resolvemarket', resolvemarket)
+addJsonEndpointRoute('/unsubscribe', unsubscribe)
+addJsonEndpointRoute('/createcheckoutsession', createcheckoutsession)
+addEndpointRoute('/stripewebhook', stripewebhook, express.raw())
+
+app.listen(PORT)
+console.log(`Serving functions on port ${PORT}.`)

functions/src/stripe.ts

@@ -1,7 +1,7 @@
-import { onRequest } from 'firebase-functions/v2/https'
 import * as admin from 'firebase-admin'
 import Stripe from 'stripe'
 
+import { EndpointDefinition } from './api'
 import { getPrivateUser, getUser, isProd, payUser } from './utils'
 import { sendThankYouEmail } from './emails'
 import { track } from './analytics'
@@ -42,9 +42,9 @@ const manticDollarStripePrice = isProd()
       10000: 'price_1K8bEiGdoFKoCJW7Us4UkRHE',
     }
 
-export const createcheckoutsession = onRequest(
+export const createcheckoutsession: EndpointDefinition = {
-  { minInstances: 1, secrets: ['STRIPE_APIKEY'] },
+  opts: { method: 'POST', minInstances: 1, secrets: ['STRIPE_APIKEY'] },
-  async (req, res) => {
+  handler: async (req, res) => {
     const userId = req.query.userId?.toString()
 
     const manticDollarQuantity = req.query.manticDollarQuantity?.toString()
@@ -86,21 +86,24 @@ export const createcheckoutsession = onRequest(
     })
 
     res.redirect(303, session.url || '')
-  }
+  },
-)
+}
 
-export const stripewebhook = onRequest(
+export const stripewebhook: EndpointDefinition = {
-  {
+  opts: {
+    method: 'POST',
     minInstances: 1,
     secrets: ['MAILGUN_KEY', 'STRIPE_APIKEY', 'STRIPE_WEBHOOKSECRET'],
   },
-  async (req, res) => {
+  handler: async (req, res) => {
     const stripe = initStripe()
     let event
 
     try {
+      // Cloud Functions jam the raw body into a special `rawBody` property
+      const rawBody = (req as any).rawBody ?? req.body
       event = stripe.webhooks.constructEvent(
-        req.rawBody,
+        rawBody,
         req.headers['stripe-signature'] as string,
         process.env.STRIPE_WEBHOOKSECRET as string
       )
@@ -116,8 +119,8 @@ export const stripewebhook = onRequest(
     }
 
     res.status(200).send('success')
-  }
+  },
-)
+}
 
 const issueMoneys = async (session: StripeSession) => {
   const { id: sessionId } = session

functions/src/unsubscribe.ts

@@ -1,66 +1,72 @@
-import { onRequest } from 'firebase-functions/v2/https'
 import * as admin from 'firebase-admin'
+import { EndpointDefinition } from './api'
 import { getUser } from './utils'
 import { PrivateUser } from '../../common/user'
 
-export const unsubscribe = onRequest({ minInstances: 1 }, async (req, res) => {
+export const unsubscribe: EndpointDefinition = {
-  const id = req.query.id as string
+  opts: { method: 'GET', minInstances: 1 },
-  let type = req.query.type as string
+  handler: async (req, res) => {
-  if (!id || !type) {
+    const id = req.query.id as string
-    res.status(400).send('Empty id or type parameter.')
+    let type = req.query.type as string
-    return
+    if (!id || !type) {
-  }
+      res.status(400).send('Empty id or type parameter.')
+      return
+    }
 
-  if (type === 'market-resolved') type = 'market-resolve'
+    if (type === 'market-resolved') type = 'market-resolve'
 
-  if (
+    if (
-    !['market-resolve', 'market-comment', 'market-answer', 'generic'].includes(
+      ![
-      type
+        'market-resolve',
-    )
+        'market-comment',
-  ) {
+        'market-answer',
-    res.status(400).send('Invalid type parameter.')
+        'generic',
-    return
+      ].includes(type)
-  }
+    ) {
+      res.status(400).send('Invalid type parameter.')
+      return
+    }
 
-  const user = await getUser(id)
+    const user = await getUser(id)
 
-  if (!user) {
+    if (!user) {
-    res.send('This user is not currently subscribed or does not exist.')
+      res.send('This user is not currently subscribed or does not exist.')
-    return
+      return
-  }
+    }
 
-  const { name } = user
+    const { name } = user
 
-  const update: Partial<PrivateUser> = {
+    const update: Partial<PrivateUser> = {
-    ...(type === 'market-resolve' && {
+      ...(type === 'market-resolve' && {
-      unsubscribedFromResolutionEmails: true,
+        unsubscribedFromResolutionEmails: true,
-    }),
+      }),
-    ...(type === 'market-comment' && {
+      ...(type === 'market-comment' && {
-      unsubscribedFromCommentEmails: true,
+        unsubscribedFromCommentEmails: true,
-    }),
+      }),
-    ...(type === 'market-answer' && {
+      ...(type === 'market-answer' && {
-      unsubscribedFromAnswerEmails: true,
+        unsubscribedFromAnswerEmails: true,
-    }),
+      }),
-    ...(type === 'generic' && {
+      ...(type === 'generic' && {
-      unsubscribedFromGenericEmails: true,
+        unsubscribedFromGenericEmails: true,
-    }),
+      }),
-  }
+    }
 
-  await firestore.collection('private-users').doc(id).update(update)
+    await firestore.collection('private-users').doc(id).update(update)
 
-  if (type === 'market-resolve')
+    if (type === 'market-resolve')
-    res.send(
+      res.send(
-      `${name}, you have been unsubscribed from market resolution emails on Manifold Markets.`
+        `${name}, you have been unsubscribed from market resolution emails on Manifold Markets.`
-    )
+      )
-  else if (type === 'market-comment')
+    else if (type === 'market-comment')
-    res.send(
+      res.send(
-      `${name}, you have been unsubscribed from market comment emails on Manifold Markets.`
+        `${name}, you have been unsubscribed from market comment emails on Manifold Markets.`
-    )
+      )
-  else if (type === 'market-answer')
+    else if (type === 'market-answer')
-    res.send(
+      res.send(
-      `${name}, you have been unsubscribed from market answer emails on Manifold Markets.`
+        `${name}, you have been unsubscribed from market answer emails on Manifold Markets.`
-    )
+      )
-  else res.send(`${name}, you have been unsubscribed.`)
+    else res.send(`${name}, you have been unsubscribed.`)
-})
+  },
+}
 
 const firestore = admin.firestore()

functions/src/update-metrics.ts

@@ -11,8 +11,6 @@ import { last } from 'lodash'
 
 const firestore = admin.firestore()
 
-const oneDay = 1000 * 60 * 60 * 24
-
 const computeInvestmentValue = (
   bets: Bet[],
   contractsDict: { [k: string]: Contract }
@@ -59,8 +57,8 @@ export const updateMetricsCore = async () => {
     return {
       doc: firestore.collection('contracts').doc(contract.id),
       fields: {
-        volume24Hours: computeVolume(contractBets, now - oneDay),
+        volume24Hours: computeVolume(contractBets, now - DAY_MS),
-        volume7Days: computeVolume(contractBets, now - oneDay * 7),
+        volume7Days: computeVolume(contractBets, now - DAY_MS * 7),
       },
     }
   })

package.json

@@ -14,10 +14,13 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "5.25.0",
     "@typescript-eslint/parser": "5.25.0",
+    "concurrently": "6.5.1",
     "eslint": "8.15.0",
     "eslint-plugin-lodash": "^7.4.0",
     "prettier": "2.5.0",
-    "typescript": "4.6.4"
+    "typescript": "4.6.4",
+    "ts-node": "10.9.1",
+    "nodemon": "2.0.19"
   },
   "resolutions": {
     "@types/react": "17.0.43"

web/components/alert-box.tsx

@@ -1,24 +1,26 @@
 import { ExclamationIcon } from '@heroicons/react/solid'
+import { Col } from './layout/col'
+import { Row } from './layout/row'
 import { Linkify } from './linkify'
 
 export function AlertBox(props: { title: string; text: string }) {
   const { title, text } = props
   return (
-    <div className="rounded-md bg-yellow-50 p-4">
+    <Col className="rounded-md bg-yellow-50 p-4">
-      <div className="flex">
+      <Row className="mb-2 flex-shrink-0">
-        <div className="flex-shrink-0">
+        <ExclamationIcon
-          <ExclamationIcon
+          className="h-5 w-5 text-yellow-400"
-            className="h-5 w-5 text-yellow-400"
+          aria-hidden="true"
-            aria-hidden="true"
+        />
-          />
+
-        </div>
         <div className="ml-3">
           <h3 className="text-sm font-medium text-yellow-800">{title}</h3>
-          <div className="mt-2 text-sm text-yellow-700">
-            <Linkify text={text} />
-          </div>
         </div>
+      </Row>
+
+      <div className="mt-2 whitespace-pre-line text-sm text-yellow-700">
+        <Linkify text={text} />
       </div>
-    </div>
+    </Col>
   )
 }

web/components/amount-input.tsx

@@ -41,7 +41,7 @@ export function AmountInput(props: {
         <span className="bg-gray-200 text-sm">{label}</span>
         <input
           className={clsx(
-            'input input-bordered max-w-[200px] text-lg',
+            'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
             error && 'input-error',
             inputClassName
           )}

web/components/answers/answer-bet-panel.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 import { XIcon } from '@heroicons/react/solid'
 
 import { Answer } from 'common/answer'
-import { FreeResponseContract } from 'common/contract'
+import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
 import { BuyAmountInput } from '../amount-input'
 import { Col } from '../layout/col'
 import { APIError, placeBet } from 'web/lib/firebase/api'
@@ -29,7 +29,7 @@ import { isIOS } from 'web/lib/util/device'
 
 export function AnswerBetPanel(props: {
   answer: Answer
-  contract: FreeResponseContract
+  contract: FreeResponseContract | MultipleChoiceContract
   closePanel: () => void
   className?: string
   isModal?: boolean

web/components/answers/answer-item.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 
 import { Answer } from 'common/answer'
-import { FreeResponseContract } from 'common/contract'
+import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 import { Avatar } from '../avatar'
@@ -13,7 +13,7 @@ import { Linkify } from '../linkify'
 
 export function AnswerItem(props: {
   answer: Answer
-  contract: FreeResponseContract
+  contract: FreeResponseContract | MultipleChoiceContract
   showChoice: 'radio' | 'checkbox' | undefined
   chosenProb: number | undefined
   totalChosenProb?: number

web/components/answers/answer-resolve-panel.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { sum } from 'lodash'
 import { useState } from 'react'
 
-import { Contract, FreeResponse } from 'common/contract'
+import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
 import { Col } from '../layout/col'
 import { APIError, resolveMarket } from 'web/lib/firebase/api'
 import { Row } from '../layout/row'
@@ -11,7 +11,7 @@ import { ResolveConfirmationButton } from '../confirmation-button'
 import { removeUndefinedProps } from 'common/util/object'
 
 export function AnswerResolvePanel(props: {
-  contract: Contract & FreeResponse
+  contract: FreeResponseContract | MultipleChoiceContract
   resolveOption: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
   setResolveOption: (
     option: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined

web/components/answers/answers-graph.tsx

@@ -5,14 +5,14 @@ import { groupBy, sortBy, sumBy } from 'lodash'
 import { memo } from 'react'
 
 import { Bet } from 'common/bet'
-import { FreeResponseContract } from 'common/contract'
+import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
 import { getOutcomeProbability } from 'common/calculate'
 import { useWindowSize } from 'web/hooks/use-window-size'
 
 const NUM_LINES = 6
 
 export const AnswersGraph = memo(function AnswersGraph(props: {
-  contract: FreeResponseContract
+  contract: FreeResponseContract | MultipleChoiceContract
   bets: Bet[]
   height?: number
 }) {
@@ -178,15 +178,22 @@ function formatTime(
   return d.format(format)
 }
 
-const computeProbsByOutcome = (bets: Bet[], contract: FreeResponseContract) => {
+const computeProbsByOutcome = (
-  const { totalBets } = contract
+  bets: Bet[],
+  contract: FreeResponseContract | MultipleChoiceContract
+) => {
+  const { totalBets, outcomeType } = contract
 
   const betsByOutcome = groupBy(bets, (bet) => bet.outcome)
   const outcomes = Object.keys(betsByOutcome).filter((outcome) => {
     const maxProb = Math.max(
       ...betsByOutcome[outcome].map((bet) => bet.probAfter)
     )
-    return outcome !== '0' && maxProb > 0.02 && totalBets[outcome] > 0.000000001
+    return (
+      (outcome !== '0' || outcomeType === 'MULTIPLE_CHOICE') &&
+      maxProb > 0.02 &&
+      totalBets[outcome] > 0.000000001
+    )
   })
 
   const trackedOutcomes = sortBy(

web/components/answers/answers-panel.tsx

@@ -1,7 +1,7 @@
 import { sortBy, partition, sum, uniq } from 'lodash'
 import { useEffect, useState } from 'react'
 
-import { FreeResponseContract } from 'common/contract'
+import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
 import { Col } from '../layout/col'
 import { useUser } from 'web/hooks/use-user'
 import { getDpmOutcomeProbability } from 'common/calculate-dpm'
@@ -25,14 +25,19 @@ import { UserLink } from 'web/components/user-page'
 import { Linkify } from 'web/components/linkify'
 import { BuyButton } from 'web/components/yes-no-selector'
 
-export function AnswersPanel(props: { contract: FreeResponseContract }) {
+export function AnswersPanel(props: {
+  contract: FreeResponseContract | MultipleChoiceContract
+}) {
   const { contract } = props
-  const { creatorId, resolution, resolutions, totalBets } = contract
+  const { creatorId, resolution, resolutions, totalBets, outcomeType } =
+    contract
 
   const answers = useAnswers(contract.id) ?? contract.answers
   const [winningAnswers, losingAnswers] = partition(
     answers.filter(
-      (answer) => answer.id !== '0' && totalBets[answer.id] > 0.000000001
+      (answer) =>
+        (answer.id !== '0' || outcomeType === 'MULTIPLE_CHOICE') &&
+        totalBets[answer.id] > 0.000000001
     ),
     (answer) =>
       answer.id === resolution || (resolutions && resolutions[answer.id])
@@ -131,7 +136,8 @@ export function AnswersPanel(props: { contract: FreeResponseContract }) {
         <div className="pb-4 text-gray-500">No answers yet...</div>
       )}
 
-      {tradingAllowed(contract) &&
+      {outcomeType === 'FREE_RESPONSE' &&
+        tradingAllowed(contract) &&
         (!resolveOption || resolveOption === 'CANCEL') && (
           <CreateAnswerPanel contract={contract} />
         )}
@@ -152,7 +158,7 @@ export function AnswersPanel(props: { contract: FreeResponseContract }) {
 }
 
 function getAnswerItems(
-  contract: FreeResponseContract,
+  contract: FreeResponseContract | MultipleChoiceContract,
   answers: Answer[],
   user: User | undefined | null
 ) {
@@ -178,7 +184,7 @@ function getAnswerItems(
 }
 
 function OpenAnswer(props: {
-  contract: FreeResponseContract
+  contract: FreeResponseContract | MultipleChoiceContract
   answer: Answer
   items: ActivityItem[]
   type: string

web/components/answers/multiple-choice-answers.tsx

@@ -0,0 +1,65 @@
+import { MAX_ANSWER_LENGTH } from 'common/answer'
+import { useState } from 'react'
+import Textarea from 'react-expanding-textarea'
+import { XIcon } from '@heroicons/react/solid'
+
+import { Col } from '../layout/col'
+import { Row } from '../layout/row'
+
+export function MultipleChoiceAnswers(props: {
+  setAnswers: (answers: string[]) => void
+}) {
+  const [answers, setInternalAnswers] = useState(['', '', ''])
+
+  const setAnswer = (i: number, answer: string) => {
+    const newAnswers = setElement(answers, i, answer)
+    setInternalAnswers(newAnswers)
+    props.setAnswers(newAnswers)
+  }
+
+  const removeAnswer = (i: number) => {
+    const newAnswers = answers.slice(0, i).concat(answers.slice(i + 1))
+    setInternalAnswers(newAnswers)
+    props.setAnswers(newAnswers)
+  }
+
+  const addAnswer = () => setAnswer(answers.length, '')
+
+  return (
+    <Col>
+      {answers.map((answer, i) => (
+        <Row className="mb-2 items-center align-middle">
+          {i + 1}.{' '}
+          <Textarea
+            value={answer}
+            onChange={(e) => setAnswer(i, e.target.value)}
+            className="textarea textarea-bordered ml-2 w-full resize-none"
+            placeholder="Type your answer..."
+            rows={1}
+            maxLength={MAX_ANSWER_LENGTH}
+          />
+          {answers.length > 2 && (
+            <button
+              className="btn btn-xs btn-outline ml-2"
+              onClick={() => removeAnswer(i)}
+            >
+              <XIcon className="h-4 w-4 flex-shrink-0" />
+            </button>
+          )}
+        </Row>
+      ))}
+
+      <Row className="justify-end">
+        <button className="btn btn-outline btn-xs" onClick={addAnswer}>
+          Add answer
+        </button>
+      </Row>
+    </Col>
+  )
+}
+
+const setElement = <T,>(array: T[], i: number, elem: T) => {
+  const newArray = array.concat()
+  newArray[i] = elem
+  return newArray
+}

web/components/auth-context.tsx

@@ -0,0 +1,77 @@
+import { createContext, useEffect } from 'react'
+import { User } from 'common/user'
+import { onIdTokenChanged } from 'firebase/auth'
+import {
+  auth,
+  listenForUser,
+  getUser,
+  setCachedReferralInfoForUser,
+} from 'web/lib/firebase/users'
+import { deleteAuthCookies, setAuthCookies } from 'web/lib/firebase/auth'
+import { createUser } from 'web/lib/firebase/api'
+import { randomString } from 'common/util/random'
+import { identifyUser, setUserProperty } from 'web/lib/service/analytics'
+import { useStateCheckEquality } from 'web/hooks/use-state-check-equality'
+
+// Either we haven't looked up the logged in user yet (undefined), or we know
+// the user is not logged in (null), or we know the user is logged in (User).
+type AuthUser = undefined | null | User
+
+const CACHED_USER_KEY = 'CACHED_USER_KEY'
+
+const ensureDeviceToken = () => {
+  let deviceToken = localStorage.getItem('device-token')
+  if (!deviceToken) {
+    deviceToken = randomString()
+    localStorage.setItem('device-token', deviceToken)
+  }
+  return deviceToken
+}
+
+export const AuthContext = createContext<AuthUser>(null)
+
+export function AuthProvider({ children }: any) {
+  const [authUser, setAuthUser] = useStateCheckEquality<AuthUser>(undefined)
+
+  useEffect(() => {
+    const cachedUser = localStorage.getItem(CACHED_USER_KEY)
+    setAuthUser(cachedUser && JSON.parse(cachedUser))
+  }, [setAuthUser])
+
+  useEffect(() => {
+    return onIdTokenChanged(auth, async (fbUser) => {
+      if (fbUser) {
+        setAuthCookies(await fbUser.getIdToken(), fbUser.refreshToken)
+        let user = await getUser(fbUser.uid)
+        if (!user) {
+          const deviceToken = ensureDeviceToken()
+          user = (await createUser({ deviceToken })) as User
+        }
+        setAuthUser(user)
+        // Persist to local storage, to reduce login blink next time.
+        // Note: Cap on localStorage size is ~5mb
+        localStorage.setItem(CACHED_USER_KEY, JSON.stringify(user))
+        setCachedReferralInfoForUser(user)
+      } else {
+        // User logged out; reset to null
+        deleteAuthCookies()
+        setAuthUser(null)
+        localStorage.removeItem(CACHED_USER_KEY)
+      }
+    })
+  }, [setAuthUser])
+
+  const authUserId = authUser?.id
+  const authUsername = authUser?.username
+  useEffect(() => {
+    if (authUserId && authUsername) {
+      identifyUser(authUserId)
+      setUserProperty('username', authUsername)
+      return listenForUser(authUserId, setAuthUser)
+    }
+  }, [authUserId, authUsername, setAuthUser])
+
+  return (
+    <AuthContext.Provider value={authUser}>{children}</AuthContext.Provider>
+  )
+}

web/components/bet-panel.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
-import { partition, sum, sumBy } from 'lodash'
+import { clamp, partition, sum, sumBy } from 'lodash'
 
 import { useUser } from 'web/hooks/use-user'
 import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
@@ -13,34 +13,37 @@ import {
   formatPercent,
   formatWithCommas,
 } from 'common/util/format'
-import { getBinaryCpmmBetInfo } from 'common/new-bet'
+import { getBinaryBetStats, getBinaryCpmmBetInfo } from 'common/new-bet'
 import { User } from 'web/lib/firebase/users'
 import { Bet, LimitBet } from 'common/bet'
 import { APIError, placeBet } from 'web/lib/firebase/api'
 import { sellShares } from 'web/lib/firebase/api'
 import { AmountInput, BuyAmountInput } from './amount-input'
 import { InfoTooltip } from './info-tooltip'
-import { BinaryOutcomeLabel } from './outcome-label'
+import {
+  BinaryOutcomeLabel,
+  HigherLabel,
+  LowerLabel,
+  NoLabel,
+  YesLabel,
+} from './outcome-label'
 import { getProbability } from 'common/calculate'
 import { useFocus } from 'web/hooks/use-focus'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { calculateCpmmSale, getCpmmProbability } from 'common/calculate-cpmm'
-import {
+import { getFormattedMappedValue } from 'common/pseudo-numeric'
-  getFormattedMappedValue,
-  getPseudoProbability,
-} from 'common/pseudo-numeric'
 import { SellRow } from './sell-row'
 import { useSaveBinaryShares } from './use-save-binary-shares'
 import { SignUpPrompt } from './sign-up-prompt'
 import { isIOS } from 'web/lib/util/device'
-import { ProbabilityInput } from './probability-input'
+import { ProbabilityOrNumericInput } from './probability-input'
 import { track } from 'web/lib/service/analytics'
-import { removeUndefinedProps } from 'common/util/object'
 import { useUnfilledBets } from 'web/hooks/use-bets'
 import { LimitBets } from './limit-bets'
-import { BucketInput } from './bucket-input'
 import { PillButton } from './buttons/pill-button'
 import { YesNoSelector } from './yes-no-selector'
+import { PlayMoneyDisclaimer } from './play-money-disclaimer'
+import { AlertBox } from './alert-box'
 
 export function BetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -71,17 +74,27 @@ export function BetPanel(props: {
         <QuickOrLimitBet
           isLimitOrder={isLimitOrder}
           setIsLimitOrder={setIsLimitOrder}
+          hideToggle={!user}
         />
         <BuyPanel
+          hidden={isLimitOrder}
+          contract={contract}
+          user={user}
+          unfilledBets={unfilledBets}
+        />
+        <LimitOrderPanel
+          hidden={!isLimitOrder}
           contract={contract}
           user={user}
-          isLimitOrder={isLimitOrder}
           unfilledBets={unfilledBets}
         />
 
         <SignUpPrompt />
+
+        {!user && <PlayMoneyDisclaimer />}
       </Col>
-      {unfilledBets.length > 0 && (
+
+      {user && unfilledBets.length > 0 && (
         <LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
       )}
     </Col>
@@ -118,17 +131,27 @@ export function SimpleBetPanel(props: {
         <QuickOrLimitBet
           isLimitOrder={isLimitOrder}
           setIsLimitOrder={setIsLimitOrder}
+          hideToggle={!user}
         />
         <BuyPanel
+          hidden={isLimitOrder}
           contract={contract}
           user={user}
           unfilledBets={unfilledBets}
           selected={selected}
           onBuySuccess={onBetSuccess}
-          isLimitOrder={isLimitOrder}
+        />
+        <LimitOrderPanel
+          hidden={!isLimitOrder}
+          contract={contract}
+          user={user}
+          unfilledBets={unfilledBets}
+          onBuySuccess={onBetSuccess}
         />
 
         <SignUpPrompt />
+
+        {!user && <PlayMoneyDisclaimer />}
       </Col>
 
       {unfilledBets.length > 0 && (
@@ -142,21 +165,17 @@ function BuyPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   user: User | null | undefined
   unfilledBets: Bet[]
-  isLimitOrder?: boolean
+  hidden: boolean
   selected?: 'YES' | 'NO'
   onBuySuccess?: () => void
 }) {
-  const { contract, user, unfilledBets, isLimitOrder, selected, onBuySuccess } =
+  const { contract, user, unfilledBets, hidden, selected, onBuySuccess } = props
-    props
 
   const initialProb = getProbability(contract)
   const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
 
-  const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(selected)
+  const [outcome, setOutcome] = useState<'YES' | 'NO' | undefined>(selected)
   const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
-  const [limitProb, setLimitProb] = useState<number | undefined>(
-    Math.round(100 * initialProb)
-  )
   const [error, setError] = useState<string | undefined>()
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [wasSubmitted, setWasSubmitted] = useState(false)
@@ -171,7 +190,7 @@ function BuyPanel(props: {
   }, [selected, focusAmountInput])
 
   function onBetChoice(choice: 'YES' | 'NO') {
-    setBetChoice(choice)
+    setOutcome(choice)
     setWasSubmitted(false)
     focusAmountInput()
   }
@@ -179,29 +198,22 @@ function BuyPanel(props: {
   function onBetChange(newAmount: number | undefined) {
     setWasSubmitted(false)
     setBetAmount(newAmount)
-    if (!betChoice) {
+    if (!outcome) {
-      setBetChoice('YES')
+      setOutcome('YES')
     }
   }
 
   async function submitBet() {
     if (!user || !betAmount) return
-    if (isLimitOrder && limitProb === undefined) return
-
-    const limitProbScaled =
-      isLimitOrder && limitProb !== undefined ? limitProb / 100 : undefined
 
     setError(undefined)
     setIsSubmitting(true)
 
-    placeBet(
+    placeBet({
-      removeUndefinedProps({
+      outcome,
-        amount: betAmount,
+      amount: betAmount,
-        outcome: betChoice,
+      contractId: contract.id,
-        contractId: contract.id,
+    })
-        limitProb: limitProbScaled,
-      })
-    )
       .then((r) => {
         console.log('placed bet. Result:', r)
         setIsSubmitting(false)
@@ -225,21 +237,18 @@ function BuyPanel(props: {
       slug: contract.slug,
       contractId: contract.id,
       amount: betAmount,
-      outcome: betChoice,
+      outcome,
-      isLimitOrder,
+      isLimitOrder: false,
-      limitProb: limitProbScaled,
     })
   }
 
   const betDisabled = isSubmitting || !betAmount || error
 
-  const limitProbFrac = (limitProb ?? 0) / 100
-
   const { newPool, newP, newBet } = getBinaryCpmmBetInfo(
-    betChoice ?? 'YES',
+    outcome ?? 'YES',
     betAmount ?? 0,
     contract,
-    isLimitOrder ? limitProbFrac : undefined,
+    undefined,
     unfilledBets as LimitBet[]
   )
 
@@ -247,11 +256,7 @@ function BuyPanel(props: {
   const probStayedSame =
     formatPercent(resultProb) === formatPercent(initialProb)
 
-  const remainingMatched = isLimitOrder
+  const currentPayout = newBet.shares
-    ? ((newBet.orderAmount ?? 0) - newBet.amount) /
-      (betChoice === 'YES' ? limitProbFrac : 1 - limitProbFrac)
-    : 0
-  const currentPayout = newBet.shares + remainingMatched
 
   const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
   const currentReturnPercent = formatPercent(currentReturn)
@@ -260,15 +265,17 @@ function BuyPanel(props: {
 
   const format = getFormattedMappedValue(contract)
 
+  const bankrollFraction = (betAmount ?? 0) / (user?.balance ?? 1e9)
+
   return (
-    <>
+    <Col className={hidden ? 'hidden' : ''}>
       <div className="my-3 text-left text-sm text-gray-500">
         {isPseudoNumeric ? 'Direction' : 'Outcome'}
       </div>
       <YesNoSelector
         className="mb-4"
         btnClassName="flex-1"
-        selected={betChoice}
+        selected={outcome}
         onSelect={(choice) => onBetChoice(choice)}
         isPseudoNumeric={isPseudoNumeric}
       />
@@ -283,61 +290,37 @@ function BuyPanel(props: {
         disabled={isSubmitting}
         inputRef={inputRef}
       />
-      {isLimitOrder && (
+
-        <>
+      {(betAmount ?? 0) > 10 &&
-          <Row className="my-3 items-center gap-2 text-left text-sm text-gray-500">
+      bankrollFraction >= 0.5 &&
-            Limit {isPseudoNumeric ? 'value' : 'probability'}
+      bankrollFraction <= 1 ? (
-            <InfoTooltip
+        <AlertBox
-              text={`Bet ${betChoice === 'NO' ? 'down' : 'up'} to this ${
+          title="Whoa, there!"
-                isPseudoNumeric ? 'value' : 'probability'
+          text={`You might not want to spend ${formatPercent(
-              } and wait to match other bets.`}
+            bankrollFraction
-            />
+          )} of your balance on a single bet. \n\nCurrent balance: ${formatMoney(
-          </Row>
+            user?.balance ?? 0
-          {isPseudoNumeric ? (
+          )}`}
-            <BucketInput
+        />
-              contract={contract}
+      ) : (
-              onBucketChange={(value) =>
+        ''
-                setLimitProb(
-                  value === undefined
-                    ? undefined
-                    : 100 *
-                        getPseudoProbability(
-                          value,
-                          contract.min,
-                          contract.max,
-                          contract.isLogScale
-                        )
-                )
-              }
-              isSubmitting={isSubmitting}
-            />
-          ) : (
-            <ProbabilityInput
-              inputClassName="w-full max-w-none"
-              prob={limitProb}
-              onChange={setLimitProb}
-              disabled={isSubmitting}
-            />
-          )}
-        </>
       )}
+
       <Col className="mt-3 w-full gap-3">
-        {!isLimitOrder && (
+        <Row className="items-center justify-between text-sm">
-          <Row className="items-center justify-between text-sm">
+          <div className="text-gray-500">
-            <div className="text-gray-500">
+            {isPseudoNumeric ? 'Estimated value' : 'Probability'}
-              {isPseudoNumeric ? 'Estimated value' : 'Probability'}
+          </div>
+          {probStayedSame ? (
+            <div>{format(initialProb)}</div>
+          ) : (
+            <div>
+              {format(initialProb)}
+              <span className="mx-2">→</span>
+              {format(resultProb)}
             </div>
-            {probStayedSame ? (
+          )}
-              <div>{format(initialProb)}</div>
+        </Row>
-            ) : (
-              <div>
-                {format(initialProb)}
-                <span className="mx-2">→</span>
-                {format(resultProb)}
-              </div>
-            )}
-          </Row>
-        )}
 
         <Row className="items-center justify-between gap-2 text-sm">
           <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
@@ -346,7 +329,7 @@ function BuyPanel(props: {
                 'Max payout'
               ) : (
                 <>
-                  Payout if <BinaryOutcomeLabel outcome={betChoice ?? 'YES'} />
+                  Payout if <BinaryOutcomeLabel outcome={outcome ?? 'YES'} />
                 </>
               )}
             </div>
@@ -365,6 +348,348 @@ function BuyPanel(props: {
 
       <Spacer h={8} />
 
+      {user && (
+        <button
+          className={clsx(
+            'btn flex-1',
+            betDisabled
+              ? 'btn-disabled'
+              : outcome === 'YES'
+              ? 'btn-primary'
+              : 'border-none bg-red-400 hover:bg-red-500',
+            isSubmitting ? 'loading' : ''
+          )}
+          onClick={betDisabled ? undefined : submitBet}
+        >
+          {isSubmitting ? 'Submitting...' : 'Submit bet'}
+        </button>
+      )}
+
+      {wasSubmitted && <div className="mt-4">Bet submitted!</div>}
+    </Col>
+  )
+}
+
+function LimitOrderPanel(props: {
+  contract: CPMMBinaryContract | PseudoNumericContract
+  user: User | null | undefined
+  unfilledBets: Bet[]
+  hidden: boolean
+  onBuySuccess?: () => void
+}) {
+  const { contract, user, unfilledBets, hidden, onBuySuccess } = props
+
+  const initialProb = getProbability(contract)
+  const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
+
+  const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
+  const [lowLimitProb, setLowLimitProb] = useState<number | undefined>()
+  const [highLimitProb, setHighLimitProb] = useState<number | undefined>()
+  const betChoice = 'YES'
+  const [error, setError] = useState<string | undefined>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [wasSubmitted, setWasSubmitted] = useState(false)
+
+  const rangeError =
+    lowLimitProb !== undefined &&
+    highLimitProb !== undefined &&
+    lowLimitProb >= highLimitProb
+
+  const outOfRangeError =
+    (lowLimitProb !== undefined &&
+      (lowLimitProb <= 0 || lowLimitProb >= 100)) ||
+    (highLimitProb !== undefined &&
+      (highLimitProb <= 0 || highLimitProb >= 100))
+
+  const hasYesLimitBet = lowLimitProb !== undefined && !!betAmount
+  const hasNoLimitBet = highLimitProb !== undefined && !!betAmount
+  const hasTwoBets = hasYesLimitBet && hasNoLimitBet
+
+  const betDisabled =
+    isSubmitting ||
+    !betAmount ||
+    rangeError ||
+    outOfRangeError ||
+    error ||
+    (!hasYesLimitBet && !hasNoLimitBet)
+
+  const yesLimitProb =
+    lowLimitProb === undefined
+      ? undefined
+      : clamp(lowLimitProb / 100, 0.001, 0.999)
+  const noLimitProb =
+    highLimitProb === undefined
+      ? undefined
+      : clamp(highLimitProb / 100, 0.001, 0.999)
+
+  const amount = betAmount ?? 0
+  const shares =
+    yesLimitProb !== undefined && noLimitProb !== undefined
+      ? Math.min(amount / yesLimitProb, amount / (1 - noLimitProb))
+      : yesLimitProb !== undefined
+      ? amount / yesLimitProb
+      : noLimitProb !== undefined
+      ? amount / (1 - noLimitProb)
+      : 0
+
+  const yesAmount = shares * (yesLimitProb ?? 1)
+  const noAmount = shares * (1 - (noLimitProb ?? 0))
+
+  const profitIfBothFilled = shares - (yesAmount + noAmount)
+
+  function onBetChange(newAmount: number | undefined) {
+    setWasSubmitted(false)
+    setBetAmount(newAmount)
+  }
+
+  async function submitBet() {
+    if (!user || betDisabled) return
+
+    setError(undefined)
+    setIsSubmitting(true)
+
+    const betsPromise = hasTwoBets
+      ? Promise.all([
+          placeBet({
+            outcome: 'YES',
+            amount: yesAmount,
+            limitProb: yesLimitProb,
+            contractId: contract.id,
+          }),
+          placeBet({
+            outcome: 'NO',
+            amount: noAmount,
+            limitProb: noLimitProb,
+            contractId: contract.id,
+          }),
+        ])
+      : placeBet({
+          outcome: hasYesLimitBet ? 'YES' : 'NO',
+          amount: betAmount,
+          contractId: contract.id,
+          limitProb: hasYesLimitBet ? yesLimitProb : noLimitProb,
+        })
+
+    betsPromise
+      .catch((e) => {
+        if (e instanceof APIError) {
+          setError(e.toString())
+        } else {
+          console.error(e)
+          setError('Error placing bet')
+        }
+        setIsSubmitting(false)
+      })
+      .then((r) => {
+        console.log('placed bet. Result:', r)
+        setIsSubmitting(false)
+        setWasSubmitted(true)
+        setBetAmount(undefined)
+        if (onBuySuccess) onBuySuccess()
+      })
+
+    if (hasYesLimitBet) {
+      track('bet', {
+        location: 'bet panel',
+        outcomeType: contract.outcomeType,
+        slug: contract.slug,
+        contractId: contract.id,
+        amount: yesAmount,
+        outcome: 'YES',
+        limitProb: yesLimitProb,
+        isLimitOrder: true,
+        isRangeOrder: hasTwoBets,
+      })
+    }
+    if (hasNoLimitBet) {
+      track('bet', {
+        location: 'bet panel',
+        outcomeType: contract.outcomeType,
+        slug: contract.slug,
+        contractId: contract.id,
+        amount: noAmount,
+        outcome: 'NO',
+        limitProb: noLimitProb,
+        isLimitOrder: true,
+        isRangeOrder: hasTwoBets,
+      })
+    }
+  }
+
+  const {
+    currentPayout: yesPayout,
+    currentReturn: yesReturn,
+    totalFees: yesFees,
+    newBet: yesBet,
+  } = getBinaryBetStats(
+    'YES',
+    yesAmount,
+    contract,
+    yesLimitProb ?? initialProb,
+    unfilledBets as LimitBet[]
+  )
+  const yesReturnPercent = formatPercent(yesReturn)
+
+  const {
+    currentPayout: noPayout,
+    currentReturn: noReturn,
+    totalFees: noFees,
+    newBet: noBet,
+  } = getBinaryBetStats(
+    'NO',
+    noAmount,
+    contract,
+    noLimitProb ?? initialProb,
+    unfilledBets as LimitBet[]
+  )
+  const noReturnPercent = formatPercent(noReturn)
+
+  return (
+    <Col className={hidden ? 'hidden' : ''}>
+      <Row className="mt-1 items-center gap-4">
+        <Col className="gap-2">
+          <div className="relative ml-1 text-sm text-gray-500">
+            Bet {isPseudoNumeric ? <HigherLabel /> : <YesLabel />} at
+          </div>
+          <ProbabilityOrNumericInput
+            contract={contract}
+            prob={lowLimitProb}
+            setProb={setLowLimitProb}
+            isSubmitting={isSubmitting}
+          />
+        </Col>
+        <Col className="gap-2">
+          <div className="ml-1 text-sm text-gray-500">
+            Bet {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} at
+          </div>
+          <ProbabilityOrNumericInput
+            contract={contract}
+            prob={highLimitProb}
+            setProb={setHighLimitProb}
+            isSubmitting={isSubmitting}
+          />
+        </Col>
+      </Row>
+
+      {outOfRangeError && (
+        <div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
+          Limit is out of range
+        </div>
+      )}
+      {rangeError && !outOfRangeError && (
+        <div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
+          {isPseudoNumeric ? 'HIGHER' : 'YES'} limit must be less than{' '}
+          {isPseudoNumeric ? 'LOWER' : 'NO'} limit
+        </div>
+      )}
+
+      <div className="mt-1 mb-3 text-left text-sm text-gray-500">
+        Max amount<span className="ml-1 text-red-500">*</span>
+      </div>
+      <BuyAmountInput
+        inputClassName="w-full max-w-none"
+        amount={betAmount}
+        onChange={onBetChange}
+        error={error}
+        setError={setError}
+        disabled={isSubmitting}
+      />
+
+      <Col className="mt-3 w-full gap-3">
+        {(hasTwoBets || (hasYesLimitBet && yesBet.amount !== 0)) && (
+          <Row className="items-center justify-between gap-2 text-sm">
+            <div className="whitespace-nowrap text-gray-500">
+              {isPseudoNumeric ? (
+                <HigherLabel />
+              ) : (
+                <BinaryOutcomeLabel outcome={'YES'} />
+              )}{' '}
+              filled now
+            </div>
+            <div className="mr-2 whitespace-nowrap">
+              {formatMoney(yesBet.amount)} of{' '}
+              {formatMoney(yesBet.orderAmount ?? 0)}
+            </div>
+          </Row>
+        )}
+        {(hasTwoBets || (hasNoLimitBet && noBet.amount !== 0)) && (
+          <Row className="items-center justify-between gap-2 text-sm">
+            <div className="whitespace-nowrap text-gray-500">
+              {isPseudoNumeric ? (
+                <LowerLabel />
+              ) : (
+                <BinaryOutcomeLabel outcome={'NO'} />
+              )}{' '}
+              filled now
+            </div>
+            <div className="mr-2 whitespace-nowrap">
+              {formatMoney(noBet.amount)} of{' '}
+              {formatMoney(noBet.orderAmount ?? 0)}
+            </div>
+          </Row>
+        )}
+        {hasTwoBets && (
+          <Row className="items-center justify-between gap-2 text-sm">
+            <div className="whitespace-nowrap text-gray-500">
+              Profit if both orders filled
+            </div>
+            <div className="mr-2 whitespace-nowrap">
+              {formatMoney(profitIfBothFilled)}
+            </div>
+          </Row>
+        )}
+        {hasYesLimitBet && !hasTwoBets && (
+          <Row className="items-center justify-between gap-2 text-sm">
+            <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
+              <div>
+                {isPseudoNumeric ? (
+                  'Max payout'
+                ) : (
+                  <>
+                    Max <BinaryOutcomeLabel outcome={'YES'} /> payout
+                  </>
+                )}
+              </div>
+              <InfoTooltip
+                text={`Includes ${formatMoneyWithDecimals(yesFees)} in fees`}
+              />
+            </Row>
+            <div>
+              <span className="mr-2 whitespace-nowrap">
+                {formatMoney(yesPayout)}
+              </span>
+              (+{yesReturnPercent})
+            </div>
+          </Row>
+        )}
+        {hasNoLimitBet && !hasTwoBets && (
+          <Row className="items-center justify-between gap-2 text-sm">
+            <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
+              <div>
+                {isPseudoNumeric ? (
+                  'Max payout'
+                ) : (
+                  <>
+                    Max <BinaryOutcomeLabel outcome={'NO'} /> payout
+                  </>
+                )}
+              </div>
+              <InfoTooltip
+                text={`Includes ${formatMoneyWithDecimals(noFees)} in fees`}
+              />
+            </Row>
+            <div>
+              <span className="mr-2 whitespace-nowrap">
+                {formatMoney(noPayout)}
+              </span>
+              (+{noReturnPercent})
+            </div>
+          </Row>
+        )}
+      </Col>
+
+      {(hasYesLimitBet || hasNoLimitBet) && <Spacer h={8} />}
+
       {user && (
         <button
           className={clsx(
@@ -380,48 +705,47 @@ function BuyPanel(props: {
         >
           {isSubmitting
             ? 'Submitting...'
-            : isLimitOrder
+            : `Submit order${hasTwoBets ? 's' : ''}`}
-            ? 'Submit order'
-            : 'Submit bet'}
         </button>
       )}
 
-      {wasSubmitted && (
+      {wasSubmitted && <div className="mt-4">Order submitted!</div>}
-        <div className="mt-4">{isLimitOrder ? 'Order' : 'Bet'} submitted!</div>
+    </Col>
-      )}
-    </>
   )
 }
 
 function QuickOrLimitBet(props: {
   isLimitOrder: boolean
   setIsLimitOrder: (isLimitOrder: boolean) => void
+  hideToggle?: boolean
 }) {
-  const { isLimitOrder, setIsLimitOrder } = props
+  const { isLimitOrder, setIsLimitOrder, hideToggle } = props
 
   return (
     <Row className="align-center mb-4 justify-between">
       <div className="text-4xl">Bet</div>
-      <Row className="mt-1 items-center gap-2">
+      {!hideToggle && (
-        <PillButton
+        <Row className="mt-1 items-center gap-2">
-          selected={!isLimitOrder}
+          <PillButton
-          onSelect={() => {
+            selected={!isLimitOrder}
-            setIsLimitOrder(false)
+            onSelect={() => {
-            track('select quick order')
+              setIsLimitOrder(false)
-          }}
+              track('select quick order')
-        >
+            }}
-          Quick
+          >
-        </PillButton>
+            Quick
-        <PillButton
+          </PillButton>
-          selected={isLimitOrder}
+          <PillButton
-          onSelect={() => {
+            selected={isLimitOrder}
-            setIsLimitOrder(true)
+            onSelect={() => {
-            track('select limit order')
+              setIsLimitOrder(true)
-          }}
+              track('select limit order')
-        >
+            }}
-          Limit
+          >
-        </PillButton>
+            Limit
-      </Row>
+          </PillButton>
+        </Row>
+      )}
     </Row>
   )
 }
@@ -447,7 +771,9 @@ export function SellPanel(props: {
   const betDisabled = isSubmitting || !amount || error
 
   // Sell all shares if remaining shares would be < 1
-  const sellQuantity = amount === Math.floor(shares) ? shares : amount
+  const isSellingAllShares = amount === Math.floor(shares)
+
+  const sellQuantity = isSellingAllShares ? shares : amount
 
   async function submitSell() {
     if (!user || !amount) return
@@ -456,7 +782,7 @@ export function SellPanel(props: {
     setIsSubmitting(true)
 
     await sellShares({
-      shares: sellQuantity,
+      shares: isSellingAllShares ? undefined : amount,
       outcome: sharesOutcome,
       contractId: contract.id,
     })

web/components/bets-list.tsx

@@ -3,6 +3,7 @@ import { groupBy, mapValues, sortBy, partition, sumBy } from 'lodash'
 import dayjs from 'dayjs'
 import { useEffect, useMemo, useState } from 'react'
 import clsx from 'clsx'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
 
 import { Bet } from 'web/lib/firebase/bets'
 import { User } from 'web/lib/firebase/users'
@@ -78,10 +79,10 @@ export function BetsList(props: {
 
   const getTime = useTimeSinceFirstRender()
   useEffect(() => {
-    if (bets && contractsById) {
+    if (bets && contractsById && signedInUser) {
-      trackLatency('portfolio', getTime())
+      trackLatency(signedInUser.id, 'portfolio', getTime())
     }
-  }, [bets, contractsById, getTime])
+  }, [signedInUser, bets, contractsById, getTime])
 
   if (!bets || !contractsById) {
     return <LoadingIndicator />
@@ -277,13 +278,7 @@ function ContractBets(props: {
     bets
   )
   return (
-    <div
+    <div tabIndex={0} className="relative bg-white p-4 pr-6">
-      tabIndex={0}
-      className={clsx(
-        'collapse collapse-arrow relative bg-white p-4 pr-6',
-        collapsed ? 'collapse-close' : 'collapse-open pb-2'
-      )}
-    >
       <Row
         className="cursor-pointer flex-wrap gap-2"
         onClick={() => setCollapsed((collapsed) => !collapsed)}
@@ -300,10 +295,11 @@ function ContractBets(props: {
             </Link>
 
             {/* Show carrot for collapsing. Hack the positioning. */}
-            <div
+            {collapsed ? (
-              className="collapse-title absolute h-0 min-h-0 w-0 p-0"
+              <ChevronDownIcon className="absolute top-5 right-4 h-6 w-6" />
-              style={{ top: -10, right: 0 }}
+            ) : (
-            />
+              <ChevronUpIcon className="absolute top-5 right-4 h-6 w-6" />
+            )}
           </Row>
 
           <Row className="flex-1 items-center gap-2 text-sm text-gray-500">
@@ -335,55 +331,42 @@ function ContractBets(props: {
           </Row>
         </Col>
 
-        <Row className="mr-5 justify-end sm:mr-8">
+        <Col className="mr-5 sm:mr-8">
-          <Col>
+          <div className="whitespace-nowrap text-right text-lg">
-            <div className="whitespace-nowrap text-right text-lg">
+            {formatMoney(metric === 'profit' ? profit : payout)}
-              {formatMoney(metric === 'profit' ? profit : payout)}
+          </div>
-            </div>
+          <ProfitBadge className="text-right" profitPercent={profitPercent} />
-            <div className="text-right">
+        </Col>
-              <ProfitBadge profitPercent={profitPercent} />
-            </div>
-          </Col>
-        </Row>
       </Row>
 
-      <div
+      {!collapsed && (
-        className="collapse-content !px-0"
+        <div className="bg-white">
-        style={{ backgroundColor: 'white' }}
+          <BetsSummary
-      >
+            className="mt-8 mr-5 flex-1 sm:mr-8"
-        <Spacer h={8} />
+            contract={contract}
+            bets={bets}
+            isYourBets={isYourBets}
+          />
 
-        <BetsSummary
+          {contract.mechanism === 'cpmm-1' && limitBets.length > 0 && (
-          className="mr-5 flex-1 sm:mr-8"
-          contract={contract}
-          bets={bets}
-          isYourBets={isYourBets}
-        />
-
-        <Spacer h={4} />
-
-        {contract.mechanism === 'cpmm-1' && limitBets.length > 0 && (
-          <>
             <div className="max-w-md">
-              <div className="bg-gray-50 px-4 py-2">Limit orders</div>
+              <div className="mt-4 bg-gray-50 px-4 py-2">Limit orders</div>
               <LimitOrderTable
                 contract={contract}
                 limitBets={limitBets}
                 isYou={true}
               />
             </div>
-          </>
+          )}
-        )}
 
-        <Spacer h={4} />
+          <div className="mt-4 bg-gray-50 px-4 py-2">Bets</div>
-
+          <ContractBetsTable
-        <div className="bg-gray-50 px-4 py-2">Bets</div>
+            contract={contract}
-        <ContractBetsTable
+            bets={bets}
-          contract={contract}
+            isYourBets={isYourBets}
-          bets={bets}
+          />
-          isYourBets={isYourBets}
+        </div>
-        />
+      )}
-      </div>
     </div>
   )
 }
@@ -427,107 +410,92 @@ export function BetsSummary(props: {
 
   return (
     <Row className={clsx('flex-wrap gap-4 sm:flex-nowrap sm:gap-6', className)}>
-      <Row className="flex-wrap gap-4 sm:gap-6">
+      {!isCpmm && (
-        {!isCpmm && (
-          <Col>
-            <div className="whitespace-nowrap text-sm text-gray-500">
-              Invested
-            </div>
-            <div className="whitespace-nowrap">{formatMoney(invested)}</div>
-          </Col>
-        )}
-        {resolution ? (
-          <Col>
-            <div className="text-sm text-gray-500">Payout</div>
-            <div className="whitespace-nowrap">
-              {formatMoney(payout)}{' '}
-              <ProfitBadge profitPercent={profitPercent} />
-            </div>
-          </Col>
-        ) : (
-          <>
-            {isBinary ? (
-              <>
-                <Col>
-                  <div className="whitespace-nowrap text-sm text-gray-500">
-                    Payout if <YesLabel />
-                  </div>
-                  <div className="whitespace-nowrap">
-                    {formatMoney(yesWinnings)}
-                  </div>
-                </Col>
-                <Col>
-                  <div className="whitespace-nowrap text-sm text-gray-500">
-                    Payout if <NoLabel />
-                  </div>
-                  <div className="whitespace-nowrap">
-                    {formatMoney(noWinnings)}
-                  </div>
-                </Col>
-              </>
-            ) : isPseudoNumeric ? (
-              <>
-                <Col>
-                  <div className="whitespace-nowrap text-sm text-gray-500">
-                    Payout if {'>='} {formatLargeNumber(contract.max)}
-                  </div>
-                  <div className="whitespace-nowrap">
-                    {formatMoney(yesWinnings)}
-                  </div>
-                </Col>
-                <Col>
-                  <div className="whitespace-nowrap text-sm text-gray-500">
-                    Payout if {'<='} {formatLargeNumber(contract.min)}
-                  </div>
-                  <div className="whitespace-nowrap">
-                    {formatMoney(noWinnings)}
-                  </div>
-                </Col>
-              </>
-            ) : (
-              <Col>
-                <div className="whitespace-nowrap text-sm text-gray-500">
-                  Current value
-                </div>
-                <div className="whitespace-nowrap">{formatMoney(payout)}</div>
-              </Col>
-            )}
-          </>
-        )}
         <Col>
-          <div className="whitespace-nowrap text-sm text-gray-500">Profit</div>
+          <div className="whitespace-nowrap text-sm text-gray-500">
+            Invested
+          </div>
+          <div className="whitespace-nowrap">{formatMoney(invested)}</div>
+        </Col>
+      )}
+      {resolution ? (
+        <Col>
+          <div className="text-sm text-gray-500">Payout</div>
           <div className="whitespace-nowrap">
-            {formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} />
+            {formatMoney(payout)} <ProfitBadge profitPercent={profitPercent} />
-            {isYourBets &&
-              isCpmm &&
-              (isBinary || isPseudoNumeric) &&
-              !isClosed &&
-              !resolution &&
-              hasShares &&
-              sharesOutcome &&
-              user && (
-                <>
-                  <button
-                    className="btn btn-sm ml-2"
-                    onClick={() => setShowSellModal(true)}
-                  >
-                    Sell
-                  </button>
-                  {showSellModal && (
-                    <SellSharesModal
-                      contract={contract}
-                      user={user}
-                      userBets={bets}
-                      shares={totalShares[sharesOutcome]}
-                      sharesOutcome={sharesOutcome}
-                      setOpen={setShowSellModal}
-                    />
-                  )}
-                </>
-              )}
           </div>
         </Col>
-      </Row>
+      ) : isBinary ? (
+        <>
+          <Col>
+            <div className="whitespace-nowrap text-sm text-gray-500">
+              Payout if <YesLabel />
+            </div>
+            <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
+          </Col>
+          <Col>
+            <div className="whitespace-nowrap text-sm text-gray-500">
+              Payout if <NoLabel />
+            </div>
+            <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
+          </Col>
+        </>
+      ) : isPseudoNumeric ? (
+        <>
+          <Col>
+            <div className="whitespace-nowrap text-sm text-gray-500">
+              Payout if {'>='} {formatLargeNumber(contract.max)}
+            </div>
+            <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
+          </Col>
+          <Col>
+            <div className="whitespace-nowrap text-sm text-gray-500">
+              Payout if {'<='} {formatLargeNumber(contract.min)}
+            </div>
+            <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
+          </Col>
+        </>
+      ) : (
+        <Col>
+          <div className="whitespace-nowrap text-sm text-gray-500">
+            Current value
+          </div>
+          <div className="whitespace-nowrap">{formatMoney(payout)}</div>
+        </Col>
+      )}
+      <Col>
+        <div className="whitespace-nowrap text-sm text-gray-500">Profit</div>
+        <div className="whitespace-nowrap">
+          {formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} />
+          {isYourBets &&
+            isCpmm &&
+            (isBinary || isPseudoNumeric) &&
+            !isClosed &&
+            !resolution &&
+            hasShares &&
+            sharesOutcome &&
+            user && (
+              <>
+                <button
+                  className="btn btn-sm ml-2"
+                  onClick={() => setShowSellModal(true)}
+                >
+                  Sell
+                </button>
+                {showSellModal && (
+                  <SellSharesModal
+                    contract={contract}
+                    user={user}
+                    userBets={bets}
+                    shares={totalShares[sharesOutcome]}
+                    sharesOutcome={sharesOutcome}
+                    setOpen={setShowSellModal}
+                  />
+                )}
+              </>
+            )}
+        </div>
+      </Col>
     </Row>
   )
 }
@@ -689,7 +657,13 @@ function BetRow(props: {
           !isClosed &&
           !isSold &&
           !isAnte &&
-          !isNumeric && <SellButton contract={contract} bet={bet} />}
+          !isNumeric && (
+            <SellButton
+              contract={contract}
+              bet={bet}
+              unfilledBets={unfilledBets}
+            />
+          )}
       </td>
       {isCPMM && <td>{shares >= 0 ? 'BUY' : 'SELL'}</td>}
       <td>
@@ -729,8 +703,12 @@ function BetRow(props: {
   )
 }
 
-function SellButton(props: { contract: Contract; bet: Bet }) {
+function SellButton(props: {
-  const { contract, bet } = props
+  contract: Contract
+  bet: Bet
+  unfilledBets: LimitBet[]
+}) {
+  const { contract, bet, unfilledBets } = props
   const { outcome, shares, loanAmount } = bet
 
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -740,8 +718,6 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
     outcome === 'NO' ? 'YES' : outcome
   )
 
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
-
   const outcomeProb = getProbabilityAfterSale(
     contract,
     outcome,
@@ -787,8 +763,8 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
   )
 }
 
-function ProfitBadge(props: { profitPercent: number }) {
+function ProfitBadge(props: { profitPercent: number; className?: string }) {
-  const { profitPercent } = props
+  const { profitPercent, className } = props
   if (!profitPercent) return null
   const colors =
     profitPercent > 0
@@ -799,7 +775,8 @@ function ProfitBadge(props: { profitPercent: number }) {
     <span
       className={clsx(
         'ml-1 inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium',
-        colors
+        colors,
+        className
       )}
     >
       {(profitPercent > 0 ? '+' : '') + profitPercent.toFixed(1) + '%'}

web/components/bucket-input.tsx

@@ -9,8 +9,9 @@ export function BucketInput(props: {
   contract: NumericContract | PseudoNumericContract
   isSubmitting?: boolean
   onBucketChange: (value?: number, bucket?: string) => void
+  placeholder?: string
 }) {
-  const { contract, isSubmitting, onBucketChange } = props
+  const { contract, isSubmitting, onBucketChange, placeholder } = props
 
   const [numberString, setNumberString] = useState('')
 
@@ -39,7 +40,7 @@ export function BucketInput(props: {
       error={undefined}
       disabled={isSubmitting}
       numberString={numberString}
-      label="Value"
+      placeholder={placeholder}
     />
   )
 }

web/components/button.tsx

@@ -6,7 +6,7 @@ export function Button(props: {
   onClick?: () => void
   children?: ReactNode
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray'
+  color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray' | 'gray-white'
   type?: 'button' | 'reset' | 'submit'
   disabled?: boolean
 }) {
@@ -40,6 +40,7 @@ export function Button(props: {
         color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
         color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
         color === 'gray' && 'bg-gray-100 text-gray-600 hover:bg-gray-200',
+        color === 'gray-white' && 'bg-white text-gray-500 hover:bg-gray-200',
         className
       )}
       disabled={disabled}

web/components/comments-list.tsx

@@ -17,58 +17,55 @@ export function UserCommentsList(props: {
   contractsById: { [id: string]: Contract }
 }) {
   const { comments, contractsById } = props
-  const commentsByContract = groupBy(comments, 'contractId')
 
-  const contractCommentPairs = Object.entries(commentsByContract)
+  // we don't show comments in groups here atm, just comments on contracts
-    .map(
+  const contractComments = comments.filter((c) => c.contractId)
-      ([contractId, comments]) => [contractsById[contractId], comments] as const
+  const commentsByContract = groupBy(contractComments, 'contractId')
-    )
-    .filter(([contract]) => contract)
 
   return (
     <Col className={'bg-white'}>
-      {contractCommentPairs.map(([contract, comments]) => (
+      {Object.entries(commentsByContract).map(([contractId, comments]) => {
-        <div key={contract.id} className={'border-width-1 border-b p-5'}>
+        const contract = contractsById[contractId]
-          <div className={'mb-2 text-sm text-indigo-700'}>
+        return (
-            <SiteLink href={contractPath(contract)}>
+          <div key={contractId} className={'border-width-1 border-b p-5'}>
+            <SiteLink
+              className={'mb-2 block text-sm text-indigo-700'}
+              href={contractPath(contract)}
+            >
               {contract.question}
             </SiteLink>
+            {comments.map((comment) => (
+              <ProfileComment
+                key={comment.id}
+                comment={comment}
+                className="relative flex items-start space-x-3 pb-6"
+              />
+            ))}
           </div>
-          {comments.map((comment) => (
+        )
-            <div key={comment.id} className={'relative pb-6'}>
+      })}
-              <div className="relative flex items-start space-x-3">
-                <ProfileComment comment={comment} />
-              </div>
-            </div>
-          ))}
-        </div>
-      ))}
     </Col>
   )
 }
 
-function ProfileComment(props: { comment: Comment }) {
+function ProfileComment(props: { comment: Comment; className?: string }) {
-  const { comment } = props
+  const { comment, className } = props
   const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
   // TODO: find and attach relevant bets by comment betId at some point
   return (
-    <div>
+    <Row className={className}>
-      <Row className={'gap-4'}>
+      <Avatar username={userUsername} avatarUrl={userAvatarUrl} />
-        <Avatar username={userUsername} avatarUrl={userAvatarUrl} />
+      <div className="min-w-0 flex-1">
-        <div className="min-w-0 flex-1">
+        <p className="mt-0.5 text-sm text-gray-500">
-          <div>
+          <UserLink
-            <p className="mt-0.5 text-sm text-gray-500">
+            className="text-gray-500"
-              <UserLink
+            username={userUsername}
-                className="text-gray-500"
+            name={userName}
-                username={userUsername}
+          />{' '}
-                name={userName}
+          <RelativeTimestamp time={createdTime} />
-              />{' '}
+        </p>
-              <RelativeTimestamp time={createdTime} />
+        <Linkify text={text} />
-            </p>
+      </div>
-          </div>
+    </Row>
-          <Linkify text={text} />
-        </div>
-      </Row>
-    </div>
   )
 }

web/components/contract-search.tsx

@@ -15,14 +15,17 @@ import {
   useInitialQueryAndSort,
   useUpdateQueryAndSort,
 } from '../hooks/use-sort-and-query-params'
-import { ContractsGrid } from './contract/contracts-list'
+import {
+  ContractHighlightOptions,
+  ContractsGrid,
+} from './contract/contracts-list'
 import { Row } from './layout/row'
 import { useEffect, useMemo, useRef, 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 { trackCallback } from 'web/lib/service/analytics'
+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'
@@ -39,11 +42,12 @@ const indexPrefix = ENV === 'DEV' ? 'dev-' : ''
 
 const sortIndexes = [
   { label: 'Newest', value: indexPrefix + 'contracts-newest' },
-  { label: 'Oldest', value: indexPrefix + 'contracts-oldest' },
+  // { label: 'Oldest', value: indexPrefix + 'contracts-oldest' },
   { label: 'Most popular', value: indexPrefix + 'contracts-score' },
   { label: 'Most traded', value: indexPrefix + 'contracts-most-traded' },
   { label: '24h volume', value: indexPrefix + 'contracts-24-hour-vol' },
   { label: 'Last updated', value: indexPrefix + 'contracts-last-updated' },
+  { label: 'Subsidy', value: indexPrefix + 'contracts-liquidity' },
   { label: 'Close date', value: indexPrefix + 'contracts-close-date' },
   { label: 'Resolve date', value: indexPrefix + 'contracts-resolve-date' },
 ]
@@ -63,11 +67,15 @@ export function ContractSearch(props: {
     excludeContractIds?: string[]
     groupSlug?: string
   }
+  highlightOptions?: ContractHighlightOptions
   onContractClick?: (contract: Contract) => void
   showPlaceHolder?: boolean
   hideOrderSelector?: boolean
   overrideGridClassName?: string
-  hideQuickBet?: boolean
+  cardHideOptions?: {
+    hideGroupLink?: boolean
+    hideQuickBet?: boolean
+  }
 }) {
   const {
     querySortOptions,
@@ -76,7 +84,8 @@ export function ContractSearch(props: {
     overrideGridClassName,
     hideOrderSelector,
     showPlaceHolder,
-    hideQuickBet,
+    cardHideOptions,
+    highlightOptions,
   } = props
 
   const user = useUser()
@@ -111,8 +120,14 @@ export function ContractSearch(props: {
     querySortOptions?.defaultFilter ?? 'open'
   )
   const pillsEnabled = !additionalFilter
+
   const [pillFilter, setPillFilter] = useState<string | undefined>(undefined)
 
+  const selectFilter = (pill: string | undefined) => () => {
+    setPillFilter(pill)
+    track('select search category', { category: pill ?? 'all' })
+  }
+
   const { filters, numericFilters } = useMemo(() => {
     let filters = [
       filter === 'open' ? 'isResolved:false' : '',
@@ -123,15 +138,15 @@ export function ContractSearch(props: {
         : '',
       additionalFilter?.tag ? `lowercaseTags:${additionalFilter.tag}` : '',
       additionalFilter?.groupSlug
-        ? `groupSlugs:${additionalFilter.groupSlug}`
+        ? `groupLinks.slug:${additionalFilter.groupSlug}`
         : '',
       pillFilter && pillFilter !== 'personal' && pillFilter !== 'your-bets'
-        ? `groupSlugs:${pillFilter}`
+        ? `groupLinks.slug:${pillFilter}`
         : '',
       pillFilter === 'personal'
         ? // Show contracts in groups that the user is a member of
           memberGroupSlugs
-            .map((slug) => `groupSlugs:${slug}`)
+            .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
@@ -191,7 +206,7 @@ export function ContractSearch(props: {
           className="!select !select-bordered"
           value={filter}
           onChange={(e) => setFilter(e.target.value as filter)}
-          onBlur={trackCallback('select search filter')}
+          onBlur={trackCallback('select search filter', { filter })}
         >
           <option value="open">Open</option>
           <option value="closed">Closed</option>
@@ -204,7 +219,7 @@ export function ContractSearch(props: {
             classNames={{
               select: '!select !select-bordered',
             }}
-            onBlur={trackCallback('select search sort')}
+            onBlur={trackCallback('select search sort', { sort })}
           />
         )}
         <Configure
@@ -222,32 +237,34 @@ export function ContractSearch(props: {
           <PillButton
             key={'all'}
             selected={pillFilter === undefined}
-            onSelect={() => setPillFilter(undefined)}
+            onSelect={selectFilter(undefined)}
           >
             All
           </PillButton>
           <PillButton
             key={'personal'}
             selected={pillFilter === 'personal'}
-            onSelect={() => setPillFilter('personal')}
+            onSelect={selectFilter('personal')}
           >
-            For you
+            {user ? 'For you' : 'Featured'}
           </PillButton>
 
-          <PillButton
+          {user && (
-            key={'your-bets'}
+            <PillButton
-            selected={pillFilter === 'your-bets'}
+              key={'your-bets'}
-            onSelect={() => setPillFilter('your-bets')}
+              selected={pillFilter === 'your-bets'}
-          >
+              onSelect={selectFilter('your-bets')}
-            Your bets
+            >
-          </PillButton>
+              Your bets
+            </PillButton>
+          )}
 
           {pillGroups.map(({ name, slug }) => {
             return (
               <PillButton
                 key={slug}
                 selected={pillFilter === slug}
-                onSelect={() => setPillFilter(slug)}
+                onSelect={selectFilter(slug)}
               >
                 {name}
               </PillButton>
@@ -267,8 +284,9 @@ export function ContractSearch(props: {
           querySortOptions={querySortOptions}
           onContractClick={onContractClick}
           overrideGridClassName={overrideGridClassName}
-          hideQuickBet={hideQuickBet}
           excludeContractIds={additionalFilter?.excludeContractIds}
+          highlightOptions={highlightOptions}
+          cardHideOptions={cardHideOptions}
         />
       )}
     </InstantSearch>
@@ -284,13 +302,19 @@ export function ContractSearchInner(props: {
   overrideGridClassName?: string
   hideQuickBet?: boolean
   excludeContractIds?: string[]
+  highlightOptions?: ContractHighlightOptions
+  cardHideOptions?: {
+    hideQuickBet?: boolean
+    hideGroupLink?: boolean
+  }
 }) {
   const {
     querySortOptions,
     onContractClick,
     overrideGridClassName,
-    hideQuickBet,
+    cardHideOptions,
     excludeContractIds,
+    highlightOptions,
   } = props
   const { initialQuery } = useInitialQueryAndSort(querySortOptions)
 
@@ -351,7 +375,8 @@ export function ContractSearchInner(props: {
       showTime={showTime}
       onContractClick={onContractClick}
       overrideGridClassName={overrideGridClassName}
-      hideQuickBet={hideQuickBet}
+      highlightOptions={highlightOptions}
+      cardHideOptions={cardHideOptions}
     />
   )
 }

web/components/contract/contract-card.tsx

@@ -5,9 +5,10 @@ import { formatLargeNumber, formatPercent } from 'common/util/format'
 import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import {
-  Contract,
   BinaryContract,
+  Contract,
   FreeResponseContract,
+  MultipleChoiceContract,
   NumericContract,
   PseudoNumericContract,
 } from 'common/contract'
@@ -24,7 +25,7 @@ import {
 } from 'common/calculate'
 import { AvatarDetails, MiscDetails, ShowTime } from './contract-details'
 import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
-import { QuickBet, ProbBar, getColor } from './quick-bet'
+import { getColor, ProbBar, QuickBet } from './quick-bet'
 import { useContractWithPreload } from 'web/hooks/use-contract'
 import { useUser } from 'web/hooks/use-user'
 import { track } from '@amplitude/analytics-browser'
@@ -38,8 +39,16 @@ export function ContractCard(props: {
   className?: string
   onClick?: () => void
   hideQuickBet?: boolean
+  hideGroupLink?: boolean
 }) {
-  const { showHotVolume, showTime, className, onClick, hideQuickBet } = props
+  const {
+    showHotVolume,
+    showTime,
+    className,
+    onClick,
+    hideQuickBet,
+    hideGroupLink,
+  } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const { question, outcomeType } = contract
   const { resolution } = contract
@@ -121,6 +130,7 @@ export function ContractCard(props: {
               contract={contract}
               showHotVolume={showHotVolume}
               showTime={showTime}
+              hideGroupLink={hideGroupLink}
             />
           </Col>
           {showQuickBet ? (
@@ -218,7 +228,7 @@ function FreeResponseTopAnswer(props: {
 }
 
 export function FreeResponseResolutionOrChance(props: {
-  contract: FreeResponseContract
+  contract: FreeResponseContract | MultipleChoiceContract
   truncate: 'short' | 'long' | 'none'
   className?: string
 }) {

web/components/contract/contract-details.tsx

@@ -11,7 +11,7 @@ import { UserLink } from '../user-page'
 import {
   Contract,
   contractMetrics,
-  contractPool,
+  contractPath,
   updateContract,
 } from 'web/lib/firebase/contracts'
 import dayjs from 'dayjs'
@@ -22,17 +22,19 @@ import { useState } from 'react'
 import { ContractInfoDialog } from './contract-info-dialog'
 import { Bet } from 'common/bet'
 import NewContractBadge from '../new-contract-badge'
-import { CATEGORY_LIST } from 'common/categories'
-import { TagsList } from '../tags-list'
 import { UserFollowButton } from '../follow-button'
-import { groupPath } from 'web/lib/firebase/groups'
-import { SiteLink } from 'web/components/site-link'
 import { DAY_MS } from 'common/util/time'
-import { useGroupsWithContract } from 'web/hooks/use-group'
 import { ShareIconButton } from 'web/components/share-icon-button'
 import { useUser } from 'web/hooks/use-user'
 import { Editor } from '@tiptap/react'
 import { exhibitExts } from 'common/util/parse'
+import { ENV_CONFIG } from 'common/envs/constants'
+import { Button } from 'web/components/button'
+import { Modal } from 'web/components/layout/modal'
+import { Col } from 'web/components/layout/col'
+import { ContractGroupsList } from 'web/components/groups/contract-groups-list'
+import { SiteLink } from 'web/components/site-link'
+import { groupPath } from 'web/lib/firebase/groups'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -40,21 +42,19 @@ export function MiscDetails(props: {
   contract: Contract
   showHotVolume?: boolean
   showTime?: ShowTime
+  hideGroupLink?: boolean
 }) {
-  const { contract, showHotVolume, showTime } = props
+  const { contract, showHotVolume, showTime, hideGroupLink } = props
   const {
     volume,
     volume24Hours,
     closeTime,
-    tags,
     isResolved,
     createdTime,
     resolutionTime,
+    groupLinks,
   } = contract
-  // Show at most one category that this contract is tagged by
+
-  const categories = CATEGORY_LIST.filter((category) =>
-    tags.map((t) => t.toLowerCase()).includes(category)
-  ).slice(0, 1)
   const isNew = createdTime > Date.now() - DAY_MS && !isResolved
 
   return (
@@ -76,13 +76,21 @@ export function MiscDetails(props: {
           {fromNow(resolutionTime || 0)}
         </Row>
       ) : volume > 0 || !isNew ? (
-        <Row>{contractPool(contract)} pool</Row>
+        <Row className={'shrink-0'}>{formatMoney(contract.volume)} bet</Row>
       ) : (
         <NewContractBadge />
       )}
 
-      {categories.length > 0 && (
+      {!hideGroupLink && groupLinks && groupLinks.length > 0 && (
-        <TagsList className="text-gray-400" tags={categories} noLabel />
+        <SiteLink
+          href={groupPath(groupLinks[0].slug)}
+          className="text-sm text-gray-400"
+        >
+          <Row className={'line-clamp-1 flex-wrap items-center '}>
+            <UserGroupIcon className="mx-1 mb-0.5 inline h-4 w-4 shrink-0" />
+            {groupLinks[0].name}
+          </Row>
+        </SiteLink>
       )}
     </Row>
   )
@@ -130,34 +138,15 @@ export function ContractDetails(props: {
   disabled?: boolean
 }) {
   const { contract, bets, isCreator, disabled } = props
-  const { closeTime, creatorName, creatorUsername, creatorId } = contract
+  const { closeTime, creatorName, creatorUsername, creatorId, groupLinks } =
+    contract
   const { volumeLabel, resolvedDate } = contractMetrics(contract)
 
-  const groups = (useGroupsWithContract(contract.id) ?? []).sort((g1, g2) => {
-    return g2.createdTime - g1.createdTime
-  })
-  const user = useUser()
-
-  const groupsUserIsMemberOf = groups
-    ? groups.filter((g) => g.memberIds.includes(contract.creatorId))
-    : []
-  const groupsUserIsCreatorOf = groups
-    ? groups.filter((g) => g.creatorId === contract.creatorId)
-    : []
-
-  // Priorities for which group the contract belongs to:
-  // In order of created most recently
-  // Group that the contract owner created
-  // Group the contract owner is a member of
-  // Any group the contract is in
   const groupToDisplay =
-    groupsUserIsCreatorOf.length > 0
+    groupLinks?.sort((a, b) => a.createdTime - b.createdTime)[0] ?? null
-      ? groupsUserIsCreatorOf[0]
+  const user = useUser()
-      : groupsUserIsMemberOf.length > 0
+  const [open, setOpen] = useState(false)
-      ? groupsUserIsMemberOf[0]
+
-      : groups
-      ? groups[0]
-      : undefined
   return (
     <Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-500">
       <Row className="items-center gap-2">
@@ -178,16 +167,34 @@ export function ContractDetails(props: {
         )}
         {!disabled && <UserFollowButton userId={creatorId} small />}
       </Row>
-      {groupToDisplay ? (
+      <Row>
-        <Row className={'line-clamp-1 mt-1 max-w-[200px]'}>
+        <Button
-          <SiteLink href={`${groupPath(groupToDisplay.slug)}`}>
+          size={'xs'}
-            <UserGroupIcon className="mx-1 mb-1 inline h-5 w-5" />
+          className={'max-w-[200px]'}
-            <span>{groupToDisplay.name}</span>
+          color={'gray-white'}
-          </SiteLink>
+          onClick={() => setOpen(!open)}
-        </Row>
+        >
-      ) : (
+          <Row>
-        <div />
+            <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
-      )}
+            <span className={'line-clamp-1'}>
+              {groupToDisplay ? groupToDisplay.name : 'No group'}
+            </span>
+          </Row>
+        </Button>
+      </Row>
+      <Modal open={open} setOpen={setOpen} size={'md'}>
+        <Col
+          className={
+            'max-h-[70vh] min-h-[20rem] overflow-auto rounded bg-white p-6'
+          }
+        >
+          <ContractGroupsList
+            groupLinks={groupLinks ?? []}
+            contract={contract}
+            user={user}
+          />
+        </Col>
+      </Modal>
 
       {(!!closeTime || !!resolvedDate) && (
         <Row className="items-center gap-1">
@@ -222,9 +229,12 @@ export function ContractDetails(props: {
         <div className="whitespace-nowrap">{volumeLabel}</div>
       </Row>
       <ShareIconButton
-        contract={contract}
+        copyPayload={`https://${ENV_CONFIG.domain}${contractPath(contract)}${
+          user?.username && contract.creatorUsername !== user?.username
+            ? '?referrer=' + user?.username
+            : ''
+        }`}
         toastClassName={'sm:-left-40 -left-24 min-w-[250%]'}
-        username={user?.username}
       />
 
       {!disabled && <ContractInfoDialog contract={contract} bets={bets} />}
@@ -321,12 +331,13 @@ function EditableCloseDate(props: {
             Done
           </button>
         ) : (
-          <button
+          <Button
-            className="btn btn-xs btn-ghost"
+            size={'xs'}
+            color={'gray-white'}
             onClick={() => setIsEditingCloseTime(true)}
           >
-            <PencilIcon className="mr-2 inline h-4 w-4" /> Edit
+            <PencilIcon className="mr-0.5 inline h-4 w-4" /> Edit
-          </button>
+          </Button>
         ))}
     </>
   )

web/components/contract/contract-info-dialog.tsx

@@ -19,7 +19,7 @@ import { InfoTooltip } from '../info-tooltip'
 import { DuplicateContractButton } from '../copy-contract-button'
 
 export const contractDetailsButtonClassName =
-  'group flex items-center rounded-md px-3 py-2 text-sm font-medium  cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
+  'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
 
 export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
   const { contract, bets } = props
@@ -41,6 +41,8 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
       ? 'YES / NO'
       : outcomeType === 'FREE_RESPONSE'
       ? 'Free response'
+      : outcomeType === 'MULTIPLE_CHOICE'
+      ? 'Multiple choice'
       : 'Numeric'
 
   return (

web/components/contract/contract-leaderboard.tsx

@@ -0,0 +1,141 @@
+import { Bet } from 'common/bet'
+import { Comment } from 'common/comment'
+import { resolvedPayout } from 'common/calculate'
+import { Contract } from 'common/contract'
+import { formatMoney } from 'common/util/format'
+import { groupBy, mapValues, sumBy, sortBy, keyBy } from 'lodash'
+import { useState, useMemo, useEffect } from 'react'
+import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { useUserById } from 'web/hooks/use-user'
+import { listUsers, User } from 'web/lib/firebase/users'
+import { FeedBet } from '../feed/feed-bets'
+import { FeedComment } from '../feed/feed-comments'
+import { Spacer } from '../layout/spacer'
+import { Leaderboard } from '../leaderboard'
+import { Title } from '../title'
+
+export function ContractLeaderboard(props: {
+  contract: Contract
+  bets: Bet[]
+}) {
+  const { contract, bets } = props
+  const [users, setUsers] = useState<User[]>()
+
+  const { userProfits, top5Ids } = useMemo(() => {
+    // Create a map of userIds to total profits (including sales)
+    const openBets = bets.filter((bet) => !bet.isSold && !bet.sale)
+    const betsByUser = groupBy(openBets, 'userId')
+
+    const userProfits = mapValues(betsByUser, (bets) =>
+      sumBy(bets, (bet) => resolvedPayout(contract, bet) - bet.amount)
+    )
+    // Find the 5 users with the most profits
+    const top5Ids = Object.entries(userProfits)
+      .sort(([_i1, p1], [_i2, p2]) => p2 - p1)
+      .filter(([, p]) => p > 0)
+      .slice(0, 5)
+      .map(([id]) => id)
+    return { userProfits, top5Ids }
+  }, [contract, bets])
+
+  useEffect(() => {
+    if (top5Ids.length > 0) {
+      listUsers(top5Ids).then((users) => {
+        const sortedUsers = sortBy(users, (user) => -userProfits[user.id])
+        setUsers(sortedUsers)
+      })
+    }
+  }, [userProfits, top5Ids])
+
+  return users && users.length > 0 ? (
+    <Leaderboard
+      title="🏅 Top traders"
+      users={users || []}
+      columns={[
+        {
+          header: 'Total profit',
+          renderCell: (user) => formatMoney(userProfits[user.id] || 0),
+        },
+      ]}
+      className="mt-12 max-w-sm"
+    />
+  ) : null
+}
+
+export function ContractTopTrades(props: {
+  contract: Contract
+  bets: Bet[]
+  comments: Comment[]
+  tips: CommentTipMap
+}) {
+  const { contract, bets, comments, tips } = props
+  const commentsById = keyBy(comments, 'id')
+  const betsById = keyBy(bets, 'id')
+
+  // If 'id2' is the sale of 'id1', both are logged with (id2 - id1) of profit
+  // Otherwise, we record the profit at resolution time
+  const profitById: Record<string, number> = {}
+  for (const bet of bets) {
+    if (bet.sale) {
+      const originalBet = betsById[bet.sale.betId]
+      const profit = bet.sale.amount - originalBet.amount
+      profitById[bet.id] = profit
+      profitById[originalBet.id] = profit
+    } else {
+      profitById[bet.id] = resolvedPayout(contract, bet) - bet.amount
+    }
+  }
+
+  // Now find the betId with the highest profit
+  const topBetId = sortBy(bets, (b) => -profitById[b.id])[0]?.id
+  const topBettor = useUserById(betsById[topBetId]?.userId)
+
+  // And also the commentId of the comment with the highest profit
+  const topCommentId = sortBy(
+    comments,
+    (c) => c.betId && -profitById[c.betId]
+  )[0]?.id
+
+  return (
+    <div className="mt-12 max-w-sm">
+      {topCommentId && profitById[topCommentId] > 0 && (
+        <>
+          <Title text="💬 Proven correct" className="!mt-0" />
+          <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
+            <FeedComment
+              contract={contract}
+              comment={commentsById[topCommentId]}
+              tips={tips[topCommentId]}
+              betsBySameUser={[betsById[topCommentId]]}
+              truncate={false}
+              smallAvatar={false}
+            />
+          </div>
+          <div className="mt-2 text-sm text-gray-500">
+            {commentsById[topCommentId].userName} made{' '}
+            {formatMoney(profitById[topCommentId] || 0)}!
+          </div>
+          <Spacer h={16} />
+        </>
+      )}
+
+      {/* If they're the same, only show the comment; otherwise show both */}
+      {topBettor && topBetId !== topCommentId && profitById[topBetId] > 0 && (
+        <>
+          <Title text="💸 Smartest money" className="!mt-0" />
+          <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
+            <FeedBet
+              contract={contract}
+              bet={betsById[topBetId]}
+              hideOutcome={false}
+              smallAvatar={false}
+            />
+          </div>
+          <div className="mt-2 text-sm text-gray-500">
+            {topBettor?.name} made {formatMoney(profitById[topBetId] || 0)}!
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

web/components/contract/contract-overview.tsx

@@ -85,7 +85,8 @@ export const ContractOverview = (props: {
             {tradingAllowed(contract) && <BetRow contract={contract} />}
           </Row>
         ) : (
-          outcomeType === 'FREE_RESPONSE' &&
+          (outcomeType === 'FREE_RESPONSE' ||
+            outcomeType === 'MULTIPLE_CHOICE') &&
           resolution && (
             <FreeResponseResolutionOrChance
               contract={contract}
@@ -110,7 +111,8 @@ export const ContractOverview = (props: {
       {(isBinary || isPseudoNumeric) && (
         <ContractProbGraph contract={contract} bets={bets} />
       )}{' '}
-      {outcomeType === 'FREE_RESPONSE' && (
+      {(outcomeType === 'FREE_RESPONSE' ||
+        outcomeType === 'MULTIPLE_CHOICE') && (
         <AnswersGraph contract={contract} bets={bets} />
       )}
       {outcomeType === 'NUMERIC' && <NumericGraph contract={contract} />}

web/components/contract/contract-prob-graph.tsx

@@ -151,7 +151,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
         enableGridX={!!width && width >= 800}
         enableArea
         areaBaselineValue={isBinary || isLogScale ? 0 : contract.min}
-        margin={{ top: 20, right: 20, bottom: 65, left: 40 }}
+        margin={{ top: 20, right: 20, bottom: 25, left: 40 }}
         animate={false}
         sliceTooltip={SliceTooltip}
       />

web/components/contract/contract-tabs.tsx

@@ -9,6 +9,7 @@ import { Tabs } from '../layout/tabs'
 import { Col } from '../layout/col'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { LiquidityProvision } from 'common/liquidity-provision'
+import { useComments } from 'web/hooks/use-comments'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -18,11 +19,15 @@ export function ContractTabs(props: {
   comments: Comment[]
   tips: CommentTipMap
 }) {
-  const { contract, user, bets, comments, tips, liquidityProvisions } = props
+  const { contract, user, bets, tips, liquidityProvisions } = props
   const { outcomeType } = contract
 
   const userBets = user && bets.filter((bet) => bet.userId === user.id)
 
+  // Load comments here, so the badge count will be correct
+  const updatedComments = useComments(contract.id)
+  const comments = updatedComments ?? props.comments
+
   const betActivity = (
     <ContractActivity
       contract={contract}
@@ -89,8 +94,12 @@ export function ContractTabs(props: {
     <Tabs
       currentPageForAnalytics={'contract'}
       tabs={[
-        { title: 'Comments', content: commentActivity },
+        {
-        { title: 'Bets', content: betActivity },
+          title: 'Comments',
+          content: commentActivity,
+          badge: `${comments.length}`,
+        },
+        { title: 'Bets', content: betActivity, badge: `${bets.length}` },
         ...(!user || !userBets?.length
           ? []
           : [{ title: 'Your bets', content: yourTrades }]),

web/components/contract/contracts-list.tsx

@@ -1,5 +1,5 @@
-import { Contract } from '../../lib/firebase/contracts'
+import { Contract } from 'web/lib/firebase/contracts'
-import { User } from '../../lib/firebase/users'
+import { User } from 'web/lib/firebase/users'
 import { Col } from '../layout/col'
 import { SiteLink } from '../site-link'
 import { ContractCard } from './contract-card'
@@ -9,6 +9,11 @@ import { useIsVisible } from 'web/hooks/use-is-visible'
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
 
+export type ContractHighlightOptions = {
+  contractIds?: string[]
+  highlightClassName?: string
+}
+
 export function ContractsGrid(props: {
   contracts: Contract[]
   loadMore: () => void
@@ -16,7 +21,11 @@ export function ContractsGrid(props: {
   showTime?: ShowTime
   onContractClick?: (contract: Contract) => void
   overrideGridClassName?: string
-  hideQuickBet?: boolean
+  cardHideOptions?: {
+    hideQuickBet?: boolean
+    hideGroupLink?: boolean
+  }
+  highlightOptions?: ContractHighlightOptions
 }) {
   const {
     contracts,
@@ -25,9 +34,12 @@ export function ContractsGrid(props: {
     loadMore,
     onContractClick,
     overrideGridClassName,
-    hideQuickBet,
+    cardHideOptions,
+    highlightOptions,
   } = props
+  const { hideQuickBet, hideGroupLink } = cardHideOptions || {}
 
+  const { contractIds, highlightClassName } = highlightOptions || {}
   const [elem, setElem] = useState<HTMLElement | null>(null)
   const isBottomVisible = useIsVisible(elem)
 
@@ -66,6 +78,12 @@ export function ContractsGrid(props: {
               onContractClick ? () => onContractClick(contract) : undefined
             }
             hideQuickBet={hideQuickBet}
+            hideGroupLink={hideGroupLink}
+            className={
+              contractIds?.includes(contract.id)
+                ? highlightClassName
+                : undefined
+            }
           />
         ))}
       </ul>

web/components/create-question-button.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import clsx from 'clsx'
 import { firebaseLogin, User } from 'web/lib/firebase/users'
 import React from 'react'
@@ -16,17 +17,23 @@ export const CreateQuestionButton = (props: {
     'from-indigo-500 to-blue-500 hover:from-indigo-700 hover:to-blue-700'
 
   const { user, overrideText, className, query } = props
+  const router = useRouter()
   return (
     <div className={clsx('flex justify-center', className)}>
       {user ? (
         <Link href={`/create${query ? query : ''}`} passHref>
           <button className={clsx(gradient, createButtonStyle)}>
-            {overrideText ? overrideText : 'Create a question'}
+            {overrideText ? overrideText : 'Create a market'}
           </button>
         </Link>
       ) : (
         <button
-          onClick={firebaseLogin}
+          onClick={async () => {
+            // login, and then reload the page, to hit any SSR redirect (e.g.
+            // redirecting from / to /home for logged in users)
+            await firebaseLogin()
+            router.replace(router.asPath)
+          }}
           className={clsx(gradient, createButtonStyle)}
         >
           Sign in

web/components/editor.tsx

@@ -11,14 +11,25 @@ import {
 import StarterKit from '@tiptap/starter-kit'
 import { Image } from '@tiptap/extension-image'
 import { Link } from '@tiptap/extension-link'
+import { Mention } from '@tiptap/extension-mention'
 import clsx from 'clsx'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Linkify } from './linkify'
 import { uploadImage } from 'web/lib/firebase/storage'
 import { useMutation } from 'react-query'
 import { exhibitExts } from 'common/util/parse'
 import { FileUploadButton } from './file-upload-button'
 import { linkClass } from './site-link'
+import { useUsers } from 'web/hooks/use-users'
+import { mentionSuggestion } from './editor/mention-suggestion'
+import { DisplayMention } from './editor/mention'
+import Iframe from 'common/util/tiptap-iframe'
+import { CodeIcon, PhotographIcon } from '@heroicons/react/solid'
+import { Modal } from './layout/modal'
+import { Col } from './layout/col'
+import { Button } from './button'
+import { Row } from './layout/row'
+import { Spacer } from './layout/spacer'
 
 const proseClass = clsx(
   'prose prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed',
@@ -33,32 +44,41 @@ export function useTextEditor(props: {
 }) {
   const { placeholder, max, defaultValue = '', disabled } = props
 
+  const users = useUsers()
+
   const editorClass = clsx(
     proseClass,
-    'box-content min-h-[6em] textarea textarea-bordered text-base'
+    'min-h-[6em] resize-none outline-none border-none pt-3 px-4 focus:ring-0'
   )
 
-  const editor = useEditor({
+  const editor = useEditor(
-    editorProps: { attributes: { class: editorClass } },
+    {
-    extensions: [
+      editorProps: { attributes: { class: editorClass } },
-      StarterKit.configure({
+      extensions: [
-        heading: { levels: [1, 2, 3] },
+        StarterKit.configure({
-      }),
+          heading: { levels: [1, 2, 3] },
-      Placeholder.configure({
+        }),
-        placeholder,
+        Placeholder.configure({
-        emptyEditorClass:
+          placeholder,
-          'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0',
+          emptyEditorClass:
-      }),
+            'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0',
-      CharacterCount.configure({ limit: max }),
+        }),
-      Image,
+        CharacterCount.configure({ limit: max }),
-      Link.configure({
+        Image,
-        HTMLAttributes: {
+        Link.configure({
-          class: clsx('no-underline !text-indigo-700', linkClass),
+          HTMLAttributes: {
-        },
+            class: clsx('no-underline !text-indigo-700', linkClass),
-      }),
+          },
-    ],
+        }),
-    content: defaultValue,
+        DisplayMention.configure({
-  })
+          suggestion: mentionSuggestion(users),
+        }),
+        Iframe,
+      ],
+      content: defaultValue,
+    },
+    [!users.length] // passed as useEffect dependency. (re-render editor when users load, to update mention menu)
+  )
 
   const upload = useUploadMutation(editor)
 
@@ -69,12 +89,19 @@ export function useTextEditor(props: {
           (file) => file.type.startsWith('image')
         )
 
-        if (!imageFiles.length) {
+        if (imageFiles.length) {
-          return // if no files pasted, use default paste handler
+          event.preventDefault()
+          upload.mutate(imageFiles)
         }
 
-        event.preventDefault()
+        // If the pasted content is iframe code, directly inject it
-        upload.mutate(imageFiles)
+        const text = event.clipboardData?.getData('text/plain').trim() ?? ''
+        if (isValidIframe(text)) {
+          editor.chain().insertContent(text).run()
+          return true // Prevent the code from getting pasted as text
+        }
+
+        return // Otherwise, use default paste handler
       },
     },
   })
@@ -86,16 +113,21 @@ export function useTextEditor(props: {
   return { editor, upload }
 }
 
+function isValidIframe(text: string) {
+  return /^<iframe.*<\/iframe>$/.test(text)
+}
+
 export function TextEditor(props: {
   editor: Editor | null
   upload: ReturnType<typeof useUploadMutation>
 }) {
   const { editor, upload } = props
+  const [iframeOpen, setIframeOpen] = useState(false)
 
   return (
     <>
       {/* hide placeholder when focused */}
-      <div className="w-full [&:focus-within_p.is-empty]:before:content-none">
+      <div className="relative w-full [&:focus-within_p.is-empty]:before:content-none">
         {editor && (
           <FloatingMenu
             editor={editor}
@@ -111,7 +143,46 @@ export function TextEditor(props: {
             images!
           </FloatingMenu>
         )}
-        <EditorContent editor={editor} />
+        <div className="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
+          <EditorContent editor={editor} />
+          {/* Spacer element to match the height of the toolbar */}
+          <div className="py-2" aria-hidden="true">
+            {/* Matches height of button in toolbar (1px border + 36px content height) */}
+            <div className="py-px">
+              <div className="h-9" />
+            </div>
+          </div>
+        </div>
+
+        {/* Toolbar, with buttons for image and embeds */}
+        <div className="absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2">
+          <div className="flex items-center space-x-5">
+            <div className="flex items-center">
+              <FileUploadButton
+                onFiles={upload.mutate}
+                className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
+              >
+                <PhotographIcon className="h-5 w-5" aria-hidden="true" />
+                <span className="sr-only">Upload an image</span>
+              </FileUploadButton>
+            </div>
+            <div className="flex items-center">
+              <button
+                type="button"
+                onClick={() => setIframeOpen(true)}
+                className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
+              >
+                <IframeModal
+                  editor={editor}
+                  open={iframeOpen}
+                  setOpen={setIframeOpen}
+                />
+                <CodeIcon className="h-5 w-5" aria-hidden="true" />
+                <span className="sr-only">Embed an iframe</span>
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
       {upload.isLoading && <span className="text-xs">Uploading image...</span>}
       {upload.isError && (
@@ -121,6 +192,65 @@ export function TextEditor(props: {
   )
 }
 
+function IframeModal(props: {
+  editor: Editor | null
+  open: boolean
+  setOpen: (open: boolean) => void
+}) {
+  const { editor, open, setOpen } = props
+  const [embedCode, setEmbedCode] = useState('')
+  const valid = isValidIframe(embedCode)
+
+  return (
+    <Modal open={open} setOpen={setOpen}>
+      <Col className="gap-2 rounded bg-white p-6">
+        <label
+          htmlFor="embed"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Embed a market, Youtube video, etc.
+        </label>
+        <input
+          type="text"
+          name="embed"
+          id="embed"
+          className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          placeholder='e.g. <iframe src="..."></iframe>'
+          value={embedCode}
+          onChange={(e) => setEmbedCode(e.target.value)}
+        />
+
+        {/* Preview the embed if it's valid */}
+        {valid ? <RichContent content={embedCode} /> : <Spacer h={2} />}
+
+        <Row className="gap-2">
+          <Button
+            disabled={!valid}
+            onClick={() => {
+              if (editor && valid) {
+                editor.chain().insertContent(embedCode).run()
+                setEmbedCode('')
+                setOpen(false)
+              }
+            }}
+          >
+            Embed
+          </Button>
+          <Button
+            color="gray"
+            onClick={() => {
+              setEmbedCode('')
+              setOpen(false)
+            }}
+          >
+            Cancel
+          </Button>
+        </Row>
+      </Col>
+    </Modal>
+  )
+}
+
 const useUploadMutation = (editor: Editor | null) =>
   useMutation(
     (files: File[]) =>
@@ -139,11 +269,15 @@ const useUploadMutation = (editor: Editor | null) =>
     }
   )
 
-function RichContent(props: { content: JSONContent }) {
+function RichContent(props: { content: JSONContent | string }) {
   const { content } = props
   const editor = useEditor({
     editorProps: { attributes: { class: proseClass } },
-    extensions: exhibitExts,
+    extensions: [
+      // replace tiptap's Mention with ours, to add style and link
+      ...exhibitExts.filter((ex) => ex.name !== Mention.name),
+      DisplayMention,
+    ],
     content,
     editable: false,
   })

web/components/editor/mention-list.tsx

@@ -0,0 +1,62 @@
+import { SuggestionProps } from '@tiptap/suggestion'
+import clsx from 'clsx'
+import { User } from 'common/user'
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import { Avatar } from '../avatar'
+
+// copied from https://tiptap.dev/api/nodes/mention#usage
+export const MentionList = forwardRef((props: SuggestionProps<User>, ref) => {
+  const { items: users, command } = props
+
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  useEffect(() => setSelectedIndex(0), [users])
+
+  const submitUser = (index: number) => {
+    const user = users[index]
+    if (user) command({ id: user.id, label: user.username } as any)
+  }
+
+  const onUp = () =>
+    setSelectedIndex((i) => (i + users.length - 1) % users.length)
+  const onDown = () => setSelectedIndex((i) => (i + 1) % users.length)
+  const onEnter = () => submitUser(selectedIndex)
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: any) => {
+      if (event.key === 'ArrowUp') {
+        onUp()
+        return true
+      }
+      if (event.key === 'ArrowDown') {
+        onDown()
+        return true
+      }
+      if (event.key === 'Enter') {
+        onEnter()
+        return true
+      }
+      return false
+    },
+  }))
+
+  return (
+    <div className="w-42 absolute z-10 overflow-x-hidden rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+      {!users.length ? (
+        <span className="m-1 whitespace-nowrap">No results...</span>
+      ) : (
+        users.map((user, i) => (
+          <button
+            className={clsx(
+              'flex h-8 w-full cursor-pointer select-none items-center gap-2 truncate px-4',
+              selectedIndex === i ? 'bg-indigo-500 text-white' : 'text-gray-900'
+            )}
+            onClick={() => submitUser(i)}
+          >
+            <Avatar avatarUrl={user.avatarUrl} size="xs" />
+            {user.username}
+          </button>
+        ))
+      )}
+    </div>
+  )
+})

web/components/editor/mention-suggestion.ts

@@ -0,0 +1,72 @@
+import type { MentionOptions } from '@tiptap/extension-mention'
+import { ReactRenderer } from '@tiptap/react'
+import { User } from 'common/user'
+import { searchInAny } from 'common/util/parse'
+import { orderBy } from 'lodash'
+import tippy from 'tippy.js'
+import { MentionList } from './mention-list'
+
+type Suggestion = MentionOptions['suggestion']
+
+const beginsWith = (text: string, query: string) =>
+  text.toLocaleLowerCase().startsWith(query.toLocaleLowerCase())
+
+// copied from https://tiptap.dev/api/nodes/mention#usage
+export const mentionSuggestion = (users: User[]): Suggestion => ({
+  items: ({ query }) =>
+    orderBy(
+      users.filter((u) => searchInAny(query, u.username, u.name)),
+      [
+        (u) => [u.name, u.username].some((s) => beginsWith(s, query)),
+        'followerCountCached',
+      ],
+      ['desc', 'desc']
+    ).slice(0, 5),
+  render: () => {
+    let component: ReactRenderer
+    let popup: ReturnType<typeof tippy>
+    return {
+      onStart: (props) => {
+        component = new ReactRenderer(MentionList, {
+          props,
+          editor: props.editor,
+        })
+        if (!props.clientRect) {
+          return
+        }
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect as any,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        })
+      },
+      onUpdate(props) {
+        component.updateProps(props)
+
+        if (!props.clientRect) {
+          return
+        }
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect as any,
+        })
+      },
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide()
+          return true
+        }
+        return (component.ref as any)?.onKeyDown(props)
+      },
+      onExit() {
+        popup[0].destroy()
+        component.destroy()
+      },
+    }
+  },
+})

web/components/editor/mention.tsx

@@ -0,0 +1,29 @@
+import Mention from '@tiptap/extension-mention'
+import {
+  mergeAttributes,
+  NodeViewWrapper,
+  ReactNodeViewRenderer,
+} from '@tiptap/react'
+import clsx from 'clsx'
+import { Linkify } from '../linkify'
+
+const name = 'mention-component'
+
+const MentionComponent = (props: any) => {
+  return (
+    <NodeViewWrapper className={clsx(name, 'not-prose inline text-indigo-700')}>
+      <Linkify text={'@' + props.node.attrs.label} />
+    </NodeViewWrapper>
+  )
+}
+
+/**
+ *  Mention extension that renders React. See:
+ *  https://tiptap.dev/guide/custom-extensions#extend-existing-extensions
+ *  https://tiptap.dev/guide/node-views/react#render-a-react-component
+ */
+export const DisplayMention = Mention.extend({
+  parseHTML: () => [{ tag: name }],
+  renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
+  addNodeView: () => ReactNodeViewRenderer(MentionComponent),
+})

web/components/feed/contract-activity.tsx

@@ -2,7 +2,6 @@ import { Contract } from 'web/lib/firebase/contracts'
 import { Comment } from 'web/lib/firebase/comments'
 import { Bet } from 'common/bet'
 import { useBets } from 'web/hooks/use-bets'
-import { useComments } from 'web/hooks/use-comments'
 import { getSpecificContractActivityItems } from './activity-items'
 import { FeedItems } from './feed-items'
 import { User } from 'common/user'
@@ -26,10 +25,7 @@ export function ContractActivity(props: {
     props
 
   const contract = useContractWithPreload(props.contract) ?? props.contract
-
+  const comments = props.comments
-  const updatedComments = useComments(contract.id)
-  const comments = updatedComments ?? props.comments
-
   const updatedBets = useBets(contract.id)
   const bets = (updatedBets ?? props.bets).filter(
     (bet) => !bet.isRedemption && bet.amount !== 0
@@ -50,6 +46,7 @@ export function ContractActivity(props: {
       items={items}
       className={className}
       betRowClassName={betRowClassName}
+      user={user}
     />
   )
 }

web/components/feed/feed-answer-comment-group.tsx

@@ -3,8 +3,6 @@ import { Bet } from 'common/bet'
 import { Comment } from 'common/comment'
 import React, { useEffect, useState } from 'react'
 import { Col } from 'web/components/layout/col'
-import { Modal } from 'web/components/layout/modal'
-import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 import { UserLink } from 'web/components/user-page'
@@ -34,7 +32,6 @@ export function FeedAnswerCommentGroup(props: {
   const { username, avatarUrl, name, text } = answer
 
   const [replyToUsername, setReplyToUsername] = useState('')
-  const [open, setOpen] = useState(false)
   const [showReply, setShowReply] = useState(false)
   const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
   const [highlighted, setHighlighted] = useState(false)
@@ -104,26 +101,15 @@ export function FeedAnswerCommentGroup(props: {
 
   return (
     <Col className={'relative flex-1 gap-3'} key={answer.id + 'comment'}>
-      <Modal open={open} setOpen={setOpen}>
-        <AnswerBetPanel
-          answer={answer}
-          contract={contract}
-          closePanel={() => setOpen(false)}
-          className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
-          isModal={true}
-        />
-      </Modal>
-
       <Row
         className={clsx(
-          'mt-4 flex gap-3 space-x-3 transition-all duration-1000',
+          'flex gap-3 space-x-3 pt-4 transition-all duration-1000',
           highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
         )}
         id={answerElementId}
       >
-        <div className="px-1">
+        <Avatar username={username} avatarUrl={avatarUrl} />
-          <Avatar username={username} avatarUrl={avatarUrl} />
+
-        </div>
         <Col className="min-w-0 flex-1 lg:gap-1">
           <div className="text-sm text-gray-500">
             <UserLink username={username} name={name} /> answered
@@ -135,25 +121,21 @@ export function FeedAnswerCommentGroup(props: {
             />
           </div>
 
-          <Col className="align-items justify-between gap-4 sm:flex-row">
+          <Col className="align-items justify-between gap-2 sm:flex-row">
             <span className="whitespace-pre-line text-lg">
               <Linkify text={text} />
             </span>
 
-            <Row className="items-center justify-center gap-4">
+            {isFreeResponseContractPage && (
-              {isFreeResponseContractPage && (
+              <div className={'sm:hidden'}>
-                <div className={'sm:hidden'}>
+                <button
-                  <button
+                  className={'text-xs font-bold text-gray-500 hover:underline'}
-                    className={
+                  onClick={() => scrollAndOpenReplyInput(undefined, answer)}
-                      'text-xs font-bold text-gray-500 hover:underline'
+                >
-                    }
+                  Reply
-                    onClick={() => scrollAndOpenReplyInput(undefined, answer)}
+                </button>
-                  >
+              </div>
-                    Reply
+            )}
-                  </button>
-                </div>
-              )}
-            </Row>
           </Col>
           {isFreeResponseContractPage && (
             <div className={'justify-initial hidden sm:block'}>
@@ -180,9 +162,9 @@ export function FeedAnswerCommentGroup(props: {
       />
 
       {showReply && (
-        <div className={'ml-6 pt-4'}>
+        <div className={'ml-6'}>
           <span
-            className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
+            className="absolute -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
             aria-hidden="true"
           />
           <CommentInput

web/components/feed/feed-comments.tsx

@@ -70,7 +70,7 @@ export function FeedCommentThread(props: {
     if (showReply && inputRef) inputRef.focus()
   }, [inputRef, showReply])
   return (
-    <div className={'w-full flex-col pr-1'}>
+    <Col className={'w-full gap-3 pr-1'}>
       <span
         className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
         aria-hidden="true"
@@ -86,7 +86,7 @@ export function FeedCommentThread(props: {
         scrollAndOpenReplyInput={scrollAndOpenReplyInput}
       />
       {showReply && (
-        <div className={'-pb-2 ml-6 flex flex-col pt-5'}>
+        <Col className={'-pb-2 ml-6'}>
           <span
             className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
             aria-hidden="true"
@@ -106,9 +106,9 @@ export function FeedCommentThread(props: {
               setReplyToUsername('')
             }}
           />
-        </div>
+        </Col>
       )}
-    </div>
+    </Col>
   )
 }
 

web/components/feed/feed-items.tsx

@@ -23,6 +23,7 @@ import BetRow from '../bet-row'
 import { Avatar } from '../avatar'
 import { ActivityItem } from './activity-items'
 import { useSaveSeenContract } from 'web/hooks/use-seen-contracts'
+import { useUser } from 'web/hooks/use-user'
 import { trackClick } from 'web/lib/firebase/tracking'
 import { DAY_MS } from 'common/util/time'
 import NewContractBadge from '../new-contract-badge'
@@ -35,14 +36,18 @@ import {
 import { FeedBet } from 'web/components/feed/feed-bets'
 import { CPMMBinaryContract, NumericContract } from 'common/contract'
 import { FeedLiquidity } from './feed-liquidity'
+import { SignUpPrompt } from '../sign-up-prompt'
+import { User } from 'common/user'
+import { PlayMoneyDisclaimer } from '../play-money-disclaimer'
 
 export function FeedItems(props: {
   contract: Contract
   items: ActivityItem[]
   className?: string
   betRowClassName?: string
+  user: User | null | undefined
 }) {
-  const { contract, items, className, betRowClassName } = props
+  const { contract, items, className, betRowClassName, user } = props
   const { outcomeType } = contract
 
   const [elem, setElem] = useState<HTMLElement | null>(null)
@@ -66,11 +71,20 @@ export function FeedItems(props: {
           </div>
         ))}
       </div>
-      {outcomeType === 'BINARY' && tradingAllowed(contract) && (
+
-        <BetRow
+      {!user ? (
-          contract={contract as CPMMBinaryContract}
+        <Col className="mt-4 max-w-sm items-center xl:hidden">
-          className={clsx('mb-2', betRowClassName)}
+          <SignUpPrompt />
-        />
+          <PlayMoneyDisclaimer />
+        </Col>
+      ) : (
+        outcomeType === 'BINARY' &&
+        tradingAllowed(contract) && (
+          <BetRow
+            contract={contract as CPMMBinaryContract}
+            className={clsx('mb-2', betRowClassName)}
+          />
+        )
       )}
     </div>
   )
@@ -118,6 +132,7 @@ export function FeedQuestion(props: {
   const { volumeLabel } = contractMetrics(contract)
   const isBinary = outcomeType === 'BINARY'
   const isNew = createdTime > Date.now() - DAY_MS && !isResolved
+  const user = useUser()
 
   return (
     <div className={'flex gap-2'}>
@@ -149,7 +164,7 @@ export function FeedQuestion(props: {
             href={
               props.contractPath ? props.contractPath : contractPath(contract)
             }
-            onClick={() => trackClick(contract.id)}
+            onClick={() => user && trackClick(user.id, contract.id)}
             className="text-lg text-indigo-700 sm:text-xl"
           >
             {question}

web/components/feed/feed-liquidity.tsx

@@ -77,8 +77,7 @@ export function LiquidityStatusText(props: {
       ) : (
         <span>{isSelf ? 'You' : 'A trader'}</span>
       )}{' '}
-      {bought} {money}
+      {bought} a subsidy of {money}
-      {' of liquidity'}
       <RelativeTimestamp time={createdTime} />
     </div>
   )

web/components/groups/contract-groups-list.tsx

@@ -0,0 +1,73 @@
+import { Col } from 'web/components/layout/col'
+import { Row } from 'web/components/layout/row'
+import clsx from 'clsx'
+import { GroupLinkItem } from 'web/pages/groups'
+import { XIcon } from '@heroicons/react/outline'
+import { Button } from 'web/components/button'
+import { GroupSelector } from 'web/components/groups/group-selector'
+import {
+  addContractToGroup,
+  removeContractFromGroup,
+} from 'web/lib/firebase/groups'
+import { User } from 'common/user'
+import { Contract } from 'common/contract'
+import { SiteLink } from 'web/components/site-link'
+import { GroupLink } from 'common/group'
+import { useGroupsWithContract } from 'web/hooks/use-group'
+
+export function ContractGroupsList(props: {
+  groupLinks: GroupLink[]
+  contract: Contract
+  user: User | null | undefined
+}) {
+  const { groupLinks, user, contract } = props
+  const groups = useGroupsWithContract(contract)
+  return (
+    <Col className={'gap-2'}>
+      <span className={'text-xl text-indigo-700'}>
+        <SiteLink href={'/groups/'}>Groups</SiteLink>
+      </span>
+      {user && (
+        <Col className={'ml-2 items-center justify-between sm:flex-row'}>
+          <span>Add to: </span>
+          <GroupSelector
+            options={{
+              showSelector: true,
+              showLabel: false,
+              ignoreGroupIds: groupLinks.map((g) => g.groupId),
+            }}
+            setSelectedGroup={(group) =>
+              group && addContractToGroup(group, contract, user.id)
+            }
+            selectedGroup={undefined}
+            creator={user}
+          />
+        </Col>
+      )}
+      {groups.length === 0 && (
+        <Col className="ml-2 h-full justify-center text-gray-500">
+          No groups yet...
+        </Col>
+      )}
+      {groups.map((group) => (
+        <Row
+          key={group.id}
+          className={clsx('items-center justify-between gap-2 p-2')}
+        >
+          <Row className="line-clamp-1 items-center gap-2">
+            <GroupLinkItem group={group} />
+          </Row>
+          {user && group.memberIds.includes(user.id) && (
+            <Button
+              color={'gray-white'}
+              size={'xs'}
+              onClick={() => removeContractFromGroup(group, contract)}
+            >
+              <XIcon className="h-4 w-4 text-gray-500" />
+            </Button>
+          )}
+        </Row>
+      ))}
+    </Col>
+  )
+}

web/components/groups/group-selector.tsx

@@ -14,16 +14,22 @@ import { User } from 'common/user'
 import { searchInAny } from 'common/util/parse'
 
 export function GroupSelector(props: {
-  selectedGroup?: Group
+  selectedGroup: Group | undefined
   setSelectedGroup: (group: Group) => void
   creator: User | null | undefined
-  showSelector?: boolean
+  options: {
+    showSelector: boolean
+    showLabel: boolean
+    ignoreGroupIds?: string[]
+  }
 }) {
-  const { selectedGroup, setSelectedGroup, creator, showSelector } = props
+  const { selectedGroup, setSelectedGroup, creator, options } = props
   const [isCreatingNewGroup, setIsCreatingNewGroup] = useState(false)
-
+  const { showSelector, showLabel, ignoreGroupIds } = options
   const [query, setQuery] = useState('')
-  const memberGroups = useMemberGroups(creator?.id) ?? []
+  const memberGroups = (useMemberGroups(creator?.id) ?? []).filter(
+    (group) => !ignoreGroupIds?.includes(group.id)
+  )
   const filteredGroups = memberGroups.filter((group) =>
     searchInAny(query, group.name)
   )
@@ -55,16 +61,18 @@ export function GroupSelector(props: {
       >
         {() => (
           <>
-            <Combobox.Label className="label justify-start gap-2 text-base">
+            {showLabel && (
-              Add to Group
+              <Combobox.Label className="label justify-start gap-2 text-base">
-              <InfoTooltip text="Question will be displayed alongside the other questions in the group." />
+                Add to Group
-            </Combobox.Label>
+                <InfoTooltip text="Question will be displayed alongside the other questions in the group." />
+              </Combobox.Label>
+            )}
             <div className="relative mt-2">
               <Combobox.Input
-                className="w-full rounded-md border border-gray-300 bg-white p-3 pl-4 pr-20 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 "
+                className="w-60 rounded-md border border-gray-300 bg-white p-3 pl-4 pr-20 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 "
                 onChange={(event) => setQuery(event.target.value)}
                 displayValue={(group: Group) => group && group.name}
-                placeholder={'None'}
+                placeholder={'E.g. Science, Politics'}
               />
               <Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
                 <SelectorIcon

web/components/groups/groups-button.tsx

@@ -11,7 +11,7 @@ import { Modal } from 'web/components/layout/modal'
 import { Col } from 'web/components/layout/col'
 import { joinGroup, leaveGroup } from 'web/lib/firebase/groups'
 import { firebaseLogin } from 'web/lib/firebase/users'
-import { GroupLink } from 'web/pages/groups'
+import { GroupLinkItem } from 'web/pages/groups'
 import toast from 'react-hot-toast'
 
 export function GroupsButton(props: { user: User }) {
@@ -77,7 +77,7 @@ function GroupItem(props: { group: Group; className?: string }) {
   return (
     <Row className={clsx('items-center justify-between gap-2 p-2', className)}>
       <Row className="line-clamp-1 items-center gap-2">
-        <GroupLink group={group} />
+        <GroupLinkItem group={group} />
       </Row>
       <JoinOrLeaveGroupButton group={group} />
     </Row>

web/components/info-box.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx'
+import { InformationCircleIcon } from '@heroicons/react/solid'
+
+import { Linkify } from './linkify'
+
+export function InfoBox(props: {
+  title: string
+  text: string
+  className?: string
+}) {
+  const { title, text, className } = props
+  return (
+    <div className={clsx('rounded-md bg-gray-50 p-4', className)}>
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <InformationCircleIcon
+            className="h-5 w-5 text-gray-400"
+            aria-hidden="true"
+          />
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-black">{title}</h3>
+          <div className="mt-2 text-sm text-gray-600">
+            <Linkify text={text} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

web/components/layout/modal.tsx

@@ -26,7 +26,7 @@ export function Modal(props: {
         className="fixed inset-0 z-50 overflow-y-auto"
         onClose={setOpen}
       >
-        <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+        <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:p-0">
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -57,7 +57,7 @@ export function Modal(props: {
           >
             <div
               className={clsx(
-                'my-8 mx-6 inline-block w-full transform overflow-hidden text-left align-bottom transition-all sm:align-middle',
+                'my-8 mx-6 inline-block w-full transform overflow-hidden text-left align-bottom transition-all sm:self-center sm:align-middle',
                 sizeClass,
                 className
               )}

web/components/layout/tabs.tsx

@@ -1,77 +1,121 @@
 import clsx from 'clsx'
-import Link from 'next/link'
+import { useRouter, NextRouter } from 'next/router'
 import { ReactNode, useState } from 'react'
-import { Row } from './row'
 import { track } from '@amplitude/analytics-browser'
 
 type Tab = {
   title: string
   tabIcon?: ReactNode
   content: ReactNode
-  // If set, change the url to this href when the tab is selected
+  // If set, show a badge with this content
-  href?: string
+  badge?: string
 }
 
-export function Tabs(props: {
+type TabProps = {
   tabs: Tab[]
-  defaultIndex?: number
   labelClassName?: string
   onClick?: (tabTitle: string, index: number) => void
   className?: string
   currentPageForAnalytics?: string
-}) {
+}
+
+export function ControlledTabs(props: TabProps & { activeIndex: number }) {
   const {
     tabs,
-    defaultIndex,
+    activeIndex,
     labelClassName,
     onClick,
     className,
     currentPageForAnalytics,
   } = props
-  const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
   const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
-
   return (
     <>
-      <div className={clsx('mb-4 border-b border-gray-200', className)}>
+      <nav
-        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+        className={clsx('mb-4 space-x-8 border-b border-gray-200', className)}
-          {tabs.map((tab, i) => (
+        aria-label="Tabs"
-            <Link href={tab.href ?? '#'} key={tab.title} shallow={!!tab.href}>
+      >
-              <a
+        {tabs.map((tab, i) => (
-                id={`tab-${i}`}
+          <a
-                key={tab.title}
+            href="#"
-                onClick={(e) => {
+            key={tab.title}
-                  track('Clicked Tab', {
+            onClick={(e) => {
-                    title: tab.title,
+              e.preventDefault()
-                    href: tab.href,
+              track('Clicked Tab', {
-                    currentPage: currentPageForAnalytics,
+                title: tab.title,
-                  })
+                currentPage: currentPageForAnalytics,
-                  if (!tab.href) {
+              })
-                    e.preventDefault()
+              onClick?.(tab.title, i)
-                  }
+            }}
-                  setActiveIndex(i)
+            className={clsx(
-                  onClick?.(tab.title, i)
+              activeIndex === i
-                }}
+                ? 'border-indigo-500 text-indigo-600'
-                className={clsx(
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-                  activeIndex === i
+              'inline-flex cursor-pointer flex-row gap-1 whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium',
-                    ? 'border-indigo-500 text-indigo-600'
+              labelClassName
-                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+            )}
-                  'cursor-pointer whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium',
+            aria-current={activeIndex === i ? 'page' : undefined}
-                  labelClassName
+          >
-                )}
+            {tab.tabIcon && <span>{tab.tabIcon}</span>}
-                aria-current={activeIndex === i ? 'page' : undefined}
+            {tab.badge ? (
-              >
+              <span className="px-0.5 font-bold">{tab.badge}</span>
-                <Row className={'items-center justify-center gap-1'}>
+            ) : null}
-                  {tab.tabIcon && <span> {tab.tabIcon}</span>}
+            {tab.title}
-                  {tab.title}
+          </a>
-                </Row>
+        ))}
-              </a>
+      </nav>
-            </Link>
-          ))}
-        </nav>
-      </div>
-
       {activeTab?.content}
     </>
   )
 }
+
+export function UncontrolledTabs(props: TabProps & { defaultIndex?: number }) {
+  const { defaultIndex, onClick, ...rest } = props
+  const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
+  return (
+    <ControlledTabs
+      {...rest}
+      activeIndex={activeIndex}
+      onClick={(title, i) => {
+        setActiveIndex(i)
+        onClick?.(title, i)
+      }}
+    />
+  )
+}
+
+const isTabSelected = (router: NextRouter, queryParam: string, tab: Tab) => {
+  const selected = router.query[queryParam]
+  if (typeof selected === 'string') {
+    return tab.title.toLowerCase() === selected
+  } else {
+    return false
+  }
+}
+
+export function QueryUncontrolledTabs(
+  props: TabProps & { defaultIndex?: number }
+) {
+  const { tabs, defaultIndex, onClick, ...rest } = props
+  const router = useRouter()
+  const selectedIdx = tabs.findIndex((t) => isTabSelected(router, 'tab', t))
+  const activeIndex = selectedIdx !== -1 ? selectedIdx : defaultIndex ?? 0
+  return (
+    <ControlledTabs
+      {...rest}
+      tabs={tabs}
+      activeIndex={activeIndex}
+      onClick={(title, i) => {
+        router.replace(
+          { query: { ...router.query, tab: title.toLowerCase() } },
+          undefined,
+          { shallow: true }
+        )
+        onClick?.(title, i)
+      }}
+    />
+  )
+}
+
+// legacy code that didn't know about any other kind of tabs imports this
+export const Tabs = UncontrolledTabs

web/components/manalink-card.tsx

@@ -3,9 +3,13 @@ import { formatMoney } from 'common/util/format'
 import { fromNow } from 'web/lib/util/time'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
-import { User } from 'web/lib/firebase/users'
+import { Claim, Manalink } from 'common/manalink'
-import { Button } from './button'
+import { useState } from 'react'
-
+import { ShareIconButton } from './share-icon-button'
+import { DotsHorizontalIcon } from '@heroicons/react/solid'
+import { contractDetailsButtonClassName } from './contract/contract-info-dialog'
+import { useUserById } from 'web/hooks/use-user'
+import getManalinkUrl from 'web/get-manalink-url'
 export type ManalinkInfo = {
   expiresTime: number | null
   maxUses: number | null
@@ -15,94 +19,202 @@ export type ManalinkInfo = {
 }
 
 export function ManalinkCard(props: {
-  user: User | null | undefined
-  className?: string
   info: ManalinkInfo
-  isClaiming: boolean
+  className?: string
-  onClaim?: () => void
+  preview?: boolean
 }) {
-  const { user, className, isClaiming, info, onClaim } = props
+  const { className, info, preview = false } = props
   const { expiresTime, maxUses, uses, amount, message } = info
   return (
-    <div
+    <Col>
-      className={clsx(
+      <Col
-        className,
+        className={clsx(
-        'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br from-indigo-200 via-indigo-400 to-indigo-800 shadow-lg transition-all'
+          className,
-      )}
+          'min-h-20 group rounded-lg bg-gradient-to-br drop-shadow-sm transition-all',
-    >
+          getManalinkGradient(info.amount)
-      <Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100">
+        )}
-        <div>
+      >
-          {maxUses != null
+        <Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100">
-            ? `${maxUses - uses}/${maxUses} uses left`
+          <div>
-            : `Unlimited use`}
+            {maxUses != null
-        </div>
+              ? `${maxUses - uses}/${maxUses} uses left`
-        <div>
+              : `Unlimited use`}
-          {expiresTime != null
+          </div>
-            ? `Expires ${fromNow(expiresTime)}`
+          <div>
-            : 'Never expires'}
+            {expiresTime != null
-        </div>
+              ? `Expires ${fromNow(expiresTime)}`
-      </Col>
+              : 'Never expires'}
+          </div>
+        </Col>
 
-      <img
+        <img
-        className="mb-6 block self-center transition-all group-hover:rotate-12"
+          className={clsx(
-        src="/logo-white.svg"
+            'block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12',
-        width={200}
+            preview ? 'my-2' : 'w-1/2 md:mb-6 md:h-1/2'
-        height={200}
+          )}
-      />
+          src="/logo-white.svg"
-      <Row className="justify-end rounded-b-xl bg-white p-4">
+        />
-        <Col>
+        <Row className="rounded-b-lg bg-white p-4">
-          <div className="mb-1 text-xl text-indigo-500">
+          <div
+            className={clsx(
+              'mb-1 text-xl text-indigo-500',
+              getManalinkAmountColor(amount)
+            )}
+          >
             {formatMoney(amount)}
           </div>
-          <div>{message}</div>
+        </Row>
-        </Col>
+      </Col>
-
+      <div className="text-md mt-2 mb-4 text-gray-500">{message}</div>
-        <div className="ml-auto">
+    </Col>
-          <Button onClick={onClaim} disabled={isClaiming}>
-            {user ? 'Claim' : 'Login'}
-          </Button>
-        </div>
-      </Row>
-    </div>
   )
 }
 
-export function ManalinkCardPreview(props: {
+export function ManalinkCardFromView(props: {
   className?: string
-  info: ManalinkInfo
+  link: Manalink
+  highlightedSlug: string
 }) {
-  const { className, info } = props
+  const { className, link, highlightedSlug } = props
-  const { expiresTime, maxUses, uses, amount, message } = info
+  const { message, amount, expiresTime, maxUses, claims } = link
+  const [showDetails, setShowDetails] = useState(false)
+
   return (
-    <div
+    <Col>
-      className={clsx(
+      <Col
-        className,
+        className={clsx(
-        ' group flex flex-col rounded-lg bg-gradient-to-br from-indigo-200 via-indigo-400 to-indigo-800 shadow-lg transition-all'
+          'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
-      )}
+          className,
-    >
+          link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
-      <Col className="mx-4 mt-2 -mb-4 text-right text-xs text-gray-100">
+        )}
-        <div>
+      >
-          {maxUses != null
+        <Col
-            ? `${maxUses - uses}/${maxUses} uses left`
+          className={clsx(
-            : `Unlimited use`}
+            'relative rounded-t-lg bg-gradient-to-br transition-all',
+            getManalinkGradient(link.amount)
+          )}
+          onClick={() => setShowDetails(!showDetails)}
+        >
+          {showDetails && (
+            <ClaimsList
+              className="absolute h-full w-full bg-white opacity-90"
+              link={link}
+            />
+          )}
+          <Col className="mx-4 mt-2 -mb-4 text-right text-xs text-gray-100">
+            <div>
+              {maxUses != null
+                ? `${maxUses - claims.length}/${maxUses} uses left`
+                : `Unlimited use`}
+            </div>
+            <div>
+              {expiresTime != null
+                ? `Expires ${fromNow(expiresTime)}`
+                : 'Never expires'}
+            </div>
+          </Col>
+          <img
+            className={clsx('my-auto block w-1/3 select-none self-center py-3')}
+            src="/logo-white.svg"
+          />
+        </Col>
+        <Row className="relative w-full gap-1 rounded-b-lg bg-white px-4 py-2 text-lg">
+          <div
+            className={clsx(
+              'my-auto mb-1 w-full',
+              getManalinkAmountColor(amount)
+            )}
+          >
+            {formatMoney(amount)}
+          </div>
+          <ShareIconButton
+            toastClassName={'-left-48 min-w-[250%]'}
+            buttonClassName={'transition-colors'}
+            onCopyButtonClassName={
+              'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
+            }
+            copyPayload={getManalinkUrl(link.slug)}
+          />
+          <button
+            onClick={() => setShowDetails(!showDetails)}
+            className={clsx(
+              contractDetailsButtonClassName,
+              showDetails
+                ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
+                : ''
+            )}
+          >
+            <DotsHorizontalIcon className="h-[24px] w-5" />
+          </button>
+        </Row>
+      </Col>
+      <div className="mt-2 mb-4 text-xs text-gray-500 md:text-sm">
+        {message || ''}
+      </div>
+    </Col>
+  )
+}
+
+function ClaimsList(props: { link: Manalink; className: string }) {
+  const { link, className } = props
+  return (
+    <>
+      <Col className={clsx('px-4 py-2', className)}>
+        <div className="text-md mb-1 mt-2 w-full font-semibold">
+          Claimed by...
         </div>
-        <div>
+        <div className="overflow-auto">
-          {expiresTime != null
+          {link.claims.length > 0 ? (
-            ? `Expires ${fromNow(expiresTime)}`
+            <>
-            : 'Never expires'}
+              {link.claims.map((claim) => (
+                <Row key={claim.txnId}>
+                  <Claim claim={claim} />
+                </Row>
+              ))}
+            </>
+          ) : (
+            <div className="h-full">
+              No one has claimed this manalink yet! Share your manalink to start
+              spreading the wealth.
+            </div>
+          )}
         </div>
       </Col>
-
+    </>
-      <img
-        className="my-2 block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12"
-        src="/logo-white.svg"
-      />
-      <Row className="rounded-b-lg bg-white p-2">
-        <Col className="text-md">
-          <div className="mb-1 text-indigo-500">{formatMoney(amount)}</div>
-          <div className="text-xs">{message}</div>
-        </Col>
-      </Row>
-    </div>
   )
 }
+
+function Claim(props: { claim: Claim }) {
+  const { claim } = props
+  const who = useUserById(claim.toId)
+  return (
+    <Row className="my-1 gap-2 text-xs">
+      <div>{who?.name || 'Loading...'}</div>
+      <div className="text-gray-500">{fromNow(claim.claimedTime)}</div>
+    </Row>
+  )
+}
+
+function getManalinkGradient(amount: number) {
+  if (amount < 20) {
+    return 'from-indigo-200 via-indigo-500 to-indigo-800'
+  } else if (amount >= 20 && amount < 50) {
+    return 'from-fuchsia-200 via-fuchsia-500 to-fuchsia-800'
+  } else if (amount >= 50 && amount < 100) {
+    return 'from-rose-100 via-rose-400 to-rose-700'
+  } else if (amount >= 100) {
+    return 'from-amber-200 via-amber-500 to-amber-700'
+  }
+}
+
+function getManalinkAmountColor(amount: number) {
+  if (amount < 20) {
+    return 'text-indigo-500'
+  } else if (amount >= 20 && amount < 50) {
+    return 'text-fuchsia-600'
+  } else if (amount >= 50 && amount < 100) {
+    return 'text-rose-600'
+  } else if (amount >= 100) {
+    return 'text-amber-600'
+  }
+}

web/components/manalinks/create-links-button.tsx

@@ -4,7 +4,7 @@ import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 import { Title } from '../title'
 import { User } from 'common/user'
-import { ManalinkCardPreview, ManalinkInfo } from 'web/components/manalink-card'
+import { ManalinkCard, ManalinkInfo } from 'web/components/manalink-card'
 import { createManalink } from 'web/lib/firebase/manalinks'
 import { Modal } from 'web/components/layout/modal'
 import Textarea from 'react-expanding-textarea'
@@ -164,6 +164,7 @@ function CreateManalinkForm(props: {
               <label className="label">Message</label>
               <Textarea
                 placeholder={defaultMessage}
+                maxLength={200}
                 className="input input-bordered resize-none"
                 autoFocus
                 value={newManalink.message}
@@ -191,7 +192,7 @@ function CreateManalinkForm(props: {
       {finishedCreating && (
         <>
           <Title className="!my-0" text="Manalink Created!" />
-          <ManalinkCardPreview className="my-4" info={newManalink} />
+          <ManalinkCard className="my-4" info={newManalink} preview />
           <Row
             className={clsx(
               'rounded border bg-gray-50 py-2 px-3 text-sm text-gray-500 transition-colors duration-700',

web/components/nav/sidebar.tsx

@@ -11,7 +11,7 @@ import {
 } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Router, { useRouter } from 'next/router'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import { firebaseLogout, User } from 'web/lib/firebase/users'
 import { ManifoldLogo } from './manifold-logo'
@@ -31,6 +31,13 @@ import { setNotificationsAsSeen } from 'web/pages/notifications'
 import { PrivateUser } from 'common/user'
 import { useWindowSize } from 'web/hooks/use-window-size'
 
+const logout = async () => {
+  // log out, and then reload the page, in case SSR wants to boot them out
+  // of whatever logged-in-only area of the site they might be in
+  await withTracking(firebaseLogout, 'sign out')()
+  await Router.replace(Router.asPath)
+}
+
 function getNavigation() {
   return [
     { name: 'Home', href: '/home', icon: HomeIcon },
@@ -40,6 +47,8 @@ function getNavigation() {
       icon: NotificationsIcon,
     },
 
+    { name: 'Leaderboards', href: '/leaderboards', icon: TrendingUpIcon },
+
     ...(IS_PRIVATE_MANIFOLD
       ? []
       : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]),
@@ -53,7 +62,6 @@ function getMoreNavigation(user?: User | null) {
 
   if (!user) {
     return [
-      { name: 'Leaderboards', href: '/leaderboards' },
       { name: 'Charity', href: '/charity' },
       { name: 'Blog', href: 'https://news.manifold.markets' },
       { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
@@ -62,15 +70,15 @@ function getMoreNavigation(user?: User | null) {
   }
 
   return [
-    { name: 'Send M$', href: '/links' },
+    { name: 'Referrals', href: '/referrals' },
-    { name: 'Leaderboards', href: '/leaderboards' },
     { name: 'Charity', href: '/charity' },
+    { name: 'Send M$', href: '/links' },
     { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
     { name: 'About', href: 'https://docs.manifold.markets/$how-to' },
     {
       name: 'Sign out',
       href: '#',
-      onClick: withTracking(firebaseLogout, 'sign out'),
+      onClick: logout,
     },
   ]
 }
@@ -78,7 +86,6 @@ function getMoreNavigation(user?: User | null) {
 const signedOutNavigation = [
   { name: 'Home', href: '/home', icon: HomeIcon },
   { name: 'Explore', href: '/markets', icon: SearchIcon },
-  { name: 'Charity', href: '/charity', icon: HeartIcon },
   {
     name: 'About',
     href: 'https://docs.manifold.markets/$how-to',
@@ -98,6 +105,7 @@ const signedOutMobileNavigation = [
 ]
 
 const signedInMobileNavigation = [
+  { name: 'Leaderboards', href: '/leaderboards', icon: TrendingUpIcon },
   ...(IS_PRIVATE_MANIFOLD
     ? []
     : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]),
@@ -113,15 +121,15 @@ function getMoreMobileNav() {
     ...(IS_PRIVATE_MANIFOLD
       ? []
       : [
-          { name: 'Send M$', href: '/links' },
+          { name: 'Referrals', href: '/referrals' },
           { name: 'Charity', href: '/charity' },
+          { name: 'Send M$', href: '/links' },
           { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
         ]),
-    { name: 'Leaderboards', href: '/leaderboards' },
     {
       name: 'Sign out',
       href: '#',
-      onClick: withTracking(firebaseLogout, 'sign out'),
+      onClick: logout,
     },
   ]
 }

web/components/number-input.tsx

@@ -9,8 +9,8 @@ export function NumberInput(props: {
   numberString: string
   onChange: (newNumberString: string) => void
   error: string | undefined
-  label: string
   disabled?: boolean
+  placeholder?: string
   className?: string
   inputClassName?: string
   // Needed to focus the amount input
@@ -21,8 +21,8 @@ export function NumberInput(props: {
     numberString,
     onChange,
     error,
-    label,
     disabled,
+    placeholder,
     className,
     inputClassName,
     inputRef,
@@ -32,16 +32,17 @@ export function NumberInput(props: {
   return (
     <Col className={className}>
       <label className="input-group">
-        <span className="bg-gray-200 text-sm">{label}</span>
         <input
           className={clsx(
-            'input input-bordered max-w-[200px] text-lg',
+            'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
             error && 'input-error',
             inputClassName
           )}
           ref={inputRef}
           type="number"
-          placeholder="0"
+          pattern="[0-9]*"
+          inputMode="numeric"
+          placeholder={placeholder ?? '0'}
           maxLength={9}
           value={numberString}
           disabled={disabled}

web/components/outcome-label.tsx

@@ -7,6 +7,7 @@ import {
   BinaryContract,
   Contract,
   FreeResponseContract,
+  MultipleChoiceContract,
   resolution,
 } from 'common/contract'
 import { formatLargeNumber, formatPercent } from 'common/util/format'
@@ -77,7 +78,7 @@ export function BinaryContractOutcomeLabel(props: {
 }
 
 export function FreeResponseOutcomeLabel(props: {
-  contract: FreeResponseContract
+  contract: FreeResponseContract | MultipleChoiceContract
   resolution: string | 'CANCEL' | 'MKT'
   truncate: 'short' | 'long' | 'none'
   answerClassName?: string

web/components/page.tsx

@@ -62,4 +62,6 @@ const visuallyHiddenStyle = {
   position: 'absolute',
   width: 1,
   whiteSpace: 'nowrap',
+  userSelect: 'none',
+  visibility: 'hidden',
 } as const

web/components/pagination.tsx

@@ -1,9 +1,12 @@
+import clsx from 'clsx'
+
 export function Pagination(props: {
   page: number
   itemsPerPage: number
   totalItems: number
   setPage: (page: number) => void
   scrollToTop?: boolean
+  className?: string
   nextTitle?: string
   prevTitle?: string
 }) {
@@ -15,13 +18,17 @@ export function Pagination(props: {
     scrollToTop,
     nextTitle,
     prevTitle,
+    className,
   } = props
 
   const maxPage = Math.ceil(totalItems / itemsPerPage) - 1
 
   return (
     <nav
-      className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+      className={clsx(
+        'flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6',
+        className
+      )}
       aria-label="Pagination"
     >
       <div className="hidden sm:block">

web/components/play-money-disclaimer.tsx

@@ -0,0 +1,9 @@
+import { InfoBox } from './info-box'
+
+export const PlayMoneyDisclaimer = () => (
+  <InfoBox
+    title="Play-money betting"
+    className="mt-4 max-w-md"
+    text="Mana (M$) is the play-money used by our platform to keep track of your bets. It's completely free for you and your friends to get started!"
+  />
+)

web/components/probability-input.tsx

@@ -1,4 +1,7 @@
 import clsx from 'clsx'
+import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
+import { getPseudoProbability } from 'common/pseudo-numeric'
+import { BucketInput } from './bucket-input'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
 
@@ -6,10 +9,12 @@ export function ProbabilityInput(props: {
   prob: number | undefined
   onChange: (newProb: number | undefined) => void
   disabled?: boolean
+  placeholder?: string
   className?: string
   inputClassName?: string
 }) {
-  const { prob, onChange, disabled, className, inputClassName } = props
+  const { prob, onChange, disabled, placeholder, className, inputClassName } =
+    props
 
   const onProbChange = (str: string) => {
     let prob = parseInt(str.replace(/\D/g, ''))
@@ -27,7 +32,7 @@ export function ProbabilityInput(props: {
       <label className="input-group">
         <input
           className={clsx(
-            'input input-bordered max-w-[200px] text-lg',
+            'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
             inputClassName
           )}
           type="number"
@@ -35,7 +40,7 @@ export function ProbabilityInput(props: {
           min={1}
           pattern="[0-9]*"
           inputMode="numeric"
-          placeholder="0"
+          placeholder={placeholder ?? '0'}
           maxLength={2}
           value={prob ?? ''}
           disabled={disabled}
@@ -47,3 +52,43 @@ export function ProbabilityInput(props: {
     </Col>
   )
 }
+
+export function ProbabilityOrNumericInput(props: {
+  contract: CPMMBinaryContract | PseudoNumericContract
+  prob: number | undefined
+  setProb: (prob: number | undefined) => void
+  isSubmitting: boolean
+  placeholder?: string
+}) {
+  const { contract, prob, setProb, isSubmitting, placeholder } = props
+  const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
+
+  return isPseudoNumeric ? (
+    <BucketInput
+      contract={contract}
+      onBucketChange={(value) =>
+        setProb(
+          value === undefined
+            ? undefined
+            : 100 *
+                getPseudoProbability(
+                  value,
+                  contract.min,
+                  contract.max,
+                  contract.isLogScale
+                )
+        )
+      }
+      isSubmitting={isSubmitting}
+      placeholder={placeholder}
+    />
+  ) : (
+    <ProbabilityInput
+      inputClassName="w-full max-w-none"
+      prob={prob}
+      onChange={setProb}
+      disabled={isSubmitting}
+      placeholder={placeholder}
+    />
+  )
+}