Merge branch 'main' into loans2

2022-08-20 15:26:56 -05:00 · 2022-08-20 15:26:56 -05:00 · b17bb31972
commit b17bb31972
parent 1129b09898 f4ebb2b504
41 changed files with 1026 additions and 246 deletions
--- a/common/contract-details.ts
+++ b/common/contract-details.ts
@ -0,0 +1,151 @@
+import { Challenge } from './challenge'
+import { BinaryContract, Contract } from './contract'
+import { getFormattedMappedValue } from './pseudo-numeric'
+import { getProbability } from './calculate'
+import { richTextToString } from './util/parse'
+import { getCpmmProbability } from './calculate-cpmm'
+import { getDpmProbability } from './calculate-dpm'
+import { formatMoney, formatPercent } from './util/format'
+
+export function contractMetrics(contract: Contract) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const dayjs = require('dayjs')
+  const { createdTime, resolutionTime, isResolved } = contract
+
+  const createdDate = dayjs(createdTime).format('MMM D')
+
+  const resolvedDate = isResolved
+    ? dayjs(resolutionTime).format('MMM D')
+    : undefined
+
+  const volumeLabel = `${formatMoney(contract.volume)} bet`
+
+  return { volumeLabel, createdDate, resolvedDate }
+}
+
+// String version of the above, to send to the OpenGraph image generator
+export function contractTextDetails(contract: Contract) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const dayjs = require('dayjs')
+  const { closeTime, tags } = contract
+  const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract)
+
+  const hashtags = tags.map((tag) => `#${tag}`)
+
+  return (
+    `${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
+    (closeTime
+      ? ` • ${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs(
+          closeTime
+        ).format('MMM D, h:mma')}`
+      : '') +
+    ` • ${volumeLabel}` +
+    (hashtags.length > 0 ? ` • ${hashtags.join(' ')}` : '')
+  )
+}
+
+export function getBinaryProb(contract: BinaryContract) {
+  const { pool, resolutionProbability, mechanism } = contract
+
+  return (
+    resolutionProbability ??
+    (mechanism === 'cpmm-1'
+      ? getCpmmProbability(pool, contract.p)
+      : getDpmProbability(contract.totalShares))
+  )
+}
+
+export const getOpenGraphProps = (contract: Contract) => {
+  const {
+    resolution,
+    question,
+    creatorName,
+    creatorUsername,
+    outcomeType,
+    creatorAvatarUrl,
+    description: desc,
+  } = contract
+  const probPercent =
+    outcomeType === 'BINARY'
+      ? formatPercent(getBinaryProb(contract))
+      : undefined
+
+  const numericValue =
+    outcomeType === 'PSEUDO_NUMERIC'
+      ? getFormattedMappedValue(contract)(getProbability(contract))
+      : undefined
+
+  const stringDesc = typeof desc === 'string' ? desc : richTextToString(desc)
+
+  const description = resolution
+    ? `Resolved ${resolution}. ${stringDesc}`
+    : probPercent
+    ? `${probPercent} chance. ${stringDesc}`
+    : stringDesc
+
+  return {
+    question,
+    probability: probPercent,
+    metadata: contractTextDetails(contract),
+    creatorName,
+    creatorUsername,
+    creatorAvatarUrl,
+    description,
+    numericValue,
+  }
+}
+
+export type OgCardProps = {
+  question: string
+  probability?: string
+  metadata: string
+  creatorName: string
+  creatorUsername: string
+  creatorAvatarUrl?: string
+  numericValue?: string
+}
+
+export function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
+  const {
+    creatorAmount,
+    acceptances,
+    acceptorAmount,
+    creatorOutcome,
+    acceptorOutcome,
+  } = challenge || {}
+  const { userName, userAvatarUrl } = acceptances?.[0] ?? {}
+
+  const probabilityParam =
+    props.probability === undefined
+      ? ''
+      : `&probability=${encodeURIComponent(props.probability ?? '')}`
+
+  const numericValueParam =
+    props.numericValue === undefined
+      ? ''
+      : `&numericValue=${encodeURIComponent(props.numericValue ?? '')}`
+
+  const creatorAvatarUrlParam =
+    props.creatorAvatarUrl === undefined
+      ? ''
+      : `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}`
+
+  const challengeUrlParams = challenge
+    ? `&creatorAmount=${creatorAmount}&creatorOutcome=${creatorOutcome}` +
+      `&challengerAmount=${acceptorAmount}&challengerOutcome=${acceptorOutcome}` +
+      `&acceptedName=${userName ?? ''}&acceptedAvatarUrl=${userAvatarUrl ?? ''}`
+    : ''
+
+  // URL encode each of the props, then add them as query params
+  return (
+    `https://manifold-og-image.vercel.app/m.png` +
+    `?question=${encodeURIComponent(props.question)}` +
+    probabilityParam +
+    numericValueParam +
+    `&metadata=${encodeURIComponent(props.metadata)}` +
+    `&creatorName=${encodeURIComponent(props.creatorName)}` +
+    creatorAvatarUrlParam +
+    `&creatorUsername=${encodeURIComponent(props.creatorUsername)}` +
+    challengeUrlParams
+  )
+}
--- a/common/contract.ts
+++ b/common/contract.ts
@ -31,7 +31,7 @@ export type Contract<T extends AnyContractType = AnyContractType> = {
  description: string | JSONContent // More info about what the contract is about
  tags: string[]
  lowercaseTags: string[]
-  visibility: 'public' | 'unlisted'
+  visibility: visibility

  createdTime: number // Milliseconds since epoch
  lastUpdatedTime?: number // Updated on new bet or comment
@ -143,3 +143,6 @@ export const MAX_DESCRIPTION_LENGTH = 16000
 export const MAX_TAG_LENGTH = 60

 export const CPMM_MIN_POOL_QTY = 0.01
+
+export type visibility = 'public' | 'unlisted'
+export const VISIBILITIES = ['public', 'unlisted'] as const
--- a/common/new-contract.ts
+++ b/common/new-contract.ts
@ -9,6 +9,7 @@ import {
  Numeric,
  outcomeType,
  PseudoNumeric,
+  visibility,
 } from './contract'
 import { User } from './user'
 import { parseTags, richTextToString } from './util/parse'
@ -34,7 +35,8 @@ export function getNewContract(
  isLogScale: boolean,

  // for multiple choice
-  answers: string[]
+  answers: string[],
+  visibility: visibility
 ) {
  const tags = parseTags(
    [
@ -70,7 +72,7 @@ export function getNewContract(
    description,
    tags,
    lowercaseTags,
-    visibility: 'public',
+    visibility,
    isResolved: false,
    createdTime: Date.now(),
    closeTime,
--- a/common/numeric-constants.ts
+++ b/common/numeric-constants.ts
@ -5,4 +5,5 @@ export const NUMERIC_GRAPH_COLOR = '#5fa5f9'
 export const NUMERIC_TEXT_COLOR = 'text-blue-500'
 export const UNIQUE_BETTOR_BONUS_AMOUNT = 10
 export const BETTING_STREAK_BONUS_AMOUNT = 5
-export const BETTING_STREAK_RESET_HOUR = 9
+export const BETTING_STREAK_BONUS_MAX = 100
+export const BETTING_STREAK_RESET_HOUR = 0
--- a/common/user.ts
+++ b/common/user.ts
@ -59,6 +59,7 @@ export type PrivateUser = {
  unsubscribedFromCommentEmails?: boolean
  unsubscribedFromAnswerEmails?: boolean
  unsubscribedFromGenericEmails?: boolean
+  unsubscribedFromWeeklyTrendingEmails?: boolean
  manaBonusEmailSent?: boolean
  initialDeviceToken?: string
  initialIpAddress?: string
--- a/firestore.rules
+++ b/firestore.rules
@ -63,7 +63,7 @@ service cloud.firestore {
      allow read: if userId == request.auth.uid || isAdmin();
      allow update: if (userId == request.auth.uid || isAdmin())
                       && request.resource.data.diff(resource.data).affectedKeys()
-                       .hasOnly(['apiKey', 'unsubscribedFromResolutionEmails', 'unsubscribedFromCommentEmails', 'unsubscribedFromAnswerEmails', 'notificationPreferences' ]);
+                       .hasOnly(['apiKey', 'unsubscribedFromResolutionEmails', 'unsubscribedFromCommentEmails', 'unsubscribedFromAnswerEmails', 'notificationPreferences', 'unsubscribedFromWeeklyTrendingEmails' ]);
    }

    match /private-users/{userId}/views/{viewId} {
--- a/functions/package.json
+++ b/functions/package.json
@ -39,6 +39,7 @@
    "lodash": "4.17.21",
    "mailgun-js": "0.22.0",
    "module-alias": "2.2.2",
+    "react-masonry-css": "1.0.16",
    "stripe": "8.194.0",
    "zod": "3.17.2"
  },
--- a/functions/src/create-market.ts
+++ b/functions/src/create-market.ts
@ -10,6 +10,7 @@ import {
  MultipleChoiceContract,
  NumericContract,
  OUTCOME_TYPES,
+  VISIBILITIES,
 } from '../../common/contract'
 import { slugify } from '../../common/util/slugify'
 import { randomString } from '../../common/util/random'
@ -69,6 +70,7 @@ const bodySchema = z.object({
  ),
  outcomeType: z.enum(OUTCOME_TYPES),
  groupId: z.string().min(1).max(MAX_ID_LENGTH).optional(),
+  visibility: z.enum(VISIBILITIES).optional(),
 })

 const binarySchema = z.object({
@ -90,8 +92,15 @@ const multipleChoiceSchema = z.object({
 })

 export const createmarket = newEndpoint({}, async (req, auth) => {
-  const { question, description, tags, closeTime, outcomeType, groupId } =
-    validate(bodySchema, req.body)
+  const {
+    question,
+    description,
+    tags,
+    closeTime,
+    outcomeType,
+    groupId,
+    visibility = 'public',
+  } = validate(bodySchema, req.body)

  let min, max, initialProb, isLogScale, answers

@ -196,7 +205,8 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
    min ?? 0,
    max ?? 0,
    isLogScale ?? false,
-    answers ?? []
+    answers ?? [],
+    visibility
  )

  if (ante) await chargeUser(user.id, ante, true)
--- a/functions/src/create-user.ts
+++ b/functions/src/create-user.ts
@ -16,7 +16,6 @@ import {
  cleanDisplayName,
  cleanUsername,
 } from '../../common/util/clean-username'
-import { sendPersonalFollowupEmail, sendWelcomeEmail } from './emails'
 import { isWhitelisted } from '../../common/envs/constants'
 import {
  CATEGORIES_GROUP_SLUG_POSTFIX,
@ -93,10 +92,8 @@ export const createuser = newEndpoint(opts, async (req, auth) => {
  }

  await firestore.collection('private-users').doc(auth.uid).create(privateUser)
-
  await addUserToDefaultGroups(user)
-  await sendWelcomeEmail(user, privateUser)
-  await sendPersonalFollowupEmail(user, privateUser)
+
  await track(auth.uid, 'create user', { username }, { ip: req.ip })

  return { user, privateUser }
--- a/functions/src/email-templates/interesting-markets.html
+++ b/functions/src/email-templates/interesting-markets.html
@ -0,0 +1,476 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+    xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+    <title>Interesting markets on Manifold</title>
+    <!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <!--<![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <style type="text/css">
+        #outlook a {
+            padding: 0;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+        }
+
+        table,
+        td {
+            border-collapse: collapse;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+        }
+
+        img {
+            border: 0;
+            height: auto;
+            line-height: 100%;
+            outline: none;
+            text-decoration: none;
+            -ms-interpolation-mode: bicubic;
+        }
+
+        p {
+            display: block;
+            margin: 13px 0;
+        }
+    </style>
+    <!--[if mso]>
+      <noscript>
+        <xml>
+          <o:OfficeDocumentSettings>
+            <o:AllowPNG />
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+          </o:OfficeDocumentSettings>
+        </xml>
+      </noscript>
+    <![endif]-->
+    <!--[if lte mso 11]>
+      <style type="text/css">
+        .mj-outlook-group-fix {
+          width: 100% !important;
+        }
+      </style>
+    <![endif]-->
+    <!--[if !mso]><!-->
+    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css?family=Readex+Pro" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css?family=Readex+Pro" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
+        @import url(https://fonts.googleapis.com/css?family=Readex+Pro);
+        @import url(https://fonts.googleapis.com/css?family=Readex+Pro);
+    </style>
+    <!--<![endif]-->
+    <style type="text/css">
+        @media only screen and (min-width: 480px) {
+            .mj-column-per-100 {
+                width: 100% !important;
+                max-width: 100%;
+            }
+        }
+    </style>
+    <style media="screen and (min-width:480px)">
+        .moz-text-html .mj-column-per-100 {
+            width: 100% !important;
+            max-width: 100%;
+        }
+    </style>
+    <style type="text/css">
+        [owa] .mj-column-per-100 {
+            width: 100% !important;
+            max-width: 100%;
+        }
+    </style>
+    <style type="text/css">
+        @media only screen and (max-width: 480px) {
+            table.mj-full-width-mobile {
+                width: 100% !important;
+            }
+
+            td.mj-full-width-mobile {
+                width: auto !important;
+            }
+        }
+    </style>
+</head>
+
+<body style="word-spacing: normal; background-color: #f4f4f4">
+    <div style="margin:0px auto;max-width:600px;">
+
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+            <tbody>
+                <tr>
+                    <td
+                        style="direction:ltr;font-size:0px;padding:20px 0px 5px 0px;padding-bottom:0px;padding-left:0px;padding-right:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+
+                        <div class="mj-column-per-100 mj-outlook-group-fix"
+                            style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+
+                            <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+                                style="vertical-align:top;" width="100%">
+                                <tbody>
+
+                                    <tr>
+                                        <td align="center"
+                                            style="background:#ffffff;font-size:0px;padding:10px 25px 10px 25px;padding-right:25px;padding-left:25px;word-break:break-word;">
+
+                                            <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+                                                style="border-collapse:collapse;border-spacing:0px;">
+                                                <tbody>
+                                                    <tr>
+                                                        <td style="width:550px;">
+
+                                                            <a href="https://manifold.markets" target="_blank">
+
+                                                                <img alt="banner logo" height="auto"
+                                                                    src="https://manifold.markets/logo-banner.png"
+                                                                    style="border:none;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
+                                                                    title="" width="550">
+
+                                                            </a>
+
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+
+                                        </td>
+                                    </tr>
+
+
+
+                                </tbody>
+                            </table>
+
+                        </div>
+
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="
+          background: #ffffff;
+          background-color: #ffffff;
+          margin: 0px auto;
+          max-width: 600px;
+        ">
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+            style="background: #ffffff; background-color: #ffffff; width: 100%">
+            <tbody>
+
+                <tr>
+                    <td style="
+                  direction: ltr;
+                  font-size: 0px;
+                  padding: 20px 0px 0px 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 20px;
+                  text-align: center;
+                ">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="
+                    font-size: 0px;
+                    text-align: left;
+                    direction: ltr;
+                    display: inline-block;
+                    vertical-align: top;
+                    width: 100%;
+                  ">
+                            <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+                                style="vertical-align: top" width="100%">
+                                <tbody>
+                                    <tr>
+                                        <td align="left"
+                                            style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;">
+                                            <div
+                                                style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:left;color:#000000;">
+                                                <p class="text-build-content"
+                                                    style="line-height: 24px; margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"
+                                                    data-testid="4XoHRGw1Y"><span
+                                                        style="color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:18px;">
+                                                    </span>Hi {{name}},</p>
+                                            </div>
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td align="left"
+                                            style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;">
+                                            <div
+                                                style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:left;color:#000000;">
+                                                <p class="text-build-content"
+                                                    style="line-height: 24px; margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"
+                                                    data-testid="4XoHRGw1Y"><span
+                                                        style="color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:18px;">
+                                                        Here is a selection of markets on Manifold you might find
+                                                        interesting!</span></p>
+                                            </div>
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td align="center"
+                                            style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;">
+                                            <div
+                                                style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:center;color:#000000;">
+                                                <a href="{{question1Link}}">
+                                                    <img alt="{{question1Title}}" width="375" height="200"
+                                                        style="border: 1px solid #4337c9;" src="{{question1ImgSrc}}">
+                                                </a>
+                                            </div>
+
+                                            <table cellspacing="0" cellpadding="0">
+                                                <tr>
+                                                    <td style="border-radius: 4px;" bgcolor="#4337c9">
+                                                        <a href="{{question1Link}}" target="_blank"
+                                                            style="padding: 6px 10px; border: 1px solid #4337c9;border-radius: 12px;font-family: Helvetica, Arial, sans-serif;font-size: 16px; color: #ffffff;text-decoration: none;font-weight:semibold;display: inline-block;">
+                                                            View market
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td align="center"
+                                            style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;">
+                                            <div
+                                                style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:center;color:#000000;">
+                                                <a href="{{question2Link}}">
+                                                    <img alt="{{question2Title}}" width="375" height="200"
+                                                        style="border: 1px solid #4337c9;" src="{{question2ImgSrc}}">
+                                                </a>
+                                            </div>
+
+                                            <table cellspacing="0" cellpadding="0">
+                                                <tr>
+                                                    <td style="border-radius: 4px;" bgcolor="#4337c9">
+                                                        <a href="{{question2Link}}" target="_blank"
+                                                            style="padding: 6px 10px; border: 1px solid #4337c9;border-radius: 12px;font-family: Helvetica, Arial, sans-serif;font-size: 16px; color: #ffffff;text-decoration: none;font-weight:semibold;display: inline-block;">
+                                                            View market
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td align="center"
+                                            style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;">
+                                            <div
+                                                style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:center;color:#000000;">
+                                                <a href="{{question3Link}}">
+                                                    <img alt="{{question3Title}}" width="375" height="200"
+                                                        style="border: 1px solid #4337c9;" src="{{question3ImgSrc}}">
+                                                </a>
+                                            </div>
+
+                                            <table cellspacing="0" cellpadding="0">
+                                                <tr>
+                                                    <td style="border-radius: 4px;" bgcolor="#4337c9">
+                                                        <a href="{{question3Link}}" target="_blank"
+                                                            style="padding: 6px 10px; border: 1px solid #4337c9;border-radius: 12px;font-family: Helvetica, Arial, sans-serif;font-size: 16px; color: #ffffff;text-decoration: none;font-weight:semibold;display: inline-block;">
+                                                            View market
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td align="center"
+                                            style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;">
+                                            <div
+                                                style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:center;color:#000000;">
+                                                <a href="{{question4Link}}">
+                                                    <img alt="{{question4Title}}" width="375" height="200"
+                                                        style="border: 1px solid #4337c9;" src="{{question4ImgSrc}}">
+                                                </a>
+                                            </div>
+
+                                            <table cellspacing="0" cellpadding="0">
+                                                <tr>
+                                                    <td style="border-radius: 4px;" bgcolor="#4337c9">
+                                                        <a href="{{question4Link}}" target="_blank"
+                                                            style="padding: 6px 10px; border: 1px solid #4337c9;border-radius: 12px;font-family: Helvetica, Arial, sans-serif;font-size: 16px; color: #ffffff;text-decoration: none;font-weight:semibold;display: inline-block;">
+                                                            View market
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td align="center"
+                                            style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;">
+                                            <div
+                                                style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:center;color:#000000;">
+                                                <a href="{{question5Link}}">
+                                                    <img alt="{{question5Title}}" width="375" height="200"
+                                                        style="border: 1px solid #4337c9;" src="{{question5ImgSrc}}">
+                                                </a>
+                                            </div>
+
+                                            <table cellspacing="0" cellpadding="0">
+                                                <tr>
+                                                    <td style="border-radius: 4px;" bgcolor="#4337c9">
+                                                        <a href="{{question5Link}}" target="_blank"
+                                                            style="padding: 6px 10px; border: 1px solid #4337c9;border-radius: 12px;font-family: Helvetica, Arial, sans-serif;font-size: 16px; color: #ffffff;text-decoration: none;font-weight:semibold;display: inline-block;">
+                                                            View market
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td align="center"
+                                            style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;">
+                                            <div
+                                                style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:center;color:#000000;">
+                                                <a href="{{question6Link}}">
+                                                    <img alt="{{question6Title}}" width="375" height="200"
+                                                        style="border: 1px solid #4337c9;" src="{{question6ImgSrc}}">
+                                                </a>
+                                            </div>
+
+                                            <table cellspacing="0" cellpadding="0">
+                                                <tr>
+                                                    <td style="border-radius: 4px;" bgcolor="#4337c9">
+                                                        <a href="{{question6Link}}" target="_blank"
+                                                            style="padding: 6px 10px; border: 1px solid #4337c9;border-radius: 12px;font-family: Helvetica, Arial, sans-serif;font-size: 16px; color: #ffffff;text-decoration: none;font-weight:semibold;display: inline-block;">
+                                                            View market
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin: 0px auto; max-width: 600px">
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%">
+            <tbody>
+                <tr>
+                    <td style="
+                  direction: ltr;
+                  font-size: 0px;
+                  padding: 0 0 20px 0;
+                  text-align: center;
+                ">
+
+                        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+                        <div style="margin: 0px auto; max-width: 600px">
+                            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+                                style="width: 100%">
+                                <tbody>
+                                    <tr>
+                                        <td style="
+                  direction: ltr;
+                  font-size: 0px;
+                  padding: 20px 0px 20px 0px;
+                  text-align: center;
+                ">
+                                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+                                            <div class="mj-column-per-100 mj-outlook-group-fix" style="
+                    font-size: 0px;
+                    text-align: left;
+                    direction: ltr;
+                    display: inline-block;
+                    vertical-align: top;
+                    width: 100%;
+                  ">
+                                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+                                                    width="100%">
+                                                    <tbody>
+                                                        <tr>
+                                                            <td style="vertical-align: top; padding: 0">
+                                                                <table border="0" cellpadding="0" cellspacing="0"
+                                                                    role="presentation" width="100%">
+                                                                    <tbody>
+                                                                        <tr>
+                                                                            <td align="center" style="
+                                    font-size: 0px;
+                                    padding: 10px 25px;
+                                    word-break: break-word;
+                                  ">
+                                                                                <div style="
+                                      font-family: Ubuntu, Helvetica, Arial,
+                                        sans-serif;
+                                      font-size: 11px;
+                                      line-height: 22px;
+                                      text-align: center;
+                                      color: #000000;
+                                    ">
+                                                                                    <p style="margin: 10px 0">
+                                                                                        This e-mail has been sent to
+                                                                                        {{name}},
+                                                                                        <a href="{{unsubscribeLink}}"
+                                                                                            style="
+                                          color: inherit;
+                                          text-decoration: none;
+                                        " target="_blank">click here to unsubscribe</a>.
+                                                                                    </p>
+                                                                                </div>
+                                                                            </td>
+                                                                        </tr>
+                                                                        <tr>
+                                                                            <td align="center" style="
+                                    font-size: 0px;
+                                    padding: 10px 25px;
+                                    word-break: break-word;
+                                  "></td>
+                                                                        </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                            </div>
+                                            <!--[if mso | IE]></td></tr></table><![endif]-->
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+    </div>
+</body>
+
+</html>
--- a/functions/src/emails.ts
+++ b/functions/src/emails.ts
@ -1,4 +1,3 @@
-import * as dayjs from 'dayjs'

 import { DOMAIN } from '../../common/envs/constants'
 import { Answer } from '../../common/answer'
@ -20,6 +19,7 @@ import { sendTemplateEmail, sendTextEmail } from './send-email'
 import { getPrivateUser, getUser } from './utils'
 import { getFunctionUrl } from '../../common/api'
 import { richTextToString } from '../../common/util/parse'
+import { buildCardUrl, getOpenGraphProps } from '../../common/contract-details'

 const UNSUBSCRIBE_ENDPOINT = getFunctionUrl('unsubscribe')

@ -169,7 +169,8 @@ export const sendWelcomeEmail = async (

 export const sendPersonalFollowupEmail = async (
  user: User,
-  privateUser: PrivateUser
+  privateUser: PrivateUser,
+  sendTime: string
 ) => {
  if (!privateUser || !privateUser.email) return

@ -191,7 +192,6 @@ Cofounder of Manifold Markets
 https://manifold.markets
 `

-  const sendTime = dayjs().add(4, 'hours').toString()

  await sendTextEmail(
    privateUser.email,
@ -460,3 +460,61 @@ export const sendNewAnswerEmail = async (
    { from }
  )
 }
+
+export const sendInterestingMarketsEmail = async (
+  user: User,
+  privateUser: PrivateUser,
+  contractsToSend: Contract[],
+  deliveryTime?: string
+) => {
+  if (
+    !privateUser ||
+    !privateUser.email ||
+    privateUser?.unsubscribedFromWeeklyTrendingEmails
+  )
+    return
+
+  const emailType = 'weekly-trending'
+  const unsubscribeUrl = `${UNSUBSCRIBE_ENDPOINT}?id=${privateUser.id}&type=${emailType}`
+
+  const { name } = user
+  const firstName = name.split(' ')[0]
+
+  await sendTemplateEmail(
+    privateUser.email,
+    `${contractsToSend[0].question} & 5 more interesting markets on Manifold`,
+    'interesting-markets',
+    {
+      name: firstName,
+      unsubscribeLink: unsubscribeUrl,
+
+      question1Title: contractsToSend[0].question,
+      question1Link: contractUrl(contractsToSend[0]),
+      question1ImgSrc: imageSourceUrl(contractsToSend[0]),
+      question2Title: contractsToSend[1].question,
+      question2Link: contractUrl(contractsToSend[1]),
+      question2ImgSrc: imageSourceUrl(contractsToSend[1]),
+      question3Title: contractsToSend[2].question,
+      question3Link: contractUrl(contractsToSend[2]),
+      question3ImgSrc: imageSourceUrl(contractsToSend[2]),
+      question4Title: contractsToSend[3].question,
+      question4Link: contractUrl(contractsToSend[3]),
+      question4ImgSrc: imageSourceUrl(contractsToSend[3]),
+      question5Title: contractsToSend[4].question,
+      question5Link: contractUrl(contractsToSend[4]),
+      question5ImgSrc: imageSourceUrl(contractsToSend[4]),
+      question6Title: contractsToSend[5].question,
+      question6Link: contractUrl(contractsToSend[5]),
+      question6ImgSrc: imageSourceUrl(contractsToSend[5]),
+    },
+    deliveryTime ? { 'o:deliverytime': deliveryTime } : undefined
+  )
+}
+
+function contractUrl(contract: Contract) {
+  return `https://manifold.markets/${contract.creatorUsername}/${contract.slug}`
+}
+
+function imageSourceUrl(contract: Contract) {
+  return buildCardUrl(getOpenGraphProps(contract))
+}
--- a/functions/src/index.ts
+++ b/functions/src/index.ts
@ -5,6 +5,7 @@ import { EndpointDefinition } from './api'
 admin.initializeApp()

 // v1
+export * from './on-create-user'
 export * from './on-create-bet'
 export * from './on-create-comment-on-contract'
 export * from './on-view'
@ -26,6 +27,7 @@ export * from './on-create-comment-on-group'
 export * from './on-create-txn'
 export * from './on-delete-group'
 export * from './score-contracts'
+export * from './weekly-markets-emails'
 export * from './reset-betting-streaks'

 // v2
--- a/functions/src/on-create-bet.ts
+++ b/functions/src/on-create-bet.ts
@ -14,6 +14,7 @@ import { Contract } from '../../common/contract'
 import { runTxn, TxnData } from './transact'
 import {
  BETTING_STREAK_BONUS_AMOUNT,
+  BETTING_STREAK_BONUS_MAX,
  BETTING_STREAK_RESET_HOUR,
  UNIQUE_BETTOR_BONUS_AMOUNT,
 } from '../../common/numeric-constants'
@ -86,7 +87,7 @@ const updateBettingStreak = async (
  // Send them the bonus times their streak
  const bonusAmount = Math.min(
    BETTING_STREAK_BONUS_AMOUNT * newBettingStreak,
-    100
+    BETTING_STREAK_BONUS_MAX
  )
  const fromUserId = isProd()
    ? HOUSE_LIQUIDITY_PROVIDER_ID
--- a/functions/src/on-create-user.ts
+++ b/functions/src/on-create-user.ts
@ -0,0 +1,41 @@
+import * as functions from 'firebase-functions'
+import * as dayjs from 'dayjs'
+import * as utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)
+
+import { getPrivateUser } from './utils'
+import { User } from 'common/user'
+import {
+  sendInterestingMarketsEmail,
+  sendPersonalFollowupEmail,
+  sendWelcomeEmail,
+} from './emails'
+import { getTrendingContracts } from './weekly-markets-emails'
+
+export const onCreateUser = functions
+  .runWith({ secrets: ['MAILGUN_KEY'] })
+  .firestore.document('users/{userId}')
+  .onCreate(async (snapshot) => {
+    const user = snapshot.data() as User
+    const privateUser = await getPrivateUser(user.id)
+    if (!privateUser) return
+
+    await sendWelcomeEmail(user, privateUser)
+
+    const followupSendTime = dayjs().add(4, 'hours').toString()
+    await sendPersonalFollowupEmail(user, privateUser, followupSendTime)
+
+    // skip email if weekly email is about to go out
+    const day = dayjs().utc().day()
+    if (day === 0 || (day === 1 && dayjs().utc().hour() <= 19)) return
+
+    const contracts = await getTrendingContracts()
+    const marketsSendTime = dayjs().add(24, 'hours').toString()
+
+    await sendInterestingMarketsEmail(
+      user,
+      privateUser,
+      contracts,
+      marketsSendTime
+    )
+  })
--- a/functions/src/reset-betting-streaks.ts
+++ b/functions/src/reset-betting-streaks.ts
@ -9,6 +9,7 @@ const firestore = admin.firestore()

 export const resetBettingStreaksForUsers = functions.pubsub
  .schedule(`0 ${BETTING_STREAK_RESET_HOUR} * * *`)
+  .timeZone('utc')
  .onRun(async () => {
    await resetBettingStreaksInternal()
  })
--- a/functions/src/scripts/unlist-contracts.ts
+++ b/functions/src/scripts/unlist-contracts.ts
@ -0,0 +1,29 @@
+import * as admin from 'firebase-admin'
+
+import { initAdmin } from './script-init'
+initAdmin()
+
+import { Contract } from '../../../common/contract'
+
+const firestore = admin.firestore()
+
+async function unlistContracts() {
+  console.log('Updating some contracts to be unlisted')
+
+  const snapshot = await firestore
+    .collection('contracts')
+    .where('groupSlugs', 'array-contains', 'fantasy-football-stock-exchange')
+    .get()
+  const contracts = snapshot.docs.map((doc) => doc.data() as Contract)
+
+  console.log('Loaded', contracts.length, 'contracts')
+
+  for (const contract of contracts) {
+    const contractRef = firestore.doc(`contracts/${contract.id}`)
+
+    console.log('Updating', contract.question)
+    await contractRef.update({ visibility: 'unlisted' })
+  }
+}
+
+if (require.main === module) unlistContracts().then(() => process.exit())
--- a/functions/src/unsubscribe.ts
+++ b/functions/src/unsubscribe.ts
@ -21,6 +21,7 @@ export const unsubscribe: EndpointDefinition = {
        'market-comment',
        'market-answer',
        'generic',
+        'weekly-trending',
      ].includes(type)
    ) {
      res.status(400).send('Invalid type parameter.')
@ -49,6 +50,9 @@ export const unsubscribe: EndpointDefinition = {
      ...(type === 'generic' && {
        unsubscribedFromGenericEmails: true,
      }),
+      ...(type === 'weekly-trending' && {
+        unsubscribedFromWeeklyTrendingEmails: true,
+      }),
    }

    await firestore.collection('private-users').doc(id).update(update)
--- a/functions/src/utils.ts
+++ b/functions/src/utils.ts
@ -88,6 +88,12 @@ export const getPrivateUser = (userId: string) => {
  return getDoc<PrivateUser>('private-users', userId)
 }

+export const getAllPrivateUsers = async () => {
+  const firestore = admin.firestore()
+  const users = await firestore.collection('private-users').get()
+  return users.docs.map((doc) => doc.data() as PrivateUser)
+}
+
 export const getUserByUsername = async (username: string) => {
  const firestore = admin.firestore()
  const snap = await firestore
--- a/functions/src/weekly-markets-emails.ts
+++ b/functions/src/weekly-markets-emails.ts
@ -0,0 +1,81 @@
+import * as functions from 'firebase-functions'
+import * as admin from 'firebase-admin'
+
+import { Contract } from '../../common/contract'
+import { getAllPrivateUsers, getUser, getValues, log } from './utils'
+import { sendInterestingMarketsEmail } from './emails'
+import { createRNG, shuffle } from '../../common/util/random'
+import { DAY_MS } from '../../common/util/time'
+
+export const weeklyMarketsEmails = functions
+  .runWith({ secrets: ['MAILGUN_KEY'] })
+  // every Monday at 12pm PT (UTC -07:00)
+  .pubsub.schedule('0 19 * * 1')
+  .timeZone('utc')
+  .onRun(async () => {
+    await sendTrendingMarketsEmailsToAllUsers()
+  })
+
+const firestore = admin.firestore()
+
+export async function getTrendingContracts() {
+  return await getValues<Contract>(
+    firestore
+      .collection('contracts')
+      .where('isResolved', '==', false)
+      .where('visibility', '==', 'public')
+      // can't use multiple inequality (/orderBy) operators on different fields,
+      // so have to filter for closed contracts separately
+      .orderBy('popularityScore', 'desc')
+      // might as well go big and do a quick filter for closed ones later
+      .limit(500)
+  )
+}
+
+async function sendTrendingMarketsEmailsToAllUsers() {
+  const numContractsToSend = 6
+  const privateUsers = await getAllPrivateUsers()
+  // get all users that haven't unsubscribed from weekly emails
+  const privateUsersToSendEmailsTo = privateUsers.filter((user) => {
+    return !user.unsubscribedFromWeeklyTrendingEmails
+  })
+  const trendingContracts = (await getTrendingContracts())
+    .filter(
+      (contract) =>
+        !(
+          contract.question.toLowerCase().includes('trump') &&
+          contract.question.toLowerCase().includes('president')
+        ) && (contract?.closeTime ?? 0) > Date.now() + DAY_MS
+    )
+    .slice(0, 20)
+  for (const privateUser of privateUsersToSendEmailsTo) {
+    if (!privateUser.email) {
+      log(`No email for ${privateUser.username}`)
+      continue
+    }
+    const contractsAvailableToSend = trendingContracts.filter((contract) => {
+      return !contract.uniqueBettorIds?.includes(privateUser.id)
+    })
+    if (contractsAvailableToSend.length < numContractsToSend) {
+      log('not enough new, unbet-on contracts to send to user', privateUser.id)
+      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)
+  }
+}
+
+function chooseRandomSubset(contracts: Contract[], count: number) {
+  const fiveMinutes = 5 * 60 * 1000
+  const seed = Math.round(Date.now() / fiveMinutes).toString()
+  shuffle(contracts, createRNG(seed))
+  return contracts.slice(0, count)
+}
--- a/web/components/SEO.tsx
+++ b/web/components/SEO.tsx
@ -1,61 +1,7 @@
 import { ReactNode } from 'react'
 import Head from 'next/head'
 import { Challenge } from 'common/challenge'
-
-export type OgCardProps = {
-  question: string
-  probability?: string
-  metadata: string
-  creatorName: string
-  creatorUsername: string
-  creatorAvatarUrl?: string
-  numericValue?: string
-}
-
-function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
-  const {
-    creatorAmount,
-    acceptances,
-    acceptorAmount,
-    creatorOutcome,
-    acceptorOutcome,
-  } = challenge || {}
-  const { userName, userAvatarUrl } = acceptances?.[0] ?? {}
-
-  const probabilityParam =
-    props.probability === undefined
-      ? ''
-      : `&probability=${encodeURIComponent(props.probability ?? '')}`
-
-  const numericValueParam =
-    props.numericValue === undefined
-      ? ''
-      : `&numericValue=${encodeURIComponent(props.numericValue ?? '')}`
-
-  const creatorAvatarUrlParam =
-    props.creatorAvatarUrl === undefined
-      ? ''
-      : `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}`
-
-  const challengeUrlParams = challenge
-    ? `&creatorAmount=${creatorAmount}&creatorOutcome=${creatorOutcome}` +
-      `&challengerAmount=${acceptorAmount}&challengerOutcome=${acceptorOutcome}` +
-      `&acceptedName=${userName ?? ''}&acceptedAvatarUrl=${userAvatarUrl ?? ''}`
-    : ''
-
-  // URL encode each of the props, then add them as query params
-  return (
-    `https://manifold-og-image.vercel.app/m.png` +
-    `?question=${encodeURIComponent(props.question)}` +
-    probabilityParam +
-    numericValueParam +
-    `&metadata=${encodeURIComponent(props.metadata)}` +
-    `&creatorName=${encodeURIComponent(props.creatorName)}` +
-    creatorAvatarUrlParam +
-    `&creatorUsername=${encodeURIComponent(props.creatorUsername)}` +
-    challengeUrlParams
-  )
-}
+import { buildCardUrl, OgCardProps } from 'common/contract-details'

 export function SEO(props: {
  title: string
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@ -534,9 +534,8 @@ export function ContractBetsTable(props: {
  contract: Contract
  bets: Bet[]
  isYourBets: boolean
-  className?: string
 }) {
-  const { contract, className, isYourBets } = props
+  const { contract, isYourBets } = props

  const bets = sortBy(
    props.bets.filter((b) => !b.isAnte && b.amount !== 0),
@ -568,7 +567,7 @@ export function ContractBetsTable(props: {
  const unfilledBets = useUnfilledBets(contract.id) ?? []

  return (
-    <div className={clsx('overflow-x-auto', className)}>
+    <div className="overflow-x-auto">
      {amountRedeemed > 0 && (
        <>
          <div className="pl-2 text-sm text-gray-500">
@ -771,7 +770,7 @@ function SellButton(props: {
        setIsSubmitting(false)
      }}
    >
-      <div className="mb-4 text-2xl">
+      <div className="mb-4 text-xl">
        Sell {formatWithCommas(shares)} shares of{' '}
        <OutcomeLabel outcome={outcome} contract={contract} truncate="long" />{' '}
        for {formatMoney(saleAmount)}?
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@ -83,7 +83,6 @@ export function ContractSearch(props: {
  highlightOptions?: ContractHighlightOptions
  onContractClick?: (contract: Contract) => void
  hideOrderSelector?: boolean
-  overrideGridClassName?: string
  cardHideOptions?: {
    hideGroupLink?: boolean
    hideQuickBet?: boolean
@ -99,7 +98,6 @@ export function ContractSearch(props: {
    defaultFilter,
    additionalFilter,
    onContractClick,
-    overrideGridClassName,
    hideOrderSelector,
    cardHideOptions,
    highlightOptions,
@ -183,7 +181,6 @@ export function ContractSearch(props: {
        loadMore={performQuery}
        showTime={showTime}
        onContractClick={onContractClick}
-        overrideGridClassName={overrideGridClassName}
        highlightOptions={highlightOptions}
        cardHideOptions={cardHideOptions}
      />
@ -258,9 +255,12 @@ function ContractSearchControls(props: {
    ? additionalFilters
    : [
        ...additionalFilters,
+        additionalFilter ? '' : 'visibility:public',
+
        filter === 'open' ? 'isResolved:false' : '',
        filter === 'closed' ? 'isResolved:false' : '',
        filter === 'resolved' ? 'isResolved:true' : '',
+
        pillFilter && pillFilter !== 'personal' && pillFilter !== 'your-bets'
          ? `groupLinks.slug:${pillFilter}`
          : '',
--- a/web/components/contract/contract-card-preview.tsx
+++ b/web/components/contract/contract-card-preview.tsx
@ -1,44 +0,0 @@
-import { Contract } from 'common/contract'
-import { getBinaryProbPercent } from 'web/lib/firebase/contracts'
-import { richTextToString } from 'common/util/parse'
-import { contractTextDetails } from 'web/components/contract/contract-details'
-import { getFormattedMappedValue } from 'common/pseudo-numeric'
-import { getProbability } from 'common/calculate'
-
-export const getOpenGraphProps = (contract: Contract) => {
-  const {
-    resolution,
-    question,
-    creatorName,
-    creatorUsername,
-    outcomeType,
-    creatorAvatarUrl,
-    description: desc,
-  } = contract
-  const probPercent =
-    outcomeType === 'BINARY' ? getBinaryProbPercent(contract) : undefined
-
-  const numericValue =
-    outcomeType === 'PSEUDO_NUMERIC'
-      ? getFormattedMappedValue(contract)(getProbability(contract))
-      : undefined
-
-  const stringDesc = typeof desc === 'string' ? desc : richTextToString(desc)
-
-  const description = resolution
-    ? `Resolved ${resolution}. ${stringDesc}`
-    : probPercent
-    ? `${probPercent} chance. ${stringDesc}`
-    : stringDesc
-
-  return {
-    question,
-    probability: probPercent,
-    metadata: contractTextDetails(contract),
-    creatorName,
-    creatorUsername,
-    creatorAvatarUrl,
-    description,
-    numericValue,
-  }
-}
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@ -120,7 +120,7 @@ export function ContractCard(props: {
              truncate={'long'}
            />
          ) : (
-            <FreeResponseTopAnswer contract={contract} truncate="long" />
+            <FreeResponseTopAnswer contract={contract} />
          ))}
      </Col>
      {showQuickBet ? (
@ -230,10 +230,9 @@ export function BinaryResolutionOrChance(props: {

 function FreeResponseTopAnswer(props: {
  contract: FreeResponseContract | MultipleChoiceContract
-  truncate: 'short' | 'long' | 'none'
  className?: string
 }) {
-  const { contract, truncate } = props
+  const { contract } = props

  const topAnswer = getTopAnswer(contract)

@ -241,7 +240,7 @@ function FreeResponseTopAnswer(props: {
    <AnswerLabel
      className="!text-gray-600"
      answer={topAnswer}
-      truncate={truncate}
+      truncate="long"
    />
  ) : null
 }
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@ -9,11 +9,7 @@ import {
 import { Row } from '../layout/row'
 import { formatMoney } from 'common/util/format'
 import { UserLink } from '../user-page'
-import {
-  Contract,
-  contractMetrics,
-  updateContract,
-} from 'web/lib/firebase/contracts'
+import { Contract, updateContract } from 'web/lib/firebase/contracts'
 import dayjs from 'dayjs'
 import { DateTimeTooltip } from '../datetime-tooltip'
 import { fromNow } from 'web/lib/util/time'
@ -35,6 +31,7 @@ import { SiteLink } from 'web/components/site-link'
 import { groupPath } from 'web/lib/firebase/groups'
 import { insertContent } from '../editor/utils'
 import clsx from 'clsx'
+import { contractMetrics } from 'common/contract-details'

 export type ShowTime = 'resolve-date' | 'close-date'

@ -245,25 +242,6 @@ export function ContractDetails(props: {
  )
 }

-// String version of the above, to send to the OpenGraph image generator
-export function contractTextDetails(contract: Contract) {
-  const { closeTime, tags } = contract
-  const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract)
-
-  const hashtags = tags.map((tag) => `#${tag}`)
-
-  return (
-    `${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
-    (closeTime
-      ? ` • ${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs(
-          closeTime
-        ).format('MMM D, h:mma')}`
-      : '') +
-    ` • ${volumeLabel}` +
-    (hashtags.length > 0 ? ` • ${hashtags.join(' ')}` : '')
-  )
-}
-
 function EditableCloseDate(props: {
  closeTime: number
  contract: Contract
--- a/web/components/contract/contracts-grid.tsx
+++ b/web/components/contract/contracts-grid.tsx
@ -9,6 +9,7 @@ import { useCallback } from 'react'
 import clsx from 'clsx'
 import { LoadingIndicator } from '../loading-indicator'
 import { VisibilityObserver } from '../visibility-observer'
+import Masonry from 'react-masonry-css'

 export type ContractHighlightOptions = {
  contractIds?: string[]
@ -20,7 +21,6 @@ export function ContractsGrid(props: {
  loadMore?: () => void
  showTime?: ShowTime
  onContractClick?: (contract: Contract) => void
-  overrideGridClassName?: string
  cardHideOptions?: {
    hideQuickBet?: boolean
    hideGroupLink?: boolean
@ -32,7 +32,6 @@ export function ContractsGrid(props: {
    showTime,
    loadMore,
    onContractClick,
-    overrideGridClassName,
    cardHideOptions,
    highlightOptions,
  } = props
@ -64,12 +63,11 @@ export function ContractsGrid(props: {

  return (
    <Col className="gap-8">
-      <ul
-        className={clsx(
-          overrideGridClassName
-            ? overrideGridClassName
-            : 'grid w-full grid-cols-1 gap-4 md:grid-cols-2'
-        )}
+      <Masonry
+        // Show only 1 column on tailwind's md breakpoint (768px)
+        breakpointCols={{ default: 2, 768: 1 }}
+        className="-ml-4 flex w-auto"
+        columnClassName="pl-4 bg-clip-padding"
      >
        {contracts.map((contract) => (
          <ContractCard
@ -81,14 +79,13 @@ export function ContractsGrid(props: {
            }
            hideQuickBet={hideQuickBet}
            hideGroupLink={hideGroupLink}
-            className={
-              contractIds?.includes(contract.id)
-                ? highlightClassName
-                : undefined
-            }
+            className={clsx(
+              'mb-4 break-inside-avoid-column overflow-hidden', // prevent content from wrapping (needs overflow on firefox)
+              contractIds?.includes(contract.id) && highlightClassName
+            )}
          />
        ))}
-      </ul>
+      </Masonry>
      <VisibilityObserver
        onVisibilityUpdated={onVisibilityUpdated}
        className="relative -top-96 h-1"
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@ -23,7 +23,7 @@ import { useState } from 'react'
 import toast from 'react-hot-toast'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { placeBet } from 'web/lib/firebase/api'
-import { getBinaryProb, getBinaryProbPercent } from 'web/lib/firebase/contracts'
+import { getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
 import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
 import { Col } from '../layout/col'
@ -34,6 +34,7 @@ import { calculateCpmmSale, getCpmmProbability } from 'common/calculate-cpmm'
 import { track } from 'web/lib/service/analytics'
 import { formatNumericProbability } from 'common/pseudo-numeric'
 import { useUnfilledBets } from 'web/hooks/use-bets'
+import { getBinaryProb } from 'common/contract-details'

 const BET_SIZE = 10

--- a/web/components/editor/market-modal.tsx
+++ b/web/components/editor/market-modal.tsx
@ -65,9 +65,6 @@ export function MarketModal(props: {
          <ContractSearch
            hideOrderSelector
            onContractClick={addContract}
-            overrideGridClassName={
-              'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
-            }
            cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
            highlightOptions={{
              contractIds: contracts.map((c) => c.id),
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@ -11,7 +11,6 @@ import clsx from 'clsx'
 import { OutcomeLabel } from '../outcome-label'
 import {
  Contract,
-  contractMetrics,
  contractPath,
  tradingAllowed,
 } from 'web/lib/firebase/contracts'
@ -38,6 +37,7 @@ import { FeedLiquidity } from './feed-liquidity'
 import { SignUpPrompt } from '../sign-up-prompt'
 import { User } from 'common/user'
 import { PlayMoneyDisclaimer } from '../play-money-disclaimer'
+import { contractMetrics } from 'common/contract-details'

 export function FeedItems(props: {
  contract: Contract
--- a/web/components/outcome-label.tsx
+++ b/web/components/outcome-label.tsx
@ -90,13 +90,11 @@ export function FreeResponseOutcomeLabel(props: {
  const chosen = contract.answers?.find((answer) => answer.id === resolution)
  if (!chosen) return <AnswerNumberLabel number={resolution} />
  return (
-    <Tooltip text={chosen.text}>
    <AnswerLabel
      answer={chosen}
      truncate={truncate}
      className={answerClassName}
    />
-    </Tooltip>
  )
 }

@ -165,11 +163,13 @@ export function AnswerLabel(props: {
  }

  return (
+    <Tooltip text={truncated === text ? false : text}>
      <span
        style={{ wordBreak: 'break-word' }}
        className={clsx('whitespace-pre-line break-words', className)}
      >
        {truncated}
      </span>
+    </Tooltip>
  )
 }
--- a/web/components/profile/betting-streak-modal.tsx
+++ b/web/components/profile/betting-streak-modal.tsx
@ -1,5 +1,10 @@
 import { Modal } from 'web/components/layout/modal'
 import { Col } from 'web/components/layout/col'
+import {
+  BETTING_STREAK_BONUS_AMOUNT,
+  BETTING_STREAK_BONUS_MAX,
+} from 'common/numeric-constants'
+import { formatMoney } from 'common/util/format'

 export function BettingStreakModal(props: {
  isOpen: boolean
@ -11,12 +16,13 @@ export function BettingStreakModal(props: {
    <Modal open={isOpen} setOpen={setOpen}>
      <Col className="items-center gap-4 rounded-md bg-white px-8 py-6">
        <span className={'text-8xl'}>🔥</span>
-        <span>Betting streaks are here!</span>
+        <span>Daily betting streaks</span>
        <Col className={'gap-2'}>
          <span className={'text-indigo-700'}>• What are they?</span>
          <span className={'ml-2'}>
-            You get a reward for every consecutive day that you place a bet. The
-            more days you bet in a row, the more you earn!
+            You get {formatMoney(BETTING_STREAK_BONUS_AMOUNT)} more for each day
+            of consecutive betting up to {formatMoney(BETTING_STREAK_BONUS_MAX)}
+            . The more days you bet in a row, the more you earn!
          </span>
          <span className={'text-indigo-700'}>
            • Where can I check my streak?
--- a/web/components/tooltip.tsx
+++ b/web/components/tooltip.tsx
@ -79,7 +79,7 @@ export function Tooltip(props: {
        role="tooltip"
        ref={floating}
        style={{ position: strategy, top: y ?? 0, left: x ?? 0 }}
-        className="z-10 max-w-xs rounded bg-slate-700 px-2 py-1 text-center text-sm text-white"
+        className="z-10 max-w-xs whitespace-normal rounded bg-slate-700 px-2 py-1 text-center text-sm text-white"
        {...getFloatingProps()}
      >
        {text}
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@ -72,13 +72,28 @@ export function UserPage(props: { user: User }) {

  useEffect(() => {
    const claimedMana = router.query['claimed-mana'] === 'yes'
-    setShowConfetti(claimedMana)
    const showBettingStreak = router.query['show'] === 'betting-streak'
    setShowBettingStreakModal(showBettingStreak)
+    setShowConfetti(claimedMana || showBettingStreak)

    const showLoansModel = router.query['show'] === 'loans'
    setShowLoansModal(showLoansModel)
-  }, [router])
+
+    const query = { ...router.query }
+    if (query.claimedMana || query.show) {
+      delete query['claimed-mana']
+      delete query['show']
+      router.replace(
+        {
+          pathname: router.pathname,
+          query,
+        },
+        undefined,
+        { shallow: true }
+      )
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])

  const profit = user.profitCached.allTime

@ -89,10 +104,9 @@ export function UserPage(props: { user: User }) {
        description={user.bio ?? ''}
        url={`/${user.username}`}
      />
-      {showConfetti ||
-        (showBettingStreakModal && (
+      {showConfetti && (
        <FullscreenConfetti recycle={false} numberOfPieces={300} />
-        ))}
+      )}
      <BettingStreakModal
        isOpen={showBettingStreakModal}
        setOpen={setShowBettingStreakModal}
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@ -1,4 +1,3 @@
-import dayjs from 'dayjs'
 import {
  collection,
  deleteDoc,
@ -17,14 +16,13 @@ import { sortBy, sum } from 'lodash'

 import { coll, getValues, listenForValue, listenForValues } from './utils'
 import { BinaryContract, Contract } from 'common/contract'
-import { getDpmProbability } from 'common/calculate-dpm'
 import { createRNG, shuffle } from 'common/util/random'
-import { getCpmmProbability } from 'common/calculate-cpmm'
 import { formatMoney, formatPercent } from 'common/util/format'
 import { DAY_MS } from 'common/util/time'
 import { Bet } from 'common/bet'
 import { Comment } from 'common/comment'
 import { ENV_CONFIG } from 'common/envs/constants'
+import { getBinaryProb } from 'common/contract-details'

 export const contracts = coll<Contract>('contracts')

@ -49,20 +47,6 @@ export function contractUrl(contract: Contract) {
  return `https://${ENV_CONFIG.domain}${contractPath(contract)}`
 }

-export function contractMetrics(contract: Contract) {
-  const { createdTime, resolutionTime, isResolved } = contract
-
-  const createdDate = dayjs(createdTime).format('MMM D')
-
-  const resolvedDate = isResolved
-    ? dayjs(resolutionTime).format('MMM D')
-    : undefined
-
-  const volumeLabel = `${formatMoney(contract.volume)} bet`
-
-  return { volumeLabel, createdDate, resolvedDate }
-}
-
 export function contractPool(contract: Contract) {
  return contract.mechanism === 'cpmm-1'
    ? formatMoney(contract.totalLiquidity)
@ -71,17 +55,6 @@ export function contractPool(contract: Contract) {
    : 'Empty pool'
 }

-export function getBinaryProb(contract: BinaryContract) {
-  const { pool, resolutionProbability, mechanism } = contract
-
-  return (
-    resolutionProbability ??
-    (mechanism === 'cpmm-1'
-      ? getCpmmProbability(pool, contract.p)
-      : getDpmProbability(contract.totalShares))
-  )
-}
-
 export function getBinaryProbPercent(contract: BinaryContract) {
  return formatPercent(getBinaryProb(contract))
 }
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@ -36,13 +36,13 @@ import { AlertBox } from 'web/components/alert-box'
 import { useTracking } from 'web/hooks/use-tracking'
 import { CommentTipMap, useTipTxns } from 'web/hooks/use-tip-txns'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
-import { getOpenGraphProps } from 'web/components/contract/contract-card-preview'
 import { User } from 'common/user'
 import { ContractComment } from 'common/comment'
 import { listUsers } from 'web/lib/firebase/users'
 import { FeedComment } from 'web/components/feed/feed-comments'
 import { Title } from 'web/components/title'
 import { FeedBet } from 'web/components/feed/feed-bets'
+import { getOpenGraphProps } from 'common/contract-details'

 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
--- a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
+++ b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
@ -28,11 +28,11 @@ import { LoadingIndicator } from 'web/components/loading-indicator'
 import { useWindowSize } from 'web/hooks/use-window-size'
 import { Bet, listAllBets } from 'web/lib/firebase/bets'
 import { SEO } from 'web/components/SEO'
-import { getOpenGraphProps } from 'web/components/contract/contract-card-preview'
 import Custom404 from 'web/pages/404'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { BinaryContract } from 'common/contract'
 import { Title } from 'web/components/title'
+import { getOpenGraphProps } from 'common/contract-details'

 export const getStaticProps = fromPropz(getStaticPropz)

--- a/web/pages/charity/index.tsx
+++ b/web/pages/charity/index.tsx
@ -26,7 +26,9 @@ import { User } from 'common/user'
 import { SEO } from 'web/components/SEO'

 export async function getStaticProps() {
-  const txns = await getAllCharityTxns()
+  let txns = await getAllCharityTxns()
+  // Sort by newest txns first
+  txns = sortBy(txns, 'createdTime').reverse()
  const totals = mapValues(groupBy(txns, 'toId'), (txns) =>
    sumBy(txns, (txn) => txn.amount)
  )
@ -37,7 +39,8 @@ export async function getStaticProps() {
  ])
  const matches = quadraticMatches(txns, totalRaised)
  const numDonors = uniqBy(txns, (txn) => txn.fromId).length
-  const mostRecentDonor = await getUser(txns[txns.length - 1].fromId)
+  const mostRecentDonor = await getUser(txns[0].fromId)
+  const mostRecentCharity = txns[0].toId

  return {
    props: {
@ -47,6 +50,7 @@ export async function getStaticProps() {
      txns,
      numDonors,
      mostRecentDonor,
+      mostRecentCharity,
    },
    revalidate: 60,
  }
@ -71,7 +75,7 @@ function DonatedStats(props: { stats: Stat[] }) {
            {stat.name}
          </dt>

-          <dd className="mt-1 text-3xl font-semibold text-gray-900">
+          <dd className="mt-1 text-2xl font-semibold text-gray-900">
            {stat.url ? (
              <SiteLink href={stat.url}>{stat.stat}</SiteLink>
            ) : (
@ -91,11 +95,21 @@ export default function Charity(props: {
  txns: Txn[]
  numDonors: number
  mostRecentDonor: User
+  mostRecentCharity: string
 }) {
-  const { totalRaised, charities, matches, numDonors, mostRecentDonor } = props
+  const {
+    totalRaised,
+    charities,
+    matches,
+    mostRecentCharity,
+    mostRecentDonor,
+  } = props

  const [query, setQuery] = useState('')
  const debouncedQuery = debounce(setQuery, 50)
+  const recentCharityName =
+    charities.find((charity) => charity.id === mostRecentCharity)?.name ??
+    'Nobody'

  const filterCharities = useMemo(
    () =>
@ -143,15 +157,16 @@ export default function Charity(props: {
                name: 'Raised by Manifold users',
                stat: manaToUSD(totalRaised),
              },
-              {
-                name: 'Number of donors',
-                stat: `${numDonors}`,
-              },
              {
                name: 'Most recent donor',
                stat: mostRecentDonor.name ?? 'Nobody',
                url: `/${mostRecentDonor.username}`,
              },
+              {
+                name: 'Most recent donation',
+                stat: recentCharityName,
+                url: `/charity/${mostRecentCharity}`,
+              },
            ]}
          />
          <Spacer h={10} />
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@ -15,6 +15,7 @@ import {
  MAX_DESCRIPTION_LENGTH,
  MAX_QUESTION_LENGTH,
  outcomeType,
+  visibility,
 } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 import { removeUndefinedProps } from 'common/util/object'
@ -150,6 +151,7 @@ export function NewContract(props: {
    undefined
  )
  const [showGroupSelector, setShowGroupSelector] = useState(true)
+  const [visibility, setVisibility] = useState<visibility>('public')

  const closeTime = closeDate
    ? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
@ -234,6 +236,7 @@ export function NewContract(props: {
          isLogScale,
          answers,
          groupId: selectedGroup?.id,
+          visibility,
        })
      )
      track('create market', {
@ -367,14 +370,30 @@ export function NewContract(props: {
        </>
      )}

-      <div className={'mt-2'}>
+      <div className="form-control mb-1 items-start gap-1">
+        <label className="label gap-2">
+          <span className="mb-1">Visibility</span>
+          <InfoTooltip text="Whether the market will be listed on the home page." />
+        </label>
+        <ChoicesToggleGroup
+          currentChoice={visibility}
+          setChoice={(choice) => setVisibility(choice as visibility)}
+          choicesMap={{
+            Public: 'public',
+            Unlisted: 'unlisted',
+          }}
+          isSubmitting={isSubmitting}
+        />
+      </div>
+
+      <Spacer h={6} />
+
      <GroupSelector
        selectedGroup={selectedGroup}
        setSelectedGroup={setSelectedGroup}
        creator={creator}
        options={{ showSelector: showGroupSelector, showLabel: true }}
      />
-      </div>

      <Spacer h={6} />

--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@ -551,7 +551,12 @@ function AddContractButton(props: { group: Group; user: User }) {
  return (
    <>
      <div className={'flex justify-center'}>
-        <Button size="sm" color="gradient" onClick={() => setOpen(true)}>
+        <Button
+          className="whitespace-nowrap"
+          size="sm"
+          color="gradient"
+          onClick={() => setOpen(true)}
+        >
          Add market
        </Button>
      </div>
@ -607,9 +612,6 @@ function AddContractButton(props: { group: Group; user: User }) {
              user={user}
              hideOrderSelector={true}
              onContractClick={addContractToCurrentGroup}
-              overrideGridClassName={
-                'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
-              }
              cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
              additionalFilter={{ excludeContractIds: group.contractIds }}
              highlightOptions={{
--- a/web/pages/notifications.tsx
+++ b/web/pages/notifications.tsx
@ -377,6 +377,7 @@ function IncomeNotificationItem(props: {
  function reasonAndLink(simple: boolean) {
    const { sourceText } = notification
    let reasonText = ''
+
    if (sourceType === 'bonus' && sourceText) {
      reasonText = !simple
        ? `Bonus for ${
@ -385,13 +386,20 @@ function IncomeNotificationItem(props: {
        : 'bonus on'
    } else if (sourceType === 'tip') {
      reasonText = !simple ? `tipped you on` : `in tips on`
+    } else if (sourceType === 'betting_streak_bonus') {
+      reasonText = 'for your'
    } else if (sourceType === 'loan' && sourceText) {
      reasonText = `of your invested bets returned as`
-    } else if (sourceType === 'betting_streak_bonus' && sourceText) {
-      reasonText = `for your ${
-        parseInt(sourceText) / BETTING_STREAK_BONUS_AMOUNT
-      }-day`
    }
+
+    const bettingStreakText =
+      sourceType === 'betting_streak_bonus' &&
+      (sourceText
+        ? `🔥 ${
+            parseInt(sourceText) / BETTING_STREAK_BONUS_AMOUNT
+          } day Betting Streak`
+        : 'Betting Streak')
+
    return (
      <>
        {reasonText}
@ -405,13 +413,13 @@ function IncomeNotificationItem(props: {
          )
        ) : sourceType === 'betting_streak_bonus' ? (
          simple ? (
-            <span className={'ml-1 font-bold'}>Betting Streak</span>
+            <span className={'ml-1 font-bold'}>{bettingStreakText}</span>
          ) : (
            <SiteLink
              className={'ml-1 font-bold'}
              href={'/betting-streak-bonus'}
            >
-              Betting Streak
+              {bettingStreakText}
            </SiteLink>
          )
        ) : (
--- a/yarn.lock
+++ b/yarn.lock
@ -9947,6 +9947,11 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
  dependencies:
    "@babel/runtime" "^7.10.3"

+react-masonry-css@1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
+  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
+
 react-motion@^0.5.2:
  version "0.5.2"
  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"