Merge branch 'main' into austin/dc-hackathon

common/calculate.ts

@@ -210,7 +210,6 @@ export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
     }
   }
 
-  const netPayout = payout - loan
   const profit = payout + saleValue + redeemed - totalInvested
   const profitPercent = (profit / totalInvested) * 100
 
@@ -221,8 +220,8 @@ export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
 
   return {
     invested,
+    loan,
     payout,
-    netPayout,
     profit,
     profitPercent,
     totalShares,
@@ -233,8 +232,8 @@ export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
 export function getContractBetNullMetrics() {
   return {
     invested: 0,
+    loan: 0,
     payout: 0,
-    netPayout: 0,
     profit: 0,
     profitPercent: 0,
     totalShares: {} as { [outcome: string]: number },

common/charity.ts

@@ -576,7 +576,7 @@ Work towards sustainable, systemic change.`,
 
 If you would like to support our work, you can do so by getting involved or by donating.`,
   },
-    {
+  {
     name: 'CaRLA',
     website: 'https://carlaef.org/',
     photo: 'https://i.imgur.com/IsNVTOY.png',
@@ -589,6 +589,14 @@ CaRLA uses legal advocacy and education to ensure all cities comply with their o
 
 In addition to housing impact litigation, we provide free legal aid, education and workshops, counseling and advocacy to advocates, homeowners, small developers, and city and state government officials.`,
   },
+  {
+    name: 'Mriya',
+    website: 'https://mriya-ua.org/',
+    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.',
+  },
 ].map((charity) => {
   const slug = charity.name.toLowerCase().replace(/\s/g, '-')
   return {

common/contract-details.ts

@@ -30,7 +30,7 @@ export function contractTextDetails(contract: Contract) {
   const { closeTime, groupLinks } = contract
   const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract)
 
-  const groupHashtags = groupLinks?.slice(0, 5).map((g) => `#${g.name}`)
+  const groupHashtags = groupLinks?.map((g) => `#${g.name.replace(/ /g, '')}`)
 
   return (
     `${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +

common/post.ts

@@ -3,6 +3,7 @@ import { JSONContent } from '@tiptap/core'
 export type Post = {
   id: string
   title: string
+  subtitle: string
   content: JSONContent
   creatorId: string // User id
   createdTime: number
@@ -17,3 +18,4 @@ export type DateDoc = Post & {
 }
 
 export const MAX_POST_TITLE_LENGTH = 480
+export const MAX_POST_SUBTITLE_LENGTH = 480

common/util/color.ts

@@ -0,0 +1,24 @@
+export const interpolateColor = (color1: string, color2: string, p: number) => {
+  const rgb1 = parseInt(color1.replace('#', ''), 16)
+  const rgb2 = parseInt(color2.replace('#', ''), 16)
+
+  const [r1, g1, b1] = toArray(rgb1)
+  const [r2, g2, b2] = toArray(rgb2)
+
+  const q = 1 - p
+  const rr = Math.round(r1 * q + r2 * p)
+  const rg = Math.round(g1 * q + g2 * p)
+  const rb = Math.round(b1 * q + b2 * p)
+
+  const hexString = Number((rr << 16) + (rg << 8) + rb).toString(16)
+  const hex = `#${'0'.repeat(6 - hexString.length)}${hexString}`
+  return hex
+}
+
+function toArray(rgb: number) {
+  const r = rgb >> 16
+  const g = (rgb >> 8) % 256
+  const b = rgb % 256
+
+  return [r, g, b]
+}

common/util/parse.ts

@@ -86,6 +86,15 @@ export function richTextToString(text?: JSONContent) {
   dfs(newText, (current) => {
     if (current.marks?.some((m) => m.type === TiptapSpoiler.name)) {
       current.text = '[spoiler]'
+    } else if (current.type === 'image') {
+      current.text = '[Image]'
+      // This is a hack, I've no idea how to change a tiptap extenstion's schema
+      current.type = 'text'
+    } else if (current.type === 'iframe') {
+      const src = current.attrs?.['src'] ? current.attrs['src'] : ''
+      current.text = '[Iframe]' + (src ? ` url:${src}` : '')
+      // This is a hack, I've no idea how to change a tiptap extenstion's schema
+      current.type = 'text'
     }
   })
   return generateText(newText, exhibitExts)

functions/src/create-post.ts

@@ -3,7 +3,11 @@ import * as admin from 'firebase-admin'
 import { getUser } from './utils'
 import { slugify } from '../../common/util/slugify'
 import { randomString } from '../../common/util/random'
-import { Post, MAX_POST_TITLE_LENGTH } from '../../common/post'
+import {
+  Post,
+  MAX_POST_TITLE_LENGTH,
+  MAX_POST_SUBTITLE_LENGTH,
+} from '../../common/post'
 import { APIError, newEndpoint, validate } from './api'
 import { JSONContent } from '@tiptap/core'
 import { z } from 'zod'
@@ -36,6 +40,7 @@ const contentSchema: z.ZodType<JSONContent> = z.lazy(() =>
 
 const postSchema = z.object({
   title: z.string().min(1).max(MAX_POST_TITLE_LENGTH),
+  subtitle: z.string().min(1).max(MAX_POST_SUBTITLE_LENGTH),
   content: contentSchema,
   groupId: z.string().optional(),
 
@@ -48,10 +53,8 @@ const postSchema = z.object({
 
 export const createpost = newEndpoint({}, async (req, auth) => {
   const firestore = admin.firestore()
-  const { title, content, groupId, question, ...otherProps } = validate(
+  const { title, subtitle, content, groupId, question, ...otherProps } =
-    postSchema,
+    validate(postSchema, req.body)
-    req.body
-  )
 
   const creator = await getUser(auth.uid)
   if (!creator)
@@ -89,6 +92,7 @@ export const createpost = newEndpoint({}, async (req, auth) => {
     creatorId: creator.id,
     slug,
     title,
+    subtitle,
     createdTime: Date.now(),
     content: content,
     contractSlug,

functions/src/test-scheduled-function.ts

@@ -1,6 +1,6 @@
 import { APIError, newEndpoint } from './api'
-import { sendPortfolioUpdateEmailsToAllUsers } from './weekly-portfolio-emails'
 import { isProd } from './utils'
+import { sendTrendingMarketsEmailsToAllUsers } from 'functions/src/weekly-markets-emails'
 
 // Function for testing scheduled functions locally
 export const testscheduledfunction = newEndpoint(
@@ -10,7 +10,7 @@ export const testscheduledfunction = newEndpoint(
       throw new APIError(400, 'This function is only available in dev mode')
 
     // Replace your function here
-    await sendPortfolioUpdateEmailsToAllUsers()
+    await sendTrendingMarketsEmailsToAllUsers()
 
     return { success: true }
   }

functions/src/unsubscribe.ts

@@ -34,17 +34,20 @@ export const unsubscribe: EndpointDefinition = {
     const previousDestinations =
       user.notificationPreferences[notificationSubscriptionType]
 
+    let newDestinations = previousDestinations
+    if (wantsToOptOutAll) newDestinations.push('email')
+    else
+      newDestinations = previousDestinations.filter(
+        (destination) => destination !== 'email'
+      )
+
     console.log(previousDestinations)
     const { email } = user
 
     const update: Partial<PrivateUser> = {
       notificationPreferences: {
         ...user.notificationPreferences,
-        [notificationSubscriptionType]: wantsToOptOutAll
+        [notificationSubscriptionType]: newDestinations,
-          ? previousDestinations.push('email')
-          : previousDestinations.filter(
-              (destination) => destination !== 'email'
-            ),
       },
     }
 
@@ -60,7 +63,7 @@ export const unsubscribe: EndpointDefinition = {
       xmlns:o="urn:schemas-microsoft-com:office:office">
 
 <head>
-  <title>Manifold Markets 7th Day Anniversary Gift!</title>
+  <title>Unsubscribe from Manifold Markets emails</title>
   <!--[if !mso]><!-->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <!--<![endif]-->
@@ -213,7 +216,7 @@ export const unsubscribe: EndpointDefinition = {
       xmlns:o="urn:schemas-microsoft-com:office:office">
 
 <head>
-    <title>Manifold Markets 7th Day Anniversary Gift!</title>
+  <title>Unsubscribe from Manifold Markets emails</title>
     <!--[if !mso]><!-->
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--<![endif]-->

functions/src/weekly-markets-emails.ts

@@ -4,21 +4,24 @@ import * as admin from 'firebase-admin'
 import { Contract } from '../../common/contract'
 import {
   getAllPrivateUsers,
+  getGroup,
   getPrivateUser,
   getUser,
   getValues,
   isProd,
   log,
 } from './utils'
-import { sendInterestingMarketsEmail } from './emails'
 import { createRNG, shuffle } from '../../common/util/random'
-import { DAY_MS } from '../../common/util/time'
+import { DAY_MS, HOUR_MS } from '../../common/util/time'
 import { filterDefined } from '../../common/util/array'
+import { Follow } from '../../common/follow'
+import { countBy, uniq, uniqBy } from 'lodash'
+import { sendInterestingMarketsEmail } from './emails'
 
 export const weeklyMarketsEmails = functions
   .runWith({ secrets: ['MAILGUN_KEY'], memory: '4GB' })
-  // every minute on Monday for an hour at 12pm PT (UTC -07:00)
+  // every minute on Monday for 2 hours starting at 12pm PT (UTC -07:00)
-  .pubsub.schedule('* 19 * * 1')
+  .pubsub.schedule('* 19-20 * * 1')
   .timeZone('Etc/UTC')
   .onRun(async () => {
     await sendTrendingMarketsEmailsToAllUsers()
@@ -40,20 +43,30 @@ export async function getTrendingContracts() {
   )
 }
 
-async function sendTrendingMarketsEmailsToAllUsers() {
+export async function sendTrendingMarketsEmailsToAllUsers() {
   const numContractsToSend = 6
   const privateUsers = isProd()
     ? await getAllPrivateUsers()
-    : filterDefined([await getPrivateUser('6hHpzvRG0pMq8PNJs7RZj2qlZGn2')])
+    : filterDefined([
-  // get all users that haven't unsubscribed from weekly emails
+        await getPrivateUser('6hHpzvRG0pMq8PNJs7RZj2qlZGn2'), // dev Ian
+      ])
   const privateUsersToSendEmailsTo = privateUsers
-    .filter((user) => {
+    // Get all users that haven't unsubscribed from weekly emails
-      return (
+    .filter(
+      (user) =>
         user.notificationPreferences.trending_markets.includes('email') &&
         !user.weeklyTrendingEmailSent
-      )
+    )
-    })
+    .slice(0, 90) // Send the emails out in batches
-    .slice(150) // Send the emails out in batches
+
+  // For testing different users on prod: (only send ian an email though)
+  // const privateUsersToSendEmailsTo = filterDefined([
+  //   await getPrivateUser('AJwLWoo3xue32XIiAVrL5SyR1WB2'), // prod Ian
+  //   // isProd()
+  //   await getPrivateUser('FptiiMZZ6dQivihLI8MYFQ6ypSw1'), // prod Mik
+  //   //   : await getPrivateUser('6hHpzvRG0pMq8PNJs7RZj2qlZGn2'), // dev Ian
+  // ])
+
   log(
     'Sending weekly trending emails to',
     privateUsersToSendEmailsTo.length,
@@ -70,42 +83,358 @@ async function sendTrendingMarketsEmailsToAllUsers() {
         !contract.groupSlugs?.includes('manifold-features') &&
         !contract.groupSlugs?.includes('manifold-6748e065087e')
     )
-    .slice(0, 20)
+    .slice(0, 50)
-  log(
-    `Found ${trendingContracts.length} trending contracts:\n`,
-    trendingContracts.map((c) => c.question).join('\n ')
-  )
 
-  // TODO: convert to Promise.all
+  const uniqueTrendingContracts = removeSimilarQuestions(
-  for (const privateUser of privateUsersToSendEmailsTo) {
+    trendingContracts,
-    if (!privateUser.email) {
+    trendingContracts,
-      log(`No email for ${privateUser.username}`)
+    true
-      continue
+  ).slice(0, 20)
-    }
+
-    const contractsAvailableToSend = trendingContracts.filter((contract) => {
+  await Promise.all(
-      return !contract.uniqueBettorIds?.includes(privateUser.id)
+    privateUsersToSendEmailsTo.map(async (privateUser) => {
-    })
+      if (!privateUser.email) {
-    if (contractsAvailableToSend.length < numContractsToSend) {
+        log(`No email for ${privateUser.username}`)
-      log('not enough new, unbet-on contracts to send to user', privateUser.id)
+        return
-      await firestore.collection('private-users').doc(privateUser.id).update({
+      }
+
+      const unbetOnFollowedMarkets = await getUserUnBetOnFollowsMarkets(
+        privateUser.id
+      )
+      const unBetOnGroupMarkets = await getUserUnBetOnGroupsMarkets(
+        privateUser.id,
+        unbetOnFollowedMarkets
+      )
+      const similarBettorsMarkets = await getSimilarBettorsMarkets(
+        privateUser.id,
+        unBetOnGroupMarkets
+      )
+
+      const marketsAvailableToSend = uniqBy(
+        [
+          ...chooseRandomSubset(unbetOnFollowedMarkets, 2),
+          // // Most people will belong to groups but may not follow other users,
+          // so choose more from the other subsets if the followed markets is sparse
+          ...chooseRandomSubset(
+            unBetOnGroupMarkets,
+            unbetOnFollowedMarkets.length < 2 ? 3 : 2
+          ),
+          ...chooseRandomSubset(
+            similarBettorsMarkets,
+            unbetOnFollowedMarkets.length < 2 ? 3 : 2
+          ),
+        ],
+        (contract) => contract.id
+      )
+      // // at least send them trending contracts if nothing else
+      if (marketsAvailableToSend.length < numContractsToSend) {
+        const trendingMarketsToSend =
+          numContractsToSend - marketsAvailableToSend.length
+        log(
+          `not enough personalized markets, sending ${trendingMarketsToSend} trending`
+        )
+        marketsAvailableToSend.push(
+          ...removeSimilarQuestions(
+            uniqueTrendingContracts,
+            marketsAvailableToSend,
+            false
+          )
+            .filter(
+              (contract) => !contract.uniqueBettorIds?.includes(privateUser.id)
+            )
+            .slice(0, trendingMarketsToSend)
+        )
+      }
+
+      if (marketsAvailableToSend.length < numContractsToSend) {
+        log(
+          'not enough new, unbet-on contracts to send to user',
+          privateUser.id
+        )
+        await firestore.collection('private-users').doc(privateUser.id).update({
+          weeklyTrendingEmailSent: true,
+        })
+        return
+      }
+      // choose random subset of contracts to send to user
+      const contractsToSend = chooseRandomSubset(
+        marketsAvailableToSend,
+        numContractsToSend
+      )
+
+      const user = await getUser(privateUser.id)
+      if (!user) return
+
+      log(
+        'sending contracts:',
+        contractsToSend.map((c) => c.question + ' ' + c.popularityScore)
+      )
+      // if they don't have enough markets, find user bets and get the other bettor ids who most overlap on those markets, then do the same thing as above for them
+      await sendInterestingMarketsEmail(user, privateUser, contractsToSend)
+      await firestore.collection('private-users').doc(user.id).update({
         weeklyTrendingEmailSent: true,
       })
-      continue
-    }
-    // choose random subset of contracts to send to user
-    const contractsToSend = chooseRandomSubset(
-      contractsAvailableToSend,
-      numContractsToSend
-    )
-
-    const user = await getUser(privateUser.id)
-    if (!user) continue
-
-    await sendInterestingMarketsEmail(user, privateUser, contractsToSend)
-    await firestore.collection('private-users').doc(user.id).update({
-      weeklyTrendingEmailSent: true,
     })
-  }
+  )
+}
+
+const MINIMUM_POPULARITY_SCORE = 10
+
+const getUserUnBetOnFollowsMarkets = async (userId: string) => {
+  const follows = await getValues<Follow>(
+    firestore.collection('users').doc(userId).collection('follows')
+  )
+
+  const unBetOnContractsFromFollows = await Promise.all(
+    follows.map(async (follow) => {
+      const unresolvedContracts = await getValues<Contract>(
+        firestore
+          .collection('contracts')
+          .where('isResolved', '==', false)
+          .where('visibility', '==', 'public')
+          .where('creatorId', '==', follow.userId)
+          // can't use multiple inequality (/orderBy) operators on different fields,
+          // so have to filter for closed contracts separately
+          .orderBy('popularityScore', 'desc')
+          .limit(50)
+      )
+      // filter out contracts that have close times less than 6 hours from now
+      const openContracts = unresolvedContracts.filter(
+        (contract) => (contract?.closeTime ?? 0) > Date.now() + 6 * HOUR_MS
+      )
+
+      return openContracts.filter(
+        (contract) => !contract.uniqueBettorIds?.includes(userId)
+      )
+    })
+  )
+
+  const sortedMarkets = uniqBy(
+    unBetOnContractsFromFollows.flat(),
+    (contract) => contract.id
+  )
+    .filter(
+      (contract) =>
+        contract.popularityScore !== undefined &&
+        contract.popularityScore > MINIMUM_POPULARITY_SCORE
+    )
+    .sort((a, b) => (b.popularityScore ?? 0) - (a.popularityScore ?? 0))
+
+  const uniqueSortedMarkets = removeSimilarQuestions(
+    sortedMarkets,
+    sortedMarkets,
+    true
+  )
+
+  const topSortedMarkets = uniqueSortedMarkets.slice(0, 10)
+  // log(
+  //   'top 10 sorted markets by followed users',
+  //   topSortedMarkets.map((c) => c.question + ' ' + c.popularityScore)
+  // )
+  return topSortedMarkets
+}
+
+const getUserUnBetOnGroupsMarkets = async (
+  userId: string,
+  differentThanTheseContracts: Contract[]
+) => {
+  const snap = await firestore
+    .collectionGroup('groupMembers')
+    .where('userId', '==', userId)
+    .get()
+
+  const groupIds = filterDefined(
+    snap.docs.map((doc) => doc.ref.parent.parent?.id)
+  )
+  const groups = filterDefined(
+    await Promise.all(groupIds.map(async (groupId) => await getGroup(groupId)))
+  )
+  if (groups.length === 0) return []
+
+  const unBetOnContractsFromGroups = await Promise.all(
+    groups.map(async (group) => {
+      const unresolvedContracts = await getValues<Contract>(
+        firestore
+          .collection('contracts')
+          .where('isResolved', '==', false)
+          .where('visibility', '==', 'public')
+          .where('groupSlugs', 'array-contains', group.slug)
+          // can't use multiple inequality (/orderBy) operators on different fields,
+          // so have to filter for closed contracts separately
+          .orderBy('popularityScore', 'desc')
+          .limit(50)
+      )
+      // filter out contracts that have close times less than 6 hours from now
+      const openContracts = unresolvedContracts.filter(
+        (contract) => (contract?.closeTime ?? 0) > Date.now() + 6 * HOUR_MS
+      )
+
+      return openContracts.filter(
+        (contract) => !contract.uniqueBettorIds?.includes(userId)
+      )
+    })
+  )
+
+  const sortedMarkets = uniqBy(
+    unBetOnContractsFromGroups.flat(),
+    (contract) => contract.id
+  )
+    .filter(
+      (contract) =>
+        contract.popularityScore !== undefined &&
+        contract.popularityScore > MINIMUM_POPULARITY_SCORE
+    )
+    .sort((a, b) => (b.popularityScore ?? 0) - (a.popularityScore ?? 0))
+
+  const uniqueSortedMarkets = removeSimilarQuestions(
+    sortedMarkets,
+    sortedMarkets,
+    true
+  )
+  const topSortedMarkets = removeSimilarQuestions(
+    uniqueSortedMarkets,
+    differentThanTheseContracts,
+    false
+  ).slice(0, 10)
+
+  // log(
+  //   'top 10 sorted group markets',
+  //   topSortedMarkets.map((c) => c.question + ' ' + c.popularityScore)
+  // )
+  return topSortedMarkets
+}
+
+// Gets markets followed by similar bettors and bet on by similar bettors
+const getSimilarBettorsMarkets = async (
+  userId: string,
+  differentThanTheseContracts: Contract[]
+) => {
+  // get contracts with unique bettor ids with this user
+  const contractsUserHasBetOn = await getValues<Contract>(
+    firestore
+      .collection('contracts')
+      .where('uniqueBettorIds', 'array-contains', userId)
+  )
+  if (contractsUserHasBetOn.length === 0) return []
+  // count the number of times each unique bettor id appears on those contracts
+  const bettorIdsToCounts = countBy(
+    contractsUserHasBetOn.map((contract) => contract.uniqueBettorIds).flat(),
+    (bettorId) => bettorId
+  )
+
+  // sort by number of times they appear with at least 2 appearances
+  const sortedBettorIds = Object.entries(bettorIdsToCounts)
+    .sort((a, b) => b[1] - a[1])
+    .filter((bettorId) => bettorId[1] > 2)
+    .map((entry) => entry[0])
+    .filter((bettorId) => bettorId !== userId)
+
+  // get the top 10 most similar bettors (excluding this user)
+  const similarBettorIds = sortedBettorIds.slice(0, 10)
+  if (similarBettorIds.length === 0) return []
+
+  // get contracts with unique bettor ids with this user
+  const contractsSimilarBettorsHaveBetOn = uniqBy(
+    (
+      await getValues<Contract>(
+        firestore
+          .collection('contracts')
+          .where(
+            'uniqueBettorIds',
+            'array-contains-any',
+            similarBettorIds.slice(0, 10)
+          )
+          .orderBy('popularityScore', 'desc')
+          .limit(200)
+      )
+    ).filter(
+      (contract) =>
+        !contract.uniqueBettorIds?.includes(userId) &&
+        (contract.popularityScore ?? 0) > MINIMUM_POPULARITY_SCORE
+    ),
+    (contract) => contract.id
+  )
+
+  // sort the contracts by how many times similar bettor ids are in their unique bettor ids array
+  const sortedContractsInSimilarBettorsBets = contractsSimilarBettorsHaveBetOn
+    .map((contract) => {
+      const appearances = contract.uniqueBettorIds?.filter((bettorId) =>
+        similarBettorIds.includes(bettorId)
+      ).length
+      return [contract, appearances] as [Contract, number]
+    })
+    .sort((a, b) => b[1] - a[1])
+    .map((entry) => entry[0])
+
+  const uniqueSortedContractsInSimilarBettorsBets = removeSimilarQuestions(
+    sortedContractsInSimilarBettorsBets,
+    sortedContractsInSimilarBettorsBets,
+    true
+  )
+
+  const topMostSimilarContracts = removeSimilarQuestions(
+    uniqueSortedContractsInSimilarBettorsBets,
+    differentThanTheseContracts,
+    false
+  ).slice(0, 10)
+
+  // log(
+  //   'top 10 sorted contracts other similar bettors have bet on',
+  //   topMostSimilarContracts.map((c) => c.question)
+  // )
+
+  return topMostSimilarContracts
+}
+
+// search contract array by question and remove contracts with 3 matching words in the question
+const removeSimilarQuestions = (
+  contractsToFilter: Contract[],
+  byContracts: Contract[],
+  allowExactSameContracts: boolean
+) => {
+  // log(
+  //   'contracts to filter by',
+  //   byContracts.map((c) => c.question + ' ' + c.popularityScore)
+  // )
+  let contractsToRemove: Contract[] = []
+  byContracts.length > 0 &&
+    byContracts.forEach((contract) => {
+      const contractQuestion = stripNonAlphaChars(
+        contract.question.toLowerCase()
+      )
+      const contractQuestionWords = uniq(contractQuestion.split(' ')).filter(
+        (w) => !IGNORE_WORDS.includes(w)
+      )
+      contractsToRemove = contractsToRemove.concat(
+        contractsToFilter.filter(
+          // Remove contracts with more than 2 matching (uncommon) words and a lower popularity score
+          (c2) => {
+            const significantOverlap =
+              // TODO: we should probably use a library for comparing strings/sentiments
+              uniq(
+                stripNonAlphaChars(c2.question.toLowerCase()).split(' ')
+              ).filter((word) => contractQuestionWords.includes(word)).length >
+              2
+            const lessPopular =
+              (c2.popularityScore ?? 0) < (contract.popularityScore ?? 0)
+            return (
+              (significantOverlap && lessPopular) ||
+              (allowExactSameContracts ? false : c2.id === contract.id)
+            )
+          }
+        )
+      )
+    })
+  // log(
+  //   'contracts to filter out',
+  //   contractsToRemove.map((c) => c.question)
+  // )
+
+  const returnContracts = contractsToFilter.filter(
+    (cf) => !contractsToRemove.map((c) => c.id).includes(cf.id)
+  )
+
+  return returnContracts
 }
 
 const fiveMinutes = 5 * 60 * 1000
@@ -116,3 +445,40 @@ function chooseRandomSubset(contracts: Contract[], count: number) {
   shuffle(contracts, rng)
   return contracts.slice(0, count)
 }
+
+function stripNonAlphaChars(str: string) {
+  return str.replace(/[^\w\s']|_/g, '').replace(/\s+/g, ' ')
+}
+
+const IGNORE_WORDS = [
+  'the',
+  'a',
+  'an',
+  'and',
+  'or',
+  'of',
+  'to',
+  'in',
+  'on',
+  'will',
+  'be',
+  'is',
+  'are',
+  'for',
+  'by',
+  'at',
+  'from',
+  'what',
+  'when',
+  'which',
+  'that',
+  'it',
+  'as',
+  'if',
+  'then',
+  'than',
+  'but',
+  'have',
+  'has',
+  'had',
+]

og-image/api/_lib/template.ts

@@ -14,11 +14,6 @@ export function getHtml(parsedReq: ParsedRequest) {
     numericValue,
     resolution,
   } = parsedReq
-  const MAX_QUESTION_CHARS = 100
-  const truncatedQuestion =
-    question.length > MAX_QUESTION_CHARS
-      ? question.slice(0, MAX_QUESTION_CHARS) + '...'
-      : question
   const hideAvatar = creatorAvatarUrl ? '' : 'hidden'
 
   let resolutionColor = 'text-primary'
@@ -69,7 +64,7 @@ export function getHtml(parsedReq: ParsedRequest) {
         <meta charset="utf-8">
         <title>Generated Image</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://cdn.tailwindcss.com"></script>
+        <script src="https://cdn.tailwindcss.com?plugins=line-clamp"></script>
     </head>
     <style>
         ${getTemplateCss(theme, fontSize)}
@@ -109,8 +104,8 @@ export function getHtml(parsedReq: ParsedRequest) {
       </div>
 
       <div class="flex flex-row justify-between gap-12 pt-36">
-        <div class="text-indigo-700 text-6xl leading-tight">
+        <div class="text-indigo-700 text-6xl leading-tight line-clamp-4">
-          ${truncatedQuestion}
+          ${question}
         </div>
         <div class="flex flex-col">
                     ${
@@ -127,7 +122,7 @@ export function getHtml(parsedReq: ParsedRequest) {
 
       <!-- Metadata -->
       <div class="absolute bottom-16">
-        <div class="text-gray-500 text-3xl max-w-[80vw]">
+        <div class="text-gray-500 text-3xl max-w-[80vw] line-clamp-2">
           ${metadata}
         </div>
       </div>

package.json

@@ -24,8 +24,5 @@
     "prettier": "2.7.1",
     "ts-node": "10.9.1",
     "typescript": "4.8.2"
-  },
-  "resolutions": {
-    "@types/react": "17.0.43"
   }
 }

web/components/SEO.tsx

@@ -15,7 +15,7 @@ export function SEO(props: {
 
   return (
     <Head>
-      <title>{title} | Manifold Markets</title>
+      <title>{`${title} | Manifold Markets`}</title>
 
       <meta
         property="og:title"

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

@@ -192,6 +192,7 @@ export function AnswerBetPanel(props: {
           isSubmitting={isSubmitting}
           disabled={!!betDisabled}
           color={'indigo'}
+          actionLabel="Buy"
         />
       ) : (
         <BetSignUpPrompt />

web/components/answers/answers-panel.tsx

@@ -20,11 +20,11 @@ import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 import { Linkify } from 'web/components/linkify'
-import { BuyButton } from 'web/components/yes-no-selector'
-import { UserLink } from 'web/components/user-link'
 import { Button } from 'web/components/button'
 import { useAdmin } from 'web/hooks/use-admin'
 import { needsAdminToResolve } from 'web/pages/[username]/[contractSlug]'
+import { CATEGORY_COLORS } from '../charts/contract/choice'
+import { useChartAnswers } from '../charts/contract/choice'
 
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
@@ -38,6 +38,7 @@ export function AnswersPanel(props: {
   const answers = (useAnswers(contract.id) ?? contract.answers).filter(
     (a) => a.number != 0 || contract.outcomeType === 'MULTIPLE_CHOICE'
   )
+
   const hasZeroBetAnswers = answers.some((answer) => totalBets[answer.id] < 1)
 
   const [winningAnswers, losingAnswers] = partition(
@@ -104,6 +105,10 @@ export function AnswersPanel(props: {
     ? 'checkbox'
     : undefined
 
+  const colorSortedAnswer = useChartAnswers(contract).map(
+    (value, _index) => value.text
+  )
+
   return (
     <Col className="gap-3">
       {(resolveOption || resolution) &&
@@ -128,7 +133,12 @@ export function AnswersPanel(props: {
           )}
         >
           {answerItems.map((item) => (
-            <OpenAnswer key={item.id} answer={item} contract={contract} />
+            <OpenAnswer
+              key={item.id}
+              answer={item}
+              contract={contract}
+              colorIndex={colorSortedAnswer.indexOf(item.text)}
+            />
           ))}
           {hasZeroBetAnswers && !showAllAnswers && (
             <Button
@@ -174,15 +184,18 @@ export function AnswersPanel(props: {
 function OpenAnswer(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   answer: Answer
+  colorIndex: number | undefined
 }) {
-  const { answer, contract } = props
+  const { answer, contract, colorIndex } = props
-  const { username, avatarUrl, name, text } = answer
+  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 ? CATEGORY_COLORS[colorIndex] : '#B1B1C7'
 
   return (
-    <Col className="border-base-200 bg-base-200 relative flex-1 rounded-md px-2">
+    <Col className="my-1 px-2">
       <Modal open={open} setOpen={setOpen} position="center">
         <AnswerBetPanel
           answer={answer}
@@ -193,40 +206,44 @@ function OpenAnswer(props: {
         />
       </Modal>
 
-      <div
+      <Col
-        className="pointer-events-none absolute -mx-2 h-full rounded-tl-md bg-green-600 bg-opacity-10"
+        className={clsx(
-        style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
+          'bg-greyscale-1 relative w-full rounded-lg transition-all',
-      />
+          tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5'
-
+        )}
-      <Row className="my-4 gap-3">
+      >
-        <Avatar className="mx-1" username={username} avatarUrl={avatarUrl} />
+        <Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">
-        <Col className="min-w-0 flex-1 lg:gap-1">
+          <Row>
-          <div className="text-sm text-gray-500">
+            <Avatar
-            <UserLink username={username} name={name} /> answered
+              className="mt-0.5 mr-2 inline h-5 w-5 border border-transparent transition-transform hover:border-none"
-          </div>
+              username={username}
-
+              avatarUrl={avatarUrl}
-          <Col className="align-items justify-between gap-4 sm:flex-row">
+            />
-            <Linkify className="whitespace-pre-line text-lg" text={text} />
+            <Linkify
-            <Row className="align-items items-center justify-end gap-4">
+              className="text-md cursor-pointer whitespace-pre-line"
-              <span
+              text={text}
-                className={clsx(
+            />
-                  'text-2xl',
+          </Row>
-                  tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
+          <Row className="gap-2">
-                )}
+            <div className="my-auto text-xl">{probPercent}</div>
-              >
+            {tradingAllowed(contract) && (
-                {probPercent}
+              <Button
-              </span>
+                size="2xs"
-              <BuyButton
+                color="gray-outline"
-                className={clsx(
-                  'btn-sm flex-initial !px-6 sm:flex',
-                  tradingAllowed(contract) ? '' : '!hidden'
-                )}
                 onClick={() => setOpen(true)}
-              />
+                className="my-auto"
-            </Row>
+              >
-          </Col>
+                BUY
-        </Col>
+              </Button>
-      </Row>
+            )}
+          </Row>
+        </Row>
+        <hr
+          color={color}
+          className="absolute z-0 h-full w-full rounded-l-lg border-none opacity-30"
+          style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
+        />
+      </Col>
     </Col>
   )
 }

web/components/arrange-home.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 import { MenuIcon } from '@heroicons/react/solid'
 import { toast } from 'react-hot-toast'
 

web/components/auth-context.tsx

@@ -68,11 +68,11 @@ export function AuthProvider(props: {
   }, [setAuthUser, serverUser])
 
   useEffect(() => {
-    if (authUser != null) {
+    if (authUser) {
       // Persist to local storage, to reduce login blink next time.
       // Note: Cap on localStorage size is ~5mb
       localStorage.setItem(CACHED_USER_KEY, JSON.stringify(authUser))
-    } else {
+    } else if (authUser === null) {
       localStorage.removeItem(CACHED_USER_KEY)
     }
   }, [authUser])

web/components/bet-panel.tsx

@@ -25,7 +25,7 @@ import {
   NoLabel,
   YesLabel,
 } from './outcome-label'
-import { getProbability } from 'common/calculate'
+import { getContractBetMetrics, getProbability } from 'common/calculate'
 import { useFocus } from 'web/hooks/use-focus'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { calculateCpmmSale, getCpmmProbability } from 'common/calculate-cpmm'
@@ -395,6 +395,7 @@ export function BuyPanel(props: {
             disabled={!!betDisabled || outcome === undefined}
             size="xl"
             color={outcome === 'NO' ? 'red' : 'green'}
+            actionLabel="Wager"
           />
         )}
         <button
@@ -831,13 +832,21 @@ export function SellPanel(props: {
 
   const unfilledBets = useUnfilledBets(contract.id) ?? []
 
-  const betDisabled = isSubmitting || !amount || error
+  const betDisabled = isSubmitting || !amount || error !== undefined
 
   // Sell all shares if remaining shares would be < 1
   const isSellingAllShares = amount === Math.floor(shares)
 
   const sellQuantity = isSellingAllShares ? shares : amount
 
+  const loanAmount = sumBy(userBets, (bet) => bet.loanAmount ?? 0)
+  const soldShares = Math.min(sellQuantity ?? 0, shares)
+  const saleFrac = soldShares / shares
+  const loanPaid = saleFrac * loanAmount
+
+  const { invested } = getContractBetMetrics(contract, userBets)
+  const costBasis = invested * saleFrac
+
   async function submitSell() {
     if (!user || !amount) return
 
@@ -882,8 +891,23 @@ export function SellPanel(props: {
     sharesOutcome,
     unfilledBets
   )
+  const netProceeds = saleValue - loanPaid
+  const profit = saleValue - costBasis
   const resultProb = getCpmmProbability(cpmmState.pool, cpmmState.p)
 
+  const getValue = getMappedValue(contract)
+  const rawDifference = Math.abs(getValue(resultProb) - getValue(initialProb))
+  const displayedDifference =
+    contract.outcomeType === 'PSEUDO_NUMERIC'
+      ? formatLargeNumber(rawDifference)
+      : formatPercent(rawDifference)
+  const probChange = Math.abs(resultProb - initialProb)
+
+  const warning =
+    probChange >= 0.3
+      ? `Are you sure you want to move the market by ${displayedDifference}?`
+      : undefined
+
   const openUserBets = userBets.filter((bet) => !bet.isSold && !bet.sale)
   const [yesBets, noBets] = partition(
     openUserBets,
@@ -923,14 +947,18 @@ export function SellPanel(props: {
         label="Qty"
         error={error}
         disabled={isSubmitting}
-        inputClassName="w-full"
+        inputClassName="w-full ml-1"
       />
 
       <Col className="mt-3 w-full gap-3 text-sm">
         <Row className="items-center justify-between gap-2 text-gray-500">
-          Sale proceeds
+          Sale amount
           <span className="text-neutral">{formatMoney(saleValue)}</span>
         </Row>
+        <Row className="items-center justify-between gap-2 text-gray-500">
+          Profit
+          <span className="text-neutral">{formatMoney(profit)}</span>
+        </Row>
         <Row className="items-center justify-between">
           <div className="text-gray-500">
             {isPseudoNumeric ? 'Estimated value' : 'Probability'}
@@ -941,24 +969,33 @@ export function SellPanel(props: {
             {format(resultProb)}
           </div>
         </Row>
+        {loanPaid !== 0 && (
+          <>
+            <Row className="mt-6 items-center justify-between gap-2 text-gray-500">
+              Loan payment
+              <span className="text-neutral">{formatMoney(-loanPaid)}</span>
+            </Row>
+            <Row className="items-center justify-between gap-2 text-gray-500">
+              Net proceeds
+              <span className="text-neutral">{formatMoney(netProceeds)}</span>
+            </Row>
+          </>
+        )}
       </Col>
 
       <Spacer h={8} />
 
-      <button
+      <WarningConfirmationButton
-        className={clsx(
+        marketType="binary"
-          'btn flex-1',
+        amount={undefined}
-          betDisabled
+        warning={warning}
-            ? 'btn-disabled'
+        isSubmitting={isSubmitting}
-            : sharesOutcome === 'YES'
+        onSubmit={betDisabled ? undefined : submitSell}
-            ? 'btn-primary'
+        disabled={!!betDisabled}
-            : 'border-none bg-red-400 hover:bg-red-500',
+        size="xl"
-          isSubmitting ? 'loading' : ''
+        color="blue"
-        )}
+        actionLabel={`Sell ${Math.floor(soldShares)} shares`}
-        onClick={betDisabled ? undefined : submitSell}
+      />
-      >
-        {isSubmitting ? 'Submitting...' : 'Submit sell'}
-      </button>
 
       {wasSubmitted && <div className="mt-4">Sell submitted!</div>}
     </>

web/components/bets-list.tsx

@@ -160,26 +160,31 @@ export function BetsList(props: { user: User }) {
     unsettled,
     (c) => contractsMetrics[c.id].payout
   )
-  const currentNetInvestment = sumBy(
+  const currentLoan = sumBy(unsettled, (c) => contractsMetrics[c.id].loan)
-    unsettled,
-    (c) => contractsMetrics[c.id].netPayout
-  )
 
   const investedProfitPercent =
     ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100
 
   return (
     <Col>
-      <Row className="justify-between gap-4 sm:flex-row">
+      <Col className="justify-between gap-4 sm:flex-row">
-        <Col>
+        <Row className="gap-4">
-          <div className="text-greyscale-6 text-xs sm:text-sm">
+          <Col>
-            Investment value
+            <div className="text-greyscale-6 text-xs sm:text-sm">
-          </div>
+              Investment value
-          <div className="text-lg">
+            </div>
-            {formatMoney(currentNetInvestment)}{' '}
+            <div className="text-lg">
-            <ProfitBadge profitPercent={investedProfitPercent} />
+              {formatMoney(currentBetsValue)}{' '}
-          </div>
+              <ProfitBadge profitPercent={investedProfitPercent} />
-        </Col>
+            </div>
+          </Col>
+          <Col>
+            <div className="text-greyscale-6 text-xs sm:text-sm">
+              Total loans
+            </div>
+            <div className="text-lg">{formatMoney(currentLoan)}</div>
+          </Col>
+        </Row>
 
         <Row className="gap-2">
           <select
@@ -206,7 +211,7 @@ export function BetsList(props: { user: User }) {
             <option value="closeTime">Close date</option>
           </select>
         </Row>
-      </Row>
+      </Col>
 
       <Col className="mt-6 divide-y">
         {displayedContracts.length === 0 ? (
@@ -612,7 +617,7 @@ function SellButton(props: {
         label: 'Sell',
         disabled: isSubmitting,
       }}
-      submitBtn={{ className: 'btn-primary', label: 'Sell' }}
+      submitBtn={{ label: 'Sell', color: 'green' }}
       onSubmit={async () => {
         setIsSubmitting(true)
         await sellBet({ contractId: contract.id, betId: bet.id })

web/components/button.tsx

@@ -10,16 +10,54 @@ export type ColorType =
   | 'indigo'
   | 'yellow'
   | 'gray'
+  | 'gray-outline'
   | 'gradient'
   | 'gray-white'
   | 'highlight-blue'
 
+const sizeClasses = {
+  '2xs': 'px-2 py-1 text-xs',
+  xs: 'px-2.5 py-1.5 text-sm',
+  sm: 'px-3 py-2 text-sm',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-4 py-2 text-base',
+  xl: 'px-6 py-2.5 text-base font-semibold',
+  '2xl': 'px-6 py-3 text-xl font-semibold',
+}
+
+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',
+    sizeClasses[size],
+    color === 'green' &&
+      'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
+    color === 'red' &&
+      'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
+    color === 'yellow' &&
+      'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
+    color === 'blue' &&
+      'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
+    color === 'indigo' &&
+      'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
+    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',
+    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',
+    color === 'gray-white' &&
+      'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
+    color === 'highlight-blue' &&
+      'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
+  )
+}
+
 export function Button(props: {
   className?: string
   onClick?: MouseEventHandler<any> | undefined
   children?: ReactNode
   size?: SizeType
-  color?: ColorType
+  color?: ColorType | 'override'
   type?: 'button' | 'reset' | 'submit'
   disabled?: boolean
   loading?: boolean
@@ -35,42 +73,10 @@ export function Button(props: {
     loading,
   } = props
 
-  const sizeClasses = {
-    '2xs': 'px-2 py-1 text-xs',
-    xs: 'px-2.5 py-1.5 text-sm',
-    sm: 'px-3 py-2 text-sm',
-    md: 'px-4 py-2 text-sm',
-    lg: 'px-4 py-2 text-base',
-    xl: 'px-6 py-2.5 text-base font-semibold',
-    '2xl': 'px-6 py-3 text-xl font-semibold',
-  }[size]
-
   return (
     <button
       type={type}
-      className={clsx(
+      className={clsx(buttonClass(size, color), className)}
-        'font-md items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
-        sizeClasses,
-        color === 'green' &&
-          'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
-        color === 'red' &&
-          'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
-        color === 'yellow' &&
-          'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
-        color === 'blue' &&
-          'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
-        color === 'indigo' &&
-          'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
-        color === 'gray' &&
-          'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 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',
-        color === 'gray-white' &&
-          'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
-        color === 'highlight-blue' &&
-          'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none',
-        className
-      )}
       disabled={disabled || loading}
       onClick={onClick}
     >

web/components/card.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+
+export function Card(props: JSX.IntrinsicElements['div']) {
+  const { children, className, ...rest } = props
+  return (
+    <div
+      className={clsx(
+        'cursor-pointer rounded-lg border-2 bg-white transition-shadow hover:shadow-md focus:shadow-md',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -1,8 +1,7 @@
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import React, { useEffect, useState } from 'react'
-import { LinkIcon, SwitchVerticalIcon } from '@heroicons/react/outline'
+import { SwitchVerticalIcon } from '@heroicons/react/outline'
-import toast from 'react-hot-toast'
 
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
@@ -16,7 +15,6 @@ import { SiteLink } from 'web/components/site-link'
 import { formatMoney } from 'common/util/format'
 import { NoLabel, YesLabel } from '../outcome-label'
 import { QRCode } from '../qr-code'
-import { copyToClipboard } from 'web/lib/util/copy'
 import { AmountInput } from '../amount-input'
 import { getProbability } from 'common/calculate'
 import { createMarket } from 'web/lib/firebase/api'
@@ -26,6 +24,7 @@ import Textarea from 'react-expanding-textarea'
 import { useTextEditor } from 'web/components/editor'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import { track } from 'web/lib/service/analytics'
+import { CopyLinkButton } from '../copy-link-button'
 
 type challengeInfo = {
   amount: number
@@ -302,16 +301,7 @@ function CreateChallengeForm(props: {
           <Title className="!my-0" text="Challenge Created!" />
 
           <div>Share the challenge using the link.</div>
-          <button
+          <CopyLinkButton url={challengeSlug} />
-            onClick={() => {
-              copyToClipboard(challengeSlug)
-              toast('Link copied to clipboard!')
-            }}
-            className={'btn btn-outline mb-4 whitespace-nowrap normal-case'}
-          >
-            <LinkIcon className={'mr-2 h-5 w-5'} />
-            Copy link
-          </button>
 
           <QRCode url={challengeSlug} className="self-center" />
           <Row className={'gap-1 text-gray-500'}>

web/components/charity/charity-card.tsx

@@ -6,6 +6,8 @@ import { Charity } from 'common/charity'
 import { useCharityTxns } from 'web/hooks/use-charity-txns'
 import { manaToUSD } from '../../../common/util/format'
 import { Row } from '../layout/row'
+import { Col } from '../layout/col'
+import { Card } from '../card'
 
 export function CharityCard(props: { charity: Charity; match?: number }) {
   const { charity } = props
@@ -15,43 +17,44 @@ export function CharityCard(props: { charity: Charity; match?: number }) {
   const raised = sumBy(txns, (txn) => txn.amount)
 
   return (
-    <Link href={`/charity/${slug}`} passHref>
+    <Link href={`/charity/${slug}`}>
-      <div className="card card-compact transition:shadow flex-1 cursor-pointer border-2 bg-white hover:shadow-md">
+      <a className="flex-1">
-        <Row className="mt-6 mb-2">
+        <Card className="!rounded-2xl">
-          {tags?.includes('Featured') && <FeaturedBadge />}
+          <Row className="mt-6 mb-2">
-        </Row>
+            {tags?.includes('Featured') && <FeaturedBadge />}
-        <div className="px-8">
+          </Row>
-          <figure className="relative h-32">
+          <div className="px-8">
-            {photo ? (
+            <figure className="relative h-32">
-              <Image src={photo} alt="" layout="fill" objectFit="contain" />
+              {photo ? (
-            ) : (
+                <Image src={photo} alt="" layout="fill" objectFit="contain" />
-              <div className="h-full w-full bg-gradient-to-r from-slate-300 to-indigo-200" />
+              ) : (
-            )}
+                <div className="h-full w-full bg-gradient-to-r from-slate-300 to-indigo-200" />
-          </figure>
+              )}
-        </div>
+            </figure>
-        <div className="card-body">
+          </div>
-          {/* <h3 className="card-title line-clamp-3">{name}</h3> */}
+          <Col className="p-8">
-          <div className="line-clamp-4 text-sm">{preview}</div>
+            <div className="line-clamp-4 text-sm">{preview}</div>
-          {raised > 0 && (
+            {raised > 0 && (
-            <>
+              <>
-              <Row className="mt-4 flex-1 items-end justify-center gap-6 text-gray-900">
+                <Row className="mt-4 flex-1 items-end justify-center gap-6 text-gray-900">
-                <Row className="items-baseline gap-1">
+                  <Row className="items-baseline gap-1">
-                  <span className="text-3xl font-semibold">
+                    <span className="text-3xl font-semibold">
-                    {formatUsd(raised)}
+                      {formatUsd(raised)}
-                  </span>
+                    </span>
-                  raised
+                    raised
-                </Row>
+                  </Row>
-                {/* {match && (
+                  {/* {match && (
                   <Col className="text-gray-500">
                     <span className="text-xl">+{formatUsd(match)}</span>
                     <span className="">match</span>
                   </Col>
                 )} */}
-              </Row>
+                </Row>
-            </>
+              </>
-          )}
+            )}
-        </div>
+          </Col>
-      </div>
+        </Card>
+      </a>
     </Link>
   )
 }

web/components/charts/contract/binary.tsx

@@ -31,9 +31,9 @@ const getBetPoints = (bets: Bet[]) => {
 }
 
 const BinaryChartTooltip = (props: TooltipProps<Date, HistoryPoint<Bet>>) => {
-  const { data, mouseX, xScale } = props
+  const { data, x, xScale } = props
   const [start, end] = xScale.domain()
-  const d = xScale.invert(mouseX)
+  const d = xScale.invert(x)
   return (
     <Row className="items-center gap-2">
       {data.obj && <Avatar size="xs" avatarUrl={data.obj.userAvatarUrl} />}

web/components/charts/contract/choice.tsx

@@ -19,62 +19,59 @@ import { MultiPoint, MultiValueHistoryChart } from '../generic-charts'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
-// thanks to https://observablehq.com/@jonhelfman/optimal-orders-for-choosing-categorical-colors
+export const CATEGORY_COLORS = [
-const CATEGORY_COLORS = [
+  '#7eb0d5',
-  '#00b8dd',
+  '#fd7f6f',
-  '#eecafe',
+  '#b2e061',
-  '#874c62',
+  '#bd7ebe',
-  '#6457ca',
+  '#ffb55a',
-  '#f773ba',
+  '#ffee65',
-  '#9c6bbc',
+  '#beb9db',
-  '#a87744',
+  '#fdcce5',
-  '#af8a04',
+  '#8bd3c7',
-  '#bff9aa',
+  '#bddfb7',
-  '#f3d89d',
+  '#e2e3f3',
-  '#c9a0f5',
+  '#fafafa',
-  '#ff00e5',
+  '#9fcdeb',
-  '#9dc6f7',
+  '#d3d3d3',
-  '#824475',
+  '#b1a296',
-  '#d973cc',
+  '#e1bdb6',
-  '#bc6808',
+  '#f2dbc0',
-  '#056e70',
+  '#fae5d3',
-  '#677932',
+  '#c5e0ec',
-  '#00b287',
+  '#e0f0ff',
-  '#c8ab6c',
+  '#ffddcd',
-  '#a2fb7a',
+  '#fbd5e2',
-  '#f8db68',
+  '#f2e7e5',
-  '#14675a',
+  '#ffe7ba',
-  '#8288f4',
+  '#eed9c4',
-  '#fe1ca0',
+  '#ea9999',
-  '#ad6aff',
+  '#f9cb9c',
-  '#786306',
+  '#ffe599',
-  '#9bfbaf',
+  '#b6d7a8',
-  '#b00cf7',
+  '#a2c4c9',
-  '#2f7ec5',
+  '#9fc5e8',
-  '#4b998b',
+  '#b4a7d6',
-  '#42fa0e',
+  '#d5a6bd',
-  '#5b80a1',
+  '#e06666',
-  '#962d9d',
+  '#f6b26b',
-  '#3385ff',
+  '#ffd966',
-  '#48c5ab',
+  '#93c47d',
-  '#b2c873',
+  '#76a5af',
-  '#4cf9a4',
+  '#6fa8dc',
-  '#00ffff',
+  '#8e7cc3',
-  '#3cca73',
+  '#c27ba0',
-  '#99ae17',
+  '#cc0000',
-  '#7af5cf',
+  '#e69138',
-  '#52af45',
+  '#f1c232',
-  '#fbb80f',
+  '#6aa84f',
-  '#29971b',
+  '#45818e',
-  '#187c9a',
+  '#3d85c6',
-  '#00d539',
+  '#674ea7',
-  '#bbfa1a',
+  '#a64d79',
-  '#61f55c',
+  '#990000',
-  '#cabc03',
+  '#b45f06',
-  '#ff9000',
+  '#bf9000',
-  '#779100',
-  '#bcfd6f',
-  '#70a560',
 ]
 
 const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
@@ -144,6 +141,15 @@ const Legend = (props: { className?: string; items: LegendItem[] }) => {
   )
 }
 
+export function useChartAnswers(
+  contract: FreeResponseContract | MultipleChoiceContract
+) {
+  return useMemo(
+    () => getTrackedAnswers(contract, CATEGORY_COLORS.length),
+    [contract]
+  )
+}
+
 export const ChoiceContractChart = (props: {
   contract: FreeResponseContract | MultipleChoiceContract
   bets: Bet[]
@@ -153,10 +159,7 @@ export const ChoiceContractChart = (props: {
 }) => {
   const { contract, bets, width, height, onMouseOver } = props
   const [start, end] = getDateRange(contract)
-  const answers = useMemo(
+  const answers = useChartAnswers(contract)
-    () => getTrackedAnswers(contract, CATEGORY_COLORS.length),
-    [contract]
-  )
   const betPoints = useMemo(() => getBetPoints(answers, bets), [answers, bets])
   const data = useMemo(
     () => [
@@ -180,9 +183,9 @@ export const ChoiceContractChart = (props: {
 
   const ChoiceTooltip = useMemo(
     () => (props: TooltipProps<Date, MultiPoint<Bet>>) => {
-      const { data, mouseX, xScale } = props
+      const { data, x, xScale } = props
       const [start, end] = xScale.domain()
-      const d = xScale.invert(mouseX)
+      const d = xScale.invert(x)
       const legendItems = sortBy(
         data.y.map((p, i) => ({
           color: CATEGORY_COLORS[i],

web/components/charts/contract/numeric.tsx

@@ -26,11 +26,11 @@ const getNumericChartData = (contract: NumericContract) => {
 const NumericChartTooltip = (
   props: TooltipProps<number, DistributionPoint>
 ) => {
-  const { data, mouseX, xScale } = props
+  const { data, x, xScale } = props
-  const x = xScale.invert(mouseX)
+  const amount = xScale.invert(x)
   return (
     <>
-      <span className="text-semibold">{formatLargeNumber(x)}</span>
+      <span className="text-semibold">{formatLargeNumber(amount)}</span>
       <span className="text-greyscale-6">{formatPct(data.y, 2)}</span>
     </>
   )

web/components/charts/contract/pseudo-numeric.tsx

@@ -45,9 +45,9 @@ const getBetPoints = (bets: Bet[], scaleP: (p: number) => number) => {
 const PseudoNumericChartTooltip = (
   props: TooltipProps<Date, HistoryPoint<Bet>>
 ) => {
-  const { data, mouseX, xScale } = props
+  const { data, x, xScale } = props
   const [start, end] = xScale.domain()
-  const d = xScale.invert(mouseX)
+  const d = xScale.invert(x)
   return (
     <Row className="items-center gap-2">
       {data.obj && <Avatar size="xs" avatarUrl={data.obj.userAvatarUrl} />}

web/components/charts/generic-charts.tsx

@@ -7,6 +7,8 @@ import {
   CurveFactory,
   SeriesPoint,
   curveLinear,
+  curveStepBefore,
+  curveStepAfter,
   stack,
   stackOrderReverse,
 } from 'd3-shape'
@@ -19,6 +21,8 @@ import {
   AreaPath,
   AreaWithTopStroke,
   Point,
+  SliceMarker,
+  TooltipParams,
   TooltipComponent,
   computeColorStops,
   formatPct,
@@ -32,21 +36,42 @@ export type HistoryPoint<T = unknown> = Point<Date, number, T>
 export type DistributionPoint<T = unknown> = Point<number, number, T>
 export type ValueKind = 'm$' | 'percent' | 'amount'
 
+type SliceExtent = { y0: number; y1: number }
+
+const interpolateY = (
+  curve: CurveFactory,
+  x: number,
+  x0: number,
+  x1: number,
+  y0: number,
+  y1: number
+) => {
+  if (curve === curveLinear) {
+    const p = (x - x0) / (x1 - x0)
+    return y0 * (1 - p) + y1 * p
+  } else if (curve === curveStepAfter) {
+    return y0
+  } else if (curve === curveStepBefore) {
+    return y1
+  }
+}
+
 const getTickValues = (min: number, max: number, n: number) => {
   const step = (max - min) / (n - 1)
   return [min, ...range(1, n - 1).map((i) => min + step * i), max]
 }
 
-const betAtPointSelector = <X, Y, P extends Point<X, Y>>(
+const dataAtPointSelector = <X, Y, P extends Point<X, Y>>(
   data: P[],
   xScale: ContinuousScale<X>
 ) => {
   const bisect = bisector((p: P) => p.x)
   return (posX: number) => {
     const x = xScale.invert(posX)
-    const item = data[bisect.left(data, x) - 1]
+    const i = bisect.left(data, x)
-    const result = item ? { ...item, x: posX } : undefined
+    const prev = data[i - 1] as P | undefined
-    return result
+    const next = data[i] as P | undefined
+    return { prev, next, x: posX }
   }
 }
 
@@ -64,6 +89,7 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
 }) => {
   const { data, w, h, color, margin, yScale, curve, Tooltip } = props
 
+  const [ttParams, setTTParams] = useState<TooltipParams<P>>()
   const [viewXScale, setViewXScale] =
     useState<ScaleContinuousNumeric<number, number>>()
   const xScale = viewXScale ?? props.xScale
@@ -78,13 +104,19 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
     return { xAxis, yAxis }
   }, [w, xScale, yScale])
 
-  const selector = betAtPointSelector(data, xScale)
+  const selector = dataAtPointSelector(data, xScale)
-  const onMouseOver = useEvent((mouseX: number) => {
+  const onMouseOver = useEvent((mouseX: number, mouseY: number) => {
     const p = selector(mouseX)
-    props.onMouseOver?.(p)
+    props.onMouseOver?.(p.prev)
-    return p
+    if (p.prev) {
+      setTTParams({ x: mouseX, y: mouseY, data: p.prev })
+    } else {
+      setTTParams(undefined)
+    }
   })
 
+  const onMouseLeave = useEvent(() => setTTParams(undefined))
+
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
       const [mouseX0, mouseX1] = ev.selection as [number, number]
@@ -103,8 +135,10 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
       margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
+      ttParams={ttParams}
       onSelect={onSelect}
       onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
       Tooltip={Tooltip}
     >
       <AreaWithTopStroke
@@ -134,6 +168,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
 }) => {
   const { data, w, h, colors, margin, yScale, yKind, curve, Tooltip } = props
 
+  const [ttParams, setTTParams] = useState<TooltipParams<P>>()
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
 
@@ -168,16 +203,23 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
     return d3Stack(data)
   }, [data])
 
-  const selector = betAtPointSelector(data, xScale)
+  const selector = dataAtPointSelector(data, xScale)
-  const onMouseOver = useEvent((mouseX: number) => {
+  const onMouseOver = useEvent((mouseX: number, mouseY: number) => {
     const p = selector(mouseX)
-    props.onMouseOver?.(p)
+    props.onMouseOver?.(p.prev)
-    return p
+    if (p.prev) {
+      setTTParams({ x: mouseX, y: mouseY, data: p.prev })
+    } else {
+      setTTParams(undefined)
+    }
   })
 
+  const onMouseLeave = useEvent(() => setTTParams(undefined))
+
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
       const [mouseX0, mouseX1] = ev.selection as [number, number]
+
       setViewXScale(() =>
         xScale.copy().domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
       )
@@ -193,8 +235,10 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
       margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
+      ttParams={ttParams}
       onSelect={onSelect}
       onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
       Tooltip={Tooltip}
     >
       {series.map((s, i) => (
@@ -226,13 +270,15 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   Tooltip?: TooltipComponent<Date, P>
   pct?: boolean
 }) => {
-  const { data, w, h, color, margin, yScale, yKind, curve, Tooltip } = props
+  const { data, w, h, color, margin, yScale, yKind, Tooltip } = props
+  const curve = props.curve ?? curveLinear
 
+  const [mouse, setMouse] = useState<TooltipParams<P> & SliceExtent>()
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
 
   const px = useCallback((p: P) => xScale(p.x), [xScale])
-  const py0 = yScale(yScale.domain()[0])
+  const py0 = yScale(0)
   const py1 = useCallback((p: P) => yScale(p.y), [yScale])
 
   const { xAxis, yAxis } = useMemo(() => {
@@ -253,21 +299,53 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
     return { xAxis, yAxis }
   }, [w, h, yKind, xScale, yScale])
 
-  const selector = betAtPointSelector(data, xScale)
+  const selector = dataAtPointSelector(data, xScale)
   const onMouseOver = useEvent((mouseX: number) => {
     const p = selector(mouseX)
-    props.onMouseOver?.(p)
+    props.onMouseOver?.(p.prev)
-    return p
+    const x0 = p.prev ? xScale(p.prev.x) : xScale.range()[0]
+    const x1 = p.next ? xScale(p.next.x) : xScale.range()[1]
+    const y0 = p.prev ? yScale(p.prev.y) : yScale.range()[0]
+    const y1 = p.next ? yScale(p.next.y) : yScale.range()[1]
+    const markerY = interpolateY(curve, mouseX, x0, x1, y0, y1)
+    if (p.prev && markerY) {
+      setMouse({
+        x: mouseX,
+        y: markerY,
+        y0: py0,
+        y1: markerY,
+        data: p.prev,
+      })
+    } else {
+      setMouse(undefined)
+    }
   })
 
+  const onMouseLeave = useEvent(() => setMouse(undefined))
+
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
       const [mouseX0, mouseX1] = ev.selection as [number, number]
-      setViewXScale(() =>
+      const newViewXScale = xScale
-        xScale.copy().domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
+        .copy()
-      )
+        .domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
+      setViewXScale(() => newViewXScale)
+
+      const dataInView = data.filter((p) => {
+        const x = newViewXScale(p.x)
+        return x >= 0 && x <= w
+      })
+      const yMin = Math.min(...dataInView.map((p) => p.y))
+      const yMax = Math.max(...dataInView.map((p) => p.y))
+
+      // Prevents very small selections from being too zoomed in
+      if (yMax - yMin > 0.05) {
+        // adds a little padding to the top and bottom of the selection
+        yScale.domain([yMin - (yMax - yMin) * 0.1, yMax + (yMax - yMin) * 0.1])
+      }
     } else {
       setViewXScale(undefined)
+      yScale.domain([0, 1])
     }
   })
 
@@ -285,8 +363,12 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
       margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
+      ttParams={
+        mouse ? { x: mouse.x, y: mouse.y, data: mouse.data } : undefined
+      }
       onSelect={onSelect}
       onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
       Tooltip={Tooltip}
     >
       {stops && (
@@ -306,6 +388,9 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
         py1={py1}
         curve={curve ?? curveLinear}
       />
+      {mouse && (
+        <SliceMarker color="#5BCEFF" x={mouse.x} y0={mouse.y0} y1={mouse.y1} />
+      )}
     </SVGChart>
   )
 }

web/components/charts/helpers.tsx

@@ -1,12 +1,4 @@
-import {
+import { ReactNode, SVGProps, memo, useRef, useEffect, useMemo } from 'react'
-  ReactNode,
-  SVGProps,
-  memo,
-  useRef,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
 import { pointer, select } from 'd3-selection'
 import { Axis, AxisScale } from 'd3-axis'
 import { brushX, D3BrushEvent } from 'd3-brush'
@@ -17,6 +9,7 @@ import clsx from 'clsx'
 
 import { Contract } from 'common/contract'
 import { useMeasureSize } from 'web/hooks/use-measure-size'
+import { useIsMobile } from 'web/hooks/use-is-mobile'
 
 export type Point<X, Y, T = unknown> = { x: X; y: Y; obj?: T }
 
@@ -123,6 +116,28 @@ export const AreaWithTopStroke = <P,>(props: {
   )
 }
 
+export const SliceMarker = (props: {
+  color: string
+  x: number
+  y0: number
+  y1: number
+}) => {
+  const { color, x, y0, y1 } = props
+  return (
+    <g>
+      <line stroke="white" strokeWidth={1} x1={x} x2={x} y1={y0} y2={y1} />
+      <circle
+        stroke="white"
+        strokeWidth={1}
+        fill={color}
+        cx={x}
+        cy={y1}
+        r={5}
+      />
+    </g>
+  )
+}
+
 export const SVGChart = <X, TT>(props: {
   children: ReactNode
   w: number
@@ -130,8 +145,10 @@ export const SVGChart = <X, TT>(props: {
   margin: Margin
   xAxis: Axis<X>
   yAxis: Axis<number>
+  ttParams: TooltipParams<TT> | undefined
   onSelect?: (ev: D3BrushEvent<any>) => void
-  onMouseOver?: (mouseX: number, mouseY: number) => TT | undefined
+  onMouseOver?: (mouseX: number, mouseY: number) => void
+  onMouseLeave?: () => void
   Tooltip?: TooltipComponent<X, TT>
 }) => {
   const {
@@ -141,16 +158,18 @@ export const SVGChart = <X, TT>(props: {
     margin,
     xAxis,
     yAxis,
-    onMouseOver,
+    ttParams,
     onSelect,
+    onMouseOver,
+    onMouseLeave,
     Tooltip,
   } = props
-  const [mouse, setMouse] = useState<{ x: number; y: number; data: TT }>()
   const tooltipMeasure = useMeasureSize()
   const overlayRef = useRef<SVGGElement>(null)
   const innerW = w - (margin.left + margin.right)
   const innerH = h - (margin.top + margin.bottom)
   const clipPathId = useMemo(() => nanoid(), [])
+  const isMobile = useIsMobile()
 
   const justSelected = useRef(false)
   useEffect(() => {
@@ -165,7 +184,7 @@ export const SVGChart = <X, TT>(props: {
         if (!justSelected.current) {
           justSelected.current = true
           onSelect(ev)
-          setMouse(undefined)
+          onMouseLeave?.()
           if (overlayRef.current) {
             select(overlayRef.current).call(brush.clear)
           }
@@ -181,44 +200,49 @@ export const SVGChart = <X, TT>(props: {
         .select('.selection')
         .attr('shape-rendering', 'null')
     }
-  }, [innerW, innerH, onSelect])
+  }, [innerW, innerH, onSelect, onMouseLeave])
 
   const onPointerMove = (ev: React.PointerEvent) => {
     if (ev.pointerType === 'mouse' && onMouseOver) {
       const [x, y] = pointer(ev)
-      const data = onMouseOver(x, y)
+      onMouseOver(x, y)
-      if (data !== undefined) {
+    }
-        setMouse({ x, y, data })
+  }
-      } else {
+
-        setMouse(undefined)
+  const onTouchMove = (ev: React.TouchEvent) => {
-      }
+    if (onMouseOver) {
+      const touch = ev.touches[0]
+      const x = touch.pageX - ev.currentTarget.getBoundingClientRect().left
+      const y = touch.pageY - ev.currentTarget.getBoundingClientRect().top
+      onMouseOver(x, y)
     }
   }
 
   const onPointerLeave = () => {
-    setMouse(undefined)
+    onMouseLeave?.()
   }
 
   return (
     <div className="relative overflow-hidden">
-      {mouse && Tooltip && (
+      {ttParams && Tooltip && (
         <TooltipContainer
           setElem={tooltipMeasure.setElem}
           margin={margin}
           pos={getTooltipPosition(
-            mouse.x,
+            ttParams.x,
-            mouse.y,
+            ttParams.y,
             innerW,
             innerH,
-            tooltipMeasure.width,
+            tooltipMeasure.width ?? 140,
-            tooltipMeasure.height
+            tooltipMeasure.height ?? 35,
+            isMobile ?? false
           )}
         >
           <Tooltip
             xScale={xAxis.scale()}
-            mouseX={mouse.x}
+            x={ttParams.x}
-            mouseY={mouse.y}
+            y={ttParams.y}
-            data={mouse.data}
+            data={ttParams.data}
           />
         </TooltipContainer>
       )}
@@ -230,18 +254,30 @@ export const SVGChart = <X, TT>(props: {
           <XAxis axis={xAxis} w={innerW} h={innerH} />
           <YAxis axis={yAxis} w={innerW} h={innerH} />
           <g clipPath={`url(#${clipPathId})`}>{children}</g>
-          <g
+          {!isMobile ? (
-            ref={overlayRef}
+            <g
-            x="0"
+              ref={overlayRef}
-            y="0"
+              x="0"
-            width={innerW}
+              y="0"
-            height={innerH}
+              width={innerW}
-            fill="none"
+              height={innerH}
-            pointerEvents="all"
+              fill="none"
-            onPointerEnter={onPointerMove}
+              pointerEvents="all"
-            onPointerMove={onPointerMove}
+              onPointerEnter={onPointerMove}
-            onPointerLeave={onPointerLeave}
+              onPointerMove={onPointerMove}
-          />
+              onPointerLeave={onPointerLeave}
+            />
+          ) : (
+            <rect
+              x="0"
+              y="0"
+              width={innerW}
+              height={innerH}
+              fill="transparent"
+              onTouchMove={onTouchMove}
+              onTouchEnd={onPointerLeave}
+            />
+          )}
         </g>
       </svg>
     </div>
@@ -255,31 +291,34 @@ export const getTooltipPosition = (
   mouseY: number,
   containerWidth: number,
   containerHeight: number,
-  tooltipWidth?: number,
+  tooltipWidth: number,
-  tooltipHeight?: number
+  tooltipHeight: number,
+  isMobile: boolean
 ) => {
   let left = mouseX + 12
-  let bottom = containerHeight - mouseY + 12
+  let bottom = !isMobile
+    ? containerHeight - mouseY + 12
+    : containerHeight - tooltipHeight + 12
   if (tooltipWidth != null) {
     const overflow = left + tooltipWidth - containerWidth
     if (overflow > 0) {
       left -= overflow
     }
   }
+
   if (tooltipHeight != null) {
     const overflow = tooltipHeight - mouseY
     if (overflow > 0) {
       bottom -= overflow
     }
   }
+
   return { left, bottom }
 }
 
-export type TooltipProps<X, T> = {
+export type TooltipParams<T> = { x: number; y: number; data: T }
-  mouseX: number
+export type TooltipProps<X, T> = TooltipParams<T> & {
-  mouseY: number
   xScale: ContinuousScale<X>
-  data: T
 }
 
 export type TooltipComponent<X, T> = React.ComponentType<TooltipProps<X, T>>

web/components/charts/stats.tsx

@@ -22,8 +22,8 @@ const getPoints = (startDate: number, dailyValues: number[]) => {
 }
 
 const DailyCountTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
-  const { data, mouseX, xScale } = props
+  const { data, x, xScale } = props
-  const d = xScale.invert(mouseX)
+  const d = xScale.invert(x)
   return (
     <Row className="items-center gap-2">
       <span className="font-semibold">{dayjs(d).format('MMM DD')}</span>
@@ -33,8 +33,8 @@ const DailyCountTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
 }
 
 const DailyPercentTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
-  const { data, mouseX, xScale } = props
+  const { data, x, xScale } = props
-  const d = xScale.invert(mouseX)
+  const d = xScale.invert(x)
   return (
     <Row className="items-center gap-2">
       <span className="font-semibold">{dayjs(d).format('MMM DD')}</span>

web/components/comment-input.tsx

@@ -138,16 +138,6 @@ export function CommentInputTextArea(props: {
           <LoadingIndicator spinnerClassName="border-gray-500" />
         )}
       </TextEditor>
-      <Row>
-        {!user && (
-          <button
-            className="btn btn-outline btn-sm mt-2 normal-case"
-            onClick={submitComment}
-          >
-            Add my comment
-          </button>
-        )}
-      </Row>
     </>
   )
 }

web/components/confirmation-button.tsx

@@ -16,11 +16,11 @@ export function ConfirmationButton(props: {
   }
   cancelBtn?: {
     label?: string
-    className?: string
+    color?: ColorType
   }
   submitBtn?: {
     label?: string
-    className?: string
+    color?: ColorType
     isSubmitting?: boolean
   }
   children: ReactNode
@@ -53,14 +53,14 @@ export function ConfirmationButton(props: {
         <Col className="gap-4 rounded-md bg-white px-8 py-6">
           {children}
           <Row className="gap-4">
-            <div
+            <Button
-              className={clsx('btn', cancelBtn?.className)}
+              color={cancelBtn?.color ?? 'gray-white'}
               onClick={() => updateOpen(false)}
             >
               {cancelBtn?.label ?? 'Cancel'}
-            </div>
+            </Button>
             <Button
-              className={clsx('btn', submitBtn?.className)}
+              color={submitBtn?.color ?? 'blue'}
               onClick={
                 onSubmitWithSuccess
                   ? () =>
@@ -100,18 +100,11 @@ export function ResolveConfirmationButton(props: {
   onResolve: () => void
   isSubmitting: boolean
   openModalButtonClass?: string
-  submitButtonClass?: string
   color?: ColorType
   disabled?: boolean
 }) {
-  const {
+  const { onResolve, isSubmitting, openModalButtonClass, color, disabled } =
-    onResolve,
+    props
-    isSubmitting,
-    openModalButtonClass,
-    submitButtonClass,
-    color,
-    disabled,
-  } = props
   return (
     <ConfirmationButton
       openModalBtn={{
@@ -126,7 +119,7 @@ export function ResolveConfirmationButton(props: {
       }}
       submitBtn={{
         label: 'Resolve',
-        className: clsx('border-none', submitButtonClass),
+        color: color,
         isSubmitting,
       }}
       onSubmit={onResolve}

web/components/contract-search.tsx

@@ -446,7 +446,7 @@ function ContractSearchControls(props: {
           className="input input-bordered w-full"
           autoFocus={autoFocus}
         />
-        {!isMobile && (
+        {!isMobile && !query && (
           <SearchFilters
             filter={filter}
             selectFilter={selectFilter}
@@ -457,7 +457,7 @@ function ContractSearchControls(props: {
             includeProbSorts={includeProbSorts}
           />
         )}
-        {isMobile && (
+        {isMobile && !query && (
           <>
             <MobileSearchBar
               children={

web/components/contract/contract-card.tsx

@@ -8,6 +8,7 @@ import {
   BinaryContract,
   Contract,
   CPMMBinaryContract,
+  CPMMContract,
   FreeResponseContract,
   MultipleChoiceContract,
   NumericContract,
@@ -35,6 +36,7 @@ import { getMappedValue } from 'common/pseudo-numeric'
 import { Tooltip } from '../tooltip'
 import { SiteLink } from '../site-link'
 import { ProbChange } from './prob-change-table'
+import { Card } from '../card'
 
 export function ContractCard(props: {
   contract: Contract
@@ -75,12 +77,7 @@ export function ContractCard(props: {
     !hideQuickBet
 
   return (
-    <Row
+    <Card className={clsx('group relative flex gap-3', className)}>
-      className={clsx(
-        'group  relative gap-3 rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
-        className
-      )}
-    >
       <Col className="relative flex-1 gap-3 py-4 pb-12  pl-6">
         <AvatarDetails
           contract={contract}
@@ -195,7 +192,7 @@ export function ContractCard(props: {
           />
         </Link>
       )}
-    </Row>
+    </Card>
   )
 }
 
@@ -391,7 +388,7 @@ export function PseudoNumericResolutionOrExpectation(props: {
 }
 
 export function ContractCardProbChange(props: {
-  contract: CPMMBinaryContract
+  contract: CPMMContract
   noLinkAvatar?: boolean
   className?: string
 }) {
@@ -399,12 +396,7 @@ export function ContractCardProbChange(props: {
   const contract = useContractWithPreload(props.contract) as CPMMBinaryContract
 
   return (
-    <Col
+    <Card className={clsx(className, 'mb-4')}>
-      className={clsx(
-        className,
-        'mb-4 rounded-lg bg-white shadow hover:bg-gray-100 hover:shadow-lg'
-      )}
-    >
       <AvatarDetails
         contract={contract}
         className={'px-6 pt-4'}
@@ -419,6 +411,6 @@ export function ContractCardProbChange(props: {
         </SiteLink>
         <ProbChange className="py-2 pr-4" contract={contract} />
       </Row>
-    </Col>
+    </Card>
   )
 }

web/components/contract/contract-details.tsx

@@ -357,7 +357,7 @@ export function GroupDisplay(props: {
     const groupSection = (
       <a
         className={clsx(
-          'bg-greyscale-4 max-w-[140px] truncate whitespace-nowrap rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]',
+          'bg-greyscale-4 max-w-[200px] truncate whitespace-nowrap rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]',
           !disabled && 'hover:bg-greyscale-3 cursor-pointer'
         )}
       >
@@ -437,14 +437,14 @@ function EditableCloseDate(props: {
   return (
     <>
       <Modal
-        size="sm"
+        size="md"
         open={isEditingCloseTime}
         setOpen={setIsEditingCloseTime}
         position="top"
       >
         <Col className="rounded bg-white px-8 pb-8">
-          <Subtitle text="Edit Close Date" />
+          <Subtitle text="Edit market close time" />
-          <Row className="z-10 mr-2 w-full shrink-0 flex-wrap items-center gap-2">
+          <Row className="z-10 mr-2 mt-4 w-full shrink-0 flex-wrap items-center gap-2">
             <input
               type="date"
               className="input input-bordered w-full shrink-0 sm:w-fit"
@@ -461,22 +461,18 @@ function EditableCloseDate(props: {
               min="00:00"
               value={closeHoursMinutes}
             />
+            <Button size={'xs'} color={'indigo'} onClick={() => onSave()}>
+              Set
+            </Button>
           </Row>
+
           <Button
-            className="mt-4"
+            className="mt-8"
             size={'xs'}
-            color={'indigo'}
+            color="red"
-            onClick={() => onSave()}
-          >
-            Done
-          </Button>
-          <Button
-            className="mt-4"
-            size={'xs'}
-            color={'gray-white'}
             onClick={() => onSave(Date.now())}
           >
-            Close Now
+            Close market now
           </Button>
         </Col>
       </Modal>

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

@@ -17,7 +17,7 @@ import { SiteLink } from '../site-link'
 import { firestoreConsolePath } from 'common/envs/constants'
 import { deleteField } from 'firebase/firestore'
 import ShortToggle from '../widgets/short-toggle'
-import { DuplicateContractButton } from '../copy-contract-button'
+import { DuplicateContractButton } from '../duplicate-contract-button'
 import { Row } from '../layout/row'
 import { BETTORS, User } from 'common/user'
 import { Button } from '../button'

web/components/contract/contract-mention.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx'
+import { Contract } from 'common/contract'
+import { formatMoney } from 'common/util/format'
+import Link from 'next/link'
+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'
+
+export function ContractMention(props: { contract: Contract }) {
+  const { contract } = props
+  const { outcomeType, resolution } = contract
+  const probTextColor = `text-${getColor(contract)}`
+
+  return (
+    <Link href={contractPath(contract)}>
+      <a
+        className="group inline whitespace-nowrap rounded-sm hover:bg-indigo-50 focus:bg-indigo-50"
+        title={tooltipLabel(contract)}
+      >
+        <span className="break-anywhere mr-0.5 whitespace-normal font-normal text-indigo-700">
+          {contract.question}
+        </span>
+        {outcomeType === 'BINARY' && (
+          <span
+            className={clsx(
+              probTextColor,
+              'rounded-full px-2 font-semibold ring-1 ring-inset ring-indigo-100 group-hover:ring-indigo-200'
+            )}
+          >
+            {resolution ? (
+              <BinaryContractOutcomeLabel
+                contract={contract}
+                resolution={resolution}
+              />
+            ) : (
+              getBinaryProbPercent(contract)
+            )}
+          </span>
+        )}
+        {/* TODO: numeric? */}
+      </a>
+    </Link>
+  )
+}
+
+function tooltipLabel(contract: Contract) {
+  const { resolutionTime, creatorName, volume, closeTime = 0 } = contract
+  const dateFormat = resolutionTime
+    ? `Resolved ${fromNow(resolutionTime)}`
+    : `${closeTime < Date.now() ? 'Closed' : 'Closes'} ${fromNow(closeTime)}`
+
+  return `By ${creatorName}. ${formatMoney(volume)} bet. ${dateFormat}`
+}

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

@@ -48,15 +48,8 @@ export function ContractReportResolution(props: { contract: Contract }) {
         openModalBtn={{
           label: '',
           icon: <FlagIcon className="h-5 w-5" />,
-          className: clsx(flagClass, reporting && 'btn-disabled loading'),
+          disabled: reporting,
-        }}
+          className: clsx(flagClass),
-        cancelBtn={{
-          label: 'Cancel',
-          className: 'border-none btn-sm btn-ghost self-center',
-        }}
-        submitBtn={{
-          label: 'Submit',
-          className: 'btn-secondary',
         }}
         onSubmitWithSuccess={onSubmit}
         disabled={userReported}

web/components/contract/contracts-grid.tsx

@@ -45,7 +45,7 @@ export function ContractsGrid(props: {
     cardUIOptions || {}
   const { itemIds: contractIds, highlightClassName } = highlightOptions || {}
   const onVisibilityUpdated = useCallback(
-    (visible) => {
+    (visible: boolean) => {
       if (visible && loadMore) {
         loadMore()
       }

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

@@ -1,13 +1,10 @@
-import { sortBy } from 'lodash'
 import clsx from 'clsx'
-import { contractPath } from 'web/lib/firebase/contracts'
 import { CPMMContract } from 'common/contract'
 import { formatPercent } from 'common/util/format'
-import { SiteLink } from '../site-link'
+import { sortBy } from 'lodash'
 import { Col } from '../layout/col'
-import { Row } from '../layout/row'
 import { LoadingIndicator } from '../loading-indicator'
-import { useContractWithPreload } from 'web/hooks/use-contract'
+import { ContractCardProbChange } from './contract-card'
 
 export function ProbChangeTable(props: {
   changes: CPMMContract[] | undefined
@@ -39,46 +36,21 @@ export function ProbChangeTable(props: {
   if (rows === 0) return <div className="px-4 text-gray-500">None</div>
 
   return (
-    <Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0">
+    <Col className="mb-4 w-full gap-4 rounded-lg md:flex-row">
-      <Col className="flex-1 divide-y">
+      <Col className="flex-1 gap-4">
         {filteredPositiveChanges.map((contract) => (
-          <ProbChangeRow key={contract.id} contract={contract} />
+          <ContractCardProbChange key={contract.id} contract={contract} />
         ))}
       </Col>
-      <Col className="flex-1 divide-y">
+      <Col className="flex-1 gap-4">
         {filteredNegativeChanges.map((contract) => (
-          <ProbChangeRow key={contract.id} contract={contract} />
+          <ContractCardProbChange key={contract.id} contract={contract} />
         ))}
       </Col>
     </Col>
   )
 }
 
-export function ProbChangeRow(props: {
-  contract: CPMMContract
-  className?: string
-}) {
-  const { className } = props
-  const contract =
-    (useContractWithPreload(props.contract) as CPMMContract) ?? props.contract
-  return (
-    <Row
-      className={clsx(
-        'items-center justify-between gap-4 hover:bg-gray-100',
-        className
-      )}
-    >
-      <SiteLink
-        className="p-4 pr-0 font-semibold text-indigo-700"
-        href={contractPath(contract)}
-      >
-        <span className="line-clamp-2">{contract.question}</span>
-      </SiteLink>
-      <ProbChange className="py-2 pr-4 text-xl" contract={contract} />
-    </Row>
-  )
-}
-
 export function ProbChange(props: {
   contract: CPMMContract
   className?: string

web/components/contract/share-modal.tsx

@@ -1,6 +1,3 @@
-import { LinkIcon } from '@heroicons/react/outline'
-import toast from 'react-hot-toast'
-
 import { Contract } from 'common/contract'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
@@ -9,9 +6,7 @@ import { Row } from '../layout/row'
 import { ShareEmbedButton } from '../share-embed-button'
 import { Title } from '../title'
 import { TweetButton } from '../tweet-button'
-import { Button } from '../button'
+import { withTracking } from 'web/lib/service/analytics'
-import { copyToClipboard } from 'web/lib/util/copy'
-import { track, withTracking } from 'web/lib/service/analytics'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { User } from 'common/user'
 import { SiteLink } from '../site-link'
@@ -22,6 +17,8 @@ import { useState } from 'react'
 import { CHALLENGES_ENABLED } from 'common/challenge'
 import ChallengeIcon from 'web/lib/icons/challenge-icon'
 import { QRCode } from '../qr-code'
+import { CopyLinkButton } from '../copy-link-button'
+import { Button } from '../button'
 
 export function ShareModal(props: {
   contract: Contract
@@ -34,7 +31,6 @@ export function ShareModal(props: {
 
   const [openCreateChallengeModal, setOpenCreateChallengeModal] =
     useState(false)
-  const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
   const showChallenge =
     user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
 
@@ -61,40 +57,24 @@ export function ShareModal(props: {
           width={150}
           height={150}
         />
-        <Button
+        <CopyLinkButton url={shareUrl} tracking="copy share link" />
-          size="2xl"
-          color="indigo"
-          className={'mb-2 flex max-w-xs self-center'}
-          onClick={() => {
-            copyToClipboard(shareUrl)
-            toast.success('Link copied!', {
-              icon: linkIcon,
-            })
-            track('copy share link')
-          }}
-        >
-          {linkIcon} Copy link
-        </Button>
 
         <Row className="z-0 flex-wrap justify-center gap-4 self-center">
-          <TweetButton
+          <TweetButton tweetText={getTweetText(contract, shareUrl)} />
-            className="self-start"
-            tweetText={getTweetText(contract, shareUrl)}
-          />
 
           <ShareEmbedButton contract={contract} />
 
           {showChallenge && (
-            <button
+            <Button
-              className={
+              size="2xs"
-                'btn btn-xs flex-nowrap border-2 !border-indigo-500 !bg-white normal-case text-indigo-500'
+              color="override"
-              }
+              className="gap-1 border-2  border-indigo-500 text-indigo-500 hover:bg-indigo-500 hover:text-white"
               onClick={withTracking(
                 () => setOpenCreateChallengeModal(true),
                 'click challenge button'
               )}
             >
-              ️<ChallengeIcon className="mr-1 h-4 w-4" /> Challenge
+              <ChallengeIcon className="h-4 w-4" /> Challenge
               <CreateChallengeModal
                 isOpen={openCreateChallengeModal}
                 setOpen={(open) => {
@@ -106,7 +86,7 @@ export function ShareModal(props: {
                 user={user}
                 contract={contract}
               />
-            </button>
+            </Button>
           )}
         </Row>
       </Col>

web/components/copy-link-button.tsx

@@ -21,10 +21,11 @@ export function CopyLinkButton(props: {
   return (
     <Row className="w-full">
       <input
-        className="input input-bordered flex-1 rounded-r-none text-gray-500"
+        className="block w-full rounded-none rounded-l-md border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
         readOnly
         type="text"
         value={displayUrl ?? url}
+        onFocus={(e) => e.target.select()}
       />
 
       <Menu
@@ -37,7 +38,7 @@ export function CopyLinkButton(props: {
       >
         <Menu.Button
           className={clsx(
-            'btn btn-xs border-2 border-green-600 bg-white normal-case text-green-600 hover:border-green-600 hover:bg-white',
+            'relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500',
             buttonClassName
           )}
         >

web/components/create-post.tsx

@@ -13,6 +13,8 @@ import { Group } from 'common/group'
 
 export function CreatePost(props: { group?: Group }) {
   const [title, setTitle] = useState('')
+  const [subtitle, setSubtitle] = useState('')
+
   const [error, setError] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -22,12 +24,17 @@ export function CreatePost(props: { group?: Group }) {
     disabled: isSubmitting,
   })
 
-  const isValid = editor && title.length > 0 && editor.isEmpty === false
+  const isValid =
+    editor &&
+    title.length > 0 &&
+    subtitle.length > 0 &&
+    editor.isEmpty === false
 
   async function savePost(title: string) {
     if (!editor) return
     const newPost = {
       title: title,
+      subtitle: subtitle,
       content: editor.getJSON(),
       groupId: group?.id,
     }
@@ -62,6 +69,20 @@ export function CreatePost(props: { group?: Group }) {
               onChange={(e) => setTitle(e.target.value || '')}
             />
             <Spacer h={6} />
+            <label className="label">
+              <span className="mb-1">
+                Subtitle<span className={'text-red-700'}> *</span>
+              </span>
+            </label>
+            <Textarea
+              placeholder="e.g. How Elon Musk is getting everyone's attention"
+              className="input input-bordered resize-none"
+              autoFocus
+              maxLength={MAX_POST_TITLE_LENGTH}
+              value={subtitle}
+              onChange={(e) => setSubtitle(e.target.value || '')}
+            />
+            <Spacer h={6} />
             <label className="label">
               <span className="mb-1">
                 Content<span className={'text-red-700'}> *</span>

web/components/duplicate-contract-button.tsx

@@ -3,27 +3,22 @@ import clsx from 'clsx'
 import { Contract } from 'common/contract'
 import { getMappedValue } from 'common/pseudo-numeric'
 import { trackCallback } from 'web/lib/service/analytics'
+import { buttonClass } from './button'
 
-export function DuplicateContractButton(props: {
+export function DuplicateContractButton(props: { contract: Contract }) {
-  contract: Contract
+  const { contract } = props
-  className?: string
-}) {
-  const { contract, className } = props
 
   return (
     <a
-      className={clsx('btn btn-xs flex-nowrap normal-case', className)}
+      className={clsx(
-      style={{
+        buttonClass('2xs', 'override'),
-        backgroundColor: 'white',
+        'gap-1 border-2 border-violet-400 text-violet-400 hover:bg-violet-400 hover:text-white'
-        border: '2px solid #a78bfa',
+      )}
-        // violet-400
-        color: '#a78bfa',
-      }}
       href={duplicateContractHref(contract)}
       onClick={trackCallback('duplicate market')}
       target="_blank"
     >
-      <DuplicateIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
+      <DuplicateIcon className="h-4 w-4" aria-hidden="true" />
       <div>Duplicate</div>
     </a>
   )
@@ -40,6 +35,7 @@ function duplicateContractHref(contract: Contract) {
     closeTime,
     description: descriptionString,
     outcomeType: contract.outcomeType,
+    visibility: contract.visibility,
   } as Record<string, any>
 
   if (contract.outcomeType === 'PSEUDO_NUMERIC') {

web/components/editor.tsx

@@ -319,12 +319,12 @@ const useUploadMutation = (editor: Editor | null) =>
     {
       onSuccess(urls) {
         if (!editor) return
-        let trans = editor.view.state.tr
+        let trans = editor.chain().focus()
-        urls.forEach((src: any) => {
+        urls.forEach((src) => {
-          const node = editor.view.state.schema.nodes.image.create({ src })
+          trans = trans.createParagraphNear()
-          trans = trans.insert(editor.view.state.selection.to, node)
+          trans = trans.setImage({ src })
         })
-        editor.view.dispatch(trans)
+        trans.run()
       },
     }
   )

web/components/editor/contract-mention.tsx

@@ -6,7 +6,7 @@ import {
 } from '@tiptap/react'
 import clsx from 'clsx'
 import { useContract } from 'web/hooks/use-contract'
-import { ContractCard } from '../contract/contract-card'
+import { ContractMention } from '../contract/contract-mention'
 
 const name = 'contract-mention-component'
 
@@ -14,13 +14,8 @@ const ContractMentionComponent = (props: any) => {
   const contract = useContract(props.node.attrs.id)
 
   return (
-    <NodeViewWrapper className={clsx(name, 'not-prose')}>
+    <NodeViewWrapper className={clsx(name, 'not-prose inline')}>
-      {contract && (
+      {contract && <ContractMention contract={contract} />}
-        <ContractCard
-          contract={contract}
-          className="my-2 w-full border border-gray-100"
-        />
-      )}
     </NodeViewWrapper>
   )
 }
@@ -37,6 +32,5 @@ export const DisplayContractMention = Mention.extend({
   addNodeView: () =>
     ReactNodeViewRenderer(ContractMentionComponent, {
       // On desktop, render cards below half-width so you can stack two
-      className: 'inline-block sm:w-[calc(50%-1rem)] sm:mr-1',
     }),
 })

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

@@ -2,6 +2,7 @@ import { Answer } from 'common/answer'
 import { FreeResponseContract } from 'common/contract'
 import { ContractComment } from 'common/comment'
 import React, { useEffect, useRef, useState } from 'react'
+import { sum } from 'lodash'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
@@ -14,6 +15,8 @@ import {
 } from 'web/components/feed/feed-comments'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { useRouter } from 'next/router'
+import { useUser } from 'web/hooks/use-user'
+import { useEvent } from 'web/hooks/use-event'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { UserLink } from 'web/components/user-link'
 
@@ -27,11 +30,17 @@ export function FeedAnswerCommentGroup(props: {
   const { username, avatarUrl, name, text } = answer
 
   const [replyTo, setReplyTo] = useState<ReplyTo>()
+  const user = useUser()
   const router = useRouter()
   const answerElementId = `answer-${answer.id}`
   const highlighted = router.asPath.endsWith(`#${answerElementId}`)
   const answerRef = useRef<HTMLDivElement>(null)
 
+  const onSubmitComment = useEvent(() => setReplyTo(undefined))
+  const onReplyClick = useEvent((comment: ContractComment) => {
+    setReplyTo({ id: comment.id, username: comment.userUsername })
+  })
+
   useEffect(() => {
     if (highlighted && answerRef.current != null) {
       answerRef.current.scrollIntoView(true)
@@ -95,10 +104,10 @@ export function FeedAnswerCommentGroup(props: {
             indent={true}
             contract={contract}
             comment={comment}
-            tips={tips[comment.id] ?? {}}
+            myTip={user ? tips[comment.id]?.[user.id] : undefined}
-            onReplyClick={() =>
+            totalTip={sum(Object.values(tips[comment.id] ?? {}))}
-              setReplyTo({ id: comment.id, username: comment.userUsername })
+            showTip={true}
-            }
+            onReplyClick={onReplyClick}
           />
         ))}
       </Col>
@@ -112,7 +121,7 @@ export function FeedAnswerCommentGroup(props: {
             contract={contract}
             parentAnswerOutcome={answer.number.toString()}
             replyTo={replyTo}
-            onSubmitComment={() => setReplyTo(undefined)}
+            onSubmitComment={onSubmitComment}
           />
         </div>
       )}

web/components/feed/feed-bets.tsx

@@ -1,3 +1,4 @@
+import React, { memo, useEffect } from 'react'
 import dayjs from 'dayjs'
 import { Contract } from 'common/contract'
 import { Bet } from 'common/bet'
@@ -8,7 +9,6 @@ import clsx from 'clsx'
 import { formatMoney, formatPercent } from 'common/util/format'
 import { OutcomeLabel } from 'web/components/outcome-label'
 import { RelativeTimestamp } from 'web/components/relative-timestamp'
-import React, { useEffect } from 'react'
 import { formatNumericProbability } from 'common/pseudo-numeric'
 import { SiteLink } from 'web/components/site-link'
 import { getChallenge, getChallengeUrl } from 'web/lib/firebase/challenges'
@@ -16,7 +16,10 @@ import { Challenge } from 'common/challenge'
 import { UserLink } from 'web/components/user-link'
 import { BETTOR } from 'common/user'
 
-export function FeedBet(props: { contract: Contract; bet: Bet }) {
+export const FeedBet = memo(function FeedBet(props: {
+  contract: Contract
+  bet: Bet
+}) {
   const { contract, bet } = props
   const { userAvatarUrl, userUsername, createdTime } = bet
   const showUser = dayjs(createdTime).isAfter('2022-06-01')
@@ -36,7 +39,7 @@ export function FeedBet(props: { contract: Contract; bet: Bet }) {
       />
     </Row>
   )
-}
+})
 
 export function BetStatusText(props: {
   contract: Contract

web/components/feed/feed-comments.tsx

@@ -1,11 +1,14 @@
+import React, { memo, useEffect, useRef, useState } from 'react'
+import { Editor } from '@tiptap/react'
+import { useRouter } from 'next/router'
+import { sum } from 'lodash'
+import clsx from 'clsx'
+
 import { ContractComment } from 'common/comment'
 import { Contract } from 'common/contract'
-import React, { useEffect, useRef, useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { formatMoney } from 'common/util/format'
-import { useRouter } from 'next/router'
 import { Row } from 'web/components/layout/row'
-import clsx from 'clsx'
 import { Avatar } from 'web/components/avatar'
 import { OutcomeLabel } from 'web/components/outcome-label'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
@@ -14,9 +17,9 @@ import { createCommentOnContract } from 'web/lib/firebase/comments'
 import { Col } from 'web/components/layout/col'
 import { track } from 'web/lib/service/analytics'
 import { Tipper } from '../tipper'
-import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
+import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { useEvent } from 'web/hooks/use-event'
 import { Content } from '../editor'
-import { Editor } from '@tiptap/react'
 import { UserLink } from 'web/components/user-link'
 import { CommentInput } from '../comment-input'
 import { AwardBountyButton } from 'web/components/award-bounty-button'
@@ -32,6 +35,12 @@ export function FeedCommentThread(props: {
   const { contract, threadComments, tips, parentComment } = props
   const [replyTo, setReplyTo] = useState<ReplyTo>()
 
+  const user = useUser()
+  const onSubmitComment = useEvent(() => setReplyTo(undefined))
+  const onReplyClick = useEvent((comment: ContractComment) => {
+    setReplyTo({ id: comment.id, username: comment.userUsername })
+  })
+
   return (
     <Col className="relative w-full items-stretch gap-3 pb-4">
       <span
@@ -44,10 +53,10 @@ export function FeedCommentThread(props: {
           indent={commentIdx != 0}
           contract={contract}
           comment={comment}
-          tips={tips[comment.id] ?? {}}
+          myTip={user ? tips[comment.id]?.[user.id] : undefined}
-          onReplyClick={() =>
+          totalTip={sum(Object.values(tips[comment.id] ?? {}))}
-            setReplyTo({ id: comment.id, username: comment.userUsername })
+          showTip={true}
-          }
+          onReplyClick={onReplyClick}
         />
       ))}
       {replyTo && (
@@ -60,7 +69,7 @@ export function FeedCommentThread(props: {
             contract={contract}
             parentCommentId={parentComment.id}
             replyTo={replyTo}
-            onSubmitComment={() => setReplyTo(undefined)}
+            onSubmitComment={onSubmitComment}
           />
         </Col>
       )}
@@ -68,14 +77,17 @@ export function FeedCommentThread(props: {
   )
 }
 
-export function FeedComment(props: {
+export const FeedComment = memo(function FeedComment(props: {
   contract: Contract
   comment: ContractComment
-  tips?: CommentTips
+  showTip?: boolean
+  myTip?: number
+  totalTip?: number
   indent?: boolean
-  onReplyClick?: () => void
+  onReplyClick?: (comment: ContractComment) => void
 }) {
-  const { contract, comment, tips, indent, onReplyClick } = props
+  const { contract, comment, myTip, totalTip, showTip, indent, onReplyClick } =
+    props
   const {
     text,
     content,
@@ -180,12 +192,18 @@ export function FeedComment(props: {
           {onReplyClick && (
             <button
               className="font-bold hover:underline"
-              onClick={onReplyClick}
+              onClick={() => onReplyClick(comment)}
             >
               Reply
             </button>
           )}
-          {tips && <Tipper comment={comment} tips={tips} />}
+          {showTip && (
+            <Tipper
+              comment={comment}
+              myTip={myTip ?? 0}
+              totalTip={totalTip ?? 0}
+            />
+          )}
           {(contract.openCommentBounties ?? 0) > 0 && (
             <AwardBountyButton comment={comment} contract={contract} />
           )}
@@ -193,7 +211,7 @@ export function FeedComment(props: {
       </div>
     </Row>
   )
-}
+})
 
 function CommentStatus(props: {
   contract: Contract

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

@@ -53,30 +53,30 @@ export function ContractGroupsList(props: {
           />
         </Col>
       )}
-      {groups.length === 0 && (
+      <Col className="h-96 overflow-auto">
-        <Col className="ml-2 h-full justify-center text-gray-500">
+        {groups.length === 0 && (
-          No groups yet...
+          <Col className="text-greyscale-4">No groups yet...</Col>
-        </Col>
+        )}
-      )}
+        {groups.map((group) => (
-      {groups.map((group) => (
+          <Row
-        <Row
+            key={group.id}
-          key={group.id}
+            className={clsx('items-center justify-between gap-2 p-2')}
-          className={clsx('items-center justify-between gap-2 p-2')}
+          >
-        >
+            <Row className="line-clamp-1 items-center gap-2">
-          <Row className="line-clamp-1 items-center gap-2">
+              <GroupLinkItem group={group} />
-            <GroupLinkItem group={group} />
+            </Row>
+            {user && canModifyGroupContracts(group, user.id) && (
+              <Button
+                color={'gray-white'}
+                size={'xs'}
+                onClick={() => removeContractFromGroup(group, contract)}
+              >
+                <XIcon className="text-greyscale-4 h-4 w-4" />
+              </Button>
+            )}
           </Row>
-          {user && canModifyGroupContracts(group, user.id) && (
+        ))}
-            <Button
+      </Col>
-              color={'gray-white'}
-              size={'xs'}
-              onClick={() => removeContractFromGroup(group, contract)}
-            >
-              <XIcon className="h-4 w-4 text-gray-500" />
-            </Button>
-          )}
-        </Row>
-      ))}
     </Col>
   )
 }

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

@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { groupPath } from 'web/lib/firebase/groups'
@@ -87,10 +86,8 @@ export function CreateGroupButton(props: {
       }}
       submitBtn={{
         label: 'Create',
-        className: clsx(
+        color: 'green',
-          'normal-case',
+        isSubmitting,
-          isSubmitting ? 'loading btn-disabled' : ' btn-primary'
-        ),
       }}
       onSubmitWithSuccess={onSubmit}
       onOpenChanged={(isOpen) => {

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

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import { PencilIcon } from '@heroicons/react/outline'
 
 import { Group } from 'common/group'
-import { deleteGroup, joinGroup } from 'web/lib/firebase/groups'
+import { deleteGroup, joinGroup, updateGroup } from 'web/lib/firebase/groups'
 import { Spacer } from '../layout/spacer'
 import { useRouter } from 'next/router'
 import { Modal } from 'web/components/layout/modal'
@@ -31,6 +31,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
     setIsSubmitting(true)
 
     await Promise.all(addMemberUsers.map((user) => joinGroup(group, user.id)))
+    await updateGroup(group, { name })
 
     setIsSubmitting(false)
     updateOpen(false)

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

@@ -6,12 +6,13 @@ import { Spacer } from '../layout/spacer'
 import { Group } from 'common/group'
 import { deleteFieldFromGroup, updateGroup } from 'web/lib/firebase/groups'
 import PencilIcon from '@heroicons/react/solid/PencilIcon'
-import { DocumentRemoveIcon } from '@heroicons/react/solid'
+import { TrashIcon } from '@heroicons/react/solid'
 import { createPost } from 'web/lib/firebase/api'
 import { Post } from 'common/post'
 import { deletePost, updatePost } from 'web/lib/firebase/posts'
 import { useState } from 'react'
 import { usePost } from 'web/hooks/use-post'
+import { Col } from '../layout/col'
 
 export function GroupOverviewPost(props: {
   group: Group
@@ -43,6 +44,7 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
     if (!editor) return
     const newPost = {
       title: group.name,
+      subtitle: 'About post for the group',
       content: editor.getJSON(),
     }
 
@@ -98,35 +100,31 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
           </p>
         </div>
       ) : (
-        <div className="relative">
+        <Col>
-          <div className="absolute top-0 right-0 z-10 space-x-2">
+          <Content content={post.content} />
+          <Row className="place-content-end">
             <Button
-              color="gray"
+              color="gray-white"
-              size="xs"
+              size="2xs"
               onClick={() => {
                 setEditing(true)
                 editor?.commands.focus('end')
               }}
             >
-              <PencilIcon className="inline h-4 w-4" />
+              <PencilIcon className="inline h-5 w-5" />
-              Edit
             </Button>
 
             <Button
-              color="gray"
+              color="gray-white"
-              size="xs"
+              size="2xs"
               onClick={() => {
                 deleteGroupAboutPost()
               }}
             >
-              <DocumentRemoveIcon className="inline h-4 w-4" />
+              <TrashIcon className="inline h-5 w-5 text-red-500" />
-              Delete
             </Button>
-          </div>
+          </Row>
-
+        </Col>
-          <Content content={post.content} />
-          <Spacer h={2} />
-        </div>
       )}
     </>
   )

web/components/groups/group-overview.tsx

@@ -36,8 +36,11 @@ import { CopyLinkButton } from '../copy-link-button'
 import { REFERRAL_AMOUNT } from 'common/economy'
 import toast from 'react-hot-toast'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { PostCard } from '../post-card'
+import { PostCard, PostCardList } from '../post-card'
 import { LoadingIndicator } from '../loading-indicator'
+import { useUser } from 'web/hooks/use-user'
+import { CreatePost } from '../create-post'
+import { Modal } from '../layout/modal'
 
 const MAX_TRENDING_POSTS = 6
 
@@ -59,7 +62,6 @@ export function GroupOverview(props: {
         posts={posts}
         isEditable={isEditable}
       />
-
       {(group.aboutPostId != null || isEditable) && (
         <>
           <SectionHeader label={'About'} href={'/post/' + group.slug} />
@@ -87,10 +89,55 @@ export function GroupOverview(props: {
         user={user}
         memberIds={memberIds}
       />
+
+      <GroupPosts group={group} posts={posts} />
     </Col>
   )
 }
 
+export function GroupPosts(props: { posts: Post[]; group: Group }) {
+  const { posts, group } = props
+  const [showCreatePost, setShowCreatePost] = useState(false)
+  const user = useUser()
+
+  const createPost = (
+    <Modal size="xl" open={showCreatePost} setOpen={setShowCreatePost}>
+      <div className="w-full bg-white py-10">
+        <CreatePost group={group} />
+      </div>
+    </Modal>
+  )
+
+  const postList = (
+    <div className=" align-start w-full items-start">
+      <Row className="flex justify-between">
+        <Col>
+          <SectionHeader label={'Latest Posts'} />
+        </Col>
+        <Col>
+          {user && (
+            <Button
+              className="btn-md"
+              onClick={() => setShowCreatePost(!showCreatePost)}
+            >
+              Add a Post
+            </Button>
+          )}
+        </Col>
+      </Row>
+
+      <div className="mt-2">
+        <PostCardList posts={posts} />
+        {posts.length === 0 && (
+          <div className="text-center text-gray-500">No posts yet</div>
+        )}
+      </div>
+    </div>
+  )
+
+  return showCreatePost ? createPost : postList
+}
+
 function GroupOverviewPinned(props: {
   group: Group
   posts: Post[]

web/components/groups/group-selector.tsx

@@ -163,7 +163,7 @@ export function GroupSelector(props: {
                   user={creator}
                   onOpenStateChange={setIsCreatingNewGroup}
                   className={
-                    'w-full justify-start rounded-none border-0 bg-white pl-2 font-normal text-gray-900 hover:bg-indigo-500 hover:text-white'
+                    'flex w-full flex-row items-center justify-start rounded-none border-0 bg-white pl-2 font-normal text-gray-900 hover:bg-indigo-500 hover:text-white'
                   }
                   label={'Create a new Group'}
                   addGroupIdParamOnSubmit

web/components/groups/groups-button.tsx

@@ -13,6 +13,7 @@ import { joinGroup, leaveGroup } from 'web/lib/firebase/groups'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { GroupLinkItem } from 'web/pages/groups'
 import toast from 'react-hot-toast'
+import { Button } from '../button'
 
 export function GroupsButton(props: { user: User; className?: string }) {
   const { user, className } = props
@@ -92,23 +93,22 @@ export function JoinOrLeaveGroupButton(props: {
   group: Group
   isMember: boolean
   user: User | undefined | null
-  small?: boolean
   className?: string
 }) {
-  const { group, small, className, isMember, user } = props
+  const { group, className, isMember, user } = props
-  const smallStyle =
-    'btn !btn-xs border-2 border-gray-500 bg-white normal-case text-gray-500 hover:border-gray-500 hover:bg-white hover:text-gray-500'
 
   if (!user) {
     if (!group.anyoneCanJoin)
       return <div className={clsx(className, 'text-gray-500')}>Closed</div>
     return (
-      <button
+      <Button
+        size="xs"
+        color="blue"
         onClick={firebaseLogin}
-        className={clsx('btn btn-sm', small && smallStyle, className)}
+        className={className}
       >
         Login to follow
-      </button>
+      </Button>
     )
   }
   const onJoinGroup = () => {
@@ -124,27 +124,27 @@ export function JoinOrLeaveGroupButton(props: {
 
   if (isMember) {
     return (
-      <button
+      <Button
-        className={clsx(
+        size="xs"
-          'btn btn-outline btn-xs',
+        color="gray-white"
-          small && smallStyle,
+        className={`${className}  border-greyscale-4 border !border-solid`}
-          className
-        )}
         onClick={withTracking(onLeaveGroup, 'leave group')}
       >
         Unfollow
-      </button>
+      </Button>
     )
   }
 
   if (!group.anyoneCanJoin)
     return <div className={clsx(className, 'text-gray-500')}>Closed</div>
   return (
-    <button
+    <Button
-      className={clsx('btn btn-sm', small && smallStyle, className)}
+      size="xs"
+      color="blue"
+      className={className}
       onClick={withTracking(onJoinGroup, 'join group')}
     >
       Follow
-    </button>
+    </Button>
   )
 }

web/components/nav/sidebar.tsx

@@ -63,7 +63,8 @@ export default function Sidebar(props: {
       )}
       <Spacer h={6} />
 
-      {!user && <SignInButton className="mb-4" />}
+      {user === undefined && <div className="h-[178px]" />}
+      {user === null && <SignInButton className="mb-4" />}
 
       {user && <ProfileSummary user={user} />}
 

web/components/numeric-resolution-panel.tsx

@@ -73,13 +73,6 @@ export function NumericResolutionPanel(props: {
     setIsSubmitting(false)
   }
 
-  const submitButtonClass =
-    outcomeMode === 'CANCEL'
-      ? 'bg-yellow-400 hover:bg-yellow-500'
-      : outcome !== undefined
-      ? 'btn-primary'
-      : 'btn-disabled'
-
   return (
     <Col
       className={clsx(
@@ -129,7 +122,6 @@ export function NumericResolutionPanel(props: {
         onResolve={resolve}
         isSubmitting={isSubmitting}
         openModalButtonClass={clsx('w-full mt-2')}
-        submitButtonClass={submitButtonClass}
         color={outcomeMode === 'CANCEL' ? 'yellow' : 'indigo'}
         disabled={outcomeMode === undefined}
       />

web/components/pinned-select-modal.tsx

@@ -2,7 +2,6 @@ import { Contract } from 'common/contract'
 import { Group } from 'common/group'
 import { Post } from 'common/post'
 import { useState } from 'react'
-import { PostCardList } from 'web/pages/group/[...slugs]'
 import { Button } from './button'
 import { PillButton } from './buttons/pill-button'
 import { ContractSearch } from './contract-search'
@@ -10,6 +9,7 @@ import { Col } from './layout/col'
 import { Modal } from './layout/modal'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
+import { PostCardList } from './post-card'
 
 export function PinnedSelectModal(props: {
   title: string

web/components/portfolio/portfolio-value-graph.tsx

@@ -18,8 +18,8 @@ const MARGIN_Y = MARGIN.top + MARGIN.bottom
 export type GraphMode = 'profit' | 'value'
 
 export const PortfolioTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
-  const { mouseX, xScale } = props
+  const { x, xScale } = props
-  const d = dayjs(xScale.invert(mouseX))
+  const d = dayjs(xScale.invert(x))
   return (
     <Col className="text-xs font-semibold sm:text-sm">
       <div>{d.format('MMM/D/YY')}</div>

web/components/portfolio/portfolio-value-section.tsx

@@ -32,10 +32,10 @@ export const PortfolioValueSection = memo(
     return (
       <>
         <Row className="mb-2 justify-between">
-          <Row className="gap-4 sm:gap-8">
+          <Row className="gap-2">
             <Col
               className={clsx(
-                'cursor-pointer',
+                'w-24 cursor-pointer sm:w-28 ',
                 graphMode != 'profit'
                   ? 'cursor-pointer opacity-40 hover:opacity-80'
                   : ''
@@ -72,7 +72,7 @@ export const PortfolioValueSection = memo(
 
             <Col
               className={clsx(
-                'cursor-pointer',
+                'w-24 cursor-pointer sm:w-28',
                 graphMode != 'value' ? 'opacity-40 hover:opacity-80' : ''
               )}
               onClick={() => {

web/components/post-card.tsx

@@ -1,4 +1,5 @@
 import { track } from '@amplitude/analytics-browser'
+import { DocumentIcon } from '@heroicons/react/solid'
 import clsx from 'clsx'
 import { Post } from 'common/post'
 import Link from 'next/link'
@@ -6,8 +7,8 @@ import { useUserById } from 'web/hooks/use-user'
 import { postPath } from 'web/lib/firebase/posts'
 import { fromNow } from 'web/lib/util/time'
 import { Avatar } from './avatar'
+import { Card } from './card'
 import { CardHighlightOptions } from './contract/contracts-grid'
-import { Row } from './layout/row'
 import { UserLink } from './user-link'
 
 export function PostCard(props: {
@@ -25,9 +26,9 @@ export function PostCard(props: {
 
   return (
     <div className="relative py-1">
-      <Row
+      <Card
         className={clsx(
-          ' relative gap-3 rounded-lg bg-white py-2 shadow-md hover:cursor-pointer hover:bg-gray-100',
+          'relative flex gap-3 py-2 px-3',
           itemIds?.includes(post.id) && highlightClassName
         )}
       >
@@ -44,9 +45,20 @@ export function PostCard(props: {
             <span className="mx-1">•</span>
             <span className="text-gray-500">{fromNow(post.createdTime)}</span>
           </div>
-          <div className="text-lg font-medium text-gray-900">{post.title}</div>
+          <div className=" break-words text-lg font-medium  text-gray-900">
+            {post.title}
+          </div>
+          <div className="font-small  text-md  break-words text-gray-500">
+            {post.subtitle}
+          </div>
         </div>
-      </Row>
+        <div>
+          <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
+            <DocumentIcon className={'h3 w-3'} />
+            Post
+          </span>
+        </div>
+      </Card>
       {onPostClick ? (
         <a
           className="absolute top-0 left-0 right-0 bottom-0"
@@ -80,3 +92,23 @@ export function PostCard(props: {
     </div>
   )
 }
+
+export function PostCardList(props: {
+  posts: Post[]
+  highlightOptions?: CardHighlightOptions
+  onPostClick?: (post: Post) => void
+}) {
+  const { posts, onPostClick, highlightOptions } = props
+  return (
+    <div className="w-full">
+      {posts.map((post) => (
+        <PostCard
+          key={post.id}
+          post={post}
+          onPostClick={onPostClick}
+          highlightOptions={highlightOptions}
+        />
+      ))}
+    </div>
+  )
+}

web/components/relative-timestamp.tsx

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

web/components/share-embed-button.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { CodeIcon } from '@heroicons/react/outline'
-import { Menu } from '@headlessui/react'
 import toast from 'react-hot-toast'
 
 import { Contract } from 'common/contract'
@@ -8,6 +7,7 @@ import { contractPath } from 'web/lib/firebase/contracts'
 import { DOMAIN } from 'common/envs/constants'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { track } from 'web/lib/service/analytics'
+import { Button } from './button'
 
 export function embedContractCode(contract: Contract) {
   const title = contract.question
@@ -15,6 +15,7 @@ export function embedContractCode(contract: Contract) {
   return `<iframe src="${src}" title="${title}" frameborder="0"></iframe>`
 }
 
+// TODO: move this function elsewhere
 export function embedContractGridCode(contracts: Contract[]) {
   const height = (contracts.length - (contracts.length % 2)) * 100 + 'px'
   const src = `https://${DOMAIN}/embed/grid/${contracts
@@ -26,24 +27,21 @@ export function embedContractGridCode(contracts: Contract[]) {
 export function ShareEmbedButton(props: { contract: Contract }) {
   const { contract } = props
 
-  const codeIcon = <CodeIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
+  const codeIcon = <CodeIcon className="h-4 w-4" aria-hidden />
 
   return (
-    <Menu
+    <Button
-      as="div"
+      size="2xs"
-      className="relative z-10 flex-shrink-0"
+      color="gray-outline"
-      onMouseUp={() => {
+      className="gap-1"
+      onClick={() => {
         copyToClipboard(embedContractCode(contract))
-        toast.success('Embed code copied!', {
+        toast.success('Embed code copied!', { icon: codeIcon })
-          icon: codeIcon,
-        })
         track('copy embed code')
       }}
     >
-      <Menu.Button className="btn btn-xs border-2 !border-gray-500 !bg-white normal-case text-gray-500">
+      {codeIcon}
-        {codeIcon}
+      Embed
-        Embed
+    </Button>
-      </Menu.Button>
-    </Menu>
   )
 }

web/components/share-post-modal.tsx

@@ -1,13 +1,8 @@
-import { LinkIcon } from '@heroicons/react/outline'
-import toast from 'react-hot-toast'
-import { copyToClipboard } from 'web/lib/util/copy'
-import { track } from 'web/lib/service/analytics'
 import { Modal } from './layout/modal'
 import { Col } from './layout/col'
 import { Title } from './title'
-import { Button } from './button'
 import { TweetButton } from './tweet-button'
-import { Row } from './layout/row'
+import { CopyLinkButton } from './copy-link-button'
 
 export function SharePostModal(props: {
   shareUrl: string
@@ -16,30 +11,14 @@ export function SharePostModal(props: {
 }) {
   const { isOpen, setOpen, shareUrl } = props
 
-  const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
-
   return (
     <Modal open={isOpen} setOpen={setOpen} size="md">
       <Col className="gap-4 rounded bg-white p-4">
         <Title className="!mt-0 !mb-2" text="Share this post" />
-        <Button
+        <CopyLinkButton url={shareUrl} tracking="copy share post link" />
-          size="2xl"
+        <div className="self-center">
-          color="gradient"
+          <TweetButton tweetText={shareUrl} />
-          className={'mb-2 flex max-w-xs self-center'}
+        </div>
-          onClick={() => {
-            copyToClipboard(shareUrl)
-            toast.success('Link copied!', {
-              icon: linkIcon,
-            })
-            track('copy share post link')
-          }}
-        >
-          {linkIcon} Copy link
-        </Button>
-
-        <Row className="z-0 justify-start gap-4 self-center">
-          <TweetButton className="self-start" tweetText={shareUrl} />
-        </Row>
       </Col>
     </Modal>
   )

web/components/sized-container.tsx

@@ -29,7 +29,14 @@ export const SizedContainer = (props: {
   }, [threshold, fullHeight, mobileHeight])
   return (
     <div ref={containerRef}>
-      {width != null && height != null && children(width, height)}
+      {width != null && height != null ? (
+        children(width, height)
+      ) : (
+        <>
+          <div className="sm:hidden" style={{ height: mobileHeight }} />
+          <div className="hidden sm:flex" style={{ height: fullHeight }} />
+        </>
+      )}
     </div>
   )
 }

web/components/tipper.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import toast from 'react-hot-toast'
-import { debounce, sum } from 'lodash'
+import { debounce } from 'lodash'
 
 import { Comment } from 'common/comment'
 import { User } from 'common/user'
-import { CommentTips } from 'web/hooks/use-tip-txns'
 import { useUser } from 'web/hooks/use-user'
 import { transact } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
@@ -13,25 +12,27 @@ import { Row } from './layout/row'
 import { LIKE_TIP_AMOUNT } from 'common/like'
 import { formatMoney } from 'common/util/format'
 
-export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
+export function Tipper(prop: {
-  const { comment, tips } = prop
+  comment: Comment
+  myTip: number
+  totalTip: number
+}) {
+  const { comment, myTip, totalTip } = prop
 
   const me = useUser()
-  const myId = me?.id ?? ''
-  const savedTip = tips[myId] ?? 0
 
-  const [localTip, setLocalTip] = useState(savedTip)
+  const [localTip, setLocalTip] = useState(myTip)
 
   // listen for user being set
   const initialized = useRef(false)
   useEffect(() => {
-    if (tips[myId] && !initialized.current) {
+    if (myTip && !initialized.current) {
-      setLocalTip(tips[myId])
+      setLocalTip(myTip)
       initialized.current = true
     }
-  }, [tips, myId])
+  }, [myTip])
 
-  const total = sum(Object.values(tips)) - savedTip + localTip
+  const total = totalTip - myTip + localTip
 
   // declare debounced function only on first render
   const [saveTip] = useState(() =>
@@ -73,7 +74,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
 
   const addTip = (delta: number) => {
     setLocalTip(localTip + delta)
-    me && saveTip(me, comment, localTip - savedTip + delta)
+    me && saveTip(me, comment, localTip - myTip + delta)
     toast(`You tipped ${comment.userName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
   }
 

web/components/tweet-button.tsx

@@ -1,22 +1,23 @@
 import clsx from 'clsx'
+import TwitterLogo from 'web/lib/icons/twitter-logo'
 import { trackCallback } from 'web/lib/service/analytics'
+import { buttonClass } from './button'
 
-export function TweetButton(props: { className?: string; tweetText: string }) {
+export function TweetButton(props: { tweetText: string }) {
-  const { tweetText, className } = props
+  const { tweetText } = props
 
   return (
     <a
-      className={clsx('btn btn-xs flex-nowrap normal-case', className)}
+      // #1da1f2 is twitter blue
-      style={{
+      className={clsx(
-        backgroundColor: 'white',
+        buttonClass('2xs', 'override'),
-        border: '2px solid #1da1f2',
+        'gap-1 border-2 border-[#1da1f2] text-[#1da1f2] hover:bg-[#1da1f2] hover:text-white'
-        color: '#1da1f2',
+      )}
-      }}
       href={getTweetHref(tweetText)}
       onClick={trackCallback('share tweet')}
       target="_blank"
     >
-      <img className="mr-2" src={'/twitter-logo.svg'} width={15} height={15} />
+      <TwitterLogo width={15} height={15} />
       <div>Tweet</div>
     </a>
   )

web/components/usa-map/state-election-map.tsx

@@ -3,12 +3,10 @@ import Router from 'next/router'
 import { useEffect, useState } from 'react'
 
 import { getProbability } from 'common/calculate'
-import { Contract, CPMMBinaryContract } from 'common/contract'
+import { CPMMBinaryContract } from 'common/contract'
 import { Customize, USAMap } from './usa-map'
-import {
+import { listenForContract } from 'web/lib/firebase/contracts'
-  getContractFromSlug,
+import { interpolateColor } from 'common/util/color'
-  listenForContract,
-} from 'web/lib/firebase/contracts'
 
 export interface StateElectionMarket {
   creatorUsername: string
@@ -17,10 +15,14 @@ export interface StateElectionMarket {
   state: string
 }
 
-export function StateElectionMap(props: { markets: StateElectionMarket[] }) {
+export function StateElectionMap(props: {
+  markets: StateElectionMarket[]
+  contracts: CPMMBinaryContract[]
+}) {
   const { markets } = props
+  const [contracts, setContracts] = useState(props.contracts)
+  useUpdateContracts(contracts, setContracts)
 
-  const contracts = useContracts(markets.map((m) => m.slug))
   const probs = contracts.map((c) =>
     c ? getProbability(c as CPMMBinaryContract) : 0.5
   )
@@ -45,35 +47,30 @@ export function StateElectionMap(props: { markets: StateElectionMarket[] }) {
 
 const probToColor = (prob: number, isWinRepublican: boolean) => {
   const p = isWinRepublican ? prob : 1 - prob
-  const hue = p > 0.5 ? 350 : 240
+  const color = p > 0.5 ? '#e4534b' : '#5f6eb0'
-  const saturation = 100
+  return interpolateColor('#ebe4ec', color, Math.abs(p - 0.5) * 2)
-  const lightness = 100 - 50 * Math.abs(p - 0.5)
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`
 }
 
-const useContracts = (slugs: string[]) => {
+const useUpdateContracts = (
-  const [contracts, setContracts] = useState<(Contract | undefined)[]>(
+  contracts: CPMMBinaryContract[],
-    slugs.map(() => undefined)
+  setContracts: (newContracts: CPMMBinaryContract[]) => void
-  )
+) => {
-
-  useEffect(() => {
-    Promise.all(slugs.map((slug) => getContractFromSlug(slug))).then(
-      (contracts) => setContracts(contracts)
-    )
-  }, [slugs])
-
   useEffect(() => {
     if (contracts.some((c) => c === undefined)) return
 
     // listen to contract updates
-    const unsubs = (contracts as Contract[]).map((c, i) =>
+    const unsubs = contracts
-      listenForContract(
+      .filter((c) => !!c)
-        c.id,
+      .map((c, i) =>
-        (newC) => newC && setContracts(setAt(contracts, i, newC))
+        listenForContract(
+          c.id,
+          (newC) =>
+            newC &&
+            setContracts(setAt(contracts, i, newC as CPMMBinaryContract))
+        )
       )
-    )
     return () => unsubs.forEach((u) => u())
-  }, [contracts])
+  }, [contracts, setContracts])
 
   return contracts
 }

web/components/usa-map/usa-map.tsx

@@ -1,6 +1,7 @@
 // https://github.com/jb-1980/usa-map-react
 // MIT License
 
+import clsx from 'clsx'
 import { DATA } from './data'
 import { USAState } from './usa-state'
 
@@ -53,8 +54,6 @@ export const USAMap = ({
   onClick = (e) => {
     console.log(e.currentTarget.dataset.name)
   },
-  width = 959,
-  height = 593,
   title = 'US states map',
   defaultFill = '#d3d3d3',
   customize,
@@ -68,10 +67,8 @@ export const USAMap = ({
 
   return (
     <svg
-      className={className}
+      className={clsx('flex h-96 w-full sm:h-full', className)}
       xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
       viewBox="0 0 959 593"
     >
       <title>{title}</title>

web/components/warning-confirmation-button.tsx

@@ -11,12 +11,13 @@ export function WarningConfirmationButton(props: {
   amount: number | undefined
   marketType: 'freeResponse' | 'binary'
   warning?: string
-  onSubmit: () => void
+  onSubmit?: () => void
   disabled: boolean
   isSubmitting: boolean
   openModalButtonClass?: string
   color: ColorType
   size: SizeType
+  actionLabel: string
 }) {
   const {
     amount,
@@ -27,8 +28,15 @@ export function WarningConfirmationButton(props: {
     openModalButtonClass,
     size,
     color,
+    actionLabel,
   } = props
 
+  const buttonText = isSubmitting
+    ? 'Submitting...'
+    : amount
+    ? `${actionLabel} ${formatMoney(amount)}`
+    : actionLabel
+
   if (!warning) {
     return (
       <Button
@@ -38,11 +46,7 @@ export function WarningConfirmationButton(props: {
         onClick={onSubmit}
         color={color}
       >
-        {isSubmitting
+        {buttonText}
-          ? 'Submitting...'
-          : amount
-          ? `Wager ${formatMoney(amount)}`
-          : 'Wager'}
       </Button>
     )
   }
@@ -50,18 +54,18 @@ export function WarningConfirmationButton(props: {
   return (
     <ConfirmationButton
       openModalBtn={{
-        label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
+        label: buttonText,
         size: size,
         color: 'yellow',
-        disabled: isSubmitting,
+        disabled: isSubmitting || disabled,
       }}
       cancelBtn={{
         label: 'Cancel',
-        className: 'btn btn-warning',
+        color: 'yellow',
       }}
       submitBtn={{
         label: 'Submit',
-        className: clsx('btn border-none btn-sm btn-ghost self-center'),
+        color: 'gray',
       }}
       onSubmit={onSubmit}
     >

web/components/yes-no-selector.tsx

@@ -244,7 +244,7 @@ function Button(props: {
       type="button"
       className={clsx(
         'inline-flex flex-1 items-center justify-center rounded-md border border-transparent px-8 py-3 font-medium shadow-sm',
-        color === 'green' && 'bg-teal-500 bg-teal-600 text-white',
+        color === 'green' && 'bg-teal-500 text-white hover:bg-teal-600',
         color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
         color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
         color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',

web/hooks/use-contracts.ts

@@ -92,7 +92,7 @@ export const useContractsByDailyScoreGroups = (
 
 const q = new QueryClient()
 export const getCachedContracts = async () =>
-  q.fetchQuery(['contracts'], () => listAllContracts(1000), {
+  q.fetchQuery(['contracts'], () => listAllContracts(10000), {
     staleTime: Infinity,
   })
 

web/hooks/use-pagination.ts

@@ -91,9 +91,15 @@ export const usePagination = <T>(opts: PaginationOptions<T>) => {
       const nextQ = lastDoc
         ? query(state.baseQ, startAfter(lastDoc), limit(state.pageSize))
         : query(state.baseQ, limit(state.pageSize))
-      return onSnapshot(nextQ, (snapshot) => {
+      return onSnapshot(
-        dispatch({ type: 'LOAD', snapshot })
+        nextQ,
-      })
+        (snapshot) => {
+          dispatch({ type: 'LOAD', snapshot })
+        },
+        (error) => {
+          console.error('error', error)
+        }
+      )
     }
   }, [state.isLoading, state.baseQ, state.docs, state.pageSize])
 

web/hooks/use-persistent-state.ts

@@ -1,12 +1,13 @@
 import { useEffect } from 'react'
 import { useStateCheckEquality } from './use-state-check-equality'
-import { NextRouter } from 'next/router'
+import { NextRouter, useRouter } from 'next/router'
 
 export type PersistenceOptions<T> = { key: string; store: PersistentStore<T> }
 
 export interface PersistentStore<T> {
   get: (k: string) => T | undefined
   set: (k: string, v: T | undefined) => void
+  readsUrl?: boolean
 }
 
 const withURLParam = (location: Location, k: string, v?: string) => {
@@ -61,6 +62,7 @@ export const urlParamStore = (router: NextRouter): PersistentStore<string> => ({
       window.history.replaceState(updatedState, '', url)
     }
   },
+  readsUrl: true,
 })
 
 export const historyStore = <T>(prefix = '__manifold'): PersistentStore<T> => ({
@@ -102,5 +104,20 @@ export const usePersistentState = <T>(
       store.set(key, state)
     }
   }, [key, state])
+
+  if (store?.readsUrl) {
+    // On page load, router isn't ready immediately, so set state once it is.
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = useRouter()
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (router.isReady) {
+        const savedValue = key != null ? store.get(key) : undefined
+        setState(savedValue ?? initial)
+      }
+    }, [router.isReady])
+  }
+
   return [state, setState] as const
 }

web/lib/firebase/contracts.ts

@@ -108,7 +108,6 @@ export const tournamentContractsByGroupSlugQuery = (slug: string) =>
   query(
     contracts,
     where('groupSlugs', 'array-contains', slug),
-    where('isResolved', '==', false),
     orderBy('popularityScore', 'desc')
   )
 

web/lib/icons/twitter-logo.tsx

@@ -0,0 +1,28 @@
+export default function TwitterLogo(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      version="1.1"
+      id="Logo"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      viewBox="0 0 248 204"
+      stroke="currentColor"
+      fill="currentColor"
+      {...props}
+    >
+      <g id="Logo_1_">
+        <path
+          id="white_background"
+          className="st0"
+          d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
+		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
+		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
+		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
+		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
+		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"
+        />
+      </g>
+    </svg>
+  )
+}

web/lib/service/sprig.ts

@@ -5,30 +5,32 @@
 import { ENV_CONFIG } from 'common/envs/constants'
 import { PROD_CONFIG } from 'common/envs/prod'
 
-try {
+if (ENV_CONFIG.domain === PROD_CONFIG.domain) {
-  ;(function (l, e, a, p) {
+  try {
-    if (window.Sprig) return
+    ;(function (l, e, a, p) {
-    window.Sprig = function (...args) {
+      if (window.Sprig) return
-      S._queue.push(args)
+      window.Sprig = function (...args) {
-    }
+        S._queue.push(args)
-    const S = window.Sprig
+      }
-    S.appId = a
+      const S = window.Sprig
-    S._queue = []
+      S.appId = a
-    window.UserLeap = S
+      S._queue = []
-    a = l.createElement('script')
+      window.UserLeap = S
-    a.async = 1
+      a = l.createElement('script')
-    a.src = e + '?id=' + S.appId
+      a.async = 1
-    p = l.getElementsByTagName('script')[0]
+      a.src = e + '?id=' + S.appId
-    ENV_CONFIG.domain === PROD_CONFIG.domain && p.parentNode.insertBefore(a, p)
+      p = l.getElementsByTagName('script')[0]
-  })(document, 'https://cdn.sprig.com/shim.js', ENV_CONFIG.sprigEnvironmentId)
+      p.parentNode.insertBefore(a, p)
-} catch (error) {
+    })(document, 'https://cdn.sprig.com/shim.js', ENV_CONFIG.sprigEnvironmentId)
-  console.log('Error initializing Sprig, please complain to Barak', error)
+  } catch (error) {
+    console.log('Error initializing Sprig, please complain to Barak', error)
+  }
 }
 
 export function setUserId(userId: string): void {
-  window.Sprig('setUserId', userId)
+  if (window.Sprig) window.Sprig('setUserId', userId)
 }
 
 export function setAttributes(attributes: Record<string, unknown>): void {
-  window.Sprig('setAttributes', attributes)
+  if (window.Sprig) window.Sprig('setAttributes', attributes)
 }

web/package.json

@@ -22,6 +22,7 @@
     "@amplitude/analytics-browser": "0.4.1",
     "@floating-ui/react-dom-interactions": "0.9.2",
     "@headlessui/react": "1.6.1",
+    "@hello-pangea/dnd": "16.0.0",
     "@heroicons/react": "1.0.6",
     "@react-query-firebase/firestore": "0.4.2",
     "@tiptap/core": "2.0.0-beta.182",
@@ -54,11 +55,10 @@
     "next": "12.3.1",
     "node-fetch": "3.2.4",
     "prosemirror-state": "1.4.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-beautiful-dnd": "13.1.1",
     "react-confetti": "6.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
-    "react-expanding-textarea": "2.3.5",
+    "react-expanding-textarea": "2.3.6",
     "react-hot-toast": "2.2.0",
     "react-instantsearch-hooks-web": "6.24.1",
     "react-masonry-css": "1.0.16",
@@ -75,9 +75,8 @@
     "@types/d3": "7.4.0",
     "@types/lodash": "4.14.178",
     "@types/node": "16.11.11",
-    "@types/react": "17.0.43",
+    "@types/react": "18.0.21",
-    "@types/react-beautiful-dnd": "13.1.2",
+    "@types/react-dom": "18.0.6",
-    "@types/react-dom": "17.0.2",
     "@types/string-similarity": "^4.0.0",
     "autoprefixer": "10.2.6",
     "critters": "0.0.16",

web/pages/[username]/[contractSlug].tsx

@@ -207,14 +207,18 @@ export function ContractPageContent(
   return (
     <Page
       rightSidebar={
-        <>
+        user || user === null ? (
-          <ContractPageSidebar contract={contract} />
+          <>
-          {isCreator && (
+            <ContractPageSidebar contract={contract} />
-            <Col className={'xl:hidden'}>
+            {isCreator && (
-              <RecommendedContractsWidget contract={contract} />
+              <Col className={'xl:hidden'}>
-            </Col>
+                <RecommendedContractsWidget contract={contract} />
-          )}
+              </Col>
-        </>
+            )}
+          </>
+        ) : (
+          <div />
+        )
       }
     >
       {showConfetti && (

web/pages/_app.tsx

@@ -42,7 +42,7 @@ function MyApp({ Component, pageProps }: AppProps<ManifoldPageProps>) {
         `}
       </Script>
       <Head>
-        <title>Manifold Markets — A market for every question</title>
+        <title>{'Manifold Markets — A market for every question'}</title>
 
         <meta
           property="og:title"

web/pages/add-funds.tsx

@@ -9,6 +9,7 @@ import { Page } from 'web/components/page'
 import { useTracking } from 'web/hooks/use-tracking'
 import { trackCallback } from 'web/lib/service/analytics'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
+import { Button } from 'web/components/button'
 
 export const getServerSideProps = redirectIfLoggedOut('/')
 
@@ -33,15 +34,15 @@ export default function AddFundsPage() {
         <Col className="h-full rounded bg-white p-4 py-8 sm:p-8 sm:shadow-md">
           <Title className="!mt-0" text="Get Mana" />
           <img
-            className="mb-6 block -scale-x-100 self-center"
+            className="mb-6 block self-center"
-            src="/stylized-crane-black.png"
+            src="/welcome/manipurple.png"
             width={200}
             height={200}
           />
 
           <div className="mb-6 text-gray-500">
-            Buy mana (M$) to trade in your favorite markets. <br /> (Not
+            Buy mana (M$) to trade in your favorite markets. <br />{' '}
-            redeemable for cash.)
+            <i>Not redeemable for cash.</i>
           </div>
 
           <div className="mb-2 text-sm text-gray-500">Amount</div>
@@ -63,13 +64,15 @@ export default function AddFundsPage() {
             method="POST"
             className="mt-8"
           >
-            <button
+            <Button
               type="submit"
-              className="btn btn-primary w-full bg-gradient-to-r from-indigo-500 to-blue-500 font-medium hover:from-indigo-600 hover:to-blue-600"
+              color="gradient"
+              size="xl"
+              className="w-full"
               onClick={trackCallback('checkout', { amount: amountSelected })}
             >
               Checkout
-            </button>
+            </Button>
           </form>
         </Col>
       </Col>

web/pages/create.tsx

@@ -38,6 +38,7 @@ import { ExternalLinkIcon } from '@heroicons/react/outline'
 import { SiteLink } from 'web/components/site-link'
 import { Button } from 'web/components/button'
 import { AddFundsModal } from 'web/components/add-funds-modal'
+import ShortToggle from 'web/components/widgets/short-toggle'
 
 export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
   return { props: { auth: await getUserAndPrivateUser(creds.uid) } }
@@ -50,6 +51,7 @@ type NewQuestionParams = {
   description: string
   closeTime: string
   outcomeType: string
+  visibility: string
   // Params for PSEUDO_NUMERIC outcomeType
   min?: string
   max?: string
@@ -136,7 +138,9 @@ export function NewContract(props: {
   const [maxString, setMaxString] = useState(params?.max ?? '')
   const [isLogScale, setIsLogScale] = useState<boolean>(!!params?.isLogScale)
   const [initialValueString, setInitialValueString] = useState(initValue)
-
+  const [visibility, setVisibility] = useState<visibility>(
+    (params?.visibility as visibility) ?? 'public'
+  )
   // for multiple choice, init to 3 empty answers
   const [answers, setAnswers] = useState(['', '', ''])
 
@@ -168,7 +172,6 @@ export function NewContract(props: {
     undefined
   )
   const [showGroupSelector, setShowGroupSelector] = useState(true)
-  const [visibility, setVisibility] = useState<visibility>('public')
 
   const [fundsModalOpen, setFundsModalOpen] = useState(false)
 
@@ -414,14 +417,9 @@ export function NewContract(props: {
 
       <Row className="form-control my-2 items-center gap-2 text-sm">
         <span>Display this market on homepage</span>
-        <input
+        <ShortToggle
-          type="checkbox"
+          on={visibility === 'public'}
-          checked={visibility === 'public'}
+          setOn={(on) => setVisibility(on ? 'public' : 'unlisted')}
-          disabled={isSubmitting}
-          className="cursor-pointer"
-          onChange={(e) =>
-            setVisibility(e.target.checked ? 'public' : 'unlisted')
-          }
         />
       </Row>
 

web/pages/date-docs/create.tsx

@@ -23,6 +23,7 @@ export default function CreateDateDocPage() {
   })
 
   const title = `${user?.name}'s Date Doc`
+  const subtitle = 'Manifold dating docs'
   const [birthday, setBirthday] = useState<undefined | string>(undefined)
   const [question, setQuestion] = useState(
     'Will I find a partner in the next 3 months?'
@@ -46,6 +47,7 @@ export default function CreateDateDocPage() {
       'id' | 'creatorId' | 'createdTime' | 'slug' | 'contractSlug'
     > & { question: string } = {
       title,
+      subtitle,
       content: editor.getJSON(),
       bounty: 0,
       birthday: birthdayTime,

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

@@ -42,11 +42,7 @@ import { SelectMarketsModal } from 'web/components/contract-select-modal'
 import { BETTORS } from 'common/user'
 import { Page } from 'web/components/page'
 import { Tabs } from 'web/components/layout/tabs'
-import { Title } from 'web/components/title'
-import { CreatePost } from 'web/components/create-post'
 import { GroupOverview } from 'web/components/groups/group-overview'
-import { CardHighlightOptions } from 'web/components/contract/contracts-grid'
-import { PostCard } from 'web/components/post-card'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -183,16 +179,6 @@ export default function GroupPage(props: {
     </Col>
   )
 
-  const postsPage = (
-    <>
-      <Col>
-        <div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
-          {posts && <GroupPosts posts={groupPosts} group={group} />}
-        </div>
-      </Col>
-    </>
-  )
-
   const overviewPage = (
     <>
       <GroupOverview
@@ -249,10 +235,6 @@ export default function GroupPage(props: {
       title: 'Leaderboards',
       content: leaderboardTab,
     },
-    {
-      title: 'Posts',
-      content: postsPage,
-    },
   ]
 
   return (
@@ -336,63 +318,6 @@ function GroupLeaderboard(props: {
   )
 }
 
-export function GroupPosts(props: { posts: Post[]; group: Group }) {
-  const { posts, group } = props
-  const [showCreatePost, setShowCreatePost] = useState(false)
-  const user = useUser()
-
-  const createPost = <CreatePost group={group} />
-
-  const postList = (
-    <div className=" align-start w-full items-start">
-      <Row className="flex justify-between">
-        <Col>
-          <Title text={'Posts'} className="!mt-0" />
-        </Col>
-        <Col>
-          {user && (
-            <Button
-              className="btn-md"
-              onClick={() => setShowCreatePost(!showCreatePost)}
-            >
-              Add a Post
-            </Button>
-          )}
-        </Col>
-      </Row>
-
-      <div className="mt-2">
-        <PostCardList posts={posts} />
-        {posts.length === 0 && (
-          <div className="text-center text-gray-500">No posts yet</div>
-        )}
-      </div>
-    </div>
-  )
-
-  return showCreatePost ? createPost : postList
-}
-
-export function PostCardList(props: {
-  posts: Post[]
-  highlightOptions?: CardHighlightOptions
-  onPostClick?: (post: Post) => void
-}) {
-  const { posts, onPostClick, highlightOptions } = props
-  return (
-    <div className="w-full">
-      {posts.map((post) => (
-        <PostCard
-          key={post.id}
-          post={post}
-          onPostClick={onPostClick}
-          highlightOptions={highlightOptions}
-        />
-      ))}
-    </div>
-  )
-}
-
 function AddContractButton(props: { group: Group; user: User }) {
   const { group, user } = props
   const [open, setOpen] = useState(false)

web/pages/home/index.tsx

@@ -21,7 +21,6 @@ import { Group } from 'common/group'
 import { SiteLink } from 'web/components/site-link'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import {
-  useMemberGroupIds,
   useMemberGroupsSubscription,
   useTrendingGroups,
 } from 'web/hooks/use-group'
@@ -80,6 +79,7 @@ export default function Home() {
   const dailyTrendingContracts = useContractsByDailyScoreNotBetOn(user?.id, 6)
 
   const groups = useMemberGroupsSubscription(user)
+  const trendingGroups = useTrendingGroups()
   const groupContracts = useContractsByDailyScoreGroups(
     groups?.map((g) => g.slug)
   )
@@ -113,16 +113,26 @@ export default function Home() {
           <LoadingIndicator />
         ) : (
           <>
-            {renderSections(user, sections, {
+            {renderSections(sections, {
               score: trendingContracts,
               newest: newContracts,
               'daily-trending': dailyTrendingContracts,
               'daily-movers': dailyMovers,
             })}
 
-            <TrendingGroupsSection user={user} />
+            {groups && groupContracts && trendingGroups.length > 0 ? (
-
+              <>
-            {renderGroupSections(user, groups, groupContracts)}
+                <TrendingGroupsSection
+                  className="mb-4"
+                  user={user}
+                  myGroups={groups}
+                  trendingGroups={trendingGroups}
+                />
+                {renderGroupSections(user, groups, groupContracts)}
+              </>
+            ) : (
+              <LoadingIndicator />
+            )}
           </>
         )}
       </Col>
@@ -171,7 +181,6 @@ export const getHomeItems = (sections: string[]) => {
 }
 
 function renderSections(
-  user: User,
   sections: { id: string; label: string }[],
   sectionContracts: {
     'daily-movers': CPMMBinaryContract[]
@@ -192,7 +201,7 @@ function renderSections(
         }
         if (id === 'daily-trending') {
           return (
-            <ContractsSection
+            <SearchSection
               key={id}
               label={label}
               contracts={contracts}
@@ -202,11 +211,11 @@ function renderSections(
           )
         }
         return (
-          <ContractsSection
+          <SearchSection
             key={id}
             label={label}
             contracts={contracts}
-            sort={id === 'daily-trending' ? 'daily-score' : (id as Sort)}
+            sort={id as Sort}
           />
         )
       })}
@@ -216,13 +225,9 @@ function renderSections(
 
 function renderGroupSections(
   user: User,
-  groups: Group[] | undefined,
+  groups: Group[],
-  groupContracts: Dictionary<CPMMBinaryContract[]> | undefined
+  groupContracts: Dictionary<CPMMBinaryContract[]>
 ) {
-  if (!groups || !groupContracts) {
-    return <LoadingIndicator />
-  }
-
   const filteredGroups = groups.filter((g) => groupContracts[g.slug])
   const orderedGroups = sortBy(filteredGroups, (g) =>
     // Sort by sum of top two daily scores.
@@ -285,7 +290,7 @@ function SectionHeader(props: {
   )
 }
 
-function ContractsSection(props: {
+function SearchSection(props: {
   label: string
   contracts: CPMMBinaryContract[]
   sort: Sort
@@ -406,15 +411,16 @@ function DailyStats(props: {
 }
 
 export function TrendingGroupsSection(props: {
-  user: User | null | undefined
+  user: User
+  myGroups: Group[]
+  trendingGroups: Group[]
   className?: string
 }) {
-  const { user, className } = props
+  const { user, myGroups, trendingGroups, className } = props
-  const memberGroupIds = useMemberGroupIds(user) || []
 
-  const groups = useTrendingGroups().filter(
+  const myGroupIds = new Set(myGroups.map((g) => g.id))
-    (g) => !memberGroupIds.includes(g.id)
+
-  )
+  const groups = trendingGroups.filter((g) => !myGroupIds.has(g.id))
   const count = 20
   const chosenGroups = groups.slice(0, count)
 
@@ -433,10 +439,9 @@ export function TrendingGroupsSection(props: {
           <PillButton
             className="flex flex-row items-center gap-1"
             key={g.id}
-            selected={memberGroupIds.includes(g.id)}
+            selected={myGroupIds.has(g.id)}
             onSelect={() => {
-              if (!user) return
+              if (myGroupIds.has(g.id)) leaveGroup(g, user.id)
-              if (memberGroupIds.includes(g.id)) leaveGroup(g, user?.id)
               else {
                 const homeSections = (user.homeSections ?? [])
                   .filter((id) => id !== g.id)

web/pages/labs/index.tsx

@@ -44,8 +44,8 @@ export default function LabsPage() {
           />
 
           <LabCard
-            title="💌 Dating docs"
+            title="💌 Dating"
-            description="Browse dating docs or create your own"
+            description="Browse dating profiles and bet on relationships"
             href="/date-docs"
           />
 

web/pages/midterms.tsx

@@ -1,11 +1,14 @@
+import { CPMMBinaryContract } from 'common/contract'
 import { Col } from 'web/components/layout/col'
 import { Spacer } from 'web/components/layout/spacer'
 import { Page } from 'web/components/page'
+import { SEO } from 'web/components/SEO'
 import { Title } from 'web/components/title'
 import {
   StateElectionMarket,
   StateElectionMap,
 } from 'web/components/usa-map/state-election-map'
+import { getContractFromSlug } from 'web/lib/firebase/contracts'
 
 const senateMidterms: StateElectionMarket[] = [
   {
@@ -175,76 +178,94 @@ const governorMidterms: StateElectionMarket[] = [
   },
 ]
 
-const App = () => {
+export async function getStaticProps() {
+  const senateContracts = await Promise.all(
+    senateMidterms.map((m) =>
+      getContractFromSlug(m.slug).then((c) => c ?? null)
+    )
+  )
+
+  const governorContracts = await Promise.all(
+    governorMidterms.map((m) =>
+      getContractFromSlug(m.slug).then((c) => c ?? null)
+    )
+  )
+
+  return {
+    props: { senateContracts, governorContracts },
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+const App = (props: {
+  senateContracts: CPMMBinaryContract[]
+  governorContracts: CPMMBinaryContract[]
+}) => {
+  const { senateContracts, governorContracts } = props
+
   return (
     <Page className="">
       <Col className="items-center justify-center">
         <Title text="2022 US Midterm Elections" className="mt-2" />
+        <SEO
+          title="2022 US Midterm Elections"
+          description="Bet on the midterm elections using prediction markets. See Manifold's state-by-state breakdown of senate and governor races."
+        />
         <div className="mt-2 text-2xl">Senate</div>
-        <StateElectionMap markets={senateMidterms} />
+        <StateElectionMap
+          markets={senateMidterms}
+          contracts={senateContracts}
+        />
         <iframe
           src="https://manifold.markets/TomShlomi/will-the-gop-control-the-us-senate"
-          title="Will the Democrats control the Senate after the Midterms?"
           frameBorder="0"
-          width={800}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></iframe>
         <Spacer h={8} />
+
         <div className="mt-8 text-2xl">Governors</div>
-        <StateElectionMap markets={governorMidterms} />
+        <StateElectionMap
+          markets={governorMidterms}
+          contracts={governorContracts}
+        />
         <iframe
           src="https://manifold.markets/ManifoldMarkets/democrats-go-down-at-least-one-gove"
-          title="Democrats go down at least one governor on net in 2022"
           frameBorder="0"
-          width={800}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></iframe>
         <Spacer h={8} />
+
         <div className="mt-8 text-2xl">House</div>
         <iframe
           src="https://manifold.markets/BoltonBailey/will-democrats-maintain-control-of"
-          title="Will the Democrats control the House after the Midterms?"
           frameBorder="0"
-          width={800}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></iframe>
         <Spacer h={8} />
+
         <div className="mt-8 text-2xl">Related markets</div>
         <iframe
           src="https://manifold.markets/BoltonBailey/balance-of-power-in-us-congress-aft"
-          title="Balance of Power in US Congress after 2022 Midterms"
           frameBorder="0"
-          width={800}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></iframe>
         <iframe
           src="https://manifold.markets/SG/will-a-democrat-win-the-2024-us-pre"
-          title="Will a Democrat win the 2024 US presidential election?"
           frameBorder="0"
-          width={800}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></iframe>
         <iframe
           src="https://manifold.markets/Ibozz91/will-the-2022-alaska-house-general"
           title="Will the 2022 Alaska House General Nonspecial Election result in a Condorcet failure?"
           frameBorder="0"
-          width={800}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></iframe>
 
         <iframe
           src="https://manifold.markets/NathanpmYoung/how-many-supreme-court-justices-wil-1e597c3853ad"
           title="Will the 2022 Alaska House General Nonspecial Election result in a Condorcet failure?"
           frameBorder="0"
-          width={800}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></iframe>
       </Col>
     </Page>

web/pages/notifications.tsx

@@ -38,6 +38,7 @@ import { formatMoney } from 'common/util/format'
 import { groupPath } from 'web/lib/firebase/groups'
 import {
   BETTING_STREAK_BONUS_AMOUNT,
+  BETTING_STREAK_BONUS_MAX,
   UNIQUE_BETTOR_BONUS_AMOUNT,
 } from 'common/economy'
 import { groupBy, sum, uniqBy } from 'lodash'
@@ -440,7 +441,8 @@ function IncomeNotificationItem(props: {
     } else if (sourceType === 'tip') {
       reasonText = !simple ? `tipped you on` : `in tips on`
     } else if (sourceType === 'betting_streak_bonus') {
-      if (sourceText && +sourceText === 50) reasonText = '(max) for your'
+      if (sourceText && +sourceText === BETTING_STREAK_BONUS_MAX)
+        reasonText = '(max) for your'
       else reasonText = 'for your'
     } else if (sourceType === 'loan' && sourceText) {
       reasonText = `of your invested predictions returned as a`

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

@@ -25,6 +25,7 @@ import { useCommentsOnPost } from 'web/hooks/use-comments'
 import { useUser } from 'web/hooks/use-user'
 import { usePost } from 'web/hooks/use-post'
 import { SEO } from 'web/components/SEO'
+import { Subtitle } from 'web/components/subtitle'
 
 export async function getStaticProps(props: { params: { slugs: string[] } }) {
   const { slugs } = props.params
@@ -75,7 +76,11 @@ export default function PostPage(props: {
         url={'/post/' + post.slug}
       />
       <div className="mx-auto w-full max-w-3xl ">
-        <Title className="!mt-0 py-4 px-2" text={post.title} />
+        <div>
+          <Title className="!my-0 px-2 pt-4" text={post.title} />
+          <br />
+          <Subtitle className="!mt-2 px-2 pb-4" text={post.subtitle} />
+        </div>
         <Row>
           <Col className="flex-1 px-2">
             <div className={'inline-flex'}>
@@ -202,25 +207,20 @@ export function RichEditPost(props: { post: Post }) {
       </Row>
     </>
   ) : (
-    <>
+    <Col>
-      <div className="relative">
+      <Content content={post.content} />
-        <div className="absolute top-0 right-0 z-10 space-x-2">
+      <Row className="place-content-end">
-          <Button
+        <Button
-            color="gray"
+          color="gray-white"
-            size="xs"
+          size="xs"
-            onClick={() => {
+          onClick={() => {
-              setEditing(true)
+            setEditing(true)
-              editor?.commands.focus('end')
+            editor?.commands.focus('end')
-            }}
+          }}
-          >
+        >
-            <PencilIcon className="inline h-4 w-4" />
+          <PencilIcon className="inline h-4 w-4" />
-            Edit
+        </Button>
-          </Button>
+      </Row>
-        </div>
+    </Col>
-
-        <Content content={post.content} />
-        <Spacer h={2} />
-      </div>
-    </>
   )
 }

web/pages/profile.tsx

@@ -215,7 +215,6 @@ export default function ProfilePage(props: {
                 }}
                 submitBtn={{
                   label: 'Update key',
-                  className: 'btn-primary',
                 }}
                 onSubmitWithSuccess={async () => {
                   updateApiKey()

web/pages/server-sitemap.xml.tsx

@@ -4,7 +4,7 @@ import { getServerSideSitemap, ISitemapField } from 'next-sitemap'
 import { listAllContracts } from 'web/lib/firebase/contracts'
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const contracts = await listAllContracts(1000, undefined, 'popularityScore')
+  const contracts = await listAllContracts(5000, undefined, 'popularityScore')
 
   const score = (popularity: number) => Math.tanh(Math.log10(popularity + 1))
 
@@ -14,7 +14,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
       loc: `https://manifold.markets/${market.creatorUsername}/${market.slug}`,
       changefreq: market.volume24Hours > 10 ? 'hourly' : 'daily',
       priority: score(market.popularityScore ?? 0),
-      lastmod: market.lastUpdatedTime,
+      lastmod: new Date(market.lastUpdatedTime ?? 0).toISOString(),
     })) as ISitemapField[]
 
   return await getServerSideSitemap(ctx, fields)

web/pages/stats.tsx

@@ -103,7 +103,7 @@ export function CustomAnalytics(props: Stats) {
             title: 'Daily (7d avg)',
             content: (
               <DailyChart
-                dailyValues={dailyActiveUsersWeeklyAvg}
+                dailyValues={dailyActiveUsersWeeklyAvg.map(Math.round)}
                 startDate={startDate}
               />
             ),

web/pages/tournaments/index.tsx

@@ -24,6 +24,7 @@ import { SiteLink } from 'web/components/site-link'
 import { Carousel } from 'web/components/carousel'
 import { usePagination } from 'web/hooks/use-pagination'
 import { LoadingIndicator } from 'web/components/loading-indicator'
+import { Title } from 'web/components/title'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -48,7 +49,7 @@ const Salem = {
   title: 'CSPI/Salem Forecasting Tournament',
   blurb: 'Top 5 traders qualify for a UT Austin research fellowship.',
   url: 'https://salemcenter.manifold.markets/',
-  award: '$25,000',
+  award: 'US$25,000',
   endTime: toDate('Jul 31, 2023'),
   contractIds: [],
   images: [
@@ -76,35 +77,36 @@ const Salem = {
 }
 
 const tourneys: Tourney[] = [
+  {
+    title: 'Fantasy Football Stock Exchange',
+    blurb: 'How many points will each NFL player score this season?',
+    award: 'US$2,500',
+    endTime: toDate('Jan 6, 2023'),
+    groupId: 'SxGRqXRpV3RAQKudbcNb',
+  },
   {
     title: 'Clearer Thinking Regrant Project',
     blurb: 'Which projects will Clearer Thinking give a grant to?',
-    award: '$13,000',
+    award: 'US$13,000',
     endTime: toDate('Sep 30, 2022'),
     groupId: 'fhksfIgqyWf7OxsV9nkM',
   },
-  // {
+
-  //   title: 'Manifold F2P Tournament',
-  //   blurb:
-  //     'Who can amass the most mana starting from a free-to-play (F2P) account?',
-  //   award: 'Poem',
-  //   endTime: toDate('Sep 15, 2022'),
-  //   groupId: '6rrIja7tVW00lUVwtsYS',
-  // },
-  // {
-  //   title: 'Cause Exploration Prizes',
-  //   blurb:
-  //     'Which new charity ideas will Open Philanthropy find most promising?',
-  //   award: 'M$100k',
-  //   endTime: toDate('Sep 9, 2022'),
-  //   groupId: 'cMcpBQ2p452jEcJD2SFw',
-  // },
   {
-    title: 'Fantasy Football Stock Exchange',
+    title: 'Cause Exploration Prizes',
-    blurb: 'How many points will each NFL player score this season?',
+    blurb:
-    award: '$2,500',
+      'Which new charity ideas will Open Philanthropy find most promising?',
-    endTime: toDate('Jan 6, 2023'),
+    award: 'M$100k',
-    groupId: 'SxGRqXRpV3RAQKudbcNb',
+    endTime: toDate('Sep 9, 2022'),
+    groupId: 'cMcpBQ2p452jEcJD2SFw',
+  },
+  {
+    title: 'Manifold F2P Tournament',
+    blurb:
+      'Who can amass the most mana starting from a free-to-play (F2P) account?',
+    award: 'Poem',
+    endTime: toDate('Sep 15, 2022'),
+    groupId: '6rrIja7tVW00lUVwtsYS',
   },
 
   // Tournaments without awards get featured below
@@ -158,16 +160,31 @@ export async function getStaticProps() {
 export default function TournamentPage(props: { sections: SectionInfo[] }) {
   const { sections } = props
 
+  const description = `Win real prizes (including cash!) by participating in forecasting
+            tournaments on current events, sports, science, and more.`
   return (
     <Page>
-      <SEO
+      <SEO title="Tournaments" description={description} />
-        title="Tournaments"
-        description="Win money by predicting in forecasting tournaments on current events, sports, science, and more"
-      />
       <Col className="m-4 gap-10 sm:mx-10 sm:gap-24 xl:w-[125%]">
+        <Col>
+          <Title text="🏆 Manifold tournaments" />
+          <div>{description}</div>
+        </Col>
+        <div>
+          <SectionHeader
+            url={Salem.url}
+            title={Salem.title}
+            award={Salem.award}
+            endTime={Salem.endTime}
+          />
+          <span className="text-gray-500">{Salem.blurb}</span>
+          <ImageCarousel url={Salem.url} images={Salem.images} />
+        </div>
+
         {sections.map(
           ({ tourney, slug, numPeople }) =>
-            tourney.award && (
+            tourney.award &&
+            (tourney.endTime ?? 0) > Date.now() && (
               <div key={slug}>
                 <SectionHeader
                   url={groupPath(slug, 'about')}
@@ -181,17 +198,40 @@ export default function TournamentPage(props: { sections: SectionInfo[] }) {
               </div>
             )
         )}
-        <div>
+
-          <SectionHeader
+        {/* Title break */}
-            url={Salem.url}
+        <div className="relative">
-            title={Salem.title}
+          <div
-            award={Salem.award}
+            className="absolute inset-0 flex items-center"
-            endTime={Salem.endTime}
+            aria-hidden="true"
-          />
+          >
-          <span className="text-gray-500">{Salem.blurb}</span>
+            <div className="w-full border-t border-gray-300" />
-          <ImageCarousel url={Salem.url} images={Salem.images} />
+          </div>
+          <div className="relative flex justify-center">
+            <span className="bg-gray-50 px-3 text-lg font-medium text-gray-900">
+              Past tournaments
+            </span>
+          </div>
         </div>
 
+        {sections.map(
+          ({ tourney, slug, numPeople }) =>
+            tourney.award &&
+            (tourney.endTime ?? 0) <= Date.now() && (
+              <div key={slug}>
+                <SectionHeader
+                  url={groupPath(slug, 'about')}
+                  title={tourney.title}
+                  ppl={numPeople}
+                  award={tourney.award}
+                  endTime={tourney.endTime}
+                />
+                <span className="text-gray-500">{tourney.blurb}</span>
+                <MarketCarousel slug={slug} />
+              </div>
+            )
+        )}
+
         {/* Title break */}
         <div className="relative">
           <div

web/posts/post-comments.tsx

@@ -1,5 +1,6 @@
 import { track } from '@amplitude/analytics-browser'
 import { Editor } from '@tiptap/core'
+import { sum } from 'lodash'
 import clsx from 'clsx'
 import { PostComment } from 'common/comment'
 import { Post } from 'common/post'
@@ -109,6 +110,7 @@ export function PostComment(props: {
   const { text, content, userUsername, userName, userAvatarUrl, createdTime } =
     comment
 
+  const me = useUser()
   const [highlighted, setHighlighted] = useState(false)
   const router = useRouter()
   useEffect(() => {
@@ -162,7 +164,11 @@ export function PostComment(props: {
               Reply
             </button>
           )}
-          <Tipper comment={comment} tips={tips ?? {}} />
+          <Tipper
+            comment={comment}
+            myTip={me ? tips?.[me.id] ?? 0 : 0}
+            totalTip={sum(Object.values(tips ?? {}))}
+          />
         </Row>
       </div>
     </Row>

web/public/sitemap.xml

@@ -1,10 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
 <url><loc>https://manifold.markets</loc><changefreq>hourly</changefreq><priority>1.0</priority></url>
+<url><loc>https://manifold.markets/search</loc><changefreq>hourly</changefreq><priority>1.0</priority></url>
 <url><loc>https://manifold.markets/home</loc><changefreq>hourly</changefreq><priority>0.2</priority></url>
 <url><loc>https://manifold.markets/leaderboards</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
 <url><loc>https://manifold.markets/add-funds</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
 <url><loc>https://manifold.markets/challenges</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
 <url><loc>https://manifold.markets/charity</loc><changefreq>daily</changefreq><priority>0.7</priority></url>
 <url><loc>https://manifold.markets/groups</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
+<url><loc>https://manifold.markets/tournaments</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
+<url><loc>https://manifold.markets/labs</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
 </urlset>

web/public/twitter-icon-white.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g id="Logo_1_">
-	<path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
-		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
-		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
-		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
-		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
-		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
-</g>
-</svg>

web/tailwind.config.js

@@ -18,6 +18,7 @@ module.exports = {
       colors: {
         'red-25': '#FDF7F6',
         'greyscale-1': '#FBFBFF',
+        'greyscale-1.5': '#F4F4FB',
         'greyscale-2': '#E7E7F4',
         'greyscale-3': '#D8D8EB',
         'greyscale-4': '#B1B1C7',

yarn.lock

@@ -1310,7 +1310,14 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.15.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.18.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.9.2":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -2351,6 +2358,19 @@
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.1.tgz#d822792e589aac005462491dd62f86095e0c3bef"
   integrity sha512-gMd6uIs1U4Oz718Z5gFoV0o/vD43/4zvbyiJN9Dt7PK9Ubxn+TmJwTmYwyNJc5KxxU1t0CmgTNgwZX9+4NjCnQ==
 
+"@hello-pangea/dnd@16.0.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.0.0.tgz#b97791286395924ffbdb4cd0f27f06f2985766d5"
+  integrity sha512-FprEzwrGMvyclVf8pWTrPbUV7/ZFt6NmL76ePj1mMyZG195htDUkmvET6CBwKJTXmV+AE/GyK4Lv3wpCqrlY/g==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    css-box-model "^1.2.1"
+    memoize-one "^6.0.0"
+    raf-schd "^4.0.3"
+    react-redux "^8.0.2"
+    redux "^4.2.0"
+    use-memo-one "^1.1.2"
+
 "@heroicons/react@1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
@@ -3434,7 +3454,7 @@
   resolved "https://registry.yarnpkg.com/@types/hogan.js/-/hogan.js-3.0.1.tgz#64c54407b30da359763e14877f5702b8ae85d61c"
   integrity sha512-D03i/2OY7kGyMq9wdQ7oD8roE49z/ZCZThe/nbahtvuqCNZY9T2MfedOWyeBdbEpY2W8Gnh/dyJLdFtUCOkYbg==
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -3567,30 +3587,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-beautiful-dnd@13.1.2":
+"@types/react-dom@18.0.6":
-  version "13.1.2"
+  version "18.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz#510405abb09f493afdfd898bf83995dc6385c130"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
-  integrity sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg==
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@17.0.2":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43"
-  integrity sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-redux@^7.1.20":
-  version "7.1.24"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0"
-  integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
-
 "@types/react-router-config@*":
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-router-config/-/react-router-config-5.0.6.tgz#87c5c57e72d241db900d9734512c50ccec062451"
@@ -3617,7 +3620,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.43", "@types/react@^17.0.2":
+"@types/react@*", "@types/react@^17.0.2":
   version "17.0.43"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
   integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
@@ -3626,6 +3629,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@18.0.21":
+  version "18.0.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.21.tgz#b8209e9626bb00a34c76f55482697edd2b43cc67"
+  integrity sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/retry@0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
@@ -3675,6 +3687,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -5202,7 +5219,7 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-box-model@^1.2.0:
+css-box-model@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
   integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
@@ -8683,10 +8700,10 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "1.0.3"
 
-memoize-one@^5.1.1:
+memoize-one@^6.0.0:
-  version "5.2.1"
+  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
 merge-descriptors@1.0.1:
   version "1.0.1"
@@ -10413,7 +10430,7 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-raf-schd@^4.0.2:
+raf-schd@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
@@ -10465,19 +10482,6 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
-react-beautiful-dnd@13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
-  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    css-box-model "^1.2.0"
-    memoize-one "^5.1.1"
-    raf-schd "^4.0.2"
-    react-redux "^7.2.0"
-    redux "^4.0.4"
-    use-memo-one "^1.1.1"
-
 react-confetti@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.0.1.tgz#d4f57b5a021dd908a6243b8f63b6009b00818d10"
@@ -10515,7 +10519,15 @@ react-dev-utils@^12.0.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@17.0.2, react-dom@^17.0.1:
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-dom@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -10529,14 +10541,14 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-expanding-textarea@2.3.5:
+react-expanding-textarea@2.3.6:
-  version "2.3.5"
+  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/react-expanding-textarea/-/react-expanding-textarea-2.3.5.tgz#310c28ab242c724e042589ac3ea400dd68ad1488"
+  resolved "https://registry.yarnpkg.com/react-expanding-textarea/-/react-expanding-textarea-2.3.6.tgz#daa50e5110dd71ca79e1df8e056b0b2eb0e8a84a"
-  integrity sha512-mPdtg3CxSgZFcsRLf80jueBWy1Zlh9AKy76S7dGXUKinvo4EypMavZa2iC0hEnLxY0tcwWR+n/K8B21TkttpUw==
+  integrity sha512-LjkyZv1LilMlt+6/yYn9F1FlcK8iQU96myeq6PwU/a7IaQMkSwndSB1SAhMKgxSrUR71VbqsqnAHQ741WbAU/Q==
   dependencies:
     fast-shallow-equal "^1.0.0"
-    react-with-forwarded-ref "^0.3.3"
+    react-with-forwarded-ref "^0.3.5"
-    tslib "^2.0.3"
+    tslib "^2.4.0"
 
 react-fast-compare@^3.2.0:
   version "3.2.0"
@@ -10585,10 +10597,10 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.2:
+react-is@^18.0.0:
-  version "17.0.2"
+  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
 react-json-view@^1.21.3:
   version "1.21.3"
@@ -10626,17 +10638,17 @@ react-query@3.39.0:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
-react-redux@^7.2.0:
+react-redux@^8.0.2:
-  version "7.2.8"
+  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.4.tgz#80c31dffa8af9526967c4267022ae1525ff0e36a"
-  integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==
+  integrity sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ==
   dependencies:
-    "@babel/runtime" "^7.15.4"
+    "@babel/runtime" "^7.12.1"
-    "@types/react-redux" "^7.1.20"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
     hoist-non-react-statics "^3.3.2"
-    loose-envify "^1.4.0"
+    react-is "^18.0.0"
-    prop-types "^15.7.2"
+    use-sync-external-store "^1.0.0"
-    react-is "^17.0.2"
 
 react-router-config@^5.1.1:
   version "5.1.1"
@@ -10690,14 +10702,21 @@ react-twitter-embed@4.0.4:
   dependencies:
     scriptjs "^2.5.9"
 
-react-with-forwarded-ref@^0.3.3:
+react-with-forwarded-ref@^0.3.5:
-  version "0.3.4"
+  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/react-with-forwarded-ref/-/react-with-forwarded-ref-0.3.4.tgz#b1e884ea081ec3c5dd578f37889159797454c0a5"
+  resolved "https://registry.yarnpkg.com/react-with-forwarded-ref/-/react-with-forwarded-ref-0.3.5.tgz#7d0bae2a9996fc91493f40ab179b8c54d29cfab9"
-  integrity sha512-SRq/uTdTh+02JDwYzEEhY2aNNWl/CP2EKP2nQtXzhJw06w6PgYnJt2ObrebvFJu6+wGzX3vDHU3H/ux9hxyZUQ==
+  integrity sha512-BJK4q0Nvqg4AFwc+LV+PZZb2nxS1ZqQlS9hY14TdIyg7Lapzirk/V/TtbYjPFSsm/fGm0wC4tsgI1IDhxSVVSQ==
   dependencies:
     tslib "^2.0.3"
 
-react@17.0.2, react@^17.0.1:
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -10789,7 +10808,7 @@ recursive-readdir@^2.2.2:
   dependencies:
     minimatch "3.0.4"
 
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
   integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
@@ -11169,6 +11188,13 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
@@ -12394,12 +12420,12 @@ use-latest@^1.2.1:
   dependencies:
     use-isomorphic-layout-effect "^1.1.1"
 
-use-memo-one@^1.1.1:
+use-memo-one@^1.1.2:
-  version "1.1.2"
+  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
-  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
-use-sync-external-store@1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==