Merge branch 'manifoldmarkets:main' into main

.github/workflows/lint.yml

@@ -0,0 +1,43 @@
+name: Run linter (remove unused imports)
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+on:
+  push:
+    branches: [main]
+
+env:
+  FORCE_COLOR: 3
+  NEXT_TELEMETRY_DISABLED: 1
+
+# mqp - i generated a personal token to use for these writes -- it's unclear
+# why, but the default token didn't work, even when i gave it max permissions
+
+jobs:
+  lint:
+    name: Auto-lint
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.FORMATTER_ACCESS_TOKEN }}
+      - name: Restore cached node_modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install missing dependencies
+        run: yarn install --prefer-offline --frozen-lockfile
+      - name: Run lint script
+        run: yarn lint
+      - name: Commit any lint changes
+        if: always()
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Auto-remove unused imports
+          branch: ${{ github.head_ref }}

common/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['lodash'],
+  plugins: ['lodash', 'unused-imports'],
   extends: ['eslint:recommended'],
   ignorePatterns: ['lib'],
   env: {
@@ -26,6 +26,7 @@ module.exports = {
             caughtErrorsIgnorePattern: '^_',
           },
         ],
+        'unused-imports/no-unused-imports': 'error',
       },
     },
   ],

common/calculate-metrics.ts

@@ -0,0 +1,158 @@
+import { last, sortBy, sum, sumBy } from 'lodash'
+import { calculatePayout } from './calculate'
+import { Bet } from './bet'
+import { Contract } from './contract'
+import { PortfolioMetrics, User } from './user'
+import { DAY_MS } from './util/time'
+
+const computeInvestmentValue = (
+  bets: Bet[],
+  contractsDict: { [k: string]: Contract }
+) => {
+  return sumBy(bets, (bet) => {
+    const contract = contractsDict[bet.contractId]
+    if (!contract || contract.isResolved) return 0
+    if (bet.sale || bet.isSold) return 0
+
+    const payout = calculatePayout(contract, bet, 'MKT')
+    const value = payout - (bet.loanAmount ?? 0)
+    if (isNaN(value)) return 0
+    return value
+  })
+}
+
+const computeTotalPool = (userContracts: Contract[], startTime = 0) => {
+  const periodFilteredContracts = userContracts.filter(
+    (contract) => contract.createdTime >= startTime
+  )
+  return sum(
+    periodFilteredContracts.map((contract) => sum(Object.values(contract.pool)))
+  )
+}
+
+export const computeVolume = (contractBets: Bet[], since: number) => {
+  return sumBy(contractBets, (b) =>
+    b.createdTime > since && !b.isRedemption ? Math.abs(b.amount) : 0
+  )
+}
+
+const calculateProbChangeSince = (descendingBets: Bet[], since: number) => {
+  const newestBet = descendingBets[0]
+  if (!newestBet) return 0
+
+  const betBeforeSince = descendingBets.find((b) => b.createdTime < since)
+
+  if (!betBeforeSince) {
+    const oldestBet = last(descendingBets) ?? newestBet
+    return newestBet.probAfter - oldestBet.probBefore
+  }
+
+  return newestBet.probAfter - betBeforeSince.probAfter
+}
+
+export const calculateProbChanges = (descendingBets: Bet[]) => {
+  const now = Date.now()
+  const yesterday = now - DAY_MS
+  const weekAgo = now - 7 * DAY_MS
+  const monthAgo = now - 30 * DAY_MS
+
+  return {
+    day: calculateProbChangeSince(descendingBets, yesterday),
+    week: calculateProbChangeSince(descendingBets, weekAgo),
+    month: calculateProbChangeSince(descendingBets, monthAgo),
+  }
+}
+
+export const calculateCreatorVolume = (userContracts: Contract[]) => {
+  const allTimeCreatorVolume = computeTotalPool(userContracts, 0)
+  const monthlyCreatorVolume = computeTotalPool(
+    userContracts,
+    Date.now() - 30 * DAY_MS
+  )
+  const weeklyCreatorVolume = computeTotalPool(
+    userContracts,
+    Date.now() - 7 * DAY_MS
+  )
+
+  const dailyCreatorVolume = computeTotalPool(
+    userContracts,
+    Date.now() - 1 * DAY_MS
+  )
+
+  return {
+    daily: dailyCreatorVolume,
+    weekly: weeklyCreatorVolume,
+    monthly: monthlyCreatorVolume,
+    allTime: allTimeCreatorVolume,
+  }
+}
+
+export const calculateNewPortfolioMetrics = (
+  user: User,
+  contractsById: { [k: string]: Contract },
+  currentBets: Bet[]
+) => {
+  const investmentValue = computeInvestmentValue(currentBets, contractsById)
+  const newPortfolio = {
+    investmentValue: investmentValue,
+    balance: user.balance,
+    totalDeposits: user.totalDeposits,
+    timestamp: Date.now(),
+    userId: user.id,
+  }
+  return newPortfolio
+}
+
+const calculateProfitForPeriod = (
+  startTime: number,
+  descendingPortfolio: PortfolioMetrics[],
+  currentProfit: number
+) => {
+  const startingPortfolio = descendingPortfolio.find(
+    (p) => p.timestamp < startTime
+  )
+
+  if (startingPortfolio === undefined) {
+    return currentProfit
+  }
+
+  const startingProfit = calculatePortfolioProfit(startingPortfolio)
+
+  return currentProfit - startingProfit
+}
+
+export const calculatePortfolioProfit = (portfolio: PortfolioMetrics) => {
+  return portfolio.investmentValue + portfolio.balance - portfolio.totalDeposits
+}
+
+export const calculateNewProfit = (
+  portfolioHistory: PortfolioMetrics[],
+  newPortfolio: PortfolioMetrics
+) => {
+  const allTimeProfit = calculatePortfolioProfit(newPortfolio)
+  const descendingPortfolio = sortBy(
+    portfolioHistory,
+    (p) => p.timestamp
+  ).reverse()
+
+  const newProfit = {
+    daily: calculateProfitForPeriod(
+      Date.now() - 1 * DAY_MS,
+      descendingPortfolio,
+      allTimeProfit
+    ),
+    weekly: calculateProfitForPeriod(
+      Date.now() - 7 * DAY_MS,
+      descendingPortfolio,
+      allTimeProfit
+    ),
+    monthly: calculateProfitForPeriod(
+      Date.now() - 30 * DAY_MS,
+      descendingPortfolio,
+      allTimeProfit
+    ),
+    allTime: allTimeProfit,
+  }
+
+  return newProfit
+}

common/calculate.ts

@@ -140,6 +140,8 @@ function getCpmmInvested(yourBets: Bet[]) {
   const sortedBets = sortBy(yourBets, 'createdTime')
   for (const bet of sortedBets) {
     const { outcome, shares, amount } = bet
+    if (floatingEqual(shares, 0)) continue
+
     if (amount > 0) {
       totalShares[outcome] = (totalShares[outcome] ?? 0) + shares
       totalSpent[outcome] = (totalSpent[outcome] ?? 0) + amount

common/comment.ts

@@ -1,6 +1,6 @@
 import type { JSONContent } from '@tiptap/core'
 
-export type AnyCommentType = OnContract | OnGroup
+export type AnyCommentType = OnContract | OnGroup | OnPost
 
 // Currently, comments are created after the bet, not atomically with the bet.
 // They're uniquely identified by the pair contractId/betId.
@@ -20,19 +20,31 @@ export type Comment<T extends AnyCommentType = AnyCommentType> = {
   userAvatarUrl?: string
 } & T
 
-type OnContract = {
+export type OnContract = {
   commentType: 'contract'
   contractId: string
-  contractSlug: string
-  contractQuestion: string
   answerOutcome?: string
   betId?: string
+
+  // denormalized from contract
+  contractSlug: string
+  contractQuestion: string
+
+  // denormalized from bet
+  betAmount?: number
+  betOutcome?: string
 }
 
-type OnGroup = {
+export type OnGroup = {
   commentType: 'group'
   groupId: string
 }
 
+export type OnPost = {
+  commentType: 'post'
+  postId: string
+}
+
 export type ContractComment = Comment<OnContract>
 export type GroupComment = Comment<OnGroup>
+export type PostComment = Comment<OnPost>

common/contract-details.ts

@@ -27,10 +27,10 @@ export function contractMetrics(contract: Contract) {
 export function contractTextDetails(contract: Contract) {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const dayjs = require('dayjs')
-  const { closeTime, tags } = contract
+  const { closeTime, groupLinks } = contract
   const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract)
 
-  const hashtags = tags.map((tag) => `#${tag}`)
+  const groupHashtags = groupLinks?.slice(0, 5).map((g) => `#${g.name}`)
 
   return (
     `${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
@@ -40,7 +40,7 @@ export function contractTextDetails(contract: Contract) {
         ).format('MMM D, h:mma')}`
       : '') +
     ` • ${volumeLabel}` +
-    (hashtags.length > 0 ? ` • ${hashtags.join(' ')}` : '')
+    (groupHashtags ? ` • ${groupHashtags.join(' ')}` : '')
   )
 }
 
@@ -92,6 +92,7 @@ export const getOpenGraphProps = (contract: Contract) => {
     creatorAvatarUrl,
     description,
     numericValue,
+    resolution,
   }
 }
 
@@ -103,6 +104,7 @@ export type OgCardProps = {
   creatorUsername: string
   creatorAvatarUrl?: string
   numericValue?: string
+  resolution?: string
 }
 
 export function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
@@ -113,22 +115,32 @@ export function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
     creatorOutcome,
     acceptorOutcome,
   } = challenge || {}
+  const {
+    probability,
+    numericValue,
+    resolution,
+    creatorAvatarUrl,
+    question,
+    metadata,
+    creatorUsername,
+    creatorName,
+  } = props
   const { userName, userAvatarUrl } = acceptances?.[0] ?? {}
 
   const probabilityParam =
-    props.probability === undefined
+    probability === undefined
       ? ''
-      : `&probability=${encodeURIComponent(props.probability ?? '')}`
+      : `&probability=${encodeURIComponent(probability ?? '')}`
 
   const numericValueParam =
-    props.numericValue === undefined
+    numericValue === undefined
       ? ''
-      : `&numericValue=${encodeURIComponent(props.numericValue ?? '')}`
+      : `&numericValue=${encodeURIComponent(numericValue ?? '')}`
 
   const creatorAvatarUrlParam =
-    props.creatorAvatarUrl === undefined
+    creatorAvatarUrl === undefined
       ? ''
-      : `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}`
+      : `&creatorAvatarUrl=${encodeURIComponent(creatorAvatarUrl ?? '')}`
 
   const challengeUrlParams = challenge
     ? `&creatorAmount=${creatorAmount}&creatorOutcome=${creatorOutcome}` +
@@ -136,16 +148,21 @@ export function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
       `&acceptedName=${userName ?? ''}&acceptedAvatarUrl=${userAvatarUrl ?? ''}`
     : ''
 
+  const resolutionUrlParam = resolution
+    ? `&resolution=${encodeURIComponent(resolution)}`
+    : ''
+
   // URL encode each of the props, then add them as query params
   return (
     `https://manifold-og-image.vercel.app/m.png` +
-    `?question=${encodeURIComponent(props.question)}` +
+    `?question=${encodeURIComponent(question)}` +
     probabilityParam +
     numericValueParam +
-    `&metadata=${encodeURIComponent(props.metadata)}` +
+    `&metadata=${encodeURIComponent(metadata)}` +
-    `&creatorName=${encodeURIComponent(props.creatorName)}` +
+    `&creatorName=${encodeURIComponent(creatorName)}` +
     creatorAvatarUrlParam +
-    `&creatorUsername=${encodeURIComponent(props.creatorUsername)}` +
+    `&creatorUsername=${encodeURIComponent(creatorUsername)}` +
-    challengeUrlParams
+    challengeUrlParams +
+    resolutionUrlParam
   )
 }

common/contract.ts

@@ -59,6 +59,8 @@ export type Contract<T extends AnyContractType = AnyContractType> = {
   popularityScore?: number
   followerCount?: number
   featuredOnHomeRank?: number
+  likedByUserIds?: string[]
+  likedByUserCount?: number
 } & T
 
 export type BinaryContract = Contract & Binary
@@ -85,6 +87,12 @@ export type CPMM = {
   pool: { [outcome: string]: number }
   p: number // probability constant in y^p * n^(1-p) = k
   totalLiquidity: number // in M$
+  prob: number
+  probChanges: {
+    day: number
+    week: number
+    month: number
+  }
 }
 
 export type Binary = {

common/envs/constants.ts

@@ -34,6 +34,11 @@ export const FIREBASE_CONFIG = ENV_CONFIG.firebaseConfig
 export const PROJECT_ID = ENV_CONFIG.firebaseConfig.projectId
 export const IS_PRIVATE_MANIFOLD = ENV_CONFIG.visibility === 'PRIVATE'
 
+export const AUTH_COOKIE_NAME = `FBUSER_${PROJECT_ID.toUpperCase().replace(
+  /-/g,
+  '_'
+)}`
+
 // Manifold's domain or any subdomains thereof
 export const CORS_ORIGIN_MANIFOLD = new RegExp(
   '^https?://(?:[a-zA-Z0-9\\-]+\\.)*' + escapeRegExp(ENV_CONFIG.domain) + '$'

common/envs/prod.ts

@@ -73,6 +73,7 @@ export const PROD_CONFIG: EnvConfig = {
     'manticmarkets@gmail.com', // Manifold
     'iansphilips@gmail.com', // Ian
     'd4vidchee@gmail.com', // D4vid
+    'federicoruizcassarino@gmail.com', // Fede
   ],
   visibility: 'PUBLIC',
 

common/group.ts

@@ -6,12 +6,11 @@ export type Group = {
   creatorId: string // User id
   createdTime: number
   mostRecentActivityTime: number
-  memberIds: string[] // User ids
   anyoneCanJoin: boolean
-  contractIds: string[]
+  totalContracts: number
-
+  totalMembers: number
+  aboutPostId?: string
   chatDisabled?: boolean
-  mostRecentChatActivityTime?: number
   mostRecentContractAddedTime?: number
 }
 export const MAX_GROUP_NAME_LENGTH = 75

common/like.ts

@@ -0,0 +1,8 @@
+export type Like = {
+  id: string // will be id of the object liked, i.e. contract.id
+  userId: string
+  type: 'contract'
+  createdTime: number
+  tipTxnId?: string // only holds most recent tip txn id
+}
+export const LIKE_TIP_AMOUNT = 5

common/loans.ts

@@ -10,7 +10,7 @@ import {
 import { PortfolioMetrics, User } from './user'
 import { filterDefined } from './util/array'
 
-const LOAN_DAILY_RATE = 0.01
+const LOAN_DAILY_RATE = 0.02
 
 const calculateNewLoan = (investedValue: number, loanTotal: number) => {
   const netValue = investedValue - loanTotal
@@ -118,7 +118,7 @@ const getFreeResponseContractLoanUpdate = (
   contract: FreeResponseContract | MultipleChoiceContract,
   bets: Bet[]
 ) => {
-  const openBets = bets.filter((bet) => bet.isSold || bet.sale)
+  const openBets = bets.filter((bet) => !bet.isSold && !bet.sale)
 
   return openBets.map((bet) => {
     const loanAmount = bet.loanAmount ?? 0

common/new-contract.ts

@@ -123,6 +123,8 @@ const getBinaryCpmmProps = (initialProb: number, ante: number) => {
     initialProbability: p,
     p,
     pool: pool,
+    prob: initialProb,
+    probChanges: { day: 0, week: 0, month: 0 },
   }
 
   return system

common/notification.ts

@@ -15,6 +15,7 @@ export type Notification = {
   sourceUserUsername?: string
   sourceUserAvatarUrl?: string
   sourceText?: string
+  data?: string
 
   sourceContractTitle?: string
   sourceContractCreatorUsername?: string
@@ -40,6 +41,8 @@ export type notification_source_types =
   | 'challenge'
   | 'betting_streak_bonus'
   | 'loan'
+  | 'like'
+  | 'tip_and_like'
 
 export type notification_source_update_types =
   | 'created'
@@ -71,3 +74,5 @@ export type notification_reason_types =
   | 'betting_streak_incremented'
   | 'loan_income'
   | 'you_follow_contract'
+  | 'liked_your_contract'
+  | 'liked_and_tipped_your_contract'

common/package.json

@@ -8,11 +8,11 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@tiptap/core": "2.0.0-beta.181",
+    "@tiptap/core": "2.0.0-beta.182",
     "@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",
+    "@tiptap/starter-kit": "2.0.0-beta.191",
     "lodash": "4.17.21"
   },
   "devDependencies": {

common/post.ts

@@ -0,0 +1,12 @@
+import { JSONContent } from '@tiptap/core'
+
+export type Post = {
+  id: string
+  title: string
+  content: JSONContent
+  creatorId: string // User id
+  createdTime: number
+  slug: string
+}
+
+export const MAX_POST_TITLE_LENGTH = 480

common/user.ts

@@ -34,6 +34,7 @@ export type User = {
   followerCountCached: number
 
   followedCategories?: string[]
+  homeSections?: { visible: string[]; hidden: string[] }
 
   referredByUserId?: string
   referredByContractId?: string
@@ -44,6 +45,7 @@ export type User = {
   currentBettingStreak?: number
   hasSeenContractFollowModal?: boolean
   freeMarketsCreated?: number
+  isBannedFromPosting?: boolean
 }
 
 export type PrivateUser = {

common/util/object.ts

@@ -1,6 +1,6 @@
 import { union } from 'lodash'
 
-export const removeUndefinedProps = <T>(obj: T): T => {
+export const removeUndefinedProps = <T extends object>(obj: T): T => {
   const newObj: any = {}
 
   for (const key of Object.keys(obj)) {
@@ -37,4 +37,3 @@ export const subtractObjects = <T extends { [key: string]: number }>(
 
   return newObj as T
 }
-

common/util/time.ts

@@ -1,2 +1,3 @@
-export const HOUR_MS = 60 * 60 * 1000
+export const MINUTE_MS = 60 * 1000
+export const HOUR_MS = 60 * MINUTE_MS
 export const DAY_MS = 24 * HOUR_MS

common/util/tiptap-iframe.ts

@@ -35,7 +35,7 @@ export default Node.create<IframeOptions>({
       HTMLAttributes: {
         class: 'iframe-wrapper' + ' ' + wrapperClasses,
         // Tailwind JIT doesn't seem to pick up `pb-[20rem]`, so we hack this in:
-        style: 'padding-bottom: 20rem;',
+        style: 'padding-bottom: 20rem; ',
       },
     }
   },
@@ -48,6 +48,9 @@ export default Node.create<IframeOptions>({
       frameborder: {
         default: 0,
       },
+      height: {
+        default: 0,
+      },
       allowfullscreen: {
         default: this.options.allowFullscreen,
         parseHTML: () => this.options.allowFullscreen,
@@ -60,6 +63,11 @@ export default Node.create<IframeOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
+    this.options.HTMLAttributes.style =
+      this.options.HTMLAttributes.style +
+      ' height: ' +
+      HTMLAttributes.height +
+      ';'
     return [
       'div',
       this.options.HTMLAttributes,

docs/docs/api.md

@@ -54,6 +54,10 @@ Returns the authenticated user.
 
 Gets all groups, in no particular order.
 
+Parameters:
+- `availableToUserId`: Optional. if specified, only groups that the user can
+  join and groups they've already joined will be returned.
+
 Requires no authorization.
 
 ### `GET /v0/groups/[slug]`
@@ -62,12 +66,18 @@ Gets a group by its slug.
 
 Requires no authorization.
 
-### `GET /v0/groups/by-id/[id]`
+### `GET /v0/group/by-id/[id]`
 
 Gets a group by its unique ID.
 
 Requires no authorization.
 
+### `GET /v0/group/by-id/[id]/markets`
+
+Gets a group's markets by its unique ID.
+
+Requires no authorization.
+
 ### `GET /v0/markets`
 
 Lists all markets, 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.
 ## API / Dev
 
 - [PyManifold](https://github.com/bcongdon/PyManifold) - Python client for the Manifold API
+  - [PyManifold fork](https://github.com/gappleto97/PyManifold/) - Fork maintained by [@LivInTheLookingGlass](https://manifold.markets/LivInTheLookingGlass)
 - [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
@@ -24,3 +25,16 @@ A list of community-created projects built on, or related to, Manifold Markets.
 
 - [@manifold@botsin.space](https://botsin.space/@manifold) - Posts new Manifold markets to Mastodon
 - [James' Bot](https://github.com/manifoldmarkets/market-maker) — Simple trading bot that makes markets
+- [mana](https://github.com/AnnikaCodes/mana) - A Discord bot for Manifold by [@arae](https://manifold.markets/arae)
+
+## Writeups
+- [Information Markets, Decision Markets, Attention Markets, Action Markets](https://astralcodexten.substack.com/p/information-markets-decision-markets) by Scott Alexander
+- [Mismatched Monetary Motivation in Manifold Markets](https://kevin.zielnicki.com/2022/02/17/manifold/) by Kevin Zielnicki
+- [Introducing the Salem/CSPI Forecasting Tournament](https://www.cspicenter.com/p/introducing-the-salemcspi-forecasting) by Richard Hanania
+- [What I learned about running a betting market game night contest](https://shakeddown.wordpress.com/2022/08/04/what-i-learned-about-running-a-betting-market-game-night-contest/) by shakeddown
+- [Free-riding on prediction markets](https://pedunculate.substack.com/p/free-riding-on-prediction-markets) by John Roxton
+
+## Art
+
+- Folded origami and doodles by [@hamnox](https://manifold.markets/hamnox) ![](https://i.imgur.com/nVGY4pL.png) 
+- Laser-cut Foldy by [@wasabipesto](https://manifold.markets/wasabipesto) ![](https://i.imgur.com/g9S6v3P.jpg) 

firestore.indexes.json

@@ -22,6 +22,20 @@
         }
       ]
     },
+    {
+      "collectionGroup": "bets",
+      "queryScope": "COLLECTION_GROUP",
+      "fields": [
+        {
+          "fieldPath": "isFilled",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "userId",
+          "order": "ASCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "bets",
       "queryScope": "COLLECTION_GROUP",
@@ -36,6 +50,70 @@
         }
       ]
     },
+    {
+      "collectionGroup": "bets",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "isCancelled",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "isFilled",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "createdTime",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "challenges",
+      "queryScope": "COLLECTION_GROUP",
+      "fields": [
+        {
+          "fieldPath": "creatorId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "createdTime",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "comments",
+      "queryScope": "COLLECTION_GROUP",
+      "fields": [
+        {
+          "fieldPath": "commentType",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "userId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "createdTime",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "comments",
+      "queryScope": "COLLECTION_GROUP",
+      "fields": [
+        {
+          "fieldPath": "userId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "createdTime",
+          "order": "ASCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "comments",
       "queryScope": "COLLECTION_GROUP",
@@ -78,6 +156,42 @@
         }
       ]
     },
+    {
+      "collectionGroup": "contracts",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "creatorId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "isResolved",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "popularityScore",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "contracts",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "groupSlugs",
+          "arrayConfig": "CONTAINS"
+        },
+        {
+          "fieldPath": "isResolved",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "popularityScore",
+          "order": "DESCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "contracts",
       "queryScope": "COLLECTION",
@@ -124,6 +238,46 @@
         }
       ]
     },
+    {
+      "collectionGroup": "contracts",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "isResolved",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "visibility",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "closeTime",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "popularityScore",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "contracts",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "isResolved",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "visibility",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "popularityScore",
+          "order": "DESCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "contracts",
       "queryScope": "COLLECTION",

firestore.rules

@@ -12,7 +12,9 @@ service cloud.firestore {
         'taowell@gmail.com',
         'abc.sinclair@gmail.com',
         'manticmarkets@gmail.com',
-        'iansphilips@gmail.com'
+        'iansphilips@gmail.com',
+        'd4vidchee@gmail.com',
+        'federicoruizcassarino@gmail.com'
       ]
     }
 
@@ -62,6 +64,11 @@ service cloud.firestore {
       allow write: if request.auth.uid == userId;
     }
 
+    match /users/{userId}/likes/{likeId} {
+      allow read;
+      allow write: if request.auth.uid == userId;
+    }
+
     match /{somePath=**}/follows/{followUserId} {
       allow read;
     }
@@ -155,25 +162,53 @@ service cloud.firestore {
                                                                     .hasOnly(['isSeen', 'viewTime']);
     }
 
-     match /groups/{groupId} {
+    match /{somePath=**}/groupMembers/{memberId} {
+      allow read;
+    }
+
+    match /{somePath=**}/groupContracts/{contractId} {
+      allow read;
+    }
+
+	   match /groups/{groupId} {
           allow read;
-          allow update: if request.auth.uid == resource.data.creatorId
+          allow update: if (request.auth.uid == resource.data.creatorId || isAdmin())
                            && request.resource.data.diff(resource.data)
                            .affectedKeys()
-                           .hasOnly(['name', 'about', 'contractIds', 'memberIds', 'anyoneCanJoin' ]);
+                           .hasOnly(['name', 'about', 'anyoneCanJoin', 'aboutPostId' ]);
-         allow update: if (request.auth.uid in resource.data.memberIds  || resource.data.anyoneCanJoin)
-                           && request.resource.data.diff(resource.data)
-                           .affectedKeys()
-                           .hasOnly([ 'contractIds', 'memberIds' ]);
           allow delete: if request.auth.uid == resource.data.creatorId;
 
-          function isMember() {
+          match /groupContracts/{contractId} {
-            return request.auth.uid in get(/databases/$(database)/documents/groups/$(groupId)).data.memberIds;
+              allow write: if isGroupMember() || request.auth.uid == get(/databases/$(database)/documents/groups/$(groupId)).data.creatorId
+            }
+
+          match /groupMembers/{memberId}{
+             allow create: if request.auth.uid == get(/databases/$(database)/documents/groups/$(groupId)).data.creatorId || (request.auth.uid == request.resource.data.userId && get(/databases/$(database)/documents/groups/$(groupId)).data.anyoneCanJoin);
+             allow delete: if request.auth.uid == resource.data.userId;
+            }
+
+          function isGroupMember() {
+            return exists(/databases/$(database)/documents/groups/$(groupId)/groupMembers/$(request.auth.uid));
           }
+
           match /comments/{commentId} {
           	allow read;
-            allow create: if request.auth != null && commentMatchesUser(request.auth.uid, request.resource.data) && isMember();
+            allow create: if request.auth != null && commentMatchesUser(request.auth.uid, request.resource.data) && isGroupMember();
           }
+
         }
+
+      match /posts/{postId} {
+        allow read;
+        allow update: if isAdmin() || request.auth.uid == resource.data.creatorId
+                         && request.resource.data.diff(resource.data)
+                         .affectedKeys()
+                         .hasOnly(['name', 'content']);
+        allow delete: if isAdmin() || request.auth.uid == resource.data.creatorId;
+         match /comments/{commentId} {
+          	allow read;
+            allow create: if request.auth != null && commentMatchesUser(request.auth.uid, request.resource.data) ;
+          }
+      }
   }
 }

functions/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['lodash'],
+  plugins: ['lodash', 'unused-imports'],
   extends: ['eslint:recommended'],
   ignorePatterns: ['dist', 'lib'],
   env: {
@@ -26,6 +26,7 @@ module.exports = {
             caughtErrorsIgnorePattern: '^_',
           },
         ],
+        'unused-imports/no-unused-imports': 'error',
       },
     },
   ],

functions/package.json

@@ -26,11 +26,11 @@
   "dependencies": {
     "@amplitude/node": "1.10.0",
     "@google-cloud/functions-framework": "3.1.2",
-    "@tiptap/core": "2.0.0-beta.181",
+    "@tiptap/core": "2.0.0-beta.182",
     "@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",
+    "@tiptap/starter-kit": "2.0.0-beta.191",
     "cors": "2.8.5",
     "dayjs": "1.11.4",
     "express": "4.18.1",

functions/src/create-group.ts

@@ -58,13 +58,23 @@ export const creategroup = newEndpoint({}, async (req, auth) => {
     createdTime: Date.now(),
     mostRecentActivityTime: Date.now(),
     // TODO: allow users to add contract ids on group creation
-    contractIds: [],
     anyoneCanJoin,
-    memberIds,
+    totalContracts: 0,
+    totalMembers: memberIds.length,
   }
 
   await groupRef.create(group)
 
+  // create a GroupMemberDoc for each member
+  await Promise.all(
+    memberIds.map((memberId) =>
+      groupRef.collection('groupMembers').doc(memberId).create({
+        userId: memberId,
+        createdTime: Date.now(),
+      })
+    )
+  )
+
   return { status: 'success', group: group }
 })
 

functions/src/create-market.ts

@@ -155,8 +155,14 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
     }
 
     group = groupDoc.data() as Group
+    const groupMembersSnap = await firestore
+      .collection(`groups/${groupId}/groupMembers`)
+      .get()
+    const groupMemberDocs = groupMembersSnap.docs.map(
+      (doc) => doc.data() as { userId: string; createdTime: number }
+    )
     if (
-      !group.memberIds.includes(user.id) &&
+      !groupMemberDocs.map((m) => m.userId).includes(user.id) &&
       !group.anyoneCanJoin &&
       group.creatorId !== user.id
     ) {
@@ -227,11 +233,20 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
   await contractRef.create(contract)
 
   if (group != null) {
-    if (!group.contractIds.includes(contractRef.id)) {
+    const groupContractsSnap = await firestore
+      .collection(`groups/${groupId}/groupContracts`)
+      .get()
+    const groupContracts = groupContractsSnap.docs.map(
+      (doc) => doc.data() as { contractId: string; createdTime: number }
+    )
+    if (!groupContracts.map((c) => c.contractId).includes(contractRef.id)) {
       await createGroupLinks(group, [contractRef.id], auth.uid)
-      const groupDocRef = firestore.collection('groups').doc(group.id)
+      const groupContractRef = firestore
-      groupDocRef.update({
+        .collection(`groups/${groupId}/groupContracts`)
-        contractIds: uniq([...group.contractIds, contractRef.id]),
+        .doc(contract.id)
+      await groupContractRef.set({
+        contractId: contract.id,
+        createdTime: Date.now(),
       })
     }
   }

functions/src/create-notification.ts

@@ -18,6 +18,7 @@ import { TipTxn } from '../../common/txn'
 import { Group, GROUP_CHAT_SLUG } from '../../common/group'
 import { Challenge } from '../../common/challenge'
 import { richTextToString } from '../../common/util/parse'
+import { Like } from '../../common/like'
 const firestore = admin.firestore()
 
 type user_to_reason_texts = {
@@ -150,15 +151,6 @@ export const createNotification = async (
       }
   }
 
-  const notifyContractCreatorOfUniqueBettorsBonus = async (
-    userToReasonTexts: user_to_reason_texts,
-    userId: string
-  ) => {
-    userToReasonTexts[userId] = {
-      reason: 'unique_bettors_on_your_contract',
-    }
-  }
-
   const userToReasonTexts: user_to_reason_texts = {}
   // The following functions modify the userToReasonTexts object in place.
 
@@ -191,16 +183,6 @@ export const createNotification = async (
     sourceContract
   ) {
     await notifyContractCreator(userToReasonTexts, sourceContract)
-  } else if (
-    sourceType === 'bonus' &&
-    sourceUpdateType === 'created' &&
-    sourceContract
-  ) {
-    // Note: the daily bonus won't have a contract attached to it
-    await notifyContractCreatorOfUniqueBettorsBonus(
-      userToReasonTexts,
-      sourceContract.creatorId
-    )
   }
 
   await createUsersNotifications(userToReasonTexts)
@@ -689,3 +671,85 @@ export const createBettingStreakBonusNotification = async (
   }
   return await notificationRef.set(removeUndefinedProps(notification))
 }
+
+export const createLikeNotification = async (
+  fromUser: User,
+  toUser: User,
+  like: Like,
+  idempotencyKey: string,
+  contract: Contract,
+  tip?: TipTxn
+) => {
+  const notificationRef = firestore
+    .collection(`/users/${toUser.id}/notifications`)
+    .doc(idempotencyKey)
+  const notification: Notification = {
+    id: idempotencyKey,
+    userId: toUser.id,
+    reason: tip ? 'liked_and_tipped_your_contract' : 'liked_your_contract',
+    createdTime: Date.now(),
+    isSeen: false,
+    sourceId: like.id,
+    sourceType: tip ? 'tip_and_like' : 'like',
+    sourceUpdateType: 'created',
+    sourceUserName: fromUser.name,
+    sourceUserUsername: fromUser.username,
+    sourceUserAvatarUrl: fromUser.avatarUrl,
+    sourceText: tip?.amount.toString(),
+    sourceContractCreatorUsername: contract.creatorUsername,
+    sourceContractTitle: contract.question,
+    sourceContractSlug: contract.slug,
+    sourceSlug: contract.slug,
+    sourceTitle: contract.question,
+  }
+  return await notificationRef.set(removeUndefinedProps(notification))
+}
+
+export async function filterUserIdsForOnlyFollowerIds(
+  userIds: string[],
+  contractId: string
+) {
+  // get contract follower documents and check here if they're a follower
+  const contractFollowersSnap = await firestore
+    .collection(`contracts/${contractId}/follows`)
+    .get()
+  const contractFollowersIds = contractFollowersSnap.docs.map(
+    (doc) => doc.data().id
+  )
+  return userIds.filter((id) => contractFollowersIds.includes(id))
+}
+
+export const createUniqueBettorBonusNotification = async (
+  contractCreatorId: string,
+  bettor: User,
+  txnId: string,
+  contract: Contract,
+  amount: number,
+  idempotencyKey: string
+) => {
+  const notificationRef = firestore
+    .collection(`/users/${contractCreatorId}/notifications`)
+    .doc(idempotencyKey)
+  const notification: Notification = {
+    id: idempotencyKey,
+    userId: contractCreatorId,
+    reason: 'unique_bettors_on_your_contract',
+    createdTime: Date.now(),
+    isSeen: false,
+    sourceId: txnId,
+    sourceType: 'bonus',
+    sourceUpdateType: 'created',
+    sourceUserName: bettor.name,
+    sourceUserUsername: bettor.username,
+    sourceUserAvatarUrl: bettor.avatarUrl,
+    sourceText: amount.toString(),
+    sourceSlug: contract.slug,
+    sourceTitle: contract.question,
+    // Perhaps not necessary, but just in case
+    sourceContractSlug: contract.slug,
+    sourceContractId: contract.id,
+    sourceContractTitle: contract.question,
+    sourceContractCreatorUsername: contract.creatorUsername,
+  }
+  return await notificationRef.set(removeUndefinedProps(notification))
+}

functions/src/create-post.ts

@@ -0,0 +1,83 @@
+import * as admin from 'firebase-admin'
+
+import { getUser } from './utils'
+import { slugify } from '../../common/util/slugify'
+import { randomString } from '../../common/util/random'
+import { Post, MAX_POST_TITLE_LENGTH } from '../../common/post'
+import { APIError, newEndpoint, validate } from './api'
+import { JSONContent } from '@tiptap/core'
+import { z } from 'zod'
+
+const contentSchema: z.ZodType<JSONContent> = z.lazy(() =>
+  z.intersection(
+    z.record(z.any()),
+    z.object({
+      type: z.string().optional(),
+      attrs: z.record(z.any()).optional(),
+      content: z.array(contentSchema).optional(),
+      marks: z
+        .array(
+          z.intersection(
+            z.record(z.any()),
+            z.object({
+              type: z.string(),
+              attrs: z.record(z.any()).optional(),
+            })
+          )
+        )
+        .optional(),
+      text: z.string().optional(),
+    })
+  )
+)
+
+const postSchema = z.object({
+  title: z.string().min(1).max(MAX_POST_TITLE_LENGTH),
+  content: contentSchema,
+})
+
+export const createpost = newEndpoint({}, async (req, auth) => {
+  const firestore = admin.firestore()
+  const { title, content } = validate(postSchema, req.body)
+
+  const creator = await getUser(auth.uid)
+  if (!creator)
+    throw new APIError(400, 'No user exists with the authenticated user ID.')
+
+  console.log('creating post owned by', creator.username, 'titled', title)
+
+  const slug = await getSlug(title)
+
+  const postRef = firestore.collection('posts').doc()
+
+  const post: Post = {
+    id: postRef.id,
+    creatorId: creator.id,
+    slug,
+    title,
+    createdTime: Date.now(),
+    content: content,
+  }
+
+  await postRef.create(post)
+
+  return { status: 'success', post }
+})
+
+export const getSlug = async (title: string) => {
+  const proposedSlug = slugify(title)
+
+  const preexistingPost = await getPostFromSlug(proposedSlug)
+
+  return preexistingPost ? proposedSlug + '-' + randomString() : proposedSlug
+}
+
+export async function getPostFromSlug(slug: string) {
+  const firestore = admin.firestore()
+  const snap = await firestore
+    .collection('posts')
+    .where('slug', '==', slug)
+    .get()
+
+  return snap.empty ? undefined : (snap.docs[0].data() as Post)
+}

functions/src/create-user.ts

@@ -1,6 +1,5 @@
 import * as admin from 'firebase-admin'
 import { z } from 'zod'
-import { uniq } from 'lodash'
 
 import { PrivateUser, User } from '../../common/user'
 import { getUser, getUserByUsername, getValues } from './utils'
@@ -17,7 +16,7 @@ import {
 
 import { track } from './analytics'
 import { APIError, newEndpoint, validate } from './api'
-import { Group, NEW_USER_GROUP_SLUGS } from '../../common/group'
+import { Group } from '../../common/group'
 import { SUS_STARTING_BALANCE, STARTING_BALANCE } from '../../common/economy'
 
 const bodySchema = z.object({
@@ -117,23 +116,8 @@ const addUserToDefaultGroups = async (user: User) => {
       firestore.collection('groups').where('slug', '==', slug)
     )
     await firestore
-      .collection('groups')
+      .collection(`groups/${groups[0].id}/groupMembers`)
-      .doc(groups[0].id)
+      .doc(user.id)
-      .update({
+      .set({ userId: user.id, createdTime: Date.now() })
-        memberIds: uniq(groups[0].memberIds.concat(user.id)),
-      })
-  }
-
-  for (const slug of NEW_USER_GROUP_SLUGS) {
-    const groups = await getValues<Group>(
-      firestore.collection('groups').where('slug', '==', slug)
-    )
-    const group = groups[0]
-    await firestore
-      .collection('groups')
-      .doc(group.id)
-      .update({
-        memberIds: uniq(group.memberIds.concat(user.id)),
-      })
   }
 }

functions/src/email-templates/market-answer.html

@@ -1,84 +1,91 @@
 <!DOCTYPE html>
-<html
+<html style="
-  style="
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     box-sizing: border-box;
     font-size: 14px;
     margin: 0;
-  "
+  ">
->
-  <head>
-    <meta name="viewport" content="width=device-width" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <title>Market answer</title>
 
-    <style type="text/css">
+<head>
-      img {
+  <meta name="viewport" content="width=device-width" />
-        max-width: 100%;
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>Market answer</title>
+
+  <style type="text/css">
+    img {
+      max-width: 100%;
+    }
+
+    body {
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      width: 100% !important;
+      height: 100%;
+      line-height: 1.6em;
+    }
+
+    body {
+      background-color: #f6f6f6;
+    }
+
+    @media only screen and (max-width: 640px) {
+      body {
+        padding: 0 !important;
       }
 
-      body {
+      h1 {
-        -webkit-font-smoothing: antialiased;
+        font-weight: 800 !important;
-        -webkit-text-size-adjust: none;
+        margin: 20px 0 5px !important;
+      }
+
+      h2 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h3 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h4 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h1 {
+        font-size: 22px !important;
+      }
+
+      h2 {
+        font-size: 18px !important;
+      }
+
+      h3 {
+        font-size: 16px !important;
+      }
+
+      .container {
+        padding: 0 !important;
         width: 100% !important;
-        height: 100%;
-        line-height: 1.6em;
       }
 
-      body {
+      .content {
-        background-color: #f6f6f6;
+        padding: 0 !important;
       }
 
-      @media only screen and (max-width: 640px) {
+      .content-wrap {
-        body {
+        padding: 10px !important;
-          padding: 0 !important;
-        }
-        h1 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h2 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h3 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h4 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h1 {
-          font-size: 22px !important;
-        }
-        h2 {
-          font-size: 18px !important;
-        }
-        h3 {
-          font-size: 16px !important;
-        }
-        .container {
-          padding: 0 !important;
-          width: 100% !important;
-        }
-        .content {
-          padding: 0 !important;
-        }
-        .content-wrap {
-          padding: 10px !important;
-        }
-        .invoice {
-          width: 100% !important;
-        }
       }
-    </style>
-  </head>
 
-  <body
+      .invoice {
-    itemscope
+        width: 100% !important;
-    itemtype="http://schema.org/EmailMessage"
+      }
-    style="
+    }
+  </style>
+</head>
+
+<body itemscope itemtype="http://schema.org/EmailMessage" style="
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       box-sizing: border-box;
       font-size: 14px;
@@ -89,43 +96,29 @@
       line-height: 1.6em;
       background-color: #f6f6f6;
       margin: 0;
-    "
+    " bgcolor="#f6f6f6">
-    bgcolor="#f6f6f6"
+  <table class="body-wrap" style="
-  >
-    <table
-      class="body-wrap"
-      style="
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         box-sizing: border-box;
         font-size: 14px;
         width: 100%;
         background-color: #f6f6f6;
         margin: 0;
-      "
+      " bgcolor="#f6f6f6">
-      bgcolor="#f6f6f6"
+    <tr style="
-    >
-      <tr
-        style="
           font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
           box-sizing: border-box;
           font-size: 14px;
           margin: 0;
-        "
+        ">
-      >
+      <td style="
-        <td
-          style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
             vertical-align: top;
             margin: 0;
-          "
+          " valign="top"></td>
-          valign="top"
+      <td class="container" width="600" style="
-        ></td>
-        <td
-          class="container"
-          width="600"
-          style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
@@ -134,12 +127,8 @@
             max-width: 600px !important;
             clear: both !important;
             margin: 0 auto;
-          "
+          " valign="top">
-          valign="top"
+        <div class="content" style="
-        >
-          <div
-            class="content"
-            style="
               font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
               box-sizing: border-box;
               font-size: 14px;
@@ -147,14 +136,8 @@
               display: block;
               margin: 0 auto;
               padding: 20px;
-            "
+            ">
-          >
+          <table class="main" width="100%" cellpadding="0" cellspacing="0" style="
-            <table
-              class="main"
-              width="100%"
-              cellpadding="0"
-              cellspacing="0"
-              style="
                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 box-sizing: border-box;
                 font-size: 14px;
@@ -162,20 +145,14 @@
                 background-color: #fff;
                 margin: 0;
                 border: 1px solid #e9e9e9;
-              "
+              " bgcolor="#fff">
-              bgcolor="#fff"
+            <tr style="
-            >
-              <tr
-                style="
                   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                   box-sizing: border-box;
                   font-size: 14px;
                   margin: 0;
-                "
+                ">
-              >
+              <td class="content-wrap aligncenter" style="
-                <td
-                  class="content-wrap aligncenter"
-                  style="
                     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                     box-sizing: border-box;
                     font-size: 14px;
@@ -183,35 +160,23 @@
                     text-align: center;
                     margin: 0;
                     padding: 20px;
-                  "
+                  " align="center" valign="top">
-                  align="center"
+                <table width="100%" cellpadding="0" cellspacing="0" style="
-                  valign="top"
-                >
-                  <table
-                    width="100%"
-                    cellpadding="0"
-                    cellspacing="0"
-                    style="
                       font-family: 'Helvetica Neue', Helvetica, Arial,
                         sans-serif;
                       box-sizing: border-box;
                       font-size: 14px;
                       margin: 0;
                       width: 90%;
-                    "
+                    ">
-                  >
+                  <tr style="
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -220,29 +185,21 @@
                           margin: 0;
                           padding: 0 0 0px 0;
                           text-align: left;
-                        "
+                        " valign="top">
-                        valign="top"
+                      <a href="https://manifold.markets" target="_blank">
-                      >
+                        <img src="https://manifold.markets/logo-banner.png" width="300" style="height: auto"
-                        <img
+                          alt="Manifold Markets" />
-                          src="https://manifold.markets/logo-banner.png"
+                      </a>
-                          width="300"
+                    </td>
-                          style="height: auto"
+                  </tr>
-                          alt="Manifold Markets"
+                  <tr style="
-                        />
-                      </td>
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 16px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block aligncenter" style="
-                      <td
-                        class="content-block aligncenter"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -251,13 +208,8 @@
                           text-align: center;
                           margin: 0;
                           padding: 0;
-                        "
+                        " align="center" valign="top">
-                        align="center"
+                      <table class="invoice" style="
-                        valign="top"
-                      >
-                        <table
-                          class="invoice"
-                          style="
                             font-family: 'Helvetica Neue', Helvetica, Arial,
                               sans-serif;
                             box-sizing: border-box;
@@ -266,19 +218,15 @@
                             width: 80%;
                             margin: 40px auto;
                             margin-top: 10px;
-                          "
+                          ">
-                        >
+                        <tr style="
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="
-                            <td
-                              style="
                                 font-family: 'Helvetica Neue', Helvetica, Arial,
                                   sans-serif;
                                 box-sizing: border-box;
@@ -286,37 +234,26 @@
                                 margin: 0;
                                 padding: 5px 0;
                                 font-weight: bold;
-                              "
+                              " valign="top">
-                              valign="top"
+                            <div>
-                            >
+                              <img src="{{avatarUrl}}" width="30" height="30" style="
-                              <div>
-                                <img
-                                  src="{{avatarUrl}}"
-                                  width="30"
-                                  height="30"
-                                  style="
                                     border-radius: 30px;
                                     overflow: hidden;
                                     vertical-align: middle;
                                     margin-right: 4px;
-                                  "
+                                  " alt="" />
-                                  alt=""
+                              {{name}}
-                                />
+                            </div>
-                                {{name}}
+                          </td>
-                              </div>
+                        </tr>
-                            </td>
+                        <tr style="
-                          </tr>
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="
-                            <td
-                              style="
                                 font-family: 'Helvetica Neue', Helvetica, Arial,
                                   sans-serif;
                                 box-sizing: border-box;
@@ -324,40 +261,29 @@
                                 vertical-align: top;
                                 margin: 0;
                                 padding: 5px 0;
-                              "
+                              " valign="top">
-                              valign="top"
+                            <div style="
-                            >
-                              <div
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                ">
-                              >
+                              <span style="white-space: pre-line">{{answer}}</span>
-                                <span style="white-space: pre-line"
+                            </div>
-                                  >{{answer}}</span
+                          </td>
-                                >
+                        </tr>
-                              </div>
+                        <tr style="
-                            </td>
-                          </tr>
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="padding: 20px 0 0 0; margin: 0">
-                            <td style="padding: 20px 0 0 0; margin: 0">
+                            <div align="center">
-                              <div align="center">
+                              <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:37px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
-                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:37px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
+                              <a href="{{marketUrl}}" target="_blank" style="
-                                <a
-                                  href="{{marketUrl}}"
-                                  target="_blank"
-                                  style="
                                     box-sizing: border-box;
                                     display: inline-block;
                                     font-family: arial, helvetica, sans-serif;
@@ -375,38 +301,29 @@
                                     word-break: break-word;
                                     word-wrap: break-word;
                                     mso-border-alt: none;
-                                  "
+                                  ">
-                                >
+                                <span style="
-                                  <span
-                                    style="
                                       display: block;
                                       padding: 10px 20px;
                                       line-height: 120%;
-                                    "
+                                    "><span style="
-                                    ><span
-                                      style="
                                         font-size: 16px;
                                         font-weight: bold;
                                         line-height: 18.8px;
-                                      "
+                                      ">View answer</span></span>
-                                      >View answer</span
+                              </a>
-                                    ></span
+                              <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
-                                  >
+                            </div>
-                                </a>
+                          </td>
-                                <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
+                        </tr>
-                              </div>
+                      </table>
-                            </td>
+                    </td>
-                          </tr>
+                  </tr>
-                        </table>
+                </table>
-                      </td>
+              </td>
-                    </tr>
+            </tr>
-                  </table>
+          </table>
-                </td>
+          <div class="footer" style="
-              </tr>
-            </table>
-            <div
-              class="footer"
-              style="
                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 box-sizing: border-box;
                 font-size: 14px;
@@ -415,28 +332,20 @@
                 color: #999;
                 margin: 0;
                 padding: 20px;
-              "
+              ">
-            >
+            <table width="100%" style="
-              <table
-                width="100%"
-                style="
                   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                   box-sizing: border-box;
                   font-size: 14px;
                   margin: 0;
-                "
+                ">
-              >
+              <tr style="
-                <tr
-                  style="
                     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                     box-sizing: border-box;
                     font-size: 14px;
                     margin: 0;
-                  "
+                  ">
-                >
+                <td class="aligncenter content-block" style="
-                  <td
-                    class="aligncenter content-block"
-                    style="
                       font-family: 'Helvetica Neue', Helvetica, Arial,
                         sans-serif;
                       box-sizing: border-box;
@@ -446,14 +355,9 @@
                       text-align: center;
                       margin: 0;
                       padding: 0 0 20px;
-                    "
+                    " align="center" valign="top">
-                    align="center"
+                  Questions? Come ask in
-                    valign="top"
+                  <a href="https://discord.gg/eHQBNBqXuh" style="
-                  >
-                    Questions? Come ask in
-                    <a
-                      href="https://discord.gg/eHQBNBqXuh"
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
@@ -461,12 +365,8 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      "
+                      ">our Discord</a>! Or,
-                      >our Discord</a
+                  <a href="{{unsubscribeUrl}}" style="
-                    >! Or,
-                    <a
-                      href="{{unsubscribeUrl}}"
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
@@ -474,26 +374,22 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      "
+                      ">unsubscribe</a>.
-                      >unsubscribe</a
+                </td>
-                    >.
+              </tr>
-                  </td>
+            </table>
-                </tr>
-              </table>
-            </div>
           </div>
-        </td>
+        </div>
-        <td
+      </td>
-          style="
+      <td style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
             vertical-align: top;
             margin: 0;
-          "
+          " valign="top"></td>
-          valign="top"
+    </tr>
-        ></td>
+  </table>
-      </tr>
+</body>
-    </table>
+
-  </body>
 </html>

functions/src/email-templates/market-close.html

@@ -1,84 +1,91 @@
 <!DOCTYPE html>
-<html
+<html style="
-  style="
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     box-sizing: border-box;
     font-size: 14px;
     margin: 0;
-  "
+  ">
->
-  <head>
-    <meta name="viewport" content="width=device-width" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <title>Market closed</title>
 
-    <style type="text/css">
+<head>
-      img {
+  <meta name="viewport" content="width=device-width" />
-        max-width: 100%;
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>Market closed</title>
+
+  <style type="text/css">
+    img {
+      max-width: 100%;
+    }
+
+    body {
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      width: 100% !important;
+      height: 100%;
+      line-height: 1.6em;
+    }
+
+    body {
+      background-color: #f6f6f6;
+    }
+
+    @media only screen and (max-width: 640px) {
+      body {
+        padding: 0 !important;
       }
 
-      body {
+      h1 {
-        -webkit-font-smoothing: antialiased;
+        font-weight: 800 !important;
-        -webkit-text-size-adjust: none;
+        margin: 20px 0 5px !important;
+      }
+
+      h2 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h3 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h4 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h1 {
+        font-size: 22px !important;
+      }
+
+      h2 {
+        font-size: 18px !important;
+      }
+
+      h3 {
+        font-size: 16px !important;
+      }
+
+      .container {
+        padding: 0 !important;
         width: 100% !important;
-        height: 100%;
-        line-height: 1.6em;
       }
 
-      body {
+      .content {
-        background-color: #f6f6f6;
+        padding: 0 !important;
       }
 
-      @media only screen and (max-width: 640px) {
+      .content-wrap {
-        body {
+        padding: 10px !important;
-          padding: 0 !important;
-        }
-        h1 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h2 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h3 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h4 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h1 {
-          font-size: 22px !important;
-        }
-        h2 {
-          font-size: 18px !important;
-        }
-        h3 {
-          font-size: 16px !important;
-        }
-        .container {
-          padding: 0 !important;
-          width: 100% !important;
-        }
-        .content {
-          padding: 0 !important;
-        }
-        .content-wrap {
-          padding: 10px !important;
-        }
-        .invoice {
-          width: 100% !important;
-        }
       }
-    </style>
-  </head>
 
-  <body
+      .invoice {
-    itemscope
+        width: 100% !important;
-    itemtype="http://schema.org/EmailMessage"
+      }
-    style="
+    }
+  </style>
+</head>
+
+<body itemscope itemtype="http://schema.org/EmailMessage" style="
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       box-sizing: border-box;
       font-size: 14px;
@@ -89,43 +96,29 @@
       line-height: 1.6em;
       background-color: #f6f6f6;
       margin: 0;
-    "
+    " bgcolor="#f6f6f6">
-    bgcolor="#f6f6f6"
+  <table class="body-wrap" style="
-  >
-    <table
-      class="body-wrap"
-      style="
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         box-sizing: border-box;
         font-size: 14px;
         width: 100%;
         background-color: #f6f6f6;
         margin: 0;
-      "
+      " bgcolor="#f6f6f6">
-      bgcolor="#f6f6f6"
+    <tr style="
-    >
-      <tr
-        style="
           font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
           box-sizing: border-box;
           font-size: 14px;
           margin: 0;
-        "
+        ">
-      >
+      <td style="
-        <td
-          style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
             vertical-align: top;
             margin: 0;
-          "
+          " valign="top"></td>
-          valign="top"
+      <td class="container" width="600" style="
-        ></td>
-        <td
-          class="container"
-          width="600"
-          style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
@@ -134,12 +127,8 @@
             max-width: 600px !important;
             clear: both !important;
             margin: 0 auto;
-          "
+          " valign="top">
-          valign="top"
+        <div class="content" style="
-        >
-          <div
-            class="content"
-            style="
               font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
               box-sizing: border-box;
               font-size: 14px;
@@ -147,14 +136,8 @@
               display: block;
               margin: 0 auto;
               padding: 20px;
-            "
+            ">
-          >
+          <table class="main" width="100%" cellpadding="0" cellspacing="0" style="
-            <table
-              class="main"
-              width="100%"
-              cellpadding="0"
-              cellspacing="0"
-              style="
                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 box-sizing: border-box;
                 font-size: 14px;
@@ -162,20 +145,14 @@
                 background-color: #fff;
                 margin: 0;
                 border: 1px solid #e9e9e9;
-              "
+              " bgcolor="#fff">
-              bgcolor="#fff"
+            <tr style="
-            >
-              <tr
-                style="
                   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                   box-sizing: border-box;
                   font-size: 14px;
                   margin: 0;
-                "
+                ">
-              >
+              <td class="content-wrap aligncenter" style="
-                <td
-                  class="content-wrap aligncenter"
-                  style="
                     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                     box-sizing: border-box;
                     font-size: 14px;
@@ -183,35 +160,23 @@
                     text-align: center;
                     margin: 0;
                     padding: 20px;
-                  "
+                  " align="center" valign="top">
-                  align="center"
+                <table width="100%" cellpadding="0" cellspacing="0" style="
-                  valign="top"
-                >
-                  <table
-                    width="100%"
-                    cellpadding="0"
-                    cellspacing="0"
-                    style="
                       font-family: 'Helvetica Neue', Helvetica, Arial,
                         sans-serif;
                       box-sizing: border-box;
                       font-size: 14px;
                       margin: 0;
                       width: 90%;
-                    "
+                    ">
-                  >
+                  <tr style="
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -220,30 +185,22 @@
                           margin: 0;
                           padding: 0 0 40px 0;
                           text-align: left;
-                        "
+                        " valign="top">
-                        valign="top"
+                      <a href="https://manifold.markets" target="_blank">
-                      >
+                        <img src="https://manifold.markets/logo-banner.png" width="300" style="height: auto"
-                        <img
+                          alt="Manifold Markets" />
-                          src="https://manifold.markets/logo-banner.png"
+                      </a>
-                          width="300"
+                    </td>
-                          style="height: auto"
+                  </tr>
-                          alt="Manifold Markets"
+                  <tr style="
-                        />
-                      </td>
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
                         padding: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -252,24 +209,18 @@
                           margin: 0;
                           padding: 0 0 6px 0;
                           text-align: left;
-                        "
+                        " valign="top">
-                        valign="top"
+                      You asked
-                      >
+                    </td>
-                        You asked
+                  </tr>
-                      </td>
+                  <tr style="
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -277,12 +228,8 @@
                           vertical-align: top;
                           margin: 0;
                           padding: 0 0 20px;
-                        "
+                        " valign="top">
-                        valign="top"
+                      <a href="{{url}}" style="
-                      >
-                        <a
-                          href="{{url}}"
-                          style="
                             font-family: 'Helvetica Neue', Helvetica, Arial,
                               'Lucida Grande', sans-serif;
                             box-sizing: border-box;
@@ -295,24 +242,18 @@
                             color: #4337c9;
                             display: block;
                             text-decoration: none;
-                          "
+                          ">
-                        >
+                        {{question}}</a>
-                          {{question}}</a
+                    </td>
-                        >
+                  </tr>
-                      </td>
+                  <tr style="
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -320,12 +261,8 @@
                           vertical-align: top;
                           margin: 0;
                           padding: 0 0 0px;
-                        "
+                        " valign="top">
-                        valign="top"
+                      <h2 class="aligncenter" style="
-                      >
-                        <h2
-                          class="aligncenter"
-                          style="
                             font-family: 'Helvetica Neue', Helvetica, Arial,
                               'Lucida Grande', sans-serif;
                             box-sizing: border-box;
@@ -335,25 +272,19 @@
                             font-weight: 500;
                             text-align: center;
                             margin: 10px 0 0;
-                          "
+                          " align="center">
-                          align="center"
+                        Market closed
-                        >
+                      </h2>
-                          Market closed
+                    </td>
-                        </h2>
+                  </tr>
-                      </td>
+                  <tr style="
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 16px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block aligncenter" style="
-                      <td
-                        class="content-block aligncenter"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -362,13 +293,8 @@
                           text-align: center;
                           margin: 0;
                           padding: 0;
-                        "
+                        " align="center" valign="top">
-                        align="center"
+                      <table class="invoice" style="
-                        valign="top"
-                      >
-                        <table
-                          class="invoice"
-                          style="
                             font-family: 'Helvetica Neue', Helvetica, Arial,
                               sans-serif;
                             box-sizing: border-box;
@@ -376,19 +302,15 @@
                             text-align: left;
                             width: 80%;
                             margin: 40px auto;
-                          "
+                          ">
-                        >
+                        <tr style="
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="
-                            <td
-                              style="
                                 font-family: 'Helvetica Neue', Helvetica, Arial,
                                   sans-serif;
                                 box-sizing: border-box;
@@ -396,116 +318,90 @@
                                 vertical-align: top;
                                 margin: 0;
                                 padding: 5px 0;
-                              "
+                              " valign="top">
-                              valign="top"
+                            Hi {{name}},
-                            >
+                            <br style="
-                              Hi {{name}},
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            A market you created has closed. It's attracted
-                              A market you created has closed. It's attracted
+                            <span style="font-weight: bold">{{volume}}</span>
-                              <span style="font-weight: bold">{{volume}}</span>
+                            in bets — congrats!
-                              in bets — congrats!
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            Please resolve your market.
-                              Resolve your market to earn {{creatorFee}} as the
+                            <br style="
-                              creator commission.
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            Thanks,
-                              Thanks,
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            Manifold Team
-                              Manifold Team
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                          </td>
-                            </td>
+                        </tr>
-                          </tr>
+                        <tr style="
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="padding: 10px 0 0 0; margin: 0">
-                            <td style="padding: 10px 0 0 0; margin: 0">
+                            <div align="center">
-                              <div align="center">
+                              <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:37px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
-                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:37px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
+                              <a href="{{url}}" target="_blank" style="
-                                <a
-                                  href="{{url}}"
-                                  target="_blank"
-                                  style="
                                     box-sizing: border-box;
                                     display: inline-block;
                                     font-family: arial, helvetica, sans-serif;
@@ -523,38 +419,29 @@
                                     word-break: break-word;
                                     word-wrap: break-word;
                                     mso-border-alt: none;
-                                  "
+                                  ">
-                                >
+                                <span style="
-                                  <span
-                                    style="
                                       display: block;
                                       padding: 10px 20px;
                                       line-height: 120%;
-                                    "
+                                    "><span style="
-                                    ><span
-                                      style="
                                         font-size: 16px;
                                         font-weight: bold;
                                         line-height: 18.8px;
-                                      "
+                                      ">View market</span></span>
-                                      >View market</span
+                              </a>
-                                    ></span
+                              <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
-                                  >
+                            </div>
-                                </a>
+                          </td>
-                                <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
+                        </tr>
-                              </div>
+                      </table>
-                            </td>
+                    </td>
-                          </tr>
+                  </tr>
-                        </table>
+                </table>
-                      </td>
+              </td>
-                    </tr>
+            </tr>
-                  </table>
+          </table>
-                </td>
+          <div class="footer" style="
-              </tr>
-            </table>
-            <div
-              class="footer"
-              style="
                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 box-sizing: border-box;
                 font-size: 14px;
@@ -563,28 +450,20 @@
                 color: #999;
                 margin: 0;
                 padding: 20px;
-              "
+              ">
-            >
+            <table width="100%" style="
-              <table
-                width="100%"
-                style="
                   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                   box-sizing: border-box;
                   font-size: 14px;
                   margin: 0;
-                "
+                ">
-              >
+              <tr style="
-                <tr
-                  style="
                     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                     box-sizing: border-box;
                     font-size: 14px;
                     margin: 0;
-                  "
+                  ">
-                >
+                <td class="aligncenter content-block" style="
-                  <td
-                    class="aligncenter content-block"
-                    style="
                       font-family: 'Helvetica Neue', Helvetica, Arial,
                         sans-serif;
                       box-sizing: border-box;
@@ -594,14 +473,9 @@
                       text-align: center;
                       margin: 0;
                       padding: 0 0 20px;
-                    "
+                    " align="center" valign="top">
-                    align="center"
+                  Questions? Come ask in
-                    valign="top"
+                  <a href="https://discord.gg/eHQBNBqXuh" style="
-                  >
-                    Questions? Come ask in
-                    <a
-                      href="https://discord.gg/eHQBNBqXuh"
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
@@ -609,12 +483,8 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      "
+                      ">our Discord</a>! Or,
-                      >our Discord</a
+                  <a href="{{unsubscribeUrl}}" style="
-                    >! Or,
-                    <a
-                      href="{{unsubscribeUrl}}"
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
@@ -622,26 +492,22 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      "
+                      ">unsubscribe</a>.
-                      >unsubscribe</a
+                </td>
-                    >.
+              </tr>
-                  </td>
+            </table>
-                </tr>
-              </table>
-            </div>
           </div>
-        </td>
+        </div>
-        <td
+      </td>
-          style="
+      <td style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
             vertical-align: top;
             margin: 0;
-          "
+          " valign="top"></td>
-          valign="top"
+    </tr>
-        ></td>
+  </table>
-      </tr>
+</body>
-    </table>
+
-  </body>
 </html>

functions/src/email-templates/market-comment.html

@@ -1,84 +1,91 @@
 <!DOCTYPE html>
-<html
+<html style="
-  style="
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     box-sizing: border-box;
     font-size: 14px;
     margin: 0;
-  "
+  ">
->
-  <head>
-    <meta name="viewport" content="width=device-width" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <title>Market comment</title>
 
-    <style type="text/css">
+<head>
-      img {
+  <meta name="viewport" content="width=device-width" />
-        max-width: 100%;
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>Market comment</title>
+
+  <style type="text/css">
+    img {
+      max-width: 100%;
+    }
+
+    body {
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      width: 100% !important;
+      height: 100%;
+      line-height: 1.6em;
+    }
+
+    body {
+      background-color: #f6f6f6;
+    }
+
+    @media only screen and (max-width: 640px) {
+      body {
+        padding: 0 !important;
       }
 
-      body {
+      h1 {
-        -webkit-font-smoothing: antialiased;
+        font-weight: 800 !important;
-        -webkit-text-size-adjust: none;
+        margin: 20px 0 5px !important;
+      }
+
+      h2 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h3 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h4 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h1 {
+        font-size: 22px !important;
+      }
+
+      h2 {
+        font-size: 18px !important;
+      }
+
+      h3 {
+        font-size: 16px !important;
+      }
+
+      .container {
+        padding: 0 !important;
         width: 100% !important;
-        height: 100%;
-        line-height: 1.6em;
       }
 
-      body {
+      .content {
-        background-color: #f6f6f6;
+        padding: 0 !important;
       }
 
-      @media only screen and (max-width: 640px) {
+      .content-wrap {
-        body {
+        padding: 10px !important;
-          padding: 0 !important;
-        }
-        h1 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h2 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h3 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h4 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h1 {
-          font-size: 22px !important;
-        }
-        h2 {
-          font-size: 18px !important;
-        }
-        h3 {
-          font-size: 16px !important;
-        }
-        .container {
-          padding: 0 !important;
-          width: 100% !important;
-        }
-        .content {
-          padding: 0 !important;
-        }
-        .content-wrap {
-          padding: 10px !important;
-        }
-        .invoice {
-          width: 100% !important;
-        }
       }
-    </style>
-  </head>
 
-  <body
+      .invoice {
-    itemscope
+        width: 100% !important;
-    itemtype="http://schema.org/EmailMessage"
+      }
-    style="
+    }
+  </style>
+</head>
+
+<body itemscope itemtype="http://schema.org/EmailMessage" style="
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       box-sizing: border-box;
       font-size: 14px;
@@ -89,43 +96,29 @@
       line-height: 1.6em;
       background-color: #f6f6f6;
       margin: 0;
-    "
+    " bgcolor="#f6f6f6">
-    bgcolor="#f6f6f6"
+  <table class="body-wrap" style="
-  >
-    <table
-      class="body-wrap"
-      style="
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         box-sizing: border-box;
         font-size: 14px;
         width: 100%;
         background-color: #f6f6f6;
         margin: 0;
-      "
+      " bgcolor="#f6f6f6">
-      bgcolor="#f6f6f6"
+    <tr style="
-    >
-      <tr
-        style="
           font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
           box-sizing: border-box;
           font-size: 14px;
           margin: 0;
-        "
+        ">
-      >
+      <td style="
-        <td
-          style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
             vertical-align: top;
             margin: 0;
-          "
+          " valign="top"></td>
-          valign="top"
+      <td class="container" width="600" style="
-        ></td>
-        <td
-          class="container"
-          width="600"
-          style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
@@ -134,12 +127,8 @@
             max-width: 600px !important;
             clear: both !important;
             margin: 0 auto;
-          "
+          " valign="top">
-          valign="top"
+        <div class="content" style="
-        >
-          <div
-            class="content"
-            style="
               font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
               box-sizing: border-box;
               font-size: 14px;
@@ -147,14 +136,8 @@
               display: block;
               margin: 0 auto;
               padding: 20px;
-            "
+            ">
-          >
+          <table class="main" width="100%" cellpadding="0" cellspacing="0" style="
-            <table
-              class="main"
-              width="100%"
-              cellpadding="0"
-              cellspacing="0"
-              style="
                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 box-sizing: border-box;
                 font-size: 14px;
@@ -162,20 +145,14 @@
                 background-color: #fff;
                 margin: 0;
                 border: 1px solid #e9e9e9;
-              "
+              " bgcolor="#fff">
-              bgcolor="#fff"
+            <tr style="
-            >
-              <tr
-                style="
                   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                   box-sizing: border-box;
                   font-size: 14px;
                   margin: 0;
-                "
+                ">
-              >
+              <td class="content-wrap aligncenter" style="
-                <td
-                  class="content-wrap aligncenter"
-                  style="
                     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                     box-sizing: border-box;
                     font-size: 14px;
@@ -183,35 +160,23 @@
                     text-align: center;
                     margin: 0;
                     padding: 20px;
-                  "
+                  " align="center" valign="top">
-                  align="center"
+                <table width="100%" cellpadding="0" cellspacing="0" style="
-                  valign="top"
-                >
-                  <table
-                    width="100%"
-                    cellpadding="0"
-                    cellspacing="0"
-                    style="
                       font-family: 'Helvetica Neue', Helvetica, Arial,
                         sans-serif;
                       box-sizing: border-box;
                       font-size: 14px;
                       margin: 0;
                       width: 90%;
-                    "
+                    ">
-                  >
+                  <tr style="
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -220,29 +185,21 @@
                           margin: 0;
                           padding: 0 0 0px 0;
                           text-align: left;
-                        "
+                        " valign="top">
-                        valign="top"
+                      <a href="https://manifold.markets" target="_blank">
-                      >
+                        <img src="https://manifold.markets/logo-banner.png" width="300" style="height: auto"
-                        <img
+                          alt="Manifold Markets" />
-                          src="https://manifold.markets/logo-banner.png"
+                      </a>
-                          width="300"
+                    </td>
-                          style="height: auto"
+                  </tr>
-                          alt="Manifold Markets"
+                  <tr style="
-                        />
-                      </td>
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 16px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block aligncenter" style="
-                      <td
-                        class="content-block aligncenter"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -251,13 +208,8 @@
                           text-align: center;
                           margin: 0;
                           padding: 0;
-                        "
+                        " align="center" valign="top">
-                        align="center"
+                      <table class="invoice" style="
-                        valign="top"
-                      >
-                        <table
-                          class="invoice"
-                          style="
                             font-family: 'Helvetica Neue', Helvetica, Arial,
                               sans-serif;
                             box-sizing: border-box;
@@ -266,59 +218,42 @@
                             width: 80%;
                             margin: 40px auto;
                             margin-top: 10px;
-                          "
+                          ">
-                        >
+                        <tr style="
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="
-                            <td
-                              style="
                                 font-family: 'Helvetica Neue', Helvetica, Arial,
                                   sans-serif;
                                 box-sizing: border-box;
                                 font-size: 14px;
                                 margin: 0;
                                 padding: 5px 0;
-                              "
+                              " valign="top">
-                              valign="top"
+                            <div>
-                            >
+                              <img src="{{commentorAvatarUrl}}" width="30" height="30" style="
-                              <div>
-                                <img
-                                  src="{{commentorAvatarUrl}}"
-                                  width="30"
-                                  height="30"
-                                  style="
                                     border-radius: 30px;
                                     overflow: hidden;
                                     vertical-align: middle;
                                     margin-right: 4px;
-                                  "
+                                  " alt="" />
-                                  alt=""
+                              <span style="font-weight: bold">{{commentorName}}</span>
-                                />
+                              {{betDescription}}
-                                <span style="font-weight: bold"
+                            </div>
-                                  >{{commentorName}}</span
+                          </td>
-                                >
+                        </tr>
-                                {{betDescription}}
+                        <tr style="
-                              </div>
-                            </td>
-                          </tr>
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="
-                            <td
-                              style="
                                 font-family: 'Helvetica Neue', Helvetica, Arial,
                                   sans-serif;
                                 box-sizing: border-box;
@@ -326,40 +261,29 @@
                                 vertical-align: top;
                                 margin: 0;
                                 padding: 5px 0;
-                              "
+                              " valign="top">
-                              valign="top"
+                            <div style="
-                            >
-                              <div
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                ">
-                              >
+                              <span style="white-space: pre-line">{{comment}}</span>
-                                <span style="white-space: pre-line"
+                            </div>
-                                  >{{comment}}</span
+                          </td>
-                                >
+                        </tr>
-                              </div>
+                        <tr style="
-                            </td>
-                          </tr>
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="padding: 20px 0 0 0; margin: 0">
-                            <td style="padding: 20px 0 0 0; margin: 0">
+                            <div align="center">
-                              <div align="center">
+                              <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:37px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
-                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:37px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
+                              <a href="{{marketUrl}}" target="_blank" style="
-                                <a
-                                  href="{{marketUrl}}"
-                                  target="_blank"
-                                  style="
                                     box-sizing: border-box;
                                     display: inline-block;
                                     font-family: arial, helvetica, sans-serif;
@@ -377,38 +301,29 @@
                                     word-break: break-word;
                                     word-wrap: break-word;
                                     mso-border-alt: none;
-                                  "
+                                  ">
-                                >
+                                <span style="
-                                  <span
-                                    style="
                                       display: block;
                                       padding: 10px 20px;
                                       line-height: 120%;
-                                    "
+                                    "><span style="
-                                    ><span
-                                      style="
                                         font-size: 16px;
                                         font-weight: bold;
                                         line-height: 18.8px;
-                                      "
+                                      ">View comment</span></span>
-                                      >View comment</span
+                              </a>
-                                    ></span
+                              <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
-                                  >
+                            </div>
-                                </a>
+                          </td>
-                                <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
+                        </tr>
-                              </div>
+                      </table>
-                            </td>
+                    </td>
-                          </tr>
+                  </tr>
-                        </table>
+                </table>
-                      </td>
+              </td>
-                    </tr>
+            </tr>
-                  </table>
+          </table>
-                </td>
+          <div class="footer" style="
-              </tr>
-            </table>
-            <div
-              class="footer"
-              style="
                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 box-sizing: border-box;
                 font-size: 14px;
@@ -417,28 +332,20 @@
                 color: #999;
                 margin: 0;
                 padding: 20px;
-              "
+              ">
-            >
+            <table width="100%" style="
-              <table
-                width="100%"
-                style="
                   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                   box-sizing: border-box;
                   font-size: 14px;
                   margin: 0;
-                "
+                ">
-              >
+              <tr style="
-                <tr
-                  style="
                     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                     box-sizing: border-box;
                     font-size: 14px;
                     margin: 0;
-                  "
+                  ">
-                >
+                <td class="aligncenter content-block" style="
-                  <td
-                    class="aligncenter content-block"
-                    style="
                       font-family: 'Helvetica Neue', Helvetica, Arial,
                         sans-serif;
                       box-sizing: border-box;
@@ -448,14 +355,9 @@
                       text-align: center;
                       margin: 0;
                       padding: 0 0 20px;
-                    "
+                    " align="center" valign="top">
-                    align="center"
+                  Questions? Come ask in
-                    valign="top"
+                  <a href="https://discord.gg/eHQBNBqXuh" style="
-                  >
-                    Questions? Come ask in
-                    <a
-                      href="https://discord.gg/eHQBNBqXuh"
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
@@ -463,12 +365,8 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      "
+                      ">our Discord</a>! Or,
-                      >our Discord</a
+                  <a href="{{unsubscribeUrl}}" style="
-                    >! Or,
-                    <a
-                      href="{{unsubscribeUrl}}"
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
@@ -476,26 +374,22 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      "
+                      ">unsubscribe</a>.
-                      >unsubscribe</a
+                </td>
-                    >.
+              </tr>
-                  </td>
+            </table>
-                </tr>
-              </table>
-            </div>
           </div>
-        </td>
+        </div>
-        <td
+      </td>
-          style="
+      <td style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
             vertical-align: top;
             margin: 0;
-          "
+          " valign="top"></td>
-          valign="top"
+    </tr>
-        ></td>
+  </table>
-      </tr>
+</body>
-    </table>
+
-  </body>
 </html>

functions/src/email-templates/market-resolved.html

@@ -1,84 +1,91 @@
 <!DOCTYPE html>
-<html
+<html style="
-  style="
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     box-sizing: border-box;
     font-size: 14px;
     margin: 0;
-  "
+  ">
->
-  <head>
-    <meta name="viewport" content="width=device-width" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <title>Market resolved</title>
 
-    <style type="text/css">
+<head>
-      img {
+  <meta name="viewport" content="width=device-width" />
-        max-width: 100%;
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>Market resolved</title>
+
+  <style type="text/css">
+    img {
+      max-width: 100%;
+    }
+
+    body {
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: none;
+      width: 100% !important;
+      height: 100%;
+      line-height: 1.6em;
+    }
+
+    body {
+      background-color: #f6f6f6;
+    }
+
+    @media only screen and (max-width: 640px) {
+      body {
+        padding: 0 !important;
       }
 
-      body {
+      h1 {
-        -webkit-font-smoothing: antialiased;
+        font-weight: 800 !important;
-        -webkit-text-size-adjust: none;
+        margin: 20px 0 5px !important;
+      }
+
+      h2 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h3 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h4 {
+        font-weight: 800 !important;
+        margin: 20px 0 5px !important;
+      }
+
+      h1 {
+        font-size: 22px !important;
+      }
+
+      h2 {
+        font-size: 18px !important;
+      }
+
+      h3 {
+        font-size: 16px !important;
+      }
+
+      .container {
+        padding: 0 !important;
         width: 100% !important;
-        height: 100%;
-        line-height: 1.6em;
       }
 
-      body {
+      .content {
-        background-color: #f6f6f6;
+        padding: 0 !important;
       }
 
-      @media only screen and (max-width: 640px) {
+      .content-wrap {
-        body {
+        padding: 10px !important;
-          padding: 0 !important;
-        }
-        h1 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h2 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h3 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h4 {
-          font-weight: 800 !important;
-          margin: 20px 0 5px !important;
-        }
-        h1 {
-          font-size: 22px !important;
-        }
-        h2 {
-          font-size: 18px !important;
-        }
-        h3 {
-          font-size: 16px !important;
-        }
-        .container {
-          padding: 0 !important;
-          width: 100% !important;
-        }
-        .content {
-          padding: 0 !important;
-        }
-        .content-wrap {
-          padding: 10px !important;
-        }
-        .invoice {
-          width: 100% !important;
-        }
       }
-    </style>
-  </head>
 
-  <body
+      .invoice {
-    itemscope
+        width: 100% !important;
-    itemtype="http://schema.org/EmailMessage"
+      }
-    style="
+    }
+  </style>
+</head>
+
+<body itemscope itemtype="http://schema.org/EmailMessage" style="
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       box-sizing: border-box;
       font-size: 14px;
@@ -89,43 +96,29 @@
       line-height: 1.6em;
       background-color: #f6f6f6;
       margin: 0;
-    "
+    " bgcolor="#f6f6f6">
-    bgcolor="#f6f6f6"
+  <table class="body-wrap" style="
-  >
-    <table
-      class="body-wrap"
-      style="
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         box-sizing: border-box;
         font-size: 14px;
         width: 100%;
         background-color: #f6f6f6;
         margin: 0;
-      "
+      " bgcolor="#f6f6f6">
-      bgcolor="#f6f6f6"
+    <tr style="
-    >
-      <tr
-        style="
           font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
           box-sizing: border-box;
           font-size: 14px;
           margin: 0;
-        "
+        ">
-      >
+      <td style="
-        <td
-          style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
             vertical-align: top;
             margin: 0;
-          "
+          " valign="top"></td>
-          valign="top"
+      <td class="container" width="600" style="
-        ></td>
-        <td
-          class="container"
-          width="600"
-          style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
@@ -134,12 +127,8 @@
             max-width: 600px !important;
             clear: both !important;
             margin: 0 auto;
-          "
+          " valign="top">
-          valign="top"
+        <div class="content" style="
-        >
-          <div
-            class="content"
-            style="
               font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
               box-sizing: border-box;
               font-size: 14px;
@@ -147,14 +136,8 @@
               display: block;
               margin: 0 auto;
               padding: 20px;
-            "
+            ">
-          >
+          <table class="main" width="100%" cellpadding="0" cellspacing="0" style="
-            <table
-              class="main"
-              width="100%"
-              cellpadding="0"
-              cellspacing="0"
-              style="
                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 box-sizing: border-box;
                 font-size: 14px;
@@ -162,20 +145,14 @@
                 background-color: #fff;
                 margin: 0;
                 border: 1px solid #e9e9e9;
-              "
+              " bgcolor="#fff">
-              bgcolor="#fff"
+            <tr style="
-            >
-              <tr
-                style="
                   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                   box-sizing: border-box;
                   font-size: 14px;
                   margin: 0;
-                "
+                ">
-              >
+              <td class="content-wrap aligncenter" style="
-                <td
-                  class="content-wrap aligncenter"
-                  style="
                     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                     box-sizing: border-box;
                     font-size: 14px;
@@ -183,35 +160,23 @@
                     text-align: center;
                     margin: 0;
                     padding: 20px;
-                  "
+                  " align="center" valign="top">
-                  align="center"
+                <table width="100%" cellpadding="0" cellspacing="0" style="
-                  valign="top"
-                >
-                  <table
-                    width="100%"
-                    cellpadding="0"
-                    cellspacing="0"
-                    style="
                       font-family: 'Helvetica Neue', Helvetica, Arial,
                         sans-serif;
                       box-sizing: border-box;
                       font-size: 14px;
                       margin: 0;
                       width: 90%;
-                    "
+                    ">
-                  >
+                  <tr style="
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -220,30 +185,22 @@
                           margin: 0;
                           padding: 0 0 40px 0;
                           text-align: left;
-                        "
+                        " valign="top">
-                        valign="top"
+                      <a href="https://manifold.markets" target="_blank">
-                      >
+                        <img src="https://manifold.markets/logo-banner.png" width="300" style="height: auto"
-                        <img
+                          alt="Manifold Markets" />
-                          src="https://manifold.markets/logo-banner.png"
+                      </a>
-                          width="300"
+                    </td>
-                          style="height: auto"
+                  </tr>
-                          alt="Manifold Markets"
+                  <tr style="
-                        />
-                      </td>
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
                         padding: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -252,24 +209,18 @@
                           margin: 0;
                           padding: 0 0 6px 0;
                           text-align: left;
-                        "
+                        " valign="top">
-                        valign="top"
+                      {{creatorName}} asked
-                      >
+                    </td>
-                        {{creatorName}} asked
+                  </tr>
-                      </td>
+                  <tr style="
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -277,12 +228,8 @@
                           vertical-align: top;
                           margin: 0;
                           padding: 0 0 20px;
-                        "
+                        " valign="top">
-                        valign="top"
+                      <a href="{{url}}" style="
-                      >
-                        <a
-                          href="{{url}}"
-                          style="
                             font-family: 'Helvetica Neue', Helvetica, Arial,
                               'Lucida Grande', sans-serif;
                             box-sizing: border-box;
@@ -295,24 +242,18 @@
                             color: #4337c9;
                             display: block;
                             text-decoration: none;
-                          "
+                          ">
-                        >
+                        {{question}}</a>
-                          {{question}}</a
+                    </td>
-                        >
+                  </tr>
-                      </td>
+                  <tr style="
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 14px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block" style="
-                      <td
-                        class="content-block"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -320,12 +261,8 @@
                           vertical-align: top;
                           margin: 0;
                           padding: 0 0 0px;
-                        "
+                        " valign="top">
-                        valign="top"
+                      <h2 class="aligncenter" style="
-                      >
-                        <h2
-                          class="aligncenter"
-                          style="
                             font-family: 'Helvetica Neue', Helvetica, Arial,
                               'Lucida Grande', sans-serif;
                             box-sizing: border-box;
@@ -335,25 +272,19 @@
                             font-weight: 500;
                             text-align: center;
                             margin: 10px 0 0;
-                          "
+                          " align="center">
-                          align="center"
+                        Resolved {{outcome}}
-                        >
+                      </h2>
-                          Resolved {{outcome}}
+                    </td>
-                        </h2>
+                  </tr>
-                      </td>
+                  <tr style="
-                    </tr>
-                    <tr
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
                         font-size: 16px;
                         margin: 0;
-                      "
+                      ">
-                    >
+                    <td class="content-block aligncenter" style="
-                      <td
-                        class="content-block aligncenter"
-                        style="
                           font-family: 'Helvetica Neue', Helvetica, Arial,
                             sans-serif;
                           box-sizing: border-box;
@@ -362,13 +293,8 @@
                           text-align: center;
                           margin: 0;
                           padding: 0;
-                        "
+                        " align="center" valign="top">
-                        align="center"
+                      <table class="invoice" style="
-                        valign="top"
-                      >
-                        <table
-                          class="invoice"
-                          style="
                             font-family: 'Helvetica Neue', Helvetica, Arial,
                               sans-serif;
                             box-sizing: border-box;
@@ -376,19 +302,15 @@
                             text-align: left;
                             width: 80%;
                             margin: 40px auto;
-                          "
+                          ">
-                        >
+                        <tr style="
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="
-                            <td
-                              style="
                                 font-family: 'Helvetica Neue', Helvetica, Arial,
                                   sans-serif;
                                 box-sizing: border-box;
@@ -396,138 +318,105 @@
                                 vertical-align: top;
                                 margin: 0;
                                 padding: 5px 0;
-                              "
+                              " valign="top">
-                              valign="top"
+                            Dear {{name}},
-                            >
+                            <br style="
-                              Dear {{name}},
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            A market you bet in has been resolved!
-                              A market you bet in has been resolved!
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            Your investment was
-                              Your investment was
+                            <span style="font-weight: bold">{{investment}}</span>.
-                              <span style="font-weight: bold"
+                            <br style="
-                                >M$ {{investment}}</span
-                              >.
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            Your payout is
-                              Your payout is
+                            <span style="font-weight: bold">{{payout}}</span>.
-                              <span style="font-weight: bold"
+                            <br style="
-                                >M$ {{payout}}</span
-                              >.
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            Thanks,
-                              Thanks,
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            Manifold Team
-                              Manifold Team
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                            <br style="
-                              <br
-                                style="
                                   font-family: 'Helvetica Neue', Helvetica,
                                     Arial, sans-serif;
                                   box-sizing: border-box;
                                   font-size: 16px;
                                   margin: 0;
-                                "
+                                " />
-                              />
+                          </td>
-                            </td>
+                        </tr>
-                          </tr>
+                        <tr style="
-                          <tr
-                            style="
                               font-family: 'Helvetica Neue', Helvetica, Arial,
                                 sans-serif;
                               box-sizing: border-box;
                               font-size: 16px;
                               margin: 0;
-                            "
+                            ">
-                          >
+                          <td style="padding: 10px 0 0 0; margin: 0">
-                            <td style="padding: 10px 0 0 0; margin: 0">
+                            <div align="center">
-                              <div align="center">
+                              <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:37px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
-                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:37px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
+                              <a href="{{url}}" target="_blank" style="
-                                <a
-                                  href="{{url}}"
-                                  target="_blank"
-                                  style="
                                     box-sizing: border-box;
                                     display: inline-block;
                                     font-family: arial, helvetica, sans-serif;
@@ -545,38 +434,29 @@
                                     word-break: break-word;
                                     word-wrap: break-word;
                                     mso-border-alt: none;
-                                  "
+                                  ">
-                                >
+                                <span style="
-                                  <span
-                                    style="
                                       display: block;
                                       padding: 10px 20px;
                                       line-height: 120%;
-                                    "
+                                    "><span style="
-                                    ><span
-                                      style="
                                         font-size: 16px;
                                         font-weight: bold;
                                         line-height: 18.8px;
-                                      "
+                                      ">View market</span></span>
-                                      >View market</span
+                              </a>
-                                    ></span
+                              <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
-                                  >
+                            </div>
-                                </a>
+                          </td>
-                                <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
+                        </tr>
-                              </div>
+                      </table>
-                            </td>
+                    </td>
-                          </tr>
+                  </tr>
-                        </table>
+                </table>
-                      </td>
+              </td>
-                    </tr>
+            </tr>
-                  </table>
+          </table>
-                </td>
+          <div class="footer" style="
-              </tr>
-            </table>
-            <div
-              class="footer"
-              style="
                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 box-sizing: border-box;
                 font-size: 14px;
@@ -585,28 +465,20 @@
                 color: #999;
                 margin: 0;
                 padding: 20px;
-              "
+              ">
-            >
+            <table width="100%" style="
-              <table
-                width="100%"
-                style="
                   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                   box-sizing: border-box;
                   font-size: 14px;
                   margin: 0;
-                "
+                ">
-              >
+              <tr style="
-                <tr
-                  style="
                     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                     box-sizing: border-box;
                     font-size: 14px;
                     margin: 0;
-                  "
+                  ">
-                >
+                <td class="aligncenter content-block" style="
-                  <td
-                    class="aligncenter content-block"
-                    style="
                       font-family: 'Helvetica Neue', Helvetica, Arial,
                         sans-serif;
                       box-sizing: border-box;
@@ -616,14 +488,9 @@
                       text-align: center;
                       margin: 0;
                       padding: 0 0 20px;
-                    "
+                    " align="center" valign="top">
-                    align="center"
+                  Questions? Come ask in
-                    valign="top"
+                  <a href="https://discord.gg/eHQBNBqXuh" style="
-                  >
-                    Questions? Come ask in
-                    <a
-                      href="https://discord.gg/eHQBNBqXuh"
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
@@ -631,12 +498,8 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      "
+                      ">our Discord</a>! Or,
-                      >our Discord</a
+                  <a href="{{unsubscribeUrl}}" style="
-                    >! Or,
-                    <a
-                      href="{{unsubscribeUrl}}"
-                      style="
                         font-family: 'Helvetica Neue', Helvetica, Arial,
                           sans-serif;
                         box-sizing: border-box;
@@ -644,26 +507,22 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      "
+                      ">unsubscribe</a>.
-                      >unsubscribe</a
+                </td>
-                    >.
+              </tr>
-                  </td>
+            </table>
-                </tr>
-              </table>
-            </div>
           </div>
-        </td>
+        </div>
-        <td
+      </td>
-          style="
+      <td style="
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             box-sizing: border-box;
             font-size: 14px;
             vertical-align: top;
             margin: 0;
-          "
+          " valign="top"></td>
-          valign="top"
+    </tr>
-        ></td>
+  </table>
-      </tr>
+</body>
-    </table>
+
-  </body>
 </html>

functions/src/emails.ts

@@ -4,7 +4,6 @@ import { Bet } from '../../common/bet'
 import { getProbability } from '../../common/calculate'
 import { Comment } from '../../common/comment'
 import { Contract } from '../../common/contract'
-import { DPM_CREATOR_FEE } from '../../common/fees'
 import { PrivateUser, User } from '../../common/user'
 import {
   formatLargeNumber,
@@ -53,22 +52,29 @@ export const sendMarketResolutionEmail = async (
 
   const subject = `Resolved ${outcome}: ${contract.question}`
 
-  // const creatorPayoutText =
+  const creatorPayoutText =
-  //   userId === creator.id
+    creatorPayout >= 1 && userId === creator.id
-  //     ? ` (plus ${formatMoney(creatorPayout)} in commissions)`
+      ? ` (plus ${formatMoney(creatorPayout)} in commissions)`
-  //     : ''
+      : ''
 
   const emailType = 'market-resolved'
   const unsubscribeUrl = `${UNSUBSCRIBE_ENDPOINT}?id=${userId}&type=${emailType}`
 
+  const displayedInvestment =
+    Number.isNaN(investment) || investment < 0
+      ? formatMoney(0)
+      : formatMoney(investment)
+
+  const displayedPayout = formatMoney(payout)
+
   const templateData: market_resolved_template = {
     userId: user.id,
     name: user.name,
     creatorName: creator.name,
     question: contract.question,
     outcome,
-    investment: `${Math.floor(investment)}`,
+    investment: displayedInvestment,
-    payout: `${Math.floor(payout)}`,
+    payout: displayedPayout + creatorPayoutText,
     url: `https://${DOMAIN}/${creator.username}/${contract.slug}`,
     unsubscribeUrl,
   }
@@ -180,7 +186,7 @@ export const sendPersonalFollowupEmail = async (
 
   const emailBody = `Hi ${firstName},
 
-Thanks for signing up! I'm one of the cofounders of Manifold Markets, and was wondering how you've found your exprience on the platform so far?
+Thanks for signing up! I'm one of the cofounders of Manifold Markets, and was wondering how you've found your experience on the platform so far?
 
 If you haven't already, I encourage you to try creating your own prediction market (https://manifold.markets/create) and joining our Discord chat (https://discord.com/invite/eHQBNBqXuh).
 
@@ -315,7 +321,7 @@ export const sendMarketCloseEmail = async (
   const { username, name, id: userId } = user
   const firstName = name.split(' ')[0]
 
-  const { question, slug, volume, mechanism, collectedFees } = contract
+  const { question, slug, volume } = contract
 
   const url = `https://${DOMAIN}/${username}/${slug}`
   const emailType = 'market-resolve'
@@ -332,10 +338,6 @@ export const sendMarketCloseEmail = async (
       userId,
       name: firstName,
       volume: formatMoney(volume),
-      creatorFee:
-        mechanism === 'dpm-2'
-          ? `${DPM_CREATOR_FEE * 100}% of the profits`
-          : formatMoney(collectedFees.creatorFee),
     }
   )
 }

functions/src/get-custom-token.ts

@@ -1,33 +0,0 @@
-import * as admin from 'firebase-admin'
-import {
-  APIError,
-  EndpointDefinition,
-  lookupUser,
-  parseCredentials,
-  writeResponseError,
-} from './api'
-
-const opts = {
-  method: 'GET',
-  minInstances: 1,
-  concurrency: 100,
-  memory: '2GiB',
-  cpu: 1,
-} as const
-
-export const getcustomtoken: EndpointDefinition = {
-  opts,
-  handler: async (req, res) => {
-    try {
-      const credentials = await parseCredentials(req)
-      if (credentials.kind != 'jwt') {
-        throw new APIError(403, 'API keys cannot mint custom tokens.')
-      }
-      const user = await lookupUser(credentials)
-      const token = await admin.auth().createCustomToken(user.uid)
-      res.status(200).json({ token: token })
-    } catch (e) {
-      writeResponseError(e, res)
-    }
-  },
-}

functions/src/index.ts

@@ -21,9 +21,7 @@ export * from './on-follow-user'
 export * from './on-unfollow-user'
 export * from './on-create-liquidity-provision'
 export * from './on-update-group'
-export * from './on-create-group'
 export * from './on-update-user'
-export * from './on-create-comment-on-group'
 export * from './on-create-txn'
 export * from './on-delete-group'
 export * from './score-contracts'
@@ -31,6 +29,7 @@ export * from './weekly-markets-emails'
 export * from './reset-betting-streaks'
 export * from './reset-weekly-emails-flag'
 export * from './on-update-contract-follow'
+export * from './on-update-like'
 
 // v2
 export * from './health'
@@ -71,7 +70,7 @@ import { unsubscribe } from './unsubscribe'
 import { stripewebhook, createcheckoutsession } from './stripe'
 import { getcurrentuser } from './get-current-user'
 import { acceptchallenge } from './accept-challenge'
-import { getcustomtoken } from './get-custom-token'
+import { createpost } from './create-post'
 
 const toCloudFunction = ({ opts, handler }: EndpointDefinition) => {
   return onRequest(opts, handler as any)
@@ -96,7 +95,7 @@ const stripeWebhookFunction = toCloudFunction(stripewebhook)
 const createCheckoutSessionFunction = toCloudFunction(createcheckoutsession)
 const getCurrentUserFunction = toCloudFunction(getcurrentuser)
 const acceptChallenge = toCloudFunction(acceptchallenge)
-const getCustomTokenFunction = toCloudFunction(getcustomtoken)
+const createPostFunction = toCloudFunction(createpost)
 
 export {
   healthFunction as health,
@@ -119,5 +118,5 @@ export {
   createCheckoutSessionFunction as createcheckoutsession,
   getCurrentUserFunction as getcurrentuser,
   acceptChallenge as acceptchallenge,
-  getCustomTokenFunction as getcustomtoken,
+  createPostFunction as createpost,
 }

functions/src/on-create-bet.ts

@@ -7,7 +7,7 @@ import { getUser, getValues, isProd, log } from './utils'
 import {
   createBetFillNotification,
   createBettingStreakBonusNotification,
-  createNotification,
+  createUniqueBettorBonusNotification,
 } from './create-notification'
 import { filterDefined } from '../../common/util/array'
 import { Contract } from '../../common/contract'
@@ -54,11 +54,11 @@ export const onCreateBet = functions.firestore
       log(`Could not find contract ${contractId}`)
       return
     }
-    await updateUniqueBettorsAndGiveCreatorBonus(contract, eventId, bet.userId)
 
     const bettor = await getUser(bet.userId)
     if (!bettor) return
 
+    await updateUniqueBettorsAndGiveCreatorBonus(contract, eventId, bettor)
     await notifyFills(bet, contract, eventId, bettor)
     await updateBettingStreak(bettor, bet, contract, eventId)
 
@@ -126,7 +126,7 @@ const updateBettingStreak = async (
 const updateUniqueBettorsAndGiveCreatorBonus = async (
   contract: Contract,
   eventId: string,
-  bettorId: string
+  bettor: User
 ) => {
   let previousUniqueBettorIds = contract.uniqueBettorIds
 
@@ -147,13 +147,13 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
     )
   }
 
-  const isNewUniqueBettor = !previousUniqueBettorIds.includes(bettorId)
+  const isNewUniqueBettor = !previousUniqueBettorIds.includes(bettor.id)
 
-  const newUniqueBettorIds = uniq([...previousUniqueBettorIds, bettorId])
+  const newUniqueBettorIds = uniq([...previousUniqueBettorIds, bettor.id])
   // Update contract unique bettors
   if (!contract.uniqueBettorIds || isNewUniqueBettor) {
     log(`Got ${previousUniqueBettorIds} unique bettors`)
-    isNewUniqueBettor && log(`And a new unique bettor ${bettorId}`)
+    isNewUniqueBettor && log(`And a new unique bettor ${bettor.id}`)
     await firestore.collection(`contracts`).doc(contract.id).update({
       uniqueBettorIds: newUniqueBettorIds,
       uniqueBettorCount: newUniqueBettorIds.length,
@@ -161,7 +161,7 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
   }
 
   // No need to give a bonus for the creator's bet
-  if (!isNewUniqueBettor || bettorId == contract.creatorId) return
+  if (!isNewUniqueBettor || bettor.id == contract.creatorId) return
 
   // Create combined txn for all new unique bettors
   const bonusTxnDetails = {
@@ -192,18 +192,13 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
     log(`No bonus for user: ${contract.creatorId} - reason:`, result.status)
   } else {
     log(`Bonus txn for user: ${contract.creatorId} completed:`, result.txn?.id)
-    await createNotification(
+    await createUniqueBettorBonusNotification(
+      contract.creatorId,
+      bettor,
       result.txn.id,
-      'bonus',
+      contract,
-      'created',
+      result.txn.amount,
-      fromUser,
+      eventId + '-unique-bettor-bonus'
-      eventId + '-bonus',
-      result.txn.amount + '',
-      {
-        contract,
-        slug: contract.slug,
-        title: contract.question,
-      }
     )
   }
 }

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

@@ -6,7 +6,10 @@ import { ContractComment } from '../../common/comment'
 import { sendNewCommentEmail } from './emails'
 import { Bet } from '../../common/bet'
 import { Answer } from '../../common/answer'
-import { createCommentOrAnswerOrUpdatedContractNotification } from './create-notification'
+import {
+  createCommentOrAnswerOrUpdatedContractNotification,
+  filterUserIdsForOnlyFollowerIds,
+} from './create-notification'
 import { parseMentions, richTextToString } from '../../common/util/parse'
 import { addUserToContractFollowers } from './follow-market'
 
@@ -60,11 +63,15 @@ export const onCreateCommentOnContract = functions
         .doc(comment.betId)
         .get()
       bet = betSnapshot.data() as Bet
-
       answer =
         contract.outcomeType === 'FREE_RESPONSE' && contract.answers
           ? contract.answers.find((answer) => answer.id === bet?.outcome)
           : undefined
+
+      await change.ref.update({
+        betOutcome: bet.outcome,
+        betAmount: bet.amount,
+      })
     }
 
     const comments = await getValues<ContractComment>(
@@ -95,10 +102,13 @@ export const onCreateCommentOnContract = functions
       }
     )
 
-    const recipientUserIds = uniq([
+    const recipientUserIds = await filterUserIdsForOnlyFollowerIds(
-      contract.creatorId,
+      uniq([
-      ...comments.map((comment) => comment.userId),
+        contract.creatorId,
-    ]).filter((id) => id !== comment.userId)
+        ...comments.map((comment) => comment.userId),
+      ]).filter((id) => id !== comment.userId),
+      contractId
+    )
 
     await Promise.all(
       recipientUserIds.map((userId) =>

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

@@ -1,46 +0,0 @@
-import * as functions from 'firebase-functions'
-import { GroupComment } from '../../common/comment'
-import * as admin from 'firebase-admin'
-import { Group } from '../../common/group'
-import { User } from '../../common/user'
-import { createGroupCommentNotification } from './create-notification'
-const firestore = admin.firestore()
-
-export const onCreateCommentOnGroup = functions.firestore
-  .document('groups/{groupId}/comments/{commentId}')
-  .onCreate(async (change, context) => {
-    const { eventId } = context
-    const { groupId } = context.params as {
-      groupId: string
-    }
-
-    const comment = change.data() as GroupComment
-    const creatorSnapshot = await firestore
-      .collection('users')
-      .doc(comment.userId)
-      .get()
-    if (!creatorSnapshot.exists) throw new Error('Could not find user')
-
-    const groupSnapshot = await firestore
-      .collection('groups')
-      .doc(groupId)
-      .get()
-    if (!groupSnapshot.exists) throw new Error('Could not find group')
-
-    const group = groupSnapshot.data() as Group
-    await firestore.collection('groups').doc(groupId).update({
-      mostRecentChatActivityTime: comment.createdTime,
-    })
-
-    await Promise.all(
-      group.memberIds.map(async (memberId) => {
-        return await createGroupCommentNotification(
-          creatorSnapshot.data() as User,
-          memberId,
-          comment,
-          group,
-          eventId
-        )
-      })
-    )
-  })

functions/src/on-create-group.ts

@@ -1,28 +0,0 @@
-import * as functions from 'firebase-functions'
-import { getUser } from './utils'
-import { createNotification } from './create-notification'
-import { Group } from '../../common/group'
-
-export const onCreateGroup = functions.firestore
-  .document('groups/{groupId}')
-  .onCreate(async (change, context) => {
-    const group = change.data() as Group
-    const { eventId } = context
-
-    const groupCreator = await getUser(group.creatorId)
-    if (!groupCreator) throw new Error('Could not find group creator')
-    // create notifications for all members of the group
-    await createNotification(
-      group.id,
-      'group',
-      'created',
-      groupCreator,
-      eventId,
-      group.about,
-      {
-        recipients: group.memberIds,
-        slug: group.slug,
-        title: group.name,
-      }
-    )
-  })

functions/src/on-update-contract-follow.ts

@@ -2,6 +2,7 @@ import * as functions from 'firebase-functions'
 import * as admin from 'firebase-admin'
 import { FieldValue } from 'firebase-admin/firestore'
 
+// TODO: should cache the follower user ids in the contract as these triggers aren't idempotent
 export const onDeleteContractFollow = functions.firestore
   .document('contracts/{contractId}/follows/{userId}')
   .onDelete(async (change, context) => {

functions/src/on-update-group.ts

@@ -15,21 +15,68 @@ export const onUpdateGroup = functions.firestore
     if (prevGroup.mostRecentActivityTime !== group.mostRecentActivityTime)
       return
 
-    if (prevGroup.contractIds.length < group.contractIds.length) {
-      await firestore
-        .collection('groups')
-        .doc(group.id)
-        .update({ mostRecentContractAddedTime: Date.now() })
-      //TODO: create notification with isSeeOnHref set to the group's /group/slug/questions url
-      // but first, let the new /group/slug/chat notification permeate so that we can differentiate between the two
-    }
-
     await firestore
       .collection('groups')
       .doc(group.id)
       .update({ mostRecentActivityTime: Date.now() })
   })
 
+export const onCreateGroupContract = functions.firestore
+  .document('groups/{groupId}/groupContracts/{contractId}')
+  .onCreate(async (change) => {
+    const groupId = change.ref.parent.parent?.id
+    if (groupId)
+      await firestore
+        .collection('groups')
+        .doc(groupId)
+        .update({
+          mostRecentContractAddedTime: Date.now(),
+          totalContracts: admin.firestore.FieldValue.increment(1),
+        })
+  })
+
+export const onDeleteGroupContract = functions.firestore
+  .document('groups/{groupId}/groupContracts/{contractId}')
+  .onDelete(async (change) => {
+    const groupId = change.ref.parent.parent?.id
+    if (groupId)
+      await firestore
+        .collection('groups')
+        .doc(groupId)
+        .update({
+          mostRecentContractAddedTime: Date.now(),
+          totalContracts: admin.firestore.FieldValue.increment(-1),
+        })
+  })
+
+export const onCreateGroupMember = functions.firestore
+  .document('groups/{groupId}/groupMembers/{memberId}')
+  .onCreate(async (change) => {
+    const groupId = change.ref.parent.parent?.id
+    if (groupId)
+      await firestore
+        .collection('groups')
+        .doc(groupId)
+        .update({
+          mostRecentActivityTime: Date.now(),
+          totalMembers: admin.firestore.FieldValue.increment(1),
+        })
+  })
+
+export const onDeleteGroupMember = functions.firestore
+  .document('groups/{groupId}/groupMembers/{memberId}')
+  .onDelete(async (change) => {
+    const groupId = change.ref.parent.parent?.id
+    if (groupId)
+      await firestore
+        .collection('groups')
+        .doc(groupId)
+        .update({
+          mostRecentActivityTime: Date.now(),
+          totalMembers: admin.firestore.FieldValue.increment(-1),
+        })
+  })
+
 export async function removeGroupLinks(group: Group, contractIds: string[]) {
   for (const contractId of contractIds) {
     const contract = await getContract(contractId)

functions/src/on-update-like.ts

@@ -0,0 +1,109 @@
+import * as functions from 'firebase-functions'
+import * as admin from 'firebase-admin'
+import { Like } from '../../common/like'
+import { getContract, getUser, log } from './utils'
+import { createLikeNotification } from './create-notification'
+import { TipTxn } from '../../common/txn'
+import { uniq } from 'lodash'
+
+const firestore = admin.firestore()
+
+export const onCreateLike = functions.firestore
+  .document('users/{userId}/likes/{likeId}')
+  .onCreate(async (change, context) => {
+    const like = change.data() as Like
+    const { eventId } = context
+    if (like.type === 'contract') {
+      await handleCreateLikeNotification(like, eventId)
+      await updateContractLikes(like)
+    }
+  })
+
+export const onUpdateLike = functions.firestore
+  .document('users/{userId}/likes/{likeId}')
+  .onUpdate(async (change, context) => {
+    const like = change.after.data() as Like
+    const prevLike = change.before.data() as Like
+    const { eventId } = context
+    if (like.type === 'contract' && like.tipTxnId !== prevLike.tipTxnId) {
+      await handleCreateLikeNotification(like, eventId)
+      await updateContractLikes(like)
+    }
+  })
+
+export const onDeleteLike = functions.firestore
+  .document('users/{userId}/likes/{likeId}')
+  .onDelete(async (change) => {
+    const like = change.data() as Like
+    if (like.type === 'contract') {
+      await removeContractLike(like)
+    }
+  })
+
+const updateContractLikes = async (like: Like) => {
+  const contract = await getContract(like.id)
+  if (!contract) {
+    log('Could not find contract')
+    return
+  }
+  const likedByUserIds = uniq(
+    (contract.likedByUserIds ?? []).concat(like.userId)
+  )
+  await firestore
+    .collection('contracts')
+    .doc(like.id)
+    .update({ likedByUserIds, likedByUserCount: likedByUserIds.length })
+}
+
+const handleCreateLikeNotification = async (like: Like, eventId: string) => {
+  const contract = await getContract(like.id)
+  if (!contract) {
+    log('Could not find contract')
+    return
+  }
+  const contractCreator = await getUser(contract.creatorId)
+  if (!contractCreator) {
+    log('Could not find contract creator')
+    return
+  }
+  const liker = await getUser(like.userId)
+  if (!liker) {
+    log('Could not find liker')
+    return
+  }
+  let tipTxnData = undefined
+
+  if (like.tipTxnId) {
+    const tipTxn = await firestore.collection('txns').doc(like.tipTxnId).get()
+    if (!tipTxn.exists) {
+      log('Could not find tip txn')
+      return
+    }
+    tipTxnData = tipTxn.data() as TipTxn
+  }
+
+  await createLikeNotification(
+    liker,
+    contractCreator,
+    like,
+    eventId,
+    contract,
+    tipTxnData
+  )
+}
+
+const removeContractLike = async (like: Like) => {
+  const contract = await getContract(like.id)
+  if (!contract) {
+    log('Could not find contract')
+    return
+  }
+  const likedByUserIds = uniq(contract.likedByUserIds ?? [])
+  const newLikedByUserIds = likedByUserIds.filter(
+    (userId) => userId !== like.userId
+  )
+  await firestore.collection('contracts').doc(like.id).update({
+    likedByUserIds: newLikedByUserIds,
+    likedByUserCount: newLikedByUserIds.length,
+  })
+}

functions/src/place-bet.ts

@@ -135,7 +135,7 @@ export const placebet = newEndpoint({}, async (req, auth) => {
         !isFinite(newP) ||
         Math.min(...Object.values(newPool ?? {})) < CPMM_MIN_POOL_QTY)
     ) {
-      throw new APIError(400, 'Bet too large for current liquidity pool.')
+      throw new APIError(400, 'Trade too large for current liquidity pool.')
     }
 
     const betDoc = contractDoc.collection('bets').doc()

functions/src/redeem-shares.ts

@@ -5,6 +5,7 @@ import { getRedeemableAmount, getRedemptionBets } from '../../common/redeem'
 
 import { Contract } from '../../common/contract'
 import { User } from '../../common/user'
+import { floatingEqual } from '../../common/util/math'
 
 export const redeemShares = async (userId: string, contractId: string) => {
   return await firestore.runTransaction(async (trans) => {
@@ -21,7 +22,7 @@ export const redeemShares = async (userId: string, contractId: string) => {
     const betsSnap = await trans.get(betsColl.where('userId', '==', userId))
     const bets = betsSnap.docs.map((doc) => doc.data() as Bet)
     const { shares, loanPayment, netAmount } = getRedeemableAmount(bets)
-    if (netAmount === 0) {
+    if (floatingEqual(netAmount, 0)) {
       return { status: 'success' }
     }
     const [yesBet, noBet] = getRedemptionBets(shares, loanPayment, contract)

functions/src/reset-betting-streaks.ts

@@ -15,7 +15,10 @@ export const resetBettingStreaksForUsers = functions.pubsub
   })
 
 const resetBettingStreaksInternal = async () => {
-  const usersSnap = await firestore.collection('users').get()
+  const usersSnap = await firestore
+    .collection('users')
+    .where('currentBettingStreak', '>', 0)
+    .get()
 
   const users = usersSnap.docs.map((doc) => doc.data() as User)
 
@@ -28,7 +31,7 @@ const resetBettingStreakForUser = async (user: User) => {
   const betStreakResetTime = Date.now() - DAY_MS
   // if they made a bet within the last day, don't reset their streak
   if (
-    (user.lastBetTime ?? 0 > betStreakResetTime) ||
+    (user?.lastBetTime ?? 0) > betStreakResetTime ||
     !user.currentBettingStreak ||
     user.currentBettingStreak === 0
   )

functions/src/scripts/backfill-unique-bettors.ts

@@ -0,0 +1,39 @@
+import * as admin from 'firebase-admin'
+import { initAdmin } from './script-init'
+import { getValues, log, writeAsync } from '../utils'
+import { Bet } from '../../../common/bet'
+import { groupBy, mapValues, sortBy, uniq } from 'lodash'
+
+initAdmin()
+const firestore = admin.firestore()
+
+const getBettorsByContractId = async () => {
+  const bets = await getValues<Bet>(firestore.collectionGroup('bets'))
+  log(`Loaded ${bets.length} bets.`)
+  const betsByContractId = groupBy(bets, 'contractId')
+  return mapValues(betsByContractId, (bets) =>
+    uniq(sortBy(bets, 'createdTime').map((bet) => bet.userId))
+  )
+}
+
+const updateUniqueBettors = async () => {
+  const bettorsByContractId = await getBettorsByContractId()
+
+  const updates = Object.entries(bettorsByContractId).map(
+    ([contractId, userIds]) => {
+      const update = {
+        uniqueBettorIds: userIds,
+        uniqueBettorCount: userIds.length,
+      }
+      const docRef = firestore.collection('contracts').doc(contractId)
+      return { doc: docRef, fields: update }
+    }
+  )
+  log(`Updating ${updates.length} contracts.`)
+  await writeAsync(firestore, updates)
+  log(`Updated all contracts.`)
+}
+
+if (require.main === module) {
+  updateUniqueBettors()
+}

functions/src/scripts/convert-categories.ts

@@ -1,108 +0,0 @@
-import * as admin from 'firebase-admin'
-
-import { initAdmin } from './script-init'
-import { getValues, isProd } from '../utils'
-import { CATEGORIES_GROUP_SLUG_POSTFIX } from 'common/categories'
-import { Group, GroupLink } from 'common/group'
-import { uniq } from 'lodash'
-import { Contract } from 'common/contract'
-import { User } from 'common/user'
-import { filterDefined } from 'common/util/array'
-import {
-  DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
-  HOUSE_LIQUIDITY_PROVIDER_ID,
-} from 'common/antes'
-
-initAdmin()
-
-const adminFirestore = admin.firestore()
-
-const convertCategoriesToGroupsInternal = async (categories: string[]) => {
-  for (const category of categories) {
-    const markets = await getValues<Contract>(
-      adminFirestore
-        .collection('contracts')
-        .where('lowercaseTags', 'array-contains', category.toLowerCase())
-    )
-    const slug = category.toLowerCase() + CATEGORIES_GROUP_SLUG_POSTFIX
-    const oldGroup = await getValues<Group>(
-      adminFirestore.collection('groups').where('slug', '==', slug)
-    )
-    if (oldGroup.length > 0) {
-      console.log(`Found old group for ${category}`)
-      await adminFirestore.collection('groups').doc(oldGroup[0].id).delete()
-    }
-
-    const allUsers = await getValues<User>(adminFirestore.collection('users'))
-    const groupUsers = filterDefined(
-      allUsers.map((user: User) => {
-        if (!user.followedCategories || user.followedCategories.length === 0)
-          return user.id
-        if (!user.followedCategories.includes(category.toLowerCase()))
-          return null
-        return user.id
-      })
-    )
-
-    const manifoldAccount = isProd()
-      ? HOUSE_LIQUIDITY_PROVIDER_ID
-      : DEV_HOUSE_LIQUIDITY_PROVIDER_ID
-    const newGroupRef = await adminFirestore.collection('groups').doc()
-    const newGroup: Group = {
-      id: newGroupRef.id,
-      name: category,
-      slug,
-      creatorId: manifoldAccount,
-      createdTime: Date.now(),
-      anyoneCanJoin: true,
-      memberIds: [manifoldAccount],
-      about: 'Default group for all things related to ' + category,
-      mostRecentActivityTime: Date.now(),
-      contractIds: markets.map((market) => market.id),
-      chatDisabled: true,
-    }
-
-    await adminFirestore.collection('groups').doc(newGroupRef.id).set(newGroup)
-    // Update group with new memberIds to avoid notifying everyone
-    await adminFirestore
-      .collection('groups')
-      .doc(newGroupRef.id)
-      .update({
-        memberIds: uniq(groupUsers),
-      })
-
-    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]),
-          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())
-    .catch(console.log)
-}

functions/src/scripts/convert-tag-to-group.ts

@@ -4,21 +4,23 @@ import * as admin from 'firebase-admin'
 import { initAdmin } from './script-init'
 import { isProd, log } from '../utils'
 import { getSlug } from '../create-group'
-import { Group } from '../../../common/group'
+import { Group, GroupLink } from '../../../common/group'
+import { uniq } from 'lodash'
+import { Contract } from 'common/contract'
 
-const getTaggedContractIds = async (tag: string) => {
+const getTaggedContracts = async (tag: string) => {
   const firestore = admin.firestore()
   const results = await firestore
     .collection('contracts')
     .where('lowercaseTags', 'array-contains', tag.toLowerCase())
     .get()
-  return results.docs.map((d) => d.id)
+  return results.docs.map((d) => d.data() as Contract)
 }
 
 const createGroup = async (
   name: string,
   about: string,
-  contractIds: string[]
+  contracts: Contract[]
 ) => {
   const firestore = admin.firestore()
   const creatorId = isProd()
@@ -36,21 +38,60 @@ const createGroup = async (
     about,
     createdTime: now,
     mostRecentActivityTime: now,
-    contractIds: contractIds,
     anyoneCanJoin: true,
-    memberIds: [],
+    totalContracts: contracts.length,
+    totalMembers: 1,
   }
-  return await groupRef.create(group)
+  await groupRef.create(group)
+  // create a GroupMemberDoc for the creator
+  const memberDoc = groupRef.collection('groupMembers').doc(creatorId)
+  await memberDoc.create({
+    userId: creatorId,
+    createdTime: now,
+  })
+
+  // create GroupContractDocs for each contractId
+  await Promise.all(
+    contracts
+      .map((c) => c.id)
+      .map((contractId) =>
+        groupRef.collection('groupContracts').doc(contractId).create({
+          contractId,
+          createdTime: now,
+        })
+      )
+  )
+  for (const market of contracts) {
+    if (market.groupLinks?.map((l) => l.groupId).includes(group.id)) continue // already in that group
+
+    const newGroupLinks = [
+      ...(market.groupLinks ?? []),
+      {
+        groupId: group.id,
+        createdTime: Date.now(),
+        slug: group.slug,
+        name: group.name,
+      } as GroupLink,
+    ]
+    await firestore
+      .collection('contracts')
+      .doc(market.id)
+      .update({
+        groupSlugs: uniq([...(market.groupSlugs ?? []), group.slug]),
+        groupLinks: newGroupLinks,
+      })
+  }
+  return { status: 'success', group: group }
 }
 
 const convertTagToGroup = async (tag: string, groupName: string) => {
   log(`Looking up contract IDs with tag ${tag}...`)
-  const contractIds = await getTaggedContractIds(tag)
+  const contracts = await getTaggedContracts(tag)
-  log(`${contractIds.length} contracts found.`)
+  log(`${contracts.length} contracts found.`)
-  if (contractIds.length > 0) {
+  if (contracts.length > 0) {
     log(`Creating group ${groupName}...`)
     const about = `Contracts that used to be tagged ${tag}.`
-    const result = await createGroup(groupName, about, contractIds)
+    const result = await createGroup(groupName, about, contracts)
     log(`Done. Group: `, result)
   }
 }

functions/src/scripts/denormalize-comment-bet-data.ts

@@ -0,0 +1,69 @@
+// Filling in the bet-based fields on comments.
+
+import * as admin from 'firebase-admin'
+import { zip } from 'lodash'
+import { initAdmin } from './script-init'
+import {
+  DocumentCorrespondence,
+  findDiffs,
+  describeDiff,
+  applyDiff,
+} from './denormalize'
+import { log } from '../utils'
+import { Transaction } from 'firebase-admin/firestore'
+
+initAdmin()
+const firestore = admin.firestore()
+
+async function getBetComments(transaction: Transaction) {
+  const allComments = await transaction.get(
+    firestore.collectionGroup('comments')
+  )
+  const betComments = allComments.docs.filter((d) => d.get('betId'))
+  log(`Found ${betComments.length} comments associated with bets.`)
+  return betComments
+}
+
+async function denormalize() {
+  let hasMore = true
+  while (hasMore) {
+    hasMore = await admin.firestore().runTransaction(async (trans) => {
+      const betComments = await getBetComments(trans)
+      const bets = await Promise.all(
+        betComments.map((doc) =>
+          trans.get(
+            firestore
+              .collection('contracts')
+              .doc(doc.get('contractId'))
+              .collection('bets')
+              .doc(doc.get('betId'))
+          )
+        )
+      )
+      log(`Found ${bets.length} bets associated with comments.`)
+      const mapping = zip(bets, betComments)
+        .map(([bet, comment]): DocumentCorrespondence => {
+          return [bet!, [comment!]] // eslint-disable-line
+        })
+        .filter(([bet, _]) => bet.exists) // dev DB has some invalid bet IDs
+
+      const amountDiffs = findDiffs(mapping, 'amount', 'betAmount')
+      const outcomeDiffs = findDiffs(mapping, 'outcome', 'betOutcome')
+      log(`Found ${amountDiffs.length} comments with mismatched amounts.`)
+      log(`Found ${outcomeDiffs.length} comments with mismatched outcomes.`)
+      const diffs = amountDiffs.concat(outcomeDiffs)
+      diffs.slice(0, 500).forEach((d) => {
+        log(describeDiff(d))
+        applyDiff(trans, d)
+      })
+      if (diffs.length > 500) {
+        console.log(`Applying first 500 because of Firestore limit...`)
+      }
+      return diffs.length > 500
+    })
+  }
+}
+
+if (require.main === module) {
+  denormalize().catch((e) => console.error(e))
+}

functions/src/scripts/update-groups.ts

@@ -0,0 +1,122 @@
+import * as admin from 'firebase-admin'
+import { Group } from 'common/group'
+import { initAdmin } from 'functions/src/scripts/script-init'
+import { log } from '../utils'
+
+const getGroups = async () => {
+  const firestore = admin.firestore()
+  const groups = await firestore.collection('groups').get()
+  return groups.docs.map((doc) => doc.data() as Group)
+}
+
+// const createContractIdForGroup = async (
+//   groupId: string,
+//   contractId: string
+// ) => {
+//   const firestore = admin.firestore()
+//   const now = Date.now()
+//   const contractDoc = await firestore
+//     .collection('groups')
+//     .doc(groupId)
+//     .collection('groupContracts')
+//     .doc(contractId)
+//     .get()
+//   if (!contractDoc.exists)
+//     await firestore
+//       .collection('groups')
+//       .doc(groupId)
+//       .collection('groupContracts')
+//       .doc(contractId)
+//       .create({
+//         contractId,
+//         createdTime: now,
+//       })
+// }
+
+// const createMemberForGroup = async (groupId: string, userId: string) => {
+//   const firestore = admin.firestore()
+//   const now = Date.now()
+//   const memberDoc = await firestore
+//     .collection('groups')
+//     .doc(groupId)
+//     .collection('groupMembers')
+//     .doc(userId)
+//     .get()
+//   if (!memberDoc.exists)
+//     await firestore
+//       .collection('groups')
+//       .doc(groupId)
+//       .collection('groupMembers')
+//       .doc(userId)
+//       .create({
+//         userId,
+//         createdTime: now,
+//       })
+// }
+
+// async function convertGroupFieldsToGroupDocuments() {
+//   const groups = await getGroups()
+//   for (const group of groups) {
+//     log('updating group', group.slug)
+//     const groupRef = admin.firestore().collection('groups').doc(group.id)
+//     const totalMembers = (await groupRef.collection('groupMembers').get()).size
+//     const totalContracts = (await groupRef.collection('groupContracts').get())
+//       .size
+//     if (
+//       totalMembers === group.memberIds?.length &&
+//       totalContracts === group.contractIds?.length
+//     ) {
+//       log('group already converted', group.slug)
+//       continue
+//     }
+//     const contractStart = totalContracts - 1 < 0 ? 0 : totalContracts - 1
+//     const membersStart = totalMembers - 1 < 0 ? 0 : totalMembers - 1
+//     for (const contractId of group.contractIds?.slice(
+//       contractStart,
+//       group.contractIds?.length
+//     ) ?? []) {
+//       await createContractIdForGroup(group.id, contractId)
+//     }
+//     for (const userId of group.memberIds?.slice(
+//       membersStart,
+//       group.memberIds?.length
+//     ) ?? []) {
+//       await createMemberForGroup(group.id, userId)
+//     }
+//   }
+// }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function updateTotalContractsAndMembers() {
+  const groups = await getGroups()
+  for (const group of groups) {
+    log('updating group total contracts and members', group.slug)
+    const groupRef = admin.firestore().collection('groups').doc(group.id)
+    const totalMembers = (await groupRef.collection('groupMembers').get()).size
+    const totalContracts = (await groupRef.collection('groupContracts').get())
+      .size
+    await groupRef.update({
+      totalMembers,
+      totalContracts,
+    })
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function removeUnusedMemberAndContractFields() {
+  const groups = await getGroups()
+  for (const group of groups) {
+    log('removing member and contract ids', group.slug)
+    const groupRef = admin.firestore().collection('groups').doc(group.id)
+    await groupRef.update({
+      memberIds: admin.firestore.FieldValue.delete(),
+      contractIds: admin.firestore.FieldValue.delete(),
+    })
+  }
+}
+
+if (require.main === module) {
+  initAdmin()
+  // convertGroupFieldsToGroupDocuments()
+  // updateTotalContractsAndMembers()
+  removeUnusedMemberAndContractFields()
+}

functions/src/serve.ts

@@ -26,7 +26,7 @@ import { resolvemarket } from './resolve-market'
 import { unsubscribe } from './unsubscribe'
 import { stripewebhook, createcheckoutsession } from './stripe'
 import { getcurrentuser } from './get-current-user'
-import { getcustomtoken } from './get-custom-token'
+import { createpost } from './create-post'
 
 type Middleware = (req: Request, res: Response, next: NextFunction) => void
 const app = express()
@@ -65,8 +65,8 @@ addJsonEndpointRoute('/resolvemarket', resolvemarket)
 addJsonEndpointRoute('/unsubscribe', unsubscribe)
 addJsonEndpointRoute('/createcheckoutsession', createcheckoutsession)
 addJsonEndpointRoute('/getcurrentuser', getcurrentuser)
-addEndpointRoute('/getcustomtoken', getcustomtoken)
 addEndpointRoute('/stripewebhook', stripewebhook, express.raw())
+addEndpointRoute('/createpost', createpost)
 
 app.listen(PORT)
 console.log(`Serving functions on port ${PORT}.`)

functions/src/update-metrics.ts

@@ -1,43 +1,29 @@
 import * as functions from 'firebase-functions'
 import * as admin from 'firebase-admin'
-import { groupBy, isEmpty, keyBy, sum, sumBy } from 'lodash'
+import { groupBy, isEmpty, keyBy, last, sortBy } from 'lodash'
 import { getValues, log, logMemory, writeAsync } from './utils'
 import { Bet } from '../../common/bet'
-import { Contract } from '../../common/contract'
+import { Contract, CPMM } from '../../common/contract'
 import { PortfolioMetrics, User } from '../../common/user'
-import { calculatePayout } from '../../common/calculate'
 import { DAY_MS } from '../../common/util/time'
-import { last } from 'lodash'
 import { getLoanUpdates } from '../../common/loans'
+import {
+  calculateCreatorVolume,
+  calculateNewPortfolioMetrics,
+  calculateNewProfit,
+  calculateProbChanges,
+  computeVolume,
+} from '../../common/calculate-metrics'
+import { getProbability } from '../../common/calculate'
 
 const firestore = admin.firestore()
 
-const computeInvestmentValue = (
+export const updateMetrics = functions
-  bets: Bet[],
+  .runWith({ memory: '2GB', timeoutSeconds: 540 })
-  contractsDict: { [k: string]: Contract }
+  .pubsub.schedule('every 15 minutes')
-) => {
+  .onRun(updateMetricsCore)
-  return sumBy(bets, (bet) => {
-    const contract = contractsDict[bet.contractId]
-    if (!contract || contract.isResolved) return 0
-    if (bet.sale || bet.isSold) return 0
 
-    const payout = calculatePayout(contract, bet, 'MKT')
+export async function updateMetricsCore() {
-    const value = payout - (bet.loanAmount ?? 0)
-    if (isNaN(value)) return 0
-    return value
-  })
-}
-
-const computeTotalPool = (userContracts: Contract[], startTime = 0) => {
-  const periodFilteredContracts = userContracts.filter(
-    (contract) => contract.createdTime >= startTime
-  )
-  return sum(
-    periodFilteredContracts.map((contract) => sum(Object.values(contract.pool)))
-  )
-}
-
-export const updateMetricsCore = async () => {
   const [users, contracts, bets, allPortfolioHistories] = await Promise.all([
     getValues<User>(firestore.collection('users')),
     getValues<Contract>(firestore.collection('contracts')),
@@ -55,16 +41,36 @@ export const updateMetricsCore = async () => {
 
   const now = Date.now()
   const betsByContract = groupBy(bets, (bet) => bet.contractId)
-  const contractUpdates = contracts.map((contract) => {
+  const contractUpdates = contracts
-    const contractBets = betsByContract[contract.id] ?? []
+    .filter((contract) => contract.id)
-    return {
+    .map((contract) => {
-      doc: firestore.collection('contracts').doc(contract.id),
+      const contractBets = betsByContract[contract.id] ?? []
-      fields: {
+      const descendingBets = sortBy(
-        volume24Hours: computeVolume(contractBets, now - DAY_MS),
+        contractBets,
-        volume7Days: computeVolume(contractBets, now - DAY_MS * 7),
+        (bet) => bet.createdTime
-      },
+      ).reverse()
-    }
+
-  })
+      let cpmmFields: Partial<CPMM> = {}
+      if (contract.mechanism === 'cpmm-1') {
+        const prob = descendingBets[0]
+          ? descendingBets[0].probAfter
+          : getProbability(contract)
+
+        cpmmFields = {
+          prob,
+          probChanges: calculateProbChanges(descendingBets),
+        }
+      }
+
+      return {
+        doc: firestore.collection('contracts').doc(contract.id),
+        fields: {
+          volume24Hours: computeVolume(contractBets, now - DAY_MS),
+          volume7Days: computeVolume(contractBets, now - DAY_MS * 7),
+          ...cpmmFields,
+        },
+      }
+    })
   await writeAsync(firestore, contractUpdates)
   log(`Updated metrics for ${contracts.length} contracts.`)
 
@@ -86,23 +92,20 @@ export const updateMetricsCore = async () => {
       currentBets
     )
     const lastPortfolio = last(portfolioHistory)
-    const didProfitChange =
+    const didPortfolioChange =
       lastPortfolio === undefined ||
       lastPortfolio.balance !== newPortfolio.balance ||
       lastPortfolio.totalDeposits !== newPortfolio.totalDeposits ||
       lastPortfolio.investmentValue !== newPortfolio.investmentValue
 
-    const newProfit = calculateNewProfit(
+    const newProfit = calculateNewProfit(portfolioHistory, newPortfolio)
-      portfolioHistory,
+
-      newPortfolio,
-      didProfitChange
-    )
     return {
       user,
       newCreatorVolume,
       newPortfolio,
       newProfit,
-      didProfitChange,
+      didPortfolioChange,
     }
   })
 
@@ -118,16 +121,20 @@ export const updateMetricsCore = async () => {
   const nextLoanByUser = keyBy(userPayouts, (payout) => payout.user.id)
 
   const userUpdates = userMetrics.map(
-    ({ user, newCreatorVolume, newPortfolio, newProfit, didProfitChange }) => {
+    ({
+      user,
+      newCreatorVolume,
+      newPortfolio,
+      newProfit,
+      didPortfolioChange,
+    }) => {
       const nextLoanCached = nextLoanByUser[user.id]?.payout ?? 0
       return {
         fieldUpdates: {
           doc: firestore.collection('users').doc(user.id),
           fields: {
             creatorVolumeCached: newCreatorVolume,
-            ...(didProfitChange && {
+            profitCached: newProfit,
-              profitCached: newProfit,
-            }),
             nextLoanCached,
           },
         },
@@ -138,11 +145,7 @@ export const updateMetricsCore = async () => {
             .doc(user.id)
             .collection('portfolioHistory')
             .doc(),
-          fields: {
+          fields: didPortfolioChange ? newPortfolio : {},
-            ...(didProfitChange && {
-              ...newPortfolio,
-            }),
-          },
         },
       }
     }
@@ -160,108 +163,3 @@ export const updateMetricsCore = async () => {
   )
   log(`Updated metrics for ${users.length} users.`)
 }
-
-const computeVolume = (contractBets: Bet[], since: number) => {
-  return sumBy(contractBets, (b) =>
-    b.createdTime > since && !b.isRedemption ? Math.abs(b.amount) : 0
-  )
-}
-
-const calculateProfitForPeriod = (
-  startTime: number,
-  portfolioHistory: PortfolioMetrics[],
-  currentProfit: number
-) => {
-  const startingPortfolio = [...portfolioHistory]
-    .reverse() // so we search in descending order (most recent first), for efficiency
-    .find((p) => p.timestamp < startTime)
-
-  if (startingPortfolio === undefined) {
-    return 0
-  }
-
-  const startingProfit = calculateTotalProfit(startingPortfolio)
-
-  return currentProfit - startingProfit
-}
-
-const calculateTotalProfit = (portfolio: PortfolioMetrics) => {
-  return portfolio.investmentValue + portfolio.balance - portfolio.totalDeposits
-}
-
-const calculateCreatorVolume = (userContracts: Contract[]) => {
-  const allTimeCreatorVolume = computeTotalPool(userContracts, 0)
-  const monthlyCreatorVolume = computeTotalPool(
-    userContracts,
-    Date.now() - 30 * DAY_MS
-  )
-  const weeklyCreatorVolume = computeTotalPool(
-    userContracts,
-    Date.now() - 7 * DAY_MS
-  )
-
-  const dailyCreatorVolume = computeTotalPool(
-    userContracts,
-    Date.now() - 1 * DAY_MS
-  )
-
-  return {
-    daily: dailyCreatorVolume,
-    weekly: weeklyCreatorVolume,
-    monthly: monthlyCreatorVolume,
-    allTime: allTimeCreatorVolume,
-  }
-}
-
-const calculateNewPortfolioMetrics = (
-  user: User,
-  contractsById: { [k: string]: Contract },
-  currentBets: Bet[]
-) => {
-  const investmentValue = computeInvestmentValue(currentBets, contractsById)
-  const newPortfolio = {
-    investmentValue: investmentValue,
-    balance: user.balance,
-    totalDeposits: user.totalDeposits,
-    timestamp: Date.now(),
-    userId: user.id,
-  }
-  return newPortfolio
-}
-
-const calculateNewProfit = (
-  portfolioHistory: PortfolioMetrics[],
-  newPortfolio: PortfolioMetrics,
-  didProfitChange: boolean
-) => {
-  if (!didProfitChange) {
-    return {} // early return for performance
-  }
-
-  const allTimeProfit = calculateTotalProfit(newPortfolio)
-  const newProfit = {
-    daily: calculateProfitForPeriod(
-      Date.now() - 1 * DAY_MS,
-      portfolioHistory,
-      allTimeProfit
-    ),
-    weekly: calculateProfitForPeriod(
-      Date.now() - 7 * DAY_MS,
-      portfolioHistory,
-      allTimeProfit
-    ),
-    monthly: calculateProfitForPeriod(
-      Date.now() - 30 * DAY_MS,
-      portfolioHistory,
-      allTimeProfit
-    ),
-    allTime: allTimeProfit,
-  }
-
-  return newProfit
-}
-
-export const updateMetrics = functions
-  .runWith({ memory: '2GB', timeoutSeconds: 540 })
-  .pubsub.schedule('every 15 minutes')
-  .onRun(updateMetricsCore)

functions/src/utils.ts

@@ -4,6 +4,7 @@ import { chunk } from 'lodash'
 import { Contract } from '../../common/contract'
 import { PrivateUser, User } from '../../common/user'
 import { Group } from '../../common/group'
+import { Post } from 'common/post'
 
 export const log = (...args: unknown[]) => {
   console.log(`[${new Date().toISOString()}]`, ...args)
@@ -80,6 +81,10 @@ export const getGroup = (groupId: string) => {
   return getDoc<Group>('groups', groupId)
 }
 
+export const getPost = (postId: string) => {
+  return getDoc<Post>('posts', postId)
+}
+
 export const getUser = (userId: string) => {
   return getDoc<User>('users', userId)
 }

functions/src/weekly-markets-emails.ts

@@ -2,10 +2,18 @@ import * as functions from 'firebase-functions'
 import * as admin from 'firebase-admin'
 
 import { Contract } from '../../common/contract'
-import { getAllPrivateUsers, getUser, getValues, log } from './utils'
+import {
+  getAllPrivateUsers,
+  getPrivateUser,
+  getUser,
+  getValues,
+  isProd,
+  log,
+} from './utils'
 import { sendInterestingMarketsEmail } from './emails'
 import { createRNG, shuffle } from '../../common/util/random'
 import { DAY_MS } from '../../common/util/time'
+import { filterDefined } from '../../common/util/array'
 
 export const weeklyMarketsEmails = functions
   .runWith({ secrets: ['MAILGUN_KEY'] })
@@ -34,7 +42,9 @@ export async function getTrendingContracts() {
 
 async function sendTrendingMarketsEmailsToAllUsers() {
   const numContractsToSend = 6
-  const privateUsers = await getAllPrivateUsers()
+  const privateUsers = isProd()
+    ? await getAllPrivateUsers()
+    : filterDefined([await getPrivateUser('6hHpzvRG0pMq8PNJs7RZj2qlZGn2')])
   // get all users that haven't unsubscribed from weekly emails
   const privateUsersToSendEmailsTo = privateUsers.filter((user) => {
     return (

og-image/api/_lib/challenge-template.ts

@@ -1,85 +1,5 @@
-import { sanitizeHtml } from './sanitizer'
 import { ParsedRequest } from './types'
-
+import { getTemplateCss } from './template-css'
-function getCss(theme: string, fontSize: string) {
-  let background = 'white'
-  let foreground = 'black'
-  let radial = 'lightgray'
-
-  if (theme === 'dark') {
-    background = 'black'
-    foreground = 'white'
-    radial = 'dimgray'
-  }
-  // To use Readex Pro: `font-family: 'Readex Pro', sans-serif;`
-  return `
-    @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap');
-
-    body {
-        background: ${background};
-        background-image: radial-gradient(circle at 25px 25px, ${radial} 2%, transparent 0%), radial-gradient(circle at 75px 75px, ${radial} 2%, transparent 0%);
-        background-size: 100px 100px;
-        height: 100vh;
-        font-family: "Readex Pro", sans-serif;
-    }
-
-    code {
-        color: #D400FF;
-        font-family: 'Vera';
-        white-space: pre-wrap;
-        letter-spacing: -5px;
-    }
-
-    code:before, code:after {
-        content: '\`';
-    }
-
-    .logo-wrapper {
-        display: flex;
-        align-items: center;
-        align-content: center;
-        justify-content: center;
-        justify-items: center;
-    }
-
-    .logo {
-        margin: 0 75px;
-    }
-
-    .plus {
-        color: #BBB;
-        font-family: Times New Roman, Verdana;
-        font-size: 100px;
-    }
-
-    .spacer {
-        margin: 150px;
-    }
-
-    .emoji {
-        height: 1em;
-        width: 1em;
-        margin: 0 .05em 0 .1em;
-        vertical-align: -0.1em;
-    }
-    
-    .heading {
-        font-family: 'Major Mono Display', monospace;
-        font-size: ${sanitizeHtml(fontSize)};
-        font-style: normal;
-        color: ${foreground};
-        line-height: 1.8;
-    }
-    
-    .font-major-mono {
-      font-family: "Major Mono Display", monospace;
-    }
-
-    .text-primary {
-      color: #11b981;
-    }
-    `
-}
 
 export function getChallengeHtml(parsedReq: ParsedRequest) {
   const {
@@ -112,7 +32,7 @@ export function getChallengeHtml(parsedReq: ParsedRequest) {
         <script src="https://cdn.tailwindcss.com"></script>
     </head>
     <style>
-        ${getCss(theme, fontSize)}
+        ${getTemplateCss(theme, fontSize)}
     </style>
   <body>
     <div class="px-24">

og-image/api/_lib/parser.ts

@@ -21,6 +21,7 @@ export function parseRequest(req: IncomingMessage) {
     creatorName,
     creatorUsername,
     creatorAvatarUrl,
+    resolution,
 
     // Challenge attributes:
     challengerAmount,
@@ -71,6 +72,7 @@ export function parseRequest(req: IncomingMessage) {
 
     question:
       getString(question) || 'Will you create a prediction market on Manifold?',
+    resolution: getString(resolution),
     probability: getString(probability),
     numericValue: getString(numericValue) || '',
     metadata: getString(metadata) || 'Jan 1  •  M$ 123 pool',

og-image/api/_lib/template-css.ts

@@ -0,0 +1,81 @@
+import { sanitizeHtml } from './sanitizer'
+
+export function getTemplateCss(theme: string, fontSize: string) {
+  let background = 'white'
+  let foreground = 'black'
+  let radial = 'lightgray'
+
+  if (theme === 'dark') {
+    background = 'black'
+    foreground = 'white'
+    radial = 'dimgray'
+  }
+  // To use Readex Pro: `font-family: 'Readex Pro', sans-serif;`
+  return `
+    @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap');
+
+    body {
+        background: ${background};
+        background-image: radial-gradient(circle at 25px 25px, ${radial} 2%, transparent 0%), radial-gradient(circle at 75px 75px, ${radial} 2%, transparent 0%);
+        background-size: 100px 100px;
+        height: 100vh;
+        font-family: "Readex Pro", sans-serif;
+    }
+
+    code {
+        color: #D400FF;
+        font-family: 'Vera';
+        white-space: pre-wrap;
+        letter-spacing: -5px;
+    }
+
+    code:before, code:after {
+        content: '\`';
+    }
+
+    .logo-wrapper {
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        justify-items: center;
+    }
+
+    .logo {
+        margin: 0 75px;
+    }
+
+    .plus {
+        color: #BBB;
+        font-family: Times New Roman, Verdana;
+        font-size: 100px;
+    }
+
+    .spacer {
+        margin: 150px;
+    }
+
+    .emoji {
+        height: 1em;
+        width: 1em;
+        margin: 0 .05em 0 .1em;
+        vertical-align: -0.1em;
+    }
+    
+    .heading {
+        font-family: 'Major Mono Display', monospace;
+        font-size: ${sanitizeHtml(fontSize)};
+        font-style: normal;
+        color: ${foreground};
+        line-height: 1.8;
+    }
+    
+    .font-major-mono {
+      font-family: "Major Mono Display", monospace;
+    }
+
+    .text-primary {
+      color: #11b981;
+    }
+    `
+}

og-image/api/_lib/template.ts

@@ -1,85 +1,5 @@
-import { sanitizeHtml } from './sanitizer'
 import { ParsedRequest } from './types'
-
+import { getTemplateCss } from './template-css'
-function getCss(theme: string, fontSize: string) {
-  let background = 'white'
-  let foreground = 'black'
-  let radial = 'lightgray'
-
-  if (theme === 'dark') {
-    background = 'black'
-    foreground = 'white'
-    radial = 'dimgray'
-  }
-  // To use Readex Pro: `font-family: 'Readex Pro', sans-serif;`
-  return `
-    @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap');
-
-    body {
-        background: ${background};
-        background-image: radial-gradient(circle at 25px 25px, ${radial} 2%, transparent 0%), radial-gradient(circle at 75px 75px, ${radial} 2%, transparent 0%);
-        background-size: 100px 100px;
-        height: 100vh;
-        font-family: "Readex Pro", sans-serif;
-    }
-
-    code {
-        color: #D400FF;
-        font-family: 'Vera';
-        white-space: pre-wrap;
-        letter-spacing: -5px;
-    }
-
-    code:before, code:after {
-        content: '\`';
-    }
-
-    .logo-wrapper {
-        display: flex;
-        align-items: center;
-        align-content: center;
-        justify-content: center;
-        justify-items: center;
-    }
-
-    .logo {
-        margin: 0 75px;
-    }
-
-    .plus {
-        color: #BBB;
-        font-family: Times New Roman, Verdana;
-        font-size: 100px;
-    }
-
-    .spacer {
-        margin: 150px;
-    }
-
-    .emoji {
-        height: 1em;
-        width: 1em;
-        margin: 0 .05em 0 .1em;
-        vertical-align: -0.1em;
-    }
-    
-    .heading {
-        font-family: 'Major Mono Display', monospace;
-        font-size: ${sanitizeHtml(fontSize)};
-        font-style: normal;
-        color: ${foreground};
-        line-height: 1.8;
-    }
-    
-    .font-major-mono {
-      font-family: "Major Mono Display", monospace;
-    }
-
-    .text-primary {
-      color: #11b981;
-    }
-    `
-}
 
 export function getHtml(parsedReq: ParsedRequest) {
   const {
@@ -92,6 +12,7 @@ export function getHtml(parsedReq: ParsedRequest) {
     creatorUsername,
     creatorAvatarUrl,
     numericValue,
+    resolution,
   } = parsedReq
   const MAX_QUESTION_CHARS = 100
   const truncatedQuestion =
@@ -99,6 +20,49 @@ export function getHtml(parsedReq: ParsedRequest) {
       ? question.slice(0, MAX_QUESTION_CHARS) + '...'
       : question
   const hideAvatar = creatorAvatarUrl ? '' : 'hidden'
+
+  let resolutionColor = 'text-primary'
+  let resolutionString = 'YES'
+  switch (resolution) {
+    case 'YES':
+      break
+    case 'NO':
+      resolutionColor = 'text-red-500'
+      resolutionString = 'NO'
+      break
+    case 'CANCEL':
+      resolutionColor = 'text-yellow-500'
+      resolutionString = 'N/A'
+      break
+    case 'MKT':
+      resolutionColor = 'text-blue-500'
+      resolutionString = numericValue ? numericValue : probability
+      break
+  }
+
+  const resolutionDiv = `
+        <span class='text-center ${resolutionColor}'>
+          <div class="text-8xl">
+              ${resolutionString}
+            </div>
+          <div class="text-4xl">${
+            resolution === 'CANCEL' ? '' : 'resolved'
+          }</div>
+        </span>`
+
+  const probabilityDiv = `
+        <span class='text-primary text-center'>
+          <div class="text-8xl">${probability}</div>
+          <div class="text-4xl">chance</div>
+        </span>`
+
+  const numericValueDiv = `
+        <span class='text-blue-500 text-center'> 
+           <div class="text-8xl ">${numericValue}</div>
+          <div class="text-4xl">expected</div>
+        </span>
+      `
+
   return `<!DOCTYPE html>
 <html>
     <head>
@@ -108,7 +72,7 @@ export function getHtml(parsedReq: ParsedRequest) {
         <script src="https://cdn.tailwindcss.com"></script>
     </head>
     <style>
-        ${getCss(theme, fontSize)}
+        ${getTemplateCss(theme, fontSize)}
     </style>
   <body>
     <div class="px-24">
@@ -148,21 +112,22 @@ export function getHtml(parsedReq: ParsedRequest) {
         <div class="text-indigo-700 text-6xl leading-tight">
           ${truncatedQuestion}
         </div>
-        <div class="flex flex-col text-primary">
+        <div class="flex flex-col">
-          <div class="text-8xl">${probability}</div>
+                    ${
-          <div class="text-4xl">${probability !== '' ? 'chance' : ''}</div>
+                      resolution
-          <span class='text-blue-500 text-center'> 
+                        ? resolutionDiv
-           <div class="text-8xl ">${
+                        : numericValue
-             numericValue !== '' && probability === '' ? numericValue : ''
+                        ? numericValueDiv
-           }</div>
+                        : probability
-          <div class="text-4xl">${numericValue !== '' ? 'expected' : ''}</div>
+                        ? probabilityDiv
-          </span>
+                        : ''
+                    }
         </div>
       </div>
 
       <!-- Metadata -->
       <div class="absolute bottom-16">
-        <div class="text-gray-500 text-3xl">
+        <div class="text-gray-500 text-3xl max-w-[80vw]">
           ${metadata}
         </div>
       </div>

og-image/api/_lib/types.ts

@@ -19,6 +19,7 @@ export interface ParsedRequest {
   creatorName: string
   creatorUsername: string
   creatorAvatarUrl: string
+  resolution: string
   // Challenge attributes:
   challengerAmount: string
   challengerOutcome: string

package.json

@@ -8,20 +8,22 @@
     "web"
   ],
   "scripts": {
-    "verify": "(cd web && yarn verify:dir); (cd functions && yarn verify:dir)"
+    "verify": "(cd web && yarn verify:dir); (cd functions && yarn verify:dir)",
+    "lint": "eslint common --fix ; eslint web --fix ; eslint functions --fix"
   },
   "dependencies": {},
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "5.25.0",
-    "@typescript-eslint/parser": "5.25.0",
     "@types/node": "16.11.11",
+    "@typescript-eslint/eslint-plugin": "5.36.0",
+    "@typescript-eslint/parser": "5.36.0",
     "concurrently": "6.5.1",
-    "eslint": "8.15.0",
+    "eslint": "8.23.0",
     "eslint-plugin-lodash": "^7.4.0",
-    "prettier": "2.5.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
-    "typescript": "4.6.4",
+    "nodemon": "2.0.19",
+    "prettier": "2.7.1",
     "ts-node": "10.9.1",
-    "nodemon": "2.0.19"
+    "typescript": "4.8.2"
   },
   "resolutions": {
     "@types/react": "17.0.43"

web/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  plugins: ['lodash'],
+  plugins: ['lodash', 'unused-imports'],
   extends: [
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
@@ -22,6 +22,7 @@ module.exports = {
     '@next/next/no-typos': 'off',
     'linebreak-style': ['error', 'unix'],
     'lodash/import-scope': [2, 'member'],
+    'unused-imports/no-unused-imports': 'error',
   },
   env: {
     browser: true,

web/components/advanced-panel.tsx

@@ -1,38 +0,0 @@
-import clsx from 'clsx'
-import { useState, ReactNode } from 'react'
-
-export function AdvancedPanel(props: { children: ReactNode }) {
-  const { children } = props
-  const [collapsed, setCollapsed] = useState(true)
-
-  return (
-    <div
-      tabIndex={0}
-      className={clsx(
-        'collapse collapse-arrow relative',
-        collapsed ? 'collapse-close' : 'collapse-open'
-      )}
-    >
-      <div
-        onClick={() => setCollapsed((collapsed) => !collapsed)}
-        className="cursor-pointer"
-      >
-        <div className="mt-4 mr-6 text-right text-sm text-gray-500">
-          Advanced
-        </div>
-        <div
-          className="collapse-title absolute h-0 min-h-0 w-0 p-0"
-          style={{
-            top: -2,
-            right: -15,
-            color: '#6a7280' /* gray-500 */,
-          }}
-        />
-      </div>
-
-      <div className="collapse-content m-0 !bg-transparent !p-0">
-        {children}
-      </div>
-    </div>
-  )
-}

web/components/amount-input.tsx

@@ -84,6 +84,7 @@ export function BuyAmountInput(props: {
   setError: (error: string | undefined) => void
   minimumAmount?: number
   disabled?: boolean
+  showSliderOnMobile?: boolean
   className?: string
   inputClassName?: string
   // Needed to focus the amount input
@@ -94,6 +95,7 @@ export function BuyAmountInput(props: {
     onChange,
     error,
     setError,
+    showSliderOnMobile: showSlider,
     disabled,
     className,
     inputClassName,
@@ -121,15 +123,28 @@ export function BuyAmountInput(props: {
   }
 
   return (
-    <AmountInput
+    <>
-      amount={amount}
+      <AmountInput
-      onChange={onAmountChange}
+        amount={amount}
-      label={ENV_CONFIG.moneyMoniker}
+        onChange={onAmountChange}
-      error={error}
+        label={ENV_CONFIG.moneyMoniker}
-      disabled={disabled}
+        error={error}
-      className={className}
+        disabled={disabled}
-      inputClassName={inputClassName}
+        className={className}
-      inputRef={inputRef}
+        inputClassName={inputClassName}
-    />
+        inputRef={inputRef}
+      />
+      {showSlider && (
+        <input
+          type="range"
+          min="0"
+          max="200"
+          value={amount ?? 0}
+          onChange={(e) => onAmountChange(parseInt(e.target.value))}
+          className="range range-lg z-40 mb-2 xl:hidden"
+          step="5"
+        />
+      )}
+    </>
   )
 }

web/components/analytics/charts.tsx

@@ -1,4 +1,5 @@
 import { Point, ResponsiveLine } from '@nivo/line'
+import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { zip } from 'lodash'
 import { useWindowSize } from 'web/hooks/use-window-size'
@@ -26,8 +27,10 @@ export function DailyCountChart(props: {
 
   return (
     <div
-      className="w-full overflow-hidden"
+      className={clsx(
-      style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
+        'h-[250px] w-full overflow-hidden',
+        !small && 'md:h-[400px]'
+      )}
     >
       <ResponsiveLine
         data={data}
@@ -78,8 +81,10 @@ export function DailyPercentChart(props: {
 
   return (
     <div
-      className="w-full overflow-hidden"
+      className={clsx(
-      style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
+        'h-[250px] w-full overflow-hidden',
+        !small && 'md:h-[400px]'
+      )}
     >
       <ResponsiveLine
         data={data}

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { XIcon } from '@heroicons/react/solid'
 
 import { Answer } from 'common/answer'
@@ -24,7 +24,7 @@ import {
 } from 'common/calculate-dpm'
 import { Bet } from 'common/bet'
 import { track } from 'web/lib/service/analytics'
-import { SignUpPrompt } from '../sign-up-prompt'
+import { BetSignUpPrompt } from '../sign-up-prompt'
 import { isIOS } from 'web/lib/util/device'
 import { AlertBox } from '../alert-box'
 
@@ -120,7 +120,7 @@ export function AnswerBetPanel(props: {
     <Col className={clsx('px-2 pb-2 pt-4 sm:pt-0', className)}>
       <Row className="items-center justify-between self-stretch">
         <div className="text-xl">
-          Bet on {isModal ? `"${answer.text}"` : 'this answer'}
+          Buy answer: {isModal ? `"${answer.text}"` : 'this answer'}
         </div>
 
         {!isModal && (
@@ -132,7 +132,11 @@ export function AnswerBetPanel(props: {
           </button>
         )}
       </Row>
-      <div className="my-3 text-left text-sm text-gray-500">Amount </div>
+      <Row className="my-3 justify-between text-left text-sm text-gray-500">
+        Amount
+        <span>Balance: {formatMoney(user?.balance ?? 0)}</span>
+      </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -141,6 +145,7 @@ export function AnswerBetPanel(props: {
         setError={setError}
         disabled={isSubmitting}
         inputRef={inputRef}
+        showSliderOnMobile
       />
 
       {(betAmount ?? 0) > 10 &&
@@ -201,10 +206,10 @@ export function AnswerBetPanel(props: {
           )}
           onClick={betDisabled ? undefined : submitBet}
         >
-          {isSubmitting ? 'Submitting...' : 'Submit trade'}
+          {isSubmitting ? 'Submitting...' : 'Submit'}
         </button>
       ) : (
-        <SignUpPrompt />
+        <BetSignUpPrompt />
       )}
     </Col>
   )

web/components/answers/answers-graph.tsx

@@ -18,19 +18,20 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
 }) {
   const { contract, bets, height } = props
   const { createdTime, resolutionTime, closeTime, answers } = contract
+  const now = Date.now()
 
   const { probsByOutcome, sortedOutcomes } = computeProbsByOutcome(
     bets,
     contract
   )
 
-  const isClosed = !!closeTime && Date.now() > closeTime
+  const isClosed = !!closeTime && now > closeTime
   const latestTime = dayjs(
     resolutionTime && isClosed
       ? Math.min(resolutionTime, closeTime)
       : isClosed
       ? closeTime
-      : resolutionTime ?? Date.now()
+      : resolutionTime ?? now
   )
 
   const { width } = useWindowSize()
@@ -71,13 +72,14 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
   const yTickValues = [0, 25, 50, 75, 100]
 
   const numXTickValues = isLargeWidth ? 5 : 2
-  const hoursAgo = latestTime.subtract(5, 'hours')
+  const startDate = dayjs(contract.createdTime)
-  const startDate = dayjs(contract.createdTime).isBefore(hoursAgo)
+  const endDate = startDate.add(1, 'hour').isAfter(latestTime)
-    ? new Date(contract.createdTime)
+    ? latestTime.add(1, 'hours')
-    : hoursAgo.toDate()
+    : latestTime
+  const includeMinute = endDate.diff(startDate, 'hours') < 2
 
-  const multiYear = !dayjs(startDate).isSame(latestTime, 'year')
+  const multiYear = !startDate.isSame(latestTime, 'year')
-  const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime)
+  const lessThanAWeek = startDate.add(1, 'week').isAfter(latestTime)
 
   return (
     <div
@@ -95,17 +97,25 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
         }}
         xScale={{
           type: 'time',
-          min: startDate,
+          min: startDate.toDate(),
-          max: latestTime.toDate(),
+          max: endDate.toDate(),
         }}
         xFormat={(d) =>
-          formatTime(+d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
+          formatTime(now, +d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
         }
         axisBottom={{
           tickValues: numXTickValues,
-          format: (time) => formatTime(+time, multiYear, lessThanAWeek, false),
+          format: (time) =>
+            formatTime(now, +time, multiYear, lessThanAWeek, includeMinute),
         }}
-        colors={{ scheme: 'pastel1' }}
+        colors={[
+          '#fca5a5', // red-300
+          '#a5b4fc', // indigo-300
+          '#86efac', // green-300
+          '#fef08a', // yellow-200
+          '#fdba74', // orange-300
+          '#c084fc', // purple-400
+        ]}
         pointSize={0}
         curve="stepAfter"
         enableSlices="x"
@@ -149,19 +159,20 @@ function formatPercent(y: DatumValue) {
 }
 
 function formatTime(
+  now: number,
   time: number,
   includeYear: boolean,
   includeHour: boolean,
   includeMinute: boolean
 ) {
   const d = dayjs(time)
-
+  if (d.add(1, 'minute').isAfter(now) && d.subtract(1, 'minute').isBefore(now))
-  if (d.add(1, 'minute').isAfter(Date.now())) return 'Now'
+    return 'Now'
 
   let format: string
-  if (d.isSame(Date.now(), 'day')) {
+  if (d.isSame(now, 'day')) {
     format = '[Today]'
-  } else if (d.add(1, 'day').isSame(Date.now(), 'day')) {
+  } else if (d.add(1, 'day').isSame(now, 'day')) {
     format = '[Yesterday]'
   } else {
     format = 'MMM D'

web/components/answers/answers-panel.tsx

@@ -11,7 +11,6 @@ import { AnswerItem } from './answer-item'
 import { CreateAnswerPanel } from './create-answer-panel'
 import { AnswerResolvePanel } from './answer-resolve-panel'
 import { Spacer } from '../layout/spacer'
-import { ActivityItem } from '../feed/activity-items'
 import { User } from 'common/user'
 import { getOutcomeProbability } from 'common/calculate'
 import { Answer } from 'common/answer'
@@ -21,9 +20,9 @@ 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'
 import { Linkify } from 'web/components/linkify'
 import { BuyButton } from 'web/components/yes-no-selector'
+import { UserLink } from 'web/components/user-link'
 
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
@@ -176,7 +175,6 @@ function getAnswerItems(
         type: 'answer' as const,
         contract,
         answer,
-        items: [] as ActivityItem[],
         user,
       }
     })
@@ -186,7 +184,6 @@ function getAnswerItems(
 function OpenAnswer(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   answer: Answer
-  items: ActivityItem[]
   type: string
 }) {
   const { answer, contract } = props

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import Textarea from 'react-expanding-textarea'
 import { findBestMatch } from 'string-similarity'
 
@@ -25,6 +25,7 @@ import { Bet } from 'common/bet'
 import { MAX_ANSWER_LENGTH } from 'common/answer'
 import { withTracking } from 'web/lib/service/analytics'
 import { lowerCase } from 'lodash'
+import { Button } from '../button'
 
 export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
   const { contract } = props
@@ -115,9 +116,11 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
   const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
   const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
 
+  if (user?.isBannedFromPosting) return <></>
+
   return (
     <Col className="gap-4 rounded">
-      <Col className="flex-1 gap-2">
+      <Col className="flex-1 gap-2 px-4 xl:px-0">
         <div className="mb-1">Add your answer</div>
         <Textarea
           value={text}
@@ -146,7 +149,12 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
           {text && (
             <>
               <Col className="mt-1 gap-2">
-                <div className="text-sm text-gray-500">Bet amount</div>
+                <Row className="my-3 justify-between text-left text-sm text-gray-500">
+                  Bet Amount
+                  <span className={'sm:hidden'}>
+                    Balance: {formatMoney(user?.balance ?? 0)}
+                  </span>
+                </Row>{' '}
                 <BuyAmountInput
                   amount={betAmount}
                   onChange={setBetAmount}
@@ -154,6 +162,7 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
                   setError={setAmountError}
                   minimumAmount={1}
                   disabled={isSubmitting}
+                  showSliderOnMobile
                 />
               </Col>
               <Col className="gap-3">
@@ -197,16 +206,18 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
               disabled={!canSubmit}
               onClick={withTracking(submitAnswer, 'submit answer')}
             >
-              Submit answer & buy
+              Submit
             </button>
           ) : (
             text && (
-              <button
+              <Button
-                className="btn self-end whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
+                color="green"
+                size="lg"
+                className="self-end whitespace-nowrap "
                 onClick={withTracking(firebaseLogin, 'answer panel sign in')}
               >
-                Sign in
+                Add my answer
-              </button>
+              </Button>
             )
           )}
         </Col>

web/components/arrange-home.tsx

@@ -0,0 +1,141 @@
+import clsx from 'clsx'
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
+import { MenuIcon } from '@heroicons/react/solid'
+
+import { Col } from 'web/components/layout/col'
+import { Row } from 'web/components/layout/row'
+import { Subtitle } from 'web/components/subtitle'
+import { useMemberGroups } from 'web/hooks/use-group'
+import { filterDefined } from 'common/util/array'
+import { keyBy } from 'lodash'
+import { User } from 'common/user'
+import { Group } from 'common/group'
+
+export function ArrangeHome(props: {
+  user: User | null | undefined
+  homeSections: { visible: string[]; hidden: string[] }
+  setHomeSections: (homeSections: {
+    visible: string[]
+    hidden: string[]
+  }) => void
+}) {
+  const { user, homeSections, setHomeSections } = props
+
+  const groups = useMemberGroups(user?.id) ?? []
+  const { itemsById, visibleItems, hiddenItems } = getHomeItems(
+    groups,
+    homeSections
+  )
+
+  return (
+    <DragDropContext
+      onDragEnd={(e) => {
+        const { destination, source, draggableId } = e
+        if (!destination) return
+
+        const item = itemsById[draggableId]
+
+        const newHomeSections = {
+          visible: visibleItems.map((item) => item.id),
+          hidden: hiddenItems.map((item) => item.id),
+        }
+
+        const sourceSection = source.droppableId as 'visible' | 'hidden'
+        newHomeSections[sourceSection].splice(source.index, 1)
+
+        const destSection = destination.droppableId as 'visible' | 'hidden'
+        newHomeSections[destSection].splice(destination.index, 0, item.id)
+
+        setHomeSections(newHomeSections)
+      }}
+    >
+      <Row className="relative max-w-lg gap-4">
+        <DraggableList items={visibleItems} title="Visible" />
+        <DraggableList items={hiddenItems} title="Hidden" />
+      </Row>
+    </DragDropContext>
+  )
+}
+
+function DraggableList(props: {
+  title: string
+  items: { id: string; label: string }[]
+}) {
+  const { title, items } = props
+  return (
+    <Droppable droppableId={title.toLowerCase()}>
+      {(provided, snapshot) => (
+        <Col
+          {...provided.droppableProps}
+          ref={provided.innerRef}
+          className={clsx(
+            'width-[220px] flex-1 items-start rounded bg-gray-50 p-2',
+            snapshot.isDraggingOver && 'bg-gray-100'
+          )}
+        >
+          <Subtitle text={title} className="mx-2 !my-2" />
+          {items.map((item, index) => (
+            <Draggable key={item.id} draggableId={item.id} index={index}>
+              {(provided, snapshot) => (
+                <div
+                  ref={provided.innerRef}
+                  {...provided.draggableProps}
+                  {...provided.dragHandleProps}
+                  style={provided.draggableProps.style}
+                  className={clsx(
+                    'flex flex-row items-center gap-4 rounded bg-gray-50 p-2',
+                    snapshot.isDragging && 'z-[9000] bg-gray-300'
+                  )}
+                >
+                  <MenuIcon
+                    className="h-5 w-5 flex-shrink-0 text-gray-500"
+                    aria-hidden="true"
+                  />{' '}
+                  {item.label}
+                </div>
+              )}
+            </Draggable>
+          ))}
+          {provided.placeholder}
+        </Col>
+      )}
+    </Droppable>
+  )
+}
+
+export const getHomeItems = (
+  groups: Group[],
+  homeSections: { visible: string[]; hidden: string[] }
+) => {
+  const items = [
+    { label: 'Trending', id: 'score' },
+    { label: 'Newest', id: 'newest' },
+    { label: 'Close date', id: 'close-date' },
+    { label: 'Your trades', id: 'your-bets' },
+    ...groups.map((g) => ({
+      label: g.name,
+      id: g.id,
+    })),
+  ]
+  const itemsById = keyBy(items, 'id')
+
+  const { visible, hidden } = homeSections
+
+  const [visibleItems, hiddenItems] = [
+    filterDefined(visible.map((id) => itemsById[id])),
+    filterDefined(hidden.map((id) => itemsById[id])),
+  ]
+
+  // Add unmentioned items to the visible list.
+  visibleItems.push(
+    ...items.filter(
+      (item) => !visibleItems.includes(item) && !hiddenItems.includes(item)
+    )
+  )
+
+  return {
+    visibleItems,
+    hiddenItems,
+    itemsById,
+  }
+}

web/components/auth-context.tsx

@@ -8,18 +8,30 @@ import {
   getUserAndPrivateUser,
   setCachedReferralInfoForUser,
 } from 'web/lib/firebase/users'
-import { deleteTokenCookies, setTokenCookies } 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'
+import { AUTH_COOKIE_NAME } from 'common/envs/constants'
+import { setCookie } from 'web/lib/util/cookie'
 
 // 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.
 type AuthUser = undefined | null | UserAndPrivateUser
 
+const TEN_YEARS_SECS = 60 * 60 * 24 * 365 * 10
 const CACHED_USER_KEY = 'CACHED_USER_KEY_V2'
 
+// Proxy localStorage in case it's not available (eg in incognito iframe)
+const localStorage =
+  typeof window !== 'undefined'
+    ? window.localStorage
+    : {
+        getItem: () => null,
+        setItem: () => {},
+        removeItem: () => {},
+      }
+
 const ensureDeviceToken = () => {
   let deviceToken = localStorage.getItem('device-token')
   if (!deviceToken) {
@@ -29,6 +41,16 @@ const ensureDeviceToken = () => {
   return deviceToken
 }
 
+export const setUserCookie = (cookie: string | undefined) => {
+  const data = setCookie(AUTH_COOKIE_NAME, cookie ?? '', [
+    ['path', '/'],
+    ['max-age', (cookie === undefined ? 0 : TEN_YEARS_SECS).toString()],
+    ['samesite', 'lax'],
+    ['secure'],
+  ])
+  document.cookie = data
+}
+
 export const AuthContext = createContext<AuthUser>(undefined)
 
 export function AuthProvider(props: {
@@ -46,55 +68,67 @@ export function AuthProvider(props: {
   }, [setAuthUser, serverUser])
 
   useEffect(() => {
-    return onIdTokenChanged(auth, async (fbUser) => {
+    if (authUser != null) {
-      if (fbUser) {
+      // Persist to local storage, to reduce login blink next time.
-        setTokenCookies({
+      // Note: Cap on localStorage size is ~5mb
-          id: await fbUser.getIdToken(),
+      localStorage.setItem(CACHED_USER_KEY, JSON.stringify(authUser))
-          refresh: fbUser.refreshToken,
+    } else {
-        })
+      localStorage.removeItem(CACHED_USER_KEY)
-        let current = await getUserAndPrivateUser(fbUser.uid)
+    }
-        if (!current.user || !current.privateUser) {
+  }, [authUser])
-          const deviceToken = ensureDeviceToken()
+
-          current = (await createUser({ deviceToken })) as UserAndPrivateUser
+  useEffect(() => {
+    return onIdTokenChanged(
+      auth,
+      async (fbUser) => {
+        if (fbUser) {
+          setUserCookie(JSON.stringify(fbUser.toJSON()))
+          let current = await getUserAndPrivateUser(fbUser.uid)
+          if (!current.user || !current.privateUser) {
+            const deviceToken = ensureDeviceToken()
+            current = (await createUser({ deviceToken })) as UserAndPrivateUser
+            setCachedReferralInfoForUser(current.user)
+          }
+          setAuthUser(current)
+        } else {
+          // User logged out; reset to null
+          setUserCookie(undefined)
+          setAuthUser(null)
         }
-        setAuthUser(current)
+      },
-        // Persist to local storage, to reduce login blink next time.
+      (e) => {
-        // Note: Cap on localStorage size is ~5mb
+        console.error(e)
-        localStorage.setItem(CACHED_USER_KEY, JSON.stringify(current))
-        setCachedReferralInfoForUser(current.user)
-      } else {
-        // User logged out; reset to null
-        deleteTokenCookies()
-        setAuthUser(null)
-        localStorage.removeItem(CACHED_USER_KEY)
       }
-    })
+    )
   }, [setAuthUser])
 
   const uid = authUser?.user.id
-  const username = authUser?.user.username
   useEffect(() => {
-    if (uid && username) {
+    if (uid) {
       identifyUser(uid)
-      setUserProperty('username', username)
+      const userListener = listenForUser(uid, (user) => {
-      const userListener = listenForUser(uid, (user) =>
+        setAuthUser((currAuthUser) =>
-        setAuthUser((authUser) => {
+          currAuthUser && user ? { ...currAuthUser, user } : null
-          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+        )
-          return { ...authUser!, user: user! }
+      })
-        })
-      )
       const privateUserListener = listenForPrivateUser(uid, (privateUser) => {
-        setAuthUser((authUser) => {
+        setAuthUser((currAuthUser) =>
-          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+          currAuthUser && privateUser ? { ...currAuthUser, privateUser } : null
-          return { ...authUser!, privateUser: privateUser! }
+        )
-        })
       })
       return () => {
         userListener()
         privateUserListener()
       }
     }
-  }, [uid, username, setAuthUser])
+  }, [uid, setAuthUser])
+
+  const username = authUser?.user.username
+  useEffect(() => {
+    if (username != null) {
+      setUserProperty('username', username)
+    }
+  }, [username])
 
   return (
     <AuthContext.Provider value={authUser}>{children}</AuthContext.Provider>

web/components/avatar.tsx

@@ -2,6 +2,7 @@ import Router from 'next/router'
 import clsx from 'clsx'
 import { MouseEvent, useEffect, useState } from 'react'
 import { UserCircleIcon, UserIcon, UsersIcon } from '@heroicons/react/solid'
+import Image from 'next/future/image'
 
 export function Avatar(props: {
   username?: string
@@ -14,6 +15,7 @@ export function Avatar(props: {
   const [avatarUrl, setAvatarUrl] = useState(props.avatarUrl)
   useEffect(() => setAvatarUrl(props.avatarUrl), [props.avatarUrl])
   const s = size == 'xs' ? 6 : size === 'sm' ? 8 : size || 10
+  const sizeInPx = s * 4
 
   const onClick =
     noLink && username
@@ -26,7 +28,9 @@ export function Avatar(props: {
   // there can be no avatar URL or username in the feed, we show a "submit comment"
   // item with a fake grey user circle guy even if you aren't signed in
   return avatarUrl ? (
-    <img
+    <Image
+      width={sizeInPx}
+      height={sizeInPx}
       className={clsx(
         'flex-shrink-0 rounded-full bg-white object-cover',
         `w-${s} h-${s}`,

web/components/bet-button.tsx

@@ -9,7 +9,7 @@ import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { useSaveBinaryShares } from './use-save-binary-shares'
 import { Col } from './layout/col'
 import { Button } from 'web/components/button'
-import { firebaseLogin } from 'web/lib/firebase/users'
+import { BetSignUpPrompt } from './sign-up-prompt'
 
 /** Button that opens BetPanel in a new modal */
 export default function BetButton(props: {
@@ -32,15 +32,20 @@ export default function BetButton(props: {
   return (
     <>
       <Col className={clsx('items-center', className)}>
-        <Button
+        {user ? (
-          size={'lg'}
+          <Button
-          className={clsx('my-auto inline-flex min-w-[75px] ', btnClassName)}
+            size="lg"
-          onClick={() => {
+            className={clsx(
-            !user ? firebaseLogin() : setOpen(true)
+              'my-auto inline-flex min-w-[75px] whitespace-nowrap',
-          }}
+              btnClassName
-        >
+            )}
-          {user ? 'Bet' : 'Sign up to Bet'}
+            onClick={() => setOpen(true)}
-        </Button>
+          >
+            Predict
+          </Button>
+        ) : (
+          <BetSignUpPrompt />
+        )}
 
         {user && (
           <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>

web/components/bet-inline.tsx

@@ -12,7 +12,7 @@ import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
 import { useUnfilledBets } from 'web/hooks/use-bets'
 import { useUser } from 'web/hooks/use-user'
-import { SignUpPrompt } from './sign-up-prompt'
+import { BetSignUpPrompt } from './sign-up-prompt'
 import { getCpmmProbability } from 'common/calculate-cpmm'
 import { Col } from './layout/col'
 import { XIcon } from '@heroicons/react/solid'
@@ -112,7 +112,7 @@ export function BetInline(props: {
               : 'Submit'}
           </Button>
         )}
-        <SignUpPrompt size="xs" />
+        <BetSignUpPrompt size="xs" />
         <button
           onClick={() => {
             setProbAfter(undefined)

web/components/bet-panel.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { clamp, partition, sumBy } from 'lodash'
 
 import { useUser } from 'web/hooks/use-user'
@@ -8,6 +8,7 @@ import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
 import {
+  formatLargeNumber,
   formatMoney,
   formatPercent,
   formatWithCommas,
@@ -28,11 +29,10 @@ 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 { getFormattedMappedValue } from 'common/pseudo-numeric'
+import { getFormattedMappedValue, getMappedValue } from 'common/pseudo-numeric'
 import { SellRow } from './sell-row'
 import { useSaveBinaryShares } from './use-save-binary-shares'
-import { SignUpPrompt } from './sign-up-prompt'
+import { BetSignUpPrompt } from './sign-up-prompt'
-import { isIOS } from 'web/lib/util/device'
 import { ProbabilityOrNumericInput } from './probability-input'
 import { track } from 'web/lib/service/analytics'
 import { useUnfilledBets } from 'web/hooks/use-bets'
@@ -68,27 +68,32 @@ export function BetPanel(props: {
           className
         )}
       >
-        <QuickOrLimitBet
+        {user ? (
-          isLimitOrder={isLimitOrder}
+          <>
-          setIsLimitOrder={setIsLimitOrder}
+            <QuickOrLimitBet
-          hideToggle={!user}
+              isLimitOrder={isLimitOrder}
-        />
+              setIsLimitOrder={setIsLimitOrder}
-        <BuyPanel
+              hideToggle={!user}
-          hidden={isLimitOrder}
+            />
-          contract={contract}
+            <BuyPanel
-          user={user}
+              hidden={isLimitOrder}
-          unfilledBets={unfilledBets}
+              contract={contract}
-        />
+              user={user}
-        <LimitOrderPanel
+              unfilledBets={unfilledBets}
-          hidden={!isLimitOrder}
+            />
-          contract={contract}
+            <LimitOrderPanel
-          user={user}
+              hidden={!isLimitOrder}
-          unfilledBets={unfilledBets}
+              contract={contract}
-        />
+              user={user}
-
+              unfilledBets={unfilledBets}
-        <SignUpPrompt />
+            />
-
+          </>
-        {!user && <PlayMoneyDisclaimer />}
+        ) : (
+          <>
+            <BetSignUpPrompt />
+            <PlayMoneyDisclaimer />
+          </>
+        )}
       </Col>
 
       {user && unfilledBets.length > 0 && (
@@ -146,7 +151,7 @@ export function SimpleBetPanel(props: {
           onBuySuccess={onBetSuccess}
         />
 
-        <SignUpPrompt />
+        <BetSignUpPrompt />
 
         {!user && <PlayMoneyDisclaimer />}
       </Col>
@@ -179,12 +184,12 @@ function BuyPanel(props: {
 
   const [inputRef, focusAmountInput] = useFocus()
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (selected) {
+  //   if (selected) {
-      if (isIOS()) window.scrollTo(0, window.scrollY + 200)
+  //     if (isIOS()) window.scrollTo(0, window.scrollY + 200)
-      focusAmountInput()
+  //     focusAmountInput()
-    }
+  //   }
-  }, [selected, focusAmountInput])
+  // }, [selected, focusAmountInput])
 
   function onBetChoice(choice: 'YES' | 'NO') {
     setOutcome(choice)
@@ -252,17 +257,43 @@ function BuyPanel(props: {
   const resultProb = getCpmmProbability(newPool, newP)
   const probStayedSame =
     formatPercent(resultProb) === formatPercent(initialProb)
+
   const probChange = Math.abs(resultProb - initialProb)
-
   const currentPayout = newBet.shares
-
   const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
   const currentReturnPercent = formatPercent(currentReturn)
 
   const format = getFormattedMappedValue(contract)
 
+  const getValue = getMappedValue(contract)
+  const rawDifference = Math.abs(getValue(resultProb) - getValue(initialProb))
+  const displayedDifference = isPseudoNumeric
+    ? formatLargeNumber(rawDifference)
+    : formatPercent(rawDifference)
+
   const bankrollFraction = (betAmount ?? 0) / (user?.balance ?? 1e9)
 
+  const warning =
+    (betAmount ?? 0) > 10 &&
+    bankrollFraction >= 0.5 &&
+    bankrollFraction <= 1 ? (
+      <AlertBox
+        title="Whoa, there!"
+        text={`You might not want to spend ${formatPercent(
+          bankrollFraction
+        )} of your balance on a single trade. \n\nCurrent balance: ${formatMoney(
+          user?.balance ?? 0
+        )}`}
+      />
+    ) : (betAmount ?? 0) > 10 && probChange >= 0.3 && bankrollFraction <= 1 ? (
+      <AlertBox
+        title="Whoa, there!"
+        text={`Are you sure you want to move the market by ${displayedDifference}?`}
+      />
+    ) : (
+      <></>
+    )
+
   return (
     <Col className={hidden ? 'hidden' : ''}>
       <div className="my-3 text-left text-sm text-gray-500">
@@ -276,7 +307,13 @@ function BuyPanel(props: {
         isPseudoNumeric={isPseudoNumeric}
       />
 
-      <div className="my-3 text-left text-sm text-gray-500">Amount</div>
+      <Row className="my-3 justify-between text-left text-sm text-gray-500">
+        Amount
+        <span className={'xl:hidden'}>
+          Balance: {formatMoney(user?.balance ?? 0)}
+        </span>
+      </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -285,35 +322,10 @@ function BuyPanel(props: {
         setError={setError}
         disabled={isSubmitting}
         inputRef={inputRef}
+        showSliderOnMobile
       />
 
-      {(betAmount ?? 0) > 10 &&
+      {warning}
-      bankrollFraction >= 0.5 &&
-      bankrollFraction <= 1 ? (
-        <AlertBox
-          title="Whoa, there!"
-          text={`You might not want to spend ${formatPercent(
-            bankrollFraction
-          )} of your balance on a single bet. \n\nCurrent balance: ${formatMoney(
-            user?.balance ?? 0
-          )}`}
-        />
-      ) : (
-        ''
-      )}
-
-      {(betAmount ?? 0) > 10 && probChange >= 0.3 ? (
-        <AlertBox
-          title="Whoa, there!"
-          text={`Are you sure you want to move the market ${
-            isPseudoNumeric && contract.isLogScale
-              ? 'this much'
-              : format(probChange)
-          }?`}
-        />
-      ) : (
-        ''
-      )}
 
       <Col className="mt-3 w-full gap-3">
         <Row className="items-center justify-between text-sm">
@@ -342,9 +354,6 @@ function BuyPanel(props: {
                 </>
               )}
             </div>
-            {/* <InfoTooltip
-              text={`Includes ${formatMoneyWithDecimals(totalFees)} in fees`}
-            /> */}
           </Row>
           <div>
             <span className="mr-2 whitespace-nowrap">
@@ -370,11 +379,11 @@ function BuyPanel(props: {
           )}
           onClick={betDisabled ? undefined : submitBet}
         >
-          {isSubmitting ? 'Submitting...' : 'Submit bet'}
+          {isSubmitting ? 'Submitting...' : 'Submit'}
         </button>
       )}
 
-      {wasSubmitted && <div className="mt-4">Bet submitted!</div>}
+      {wasSubmitted && <div className="mt-4">Trade submitted!</div>}
     </Col>
   )
 }
@@ -560,7 +569,7 @@ function LimitOrderPanel(props: {
       <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
+            Buy {isPseudoNumeric ? <HigherLabel /> : <YesLabel />} up to
           </div>
           <ProbabilityOrNumericInput
             contract={contract}
@@ -571,7 +580,7 @@ function LimitOrderPanel(props: {
         </Col>
         <Col className="gap-2">
           <div className="ml-1 text-sm text-gray-500">
-            Bet {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} at
+            Buy {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} down to
           </div>
           <ProbabilityOrNumericInput
             contract={contract}
@@ -594,9 +603,15 @@ function LimitOrderPanel(props: {
         </div>
       )}
 
-      <div className="mt-1 mb-3 text-left text-sm text-gray-500">
+      <Row className="mt-1 mb-3 justify-between text-left text-sm text-gray-500">
-        Max amount<span className="ml-1 text-red-500">*</span>
+        <span>
-      </div>
+          Max amount<span className="ml-1 text-red-500">*</span>
+        </span>
+        <span className={'xl:hidden'}>
+          Balance: {formatMoney(user?.balance ?? 0)}
+        </span>
+      </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -604,6 +619,7 @@ function LimitOrderPanel(props: {
         error={error}
         setError={setError}
         disabled={isSubmitting}
+        showSliderOnMobile
       />
 
       <Col className="mt-3 w-full gap-3">
@@ -734,15 +750,16 @@ function QuickOrLimitBet(props: {
 
   return (
     <Row className="align-center mb-4 justify-between">
-      <div className="text-4xl">Bet</div>
+      <div className="mr-2 -ml-2 shrink-0 text-3xl sm:-ml-0">Predict</div>
       {!hideToggle && (
-        <Row className="mt-1 items-center gap-2">
+        <Row className="mt-1 ml-1 items-center gap-1.5 sm:ml-0 sm:gap-2">
           <PillButton
             selected={!isLimitOrder}
             onSelect={() => {
               setIsLimitOrder(false)
               track('select quick order')
             }}
+            xs={true}
           >
             Quick
           </PillButton>
@@ -752,6 +769,7 @@ function QuickOrLimitBet(props: {
               setIsLimitOrder(true)
               track('select limit order')
             }}
+            xs={true}
           >
             Limit
           </PillButton>

web/components/bets-list.tsx

@@ -1,23 +1,13 @@
 import Link from 'next/link'
-import {
+import { keyBy, groupBy, mapValues, sortBy, partition, sumBy } from 'lodash'
-  Dictionary,
-  keyBy,
-  groupBy,
-  mapValues,
-  sortBy,
-  partition,
-  sumBy,
-  uniq,
-} from 'lodash'
 import dayjs from 'dayjs'
-import { useEffect, useMemo, useState } from 'react'
+import { 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'
 import {
-  formatLargeNumber,
   formatMoney,
   formatPercent,
   formatWithCommas,
@@ -28,10 +18,8 @@ import {
   Contract,
   contractPath,
   getBinaryProbPercent,
-  getContractFromId,
 } from 'web/lib/firebase/contracts'
 import { Row } from './layout/row'
-import { UserLink } from './user-page'
 import { sellBet } from 'web/lib/firebase/api'
 import { ConfirmationButton } from './confirmation-button'
 import { OutcomeLabel, YesLabel, NoLabel } from './outcome-label'
@@ -46,8 +34,6 @@ import {
   resolvedPayout,
   getContractBetNullMetrics,
 } from 'common/calculate'
-import { useTimeSinceFirstRender } from 'web/hooks/use-time-since-first-render'
-import { trackLatency } from 'web/lib/firebase/tracking'
 import { NumericContract } from 'common/contract'
 import { formatNumericProbability } from 'common/pseudo-numeric'
 import { useUser } from 'web/hooks/use-user'
@@ -56,9 +42,10 @@ import { SellSharesModal } from './sell-modal'
 import { useUnfilledBets } from 'web/hooks/use-bets'
 import { LimitBet } from 'common/bet'
 import { floatingEqual } from 'common/util/math'
-import { filterDefined } from 'common/util/array'
 import { Pagination } from './pagination'
 import { LimitOrderTable } from './limit-bets'
+import { UserLink } from 'web/components/user-link'
+import { useUserBetContracts } from 'web/hooks/use-contracts'
 
 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
@@ -72,26 +59,22 @@ export function BetsList(props: { user: User }) {
   const signedInUser = useUser()
   const isYourBets = user.id === signedInUser?.id
   const hideBetsBefore = isYourBets ? 0 : JUNE_1_2022
-  const userBets = useUserBets(user.id, { includeRedemptions: true })
+  const userBets = useUserBets(user.id)
-  const [contractsById, setContractsById] = useState<
-    Dictionary<Contract> | undefined
-  >()
 
   // Hide bets before 06-01-2022 if this isn't your own profile
   // NOTE: This means public profits also begin on 06-01-2022 as well.
   const bets = useMemo(
-    () => userBets?.filter((bet) => bet.createdTime >= (hideBetsBefore ?? 0)),
+    () =>
+      userBets?.filter(
+        (bet) => !bet.isAnte && bet.createdTime >= (hideBetsBefore ?? 0)
+      ),
     [userBets, hideBetsBefore]
   )
 
-  useEffect(() => {
+  const contractList = useUserBetContracts(user.id)
-    if (bets) {
+  const contractsById = useMemo(() => {
-      const contractIds = uniq(bets.map((b) => b.contractId))
+    return contractList ? keyBy(contractList, 'id') : undefined
-      Promise.all(contractIds.map(getContractFromId)).then((contracts) => {
+  }, [contractList])
-        setContractsById(keyBy(filterDefined(contracts), 'id'))
-      })
-    }
-  }, [bets])
 
   const [sort, setSort] = useState<BetSort>('newest')
   const [filter, setFilter] = useState<BetFilter>('open')
@@ -99,13 +82,6 @@ export function BetsList(props: { user: User }) {
   const start = page * CONTRACTS_PER_PAGE
   const end = start + CONTRACTS_PER_PAGE
 
-  const getTime = useTimeSinceFirstRender()
-  useEffect(() => {
-    if (bets && contractsById && signedInUser) {
-      trackLatency(signedInUser.id, 'portfolio', getTime())
-    }
-  }, [signedInUser, bets, contractsById, getTime])
-
   if (!bets || !contractsById) {
     return <LoadingIndicator />
   }
@@ -185,7 +161,7 @@ export function BetsList(props: { user: User }) {
     ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100
 
   return (
-    <Col className="mt-6">
+    <Col>
       <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
         <Row className="gap-8">
           <Col>
@@ -233,26 +209,27 @@ export function BetsList(props: { user: User }) {
 
       <Col className="mt-6 divide-y">
         {displayedContracts.length === 0 ? (
-          <NoBets user={user} />
+          <NoMatchingBets />
         ) : (
-          displayedContracts.map((contract) => (
+          <>
-            <ContractBets
+            {displayedContracts.map((contract) => (
-              key={contract.id}
+              <ContractBets
-              contract={contract}
+                key={contract.id}
-              bets={contractBets[contract.id] ?? []}
+                contract={contract}
-              metric={sort === 'profit' ? 'profit' : 'value'}
+                bets={contractBets[contract.id] ?? []}
-              isYourBets={isYourBets}
+                metric={sort === 'profit' ? 'profit' : 'value'}
+                isYourBets={isYourBets}
+              />
+            ))}
+            <Pagination
+              page={page}
+              itemsPerPage={CONTRACTS_PER_PAGE}
+              totalItems={filteredContracts.length}
+              setPage={setPage}
             />
-          ))
+          </>
         )}
       </Col>
-
-      <Pagination
-        page={page}
-        itemsPerPage={CONTRACTS_PER_PAGE}
-        totalItems={filteredContracts.length}
-        setPage={setPage}
-      />
     </Col>
   )
 }
@@ -260,7 +237,7 @@ export function BetsList(props: { user: User }) {
 const NoBets = ({ user }: { user: User }) => {
   const me = useUser()
   return (
-    <div className="mx-4 text-gray-500">
+    <div className="mx-4 py-4 text-gray-500">
       {user.id === me?.id ? (
         <>
           You have not made any bets yet.{' '}
@@ -274,6 +251,11 @@ const NoBets = ({ user }: { user: User }) => {
     </div>
   )
 }
+const NoMatchingBets = () => (
+  <div className="mx-4 py-4 text-gray-500">
+    No bets matching the current filter.
+  </div>
+)
 
 function ContractBets(props: {
   contract: Contract
@@ -405,19 +387,16 @@ export function BetsSummary(props: {
   const isClosed = closeTime && Date.now() > closeTime
 
   const bets = props.bets.filter((b) => !b.isAnte)
-  const { hasShares } = getContractBetMetrics(contract, bets)
+  const { hasShares, invested, profitPercent, payout, profit, totalShares } =
+    getContractBetMetrics(contract, bets)
 
-  const excludeSalesAndAntes = bets.filter(
+  const excludeSales = bets.filter((b) => !b.isSold && !b.sale)
-    (b) => !b.isAnte && !b.isSold && !b.sale
+  const yesWinnings = sumBy(excludeSales, (bet) =>
-  )
-  const yesWinnings = sumBy(excludeSalesAndAntes, (bet) =>
     calculatePayout(contract, bet, 'YES')
   )
-  const noWinnings = sumBy(excludeSalesAndAntes, (bet) =>
+  const noWinnings = sumBy(excludeSales, (bet) =>
     calculatePayout(contract, bet, 'NO')
   )
-  const { invested, profitPercent, payout, profit, totalShares } =
-    getContractBetMetrics(contract, bets)
 
   const [showSellModal, setShowSellModal] = useState(false)
   const user = useUser()
@@ -500,27 +479,10 @@ export function BetsSummary(props: {
               <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
+              Expected value
             </div>
             <div className="whitespace-nowrap">{formatMoney(payout)}</div>
           </Col>

web/components/button.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { MouseEventHandler, ReactNode } from 'react'
 import clsx from 'clsx'
 
 export type SizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
@@ -14,7 +14,7 @@ export type ColorType =
 
 export function Button(props: {
   className?: string
-  onClick?: () => void
+  onClick?: MouseEventHandler<any> | undefined
   children?: ReactNode
   size?: SizeType
   color?: ColorType
@@ -37,8 +37,8 @@ export function Button(props: {
     sm: 'px-3 py-2 text-sm',
     md: 'px-4 py-2 text-sm',
     lg: 'px-4 py-2 text-base',
-    xl: 'px-6 py-3 text-base',
+    xl: 'px-6 py-2.5 text-base font-semibold',
-    '2xl': 'px-6 py-3 text-xl',
+    '2xl': 'px-6 py-3 text-xl font-semibold',
   }[size]
 
   return (
@@ -52,9 +52,9 @@ export function Button(props: {
         color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
         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' && 'bg-gray-50 text-gray-600 hover:bg-gray-200',
         color === 'gradient' &&
-          'bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
+          'border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
         color === 'gray-white' &&
           'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200',
         className

web/components/buttons/pill-button.tsx

@@ -5,19 +5,19 @@ export function PillButton(props: {
   selected: boolean
   onSelect: () => void
   color?: string
-  big?: boolean
+  xs?: boolean
   children: ReactNode
 }) {
-  const { children, selected, onSelect, color, big } = props
+  const { children, selected, onSelect, color, xs } = props
 
   return (
     <button
       className={clsx(
-        'cursor-pointer select-none whitespace-nowrap rounded-full',
+        'cursor-pointer select-none whitespace-nowrap rounded-full px-3 py-1.5 text-sm',
+        xs ? 'text-xs' : '',
         selected
           ? ['text-white', color ?? 'bg-greyscale-6']
-          : 'bg-greyscale-2 hover:bg-greyscale-3',
+          : 'bg-greyscale-2 hover:bg-greyscale-3'
-        big ? 'px-8 py-2' : 'px-3 py-1.5 text-sm'
       )}
       onClick={onSelect}
     >

web/components/carousel.tsx

@@ -0,0 +1,72 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'
+import clsx from 'clsx'
+import { throttle } from 'lodash'
+import { ReactNode, useRef, useState, useEffect } from 'react'
+import { Row } from './layout/row'
+import { VisibilityObserver } from 'web/components/visibility-observer'
+
+export function Carousel(props: {
+  children: ReactNode
+  loadMore?: () => void
+  className?: string
+}) {
+  const { children, loadMore, className } = props
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  const th = (f: () => any) => throttle(f, 500, { trailing: false })
+  const scrollLeft = th(() =>
+    ref.current?.scrollBy({ left: -ref.current.clientWidth })
+  )
+  const scrollRight = th(() =>
+    ref.current?.scrollBy({ left: ref.current.clientWidth })
+  )
+
+  const [atFront, setAtFront] = useState(true)
+  const [atBack, setAtBack] = useState(false)
+  const onScroll = throttle(() => {
+    if (ref.current) {
+      const { scrollLeft, clientWidth, scrollWidth } = ref.current
+      setAtFront(scrollLeft < 80)
+      setAtBack(scrollWidth - (clientWidth + scrollLeft) < 80)
+    }
+  }, 500)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(onScroll, [children])
+
+  return (
+    <div className={clsx('relative', className)}>
+      <Row
+        className="scrollbar-hide w-full snap-x gap-4 overflow-x-auto scroll-smooth"
+        ref={ref}
+        onScroll={onScroll}
+      >
+        {children}
+
+        {loadMore && (
+          <VisibilityObserver
+            className="relative -left-96"
+            onVisibilityUpdated={(visible) => visible && loadMore()}
+          />
+        )}
+      </Row>
+      {!atFront && (
+        <div
+          className="absolute left-0 top-0 bottom-0 z-10 flex w-10 cursor-pointer items-center justify-center hover:bg-indigo-100/30"
+          onMouseDown={scrollLeft}
+        >
+          <ChevronLeftIcon className="h-7 w-7 rounded-full bg-indigo-50 text-indigo-700" />
+        </div>
+      )}
+      {!atBack && (
+        <div
+          className="absolute right-0 top-0 bottom-0 z-10 flex w-10 cursor-pointer items-center justify-center hover:bg-indigo-100/30"
+          onMouseDown={scrollRight}
+        >
+          <ChevronRightIcon className="h-7 w-7 rounded-full bg-indigo-50 text-indigo-700" />
+        </div>
+      )}
+    </div>
+  )
+}

web/components/challenges/accept-challenge-button.tsx

@@ -2,7 +2,7 @@ import { User } from 'common/user'
 import { Contract } from 'common/contract'
 import { Challenge } from 'common/challenge'
 import { useEffect, useState } from 'react'
-import { SignUpPrompt } from 'web/components/sign-up-prompt'
+import { BetSignUpPrompt } from 'web/components/sign-up-prompt'
 import { acceptChallenge, APIError } from 'web/lib/firebase/api'
 import { Modal } from 'web/components/layout/modal'
 import { Col } from 'web/components/layout/col'
@@ -27,7 +27,8 @@ export function AcceptChallengeButton(props: {
     setErrorText('')
   }, [open])
 
-  if (!user) return <SignUpPrompt label="Accept this bet" className="mt-4" />
+  if (!user)
+    return <BetSignUpPrompt label="Sign up to accept" className="mt-4" />
 
   const iAcceptChallenge = () => {
     setLoading(true)

web/components/challenges/create-challenge-modal.tsx

@@ -147,7 +147,7 @@ function CreateChallengeForm(props: {
             setFinishedCreating(true)
           }}
         >
-          <Title className="!mt-2" text="Challenge bet " />
+          <Title className="!mt-2 hidden sm:block" text="Challenge bet " />
 
           <div className="mb-8">
             Challenge a friend to bet on{' '}
@@ -170,72 +170,76 @@ function CreateChallengeForm(props: {
             )}
           </div>
 
-          <div className="mt-2 flex flex-col flex-wrap justify-center gap-x-5 gap-y-2">
+          <Col className="mt-2 flex-wrap justify-center gap-x-5 sm:gap-y-2">
-            <div>You'll bet:</div>
+            <Col>
-            <Row
+              <div>You'll bet:</div>
-              className={
+              <Row
-                'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
+                className={
-              }
+                  'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
-            >
-              <AmountInput
-                amount={challengeInfo.amount || undefined}
-                onChange={(newAmount) =>
-                  setChallengeInfo((m: challengeInfo) => {
-                    return {
-                      ...m,
-                      amount: newAmount ?? 0,
-                      acceptorAmount: editingAcceptorAmount
-                        ? m.acceptorAmount
-                        : newAmount ?? 0,
-                    }
-                  })
-                }
-                error={undefined}
-                label={'M$'}
-                inputClassName="w-24"
-              />
-              <span className={''}>on</span>
-              {challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
-            </Row>
-            <Row className={'mt-3 max-w-xs justify-end'}>
-              <Button
-                color={'gray-white'}
-                onClick={() =>
-                  setChallengeInfo((m: challengeInfo) => {
-                    return {
-                      ...m,
-                      outcome: m.outcome === 'YES' ? 'NO' : 'YES',
-                    }
-                  })
                 }
               >
-                <SwitchVerticalIcon className={'h-6 w-6'} />
-              </Button>
-            </Row>
-            <Row className={'items-center'}>If they bet:</Row>
-            <Row className={'max-w-xs items-center justify-between gap-4 pr-3'}>
-              <div className={'w-32 sm:mr-1'}>
                 <AmountInput
-                  amount={challengeInfo.acceptorAmount || undefined}
+                  amount={challengeInfo.amount || undefined}
-                  onChange={(newAmount) => {
+                  onChange={(newAmount) =>
-                    setEditingAcceptorAmount(true)
-
                     setChallengeInfo((m: challengeInfo) => {
                       return {
                         ...m,
-                        acceptorAmount: newAmount ?? 0,
+                        amount: newAmount ?? 0,
+                        acceptorAmount: editingAcceptorAmount
+                          ? m.acceptorAmount
+                          : newAmount ?? 0,
                       }
                     })
-                  }}
+                  }
                   error={undefined}
                   label={'M$'}
                   inputClassName="w-24"
                 />
-              </div>
+                <span className={''}>on</span>
-              <span>on</span>
+                {challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
-              {challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
+              </Row>
-            </Row>
+              <Row className={'mt-3 max-w-xs justify-end'}>
-          </div>
+                <Button
+                  color={'gray-white'}
+                  onClick={() =>
+                    setChallengeInfo((m: challengeInfo) => {
+                      return {
+                        ...m,
+                        outcome: m.outcome === 'YES' ? 'NO' : 'YES',
+                      }
+                    })
+                  }
+                >
+                  <SwitchVerticalIcon className={'h-6 w-6'} />
+                </Button>
+              </Row>
+              <Row className={'items-center'}>If they bet:</Row>
+              <Row
+                className={'max-w-xs items-center justify-between gap-4 pr-3'}
+              >
+                <div className={'w-32 sm:mr-1'}>
+                  <AmountInput
+                    amount={challengeInfo.acceptorAmount || undefined}
+                    onChange={(newAmount) => {
+                      setEditingAcceptorAmount(true)
+
+                      setChallengeInfo((m: challengeInfo) => {
+                        return {
+                          ...m,
+                          acceptorAmount: newAmount ?? 0,
+                        }
+                      })
+                    }}
+                    error={undefined}
+                    label={'M$'}
+                    inputClassName="w-24"
+                  />
+                </div>
+                <span>on</span>
+                {challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
+              </Row>
+            </Col>
+          </Col>
           {contract && (
             <Button
               size="2xs"

web/components/charity/feed-items.tsx

@@ -1,9 +1,9 @@
 import { DonationTxn } from 'common/txn'
 import { Avatar } from '../avatar'
 import { useUserById } from 'web/hooks/use-user'
-import { UserLink } from '../user-page'
 import { manaToUSD } from '../../../common/util/format'
 import { RelativeTimestamp } from '../relative-timestamp'
+import { UserLink } from 'web/components/user-link'
 
 export function Donation(props: { txn: DonationTxn }) {
   const { txn } = props

web/components/comment-input.tsx

@@ -0,0 +1,175 @@
+import { PaperAirplaneIcon } from '@heroicons/react/solid'
+import { Editor } from '@tiptap/react'
+import clsx from 'clsx'
+import { User } from 'common/user'
+import { useEffect, useState } from 'react'
+import { useUser } from 'web/hooks/use-user'
+import { useWindowSize } from 'web/hooks/use-window-size'
+import { MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
+import { Avatar } from './avatar'
+import { TextEditor, useTextEditor } from './editor'
+import { Row } from './layout/row'
+import { LoadingIndicator } from './loading-indicator'
+
+export function CommentInput(props: {
+  replyToUser?: { id: string; username: string }
+  // Reply to a free response answer
+  parentAnswerOutcome?: string
+  // Reply to another comment
+  parentCommentId?: string
+  onSubmitComment?: (editor: Editor, betId: string | undefined) => void
+  className?: string
+  presetId?: string
+}) {
+  const {
+    parentAnswerOutcome,
+    parentCommentId,
+    replyToUser,
+    onSubmitComment,
+    presetId,
+  } = props
+  const user = useUser()
+
+  const { editor, upload } = useTextEditor({
+    simple: true,
+    max: MAX_COMMENT_LENGTH,
+    placeholder:
+      !!parentCommentId || !!parentAnswerOutcome
+        ? 'Write a reply...'
+        : 'Write a comment...',
+  })
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  async function submitComment(betId: string | undefined) {
+    if (!editor || editor.isEmpty || isSubmitting) return
+    setIsSubmitting(true)
+    onSubmitComment?.(editor, betId)
+    setIsSubmitting(false)
+  }
+
+  if (user?.isBannedFromPosting) return <></>
+
+  return (
+    <Row className={clsx(props.className, 'mb-2 gap-1 sm:gap-2')}>
+      <Avatar
+        avatarUrl={user?.avatarUrl}
+        username={user?.username}
+        size="sm"
+        className="mt-2"
+      />
+      <div className="min-w-0 flex-1 pl-0.5 text-sm">
+        <CommentInputTextArea
+          editor={editor}
+          upload={upload}
+          replyToUser={replyToUser}
+          user={user}
+          submitComment={submitComment}
+          isSubmitting={isSubmitting}
+          presetId={presetId}
+        />
+      </div>
+    </Row>
+  )
+}
+
+export function CommentInputTextArea(props: {
+  user: User | undefined | null
+  replyToUser?: { id: string; username: string }
+  editor: Editor | null
+  upload: Parameters<typeof TextEditor>[0]['upload']
+  submitComment: (id?: string) => void
+  isSubmitting: boolean
+  submitOnEnter?: boolean
+  presetId?: string
+}) {
+  const {
+    user,
+    editor,
+    upload,
+    submitComment,
+    presetId,
+    isSubmitting,
+    submitOnEnter,
+    replyToUser,
+  } = props
+  const isMobile = (useWindowSize().width ?? 0) < 768 // TODO: base off input device (keybord vs touch)
+
+  useEffect(() => {
+    editor?.setEditable(!isSubmitting)
+  }, [isSubmitting, editor])
+
+  const submit = () => {
+    submitComment(presetId)
+    editor?.commands?.clearContent()
+  }
+
+  useEffect(() => {
+    if (!editor) {
+      return
+    }
+    // submit on Enter key
+    editor.setOptions({
+      editorProps: {
+        handleKeyDown: (view, event) => {
+          if (
+            submitOnEnter &&
+            event.key === 'Enter' &&
+            !event.shiftKey &&
+            (!isMobile || event.ctrlKey || event.metaKey) &&
+            // mention list is closed
+            !(view.state as any).mention$.active
+          ) {
+            submit()
+            event.preventDefault()
+            return true
+          }
+          return false
+        },
+      },
+    })
+    // insert at mention and focus
+    if (replyToUser) {
+      editor
+        .chain()
+        .setContent({
+          type: 'mention',
+          attrs: { label: replyToUser.username, id: replyToUser.id },
+        })
+        .insertContent(' ')
+        .focus()
+        .run()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor])
+
+  return (
+    <>
+      <TextEditor editor={editor} upload={upload}>
+        {user && !isSubmitting && (
+          <button
+            className="btn btn-ghost btn-sm px-2 disabled:bg-inherit disabled:text-gray-300"
+            disabled={!editor || editor.isEmpty}
+            onClick={submit}
+          >
+            <PaperAirplaneIcon className="m-0 h-[25px] min-w-[22px] rotate-90 p-0" />
+          </button>
+        )}
+
+        {isSubmitting && (
+          <LoadingIndicator spinnerClassName={'border-gray-500'} />
+        )}
+      </TextEditor>
+      <Row>
+        {!user && (
+          <button
+            className={'btn btn-outline btn-sm mt-2 normal-case'}
+            onClick={() => submitComment(presetId)}
+          >
+            Add my comment
+          </button>
+        )}
+      </Row>
+    </>
+  )
+}

web/components/comments-list.tsx

@@ -1,20 +1,23 @@
-import { useEffect, useState } from 'react'
+import { ContractComment } from 'common/comment'
-
-import { Comment, ContractComment } from 'common/comment'
 import { groupConsecutive } from 'common/util/array'
-import { getUsersComments } from 'web/lib/firebase/comments'
+import { getUserCommentsQuery } from 'web/lib/firebase/comments'
+import { usePagination } from 'web/hooks/use-pagination'
 import { SiteLink } from './site-link'
 import { Row } from './layout/row'
 import { Avatar } from './avatar'
 import { RelativeTimestamp } from './relative-timestamp'
-import { UserLink } from './user-page'
 import { User } from 'common/user'
 import { Col } from './layout/col'
 import { Content } from './editor'
-import { Pagination } from './pagination'
 import { LoadingIndicator } from './loading-indicator'
+import { UserLink } from 'web/components/user-link'
+import { PaginationNextPrev } from 'web/components/pagination'
 
-const COMMENTS_PER_PAGE = 50
+type ContractKey = {
+  contractId: string
+  contractSlug: string
+  contractQuestion: string
+}
 
 function contractPath(slug: string) {
   // by convention this includes the contract creator username, but we don't
@@ -24,67 +27,83 @@ function contractPath(slug: string) {
 
 export function UserCommentsList(props: { user: User }) {
   const { user } = props
-  const [comments, setComments] = useState<ContractComment[] | undefined>()
-  const [page, setPage] = useState(0)
-  const start = page * COMMENTS_PER_PAGE
-  const end = start + COMMENTS_PER_PAGE
 
-  useEffect(() => {
+  const page = usePagination({ q: getUserCommentsQuery(user.id), pageSize: 50 })
-    getUsersComments(user.id).then((cs) => {
+  const { isStart, isEnd, getNext, getPrev, getItems, isLoading } = page
-      // we don't show comments in groups here atm, just comments on contracts
-      setComments(
-        cs.filter((c) => c.commentType == 'contract') as ContractComment[]
-      )
-    })
-  }, [user.id])
 
-  if (comments == null) {
+  const pageComments = groupConsecutive(getItems(), (c) => {
+    return {
+      contractId: c.contractId,
+      contractQuestion: c.contractQuestion,
+      contractSlug: c.contractSlug,
+    }
+  })
+
+  if (isLoading) {
     return <LoadingIndicator />
   }
 
-  const pageComments = groupConsecutive(comments.slice(start, end), (c) => {
+  if (pageComments.length === 0) {
-    return { question: c.contractQuestion, slug: c.contractSlug }
+    if (isStart && isEnd) {
-  })
+      return <p>This user hasn't made any comments yet.</p>
+    } else {
+      // this can happen if their comment count is a multiple of page size
+      return <p>No more comments to display.</p>
+    }
+  }
+
   return (
     <Col className={'bg-white'}>
       {pageComments.map(({ key, items }, i) => {
-        return (
+        return <ProfileCommentGroup key={i} groupKey={key} items={items} />
-          <div key={start + i} className="border-b p-5">
-            <SiteLink
-              className="mb-2 block pb-2 font-medium text-indigo-700"
-              href={contractPath(key.slug)}
-            >
-              {key.question}
-            </SiteLink>
-            <Col className="gap-6">
-              {items.map((comment) => (
-                <ProfileComment
-                  key={comment.id}
-                  comment={comment}
-                  className="relative flex items-start space-x-3"
-                />
-              ))}
-            </Col>
-          </div>
-        )
       })}
-      <Pagination
+      <nav
-        page={page}
+        className="border-t border-gray-200 px-4 py-3 sm:px-6"
-        itemsPerPage={COMMENTS_PER_PAGE}
+        aria-label="Pagination"
-        totalItems={comments.length}
+      >
-        setPage={setPage}
+        <PaginationNextPrev
-      />
+          prev={!isStart ? 'Previous' : null}
+          next={!isEnd ? 'Next' : null}
+          onClickPrev={getPrev}
+          onClickNext={getNext}
+          scrollToTop={true}
+        />
+      </nav>
     </Col>
   )
 }
 
-function ProfileComment(props: { comment: Comment; className?: string }) {
+function ProfileCommentGroup(props: {
-  const { comment, className } = props
+  groupKey: ContractKey
+  items: ContractComment[]
+}) {
+  const { groupKey, items } = props
+  const { contractSlug, contractQuestion } = groupKey
+  const path = contractPath(contractSlug)
+  return (
+    <div className="border-b p-5">
+      <SiteLink
+        className="mb-2 block pb-2 font-medium text-indigo-700"
+        href={path}
+      >
+        {contractQuestion}
+      </SiteLink>
+      <Col className="gap-6">
+        {items.map((c) => (
+          <ProfileComment key={c.id} comment={c} />
+        ))}
+      </Col>
+    </div>
+  )
+}
+
+function ProfileComment(props: { comment: ContractComment }) {
+  const { comment } = props
   const { text, content, userUsername, userName, userAvatarUrl, createdTime } =
     comment
   // TODO: find and attach relevant bets by comment betId at some point
   return (
-    <Row className={className}>
+    <Row className="relative flex items-start space-x-3">
       <Avatar username={userUsername} avatarUrl={userAvatarUrl} />
       <div className="min-w-0 flex-1">
         <p className="mt-0.5 text-sm text-gray-500">

web/components/contract-search.tsx

@@ -1,44 +1,35 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import algoliasearch, { SearchIndex } from 'algoliasearch/lite'
+import algoliasearch from 'algoliasearch/lite'
 import { SearchOptions } from '@algolia/client-search'
-
+import { useRouter } from 'next/router'
 import { Contract } from 'common/contract'
 import { User } from 'common/user'
-import { Sort, useQuery, useSort } from '../hooks/use-sort-and-query-params'
 import {
   ContractHighlightOptions,
   ContractsGrid,
 } from './contract/contracts-grid'
 import { ShowTime } from './contract/contract-details'
 import { Row } from './layout/row'
-import { useEffect, useRef, useMemo, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useMemo, ReactNode } from 'react'
-import { unstable_batchedUpdates } from 'react-dom'
 import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { useFollows } from 'web/hooks/use-follows'
+import {
+  storageStore,
+  historyStore,
+  urlParamStore,
+  usePersistentState,
+} from 'web/hooks/use-persistent-state'
+import { safeLocalStorage } from 'web/lib/util/local'
 import { track, trackCallback } from 'web/lib/service/analytics'
 import ContractSearchFirestore from 'web/pages/contract-search-firestore'
 import { useMemberGroups } from 'web/hooks/use-group'
 import { NEW_USER_GROUP_SLUGS } from 'common/group'
 import { PillButton } from './buttons/pill-button'
-import { debounce, sortBy } from 'lodash'
+import { debounce, isEqual, sortBy } from 'lodash'
 import { DEFAULT_CATEGORY_GROUPS } from 'common/categories'
 import { Col } from './layout/col'
-import { safeLocalStorage } from 'web/lib/util/local'
 import clsx from 'clsx'
 
-// TODO: this obviously doesn't work with SSR, common sense would suggest
-// that we should save things like this in cookies so the server has them
-
-const MARKETS_SORT = 'markets_sort'
-
-function setSavedSort(s: Sort) {
-  safeLocalStorage()?.setItem(MARKETS_SORT, s)
-}
-
-function getSavedSort() {
-  return safeLocalStorage()?.getItem(MARKETS_SORT) as Sort | null | undefined
-}
-
 const searchClient = algoliasearch(
   'GJQPAYENIF',
   '75c28fc084a80e1129d427d470cf41a3'
@@ -47,25 +38,29 @@ const searchClient = algoliasearch(
 const indexPrefix = ENV === 'DEV' ? 'dev-' : ''
 const searchIndexName = ENV === 'DEV' ? 'dev-contracts' : 'contractsIndex'
 
-const sortOptions = [
+export const SORTS = [
   { label: 'Newest', value: 'newest' },
   { label: 'Trending', value: 'score' },
   { label: 'Most traded', value: 'most-traded' },
   { label: '24h volume', value: '24-hour-vol' },
+  { label: '24h change', value: 'prob-change-day' },
   { label: 'Last updated', value: 'last-updated' },
   { label: 'Subsidy', value: 'liquidity' },
   { label: 'Close date', value: 'close-date' },
   { label: 'Resolve date', value: 'resolve-date' },
-]
+  { label: 'Highest %', value: 'prob-descending' },
+  { label: 'Lowest %', value: 'prob-ascending' },
+] as const
+
+export type Sort = typeof SORTS[number]['value']
 
 type filter = 'personal' | 'open' | 'closed' | 'resolved' | 'all'
 
 type SearchParameters = {
-  index: SearchIndex
   query: string
-  numericFilters: SearchOptions['numericFilters']
+  sort: Sort
+  openClosedFilter: 'open' | 'closed' | undefined
   facetFilters: SearchOptions['facetFilters']
-  showTime?: ShowTime
 }
 
 type AdditionalFilter = {
@@ -73,6 +68,8 @@ type AdditionalFilter = {
   tag?: string
   excludeContractIds?: string[]
   groupSlug?: string
+  yourBets?: boolean
+  followed?: boolean
 }
 
 export function ContractSearch(props: {
@@ -88,11 +85,15 @@ export function ContractSearch(props: {
     hideQuickBet?: boolean
   }
   headerClassName?: string
-  useQuerySortLocalStorage?: boolean
+  persistPrefix?: string
-  useQuerySortUrlParams?: boolean
+  useQueryUrlParam?: boolean
   isWholePage?: boolean
-  maxItems?: number
   noControls?: boolean
+  maxResults?: number
+  renderContracts?: (
+    contracts: Contract[] | undefined,
+    loadMore: () => void
+  ) => ReactNode
 }) {
   const {
     user,
@@ -104,66 +105,95 @@ export function ContractSearch(props: {
     cardHideOptions,
     highlightOptions,
     headerClassName,
-    useQuerySortLocalStorage,
+    persistPrefix,
-    useQuerySortUrlParams,
+    useQueryUrlParam,
     isWholePage,
-    maxItems,
     noControls,
+    maxResults,
+    renderContracts,
   } = props
 
-  const [numPages, setNumPages] = useState(1)
+  const [state, setState] = usePersistentState(
-  const [pages, setPages] = useState<Contract[][]>([])
+    {
-  const [showTime, setShowTime] = useState<ShowTime | undefined>()
+      numPages: 1,
+      pages: [] as Contract[][],
+      showTime: null as ShowTime | null,
+    },
+    !persistPrefix
+      ? undefined
+      : { key: `${persistPrefix}-search`, store: historyStore() }
+  )
 
-  const searchParameters = useRef<SearchParameters | undefined>()
+  const searchParams = useRef<SearchParameters | null>(null)
+  const searchParamsStore = historyStore<SearchParameters>()
   const requestId = useRef(0)
 
+  useLayoutEffect(() => {
+    if (persistPrefix) {
+      const params = searchParamsStore.get(`${persistPrefix}-params`)
+      if (params !== undefined) {
+        searchParams.current = params
+      }
+    }
+  }, [])
+
+  const searchIndex = useMemo(
+    () => searchClient.initIndex(searchIndexName),
+    [searchIndexName]
+  )
+
   const performQuery = async (freshQuery?: boolean) => {
-    if (searchParameters.current === undefined) {
+    if (searchParams.current == null) {
       return
     }
-    const params = searchParameters.current
+    const { query, sort, openClosedFilter, facetFilters } = searchParams.current
     const id = ++requestId.current
-    const requestedPage = freshQuery ? 0 : pages.length
+    const requestedPage = freshQuery ? 0 : state.pages.length
-    if (freshQuery || requestedPage < numPages) {
+    if (freshQuery || requestedPage < state.numPages) {
-      const results = await params.index.search(params.query, {
+      const index = query
-        facetFilters: params.facetFilters,
+        ? searchIndex
-        numericFilters: params.numericFilters,
+        : searchClient.initIndex(`${indexPrefix}contracts-${sort}`)
+      const numericFilters = query
+        ? []
+        : [
+            openClosedFilter === 'open' ? `closeTime > ${Date.now()}` : '',
+            openClosedFilter === 'closed' ? `closeTime <= ${Date.now()}` : '',
+          ].filter((f) => f)
+      const results = await index.search(query, {
+        facetFilters,
+        numericFilters,
         page: requestedPage,
         hitsPerPage: 20,
       })
       // if there's a more recent request, forget about this one
       if (id === requestId.current) {
         const newPage = results.hits as any as Contract[]
-        // this spooky looking function is the easiest way to get react to
+        const showTime =
-        // batch this and not do multiple renders. we can throw it out in react 18.
+          sort === 'close-date' || sort === 'resolve-date' ? sort : null
-        // see https://github.com/reactwg/react-18/discussions/21
+        const pages = freshQuery ? [newPage] : [...state.pages, newPage]
-        unstable_batchedUpdates(() => {
+        setState({ numPages: results.nbPages, pages, showTime })
-          setShowTime(params.showTime)
+        if (freshQuery && isWholePage) window.scrollTo(0, 0)
-          setNumPages(results.nbPages)
-          if (freshQuery) {
-            setPages([newPage])
-            if (isWholePage) window.scrollTo(0, 0)
-          } else {
-            setPages((pages) => [...pages, newPage])
-          }
-        })
       }
     }
   }
 
   const onSearchParametersChanged = useRef(
     debounce((params) => {
-      searchParameters.current = params
+      if (!isEqual(searchParams.current, params)) {
-      performQuery(true)
+        if (persistPrefix) {
+          searchParamsStore.set(`${persistPrefix}-params`, params)
+        }
+        searchParams.current = params
+        performQuery(true)
+      }
     }, 100)
   ).current
 
-  const contracts = pages
+  const contracts = state.pages
     .flat()
     .filter((c) => !additionalFilter?.excludeContractIds?.includes(c.id))
   const renderedContracts =
-    pages.length === 0 ? undefined : contracts.slice(0, maxItems)
+    state.pages.length === 0 ? undefined : contracts.slice(0, maxResults)
 
   if (IS_PRIVATE_MANIFOLD || process.env.NEXT_PUBLIC_FIREBASE_EMULATE) {
     return <ContractSearchFirestore additionalFilter={additionalFilter} />
@@ -177,20 +207,24 @@ export function ContractSearch(props: {
         defaultFilter={defaultFilter}
         additionalFilter={additionalFilter}
         hideOrderSelector={hideOrderSelector}
-        useQuerySortLocalStorage={useQuerySortLocalStorage}
+        persistPrefix={persistPrefix ? `${persistPrefix}-controls` : undefined}
-        useQuerySortUrlParams={useQuerySortUrlParams}
+        useQueryUrlParam={useQueryUrlParam}
         user={user}
         onSearchParametersChanged={onSearchParametersChanged}
         noControls={noControls}
       />
-      <ContractsGrid
+      {renderContracts ? (
-        contracts={renderedContracts}
+        renderContracts(renderedContracts, performQuery)
-        loadMore={noControls ? undefined : performQuery}
+      ) : (
-        showTime={showTime}
+        <ContractsGrid
-        onContractClick={onContractClick}
+          contracts={renderedContracts}
-        highlightOptions={highlightOptions}
+          loadMore={noControls ? undefined : performQuery}
-        cardHideOptions={cardHideOptions}
+          showTime={state.showTime ?? undefined}
-      />
+          onContractClick={onContractClick}
+          highlightOptions={highlightOptions}
+          cardHideOptions={cardHideOptions}
+        />
+      )}
     </Col>
   )
 }
@@ -202,8 +236,8 @@ function ContractSearchControls(props: {
   additionalFilter?: AdditionalFilter
   hideOrderSelector?: boolean
   onSearchParametersChanged: (params: SearchParameters) => void
-  useQuerySortLocalStorage?: boolean
+  persistPrefix?: string
-  useQuerySortUrlParams?: boolean
+  useQueryUrlParam?: boolean
   user?: User | null
   noControls?: boolean
 }) {
@@ -214,25 +248,36 @@ function ContractSearchControls(props: {
     additionalFilter,
     hideOrderSelector,
     onSearchParametersChanged,
-    useQuerySortLocalStorage,
+    persistPrefix,
-    useQuerySortUrlParams,
+    useQueryUrlParam,
     user,
     noControls,
   } = props
 
-  const savedSort = useQuerySortLocalStorage ? getSavedSort() : null
+  const router = useRouter()
-  const initialSort = savedSort ?? defaultSort ?? 'score'
+  const [query, setQuery] = usePersistentState(
-  const querySortOpts = { useUrl: !!useQuerySortUrlParams }
+    '',
-  const [sort, setSort] = useSort(initialSort, querySortOpts)
+    !useQueryUrlParam
-  const [query, setQuery] = useQuery('', querySortOpts)
+      ? undefined
-  const [filter, setFilter] = useState<filter>(defaultFilter ?? 'open')
+      : {
-  const [pillFilter, setPillFilter] = useState<string | undefined>(undefined)
+          key: 'q',
+          store: urlParamStore(router),
+        }
+  )
 
-  useEffect(() => {
+  const [state, setState] = usePersistentState(
-    if (useQuerySortLocalStorage) {
+    {
-      setSavedSort(sort)
+      sort: defaultSort ?? 'score',
-    }
+      filter: defaultFilter ?? 'open',
-  }, [sort])
+      pillFilter: null as string | null,
+    },
+    !persistPrefix
+      ? undefined
+      : {
+          key: `${persistPrefix}-params`,
+          store: storageStore(safeLocalStorage()),
+        }
+  )
 
   const follows = useFollows(user?.id)
   const memberGroups = (useMemberGroups(user?.id) ?? []).filter(
@@ -244,13 +289,26 @@ function ContractSearchControls(props: {
       : DEFAULT_CATEGORY_GROUPS.map((g) => g.slug)
 
   const memberPillGroups = sortBy(
-    memberGroups.filter((group) => group.contractIds.length > 0),
+    memberGroups.filter((group) => group.totalContracts > 0),
-    (group) => group.contractIds.length
+    (group) => group.totalContracts
   ).reverse()
 
   const pillGroups: { name: string; slug: string }[] =
     memberPillGroups.length > 0 ? memberPillGroups : DEFAULT_CATEGORY_GROUPS
 
+  const personalFilters = user
+    ? [
+        // Show contracts in groups that the user is a member of.
+        memberGroupSlugs
+          .map((slug) => `groupLinks.slug:${slug}`)
+          // Or, show contracts created by users the user follows
+          .concat(follows?.map((followId) => `creatorId:${followId}`) ?? []),
+
+        // Subtract contracts you bet on, to show new ones.
+        `uniqueBettorIds:-${user.id}`,
+      ]
+    : []
+
   const additionalFilters = [
     additionalFilter?.creatorId
       ? `creatorId:${additionalFilter.creatorId}`
@@ -259,6 +317,11 @@ function ContractSearchControls(props: {
     additionalFilter?.groupSlug
       ? `groupLinks.slug:${additionalFilter.groupSlug}`
       : '',
+    additionalFilter?.yourBets && user
+      ? // Show contracts bet on by the user
+        `uniqueBettorIds:${user.id}`
+      : '',
+    ...(additionalFilter?.followed ? personalFilters : []),
   ]
   const facetFilters = query
     ? additionalFilters
@@ -266,41 +329,31 @@ function ContractSearchControls(props: {
         ...additionalFilters,
         additionalFilter ? '' : 'visibility:public',
 
-        filter === 'open' ? 'isResolved:false' : '',
+        state.filter === 'open' ? 'isResolved:false' : '',
-        filter === 'closed' ? 'isResolved:false' : '',
+        state.filter === 'closed' ? 'isResolved:false' : '',
-        filter === 'resolved' ? 'isResolved:true' : '',
+        state.filter === 'resolved' ? 'isResolved:true' : '',
 
-        pillFilter && pillFilter !== 'personal' && pillFilter !== 'your-bets'
+        state.pillFilter &&
-          ? `groupLinks.slug:${pillFilter}`
+        state.pillFilter !== 'personal' &&
+        state.pillFilter !== 'your-bets'
+          ? `groupLinks.slug:${state.pillFilter}`
           : '',
-        pillFilter === 'personal'
+        ...(state.pillFilter === 'personal' ? personalFilters : []),
-          ? // Show contracts in groups that the user is a member of
+        state.pillFilter === 'your-bets' && user
-            memberGroupSlugs
-              .map((slug) => `groupLinks.slug:${slug}`)
-              // Show contracts created by users the user follows
-              .concat(follows?.map((followId) => `creatorId:${followId}`) ?? [])
-              // Show contracts bet on by users the user follows
-              .concat(
-                follows?.map((followId) => `uniqueBettorIds:${followId}`) ?? []
-              )
-          : '',
-        // Subtract contracts you bet on from For you.
-        pillFilter === 'personal' && user ? `uniqueBettorIds:-${user.id}` : '',
-        pillFilter === 'your-bets' && user
           ? // Show contracts bet on by the user
             `uniqueBettorIds:${user.id}`
           : '',
       ].filter((f) => f)
 
-  const numericFilters = query
+  const openClosedFilter =
-    ? []
+    state.filter === 'open'
-    : [
+      ? 'open'
-        filter === 'open' ? `closeTime > ${Date.now()}` : '',
+      : state.filter === 'closed'
-        filter === 'closed' ? `closeTime <= ${Date.now()}` : '',
+      ? 'closed'
-      ].filter((f) => f)
+      : undefined
 
-  const selectPill = (pill: string | undefined) => () => {
+  const selectPill = (pill: string | null) => () => {
-    setPillFilter(pill)
+    setState({ ...state, pillFilter: pill })
     track('select search category', { category: pill ?? 'all' })
   }
 
@@ -309,34 +362,25 @@ function ContractSearchControls(props: {
   }
 
   const selectFilter = (newFilter: filter) => {
-    if (newFilter === filter) return
+    if (newFilter === state.filter) return
-    setFilter(newFilter)
+    setState({ ...state, filter: newFilter })
     track('select search filter', { filter: newFilter })
   }
 
   const selectSort = (newSort: Sort) => {
-    if (newSort === sort) return
+    if (newSort === state.sort) return
-    setSort(newSort)
+    setState({ ...state, sort: newSort })
     track('select search sort', { sort: newSort })
   }
 
-  const indexName = `${indexPrefix}contracts-${sort}`
-  const index = useMemo(() => searchClient.initIndex(indexName), [indexName])
-  const searchIndex = useMemo(
-    () => searchClient.initIndex(searchIndexName),
-    [searchIndexName]
-  )
-
   useEffect(() => {
     onSearchParametersChanged({
-      index: query ? searchIndex : index,
       query: query,
-      numericFilters: numericFilters,
+      sort: state.sort,
+      openClosedFilter: openClosedFilter,
       facetFilters: facetFilters,
-      showTime:
-        sort === 'close-date' || sort === 'resolve-date' ? sort : undefined,
     })
-  }, [query, index, searchIndex, filter, JSON.stringify(facetFilters)])
+  }, [query, state.sort, openClosedFilter, JSON.stringify(facetFilters)])
 
   if (noControls) {
     return <></>
@@ -351,14 +395,14 @@ function ContractSearchControls(props: {
           type="text"
           value={query}
           onChange={(e) => updateQuery(e.target.value)}
-          onBlur={trackCallback('search', { query })}
+          onBlur={trackCallback('search', { query: query })}
           placeholder={'Search'}
           className="input input-bordered w-full"
         />
         {!query && (
           <select
             className="select select-bordered"
-            value={filter}
+            value={state.filter}
             onChange={(e) => selectFilter(e.target.value as filter)}
           >
             <option value="open">Open</option>
@@ -370,10 +414,10 @@ function ContractSearchControls(props: {
         {!hideOrderSelector && !query && (
           <select
             className="select select-bordered"
-            value={sort}
+            value={state.sort}
             onChange={(e) => selectSort(e.target.value as Sort)}
           >
-            {sortOptions.map((option) => (
+            {SORTS.map((option) => (
               <option key={option.value} value={option.value}>
                 {option.label}
               </option>
@@ -386,14 +430,14 @@ function ContractSearchControls(props: {
         <Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
           <PillButton
             key={'all'}
-            selected={pillFilter === undefined}
+            selected={state.pillFilter === undefined}
-            onSelect={selectPill(undefined)}
+            onSelect={selectPill(null)}
           >
             All
           </PillButton>
           <PillButton
             key={'personal'}
-            selected={pillFilter === 'personal'}
+            selected={state.pillFilter === 'personal'}
             onSelect={selectPill('personal')}
           >
             {user ? 'For you' : 'Featured'}
@@ -402,10 +446,10 @@ function ContractSearchControls(props: {
           {user && (
             <PillButton
               key={'your-bets'}
-              selected={pillFilter === 'your-bets'}
+              selected={state.pillFilter === 'your-bets'}
               onSelect={selectPill('your-bets')}
             >
-              Your bets
+              Your trades
             </PillButton>
           )}
 
@@ -413,7 +457,7 @@ function ContractSearchControls(props: {
             return (
               <PillButton
                 key={slug}
-                selected={pillFilter === slug}
+                selected={state.pillFilter === slug}
                 onSelect={selectPill(slug)}
               >
                 {name}

web/components/contract/FeaturedContractBadge.tsx

@@ -1,9 +0,0 @@
-import { SparklesIcon } from '@heroicons/react/solid'
-
-export function FeaturedContractBadge() {
-  return (
-    <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-3  py-0.5 text-sm font-medium text-blue-800">
-      <SparklesIcon className="h-4 w-4" aria-hidden="true" /> Featured
-    </span>
-  )
-}

web/components/contract/contract-card.tsx

@@ -35,20 +35,22 @@ import { Tooltip } from '../tooltip'
 
 export function ContractCard(props: {
   contract: Contract
-  showHotVolume?: boolean
   showTime?: ShowTime
   className?: string
+  questionClass?: string
   onClick?: () => void
   hideQuickBet?: boolean
   hideGroupLink?: boolean
+  trackingPostfix?: string
 }) {
   const {
-    showHotVolume,
     showTime,
     className,
+    questionClass,
     onClick,
     hideQuickBet,
     hideGroupLink,
+    trackingPostfix,
   } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const { question, outcomeType } = contract
@@ -68,45 +70,20 @@ export function ContractCard(props: {
   return (
     <Row
       className={clsx(
-        'relative gap-3 self-start rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
+        'group  relative gap-3 rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
         className
       )}
     >
-      <Col className="group relative flex-1 gap-3 py-4 pb-12  pl-6">
+      <Col className="relative flex-1 gap-3 py-4 pb-12  pl-6">
-        {onClick ? (
-          <a
-            className="absolute top-0 left-0 right-0 bottom-0"
-            href={contractPath(contract)}
-            onClick={(e) => {
-              // Let the browser handle the link click (opens in new tab).
-              if (e.ctrlKey || e.metaKey) return
-
-              e.preventDefault()
-              track('click market card', {
-                slug: contract.slug,
-                contractId: contract.id,
-              })
-              onClick()
-            }}
-          />
-        ) : (
-          <Link href={contractPath(contract)}>
-            <a
-              onClick={trackCallback('click market card', {
-                slug: contract.slug,
-                contractId: contract.id,
-              })}
-              className="absolute top-0 left-0 right-0 bottom-0"
-            />
-          </Link>
-        )}
         <AvatarDetails
           contract={contract}
           className={'hidden md:inline-flex'}
         />
         <p
-          className="break-words font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2"
+          className={clsx(
-          style={{ /* For iOS safari */ wordBreak: 'break-word' }}
+            'break-anywhere font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2',
+            questionClass
+          )}
         >
           {question}
         </p>
@@ -124,7 +101,7 @@ export function ContractCard(props: {
           ))}
       </Col>
       {showQuickBet ? (
-        <QuickBet contract={contract} user={user} />
+        <QuickBet contract={contract} user={user} className="z-10" />
       ) : (
         <>
           {outcomeType === 'BINARY' && (
@@ -165,18 +142,45 @@ export function ContractCard(props: {
           showQuickBet ? 'w-[85%]' : 'w-full'
         )}
       >
-        <AvatarDetails
+        <AvatarDetails contract={contract} short={true} className="md:hidden" />
-          contract={contract}
-          short={true}
-          className={'block md:hidden'}
-        />
         <MiscDetails
           contract={contract}
-          showHotVolume={showHotVolume}
           showTime={showTime}
           hideGroupLink={hideGroupLink}
         />
       </Row>
+
+      {/* Add click layer */}
+      {onClick ? (
+        <a
+          className="absolute top-0 left-0 right-0 bottom-0"
+          href={contractPath(contract)}
+          onClick={(e) => {
+            // Let the browser handle the link click (opens in new tab).
+            if (e.ctrlKey || e.metaKey) return
+
+            e.preventDefault()
+            track('click market card' + (trackingPostfix ?? ''), {
+              slug: contract.slug,
+              contractId: contract.id,
+            })
+            onClick()
+          }}
+        />
+      ) : (
+        <Link href={contractPath(contract)}>
+          <a
+            onClick={trackCallback(
+              'click market card' + (trackingPostfix ?? ''),
+              {
+                slug: contract.slug,
+                contractId: contract.id,
+              }
+            )}
+            className="absolute top-0 left-0 right-0 bottom-0"
+          />
+        </Link>
+      )}
     </Row>
   )
 }

web/components/contract/contract-description.tsx

@@ -6,6 +6,7 @@ import Textarea from 'react-expanding-textarea'
 import { Contract, MAX_DESCRIPTION_LENGTH } from 'common/contract'
 import { exhibitExts, parseTags } from 'common/util/parse'
 import { useAdmin } from 'web/hooks/use-admin'
+import { useUser } from 'web/hooks/use-user'
 import { updateContract } from 'web/lib/firebase/contracts'
 import { Row } from '../layout/row'
 import { Content } from '../editor'
@@ -17,11 +18,12 @@ import { insertContent } from '../editor/utils'
 
 export function ContractDescription(props: {
   contract: Contract
-  isCreator: boolean
   className?: string
 }) {
-  const { contract, isCreator, className } = props
+  const { contract, className } = props
   const isAdmin = useAdmin()
+  const user = useUser()
+  const isCreator = user?.id === contract.creatorId
   return (
     <div className={clsx('mt-2 text-gray-700', className)}>
       {isCreator || isAdmin ? (
@@ -128,6 +130,7 @@ function EditQuestion(props: {
 
   function joinContent(oldContent: ContentType, newContent: string) {
     const editor = new Editor({ content: oldContent, extensions: exhibitExts })
+    editor.commands.focus('end')
     insertContent(editor, newContent)
     return editor.getJSON()
   }

web/components/contract/contract-details.tsx

@@ -2,67 +2,56 @@ import {
   ClockIcon,
   DatabaseIcon,
   PencilIcon,
-  TrendingUpIcon,
   UserGroupIcon,
 } from '@heroicons/react/outline'
+import clsx from 'clsx'
+import { Editor } from '@tiptap/react'
+import dayjs from 'dayjs'
+import Link from 'next/link'
 
 import { Row } from '../layout/row'
 import { formatMoney } from 'common/util/format'
-import { UserLink } from '../user-page'
 import { Contract, updateContract } from 'web/lib/firebase/contracts'
-import dayjs from 'dayjs'
 import { DateTimeTooltip } from '../datetime-tooltip'
 import { fromNow } from 'web/lib/util/time'
 import { Avatar } from '../avatar'
 import { useState } from 'react'
 import { ContractInfoDialog } from './contract-info-dialog'
-import { Bet } from 'common/bet'
 import NewContractBadge from '../new-contract-badge'
 import { UserFollowButton } from '../follow-button'
 import { DAY_MS } from 'common/util/time'
 import { useUser } from 'web/hooks/use-user'
-import { Editor } from '@tiptap/react'
 import { exhibitExts } from 'common/util/parse'
 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 { linkClass } from 'web/components/site-link'
-import { groupPath } from 'web/lib/firebase/groups'
+import { getGroupLinkToDisplay, groupPath } from 'web/lib/firebase/groups'
 import { insertContent } from '../editor/utils'
-import clsx from 'clsx'
 import { contractMetrics } from 'common/contract-details'
-import { User } from 'common/user'
+import { UserLink } from 'web/components/user-link'
-import { FeaturedContractBadge } from 'web/components/contract/FeaturedContractBadge'
+import { FeaturedContractBadge } from 'web/components/contract/featured-contract-badge'
+import { Tooltip } from 'web/components/tooltip'
+import { useWindowSize } from 'web/hooks/use-window-size'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
 export function MiscDetails(props: {
   contract: Contract
-  showHotVolume?: boolean
   showTime?: ShowTime
   hideGroupLink?: boolean
 }) {
-  const { contract, showHotVolume, showTime, hideGroupLink } = props
+  const { contract, showTime, hideGroupLink } = props
-  const {
+  const { volume, closeTime, isResolved, createdTime, resolutionTime } =
-    volume,
+    contract
-    volume24Hours,
-    closeTime,
-    isResolved,
-    createdTime,
-    resolutionTime,
-    groupLinks,
-  } = contract
 
   const isNew = createdTime > Date.now() - DAY_MS && !isResolved
+  const groupToDisplay = getGroupLinkToDisplay(contract)
 
   return (
     <Row className="items-center gap-3 truncate text-sm text-gray-400">
-      {showHotVolume ? (
+      {showTime === 'close-date' ? (
-        <Row className="gap-0.5">
-          <TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
-        </Row>
-      ) : showTime === 'close-date' ? (
         <Row className="gap-0.5 whitespace-nowrap">
           <ClockIcon className="h-5 w-5" />
           {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
@@ -77,18 +66,17 @@ export function MiscDetails(props: {
       ) : (contract?.featuredOnHomeRank ?? 0) > 0 ? (
         <FeaturedContractBadge />
       ) : volume > 0 || !isNew ? (
-        <Row className={'shrink-0'}>{formatMoney(contract.volume)} bet</Row>
+        <Row className={'shrink-0'}>{formatMoney(volume)} bet</Row>
       ) : (
         <NewContractBadge />
       )}
 
-      {!hideGroupLink && groupLinks && groupLinks.length > 0 && (
+      {!hideGroupLink && groupToDisplay && (
-        <SiteLink
+        <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
-          href={groupPath(groupLinks[0].slug)}
+          <a className={clsx(linkClass, 'truncate text-sm text-gray-400')}>
-          className="truncate text-sm text-gray-400"
+            {groupToDisplay.name}
-        >
+          </a>
-          {groupLinks[0].name}
+        </Link>
-        </SiteLink>
       )}
     </Row>
   )
@@ -100,7 +88,7 @@ export function AvatarDetails(props: {
   short?: boolean
 }) {
   const { contract, short, className } = props
-  const { creatorName, creatorUsername } = contract
+  const { creatorName, creatorUsername, creatorAvatarUrl } = contract
 
   return (
     <Row
@@ -108,7 +96,7 @@ export function AvatarDetails(props: {
     >
       <Avatar
         username={creatorUsername}
-        avatarUrl={contract.creatorAvatarUrl}
+        avatarUrl={creatorAvatarUrl}
         size={6}
       />
       <UserLink name={creatorName} username={creatorUsername} short={short} />
@@ -116,49 +104,51 @@ export function AvatarDetails(props: {
   )
 }
 
-export function AbbrContractDetails(props: {
-  contract: Contract
-  showHotVolume?: boolean
-  showTime?: ShowTime
-}) {
-  const { contract, showHotVolume, showTime } = props
-  return (
-    <Row className="items-center justify-between">
-      <AvatarDetails contract={contract} />
-
-      <MiscDetails
-        contract={contract}
-        showHotVolume={showHotVolume}
-        showTime={showTime}
-      />
-    </Row>
-  )
-}
-
 export function ContractDetails(props: {
   contract: Contract
-  bets: Bet[]
-  user: User | null | undefined
-  isCreator?: boolean
   disabled?: boolean
 }) {
-  const { contract, bets, isCreator, disabled } = props
+  const { contract, disabled } = props
-  const { closeTime, creatorName, creatorUsername, creatorId, groupLinks } =
+  const {
-    contract
+    closeTime,
+    creatorName,
+    creatorUsername,
+    creatorId,
+    creatorAvatarUrl,
+    resolutionTime,
+  } = contract
   const { volumeLabel, resolvedDate } = contractMetrics(contract)
-
-  const groupToDisplay =
-    groupLinks?.sort((a, b) => a.createdTime - b.createdTime)[0] ?? null
   const user = useUser()
+  const isCreator = user?.id === creatorId
   const [open, setOpen] = useState(false)
-
+  const { width } = useWindowSize()
-  const groupInfo = (
+  const isMobile = (width ?? 0) < 600
-    <Row>
+  const groupToDisplay = getGroupLinkToDisplay(contract)
-      <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
+  const groupInfo = groupToDisplay ? (
-      <span className="truncate">
+    <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
-        {groupToDisplay ? groupToDisplay.name : 'No group'}
+      <a
-      </span>
+        className={clsx(
-    </Row>
+          linkClass,
+          'flex flex-row items-center truncate pr-0 sm:pr-2',
+          isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
+        )}
+      >
+        <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
+        <span className="items-center truncate">{groupToDisplay.name}</span>
+      </a>
+    </Link>
+  ) : (
+    <Button
+      size={'xs'}
+      className={'max-w-[200px] pr-2'}
+      color={'gray-white'}
+      onClick={() => !groupToDisplay && setOpen(true)}
+    >
+      <Row>
+        <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
+        <span className="truncate">No Group</span>
+      </Row>
+    </Button>
   )
 
   return (
@@ -166,7 +156,7 @@ export function ContractDetails(props: {
       <Row className="items-center gap-2">
         <Avatar
           username={creatorUsername}
-          avatarUrl={contract.creatorAvatarUrl}
+          avatarUrl={creatorAvatarUrl}
           noLink={disabled}
           size={6}
         />
@@ -177,6 +167,7 @@ export function ContractDetails(props: {
             className="whitespace-nowrap"
             name={creatorName}
             username={creatorUsername}
+            short={isMobile}
           />
         )}
         {!disabled && <UserFollowButton userId={creatorId} small />}
@@ -187,14 +178,18 @@ export function ContractDetails(props: {
         ) : !groupToDisplay && !user ? (
           <div />
         ) : (
-          <Button
+          <Row>
-            size={'xs'}
-            className={'max-w-[200px]'}
-            color={'gray-white'}
-            onClick={() => setOpen(!open)}
-          >
             {groupInfo}
-          </Button>
+            {user && groupToDisplay && (
+              <Button
+                size={'xs'}
+                color={'gray-white'}
+                onClick={() => setOpen(!open)}
+              >
+                <PencilIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
+              </Button>
+            )}
+          </Row>
         )}
       </Row>
       <Modal open={open} setOpen={setOpen} size={'md'}>
@@ -203,23 +198,16 @@ export function ContractDetails(props: {
             'max-h-[70vh] min-h-[20rem] overflow-auto rounded bg-white p-6'
           }
         >
-          <ContractGroupsList
+          <ContractGroupsList contract={contract} user={user} />
-            groupLinks={groupLinks ?? []}
-            contract={contract}
-            user={user}
-          />
         </Col>
       </Modal>
 
       {(!!closeTime || !!resolvedDate) && (
-        <Row className="items-center gap-1">
+        <Row className="hidden items-center gap-1 md:inline-flex">
-          {resolvedDate && contract.resolutionTime ? (
+          {resolvedDate && resolutionTime ? (
             <>
               <ClockIcon className="h-5 w-5" />
-              <DateTimeTooltip
+              <DateTimeTooltip text="Market resolved:" time={resolutionTime}>
-                text="Market resolved:"
-                time={dayjs(contract.resolutionTime)}
-              >
                 {resolvedDate}
               </DateTimeTooltip>
             </>
@@ -239,17 +227,84 @@ export function ContractDetails(props: {
       )}
       {user && (
         <>
-          <Row className="items-center gap-1">
+          <Row className="hidden items-center gap-1 md:inline-flex">
             <DatabaseIcon className="h-5 w-5" />
             <div className="whitespace-nowrap">{volumeLabel}</div>
           </Row>
-          {!disabled && <ContractInfoDialog contract={contract} bets={bets} />}
+          {!disabled && (
+            <ContractInfoDialog
+              contract={contract}
+              className={'hidden md:inline-flex'}
+            />
+          )}
         </>
       )}
     </Row>
   )
 }
 
+export function ExtraMobileContractDetails(props: {
+  contract: Contract
+  forceShowVolume?: boolean
+}) {
+  const { contract, forceShowVolume } = props
+  const { volume, resolutionTime, closeTime, creatorId, uniqueBettorCount } =
+    contract
+  const user = useUser()
+  const uniqueBettors = uniqueBettorCount ?? 0
+  const { resolvedDate } = contractMetrics(contract)
+  const volumeTranslation =
+    volume > 800 || uniqueBettors >= 20
+      ? 'High'
+      : volume > 300 || uniqueBettors >= 10
+      ? 'Medium'
+      : 'Low'
+
+  return (
+    <Row
+      className={clsx(
+        'items-center justify-around md:hidden',
+        user ? 'w-full' : ''
+      )}
+    >
+      {resolvedDate && resolutionTime ? (
+        <Col className={'items-center text-sm'}>
+          <Row className={'text-gray-500'}>
+            <DateTimeTooltip text="Market resolved:" time={resolutionTime}>
+              {resolvedDate}
+            </DateTimeTooltip>
+          </Row>
+          <Row className={'text-gray-400'}>Ended</Row>
+        </Col>
+      ) : (
+        !resolvedDate &&
+        closeTime && (
+          <Col className={'items-center text-sm text-gray-500'}>
+            <EditableCloseDate
+              closeTime={closeTime}
+              contract={contract}
+              isCreator={creatorId === user?.id}
+            />
+            <Row className={'text-gray-400'}>Ends</Row>
+          </Col>
+        )
+      )}
+      {(user || forceShowVolume) && (
+        <Col className={'items-center text-sm text-gray-500'}>
+          <Tooltip
+            text={`${formatMoney(
+              volume
+            )} bet - ${uniqueBettors} unique traders`}
+          >
+            {volumeTranslation}
+          </Tooltip>
+          <Row className={'text-gray-400'}>Activity</Row>
+        </Col>
+      )}
+    </Row>
+  )
+}
+
 function EditableCloseDate(props: {
   closeTime: number
   contract: Contract
@@ -262,14 +317,22 @@ function EditableCloseDate(props: {
 
   const [isEditingCloseTime, setIsEditingCloseTime] = useState(false)
   const [closeDate, setCloseDate] = useState(
-    closeTime && dayJsCloseTime.format('YYYY-MM-DDTHH:mm')
+    closeTime && dayJsCloseTime.format('YYYY-MM-DD')
   )
+  const [closeHoursMinutes, setCloseHoursMinutes] = useState(
+    closeTime && dayJsCloseTime.format('HH:mm')
+  )
+
+  const newCloseTime = closeDate
+    ? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
+    : undefined
 
   const isSameYear = dayJsCloseTime.isSame(dayJsNow, 'year')
   const isSameDay = dayJsCloseTime.isSame(dayJsNow, 'day')
 
   const onSave = () => {
-    const newCloseTime = dayjs(closeDate).valueOf()
+    if (!newCloseTime) return
+
     if (newCloseTime === closeTime) setIsEditingCloseTime(false)
     else if (newCloseTime > Date.now()) {
       const content = contract.description
@@ -294,42 +357,46 @@ function EditableCloseDate(props: {
   return (
     <>
       {isEditingCloseTime ? (
-        <div className="form-control mr-1 items-start">
+        <Row className="z-10 mr-2 w-full shrink-0 items-center gap-1">
           <input
-            type="datetime-local"
+            type="date"
-            className="input input-bordered"
+            className="input input-bordered shrink-0"
             onClick={(e) => e.stopPropagation()}
-            onChange={(e) => setCloseDate(e.target.value || '')}
+            onChange={(e) => setCloseDate(e.target.value)}
             min={Date.now()}
             value={closeDate}
           />
-        </div>
+          <input
+            type="time"
+            className="input input-bordered shrink-0"
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => setCloseHoursMinutes(e.target.value)}
+            min="00:00"
+            value={closeHoursMinutes}
+          />
+          <Button size={'xs'} color={'blue'} onClick={onSave}>
+            Done
+          </Button>
+        </Row>
       ) : (
         <DateTimeTooltip
           text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
-          time={dayJsCloseTime}
+          time={closeTime}
         >
-          {isSameYear
+          <span
-            ? dayJsCloseTime.format('MMM D')
+            className={isCreator ? 'cursor-pointer' : ''}
-            : dayJsCloseTime.format('MMM D, YYYY')}
+            onClick={() => isCreator && setIsEditingCloseTime(true)}
-          {isSameDay && <> ({fromNow(closeTime)})</>}
+          >
+            {isSameDay ? (
+              <span className={'capitalize'}> {fromNow(closeTime)}</span>
+            ) : isSameYear ? (
+              dayJsCloseTime.format('MMM D')
+            ) : (
+              dayJsCloseTime.format('MMM D, YYYY')
+            )}
+          </span>
         </DateTimeTooltip>
       )}
-
-      {isCreator &&
-        (isEditingCloseTime ? (
-          <button className="btn btn-xs" onClick={onSave}>
-            Done
-          </button>
-        ) : (
-          <Button
-            size={'xs'}
-            color={'gray-white'}
-            onClick={() => setIsEditingCloseTime(true)}
-          >
-            <PencilIcon className="mr-0.5 inline h-4 w-4" /> Edit
-          </Button>
-        ))}
     </>
   )
 }

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

@@ -1,9 +1,7 @@
 import { DotsHorizontalIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
-import { uniqBy } from 'lodash'
 import { useState } from 'react'
-import { Bet } from 'common/bet'
 
 import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
@@ -17,12 +15,18 @@ import { useAdmin, useDev } from 'web/hooks/use-admin'
 import { SiteLink } from '../site-link'
 import { firestoreConsolePath } from 'common/envs/constants'
 import { deleteField } from 'firebase/firestore'
+import ShortToggle from '../widgets/short-toggle'
+import { DuplicateContractButton } from '../copy-contract-button'
+import { Row } from '../layout/row'
 
 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'
 
-export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
+export function ContractInfoDialog(props: {
-  const { contract, bets } = props
+  contract: Contract
+  className?: string
+}) {
+  const { contract, className } = props
 
   const [open, setOpen] = useState(false)
   const [featured, setFeatured] = useState(
@@ -31,16 +35,12 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
   const isDev = useDev()
   const isAdmin = useAdmin()
 
-  const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a z')
+  const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a')
 
   const { createdTime, closeTime, resolutionTime, mechanism, outcomeType, id } =
     contract
 
-  const tradersCount = uniqBy(
+  const bettorsCount = contract.uniqueBettorCount ?? 'Unknown'
-    bets.filter((bet) => !bet.isAnte),
-    'userId'
-  ).length
-
   const typeDisplay =
     outcomeType === 'BINARY'
       ? 'YES / NO'
@@ -50,10 +50,25 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
       ? 'Multiple choice'
       : 'Numeric'
 
+  const onFeaturedToggle = async (enabled: boolean) => {
+    if (
+      enabled &&
+      (contract.featuredOnHomeRank === 0 || !contract?.featuredOnHomeRank)
+    ) {
+      await updateContract(id, { featuredOnHomeRank: 1 })
+      setFeatured(true)
+    } else if (!enabled && (contract?.featuredOnHomeRank ?? 0) > 0) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      await updateContract(id, { featuredOnHomeRank: deleteField() })
+      setFeatured(false)
+    }
+  }
+
   return (
     <>
       <button
-        className={contractDetailsButtonClassName}
+        className={clsx(contractDetailsButtonClassName, className)}
         onClick={() => setOpen(true)}
       >
         <DotsHorizontalIcon
@@ -121,7 +136,7 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
 
               <tr>
                 <td>Traders</td>
-                <td>{tradersCount}</td>
+                <td>{bettorsCount}</td>
               </tr>
 
               <tr>
@@ -134,7 +149,7 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
               {/* Show a path to Firebase if user is an admin, or we're on localhost */}
               {(isAdmin || isDev) && (
                 <tr>
-                  <td>[DEV] Firestore</td>
+                  <td>[ADMIN] Firestore</td>
                   <td>
                     <SiteLink href={firestoreConsolePath(id)}>
                       Console link
@@ -144,49 +159,37 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
               )}
               {isAdmin && (
                 <tr>
-                  <td>Set featured</td>
+                  <td>[ADMIN] Featured</td>
                   <td>
-                    <select
+                    <ShortToggle
-                      className="select select-bordered"
+                      enabled={featured}
-                      value={featured ? 'true' : 'false'}
+                      setEnabled={setFeatured}
-                      onChange={(e) => {
+                      onChange={onFeaturedToggle}
-                        const newVal = e.target.value === 'true'
+                    />
-                        if (
+                  </td>
-                          newVal &&
+                </tr>
-                          (contract.featuredOnHomeRank === 0 ||
+              )}
-                            !contract?.featuredOnHomeRank)
+              {isAdmin && (
-                        )
+                <tr>
-                          updateContract(id, {
+                  <td>[ADMIN] Unlisted</td>
-                            featuredOnHomeRank: 1,
+                  <td>
-                          })
+                    <ShortToggle
-                            .then(() => {
+                      enabled={contract.visibility === 'unlisted'}
-                              setFeatured(true)
+                      setEnabled={(b) =>
-                            })
+                        updateContract(id, {
-                            .catch(console.error)
+                          visibility: b ? 'unlisted' : 'public',
-                        else if (
+                        })
-                          !newVal &&
+                      }
-                          (contract?.featuredOnHomeRank ?? 0) > 0
+                    />
-                        )
-                          updateContract(id, {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
-                            featuredOnHomeRank: deleteField(),
-                          })
-                            .then(() => {
-                              setFeatured(false)
-                            })
-                            .catch(console.error)
-                      }}
-                    >
-                      <option value="false">false</option>
-                      <option value="true">true</option>
-                    </select>
                   </td>
                 </tr>
               )}
             </tbody>
           </table>
 
+          <Row className="flex-wrap">
+            <DuplicateContractButton contract={contract} />
+          </Row>
           {contract.mechanism === 'cpmm-1' && !contract.resolution && (
             <LiquidityPanel contract={contract} />
           )}

web/components/contract/contract-leaderboard.tsx

@@ -49,7 +49,7 @@ export function ContractLeaderboard(props: {
 
   return users && users.length > 0 ? (
     <Leaderboard
-      title="🏅 Top bettors"
+      title="🏅 Top traders"
       users={users || []}
       columns={[
         {
@@ -107,13 +107,8 @@ export function ContractTopTrades(props: {
               comment={commentsById[topCommentId]}
               tips={tips[topCommentId]}
               betsBySameUser={[betsById[topCommentId]]}
-              smallAvatar={false}
             />
           </div>
-          <div className="mt-2 text-sm text-gray-500">
-            {commentsById[topCommentId].userName} made{' '}
-            {formatMoney(profitById[topCommentId] || 0)}!
-          </div>
           <Spacer h={16} />
         </>
       )}
@@ -121,16 +116,11 @@ export function ContractTopTrades(props: {
       {/* 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" />
+          <Title text="💸 Best bet" className="!mt-0" />
           <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
-            <FeedBet
+            <FeedBet contract={contract} bet={betsById[topBetId]} />
-              contract={contract}
-              bet={betsById[topBetId]}
-              hideOutcome={false}
-              smallAvatar={false}
-            />
           </div>
-          <div className="mt-2 text-sm text-gray-500">
+          <div className="mt-2 ml-2 text-sm text-gray-500">
             {topBettor?.name} made {formatMoney(profitById[topBetId] || 0)}!
           </div>
         </>

web/components/contract/contract-overview.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import clsx from 'clsx'
 
 import { tradingAllowed } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
@@ -16,125 +15,154 @@ import {
 import { Bet } from 'common/bet'
 import BetButton from '../bet-button'
 import { AnswersGraph } from '../answers/answers-graph'
-import { Contract, CPMMBinaryContract } from 'common/contract'
+import {
-import { ContractDescription } from './contract-description'
+  Contract,
-import { ContractDetails } from './contract-details'
+  BinaryContract,
+  CPMMContract,
+  CPMMBinaryContract,
+  FreeResponseContract,
+  MultipleChoiceContract,
+  NumericContract,
+  PseudoNumericContract,
+} from 'common/contract'
+import { ContractDetails, ExtraMobileContractDetails } from './contract-details'
 import { NumericGraph } from './numeric-graph'
-import { ShareRow } from './share-row'
+
+const OverviewQuestion = (props: { text: string }) => (
+  <Linkify className="text-2xl text-indigo-700 md:text-3xl" text={props.text} />
+)
+
+const BetWidget = (props: { contract: CPMMContract }) => {
+  const user = useUser()
+  return (
+    <Col>
+      <BetButton contract={props.contract} />
+      {!user && (
+        <div className="mt-1 text-center text-sm text-gray-500">
+          (with play money!)
+        </div>
+      )}
+    </Col>
+  )
+}
+
+const NumericOverview = (props: { contract: NumericContract }) => {
+  const { contract } = props
+  return (
+    <Col className="gap-1 md:gap-2">
+      <Col className="gap-3 px-2 sm:gap-4">
+        <ContractDetails contract={contract} />
+        <Row className="justify-between gap-4">
+          <OverviewQuestion text={contract.question} />
+          <NumericResolutionOrExpectation
+            contract={contract}
+            className="hidden items-end xl:flex"
+          />
+        </Row>
+        <NumericResolutionOrExpectation
+          className="items-center justify-between gap-4 xl:hidden"
+          contract={contract}
+        />
+      </Col>
+      <NumericGraph contract={contract} />
+    </Col>
+  )
+}
+
+const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
+  const { contract, bets } = props
+  return (
+    <Col className="gap-1 md:gap-2">
+      <Col className="gap-3 px-2 sm:gap-4">
+        <ContractDetails contract={contract} />
+        <Row className="justify-between gap-4">
+          <OverviewQuestion text={contract.question} />
+          <BinaryResolutionOrChance
+            className="hidden items-end xl:flex"
+            contract={contract}
+            large
+          />
+        </Row>
+        <Row className="items-center justify-between gap-4 xl:hidden">
+          <BinaryResolutionOrChance contract={contract} />
+          <ExtraMobileContractDetails contract={contract} />
+          {tradingAllowed(contract) && (
+            <BetWidget contract={contract as CPMMBinaryContract} />
+          )}
+        </Row>
+      </Col>
+      <ContractProbGraph contract={contract} bets={[...bets].reverse()} />
+    </Col>
+  )
+}
+
+const ChoiceOverview = (props: {
+  contract: FreeResponseContract | MultipleChoiceContract
+  bets: Bet[]
+}) => {
+  const { contract, bets } = props
+  const { question, resolution } = contract
+  return (
+    <Col className="gap-1 md:gap-2">
+      <Col className="gap-3 px-2 sm:gap-4">
+        <ContractDetails contract={contract} />
+        <OverviewQuestion text={question} />
+        {resolution && (
+          <FreeResponseResolutionOrChance contract={contract} truncate="none" />
+        )}
+      </Col>
+      <Col className={'mb-1 gap-y-2'}>
+        <AnswersGraph contract={contract} bets={[...bets].reverse()} />
+        <ExtraMobileContractDetails
+          contract={contract}
+          forceShowVolume={true}
+        />
+      </Col>
+    </Col>
+  )
+}
+
+const PseudoNumericOverview = (props: {
+  contract: PseudoNumericContract
+  bets: Bet[]
+}) => {
+  const { contract, bets } = props
+  return (
+    <Col className="gap-1 md:gap-2">
+      <Col className="gap-3 px-2 sm:gap-4">
+        <ContractDetails contract={contract} />
+        <Row className="justify-between gap-4">
+          <OverviewQuestion text={contract.question} />
+          <PseudoNumericResolutionOrExpectation
+            contract={contract}
+            className="hidden items-end xl:flex"
+          />
+        </Row>
+        <Row className="items-center justify-between gap-4 xl:hidden">
+          <PseudoNumericResolutionOrExpectation contract={contract} />
+          <ExtraMobileContractDetails contract={contract} />
+          {tradingAllowed(contract) && <BetWidget contract={contract} />}
+        </Row>
+      </Col>
+      <ContractProbGraph contract={contract} bets={[...bets].reverse()} />
+    </Col>
+  )
+}
 
 export const ContractOverview = (props: {
   contract: Contract
   bets: Bet[]
-  className?: string
 }) => {
-  const { contract, bets, className } = props
+  const { contract, bets } = props
-  const { question, creatorId, outcomeType, resolution } = contract
+  switch (contract.outcomeType) {
-
+    case 'BINARY':
-  const user = useUser()
+      return <BinaryOverview contract={contract} bets={bets} />
-  const isCreator = user?.id === creatorId
+    case 'NUMERIC':
-
+      return <NumericOverview contract={contract} />
-  const isBinary = outcomeType === 'BINARY'
+    case 'PSEUDO_NUMERIC':
-  const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
+      return <PseudoNumericOverview contract={contract} bets={bets} />
-
+    case 'FREE_RESPONSE':
-  return (
+    case 'MULTIPLE_CHOICE':
-    <Col className={clsx('mb-6', className)}>
+      return <ChoiceOverview contract={contract} bets={bets} />
-      <Col className="gap-3 px-2 sm:gap-4">
+  }
-        <Row className="justify-between gap-4">
-          <div className="text-2xl text-indigo-700 md:text-3xl">
-            <Linkify text={question} />
-          </div>
-          <Row className={'hidden gap-3 xl:flex'}>
-            {isBinary && (
-              <BinaryResolutionOrChance
-                className="items-end"
-                contract={contract}
-                large
-              />
-            )}
-
-            {isPseudoNumeric && (
-              <PseudoNumericResolutionOrExpectation
-                contract={contract}
-                className="items-end"
-              />
-            )}
-
-            {outcomeType === 'NUMERIC' && (
-              <NumericResolutionOrExpectation
-                contract={contract}
-                className="items-end"
-              />
-            )}
-          </Row>
-        </Row>
-
-        {isBinary ? (
-          <Row className="items-center justify-between gap-4 xl:hidden">
-            <BinaryResolutionOrChance contract={contract} />
-            {tradingAllowed(contract) && (
-              <Col>
-                <BetButton contract={contract as CPMMBinaryContract} />
-                {!user && (
-                  <div className="mt-1 text-center text-sm text-gray-500">
-                    (with play money!)
-                  </div>
-                )}
-              </Col>
-            )}
-          </Row>
-        ) : isPseudoNumeric ? (
-          <Row className="items-center justify-between gap-4 xl:hidden">
-            <PseudoNumericResolutionOrExpectation contract={contract} />
-            {tradingAllowed(contract) && (
-              <Col>
-                <BetButton contract={contract} />
-                {!user && (
-                  <div className="mt-1 text-center text-sm text-gray-500">
-                    (with play money!)
-                  </div>
-                )}
-              </Col>
-            )}
-          </Row>
-        ) : (
-          (outcomeType === 'FREE_RESPONSE' ||
-            outcomeType === 'MULTIPLE_CHOICE') &&
-          resolution && (
-            <FreeResponseResolutionOrChance
-              contract={contract}
-              truncate="none"
-            />
-          )
-        )}
-
-        {outcomeType === 'NUMERIC' && (
-          <Row className="items-center justify-between gap-4 xl:hidden">
-            <NumericResolutionOrExpectation contract={contract} />
-          </Row>
-        )}
-
-        <ContractDetails
-          contract={contract}
-          bets={bets}
-          isCreator={isCreator}
-          user={user}
-        />
-      </Col>
-      <div className={'my-1 md:my-2'}></div>
-      {(isBinary || isPseudoNumeric) && (
-        <ContractProbGraph contract={contract} bets={bets} />
-      )}{' '}
-      {(outcomeType === 'FREE_RESPONSE' ||
-        outcomeType === 'MULTIPLE_CHOICE') && (
-        <AnswersGraph contract={contract} bets={bets} />
-      )}
-      {outcomeType === 'NUMERIC' && <NumericGraph contract={contract} />}
-      <ShareRow user={user} contract={contract} />
-      <ContractDescription
-        className="px-2"
-        contract={contract}
-        isCreator={isCreator}
-      />
-    </Col>
-  )
 }

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

@@ -16,6 +16,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
 }) {
   const { contract, height } = props
   const { resolutionTime, closeTime, outcomeType } = contract
+  const now = Date.now()
   const isBinary = outcomeType === 'BINARY'
   const isLogScale = outcomeType === 'PSEUDO_NUMERIC' && contract.isLogScale
 
@@ -23,10 +24,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
 
   const startProb = getInitialProbability(contract)
 
-  const times = [
+  const times = [contract.createdTime, ...bets.map((bet) => bet.createdTime)]
-    contract.createdTime,
-    ...bets.map((bet) => bet.createdTime),
-  ].map((time) => new Date(time))
 
   const f: (p: number) => number = isBinary
     ? (p) => p
@@ -36,17 +34,17 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
 
   const probs = [startProb, ...bets.map((bet) => bet.probAfter)].map(f)
 
-  const isClosed = !!closeTime && Date.now() > closeTime
+  const isClosed = !!closeTime && now > closeTime
   const latestTime = dayjs(
     resolutionTime && isClosed
       ? Math.min(resolutionTime, closeTime)
       : isClosed
       ? closeTime
-      : resolutionTime ?? Date.now()
+      : resolutionTime ?? now
   )
 
   // Add a fake datapoint so the line continues to the right
-  times.push(latestTime.toDate())
+  times.push(latestTime.valueOf())
   probs.push(probs[probs.length - 1])
 
   const quartiles = [0, 25, 50, 75, 100]
@@ -58,15 +56,16 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
   const { width } = useWindowSize()
 
   const numXTickValues = !width || width < 800 ? 2 : 5
-  const hoursAgo = latestTime.subtract(1, 'hours')
+  const startDate = dayjs(times[0])
-  const startDate = dayjs(times[0]).isBefore(hoursAgo)
+  const endDate = startDate.add(1, 'hour').isAfter(latestTime)
-    ? times[0]
+    ? latestTime.add(1, 'hours')
-    : hoursAgo.toDate()
+    : latestTime
+  const includeMinute = endDate.diff(startDate, 'hours') < 2
 
   // Minimum number of points for the graph to have. For smooth tooltip movement
-  // On first load, width is undefined, skip adding extra points to let page load faster
+  // If we aren't actually loading any data yet, skip adding extra points to let page load faster
   // This fn runs again once DOM is finished loading
-  const totalPoints = width ? (width > 800 ? 300 : 50) : 1
+  const totalPoints = width && bets.length ? (width > 800 ? 300 : 50) : 1
 
   const timeStep: number = latestTime.diff(startDate, 'ms') / totalPoints
 
@@ -74,20 +73,16 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
   const s = isBinary ? 100 : 1
 
   for (let i = 0; i < times.length - 1; i++) {
-    points[points.length] = { x: times[i], y: s * probs[i] }
+    const p = probs[i]
-    const numPoints: number = Math.floor(
+    const d0 = times[i]
-      dayjs(times[i + 1]).diff(dayjs(times[i]), 'ms') / timeStep
+    const d1 = times[i + 1]
-    )
+    const msDiff = d1 - d0
+    const numPoints = Math.floor(msDiff / timeStep)
+    points.push({ x: new Date(times[i]), y: s * p })
     if (numPoints > 1) {
-      const thisTimeStep: number =
+      const thisTimeStep: number = msDiff / numPoints
-        dayjs(times[i + 1]).diff(dayjs(times[i]), 'ms') / numPoints
       for (let n = 1; n < numPoints; n++) {
-        points[points.length] = {
+        points.push({ x: new Date(d0 + thisTimeStep * n), y: s * p })
-          x: dayjs(times[i])
-            .add(thisTimeStep * n, 'ms')
-            .toDate(),
-          y: s * probs[i],
-        }
       }
     }
   }
@@ -96,8 +91,8 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
     { id: 'Yes', data: points, color: isBinary ? '#11b981' : '#5fa5f9' },
   ]
 
-  const multiYear = !dayjs(startDate).isSame(latestTime, 'year')
+  const multiYear = !startDate.isSame(latestTime, 'year')
-  const lessThanAWeek = dayjs(startDate).add(8, 'day').isAfter(latestTime)
+  const lessThanAWeek = startDate.add(8, 'day').isAfter(latestTime)
 
   const formatter = isBinary
     ? formatPercent
@@ -132,15 +127,16 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
         }}
         xScale={{
           type: 'time',
-          min: startDate,
+          min: startDate.toDate(),
-          max: latestTime.toDate(),
+          max: endDate.toDate(),
         }}
         xFormat={(d) =>
-          formatTime(+d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
+          formatTime(now, +d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
         }
         axisBottom={{
           tickValues: numXTickValues,
-          format: (time) => formatTime(+time, multiYear, lessThanAWeek, false),
+          format: (time) =>
+            formatTime(now, +time, multiYear, lessThanAWeek, includeMinute),
         }}
         colors={{ datum: 'color' }}
         curve="stepAfter"
@@ -176,19 +172,20 @@ function formatPercent(y: DatumValue) {
 }
 
 function formatTime(
+  now: number,
   time: number,
   includeYear: boolean,
   includeHour: boolean,
   includeMinute: boolean
 ) {
   const d = dayjs(time)
-
+  if (d.add(1, 'minute').isAfter(now) && d.subtract(1, 'minute').isBefore(now))
-  if (d.add(1, 'minute').isAfter(Date.now())) return 'Now'
+    return 'Now'
 
   let format: string
-  if (d.isSame(Date.now(), 'day')) {
+  if (d.isSame(now, 'day')) {
     format = '[Today]'
-  } else if (d.add(1, 'day').isSame(Date.now(), 'day')) {
+  } else if (d.add(1, 'day').isSame(now, 'day')) {
     format = '[Yesterday]'
   } else {
     format = 'MMM D'

web/components/contract/contract-tabs.tsx

@@ -1,15 +1,24 @@
 import { Bet } from 'common/bet'
-import { Contract } from 'common/contract'
+import { Contract, CPMMBinaryContract } from 'common/contract'
 import { ContractComment } from 'common/comment'
 import { User } from 'common/user'
-import { ContractActivity } from '../feed/contract-activity'
+import {
+  ContractCommentsActivity,
+  ContractBetsActivity,
+  FreeResponseContractCommentsActivity,
+} from '../feed/contract-activity'
 import { ContractBetsTable, BetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
 import { Tabs } from '../layout/tabs'
 import { Col } from '../layout/col'
+import { tradingAllowed } from 'web/lib/firebase/contracts'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { useBets } from 'web/hooks/use-bets'
 import { useComments } from 'web/hooks/use-comments'
 import { useLiquidity } from 'web/hooks/use-liquidity'
+import { BetSignUpPrompt } from '../sign-up-prompt'
+import { PlayMoneyDisclaimer } from '../play-money-disclaimer'
+import BetButton from '../bet-button'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -18,68 +27,69 @@ export function ContractTabs(props: {
   comments: ContractComment[]
   tips: CommentTipMap
 }) {
-  const { contract, user, bets, tips } = props
+  const { contract, user, tips } = props
   const { outcomeType } = contract
 
-  const userBets = user && bets.filter((bet) => bet.userId === user.id)
+  const bets = useBets(contract.id) ?? props.bets
+  const lps = useLiquidity(contract.id) ?? []
+
+  const userBets =
+    user && bets.filter((bet) => !bet.isAnte && bet.userId === user.id)
   const visibleBets = bets.filter(
     (bet) => !bet.isAnte && !bet.isRedemption && bet.amount !== 0
   )
-
+  const visibleLps = lps.filter((l) => !l.isAnte && l.amount > 0)
-  const liquidityProvisions =
-    useLiquidity(contract.id)?.filter((l) => !l.isAnte && l.amount > 0) ?? []
 
   // Load comments here, so the badge count will be correct
   const updatedComments = useComments(contract.id)
   const comments = updatedComments ?? props.comments
 
   const betActivity = (
-    <ContractActivity
+    <ContractBetsActivity
       contract={contract}
-      bets={bets}
+      bets={visibleBets}
-      liquidityProvisions={liquidityProvisions}
+      lps={visibleLps}
-      comments={comments}
-      tips={tips}
-      user={user}
-      mode="bets"
-      betRowClassName="!mt-0 xl:hidden"
     />
   )
 
-  const commentActivity = (
+  const generalBets = outcomeType === 'FREE_RESPONSE' ? [] : visibleBets
-    <>
+  const generalComments = comments.filter(
-      <ContractActivity
+    (comment) =>
-        contract={contract}
+      comment.answerOutcome === undefined &&
-        bets={bets}
+      (outcomeType === 'FREE_RESPONSE' ? comment.betId === undefined : true)
-        liquidityProvisions={liquidityProvisions}
+  )
-        comments={comments}
+
-        tips={tips}
+  const commentActivity =
-        user={user}
+    outcomeType === 'FREE_RESPONSE' ? (
-        mode={
+      <>
-          contract.outcomeType === 'FREE_RESPONSE'
+        <FreeResponseContractCommentsActivity
-            ? 'free-response-comment-answer-groups'
+          contract={contract}
-            : 'comments'
+          bets={visibleBets}
-        }
+          comments={comments}
-        betRowClassName="!mt-0 xl:hidden"
+          tips={tips}
-      />
+          user={user}
-      {outcomeType === 'FREE_RESPONSE' && (
+        />
         <Col className={'mt-8 flex w-full '}>
           <div className={'text-md mt-8 mb-2 text-left'}>General Comments</div>
           <div className={'mb-4 w-full border-b border-gray-200'} />
-          <ContractActivity
+          <ContractCommentsActivity
             contract={contract}
-            bets={bets}
+            bets={generalBets}
-            liquidityProvisions={liquidityProvisions}
+            comments={generalComments}
-            comments={comments}
             tips={tips}
             user={user}
-            mode={'comments'}
-            betRowClassName="!mt-0 xl:hidden"
           />
         </Col>
-      )}
+      </>
-    </>
+    ) : (
-  )
+      <ContractCommentsActivity
+        contract={contract}
+        bets={visibleBets}
+        comments={comments}
+        tips={tips}
+        user={user}
+      />
+    )
 
   const yourTrades = (
     <div>
@@ -96,19 +106,39 @@ export function ContractTabs(props: {
   )
 
   return (
-    <Tabs
+    <>
-      currentPageForAnalytics={'contract'}
+      <Tabs
-      tabs={[
+        currentPageForAnalytics={'contract'}
-        {
+        tabs={[
-          title: 'Comments',
+          {
-          content: commentActivity,
+            title: 'Comments',
-          badge: `${comments.length}`,
+            content: commentActivity,
-        },
+            badge: `${comments.length}`,
-        { title: 'Bets', content: betActivity, badge: `${visibleBets.length}` },
+          },
-        ...(!user || !userBets?.length
+          {
-          ? []
+            title: 'Trades',
-          : [{ title: 'Your bets', content: yourTrades }]),
+            content: betActivity,
-      ]}
+            badge: `${visibleBets.length}`,
-    />
+          },
+          ...(!user || !userBets?.length
+            ? []
+            : [{ title: 'Your trades', content: yourTrades }]),
+        ]}
+      />
+      {!user ? (
+        <Col className="mt-4 max-w-sm items-center xl:hidden">
+          <BetSignUpPrompt />
+          <PlayMoneyDisclaimer />
+        </Col>
+      ) : (
+        outcomeType === 'BINARY' &&
+        tradingAllowed(contract) && (
+          <BetButton
+            contract={contract as CPMMBinaryContract}
+            className="mb-2 !mt-0 xl:hidden"
+          />
+        )
+      )}
+    </>
   )
 }

web/components/contract/contracts-grid.tsx

@@ -26,6 +26,8 @@ export function ContractsGrid(props: {
     hideGroupLink?: boolean
   }
   highlightOptions?: ContractHighlightOptions
+  trackingPostfix?: string
+  breakpointColumns?: { [key: string]: number }
 }) {
   const {
     contracts,
@@ -34,6 +36,7 @@ export function ContractsGrid(props: {
     onContractClick,
     cardHideOptions,
     highlightOptions,
+    trackingPostfix,
   } = props
   const { hideQuickBet, hideGroupLink } = cardHideOptions || {}
   const { contractIds, highlightClassName } = highlightOptions || {}
@@ -65,7 +68,7 @@ export function ContractsGrid(props: {
     <Col className="gap-8">
       <Masonry
         // Show only 1 column on tailwind's md breakpoint (768px)
-        breakpointCols={{ default: 2, 768: 1 }}
+        breakpointCols={props.breakpointColumns ?? { default: 2, 768: 1 }}
         className="-ml-4 flex w-auto"
         columnClassName="pl-4 bg-clip-padding"
       >
@@ -79,6 +82,7 @@ export function ContractsGrid(props: {
             }
             hideQuickBet={hideQuickBet}
             hideGroupLink={hideGroupLink}
+            trackingPostfix={trackingPostfix}
             className={clsx(
               'mb-4 break-inside-avoid-column overflow-hidden', // prevent content from wrapping (needs overflow on firefox)
               contractIds?.includes(contract.id) && highlightClassName
@@ -110,6 +114,7 @@ export function CreatorContractsList(props: {
       additionalFilter={{
         creatorId: creator.id,
       }}
+      persistPrefix={`user-${creator.id}`}
     />
   )
 }

web/components/contract/extra-contract-actions-row.tsx

@@ -0,0 +1,86 @@
+import clsx from 'clsx'
+import { ShareIcon } from '@heroicons/react/outline'
+
+import { Row } from '../layout/row'
+import { Contract } from 'web/lib/firebase/contracts'
+import React, { useState } from 'react'
+import { Button } from 'web/components/button'
+import { useUser } from 'web/hooks/use-user'
+import { ShareModal } from './share-modal'
+import { FollowMarketButton } from 'web/components/follow-market-button'
+import { LikeMarketButton } from 'web/components/contract/like-market-button'
+import { ContractInfoDialog } from 'web/components/contract/contract-info-dialog'
+import { Col } from 'web/components/layout/col'
+import { withTracking } from 'web/lib/service/analytics'
+import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
+import { CHALLENGES_ENABLED } from 'common/challenge'
+import ChallengeIcon from 'web/lib/icons/challenge-icon'
+
+export function ExtraContractActionsRow(props: { contract: Contract }) {
+  const { contract } = props
+  const { outcomeType, resolution } = contract
+  const user = useUser()
+  const [isShareOpen, setShareOpen] = useState(false)
+  const [openCreateChallengeModal, setOpenCreateChallengeModal] =
+    useState(false)
+  const showChallenge =
+    user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
+
+  return (
+    <Row className={'mt-0.5 justify-around sm:mt-2 lg:justify-start'}>
+      <Button
+        size="lg"
+        color="gray-white"
+        className={'flex'}
+        onClick={() => {
+          setShareOpen(true)
+        }}
+      >
+        <Col className={'items-center sm:flex-row'}>
+          <ShareIcon
+            className={clsx('h-[24px] w-5 sm:mr-2')}
+            aria-hidden="true"
+          />
+          <span>Share</span>
+        </Col>
+        <ShareModal
+          isOpen={isShareOpen}
+          setOpen={setShareOpen}
+          contract={contract}
+          user={user}
+        />
+      </Button>
+
+      {showChallenge && (
+        <Button
+          size="lg"
+          color="gray-white"
+          className="max-w-xs self-center"
+          onClick={withTracking(
+            () => setOpenCreateChallengeModal(true),
+            'click challenge button'
+          )}
+        >
+          <Col className="items-center sm:flex-row">
+            <ChallengeIcon className="mx-auto h-[24px] w-5 text-gray-500 sm:mr-2" />
+            <span>Challenge</span>
+          </Col>
+          <CreateChallengeModal
+            isOpen={openCreateChallengeModal}
+            setOpen={setOpenCreateChallengeModal}
+            user={user}
+            contract={contract}
+          />
+        </Button>
+      )}
+
+      <FollowMarketButton contract={contract} user={user} />
+      {user?.id !== contract.creatorId && (
+        <LikeMarketButton contract={contract} user={user} />
+      )}
+      <Col className={'justify-center md:hidden'}>
+        <ContractInfoDialog contract={contract} />
+      </Col>
+    </Row>
+  )
+}

web/components/contract/featured-contract-badge.tsx

@@ -0,0 +1,9 @@
+import { BadgeCheckIcon } from '@heroicons/react/solid'
+
+export function FeaturedContractBadge() {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-3  py-0.5 text-sm font-medium text-green-800">
+      <BadgeCheckIcon className="h-4 w-4" aria-hidden="true" /> Featured
+    </span>
+  )
+}

web/components/contract/like-market-button.tsx

@@ -0,0 +1,61 @@
+import { HeartIcon } from '@heroicons/react/outline'
+import { Button } from 'web/components/button'
+import React, { useMemo } from 'react'
+import { Contract } from 'common/contract'
+import { User } from 'common/user'
+import { useUserLikes } from 'web/hooks/use-likes'
+import toast from 'react-hot-toast'
+import { formatMoney } from 'common/util/format'
+import { likeContract } from 'web/lib/firebase/likes'
+import { LIKE_TIP_AMOUNT } from 'common/like'
+import clsx from 'clsx'
+import { Col } from 'web/components/layout/col'
+import { firebaseLogin } from 'web/lib/firebase/users'
+import { useMarketTipTxns } from 'web/hooks/use-tip-txns'
+import { sum } from 'lodash'
+
+export function LikeMarketButton(props: {
+  contract: Contract
+  user: User | null | undefined
+}) {
+  const { contract, user } = props
+  const tips = useMarketTipTxns(contract.id).filter(
+    (txn) => txn.fromId === user?.id
+  )
+  const totalTipped = useMemo(() => {
+    return sum(tips.map((tip) => tip.amount))
+  }, [tips])
+  const likes = useUserLikes(user?.id)
+  const userLikedContractIds = likes
+    ?.filter((l) => l.type === 'contract')
+    .map((l) => l.id)
+
+  const onLike = async () => {
+    if (!user) return firebaseLogin()
+    await likeContract(user, contract)
+    toast(`You tipped ${contract.creatorName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
+  }
+
+  return (
+    <Button
+      size={'lg'}
+      className={'max-w-xs self-center'}
+      color={'gray-white'}
+      onClick={onLike}
+    >
+      <Col className={'items-center sm:flex-row'}>
+        <HeartIcon
+          className={clsx(
+            'h-[24px] w-5 sm:mr-2',
+            user &&
+              (userLikedContractIds?.includes(contract.id) ||
+                (!likes && contract.likedByUserIds?.includes(user.id)))
+              ? 'fill-red-500 text-red-500'
+              : ''
+          )}
+        />
+        Tip {totalTipped > 0 ? `(${formatMoney(totalTipped)})` : ''}
+      </Col>
+    </Button>
+  )
+}