Migrate prod bot (#1052)

* Updated dev config to point to new Twitch dev bot hosting location.

* Updated prod config to point to new Twitch bot hosting location.

common/.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
             caughtErrorsIgnorePattern: '^_',
           },
         ],
-        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-imports': 'warn',
       },
     },
   ],

common/charity.ts

@@ -595,7 +595,8 @@ In addition to housing impact litigation, we provide free legal aid, education a
     photo:
       'https://firebasestorage.googleapis.com/v0/b/mantic-markets.appspot.com/o/user-images%2Fdefault%2Fci2h3hStFM.47?alt=media&token=0d2cdc3d-e4d8-4f5e-8f23-4a586b6ff637',
     preview: 'Donate supplies to soldiers in Ukraine',
-    description: 'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.',
+    description:
+      'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.',
   },
 ].map((charity) => {
   const slug = charity.name.toLowerCase().replace(/\s/g, '-')

common/contract.ts

@@ -10,6 +10,7 @@ export type AnyOutcomeType =
   | PseudoNumeric
   | FreeResponse
   | Numeric
+
 export type AnyContractType =
   | (CPMM & Binary)
   | (CPMM & PseudoNumeric)

common/envs/dev.ts

@@ -16,7 +16,6 @@ export const DEV_CONFIG: EnvConfig = {
   cloudRunId: 'w3txbmd3ba',
   cloudRunRegion: 'uc',
   amplitudeApiKey: 'fd8cbfd964b9a205b8678a39faae71b3',
-  // this is Phil's deployment
+  twitchBotEndpoint: 'https://dev-twitch-bot.manifold.markets',
-  twitchBotEndpoint: 'https://king-prawn-app-5btyw.ondigitalocean.app',
   sprigEnvironmentId: 'Tu7kRZPm7daP',
 }

common/envs/prod.ts

@@ -70,7 +70,7 @@ export const PROD_CONFIG: EnvConfig = {
     appId: '1:128925704902:web:f61f86944d8ffa2a642dc7',
     measurementId: 'G-SSFK1Q138D',
   },
-  twitchBotEndpoint: 'https://twitch-bot-nggbo3neva-uc.a.run.app',
+  twitchBotEndpoint: 'https://twitch-bot.manifold.markets',
   cloudRunId: 'nggbo3neva',
   cloudRunRegion: 'uc',
   adminEmails: [

common/like.ts

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

common/package.json

@@ -8,11 +8,13 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@tiptap/core": "2.0.0-beta.182",
+    "@tiptap/core": "2.0.0-beta.199",
-    "@tiptap/extension-image": "2.0.0-beta.30",
+    "@tiptap/extension-image": "2.0.0-beta.199",
-    "@tiptap/extension-link": "2.0.0-beta.43",
+    "@tiptap/extension-link": "2.0.0-beta.199",
-    "@tiptap/extension-mention": "2.0.0-beta.102",
+    "@tiptap/extension-mention": "2.0.0-beta.199",
-    "@tiptap/starter-kit": "2.0.0-beta.191",
+    "@tiptap/html": "2.0.0-beta.199",
+    "@tiptap/starter-kit": "2.0.0-beta.199",
+    "@tiptap/suggestion": "2.0.0-beta.199",
     "lodash": "4.17.21"
   },
   "devDependencies": {

common/payouts-fixed.ts

@@ -56,7 +56,8 @@ export const getLiquidityPoolPayouts = (
   liquidities: LiquidityProvision[]
 ) => {
   const { pool, subsidyPool } = contract
-  const finalPool = pool[outcome] + subsidyPool
+  const finalPool = pool[outcome] + (subsidyPool ?? 0)
+  if (finalPool < 1e-3) return []
 
   const weights = getCpmmLiquidityPoolWeights(liquidities)
 
@@ -95,7 +96,8 @@ export const getLiquidityPoolProbPayouts = (
   liquidities: LiquidityProvision[]
 ) => {
   const { pool, subsidyPool } = contract
-  const finalPool = p * pool.YES + (1 - p) * pool.NO + subsidyPool
+  const finalPool = p * pool.YES + (1 - p) * pool.NO + (subsidyPool ?? 0)
+  if (finalPool < 1e-3) return []
 
   const weights = getCpmmLiquidityPoolWeights(liquidities)
 

common/post.ts

@@ -13,6 +13,9 @@ export type Post = {
   creatorName: string
   creatorUsername: string
   creatorAvatarUrl?: string
+
+  likedByUserIds?: string[]
+  likedByUserCount?: number
 }
 
 export type DateDoc = Post & {

common/util/parse.ts

@@ -1,4 +1,5 @@
-import { generateText, JSONContent } from '@tiptap/core'
+import { generateText, JSONContent, Node } from '@tiptap/core'
+import { generateJSON } from '@tiptap/html'
 // Tiptap starter extensions
 import { Blockquote } from '@tiptap/extension-blockquote'
 import { Bold } from '@tiptap/extension-bold'
@@ -51,6 +52,26 @@ export function parseMentions(data: JSONContent): string[] {
   return uniq(mentions)
 }
 
+// TODO: this is a hack to get around the fact that tiptap doesn't have a
+// way to add a node view without bundling in tsx
+function skippableComponent(name: string): Node<any, any> {
+  return Node.create({
+    name,
+
+    group: 'block',
+
+    content: 'inline*',
+
+    parseHTML() {
+      return [
+        {
+          tag: 'grid-cards-component',
+        },
+      ]
+    },
+  })
+}
+
 const stringParseExts = [
   // StarterKit extensions
   Blockquote,
@@ -78,6 +99,8 @@ const stringParseExts = [
     renderText: ({ node }) =>
       '[embed]' + node.attrs.src ? `(${node.attrs.src})` : '',
   }),
+  skippableComponent('gridCardsComponent'),
+  skippableComponent('staticReactEmbedComponent'),
   TiptapTweet.extend({ renderText: () => '[tweet]' }),
   TiptapSpoiler.extend({ renderHTML: () => ['span', '[spoiler]', 0] }),
 ]
@@ -86,3 +109,7 @@ export function richTextToString(text?: JSONContent) {
   if (!text) return ''
   return generateText(text, stringParseExts)
 }
+
+export function htmlToRichText(html: string) {
+  return generateJSON(html, stringParseExts)
+}

docs/docs/api.md

@@ -680,6 +680,17 @@ $ curl https://manifold.markets/api/v0/market/{marketId}/sell -X POST \
     --data-raw '{"outcome": "YES", "shares": 10}'
 ```
 
+### `POST /v0/comment`
+
+Creates a comment in the specified market. Only supports top-level comments for now.
+
+Parameters:
+
+- `contractId`: Required. The ID of the market to comment on.
+- `content`: The comment to post, formatted as [TipTap json](https://tiptap.dev/guide/output#option-1-json), OR
+- `html`: The comment to post, formatted as an HTML string, OR
+- `markdown`: The comment to post, formatted as a markdown string.
+
 ### `GET /v0/bets`
 
 Gets a list of bets, ordered by creation date descending.

firestore.rules

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

functions/.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
             caughtErrorsIgnorePattern: '^_',
           },
         ],
-        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-imports': 'warn',
       },
     },
   ],

functions/package.json

@@ -15,9 +15,9 @@
     "dev": "nodemon src/serve.ts",
     "localDbScript": "firebase emulators:start --only functions,firestore,pubsub --import=./firestore_export",
     "serve": "firebase use dev && yarn build && firebase emulators:start --only functions,firestore,pubsub --import=./firestore_export",
-    "db:update-local-from-remote": "yarn db:backup-remote && gsutil rsync -r gs://$npm_package_config_firestore/firestore_export ./firestore_export",
+    "db:update-local-from-remote": "yarn db:backup-remote && gsutil -m rsync -r gs://$npm_package_config_firestore/firestore_export ./firestore_export",
     "db:backup-local": "firebase emulators:export --force ./firestore_export",
-    "db:rename-remote-backup-folder": "gsutil mv gs://$npm_package_config_firestore/firestore_export gs://$npm_package_config_firestore/firestore_export_$(date +%d-%m-%Y-%H-%M)",
+    "db:rename-remote-backup-folder": "gsutil -m mv gs://$npm_package_config_firestore/firestore_export gs://$npm_package_config_firestore/firestore_export_$(date +%d-%m-%Y-%H-%M)",
     "db:backup-remote": "yarn db:rename-remote-backup-folder && gcloud firestore export gs://$npm_package_config_firestore/firestore_export/",
     "verify": "(cd .. && yarn verify)",
     "verify:dir": "npx eslint . --max-warnings 0; tsc -b -v --pretty"
@@ -26,11 +26,13 @@
   "dependencies": {
     "@amplitude/node": "1.10.0",
     "@google-cloud/functions-framework": "3.1.2",
-    "@tiptap/core": "2.0.0-beta.182",
+    "@tiptap/core": "2.0.0-beta.199",
-    "@tiptap/extension-image": "2.0.0-beta.30",
+    "@tiptap/extension-image": "2.0.0-beta.199",
-    "@tiptap/extension-link": "2.0.0-beta.43",
+    "@tiptap/extension-link": "2.0.0-beta.199",
-    "@tiptap/extension-mention": "2.0.0-beta.102",
+    "@tiptap/extension-mention": "2.0.0-beta.199",
-    "@tiptap/starter-kit": "2.0.0-beta.191",
+    "@tiptap/html": "2.0.0-beta.199",
+    "@tiptap/starter-kit": "2.0.0-beta.199",
+    "@tiptap/suggestion": "2.0.0-beta.199",
     "cors": "2.8.5",
     "dayjs": "1.11.4",
     "express": "4.18.1",
@@ -38,6 +40,7 @@
     "firebase-functions": "3.21.2",
     "lodash": "4.17.21",
     "mailgun-js": "0.22.0",
+    "marked": "4.1.1",
     "module-alias": "2.2.2",
     "node-fetch": "2",
     "stripe": "8.194.0",
@@ -45,6 +48,7 @@
   },
   "devDependencies": {
     "@types/mailgun-js": "0.22.12",
+    "@types/marked": "4.0.7",
     "@types/module-alias": "2.0.1",
     "@types/node-fetch": "2.6.2",
     "firebase-functions-test": "0.3.3",

functions/src/create-comment.ts

@@ -0,0 +1,105 @@
+import * as admin from 'firebase-admin'
+
+import { getContract, getUser, log } from './utils'
+import { APIError, newEndpoint, validate } from './api'
+import { JSONContent } from '@tiptap/core'
+import { z } from 'zod'
+import { removeUndefinedProps } from '../../common/util/object'
+import { htmlToRichText } from '../../common/util/parse'
+import { marked } from 'marked'
+
+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({
+  contractId: z.string(),
+  content: contentSchema.optional(),
+  html: z.string().optional(),
+  markdown: z.string().optional(),
+})
+
+const MAX_COMMENT_JSON_LENGTH = 20000
+
+// For now, only supports creating a new top-level comment on a contract.
+// Replies, posts, chats are not supported yet.
+export const createcomment = newEndpoint({}, async (req, auth) => {
+  const firestore = admin.firestore()
+  const { contractId, content, html, markdown } = validate(postSchema, req.body)
+
+  const creator = await getUser(auth.uid)
+  const contract = await getContract(contractId)
+
+  if (!creator) {
+    throw new APIError(400, 'No user exists with the authenticated user ID.')
+  }
+  if (!contract) {
+    throw new APIError(400, 'No contract exists with the given ID.')
+  }
+
+  let contentJson = null
+  if (content) {
+    contentJson = content
+  } else if (html) {
+    console.log('html', html)
+    contentJson = htmlToRichText(html)
+  } else if (markdown) {
+    const markedParse = marked.parse(markdown)
+    log('parsed', markedParse)
+    contentJson = htmlToRichText(markedParse)
+    log('json', contentJson)
+  }
+
+  if (!contentJson) {
+    throw new APIError(400, 'No comment content provided.')
+  }
+
+  if (JSON.stringify(contentJson).length > MAX_COMMENT_JSON_LENGTH) {
+    throw new APIError(
+      400,
+      `Comment is too long; should be less than ${MAX_COMMENT_JSON_LENGTH} as a JSON string.`
+    )
+  }
+
+  const ref = firestore.collection(`contracts/${contractId}/comments`).doc()
+
+  const comment = removeUndefinedProps({
+    id: ref.id,
+    content: contentJson,
+    createdTime: Date.now(),
+
+    userId: creator.id,
+    userName: creator.name,
+    userUsername: creator.username,
+    userAvatarUrl: creator.avatarUrl,
+
+    // OnContract fields
+    commentType: 'contract',
+    contractId: contractId,
+    contractSlug: contract.slug,
+    contractQuestion: contract.question,
+  })
+
+  await ref.set(comment)
+
+  return { status: 'success', comment }
+})

functions/src/create-notification.ts

@@ -197,6 +197,7 @@ export const createCommentOrAnswerOrUpdatedContractNotification = async (
     return await notificationRef.set(removeUndefinedProps(notification))
   }
 
+  const needNotFollowContractReasons = ['tagged_user']
   const stillFollowingContract = (userId: string) => {
     return contractFollowersIds.includes(userId)
   }
@@ -205,7 +206,12 @@ export const createCommentOrAnswerOrUpdatedContractNotification = async (
     userId: string,
     reason: notification_reason_types
   ) => {
-    if (!stillFollowingContract(userId) || sourceUser.id == userId) return
+    if (
+      (!stillFollowingContract(userId) &&
+        !needNotFollowContractReasons.includes(reason)) ||
+      sourceUser.id == userId
+    )
+      return
     const privateUser = await getPrivateUser(userId)
     if (!privateUser) return
     const { sendToBrowser, sendToEmail } = getNotificationDestinationsForUser(

functions/src/create-post.ts

@@ -103,6 +103,7 @@ export const createpost = newEndpoint({}, async (req, auth) => {
     creatorName: creator.name,
     creatorUsername: creator.username,
     creatorAvatarUrl: creator.avatarUrl,
+    itemType: 'post',
   })
 
   await postRef.create(post)

functions/src/index.ts

@@ -65,6 +65,7 @@ import { sellbet } from './sell-bet'
 import { sellshares } from './sell-shares'
 import { claimmanalink } from './claim-manalink'
 import { createmarket } from './create-market'
+import { createcomment } from './create-comment'
 import { addcommentbounty, awardcommentbounty } from './update-comment-bounty'
 import { creategroup } from './create-group'
 import { resolvemarket } from './resolve-market'
@@ -94,6 +95,7 @@ const claimManalinkFunction = toCloudFunction(claimmanalink)
 const createMarketFunction = toCloudFunction(createmarket)
 const addSubsidyFunction = toCloudFunction(addsubsidy)
 const addCommentBounty = toCloudFunction(addcommentbounty)
+const createCommentFunction = toCloudFunction(createcomment)
 const awardCommentBounty = toCloudFunction(awardcommentbounty)
 const createGroupFunction = toCloudFunction(creategroup)
 const resolveMarketFunction = toCloudFunction(resolvemarket)
@@ -130,6 +132,7 @@ export {
   acceptChallenge as acceptchallenge,
   createPostFunction as createpost,
   saveTwitchCredentials as savetwitchcredentials,
+  createCommentFunction as createcomment,
   addCommentBounty as addcommentbounty,
   awardCommentBounty as awardcommentbounty,
   updateMetricsFunction as updatemetrics,

functions/src/resolve-market.ts

@@ -1,6 +1,6 @@
 import * as admin from 'firebase-admin'
 import { z } from 'zod'
-import { mapValues, groupBy, sumBy } from 'lodash'
+import { mapValues, groupBy, sumBy, uniqBy } from 'lodash'
 
 import {
   Contract,
@@ -15,14 +15,14 @@ import {
   getValues,
   isProd,
   log,
-  payUser,
+  payUsers,
+  payUsersMultipleTransactions,
   revalidateStaticProps,
 } from './utils'
 import {
   getLoanPayouts,
   getPayouts,
   groupPayoutsByUser,
-  Payout,
 } from '../../common/payouts'
 import { isAdmin, isManifoldId } from '../../common/envs/constants'
 import { removeUndefinedProps } from '../../common/util/object'
@@ -36,6 +36,7 @@ import {
   DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
   HOUSE_LIQUIDITY_PROVIDER_ID,
 } from '../../common/antes'
+import { User } from 'common/user'
 
 const bodySchema = z.object({
   contractId: z.string(),
@@ -89,13 +90,10 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
   if (!contractSnap.exists)
     throw new APIError(404, 'No contract exists with the provided ID')
   const contract = contractSnap.data() as Contract
-  const { creatorId, closeTime } = contract
+  const { creatorId } = contract
   const firebaseUser = await admin.auth().getUser(auth.uid)
 
-  const { value, resolutions, probabilityInt, outcome } = getResolutionParams(
+  const resolutionParams = getResolutionParams(contract, req.body)
-    contract,
-    req.body
-  )
 
   if (
     creatorId !== auth.uid &&
@@ -109,6 +107,16 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
   const creator = await getUser(creatorId)
   if (!creator) throw new APIError(500, 'Creator not found')
 
+  return await resolveMarket(contract, creator, resolutionParams)
+})
+
+export const resolveMarket = async (
+  contract: Contract,
+  creator: User,
+  { value, resolutions, probabilityInt, outcome }: ResolutionParams
+) => {
+  const { creatorId, closeTime, id: contractId } = contract
+
   const resolutionProbability =
     probabilityInt !== undefined ? probabilityInt / 100 : undefined
 
@@ -131,8 +139,12 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
     (doc) => doc.data() as LiquidityProvision
   )
 
-  const { payouts, creatorPayout, liquidityPayouts, collectedFees } =
+  const {
-    getPayouts(
+    payouts: traderPayouts,
+    creatorPayout,
+    liquidityPayouts,
+    collectedFees,
+  } = getPayouts(
     outcome,
     contract,
     bets,
@@ -156,33 +168,47 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
     subsidyPool: 0,
   }
 
-  await contractDoc.update(updatedContract)
-
-  console.log('contract ', contractId, 'resolved to:', outcome)
-
   const openBets = bets.filter((b) => !b.isSold && !b.sale)
   const loanPayouts = getLoanPayouts(openBets)
 
+  const payoutsWithoutLoans = [
+    { userId: creatorId, payout: creatorPayout, deposit: creatorPayout },
+    ...liquidityPayouts.map((p) => ({ ...p, deposit: p.payout })),
+    ...traderPayouts,
+  ]
+  const payouts = [...payoutsWithoutLoans, ...loanPayouts]
+
   if (!isProd())
     console.log(
-      'payouts:',
+      'trader payouts:',
-      payouts,
+      traderPayouts,
       'creator payout:',
       creatorPayout,
-      'liquidity payout:'
+      'liquidity payout:',
+      liquidityPayouts,
+      'loan payouts:',
+      loanPayouts
     )
 
-  if (creatorPayout)
+  const userCount = uniqBy(payouts, 'userId').length
-    await processPayouts([{ userId: creatorId, payout: creatorPayout }], true)
+  const contractDoc = firestore.doc(`contracts/${contractId}`)
 
-  await processPayouts(liquidityPayouts, true)
+  if (userCount <= 499) {
+    await firestore.runTransaction(async (transaction) => {
+      payUsers(transaction, payouts)
+      transaction.update(contractDoc, updatedContract)
+    })
+  } else {
+    await payUsersMultipleTransactions(payouts)
+    await contractDoc.update(updatedContract)
+  }
+
+  console.log('contract ', contractId, 'resolved to:', outcome)
 
-  await processPayouts([...payouts, ...loanPayouts])
   await undoUniqueBettorRewardsIfCancelResolution(contract, outcome)
-
   await revalidateStaticProps(getContractPath(contract))
 
-  const userPayoutsWithoutLoans = groupPayoutsByUser(payouts)
+  const userPayoutsWithoutLoans = groupPayoutsByUser(payoutsWithoutLoans)
 
   const userInvestments = mapValues(
     groupBy(bets, (bet) => bet.userId),
@@ -209,18 +235,6 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
   )
 
   return updatedContract
-})
-
-const processPayouts = async (payouts: Payout[], isDeposit = false) => {
-  const userPayouts = groupPayoutsByUser(payouts)
-
-  const payoutPromises = Object.entries(userPayouts).map(([userId, payout]) =>
-    payUser(userId, payout, isDeposit)
-  )
-
-  return await Promise.all(payoutPromises)
-    .catch((e) => ({ status: 'error', message: e }))
-    .then(() => ({ status: 'success' }))
 }
 
 function getResolutionParams(contract: Contract, body: string) {
@@ -287,6 +301,8 @@ function getResolutionParams(contract: Contract, body: string) {
   throw new APIError(500, `Invalid outcome type: ${outcomeType}`)
 }
 
+type ResolutionParams = ReturnType<typeof getResolutionParams>
+
 function validateAnswer(
   contract: FreeResponseContract | MultipleChoiceContract,
   answer: number

functions/src/scripts/backfill-subsidy-pool.ts

@@ -0,0 +1,24 @@
+import * as admin from 'firebase-admin'
+import { initAdmin } from './script-init'
+
+initAdmin()
+const firestore = admin.firestore()
+
+if (require.main === module) {
+  const contractsRef = firestore.collection('contracts')
+  contractsRef.get().then(async (contractsSnaps) => {
+
+    console.log(`Loaded ${contractsSnaps.size} contracts.`)
+
+    const needsFilling = contractsSnaps.docs.filter((ct) => {
+      return !('subsidyPool' in ct.data())
+    })
+
+    console.log(`Found ${needsFilling.length} contracts to update.`)
+    await Promise.all(
+      needsFilling.map((ct) => ct.ref.update({ subsidyPool: 0 }))
+    )
+
+    console.log(`Updated all contracts.`)
+  })
+}

functions/src/scripts/resolve-markets-again.ts

@@ -0,0 +1,59 @@
+import { initAdmin } from './script-init'
+initAdmin()
+
+import { zip } from 'lodash'
+import { filterDefined } from 'common/util/array'
+import { resolveMarket } from '../resolve-market'
+import { getContract, getUser } from '../utils'
+
+if (require.main === module) {
+  const contractIds = process.argv.slice(2)
+  if (contractIds.length === 0) {
+    throw new Error('No contract ids provided')
+  }
+  resolveMarketsAgain(contractIds).then(() => process.exit(0))
+}
+
+async function resolveMarketsAgain(contractIds: string[]) {
+  const maybeContracts = await Promise.all(contractIds.map(getContract))
+  if (maybeContracts.some((c) => !c)) {
+    throw new Error('Invalid contract id')
+  }
+  const contracts = filterDefined(maybeContracts)
+
+  const maybeCreators = await Promise.all(
+    contracts.map((c) => getUser(c.creatorId))
+  )
+  if (maybeCreators.some((c) => !c)) {
+    throw new Error('No creator found')
+  }
+  const creators = filterDefined(maybeCreators)
+
+  if (
+    !contracts.every((c) => c.resolution === 'YES' || c.resolution === 'NO')
+  ) {
+    throw new Error('Only YES or NO resolutions supported')
+  }
+
+  const resolutionParams = contracts.map((c) => ({
+    outcome: c.resolution as string,
+    value: undefined,
+    probabilityInt: undefined,
+    resolutions: undefined,
+  }))
+
+  const params = zip(contracts, creators, resolutionParams)
+
+  for (const [contract, creator, resolutionParams] of params) {
+    if (contract && creator && resolutionParams) {
+      console.log('Resolving', contract.question)
+      try {
+        await resolveMarket(contract, creator, resolutionParams)
+      } catch (e) {
+        console.log(e)
+      }
+    }
+  }
+
+  console.log(`Resolved all contracts.`)
+}

functions/src/serve.ts

@@ -19,6 +19,7 @@ import { sellbet } from './sell-bet'
 import { sellshares } from './sell-shares'
 import { claimmanalink } from './claim-manalink'
 import { createmarket } from './create-market'
+import { createcomment } from './create-comment'
 import { creategroup } from './create-group'
 import { resolvemarket } from './resolve-market'
 import { unsubscribe } from './unsubscribe'
@@ -53,6 +54,7 @@ addJsonEndpointRoute('/transact', transact)
 addJsonEndpointRoute('/changeuserinfo', changeuserinfo)
 addJsonEndpointRoute('/createuser', createuser)
 addJsonEndpointRoute('/createanswer', createanswer)
+addJsonEndpointRoute('/createcomment', createcomment)
 addJsonEndpointRoute('/placebet', placebet)
 addJsonEndpointRoute('/cancelbet', cancelbet)
 addJsonEndpointRoute('/sellbet', sellbet)

functions/src/utils.ts

@@ -1,7 +1,8 @@
 import * as admin from 'firebase-admin'
 import fetch from 'node-fetch'
+import { FieldValue, Transaction } from 'firebase-admin/firestore'
+import { chunk, groupBy, mapValues, sumBy } from 'lodash'
 
-import { chunk } from 'lodash'
 import { Contract } from '../../common/contract'
 import { PrivateUser, User } from '../../common/user'
 import { Group } from '../../common/group'
@@ -128,38 +129,29 @@ export const getUserByUsername = async (username: string) => {
   return snap.empty ? undefined : (snap.docs[0].data() as User)
 }
 
+const firestore = admin.firestore()
+
 const updateUserBalance = (
+  transaction: Transaction,
   userId: string,
-  delta: number,
+  balanceDelta: number,
-  isDeposit = false
+  depositDelta: number
 ) => {
-  const firestore = admin.firestore()
-  return firestore.runTransaction(async (transaction) => {
   const userDoc = firestore.doc(`users/${userId}`)
-    const userSnap = await transaction.get(userDoc)
-    if (!userSnap.exists) return
-    const user = userSnap.data() as User
 
-    const newUserBalance = user.balance + delta
+  // Note: Balance is allowed to go negative.
-
+  transaction.update(userDoc, {
-    // if (newUserBalance < 0)
+    balance: FieldValue.increment(balanceDelta),
-    //   throw new Error(
+    totalDeposits: FieldValue.increment(depositDelta),
-    //     `User (${userId}) balance cannot be negative: ${newUserBalance}`
-    //   )
-
-    if (isDeposit) {
-      const newTotalDeposits = (user.totalDeposits || 0) + delta
-      transaction.update(userDoc, { totalDeposits: newTotalDeposits })
-    }
-
-    transaction.update(userDoc, { balance: newUserBalance })
   })
 }
 
 export const payUser = (userId: string, payout: number, isDeposit = false) => {
   if (!isFinite(payout)) throw new Error('Payout is not finite: ' + payout)
 
-  return updateUserBalance(userId, payout, isDeposit)
+  return firestore.runTransaction(async (transaction) => {
+    updateUserBalance(transaction, userId, payout, isDeposit ? payout : 0)
+  })
 }
 
 export const chargeUser = (
@@ -170,7 +162,67 @@ export const chargeUser = (
   if (!isFinite(charge) || charge <= 0)
     throw new Error('User charge is not positive: ' + charge)
 
-  return updateUserBalance(userId, -charge, isAnte)
+  return payUser(userId, -charge, isAnte)
+}
+
+const checkAndMergePayouts = (
+  payouts: {
+    userId: string
+    payout: number
+    deposit?: number
+  }[]
+) => {
+  for (const { payout, deposit } of payouts) {
+    if (!isFinite(payout)) {
+      throw new Error('Payout is not finite: ' + payout)
+    }
+    if (deposit !== undefined && !isFinite(deposit)) {
+      throw new Error('Deposit is not finite: ' + deposit)
+    }
+  }
+
+  const groupedPayouts = groupBy(payouts, 'userId')
+  return Object.values(
+    mapValues(groupedPayouts, (payouts, userId) => ({
+      userId,
+      payout: sumBy(payouts, 'payout'),
+      deposit: sumBy(payouts, (p) => p.deposit ?? 0),
+    }))
+  )
+}
+
+// Max 500 users in one transaction.
+export const payUsers = (
+  transaction: Transaction,
+  payouts: {
+    userId: string
+    payout: number
+    deposit?: number
+  }[]
+) => {
+  const mergedPayouts = checkAndMergePayouts(payouts)
+  for (const { userId, payout, deposit } of mergedPayouts) {
+    updateUserBalance(transaction, userId, payout, deposit)
+  }
+}
+
+export const payUsersMultipleTransactions = async (
+  payouts: {
+    userId: string
+    payout: number
+    deposit?: number
+  }[]
+) => {
+  const mergedPayouts = checkAndMergePayouts(payouts)
+  const payoutChunks = chunk(mergedPayouts, 500)
+
+  for (const payoutChunk of payoutChunks) {
+    await firestore.runTransaction(async (transaction) => {
+      for (const { userId, payout, deposit } of payoutChunk) {
+        updateUserBalance(transaction, userId, payout, deposit)
+      }
+    })
+  }
 }
 
 export const getContractPath = (contract: Contract) => {

web/.eslintrc.js

@@ -22,8 +22,9 @@ module.exports = {
     '@next/next/no-typos': 'off',
     'linebreak-style': ['error', 'unix'],
     'lodash/import-scope': [2, 'member'],
-    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-imports': 'warn',
   },
+  ignorePatterns: ['/public/mtg/*'],
   env: {
     browser: true,
     node: true,

web/components/add-funds-modal.tsx

@@ -35,7 +35,7 @@ export function AddFundsModal(props: {
         <div className="text-xl">{manaToUSD(amountSelected)}</div>
       </div>
 
-      <div className="modal-action">
+      <div className="flex">
         <Button color="gray-white" onClick={() => setOpen(false)}>
           Back
         </Button>

web/components/amount-input.tsx

@@ -7,6 +7,8 @@ import { ENV_CONFIG } from 'common/envs/constants'
 import { Row } from './layout/row'
 import { AddFundsModal } from './add-funds-modal'
 import { Input } from './input'
+import Slider from 'rc-slider'
+import 'rc-slider/assets/index.css'
 
 export function AmountInput(props: {
   amount: number | undefined
@@ -40,18 +42,13 @@ export function AmountInput(props: {
 
   return (
     <>
-      <Col className={className}>
+      <Col className={clsx('relative', className)}>
         <label className="font-sm md:font-lg relative">
           <span className="text-greyscale-4 absolute top-1/2 my-auto ml-2 -translate-y-1/2">
             {label}
           </span>
           <Input
-            className={clsx(
+            className={clsx('w-24 pl-9 !text-base md:w-auto', inputClassName)}
-              'pl-9',
-              error && 'input-error',
-              'w-24 md:w-auto',
-              inputClassName
-            )}
             ref={inputRef}
             type="text"
             pattern="[0-9]*"
@@ -59,13 +56,14 @@ export function AmountInput(props: {
             placeholder="0"
             maxLength={6}
             value={amount ?? ''}
+            error={!!error}
             disabled={disabled}
             onChange={(e) => onAmountChange(e.target.value)}
           />
         </label>
 
         {error && (
-          <div className="absolute mt-11 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
+          <div className="absolute -bottom-5 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
             {error === 'Insufficient balance' ? (
               <>
                 Not enough funds.
@@ -149,7 +147,7 @@ export function BuyAmountInput(props: {
 
   return (
     <>
-      <Row className="gap-4">
+      <Row className="items-center gap-4">
         <AmountInput
           amount={amount}
           onChange={onAmountChange}
@@ -161,14 +159,23 @@ export function BuyAmountInput(props: {
           inputRef={inputRef}
         />
         {showSlider && (
-          <input
+          <Slider
-            type="range"
+            min={0}
-            min="0"
+            max={205}
-            max="205"
             value={getRaw(amount ?? 0)}
-            onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))}
+            onChange={(value) => onAmountChange(parseRaw(value as number))}
-            className="range range-lg only-thumb my-auto align-middle xl:hidden"
+            className="mx-4 !h-4 xl:hidden [&>.rc-slider-rail]:bg-gray-200 [&>.rc-slider-track]:bg-indigo-400 [&>.rc-slider-handle]:bg-indigo-400"
-            step="5"
+            railStyle={{ height: 16, top: 0, left: 0 }}
+            trackStyle={{ height: 16, top: 0 }}
+            handleStyle={{
+              height: 32,
+              width: 32,
+              opacity: 1,
+              border: 'none',
+              boxShadow: 'none',
+              top: -2,
+            }}
+            step={5}
           />
         )}
       </Row>

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

@@ -126,7 +126,10 @@ export function AnswerBetPanel(props: {
         </div>
 
         {!isModal && (
-          <button className="btn-ghost btn-circle" onClick={closePanel}>
+          <button
+            className="hover:bg-greyscale-2 rounded-full"
+            onClick={closePanel}
+          >
             <XIcon
               className="mx-auto h-8 w-8 text-gray-500"
               aria-hidden="true"

web/components/answers/answer-item.tsx

@@ -100,8 +100,8 @@ export function AnswerItem(props: {
             </div>
           ))}
         {showChoice ? (
-          <div className="form-control py-1">
+          <div className="flex flex-col py-1">
-            <label className="label cursor-pointer gap-3">
+            <label className="cursor-pointer gap-3 px-1 py-2">
               <span className="">Choose this answer</span>
               {showChoice === 'radio' && (
                 <input

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

@@ -10,6 +10,7 @@ import { ChooseCancelSelector } from '../yes-no-selector'
 import { ResolveConfirmationButton } from '../confirmation-button'
 import { removeUndefinedProps } from 'common/util/object'
 import { BETTOR, PAST_BETS } from 'common/user'
+import { Button } from '../button'
 
 export function AnswerResolvePanel(props: {
   isAdmin: boolean
@@ -109,14 +110,14 @@ export function AnswerResolvePanel(props: {
           )}
         >
           {resolveOption && (
-            <button
+            <Button
-              className="btn btn-ghost"
+              color="gray-white"
               onClick={() => {
                 setResolveOption(undefined)
               }}
             >
               Clear
-            </button>
+            </Button>
           )}
 
           <ResolveConfirmationButton

web/components/answers/answers-panel.tsx

@@ -27,6 +27,13 @@ import { CHOICE_ANSWER_COLORS } from '../charts/contract/choice'
 import { useChartAnswers } from '../charts/contract/choice'
 import { ChatIcon } from '@heroicons/react/outline'
 
+export function getAnswerColor(answer: Answer, answersArray: string[]) {
+  const colorIndex = answersArray.indexOf(answer.text)
+  return colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
+    ? CHOICE_ANSWER_COLORS[colorIndex]
+    : '#B1B1C7'
+}
+
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   onAnswerCommentClick: (answer: Answer) => void
@@ -107,8 +114,8 @@ export function AnswersPanel(props: {
     ? 'checkbox'
     : undefined
 
-  const colorSortedAnswer = useChartAnswers(contract).map(
+  const answersArray = useChartAnswers(contract).map(
-    (value, _index) => value.text
+    (answer, _index) => answer.text
   )
 
   return (
@@ -139,8 +146,8 @@ export function AnswersPanel(props: {
               key={item.id}
               answer={item}
               contract={contract}
-              colorIndex={colorSortedAnswer.indexOf(item.text)}
               onAnswerCommentClick={onAnswerCommentClick}
+              color={getAnswerColor(item, answersArray)}
             />
           ))}
           {hasZeroBetAnswers && !showAllAnswers && (
@@ -185,18 +192,14 @@ export function AnswersPanel(props: {
 function OpenAnswer(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   answer: Answer
-  colorIndex: number | undefined
+  color: string
   onAnswerCommentClick: (answer: Answer) => void
 }) {
-  const { answer, contract, colorIndex, onAnswerCommentClick } = props
+  const { answer, contract, onAnswerCommentClick, color } = props
   const { username, avatarUrl, text } = answer
   const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
   const probPercent = formatPercent(prob)
   const [open, setOpen] = useState(false)
-  const color =
-    colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
-      ? CHOICE_ANSWER_COLORS[colorIndex] + '55' // semi-transparent
-      : '#B1B1C755'
   const colorWidth = 100 * Math.max(prob, 0.01)
 
   return (
@@ -217,7 +220,7 @@ function OpenAnswer(props: {
           tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5'
         )}
         style={{
-          background: `linear-gradient(to right, ${color} ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
+          background: `linear-gradient(to right, ${color}90 ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
         }}
       >
         <Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">
@@ -227,10 +230,7 @@ function OpenAnswer(props: {
               username={username}
               avatarUrl={avatarUrl}
             />
-            <Linkify
+            <Linkify className="text-md whitespace-pre-line" text={text} />
-              className="text-md cursor-pointer whitespace-pre-line"
-              text={text}
-            />
           </Row>
           <Row className="gap-2">
             <div className="my-auto text-xl">{probPercent}</div>

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

@@ -197,17 +197,15 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
             </>
           )}
           {user ? (
-            <button
+            <Button
-              className={clsx(
+              color="green"
-                'btn mt-2',
+              size="lg"
-                canSubmit ? 'btn-outline' : 'btn-disabled',
+              loading={isSubmitting}
-                isSubmitting && 'loading'
-              )}
               disabled={!canSubmit}
               onClick={withTracking(submitAnswer, 'submit answer')}
             >
               Submit
-            </button>
+            </Button>
           ) : (
             text && (
               <Button

web/components/award-bounty-button.tsx

@@ -5,7 +5,6 @@ import { awardCommentBounty } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
 import { Row } from './layout/row'
 import { Contract } from 'common/contract'
-import { TextButton } from 'web/components/text-button'
 import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
 import { formatMoney } from 'common/util/format'
 
@@ -37,10 +36,17 @@ export function AwardBountyButton(prop: {
   const canUp = me && me.id !== comment.userId && contract.creatorId === me.id
   if (!canUp) return <div />
   return (
-    <Row className={clsx('-ml-2 items-center gap-0.5', !canUp ? '-ml-6' : '')}>
+    <Row
-      <TextButton className={'font-bold'} onClick={submit}>
+      className={clsx('my-auto items-center gap-0.5', !canUp ? '-ml-6' : '')}
+    >
+      <button
+        className={
+          'rounded-full border border-indigo-400 bg-indigo-50 py-0.5 px-2 text-xs text-indigo-400 transition-colors hover:bg-indigo-400 hover:text-white'
+        }
+        onClick={submit}
+      >
         Award {formatMoney(COMMENT_BOUNTY_AMOUNT)}
-      </TextButton>
+      </button>
     </Row>
   )
 }

web/components/bet-inline.tsx

@@ -92,10 +92,7 @@ export function BetInline(props: {
         />
         <BuyAmountInput
           className="-mb-4"
-          inputClassName={clsx(
+          inputClassName="w-20 !text-base"
-            'input-sm w-20 !text-base',
-            error && 'input-error'
-          )}
           amount={amount}
           onChange={setAmount}
           error="" // handle error ourselves

web/components/bet-panel.tsx

@@ -271,7 +271,7 @@ export function BuyPanel(props: {
     })
   }
 
-  const betDisabled = isSubmitting || !betAmount || error
+  const betDisabled = isSubmitting || !betAmount || !!error
 
   const { newPool, newP, newBet } = getBinaryCpmmBetInfo(
     outcome ?? 'YES',
@@ -493,7 +493,7 @@ function LimitOrderPanel(props: {
     !betAmount ||
     rangeError ||
     outOfRangeError ||
-    error ||
+    !!error ||
     (!hasYesLimitBet && !hasNoLimitBet)
 
   const yesLimitProb =
@@ -631,9 +631,9 @@ function LimitOrderPanel(props: {
 
   return (
     <Col className={hidden ? 'hidden' : ''}>
-      <Row className="mt-1 items-center gap-4">
+      <Row className="mt-1 mb-4 items-center gap-4">
         <Col className="gap-2">
-          <div className="relative ml-1 text-sm text-gray-500">
+          <div className="text-sm text-gray-500">
             Buy {isPseudoNumeric ? <HigherLabel /> : <YesLabel />} up to
           </div>
           <ProbabilityOrNumericInput
@@ -641,10 +641,11 @@ function LimitOrderPanel(props: {
             prob={lowLimitProb}
             setProb={setLowLimitProb}
             isSubmitting={isSubmitting}
+            placeholder="10"
           />
         </Col>
         <Col className="gap-2">
-          <div className="ml-1 text-sm text-gray-500">
+          <div className="text-sm text-gray-500">
             Buy {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} down to
           </div>
           <ProbabilityOrNumericInput
@@ -652,6 +653,7 @@ function LimitOrderPanel(props: {
             prob={highLimitProb}
             setProb={setHighLimitProb}
             isSubmitting={isSubmitting}
+            placeholder="90"
           />
         </Col>
       </Row>
@@ -785,11 +787,11 @@ function LimitOrderPanel(props: {
       {user && (
         <Button
           size="xl"
-          disabled={betDisabled ? true : false}
+          disabled={betDisabled}
           color={'indigo'}
           loading={isSubmitting}
           className="flex-1"
-          onClick={betDisabled ? undefined : submitBet}
+          onClick={submitBet}
         >
           {isSubmitting
             ? 'Submitting...'
@@ -980,11 +982,11 @@ export function SellPanel(props: {
       <Col className="mt-3 w-full gap-3 text-sm">
         <Row className="items-center justify-between gap-2 text-gray-500">
           Sale amount
-          <span className="text-neutral">{formatMoney(saleValue)}</span>
+          <span className="text-gray-700">{formatMoney(saleValue)}</span>
         </Row>
         <Row className="items-center justify-between gap-2 text-gray-500">
           Profit
-          <span className="text-neutral">{formatMoney(profit)}</span>
+          <span className="text-gray-700">{formatMoney(profit)}</span>
         </Row>
         <Row className="items-center justify-between">
           <div className="text-gray-500">
@@ -1000,11 +1002,11 @@ export function SellPanel(props: {
           <>
             <Row className="mt-6 items-center justify-between gap-2 text-gray-500">
               Loan payment
-              <span className="text-neutral">{formatMoney(-loanPaid)}</span>
+              <span className="text-gray-700">{formatMoney(-loanPaid)}</span>
             </Row>
             <Row className="items-center justify-between gap-2 text-gray-500">
               Net proceeds
-              <span className="text-neutral">{formatMoney(netProceeds)}</span>
+              <span className="text-gray-700">{formatMoney(netProceeds)}</span>
             </Row>
           </>
         )}

web/components/bet-summary.tsx

@@ -25,10 +25,8 @@ export function BetsSummary(props: {
   const isBinary = outcomeType === 'BINARY'
 
   const bets = props.userBets.filter((b) => !b.isAnte)
-  const { profitPercent, payout, profit, invested } = getContractBetMetrics(
+  const { profitPercent, payout, profit, invested, hasShares } =
-    contract,
+    getContractBetMetrics(contract, bets)
-    bets
-  )
 
   const excludeSales = bets.filter((b) => !b.isSold && !b.sale)
   const yesWinnings = sumBy(excludeSales, (bet) =>
@@ -39,6 +37,7 @@ export function BetsSummary(props: {
   )
 
   const position = yesWinnings - noWinnings
+  const outcome = hasShares ? (position > 0 ? 'YES' : 'NO') : undefined
 
   const prob = isBinary ? getProbability(contract) : 0
   const expectation = prob * yesWinnings + (1 - prob) * noWinnings
@@ -60,7 +59,9 @@ export function BetsSummary(props: {
           <Col>
             <div className="whitespace-nowrap text-sm text-gray-500">
               Position{' '}
-              <InfoTooltip text="Number of shares you own on net. 1 YES share = M$1 if the market resolves YES." />
+              <InfoTooltip
+                text={`Number of shares you own on net. 1 ${outcome} share = M$1 if the market resolves ${outcome}.`}
+              />
             </div>
             <div className="whitespace-nowrap">
               {position > 1e-7 ? (

web/components/bets-list.tsx

@@ -52,6 +52,8 @@ import {
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
 import { ExclamationIcon } from '@heroicons/react/outline'
+import { Select } from './select'
+import { Table } from './table'
 
 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
@@ -200,21 +202,19 @@ export function BetsList(props: { user: User }) {
         </Row>
 
         <Row className="gap-2">
-          <select
+          <Select
-            className="border-greyscale-4 self-start overflow-hidden rounded border px-2 py-2 text-sm"
             value={filter}
             onChange={(e) => setFilter(e.target.value as BetFilter)}
           >
-            <option value="open">Open</option>
+            <option value="open">Active</option>
             <option value="limit_bet">Limit orders</option>
             <option value="sold">Sold</option>
             <option value="closed">Closed</option>
             <option value="resolved">Resolved</option>
             <option value="all">All</option>
-          </select>
+          </Select>
 
-          <select
+          <Select
-            className="border-greyscale-4 self-start overflow-hidden rounded px-2 py-2 text-sm"
             value={sort}
             onChange={(e) => setSort(e.target.value as BetSort)}
           >
@@ -222,7 +222,7 @@ export function BetsList(props: { user: User }) {
             <option value="value">Value</option>
             <option value="profit">Profit</option>
             <option value="closeTime">Close date</option>
-          </select>
+          </Select>
         </Row>
       </Col>
 
@@ -451,7 +451,7 @@ export function ContractBetsTable(props: {
         </>
       )}
 
-      <table className="table-zebra table-compact table w-full text-gray-500">
+      <Table>
         <thead>
           <tr className="p-2">
             <th></th>
@@ -480,7 +480,7 @@ export function ContractBetsTable(props: {
             />
           ))}
         </tbody>
-      </table>
+      </Table>
     </div>
   )
 }
@@ -551,7 +551,7 @@ function BetRow(props: {
 
   return (
     <tr>
-      <td className="text-neutral">
+      <td className="text-gray-700">
         {isYourBet &&
           !isCPMM &&
           !isResolved &&

web/components/button.tsx

@@ -13,7 +13,6 @@ export type ColorType =
   | 'gray-outline'
   | 'gradient'
   | 'gray-white'
-  | 'highlight-blue'
 
 const sizeClasses = {
   '2xs': 'px-2 py-1 text-xs',
@@ -27,7 +26,7 @@ const sizeClasses = {
 
 export function buttonClass(size: SizeType, color: ColorType | 'override') {
   return clsx(
-    'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
+    'font-md inline-flex items-center justify-center rounded-md ring-inset shadow-sm transition-colors disabled:cursor-not-allowed',
     sizeClasses[size],
     color === 'green' &&
       'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
@@ -42,13 +41,11 @@ export function buttonClass(size: SizeType, color: ColorType | 'override') {
     color === 'gray' &&
       'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
     color === 'gray-outline' &&
-      'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
+      'ring-2 ring-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 hover:text-white disabled:opacity-50',
     color === 'gradient' &&
-      'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
+      'disabled:bg-greyscale-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
     color === 'gray-white' &&
-      'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
+      'text-greyscale-6 hover:bg-greyscale-2 shadow-none disabled:opacity-50'
-    color === 'highlight-blue' &&
-      'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
   )
 }
 
@@ -85,3 +82,39 @@ export function Button(props: {
     </button>
   )
 }
+
+export function IconButton(props: {
+  className?: string
+  onClick?: MouseEventHandler<any> | undefined
+  children?: ReactNode
+  size?: SizeType
+  type?: 'button' | 'reset' | 'submit'
+  disabled?: boolean
+  loading?: boolean
+}) {
+  const {
+    children,
+    className,
+    onClick,
+    size = 'md',
+    type = 'button',
+    disabled = false,
+    loading,
+  } = props
+
+  return (
+    <button
+      type={type}
+      className={clsx(
+        'inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed',
+        sizeClasses[size],
+        'disabled:text-greyscale-2 text-greyscale-5 hover:text-greyscale-6',
+        className
+      )}
+      disabled={disabled || loading}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}

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

@@ -171,7 +171,7 @@ function CreateChallengeForm(props: {
               <div>You'll bet:</div>
               <Row
                 className={
-                  'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
+                  'w-full max-w-xs items-center justify-between gap-4 pr-3'
                 }
               >
                 <AmountInput

web/components/comment-input.tsx

@@ -8,10 +8,12 @@ import { useEffect, useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
 import Curve from 'web/public/custom-components/curve'
+import { getAnswerColor } from './answers/answers-panel'
 import { Avatar } from './avatar'
 import { TextEditor, useTextEditor } from './editor'
 import { CommentsAnswer } from './feed/feed-answer-comment-group'
 import { ContractCommentInput } from './feed/feed-comments'
+import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
 
@@ -81,20 +83,30 @@ export function AnswerCommentInput(props: {
   contract: Contract<AnyContractType>
   answerResponse: Answer
   onCancelAnswerResponse?: () => void
+  answersArray: string[]
 }) {
-  const { contract, answerResponse, onCancelAnswerResponse } = props
+  const { contract, answerResponse, onCancelAnswerResponse, answersArray } =
+    props
   const replyTo = {
     id: answerResponse.id,
     username: answerResponse.username,
   }
-
+  const color = getAnswerColor(answerResponse, answersArray)
   return (
     <>
-      <CommentsAnswer answer={answerResponse} contract={contract} />
+      <Col>
-      <Row>
+        <Row className="relative">
-        <div className="ml-1">
+          <div className="absolute -bottom-1 left-1.5">
-          <Curve size={28} strokeWidth={1} color="#D8D8EB" />
+            <Curve size={32} strokeWidth={1} color="#D8D8EB" />
           </div>
+          <div className="ml-[38px]">
+            <CommentsAnswer
+              answer={answerResponse}
+              contract={contract}
+              color={color}
+            />
+          </div>
+        </Row>
         <div className="relative w-full pt-1">
           <ContractCommentInput
             contract={contract}
@@ -107,7 +119,7 @@ export function AnswerCommentInput(props: {
             <XCircleIcon className="text-greyscale-5 hover:text-greyscale-6 absolute -top-1 -right-2 h-5 w-5" />
           </button>
         </div>
-      </Row>
+      </Col>
     </>
   )
 }

web/components/contract-search.tsx

@@ -42,6 +42,7 @@ import { Button } from './button'
 import { Modal } from './layout/modal'
 import { Title } from './title'
 import { Input } from './input'
+import { Select } from './select'
 
 export const SORTS = [
   { label: 'Newest', value: 'newest' },
@@ -437,7 +438,7 @@ function ContractSearchControls(props: {
   }
 
   return (
-    <Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
+    <Col className={clsx('bg-greyscale-1 top-0 z-20 gap-3 pb-3', className)}>
       <Row className="gap-1 sm:gap-2">
         <Input
           type="text"
@@ -543,8 +544,7 @@ export function SearchFilters(props: {
 
   return (
     <div className={className}>
-      <select
+      <Select
-        className="select select-bordered"
         value={filter}
         onChange={(e) => selectFilter(e.target.value as filter)}
       >
@@ -552,10 +552,9 @@ export function SearchFilters(props: {
         <option value="closed">Closed</option>
         <option value="resolved">Resolved</option>
         <option value="all">All</option>
-      </select>
+      </Select>
       {!hideOrderSelector && (
-        <select
+        <Select
-          className="select select-bordered"
           value={sort}
           onChange={(e) => selectSort(e.target.value as Sort)}
         >
@@ -564,7 +563,7 @@ export function SearchFilters(props: {
               {option.label}
             </option>
           ))}
-        </select>
+        </Select>
       )}
     </div>
   )

web/components/contract/comment-bounty-dialog.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react'
 import { addCommentBounty } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
 import { Row } from 'web/components/layout/row'
-import clsx from 'clsx'
 import { formatMoney } from 'common/util/format'
 import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
 import { Button } from 'web/components/button'
@@ -64,7 +63,7 @@ export function CommentBountyDialog(props: {
 
         <Row className={'items-center gap-2'}>
           <Button
-            className={clsx('ml-2', isLoading && 'btn-disabled')}
+            className="ml-2"
             onClick={submit}
             disabled={isLoading}
             color={'blue'}

web/components/contract/contract-card.tsx

@@ -1,7 +1,11 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 import { Row } from '../layout/row'
-import { formatLargeNumber, formatPercent } from 'common/util/format'
+import {
+  formatLargeNumber,
+  formatPercent,
+  formatWithCommas,
+} from 'common/util/format'
 import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import {
@@ -35,10 +39,10 @@ import { trackCallback } from 'web/lib/service/analytics'
 import { getMappedValue } from 'common/pseudo-numeric'
 import { Tooltip } from '../tooltip'
 import { SiteLink } from '../site-link'
-import { ProbChange } from './prob-change-table'
+import { ProbOrNumericChange } from './prob-change-table'
 import { Card } from '../card'
-import { ProfitBadgeMana } from '../profit-badge'
 import { floatingEqual } from 'common/util/math'
+import { ENV_CONFIG } from 'common/envs/constants'
 
 export function ContractCard(props: {
   contract: Contract
@@ -396,14 +400,25 @@ export function ContractCardProbChange(props: {
   className?: string
 }) {
   const { noLinkAvatar, showPosition, className } = props
+  const yesOutcomeLabel =
+    props.contract.outcomeType === 'PSEUDO_NUMERIC' ? 'HIGHER' : 'YES'
+  const noOutcomeLabel =
+    props.contract.outcomeType === 'PSEUDO_NUMERIC' ? 'LOWER' : 'NO'
+
   const contract = useContractWithPreload(props.contract) as CPMMBinaryContract
 
   const user = useUser()
   const metrics = useUserContractMetrics(user?.id, contract.id)
   const dayMetrics = metrics && metrics.from && metrics.from.day
-  const outcome =
+  const binaryOutcome =
     metrics && floatingEqual(metrics.totalShares.NO ?? 0, 0) ? 'YES' : 'NO'
 
+  const displayedProfit = dayMetrics
+    ? ENV_CONFIG.moneyMoniker +
+      (dayMetrics.profit > 0 ? '+' : '') +
+      dayMetrics.profit.toFixed(0)
+    : undefined
+
   return (
     <Card className={clsx(className, 'mb-4')}>
       <AvatarDetails
@@ -418,7 +433,7 @@ export function ContractCardProbChange(props: {
         >
           <span className="line-clamp-3">{contract.question}</span>
         </SiteLink>
-        <ProbChange className="py-2 pr-4" contract={contract} />
+        <ProbOrNumericChange className="py-2 pr-4" contract={contract} />
       </Row>
       {showPosition && metrics && metrics.hasShares && (
         <Row
@@ -426,19 +441,11 @@ export function ContractCardProbChange(props: {
             'items-center justify-between gap-4 pl-6 pr-4 pb-2 text-sm'
           )}
         >
-          <Row className="gap-1 text-gray-700">
+          <Row className="gap-1 text-gray-400">
-            <div className="text-gray-500">Position</div>
+            You: {formatWithCommas(metrics.totalShares[binaryOutcome])}{' '}
-            {Math.floor(metrics.totalShares[outcome])} {outcome}
+            {binaryOutcome === 'YES' ? yesOutcomeLabel : noOutcomeLabel} shares
+            <span className="ml-1.5">{displayedProfit} today</span>
           </Row>
-
-          {dayMetrics && (
-            <>
-              <Row className="items-center">
-                <div className="mr-1 text-gray-500">Daily profit</div>
-                <ProfitBadgeMana amount={dayMetrics.profit} gray />
-              </Row>
-            </>
-          )}
         </Row>
       )}
     </Card>

web/components/contract/contract-description.tsx

@@ -45,13 +45,11 @@ function RichEditContract(props: { contract: Contract; isAdmin?: boolean }) {
   const { contract, isAdmin } = props
   const [editing, setEditing] = useState(false)
   const [editingQ, setEditingQ] = useState(false)
-  const [isSubmitting, setIsSubmitting] = useState(false)
 
   const { editor, upload } = useTextEditor({
     // key: `description ${contract.id}`,
     max: MAX_DESCRIPTION_LENGTH,
     defaultValue: contract.description,
-    disabled: isSubmitting,
   })
 
   async function saveDescription() {
@@ -66,10 +64,8 @@ function RichEditContract(props: { contract: Contract; isAdmin?: boolean }) {
       <Row className="gap-2">
         <Button
           onClick={async () => {
-            setIsSubmitting(true)
             await saveDescription()
             setEditing(false)
-            setIsSubmitting(false)
           }}
         >
           Save

web/components/contract/contract-details.tsx

@@ -3,6 +3,7 @@ import {
   ExclamationIcon,
   PencilIcon,
   PlusCircleIcon,
+  UserGroupIcon,
 } from '@heroicons/react/solid'
 import clsx from 'clsx'
 import { Editor } from '@tiptap/react'
@@ -34,6 +35,7 @@ import { ExtraContractActionsRow } from './extra-contract-actions-row'
 import { GroupLink } from 'common/group'
 import { Subtitle } from '../subtitle'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
+import { useIsClient } from 'web/hooks/use-is-client'
 import {
   BountiedContractBadge,
   BountiedContractSmallBadge,
@@ -49,32 +51,41 @@ export function MiscDetails(props: {
   hideGroupLink?: boolean
 }) {
   const { contract, showTime, hideGroupLink } = props
-  const { volume, closeTime, isResolved, createdTime, resolutionTime } =
+  const {
-    contract
+    closeTime,
+    isResolved,
+    createdTime,
+    resolutionTime,
+    uniqueBettorCount,
+  } = contract
 
+  const isClient = useIsClient()
   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">
-      {showTime === 'close-date' ? (
+      {isClient && showTime === 'close-date' ? (
         <Row className="gap-0.5 whitespace-nowrap">
           <ClockIcon className="h-5 w-5" />
           {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
           {fromNow(closeTime || 0)}
         </Row>
-      ) : showTime === 'resolve-date' && resolutionTime !== undefined ? (
+      ) : isClient && showTime === 'resolve-date' && resolutionTime ? (
         <Row className="gap-0.5">
           <ClockIcon className="h-5 w-5" />
           {'Resolved '}
-          {fromNow(resolutionTime || 0)}
+          {fromNow(resolutionTime)}
         </Row>
       ) : (contract?.featuredOnHomeRank ?? 0) > 0 ? (
         <FeaturedContractBadge />
       ) : (contract.openCommentBounties ?? 0) > 0 ? (
         <BountiedContractBadge />
-      ) : volume > 0 || !isNew ? (
+      ) : !isNew || (uniqueBettorCount ?? 0) > 1 ? (
-        <Row className={'shrink-0'}>{formatMoney(volume)} bet</Row>
+        <Row className={'shrink-0'}>
+          <UserGroupIcon className="mr-1 h-4 w-4" />
+          {uniqueBettorCount} trader{uniqueBettorCount !== 1 ? 's' : ''}
+        </Row>
       ) : (
         <NewContractBadge />
       )}
@@ -390,6 +401,7 @@ function EditableCloseDate(props: {
 }) {
   const { closeTime, contract, isCreator, disabled } = props
 
+  const isClient = useIsClient()
   const dayJsCloseTime = dayjs(closeTime)
   const dayJsNow = dayjs()
 
@@ -452,7 +464,7 @@ function EditableCloseDate(props: {
               className="w-full shrink-0 sm:w-fit"
               onClick={(e) => e.stopPropagation()}
               onChange={(e) => setCloseDate(e.target.value)}
-              min={Date.now()}
+              min={isClient ? Date.now() : undefined}
               value={closeDate}
             />
             <Input
@@ -479,14 +491,18 @@ function EditableCloseDate(props: {
         </Col>
       </Modal>
       <DateTimeTooltip
-        text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
+        text={
+          isClient && closeTime <= Date.now()
+            ? 'Trading ended:'
+            : 'Trading ends:'
+        }
         time={closeTime}
       >
         <Row
           className={clsx(!disabled && isCreator ? 'cursor-pointer' : '')}
           onClick={() => !disabled && isCreator && setIsEditingCloseTime(true)}
         >
-          {isSameDay ? (
+          {isSameDay && isClient ? (
             <span className={'capitalize'}> {fromNow(closeTime)}</span>
           ) : isSameYear ? (
             dayJsCloseTime.format('MMM D')

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

@@ -19,11 +19,10 @@ import ShortToggle from '../widgets/short-toggle'
 import { DuplicateContractButton } from '../duplicate-contract-button'
 import { Row } from '../layout/row'
 import { BETTORS, User } from 'common/user'
-import { Button } from '../button'
+import { IconButton } from '../button'
 import { AddLiquidityButton } from './add-liquidity-button'
-
+import { Tooltip } from '../tooltip'
-export const contractDetailsButtonClassName =
+import { Table } from '../table'
-  '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
@@ -84,23 +83,23 @@ export function ContractInfoDialog(props: {
 
   return (
     <>
-      <Button
+      <Tooltip text="Market details" placement="bottom" noTap noFade>
-        size="sm"
+        <IconButton
-        color="gray-white"
+          size="2xs"
-        className={clsx(contractDetailsButtonClassName, className)}
+          className={clsx(className)}
           onClick={() => setOpen(true)}
         >
           <DotsHorizontalIcon
             className={clsx('h-5 w-5 flex-shrink-0')}
             aria-hidden="true"
           />
-      </Button>
+        </IconButton>
 
         <Modal open={open} setOpen={setOpen}>
           <Col className="gap-4 rounded bg-white p-6">
             <Title className="!mt-0 !mb-0" text="This Market" />
 
-          <table className="table-compact table-zebra table w-full text-gray-500">
+            <Table>
               <tbody>
                 <tr>
                   <td>Type</td>
@@ -186,7 +185,8 @@ export function ContractInfoDialog(props: {
                   <td>
                     {mechanism === 'cpmm-1' && outcomeType === 'BINARY'
                       ? `${Math.round(pool.YES)} YES, ${Math.round(pool.NO)} NO`
-                    : mechanism === 'cpmm-1' && outcomeType === 'PSEUDO_NUMERIC'
+                      : mechanism === 'cpmm-1' &&
+                        outcomeType === 'PSEUDO_NUMERIC'
                       ? `${Math.round(pool.YES)} HIGHER, ${Math.round(
                           pool.NO
                         )} LOWER`
@@ -239,7 +239,7 @@ export function ContractInfoDialog(props: {
                   </tr>
                 )}
               </tbody>
-          </table>
+            </Table>
 
             <Row className="flex-wrap">
               {mechanism === 'cpmm-1' && (
@@ -249,6 +249,7 @@ export function ContractInfoDialog(props: {
             </Row>
           </Col>
         </Modal>
+      </Tooltip>
     </>
   )
 }

web/components/contract/contract-mention.tsx

@@ -6,17 +6,19 @@ import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import { fromNow } from 'web/lib/util/time'
 import { BinaryContractOutcomeLabel } from '../outcome-label'
 import { getColor } from './quick-bet'
+import { useIsClient } from 'web/hooks/use-is-client'
 
 export function ContractMention(props: { contract: Contract }) {
   const { contract } = props
   const { outcomeType, resolution } = contract
   const probTextColor = `text-${getColor(contract)}`
+  const isClient = useIsClient()
 
   return (
     <Link href={contractPath(contract)}>
       <a
         className="group inline whitespace-nowrap rounded-sm hover:bg-indigo-50 focus:bg-indigo-50"
-        title={tooltipLabel(contract)}
+        title={isClient ? tooltipLabel(contract) : undefined}
       >
         <span className="break-anywhere mr-0.5 whitespace-normal font-normal text-indigo-700">
           {contract.question}

web/components/contract/contract-report-resolution.tsx

@@ -32,7 +32,7 @@ export function ContractReportResolution(props: { contract: Contract }) {
   }
 
   const flagClass = clsx(
-    'mx-2 flex flex-col items-center gap-1  w-6 h-6  rounded-md !bg-gray-100 px-2 py-1 hover:bg-gray-300',
+    'mx-2 flex flex-col items-center gap-1  w-6 h-6  rounded-md !bg-gray-100 px-1 py-2 hover:bg-gray-300',
     userReported ? '!text-red-500' : '!text-gray-500'
   )
 

web/components/contract/contract-tabs.tsx

@@ -2,11 +2,11 @@ import { memo, useState } from 'react'
 import { Pagination } from 'web/components/pagination'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedLiquidity } from '../feed/feed-liquidity'
-import { CommentsAnswer } from '../feed/feed-answer-comment-group'
+import { FreeResponseComments } from '../feed/feed-answer-comment-group'
 import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
 import { groupBy, sortBy, sum } from 'lodash'
 import { Bet } from 'common/bet'
-import { Contract } from 'common/contract'
+import { AnyContractType, Contract } from 'common/contract'
 import { PAST_BETS } from 'common/user'
 import { ContractBetsTable } from '../bets-list'
 import { Spacer } from '../layout/spacer'
@@ -35,9 +35,7 @@ import {
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
 import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
-import Curve from 'web/public/custom-components/curve'
 import { Answer } from 'common/answer'
-import { AnswerCommentInput } from '../comment-input'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -139,95 +137,27 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
   )
   const topLevelComments = commentsByParent['_'] ?? []
 
-  const sortRow = comments.length > 0 && (
-    <Row className="mb-4 items-center justify-end gap-4">
-      <BountiedContractSmallBadge contract={contract} showAmount />
-      <Row className="items-center gap-1">
-        <div className="text-greyscale-4 text-sm">Sort by:</div>
-        <button
-          className="text-greyscale-6 w-20 text-sm"
-          onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
-        >
-          <Tooltip
-            text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
-          >
-            <Row className="items-center gap-1">
-              {sort}
-              <TriangleDownFillIcon className=" h-2 w-2" />
-            </Row>
-          </Tooltip>
-        </button>
-      </Row>
-    </Row>
-  )
-  if (contract.outcomeType === 'FREE_RESPONSE') {
   return (
     <>
       <ContractCommentInput className="mb-5" contract={contract} />
-        {sortRow}
+      <SortRow
-        {answerResponse && (
+        comments={comments}
-          <AnswerCommentInput
+        contract={contract}
+        sort={sort}
+        onSortClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
+      />
+      {contract.outcomeType === 'FREE_RESPONSE' && (
+        <FreeResponseComments
           contract={contract}
           answerResponse={answerResponse}
           onCancelAnswerResponse={onCancelAnswerResponse}
-          />
+          topLevelComments={topLevelComments}
-        )}
+          commentsByParent={commentsByParent}
-        {topLevelComments.map((parent) => {
-          if (parent.answerOutcome === undefined) {
-            return (
-              <FeedCommentThread
-                key={parent.id}
-                contract={contract}
-                parentComment={parent}
-                threadComments={sortBy(
-                  commentsByParent[parent.id] ?? [],
-                  (c) => c.createdTime
-                )}
           tips={tips}
         />
-            )
-          }
-          const answer = contract.answers.find(
-            (answer) => answer.id === parent.answerOutcome
-          )
-          if (answer === undefined) {
-            console.error('Could not find answer that matches ID')
-            return <></>
-          }
-          return (
-            <>
-              <Row className="gap-2">
-                <CommentsAnswer answer={answer} contract={contract} />
-              </Row>
-              <Row>
-                <div className="ml-1">
-                  <Curve size={28} strokeWidth={1} color="#D8D8EB" />
-                </div>
-                <div className="w-full pt-1">
-                  <FeedCommentThread
-                    key={parent.id}
-                    contract={contract}
-                    parentComment={parent}
-                    threadComments={sortBy(
-                      commentsByParent[parent.id] ?? [],
-                      (c) => c.createdTime
       )}
-                    tips={tips}
+      {contract.outcomeType !== 'FREE_RESPONSE' &&
-                  />
+        topLevelComments.map((parent) => (
-                </div>
-              </Row>
-            </>
-          )
-        })}
-      </>
-    )
-  } else {
-    return (
-      <>
-        <ContractCommentInput className="mb-5" contract={contract} />
-        {sortRow}
-
-        {topLevelComments.map((parent) => (
           <FeedCommentThread
             key={parent.id}
             contract={contract}
@@ -241,7 +171,6 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
         ))}
     </>
   )
-  }
 })
 
 const BetsTabContent = memo(function BetsTabContent(props: {
@@ -310,3 +239,33 @@ const BetsTabContent = memo(function BetsTabContent(props: {
     </>
   )
 })
+
+export function SortRow(props: {
+  comments: ContractComment[]
+  contract: Contract<AnyContractType>
+  sort: 'Best' | 'Newest'
+  onSortClick: () => void
+}) {
+  const { comments, contract, sort, onSortClick } = props
+  if (comments.length <= 0) {
+    return <></>
+  }
+  return (
+    <Row className="mb-4 items-center justify-end gap-4">
+      <BountiedContractSmallBadge contract={contract} showAmount />
+      <Row className="items-center gap-1">
+        <div className="text-greyscale-4 text-sm">Sort by:</div>
+        <button className="text-greyscale-6 w-20 text-sm" onClick={onSortClick}>
+          <Tooltip
+            text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
+          >
+            <Row className="items-center gap-1">
+              {sort}
+              <TriangleDownFillIcon className=" h-2 w-2" />
+            </Row>
+          </Tooltip>
+        </button>
+      </Row>
+    </Row>
+  )
+}

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

@@ -2,11 +2,11 @@ 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 { IconButton } 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 { LikeItemButton } from 'web/components/contract/like-item-button'
 import { ContractInfoDialog } from 'web/components/contract/contract-info-dialog'
 import { Tooltip } from '../tooltip'
 
@@ -16,15 +16,14 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
   const [isShareOpen, setShareOpen] = useState(false)
 
   return (
-    <Row>
+    <Row className="gap-1">
       <FollowMarketButton contract={contract} user={user} />
 
-      <LikeMarketButton contract={contract} user={user} />
+      <LikeItemButton item={contract} user={user} itemType={'contract'} />
 
       <Tooltip text="Share" placement="bottom" noTap noFade>
-        <Button
+        <IconButton
-          size="sm"
+          size="2xs"
-          color="gray-white"
           className={'flex'}
           onClick={() => setShareOpen(true)}
         >
@@ -35,7 +34,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
             contract={contract}
             user={user}
           />
-        </Button>
+        </IconButton>
       </Tooltip>
 
       <ContractInfoDialog contract={contract} user={user} />

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

@@ -0,0 +1,71 @@
+import React, { useMemo, useState } from 'react'
+import { User } from 'common/user'
+import { useUserLikes } from 'web/hooks/use-likes'
+import toast from 'react-hot-toast'
+import { likeItem } from 'web/lib/firebase/likes'
+import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
+import { firebaseLogin } from 'web/lib/firebase/users'
+import { useItemTipTxns } from 'web/hooks/use-tip-txns'
+import { sum } from 'lodash'
+import { TipButton } from './tip-button'
+import { Contract } from 'common/contract'
+import { Post } from 'common/post'
+import { TipToast } from '../tipper'
+
+export function LikeItemButton(props: {
+  item: Contract | Post
+  user: User | null | undefined
+  itemType: string
+}) {
+  const { item, user, itemType } = props
+
+  const tips = useItemTipTxns(item.id)
+
+  const totalTipped = useMemo(() => {
+    return sum(tips.map((tip) => tip.amount))
+  }, [tips])
+
+  const likes = useUserLikes(user?.id)
+
+  const [isLiking, setIsLiking] = useState(false)
+
+  const userLikedItemIds = likes
+    ?.filter((l) => l.type === 'contract' || l.type === 'post')
+    .map((l) => l.id)
+
+  const onLike = async () => {
+    if (!user) return firebaseLogin()
+
+    setIsLiking(true)
+
+    const timeoutId = setTimeout(() => {
+      likeItem(user, item, itemType).catch(() => setIsLiking(false))
+    }, 3000)
+    toast.custom(
+      () => (
+        <TipToast
+          userName={item.creatorUsername}
+          onUndoClick={() => {
+            clearTimeout(timeoutId)
+          }}
+        />
+      ),
+      { duration: TIP_UNDO_DURATION }
+    )
+  }
+
+  return (
+    <TipButton
+      onClick={onLike}
+      tipAmount={LIKE_TIP_AMOUNT}
+      totalTipped={totalTipped}
+      userTipped={
+        !!user &&
+        (isLiking ||
+          userLikedItemIds?.includes(item.id) ||
+          (!likes && !!item.likedByUserIds?.includes(user.id)))
+      }
+      disabled={item.creatorId === user?.id}
+    />
+  )
+}

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

@@ -1,56 +0,0 @@
-import React, { useMemo, useState } 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 { firebaseLogin } from 'web/lib/firebase/users'
-import { useMarketTipTxns } from 'web/hooks/use-tip-txns'
-import { sum } from 'lodash'
-import { TipButton } from './tip-button'
-
-export function LikeMarketButton(props: {
-  contract: Contract
-  user: User | null | undefined
-}) {
-  const { contract, user } = props
-
-  const tips = useMarketTipTxns(contract.id)
-
-  const totalTipped = useMemo(() => {
-    return sum(tips.map((tip) => tip.amount))
-  }, [tips])
-
-  const likes = useUserLikes(user?.id)
-
-  const [isLiking, setIsLiking] = useState(false)
-
-  const userLikedContractIds = likes
-    ?.filter((l) => l.type === 'contract')
-    .map((l) => l.id)
-
-  const onLike = async () => {
-    if (!user) return firebaseLogin()
-
-    setIsLiking(true)
-    likeContract(user, contract).catch(() => setIsLiking(false))
-    toast(`You tipped ${contract.creatorName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
-  }
-
-  return (
-    <TipButton
-      onClick={onLike}
-      tipAmount={LIKE_TIP_AMOUNT}
-      totalTipped={totalTipped}
-      userTipped={
-        !!user &&
-        (isLiking ||
-          userLikedContractIds?.includes(contract.id) ||
-          (!likes && !!contract.likedByUserIds?.includes(user.id)))
-      }
-      disabled={contract.creatorId === user?.id}
-    />
-  )
-}

web/components/contract/prob-change-table.tsx

@@ -7,12 +7,14 @@ import { formatPercent } from 'common/util/format'
 import { Col } from '../layout/col'
 import { LoadingIndicator } from '../loading-indicator'
 import { ContractCardProbChange } from './contract-card'
+import { formatNumericProbability } from 'common/pseudo-numeric'
 
 export function ProfitChangeTable(props: {
   contracts: CPMMBinaryContract[]
   metrics: ContractMetrics[]
+  maxRows?: number
 }) {
-  const { contracts, metrics } = props
+  const { contracts, metrics, maxRows } = props
 
   const contractProfit = metrics.map(
     (m) => [m.contractId, m.from?.day.profit ?? 0] as const
@@ -26,7 +28,7 @@ export function ProfitChangeTable(props: {
     positiveProfit.map(([contractId]) =>
       contracts.find((c) => c.id === contractId)
     )
-  )
+  ).slice(0, maxRows)
 
   const negativeProfit = sortBy(
     contractProfit.filter(([, profit]) => profit < 0),
@@ -36,7 +38,7 @@ export function ProfitChangeTable(props: {
     negativeProfit.map(([contractId]) =>
       contracts.find((c) => c.id === contractId)
     )
-  )
+  ).slice(0, maxRows)
 
   if (positive.length === 0 && negative.length === 0)
     return <div className="px-4 text-gray-500">None</div>
@@ -118,7 +120,7 @@ export function ProbChangeTable(props: {
   )
 }
 
-export function ProbChange(props: {
+export function ProbOrNumericChange(props: {
   contract: CPMMContract
   className?: string
 }) {
@@ -127,13 +129,17 @@ export function ProbChange(props: {
     prob,
     probChanges: { day: change },
   } = contract
+  const number =
+    contract.outcomeType === 'PSEUDO_NUMERIC'
+      ? formatNumericProbability(prob, contract)
+      : null
 
   const color = change >= 0 ? 'text-teal-500' : 'text-red-400'
 
   return (
     <Col className={clsx('flex flex-col items-end', className)}>
       <div className="mb-0.5 mr-0.5 text-2xl">
-        {formatPercent(Math.round(100 * prob) / 100)}
+        {number ? number : formatPercent(Math.round(100 * prob) / 100)}
       </div>
       <div className={clsx('text-base', color)}>
         {(change > 0 ? '+' : '') + (change * 100).toFixed(0) + '%'}

web/components/contract/tip-button.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx'
-import { HeartIcon } from '@heroicons/react/outline'
-
-import { Button } from 'web/components/button'
 import { formatMoney, shortFormatNumber } from 'common/util/format'
 import { Col } from 'web/components/layout/col'
 import { Tooltip } from '../tooltip'
+import TipJar from 'web/public/custom-components/tipJar'
+import { useState } from 'react'
+import Coin from 'web/public/custom-components/coin'
 
 export function TipButton(props: {
   tipAmount: number
@@ -14,55 +14,84 @@ export function TipButton(props: {
   isCompact?: boolean
   disabled?: boolean
 }) {
-  const { tipAmount, totalTipped, userTipped, isCompact, onClick, disabled } =
+  const { tipAmount, totalTipped, userTipped, onClick, disabled } = props
-    props
 
   const tipDisplay = shortFormatNumber(Math.ceil(totalTipped / 10))
 
+  const [hover, setHover] = useState(false)
+
   return (
     <Tooltip
       text={
         disabled
-          ? `Tips (${formatMoney(totalTipped)})`
+          ? `Total tips ${formatMoney(totalTipped)}`
           : `Tip ${formatMoney(tipAmount)}`
       }
       placement="bottom"
       noTap
       noFade
     >
-      <Button
+      <button
-        size={'sm'}
-        className={clsx(
-          'max-w-xs self-center',
-          isCompact && 'px-0 py-0',
-          disabled && 'hover:bg-inherit'
-        )}
-        color={'gray-white'}
         onClick={onClick}
         disabled={disabled}
-      >
-        <Col className={'relative items-center sm:flex-row'}>
-          <HeartIcon
         className={clsx(
-              'h-5 w-5',
+          'px-2 py-1 text-xs', //2xs button
-              totalTipped > 0 ? 'mr-2' : '',
+          'text-greyscale-5 transition-transform disabled:cursor-not-allowed',
-              userTipped ? 'fill-teal-500 text-teal-500' : ''
+          !disabled ? 'hover:text-greyscale-6' : ''
         )}
-          />
+        onMouseOver={() => {
-          {totalTipped > 0 && (
+          if (!disabled) {
+            setHover(true)
+          }
+        }}
+        onMouseLeave={() => setHover(false)}
+      >
+        <Col className={clsx('relative')}>
           <div
             className={clsx(
-                'bg-greyscale-5 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
+              'absolute transition-all',
-                tipDisplay.length > 2
+              hover ? 'left-[6px] -top-[9px]' : 'left-[8px] -top-[10px]'
-                  ? 'text-[0.4rem] sm:text-[0.5rem]'
-                  : 'sm:text-2xs text-[0.5rem]'
             )}
           >
-              {tipDisplay}
+            <Coin
+              size={10}
+              color={
+                hover && !userTipped
+                  ? '#66667C'
+                  : userTipped
+                  ? '#4f46e5'
+                  : '#9191a7'
+              }
+              strokeWidth={2}
+            />
           </div>
+          <TipJar
+            size={18}
+            color={
+              hover && !disabled && !userTipped
+                ? '#66667C'
+                : userTipped
+                ? '#4f46e5'
+                : '#9191a7'
+            }
+          />
+          <div
+            className={clsx(
+              userTipped && 'text-indigo-600',
+              ' absolute top-[2px] text-[0.5rem]',
+              tipDisplay.length === 1
+                ? 'left-[7px]'
+                : tipDisplay.length === 2
+                ? 'left-[4.5px]'
+                : tipDisplay.length > 2
+                ? 'left-[4px] top-[2.5px] text-[0.35rem]'
+                : ''
             )}
+          >
+            {totalTipped > 0 ? tipDisplay : ''}
+          </div>
         </Col>
-      </Button>
+      </button>
     </Tooltip>
   )
 }

web/components/create-post.tsx

@@ -22,7 +22,6 @@ export function CreatePost(props: { group?: Group }) {
 
   const { editor, upload } = useTextEditor({
     key: `post ${group?.id || ''}`,
-    disabled: isSubmitting,
   })
 
   const isValid =
@@ -56,8 +55,8 @@ export function CreatePost(props: { group?: Group }) {
       <div className="rounded-lg px-6 py-4 sm:py-0">
         <Title className="!mt-0" text="Create a post" />
         <form>
-          <div className="form-control w-full">
+          <div className="flex w-full flex-col">
-            <label className="label">
+            <label className="px-1 py-2">
               <span className="mb-1">
                 Title<span className={'text-red-700'}> *</span>
               </span>
@@ -70,7 +69,7 @@ export function CreatePost(props: { group?: Group }) {
               onChange={(e) => setTitle(e.target.value || '')}
             />
             <Spacer h={6} />
-            <label className="label">
+            <label className="px-1 py-2">
               <span className="mb-1">
                 Subtitle<span className={'text-red-700'}> *</span>
               </span>
@@ -83,7 +82,7 @@ export function CreatePost(props: { group?: Group }) {
               onChange={(e) => setSubtitle(e.target.value || '')}
             />
             <Spacer h={6} />
-            <label className="label">
+            <label className="px-1 py-2">
               <span className="mb-1">
                 Content<span className={'text-red-700'}> *</span>
               </span>
@@ -93,9 +92,10 @@ export function CreatePost(props: { group?: Group }) {
 
             <Button
               type="submit"
-              loading={isSubmitting}
+              color="green"
               size="xl"
-              disabled={isSubmitting || !isValid || upload.isLoading}
+              loading={isSubmitting}
+              disabled={!isValid || upload.isLoading}
               onClick={async () => {
                 setIsSubmitting(true)
                 await savePost(title)

web/components/editor.tsx

@@ -22,6 +22,7 @@ import { linkClass } from './site-link'
 import { DisplayMention } from './editor/mention'
 import { DisplayContractMention } from './editor/contract-mention'
 import GridComponent from './editor/tiptap-grid-cards'
+import StaticReactEmbedComponent from './editor/tiptap-static-react-embed'
 
 import Iframe from 'common/util/tiptap-iframe'
 import TiptapTweet from './editor/tiptap-tweet'
@@ -52,7 +53,7 @@ import { debounce } from 'lodash'
 
 const DisplayImage = Image.configure({
   HTMLAttributes: {
-    class: 'max-h-60',
+    class: 'max-h-60 hover:max-h-[120rem] transition-all',
   },
 })
 
@@ -81,6 +82,7 @@ export const editorExtensions = (simple = false): Extensions => [
   DisplayMention,
   DisplayContractMention,
   GridComponent,
+  StaticReactEmbedComponent,
   Iframe,
   TiptapTweet,
   TiptapSpoiler.configure({
@@ -90,18 +92,17 @@ export const editorExtensions = (simple = false): Extensions => [
 
 const proseClass = clsx(
   'prose prose-p:my-0 prose-ul:my-0 prose-ol:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed',
-  'font-light prose-a:font-light prose-blockquote:font-light'
+  'font-light prose-a:font-light prose-blockquote:font-light prose-sm'
 )
 
 export function useTextEditor(props: {
   placeholder?: string
   max?: number
   defaultValue?: Content
-  disabled?: boolean
   simple?: boolean
   key?: string // unique key for autosave. If set, plz call `clearContent(true)` on submit to clear autosave
 }) {
-  const { placeholder, max, defaultValue, disabled, simple, key } = props
+  const { placeholder, max, defaultValue, simple, key } = props
 
   const [content, saveContent] = usePersistentState<JSONContent | undefined>(
     undefined,
@@ -169,10 +170,6 @@ export function useTextEditor(props: {
     },
   })
 
-  useEffect(() => {
-    editor?.setEditable(!disabled)
-  }, [editor, disabled])
-
   return { editor, upload }
 }
 
@@ -263,7 +260,8 @@ export function TextEditor(props: {
     <>
       {/* hide placeholder when focused */}
       <div className="relative w-full [&:focus-within_p.is-empty]:before:content-none">
-        <div className="rounded-lg border border-gray-300 bg-white shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
+        {/* matches input styling */}
+        <div className="rounded-lg border border-gray-300 bg-white shadow-sm transition-colors focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
           <FloatingMenu editor={editor} />
           <EditorContent editor={editor} />
           {/* Toolbar, with buttons for images and embeds */}
@@ -367,6 +365,7 @@ export function RichContent(props: {
       DisplayMention,
       DisplayContractMention,
       GridComponent,
+      StaticReactEmbedComponent,
       Iframe,
       TiptapTweet,
       TiptapSpoiler.configure({

web/components/editor/contract-mention-suggestion.ts

@@ -14,6 +14,7 @@ const beginsWith = (text: string, query: string) =>
 export const contractMentionSuggestion: Suggestion = {
   char: '%',
   allowSpaces: true,
+  allowedPrefixes: [' '],
   pluginKey: new PluginKey('contract-mention'),
   items: async ({ query }) =>
     orderBy(

web/components/editor/image-modal.tsx

@@ -120,7 +120,10 @@ function DreamTab(props: {
         <div className="text-sm">This may take ~10 seconds...</div>
       )}
       {/* TODO: Allow the user to choose their own modifiers */}
-      <div className="pt-2 text-sm text-gray-400">Modifiers: {MODIFIERS}</div>
+      <div className="pt-2 text-sm text-gray-400">
+        Commission a custom image using AI.
+      </div>
+      <div className="pt-2 text-xs text-gray-400">Modifiers: {MODIFIERS}</div>
 
       {/* Show the current imageUrl */}
       {/* TODO: Keep the other generated images, so the user can play with different attempts. */}

web/components/editor/mention-suggestion.ts

@@ -14,6 +14,7 @@ const beginsWith = (text: string, query: string) =>
 
 // copied from https://tiptap.dev/api/nodes/mention#usage
 export const mentionSuggestion: Suggestion = {
+  allowedPrefixes: [' '],
   items: async ({ query }) =>
     orderBy(
       (await getCachedUsers()).filter((u) =>

web/components/editor/tiptap-static-react-embed.tsx

@@ -0,0 +1,44 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import React from 'react'
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+import { StaticReactEmbed } from '../static-react-embed'
+
+export default Node.create({
+  name: 'staticReactEmbedComponent',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      embedName: '',
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'static-react-embed-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['static-react-embed-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(StaticReactEmbedComponent)
+  },
+})
+
+export function StaticReactEmbedComponent(props: any) {
+  const embedName = props.node.attrs.embedName
+
+  return (
+    <NodeViewWrapper className="static-react-embed-component">
+      <StaticReactEmbed embedName={embedName} />
+    </NodeViewWrapper>
+  )
+}

web/components/expanding-input.tsx

@@ -7,7 +7,7 @@ export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
   return (
     <Textarea
       className={clsx(
-        'textarea textarea-bordered resize-none text-[16px] md:text-[14px]',
+        'resize-none rounded-md border border-gray-300 bg-white px-4 text-[16px] leading-loose shadow-sm transition-colors focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-[14px]',
         className
       )}
       {...rest}

web/components/feed/copy-link-date-time.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { fromNow } from 'web/lib/util/time'
 import { ToastClipboard } from 'web/components/toast-clipboard'
 import { LinkIcon } from '@heroicons/react/outline'
+import { useIsClient } from 'web/hooks/use-is-client'
 
 export function CopyLinkDateTimeComponent(props: {
   prefix: string
@@ -14,6 +15,7 @@ export function CopyLinkDateTimeComponent(props: {
   className?: string
 }) {
   const { prefix, slug, elementId, createdTime, className } = props
+  const isClient = useIsClient()
   const [showToast, setShowToast] = useState(false)
 
   function copyLinkToComment(
@@ -36,7 +38,7 @@ export function CopyLinkDateTimeComponent(props: {
             'text-greyscale-4 hover:bg-greyscale-1.5 mx-1 whitespace-nowrap rounded-sm px-1 text-xs transition-colors'
           }
         >
-          {fromNow(createdTime)}
+          {isClient && fromNow(createdTime)}
           {showToast && <ToastClipboard />}
           <LinkIcon className="ml-1 mb-0.5 inline" height={13} />
         </a>

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

@@ -1,32 +1,60 @@
 import { Answer } from 'common/answer'
-import { Contract } from 'common/contract'
+import {
-import React, { useEffect, useRef } from 'react'
+  Contract,
+  FreeResponseContract,
+  MultipleChoiceContract,
+} from 'common/contract'
+import React, { useEffect, useRef, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
-import { Avatar } from 'web/components/avatar'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { useRouter } from 'next/router'
 import { UserLink } from 'web/components/user-link'
+import { FeedCommentThread } from './feed-comments'
+import { AnswerCommentInput } from '../comment-input'
+import { ContractComment } from 'common/comment'
+import { Dictionary, sortBy } from 'lodash'
+import { getAnswerColor } from '../answers/answers-panel'
+import Curve from 'web/public/custom-components/curve'
+import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { useChartAnswers } from '../charts/contract/choice'
 
-export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
+export function CommentsAnswer(props: {
-  const { answer, contract } = props
+  answer: Answer
-  const { username, avatarUrl, name, text } = answer
+  contract: Contract
+  color: string
+}) {
+  const { answer, contract, color } = props
+  const { username, name, text } = answer
   const answerElementId = `answer-${answer.id}`
-  const router = useRouter()
+
-  const highlighted = router.asPath.endsWith(`#${answerElementId}`)
+  const { isReady, asPath } = useRouter()
+  const [highlighted, setHighlighted] = useState(false)
   const answerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (highlighted && answerRef.current != null) {
+    if (isReady && asPath.endsWith(`#${answerElementId}`)) {
+      setHighlighted(true)
+    }
+  }, [isReady, asPath, answerElementId])
+
+  useEffect(() => {
+    if (highlighted && answerRef.current) {
       answerRef.current.scrollIntoView(true)
     }
   }, [highlighted])
 
   return (
-    <Col className="bg-greyscale-2 w-fit gap-1 rounded-t-xl rounded-bl-xl py-2 px-4">
+    <Row>
+      <div
+        className="w-2"
+        style={{
+          background: color ? color : '#B1B1C7',
+        }}
+      />
+      <Col className="w-fit bg-gray-100 py-1 pl-2 pr-2">
         <Row className="gap-2">
-        <Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
+          <div className="text-greyscale-4 text-xs">
-        <div className="text-greyscale-6 text-xs">
             <UserLink username={username} name={name} /> answered
             <CopyLinkDateTimeComponent
               prefix={contract.creatorUsername}
@@ -38,5 +66,89 @@ export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
         </Row>
         <div className="text-sm">{text}</div>
       </Col>
+    </Row>
+  )
+}
+
+export function FreeResponseComments(props: {
+  contract: FreeResponseContract | MultipleChoiceContract
+  answerResponse: Answer | undefined
+  onCancelAnswerResponse?: () => void
+  topLevelComments: ContractComment[]
+  commentsByParent: Dictionary<[ContractComment, ...ContractComment[]]>
+  tips: CommentTipMap
+}) {
+  const {
+    contract,
+    answerResponse,
+    onCancelAnswerResponse,
+    topLevelComments,
+    commentsByParent,
+    tips,
+  } = props
+  const answersArray = useChartAnswers(contract).map((answer) => answer.text)
+  return (
+    <>
+      {answerResponse && (
+        <AnswerCommentInput
+          contract={contract}
+          answerResponse={answerResponse}
+          onCancelAnswerResponse={onCancelAnswerResponse}
+          answersArray={answersArray}
+        />
+      )}
+      {topLevelComments.map((parent) => {
+        if (parent.answerOutcome === undefined) {
+          return (
+            <FeedCommentThread
+              key={parent.id}
+              contract={contract}
+              parentComment={parent}
+              threadComments={sortBy(
+                commentsByParent[parent.id] ?? [],
+                (c) => c.createdTime
+              )}
+              tips={tips}
+            />
+          )
+        }
+        const answer = contract.answers.find(
+          (answer) => answer.id === parent.answerOutcome
+        )
+        if (answer === undefined) {
+          console.error('Could not find answer that matches ID')
+          return <></>
+        }
+        const color = getAnswerColor(answer, answersArray)
+        return (
+          <>
+            <Row className="relative">
+              <div className="absolute -bottom-1 left-1.5">
+                <Curve size={32} strokeWidth={1} color="#D8D8EB" />
+              </div>
+              <div className="ml-[38px]">
+                <CommentsAnswer
+                  answer={answer}
+                  contract={contract}
+                  color={color}
+                />
+              </div>
+            </Row>
+            <div className="w-full pt-1">
+              <FeedCommentThread
+                key={parent.id}
+                contract={contract}
+                parentComment={parent}
+                threadComments={sortBy(
+                  commentsByParent[parent.id] ?? [],
+                  (c) => c.createdTime
+                )}
+                tips={tips}
+              />
+            </div>
+          </>
+        )
+      })}
+    </>
   )
 }

web/components/feed/feed-comments.tsx

@@ -24,7 +24,7 @@ import { UserLink } from 'web/components/user-link'
 import { CommentInput } from '../comment-input'
 import { AwardBountyButton } from 'web/components/award-bounty-button'
 import { ReplyIcon } from '@heroicons/react/solid'
-import { Button } from '../button'
+import { IconButton } from '../button'
 import { ReplyToggle } from '../comments/reply-toggle'
 
 export type ReplyTo = { id: string; username: string }
@@ -37,7 +37,7 @@ export function FeedCommentThread(props: {
 }) {
   const { contract, threadComments, tips, parentComment } = props
   const [replyTo, setReplyTo] = useState<ReplyTo>()
-  const [seeReplies, setSeeReplies] = useState(false)
+  const [seeReplies, setSeeReplies] = useState(true)
 
   const user = useUser()
   const onSubmitComment = useEvent(() => setReplyTo(undefined))
@@ -154,33 +154,43 @@ export function ParentFeedComment(props: {
             numComments={numComments}
             onClick={onSeeReplyClick}
           />
-          <Row className="grow justify-end gap-2">
+          <CommentActions
+            onReplyClick={onReplyClick}
+            comment={comment}
+            showTip={showTip}
+            myTip={myTip}
+            totalTip={totalTip}
+            contract={contract}
+          />
+        </Row>
+      </Col>
+    </Row>
+  )
+}
+
+export function CommentActions(props: {
+  onReplyClick?: (comment: ContractComment) => void
+  comment: ContractComment
+  showTip?: boolean
+  myTip?: number
+  totalTip?: number
+  contract: Contract
+}) {
+  const { onReplyClick, comment, showTip, myTip, totalTip, contract } = props
+  return (
+    <Row className="grow justify-end">
       {onReplyClick && (
-              <Button
+        <IconButton size={'xs'} onClick={() => onReplyClick(comment)}>
-                size={'sm'}
-                className={clsx(
-                  'hover:bg-greyscale-2 mt-0 mb-1 max-w-xs px-0 py-0'
-                )}
-                color={'gray-white'}
-                onClick={() => onReplyClick(comment)}
-              >
           <ReplyIcon className="h-5 w-5" />
-              </Button>
+        </IconButton>
       )}
       {showTip && (
-              <Tipper
+        <Tipper comment={comment} myTip={myTip ?? 0} totalTip={totalTip ?? 0} />
-                comment={comment}
-                myTip={myTip ?? 0}
-                totalTip={totalTip ?? 0}
-              />
       )}
       {(contract.openCommentBounties ?? 0) > 0 && (
         <AwardBountyButton comment={comment} contract={contract} />
       )}
     </Row>
-        </Row>
-      </Col>
-    </Row>
   )
 }
 
@@ -233,30 +243,14 @@ export const FeedComment = memo(function FeedComment(props: {
           content={content || text}
           smallImage
         />
-        <Row className="grow justify-end gap-2">
+        <CommentActions
-          {onReplyClick && (
+          onReplyClick={onReplyClick}
-            <Button
-              size={'sm'}
-              className={clsx(
-                'hover:bg-greyscale-2 mt-0 mb-1 max-w-xs px-0 py-0'
-              )}
-              color={'gray-white'}
-              onClick={() => onReplyClick(comment)}
-            >
-              <ReplyIcon className="h-5 w-5" />
-            </Button>
-          )}
-          {showTip && (
-            <Tipper
           comment={comment}
-              myTip={myTip ?? 0}
+          showTip={showTip}
-              totalTip={totalTip ?? 0}
+          myTip={myTip}
+          totalTip={totalTip}
+          contract={contract}
         />
-          )}
-          {(contract.openCommentBounties ?? 0) > 0 && (
-            <AwardBountyButton comment={comment} contract={contract} />
-          )}
-        </Row>
       </Col>
     </Row>
   )

web/components/follow-button.tsx

@@ -11,25 +11,19 @@ export function FollowButton(props: {
   isFollowing: boolean | undefined
   onFollow: () => void
   onUnfollow: () => void
-  className?: string
 }) {
-  const { isFollowing, onFollow, onUnfollow, className } = props
+  const { isFollowing, onFollow, onUnfollow } = props
 
   const user = useUser()
 
-  if (!user || isFollowing === undefined)
+  if (!user || isFollowing === undefined) return <></>
-    return (
-      <Button size="sm" color="gray" className={clsx(className, 'invisible')}>
-        Follow
-      </Button>
-    )
 
   if (isFollowing) {
     return (
       <Button
         size="sm"
         color="gray-outline"
-        className={clsx('my-auto', className)}
+        className="my-auto"
         onClick={withTracking(onUnfollow, 'unfollow')}
       >
         Following
@@ -41,7 +35,7 @@ export function FollowButton(props: {
     <Button
       size="sm"
       color="indigo"
-      className={clsx(className, 'my-auto')}
+      className="my-auto"
       onClick={withTracking(onFollow, 'follow')}
     >
       Follow

web/components/follow-market-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'web/components/button'
+import { IconButton } from 'web/components/button'
 import {
   Contract,
   followContract,
@@ -33,9 +33,8 @@ export const FollowMarketButton = (props: {
       noTap
       noFade
     >
-      <Button
+      <IconButton
-        size={'sm'}
+        size="2xs"
-        color={'gray-white'}
         onClick={async () => {
           if (!user) return firebaseLogin()
           if (followers?.includes(user.id)) {
@@ -65,18 +64,12 @@ export const FollowMarketButton = (props: {
       >
         {watching ? (
           <Col className={'items-center gap-x-2 sm:flex-row'}>
-            <EyeOffIcon
+            <EyeOffIcon className={clsx('h-5 w-5')} aria-hidden="true" />
-              className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
-              aria-hidden="true"
-            />
             {/* Unwatch */}
           </Col>
         ) : (
           <Col className={'items-center gap-x-2 sm:flex-row'}>
-            <EyeIcon
+            <EyeIcon className={clsx('h-5 w-5')} aria-hidden="true" />
-              className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
-              aria-hidden="true"
-            />
             {/* Watch */}
           </Col>
         )}
@@ -87,7 +80,7 @@ export const FollowMarketButton = (props: {
             followers?.includes(user?.id ?? 'nope') ? 'watched' : 'unwatched'
           } a question!`}
         />
-      </Button>
+      </IconButton>
     </Tooltip>
   )
 }

web/components/following-button.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import { PencilIcon } from '@heroicons/react/outline'
 
 import { User } from 'common/user'
 import { useState } from 'react'
@@ -11,7 +10,6 @@ import { Modal } from './layout/modal'
 import { Tabs } from './layout/tabs'
 import { useDiscoverUsers } from 'web/hooks/use-users'
 import { TextButton } from './text-button'
-import { track } from 'web/lib/service/analytics'
 
 export function FollowingButton(props: { user: User; className?: string }) {
   const { user, className } = props
@@ -40,37 +38,6 @@ export function FollowingButton(props: { user: User; className?: string }) {
   )
 }
 
-export function EditFollowingButton(props: { user: User; className?: string }) {
-  const { user, className } = props
-  const [isOpen, setIsOpen] = useState(false)
-  const followingIds = useFollows(user.id)
-  const followerIds = useFollowers(user.id)
-
-  return (
-    <div
-      className={clsx(
-        className,
-        'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm normal-case text-gray-700'
-      )}
-      onClick={() => {
-        setIsOpen(true)
-        track('edit following button')
-      }}
-    >
-      <PencilIcon className="inline h-4 w-4" />
-      Following
-      <FollowsDialog
-        user={user}
-        defaultTab="following"
-        followingIds={followingIds ?? []}
-        followerIds={followerIds ?? []}
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-      />
-    </div>
-  )
-}
-
 export function FollowersButton(props: { user: User; className?: string }) {
   const { user, className } = props
   const [isOpen, setIsOpen] = useState(false)

web/components/groups/create-group-button.tsx

@@ -103,7 +103,7 @@ export function CreateGroupButton(props: {
       </Col>
       {errorText && <div className={'text-error'}>{errorText}</div>}
 
-      <div className="form-control w-full">
+      <div className="flex w-full flex-col">
         <label className="mb-2 ml-1 mt-0">Group name</label>
         <Input
           placeholder={'Your group name'}

web/components/groups/edit-group-button.tsx

@@ -11,6 +11,7 @@ import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { User } from 'common/user'
 import { useMemberIds } from 'web/hooks/use-group'
 import { Input } from '../input'
+import { Button } from '../button'
 
 export function EditGroupButton(props: { group: Group; className?: string }) {
   const { group, className } = props
@@ -40,18 +41,18 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
 
   return (
     <div className={clsx('flex p-1', className)}>
-      <div
+      <Button
-        className={clsx(
+        size="sm"
-          'btn-ghost cursor-pointer whitespace-nowrap rounded-md p-1 text-sm text-gray-700'
+        color="gray-white"
-        )}
+        className="whitespace-nowrap"
         onClick={() => updateOpen(!open)}
       >
         <PencilIcon className="inline h-4 w-4" /> Edit
-      </div>
+      </Button>
       <Modal open={open} setOpen={updateOpen}>
         <div className="h-full rounded-md bg-white p-8">
-          <div className="form-control w-full">
+          <div className="flex w-full flex-col">
-            <label className="label">
+            <label className="px-1 py-2">
               <span className="mb-1">Group name</span>
             </label>
 
@@ -65,8 +66,8 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
 
           <Spacer h={4} />
 
-          <div className="form-control w-full">
+          <div className="flex w-full flex-col">
-            <label className="label">
+            <label className="px-1 py-2">
               <span className="mb-0">Add members</span>
             </label>
             <FilterSelectUsers
@@ -76,9 +77,10 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
             />
           </div>
 
-          <div className="modal-action">
+          <div className="flex">
-            <label
+            <Button
-              htmlFor="edit"
+              color="red"
+              size="xs"
               onClick={() => {
                 if (confirm('Are you sure you want to delete this group?')) {
                   deleteGroup(group)
@@ -86,30 +88,24 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
                   router.replace('/groups')
                 }
               }}
-              className={clsx(
-                'btn btn-sm btn-outline mr-auto self-center hover:border-red-500 hover:bg-red-500'
-              )}
             >
               Delete
-            </label>
+            </Button>
-            <label
+            <Button
-              htmlFor="edit"
+              color="gray-white"
-              className={'btn'}
+              size="xs"
               onClick={() => updateOpen(false)}
             >
               Cancel
-            </label>
+            </Button>
-            <label
+            <Button
-              className={clsx(
+              color="green"
-                'btn',
+              disabled={saveDisabled}
-                saveDisabled ? 'btn-disabled' : 'btn-primary',
+              loading={isSubmitting}
-                isSubmitting && 'loading'
-              )}
-              htmlFor="edit"
               onClick={onSubmit}
             >
               Save
-            </label>
+            </Button>
           </div>
         </div>
       </Modal>

web/components/groups/group-overview-post.tsx

@@ -33,11 +33,9 @@ export function GroupOverviewPost(props: {
 function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
   const { group, post } = props
   const [editing, setEditing] = useState(false)
-  const [isSubmitting, setIsSubmitting] = useState(false)
 
   const { editor, upload } = useTextEditor({
     defaultValue: post?.content,
-    disabled: isSubmitting,
   })
 
   async function savePost() {
@@ -76,10 +74,8 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
       <Row className="gap-2">
         <Button
           onClick={async () => {
-            setIsSubmitting(true)
             await savePost()
             setEditing(false)
-            setIsSubmitting(false)
           }}
         >
           Save

web/components/groups/group-overview.tsx

@@ -116,10 +116,7 @@ export function GroupPosts(props: { posts: Post[]; group: Group }) {
         </Col>
         <Col>
           {user && (
-            <Button
+            <Button onClick={() => setShowCreatePost(!showCreatePost)}>
-              className="btn-md"
-              onClick={() => setShowCreatePost(!showCreatePost)}
-            >
               Add a Post
             </Button>
           )}
@@ -267,7 +264,7 @@ export function PinnedItems(props: {
             </div>
           )}
           {pinned.map((element, index) => (
-            <div className="relative mb-4">
+            <div className="relative mb-4" key={element.key}>
               {element}
 
               {editMode && <CrossIcon onClick={() => onDeleteClicked(index)} />}
@@ -380,7 +377,7 @@ export function GroupAbout(props: {
           <div className={'inline-flex items-center'}>
             <div className="mr-1 text-gray-500">Created by</div>
             <UserLink
-              className="text-neutral"
+              className="text-gray-700"
               name={creator.name}
               username={creator.username}
             />
@@ -432,7 +429,7 @@ export function GroupAbout(props: {
             <CopyLinkButton
               url={shareUrl}
               tracking="copy group share link"
-              buttonClassName="btn-md rounded-l-none"
+              buttonClassName="rounded-l-none"
               toastClassName={'-left-28 mt-1'}
             />
           </Col>

web/components/groups/group-selector.tsx

@@ -72,7 +72,7 @@ export function GroupSelector(props: {
     )
   }
   return (
-    <div className="form-control items-start">
+    <div className="flex flex-col items-start">
       <Combobox
         as="div"
         value={selectedGroup}
@@ -83,7 +83,7 @@ export function GroupSelector(props: {
         {() => (
           <>
             {showLabel && (
-              <Combobox.Label className="label justify-start gap-2 text-base">
+              <Combobox.Label className="justify-start gap-2 px-1 py-2 text-base">
                 Add to Group
                 <InfoTooltip text="Question will be displayed alongside the other questions in the group." />
               </Combobox.Label>

web/components/groups/groups-button.tsx

@@ -125,9 +125,9 @@ export function JoinOrLeaveGroupButton(props: {
   if (isMember) {
     return (
       <Button
-        size="xs"
+        size="sm"
-        color="gray-white"
+        color="gray-outline"
-        className={`${className}  border-greyscale-4 border !border-solid`}
+        className={className}
         onClick={withTracking(onLeaveGroup, 'leave group')}
       >
         Unfollow
@@ -139,8 +139,8 @@ export function JoinOrLeaveGroupButton(props: {
     return <div className={clsx(className, 'text-gray-500')}>Closed</div>
   return (
     <Button
-      size="xs"
+      size="sm"
-      color="blue"
+      color="indigo"
       className={className}
       onClick={withTracking(onJoinGroup, 'join group')}
     >

web/components/input.tsx

@@ -2,21 +2,21 @@ import clsx from 'clsx'
 import React from 'react'
 
 /** Text input. Wraps html `<input>` */
-export const Input = (props: JSX.IntrinsicElements['input']) => {
+export const Input = (
-  const { className, ...rest } = props
+  props: { error?: boolean } & JSX.IntrinsicElements['input']
+) => {
+  const { error, className, ...rest } = props
 
   return (
     <input
-      className={clsx('input input-bordered text-base md:text-sm', className)}
+      className={clsx(
+        'h-12 rounded-md border bg-white px-4 shadow-sm transition-colors invalid:border-red-600 invalid:text-red-900 invalid:placeholder-red-300 focus:outline-none disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-sm',
+        error
+          ? 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-600 focus:ring-red-500' // matches invalid: styles
+          : 'placeholder-greyscale-4 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500',
+        className
+      )}
       {...rest}
     />
   )
 }
-
-/*
-  TODO: replace daisyui style with our own. For reference:
-
-  james: text-lg placeholder:text-gray-400
-  inga: placeholder:text-greyscale-4 border-greyscale-2 rounded-md
-  austin: border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
- */

web/components/leaderboard.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import { Avatar } from './avatar'
 import { Row } from './layout/row'
 import { SiteLink } from './site-link'
+import { Table } from './table'
 import { Title } from './title'
 
 interface LeaderboardEntry {
@@ -31,9 +32,9 @@ export function Leaderboard<T extends LeaderboardEntry>(props: {
         <div className="ml-2 text-gray-500">None yet</div>
       ) : (
         <div className="overflow-x-auto">
-          <table className="table-zebra table-compact table w-full text-gray-500">
+          <Table>
             <thead>
-              <tr className="p-2">
+              <tr>
                 <th>#</th>
                 <th>Name</th>
                 {columns.map((column) => (
@@ -59,7 +60,7 @@ export function Leaderboard<T extends LeaderboardEntry>(props: {
                 </tr>
               ))}
             </tbody>
-          </table>
+          </Table>
         </div>
       )}
     </div>

web/components/limit-bets.tsx

@@ -14,6 +14,7 @@ import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
 import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label'
 import { Subtitle } from './subtitle'
+import { Table } from './table'
 import { Title } from './title'
 
 export function LimitBets(props: {
@@ -74,7 +75,7 @@ export function LimitOrderTable(props: {
   const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
 
   return (
-    <table className="table-compact table w-full rounded text-gray-500">
+    <Table className="rounded">
       <thead>
         <tr>
           {!isYou && <th></th>}
@@ -89,7 +90,7 @@ export function LimitOrderTable(props: {
           <LimitBet key={bet.id} bet={bet} contract={contract} isYou={isYou} />
         ))}
       </tbody>
-    </table>
+    </Table>
   )
 }
 

web/components/manalink-card.tsx

@@ -9,9 +9,9 @@ import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Claim, Manalink } from 'common/manalink'
 import { ShareIconButton } from './share-icon-button'
-import { contractDetailsButtonClassName } from './contract/contract-info-dialog'
 import { useUserById } from 'web/hooks/use-user'
 import getManalinkUrl from 'web/get-manalink-url'
+import { IconButton } from './button'
 
 export type ManalinkInfo = {
   expiresTime: number | null
@@ -123,7 +123,7 @@ export function ManalinkCardFromView(props: {
             src="/logo-white.svg"
           />
         </Col>
-        <Row className="relative w-full gap-1 rounded-b-lg bg-white px-4 py-2 text-lg">
+        <Row className="relative w-full rounded-b-lg bg-white px-4 py-2 align-middle text-lg">
           <div
             className={clsx(
               'my-auto mb-1 w-full',
@@ -133,32 +133,23 @@ export function ManalinkCardFromView(props: {
             {formatMoney(amount)}
           </div>
 
-          <button
+          <IconButton size="2xs" onClick={() => (window.location.href = qrUrl)}>
-            onClick={() => (window.location.href = qrUrl)}
-            className={clsx(contractDetailsButtonClassName)}
-          >
             <QrcodeIcon className="h-6 w-6" />
-          </button>
+          </IconButton>
 
           <ShareIconButton
             toastClassName={'-left-48 min-w-[250%]'}
-            buttonClassName={'transition-colors'}
-            onCopyButtonClassName={
-              'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
-            }
             copyPayload={getManalinkUrl(link.slug)}
           />
-          <button
+          <IconButton
+            size="xs"
             onClick={() => setShowDetails(!showDetails)}
             className={clsx(
-              contractDetailsButtonClassName,
+              showDetails ? ' text-indigo-600 hover:text-indigo-700' : ''
-              showDetails
-                ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
-                : ''
             )}
           >
-            <DotsHorizontalIcon className="h-[24px] w-5" />
+            <DotsHorizontalIcon className="h-5 w-5" />
-          </button>
+          </IconButton>
         </Row>
       </Col>
       <div className="mt-2 mb-4 text-xs text-gray-500 md:text-sm">

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

@@ -14,6 +14,7 @@ import { DuplicateIcon } from '@heroicons/react/outline'
 import { QRCode } from '../qr-code'
 import { Input } from '../input'
 import { ExpandingInput } from '../expanding-input'
+import { Select } from '../select'
 
 export function CreateLinksButton(props: {
   user: User
@@ -115,8 +116,8 @@ function CreateManalinkForm(props: {
         >
           <Title className="!my-0" text="Create a Manalink" />
           <div className="flex flex-col flex-wrap gap-x-5 gap-y-2">
-            <div className="form-control flex-auto">
+            <div className="flex flex-auto flex-col">
-              <label className="label">Amount</label>
+              <label className="px-1 py-2">Amount</label>
               <div className="relative">
                 <span className="absolute mx-3 mt-3.5 text-sm text-gray-400">
                   M$
@@ -135,8 +136,8 @@ function CreateManalinkForm(props: {
               </div>
             </div>
             <div className="flex flex-col gap-2 md:flex-row">
-              <div className="form-control w-full md:w-1/2">
+              <div className="flex w-full flex-col md:w-1/2">
-                <label className="label">Uses</label>
+                <label className="px-1 py-2">Uses</label>
                 <Input
                   type="number"
                   min="1"
@@ -148,10 +149,9 @@ function CreateManalinkForm(props: {
                   }
                 />
               </div>
-              <div className="form-control w-full md:w-1/2">
+              <div className="flex w-full flex-col md:w-1/2">
-                <label className="label">Expires in</label>
+                <label className="px-1 py-2">Expires in</label>
-                <select
+                <Select
-                  className="!select !select-bordered"
                   value={expiresIn}
                   defaultValue={defaultExpire}
                   onChange={(e) => {
@@ -160,11 +160,11 @@ function CreateManalinkForm(props: {
                   }}
                 >
                   {expireOptions}
-                </select>
+                </Select>
               </div>
             </div>
-            <div className="form-control w-full">
+            <div className="flex w-full flex-col">
-              <label className="label">Message</label>
+              <label className="px-1 py-2">Message</label>
               <ExpandingInput
                 placeholder={defaultMessage}
                 maxLength={200}

web/components/midterms-maps.tsx

@@ -0,0 +1,212 @@
+import { useEffect } from 'react'
+import { getContractFromSlug } from 'web/lib/firebase/contracts'
+import {
+  StateElectionMap,
+  StateElectionMarket,
+} from './usa-map/state-election-map'
+import { useState } from 'react'
+import { LoadingIndicator } from './loading-indicator'
+import { CPMMBinaryContract } from 'common/contract'
+
+export function MidtermsMaps(props: { mapType: string }) {
+  const { mapType } = props
+  const [contracts, setContracts] = useState<CPMMBinaryContract[] | null>(null)
+
+  useEffect(() => {
+    const getContracts = async () => {
+      if (props.mapType === 'senate') {
+        const senateContracts = await Promise.all(
+          senateMidterms.map((m) =>
+            getContractFromSlug(m.slug).then((c) => c ?? null)
+          )
+        )
+        setContracts(senateContracts as CPMMBinaryContract[])
+      } else if (props.mapType === 'governor') {
+        const governorContracts = await Promise.all(
+          governorMidterms.map((m) =>
+            getContractFromSlug(m.slug).then((c) => c ?? null)
+          )
+        )
+        setContracts(governorContracts as CPMMBinaryContract[])
+      }
+    }
+    getContracts()
+  }, [props.mapType, setContracts])
+
+  return contracts ? (
+    <StateElectionMap
+      markets={mapType == 'senate' ? senateMidterms : governorMidterms}
+      contracts={contracts}
+    />
+  ) : (
+    <LoadingIndicator />
+  )
+}
+
+const senateMidterms: StateElectionMarket[] = [
+  {
+    state: 'AZ',
+    creatorUsername: 'BTE',
+    slug: 'will-blake-masters-win-the-arizona',
+    isWinRepublican: true,
+  },
+  {
+    state: 'OH',
+    creatorUsername: 'BTE',
+    slug: 'will-jd-vance-win-the-ohio-senate-s',
+    isWinRepublican: true,
+  },
+  {
+    state: 'WI',
+    creatorUsername: 'BTE',
+    slug: 'will-ron-johnson-be-reelected-in-th',
+    isWinRepublican: true,
+  },
+  {
+    state: 'FL',
+    creatorUsername: 'BTE',
+    slug: 'will-marco-rubio-be-reelected-to-th',
+    isWinRepublican: true,
+  },
+  {
+    state: 'PA',
+    creatorUsername: 'MattP',
+    slug: 'will-dr-oz-be-elected-to-the-us-sen',
+    isWinRepublican: true,
+  },
+  {
+    state: 'GA',
+    creatorUsername: 'NcyRocks',
+    slug: 'will-a-democrat-win-the-2022-us-sen-3d2432ba6d79',
+    isWinRepublican: false,
+  },
+  {
+    state: 'NV',
+    creatorUsername: 'NcyRocks',
+    slug: 'will-a-democrat-win-the-2022-us-sen',
+    isWinRepublican: false,
+  },
+  {
+    state: 'NC',
+    creatorUsername: 'NcyRocks',
+    slug: 'will-a-democrat-win-the-2022-us-sen-6f1a901e1fcf',
+    isWinRepublican: false,
+  },
+  {
+    state: 'NH',
+    creatorUsername: 'NcyRocks',
+    slug: 'will-a-democrat-win-the-2022-us-sen-23194a72f1b7',
+    isWinRepublican: false,
+  },
+  {
+    state: 'UT',
+    creatorUsername: 'SG',
+    slug: 'will-mike-lee-win-the-2022-utah-sen',
+    isWinRepublican: true,
+  },
+  {
+    state: 'CO',
+    creatorUsername: 'SG',
+    slug: 'will-michael-bennet-win-the-2022-co',
+    isWinRepublican: false,
+  },
+]
+
+const governorMidterms: StateElectionMarket[] = [
+  {
+    state: 'TX',
+    creatorUsername: 'LarsDoucet',
+    slug: 'republicans-will-win-the-2022-texas',
+    isWinRepublican: true,
+  },
+  {
+    state: 'GA',
+    creatorUsername: 'MattP',
+    slug: 'will-stacey-abrams-win-the-2022-geo',
+    isWinRepublican: false,
+  },
+  {
+    state: 'FL',
+    creatorUsername: 'Tetraspace',
+    slug: 'if-charlie-crist-is-the-democratic',
+    isWinRepublican: false,
+  },
+  {
+    state: 'PA',
+    creatorUsername: 'JonathanMast',
+    slug: 'will-josh-shapiro-win-the-2022-penn',
+    isWinRepublican: false,
+  },
+  {
+    state: 'PA',
+    creatorUsername: 'JonathanMast',
+    slug: 'will-josh-shapiro-win-the-2022-penn',
+    isWinRepublican: false,
+  },
+  {
+    state: 'CO',
+    creatorUsername: 'ScottLawrence',
+    slug: 'will-jared-polis-be-reelected-as-co',
+    isWinRepublican: false,
+  },
+  {
+    state: 'OR',
+    creatorUsername: 'Tetraspace',
+    slug: 'if-tina-kotek-is-the-2022-democrati',
+    isWinRepublican: false,
+  },
+  {
+    state: 'MD',
+    creatorUsername: 'Tetraspace',
+    slug: 'if-wes-moore-is-the-2022-democratic',
+    isWinRepublican: false,
+  },
+  {
+    state: 'AK',
+    creatorUsername: 'SG',
+    slug: 'will-a-republican-win-the-2022-alas',
+    isWinRepublican: true,
+  },
+  {
+    state: 'AZ',
+    creatorUsername: 'SG',
+    slug: 'will-a-republican-win-the-2022-ariz',
+    isWinRepublican: true,
+  },
+  {
+    state: 'AZ',
+    creatorUsername: 'SG',
+    slug: 'will-a-republican-win-the-2022-ariz',
+    isWinRepublican: true,
+  },
+  {
+    state: 'WI',
+    creatorUsername: 'SG',
+    slug: 'will-a-democrat-win-the-2022-wiscon',
+    isWinRepublican: false,
+  },
+  {
+    state: 'NV',
+    creatorUsername: 'SG',
+    slug: 'will-a-democrat-win-the-2022-nevada',
+    isWinRepublican: false,
+  },
+  {
+    state: 'KS',
+    creatorUsername: 'SG',
+    slug: 'will-a-democrat-win-the-2022-kansas',
+    isWinRepublican: false,
+  },
+  {
+    state: 'NV',
+    creatorUsername: 'SG',
+    slug: 'will-a-democrat-win-the-2022-new-me',
+    isWinRepublican: false,
+  },
+  {
+    state: 'ME',
+    creatorUsername: 'SG',
+    slug: 'will-a-democrat-win-the-2022-maine',
+    isWinRepublican: false,
+  },
+]

web/components/number-input.tsx

@@ -32,13 +32,8 @@ export function NumberInput(props: {
 
   return (
     <Col className={className}>
-      <label className="input-group">
       <Input
-          className={clsx(
+        className={clsx('max-w-[200px] !text-lg', inputClassName)}
-            'max-w-[200px] !text-lg',
-            error && 'input-error',
-            inputClassName
-          )}
         ref={inputRef}
         type="number"
         pattern="[0-9]*"
@@ -46,10 +41,10 @@ export function NumberInput(props: {
         placeholder={placeholder ?? '0'}
         maxLength={9}
         value={numberString}
+        error={!!error}
         disabled={disabled}
         onChange={(e) => onChange(e.target.value.substring(0, 9))}
       />
-      </label>
 
       <Spacer h={4} />
 

web/components/numeric-bet-panel.tsx

@@ -20,6 +20,7 @@ import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
 import { BetSignUpPrompt } from './sign-up-prompt'
 import { track } from 'web/lib/service/analytics'
+import { Button } from './button'
 
 export function NumericBetPanel(props: {
   contract: NumericContract
@@ -108,7 +109,7 @@ function NumericBuyPanel(props: {
     })
   }
 
-  const betDisabled = isSubmitting || !betAmount || !bucketChoice || error
+  const betDisabled = isSubmitting || !betAmount || !bucketChoice || !!error
 
   const { newBet, newPool, newTotalShares, newTotalBets } = getNumericBetsInfo(
     value ?? 0,
@@ -195,16 +196,14 @@ function NumericBuyPanel(props: {
       <Spacer h={8} />
 
       {user && (
-        <button
+        <Button
-          className={clsx(
+          disabled={betDisabled}
-            'btn flex-1',
+          color="green"
-            betDisabled ? 'btn-disabled' : 'btn-primary',
+          loading={isSubmitting}
-            isSubmitting ? 'loading' : ''
+          onClick={submitBet}
-          )}
-          onClick={betDisabled ? undefined : submitBet}
         >
-          {isSubmitting ? 'Submitting...' : 'Submit'}
+          Submit
-        </button>
+        </Button>
       )}
 
       {wasSubmitted && <div className="mt-4">Bet submitted!</div>}

web/components/onboarding/welcome.tsx

@@ -54,13 +54,15 @@ export default function Welcome() {
   if (isTwitch || !user || (!user.shouldShowWelcome && !groupSelectorOpen))
     return <></>
 
+  if (groupSelectorOpen)
     return (
-    <>
       <GroupSelectorDialog
         open={groupSelectorOpen}
         setOpen={() => setGroupSelectorOpen(false)}
       />
+    )
 
+  return (
     <Modal open={open} setOpen={toggleOpen}>
       <Col className="h-[32rem] place-content-between rounded-md bg-white px-8 py-6 text-sm font-light md:h-[40rem] md:text-lg">
         {page === 0 && <Page0 />}
@@ -94,7 +96,6 @@ export default function Welcome() {
         </Col>
       </Col>
     </Modal>
-    </>
   )
 }
 
@@ -117,6 +118,7 @@ function PageIndicator(props: { page: number; totalpages: number }) {
     <Row>
       {[...Array(totalpages)].map((e, i) => (
         <div
+          key={i}
           className={clsx(
             'mx-1.5 my-auto h-1.5 w-1.5 rounded-full',
             i === page ? 'bg-indigo-500' : 'bg-gray-300'

web/components/probability-input.tsx

@@ -4,18 +4,15 @@ import { getPseudoProbability } from 'common/pseudo-numeric'
 import { BucketInput } from './bucket-input'
 import { Input } from './input'
 import { Col } from './layout/col'
-import { Spacer } from './layout/spacer'
 
-export function ProbabilityInput(props: {
+function ProbabilityInput(props: {
   prob: number | undefined
   onChange: (newProb: number | undefined) => void
   disabled?: boolean
   placeholder?: string
-  className?: string
   inputClassName?: string
 }) {
-  const { prob, onChange, disabled, placeholder, className, inputClassName } =
+  const { prob, onChange, disabled, placeholder, inputClassName } = props
-    props
 
   const onProbChange = (str: string) => {
     let prob = parseInt(str.replace(/\D/g, ''))
@@ -29,10 +26,10 @@ export function ProbabilityInput(props: {
   }
 
   return (
-    <Col className={className}>
+    <Col>
-      <label className="input-group">
+      <label className="relative w-fit">
         <Input
-          className={clsx('max-w-[200px] !text-lg', inputClassName)}
+          className={clsx('pr-2 !text-lg', inputClassName)}
           type="number"
           max={99}
           min={1}
@@ -44,9 +41,10 @@ export function ProbabilityInput(props: {
           disabled={disabled}
           onChange={(e) => onProbChange(e.target.value)}
         />
-        <span className="bg-gray-200 text-sm">%</span>
+        <span className="text-greyscale-4 absolute top-1/2 right-10 my-auto -translate-y-1/2">
+          %
+        </span>
       </label>
-      <Spacer h={4} />
     </Col>
   )
 }
@@ -82,7 +80,7 @@ export function ProbabilityOrNumericInput(props: {
     />
   ) : (
     <ProbabilityInput
-      inputClassName="w-full max-w-none"
+      inputClassName="w-24"
       prob={prob}
       onChange={setProb}
       disabled={isSubmitting}

web/components/probability-selector.tsx

@@ -1,5 +1,4 @@
 import { Input } from './input'
-import { Row } from './layout/row'
 
 export function ProbabilitySelector(props: {
   probabilityInt: number
@@ -9,8 +8,7 @@ export function ProbabilitySelector(props: {
   const { probabilityInt, setProbabilityInt, isSubmitting } = props
 
   return (
-    <Row className="items-center  gap-2">
+    <label className="flex items-center text-lg">
-      <label className="input-group input-group-lg text-lg">
       <Input
         type="number"
         value={probabilityInt}
@@ -24,6 +22,5 @@ export function ProbabilitySelector(props: {
       />
       <span>%</span>
     </label>
-    </Row>
   )
 }

web/components/profile/user-likes-button.tsx

@@ -7,7 +7,7 @@ import { useUserLikedContracts } from 'web/hooks/use-likes'
 import { SiteLink } from 'web/components/site-link'
 import { Row } from 'web/components/layout/row'
 import { XIcon } from '@heroicons/react/outline'
-import { unLikeContract } from 'web/lib/firebase/likes'
+import { unLikeItem } from 'web/lib/firebase/likes'
 import { contractPath } from 'web/lib/firebase/contracts'
 
 export function UserLikesButton(props: { user: User; className?: string }) {
@@ -36,7 +36,7 @@ export function UserLikesButton(props: { user: User; className?: string }) {
                 </SiteLink>
                 <XIcon
                   className="ml-2 h-5 w-5 shrink-0 cursor-pointer"
-                  onClick={() => unLikeContract(user.id, likedContract.id)}
+                  onClick={() => unLikeItem(user.id, likedContract.id)}
                 />
               </Row>
             ))}

web/components/referrals-button.tsx

@@ -12,6 +12,7 @@ import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { getUser, updateUser } from 'web/lib/firebase/users'
 import { TextButton } from 'web/components/text-button'
 import { UserLink } from 'web/components/user-link'
+import { Button } from './button'
 
 export function ReferralsButton(props: {
   user: User
@@ -89,11 +90,9 @@ function ReferralsDialog(props: {
                         maxUsers={1}
                       />
                       <Row className={'mt-0 justify-end'}>
-                        <button
+                        <Button
                           className={
-                            referredBy.length === 0
+                            referredBy.length === 0 ? 'hidden' : 'my-2 w-24'
-                              ? 'hidden'
-                              : 'btn btn-primary btn-md my-2 w-24 normal-case'
                           }
                           disabled={referredBy.length === 0 || isSubmitting}
                           onClick={() => {
@@ -114,7 +113,7 @@ function ReferralsDialog(props: {
                           }}
                         >
                           Save
-                        </button>
+                        </Button>
                       </Row>
                       <span className={'text-warning'}>
                         {referredBy.length > 0 &&

web/components/relative-timestamp.tsx

@@ -1,22 +1,16 @@
 import { DateTimeTooltip } from './datetime-tooltip'
-import React, { useEffect, useState } from 'react'
 import { fromNow } from 'web/lib/util/time'
+import { useIsClient } from 'web/hooks/use-is-client'
 
 export function RelativeTimestamp(props: { time: number }) {
   const { time } = props
-  const [isClient, setIsClient] = useState(false)
+  const isClient = useIsClient()
-
-  useEffect(() => {
-    // Only render on client to prevent difference from server.
-    setIsClient(true)
-  }, [])
-
   return (
     <DateTimeTooltip
       className="ml-1 whitespace-nowrap text-gray-400"
       time={time}
     >
-      {isClient ? fromNow(time) : ''}
+      {isClient && fromNow(time)}
     </DateTimeTooltip>
   )
 }

web/components/resolution-panel.tsx

@@ -72,7 +72,6 @@ export function ResolutionPanel(props: {
         className="mx-auto my-2"
         selected={outcome}
         onSelect={setOutcome}
-        btnClassName={isSubmitting ? 'btn-disabled' : ''}
       />
       <Spacer h={4} />
       <div>

web/components/select.tsx

@@ -0,0 +1,17 @@
+import clsx from 'clsx'
+
+export const Select = (props: JSX.IntrinsicElements['select']) => {
+  const { className, children, ...rest } = props
+
+  return (
+    <select
+      className={clsx(
+        'h-12 cursor-pointer self-start overflow-hidden rounded-md border border-gray-300 pl-4 pr-10 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500',
+        className
+      )}
+      {...rest}
+    >
+      ß{children}
+    </select>
+  )
+}

web/components/sell-button.tsx

@@ -1,59 +0,0 @@
-import { BinaryContract, PseudoNumericContract } from 'common/contract'
-import { User } from 'common/user'
-import { useUserContractBets } from 'web/hooks/use-user-bets'
-import { useState } from 'react'
-import { Col } from './layout/col'
-import clsx from 'clsx'
-import { SellSharesModal } from './sell-modal'
-
-export function SellButton(props: {
-  contract: BinaryContract | PseudoNumericContract
-  user: User | null | undefined
-  sharesOutcome: 'YES' | 'NO' | undefined
-  shares: number
-  panelClassName?: string
-}) {
-  const { contract, user, sharesOutcome, shares, panelClassName } = props
-  const userBets = useUserContractBets(user?.id, contract.id)
-  const [showSellModal, setShowSellModal] = useState(false)
-  const { mechanism, outcomeType } = contract
-  const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
-
-  if (sharesOutcome && user && mechanism === 'cpmm-1') {
-    return (
-      <Col className={'items-center'}>
-        <button
-          className={clsx(
-            'btn-sm w-24 gap-1',
-            // from the yes-no-selector:
-            'inline-flex items-center justify-center rounded-3xl border-2 p-2',
-            sharesOutcome === 'NO'
-              ? 'hover:bg-primary-focus border-primary hover:border-primary-focus text-primary hover:text-white'
-              : 'border-red-400 text-red-500 hover:border-red-500 hover:bg-red-500 hover:text-white'
-          )}
-          onClick={() => setShowSellModal(true)}
-        >
-          Sell{' '}
-          {isPseudoNumeric
-            ? { YES: 'HIGH', NO: 'LOW' }[sharesOutcome]
-            : sharesOutcome}
-        </button>
-        <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
-          {'(' + Math.floor(shares) + ' shares)'}
-        </div>
-        {showSellModal && (
-          <SellSharesModal
-            className={panelClassName}
-            contract={contract}
-            user={user}
-            userBets={userBets ?? []}
-            shares={shares}
-            sharesOutcome={sharesOutcome}
-            setOpen={setShowSellModal}
-          />
-        )}
-      </Col>
-    )
-  }
-  return <div />
-}

web/components/share-icon-button.tsx

@@ -5,34 +5,22 @@ import clsx from 'clsx'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { ToastClipboard } from 'web/components/toast-clipboard'
 import { track } from 'web/lib/service/analytics'
-import { contractDetailsButtonClassName } from 'web/components/contract/contract-info-dialog'
+import { IconButton } from './button'
 
 export function ShareIconButton(props: {
-  buttonClassName?: string
-  onCopyButtonClassName?: string
   toastClassName?: string
   children?: React.ReactNode
   iconClassName?: string
   copyPayload: string
 }) {
-  const {
+  const { toastClassName, children, iconClassName, copyPayload } = props
-    buttonClassName,
-    onCopyButtonClassName,
-    toastClassName,
-    children,
-    iconClassName,
-    copyPayload,
-  } = props
   const [showToast, setShowToast] = useState(false)
 
   return (
     <div className="relative z-10 flex-shrink-0">
-      <button
+      <IconButton
-        className={clsx(
+        size="2xs"
-          contractDetailsButtonClassName,
+        className={clsx('mt-1', showToast ? 'text-indigo-600' : '')}
-          buttonClassName,
-          showToast ? onCopyButtonClassName : ''
-        )}
         onClick={() => {
           copyToClipboard(copyPayload)
           track('copy share link')
@@ -41,11 +29,11 @@ export function ShareIconButton(props: {
         }}
       >
         <LinkIcon
-          className={clsx(iconClassName ? iconClassName : 'h-[24px] w-5')}
+          className={clsx(iconClassName ? iconClassName : 'h-5 w-5')}
           aria-hidden="true"
         />
         {children}
-      </button>
+      </IconButton>
 
       {showToast && <ToastClipboard className={toastClassName} />}
     </div>

web/components/static-react-embed.tsx

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+import { MidtermsMaps } from './midterms-maps'
+
+export function StaticReactEmbed(props: { embedName: string }) {
+  const { embedName } = props
+  const [embed, setEmbed] = useState<JSX.Element | null>(null)
+
+  useEffect(() => {
+    const governorMidtermsMap = <MidtermsMaps mapType="governor" />
+    const senateMidtermsMap = <MidtermsMaps mapType="senate" />
+
+    if (embedName === 'governor-midterms-map') {
+      setEmbed(governorMidtermsMap)
+    } else if (embedName === 'senate-midterms-map') {
+      setEmbed(senateMidtermsMap)
+    }
+  }, [embedName, setEmbed])
+
+  return <div>{embed}</div>
+}

web/components/table.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx'
+
+/** `<table>` with styles. Expects table html (`<thead>`, `<td>` etc) */
+export const Table = (props: {
+  zebra?: boolean
+  className?: string
+  children: React.ReactNode
+}) => {
+  const { className, children } = props
+
+  return (
+    <table
+      className={clsx(
+        'w-full whitespace-nowrap text-left text-sm text-gray-500 [&_td]:p-2 [&_th]:p-2 [&>thead]:font-bold [&>tbody_tr:nth-child(odd)]:bg-white',
+        className
+      )}
+    >
+      {children}
+    </table>
+  )
+}

web/components/tipper.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import toast from 'react-hot-toast'
-import { debounce } from 'lodash'
 
 import { Comment } from 'common/comment'
 import { User } from 'common/user'
@@ -9,8 +8,10 @@ import { transact } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
 import { TipButton } from './contract/tip-button'
 import { Row } from './layout/row'
-import { LIKE_TIP_AMOUNT } from 'common/like'
+import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
 import { formatMoney } from 'common/util/format'
+import { Button } from './button'
+import clsx from 'clsx'
 
 export function Tipper(prop: {
   comment: Comment
@@ -19,24 +20,13 @@ export function Tipper(prop: {
 }) {
   const { comment, myTip, totalTip } = prop
 
+  // This is a temporary tipping amount before it actually gets confirmed. This is so tha we dont accidentally tip more than you have
+  const [tempTip, setTempTip] = useState(0)
+
   const me = useUser()
 
-  const [localTip, setLocalTip] = useState(myTip)
+  const [saveTip] = useState(
-
+    () => async (user: User, comment: Comment, change: number) => {
-  // listen for user being set
-  const initialized = useRef(false)
-  useEffect(() => {
-    if (myTip && !initialized.current) {
-      setLocalTip(myTip)
-      initialized.current = true
-    }
-  }, [myTip])
-
-  const total = totalTip - myTip + localTip
-
-  // declare debounced function only on first render
-  const [saveTip] = useState(() =>
-    debounce(async (user: User, comment: Comment, change: number) => {
       if (change === 0) {
         return
       }
@@ -67,30 +57,88 @@ export function Tipper(prop: {
         fromId: user.id,
         toId: comment.userId,
       })
-    }, 1500)
+    }
   )
-  // instant save on unrender
-  useEffect(() => () => void saveTip.flush(), [saveTip])
 
   const addTip = (delta: number) => {
-    setLocalTip(localTip + delta)
+    setTempTip((tempTip) => tempTip + delta)
-    me && saveTip(me, comment, localTip - myTip + delta)
+    const timeoutId = setTimeout(() => {
-    toast(`You tipped ${comment.userName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
+      me &&
+        saveTip(me, comment, delta)
+          .then(() => setTempTip((tempTip) => tempTip - delta))
+          .catch((e) => console.error(e))
+    }, TIP_UNDO_DURATION + 1000)
+    toast.custom(
+      () => (
+        <TipToast
+          userName={comment.userName}
+          onUndoClick={() => {
+            clearTimeout(timeoutId)
+            setTempTip((tempTip) => tempTip - delta)
+          }}
+        />
+      ),
+      { duration: TIP_UNDO_DURATION }
+    )
   }
 
   const canUp =
-    me && comment.userId !== me.id && me.balance >= localTip + LIKE_TIP_AMOUNT
+    me && comment.userId !== me.id && me.balance - tempTip >= LIKE_TIP_AMOUNT
 
   return (
     <Row className="items-center gap-0.5">
       <TipButton
         tipAmount={LIKE_TIP_AMOUNT}
-        totalTipped={total}
+        totalTipped={totalTip}
         onClick={() => addTip(+LIKE_TIP_AMOUNT)}
-        userTipped={localTip > 0}
+        userTipped={tempTip > 0 || myTip > 0}
         disabled={!canUp}
         isCompact
       />
     </Row>
   )
 }
+
+export function TipToast(props: { userName: string; onUndoClick: () => void }) {
+  const { userName, onUndoClick } = props
+  const [cancelled, setCancelled] = useState(false)
+
+  // There is a strange bug with toast where sometimes if you interact with one popup, the others will not dissappear at the right time, overriding it for now with this
+  const [timedOut, setTimedOut] = useState(false)
+  setTimeout(() => {
+    setTimedOut(true)
+  }, TIP_UNDO_DURATION)
+  if (timedOut) {
+    return <></>
+  }
+  return (
+    <div className="relative overflow-hidden rounded-lg bg-white drop-shadow-md">
+      <div
+        className={clsx(
+          'animate-progress-loading absolute bottom-0 z-10 h-1 w-full bg-indigo-600',
+          cancelled ? 'hidden' : ''
+        )}
+      />
+      <Row className="text-greyscale-6 items-center gap-4 px-4 py-2 text-sm">
+        <div className={clsx(cancelled ? 'hidden' : 'inline')}>
+          Tipping {userName} {formatMoney(LIKE_TIP_AMOUNT)}...
+        </div>
+        <div className={clsx('py-1', cancelled ? 'inline' : 'hidden')}>
+          Cancelled tipping
+        </div>
+        <Button
+          className={clsx(cancelled ? 'hidden' : 'inline')}
+          size="xs"
+          color="gray-outline"
+          onClick={() => {
+            onUndoClick()
+            setCancelled(true)
+          }}
+          disabled={cancelled}
+        >
+          Cancel
+        </Button>
+      </Row>
+    </div>
+  )
+}

web/components/toast-clipboard.tsx

@@ -8,7 +8,7 @@ export function ToastClipboard(props: { className?: string }) {
   return (
     <Row
       className={clsx(
-        'border-base-300 absolute items-center' +
+        'border-greyscale-4 absolute items-center' +
           'gap-2 divide-x divide-gray-200 rounded-md border-2 bg-white ' +
           'h-15 z-10 w-[15rem] p-2 pr-3 text-gray-500',
         className

web/components/user-link.tsx

@@ -48,6 +48,7 @@ const BOT_USERNAMES = [
   'MarketManagerBot',
   'Botlab',
   'JuniorBot',
+  'ManifoldDream',
 ]
 
 function BotBadge() {

web/components/user-page.tsx

@@ -95,7 +95,7 @@ export function UserPage(props: { user: User }) {
           )}
 
           <Col className="w-full gap-4 pl-5">
-            <div className="flex flex-col gap-2 sm:flex-row sm:justify-between">
+            <div className="flex flex-col items-start gap-2 sm:flex-row sm:justify-between">
               <Col>
                 <span className="break-anywhere text-lg font-bold sm:text-2xl">
                   {user.name}
@@ -291,7 +291,7 @@ export function ProfilePrivateStats(props: {
       <Row className={'justify-between gap-4 sm:justify-end'}>
         <Col className={'text-greyscale-4 text-md sm:text-lg'}>
           <span
-            className={clsx(profit >= 0 ? 'text-green-600' : 'text-red-400')}
+            className={clsx(profit >= 0 ? 'text-teal-600' : 'text-red-400')}
           >
             {formatMoney(profit)}
           </span>

web/components/yes-no-selector.tsx

@@ -101,7 +101,7 @@ export function YesNoCancelSelector(props: {
       <Button
         color={selected === 'MKT' ? 'blue' : 'gray'}
         onClick={() => onSelect('MKT')}
-        className={clsx(btnClassName, 'btn-sm')}
+        className={btnClassName}
       >
         PROB
       </Button>
@@ -109,7 +109,7 @@ export function YesNoCancelSelector(props: {
       <Button
         color={selected === 'CANCEL' ? 'yellow' : 'gray'}
         onClick={() => onSelect('CANCEL')}
-        className={clsx(btnClassName, 'btn-sm')}
+        className={btnClassName}
       >
         N/A
       </Button>

web/hooks/use-global-config.ts

@@ -1,12 +1,17 @@
 import { GlobalConfig } from 'common/globalConfig'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { listenForGlobalConfig } from 'web/lib/firebase/globalConfig'
+import { inMemoryStore, usePersistentState } from './use-persistent-state'
 
 export const useGlobalConfig = () => {
-  const [globalConfig, setGlobalConfig] = useState<GlobalConfig | null>(null)
+  const [globalConfig, setGlobalConfig] =
+    usePersistentState<GlobalConfig | null>(null, {
+      store: inMemoryStore(),
+      key: 'globalConfig',
+    })
 
   useEffect(() => {
-    listenForGlobalConfig(setGlobalConfig)
+    return listenForGlobalConfig(setGlobalConfig)
-  }, [])
+  }, [setGlobalConfig])
   return globalConfig
 }

web/hooks/use-is-client.ts

@@ -0,0 +1,7 @@
+import { useEffect, useState } from 'react'
+
+export const useIsClient = () => {
+  const [isClient, setIsClient] = useState(false)
+  useEffect(() => setIsClient(true), [])
+  return isClient
+}

web/hooks/use-persistent-state.ts

@@ -89,6 +89,17 @@ export const historyStore = <T>(prefix = '__manifold'): PersistentStore<T> => ({
   },
 })
 
+const store: Record<string, any> = {}
+
+export const inMemoryStore = <T>(): PersistentStore<T> => ({
+  get: (k: string) => {
+    return store[k]
+  },
+  set: (k: string, v: T | undefined) => {
+    store[k] = v
+  },
+})
+
 export const usePersistentState = <T>(
   initial: T,
   persist?: PersistenceOptions<T>
@@ -103,6 +114,7 @@ export const usePersistentState = <T>(
     if (key != null && store != null) {
       store.set(key, state)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key, state])
 
   if (store?.readsUrl) {
@@ -116,6 +128,7 @@ export const usePersistentState = <T>(
         const savedValue = key != null ? store.get(key) : undefined
         setState(savedValue ?? initial)
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [router.isReady])
   }