Merge branch 'main' into tipping-posts

2022-10-14 12:26:59 +01:00 · 2022-10-14 12:26:59 +01:00 · 29c7afa13c
commit 29c7afa13c
parent 1bae261e68 0a70652667
71 changed files with 765 additions and 484 deletions
--- a/common/.eslintrc.js
+++ b/common/.eslintrc.js
@ -26,7 +26,7 @@ module.exports = {
            caughtErrorsIgnorePattern: '^_',
          },
        ],
-        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-imports': 'warn',
      },
    },
  ],
--- a/common/charity.ts
+++ b/common/charity.ts
@ -595,7 +595,8 @@ In addition to housing impact litigation, we provide free legal aid, education a
    photo:
      'https://firebasestorage.googleapis.com/v0/b/mantic-markets.appspot.com/o/user-images%2Fdefault%2Fci2h3hStFM.47?alt=media&token=0d2cdc3d-e4d8-4f5e-8f23-4a586b6ff637',
    preview: 'Donate supplies to soldiers in Ukraine',
-    description: 'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.',
+    description:
+      'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.',
  },
 ].map((charity) => {
  const slug = charity.name.toLowerCase().replace(/\s/g, '-')
--- a/common/envs/dev.ts
+++ b/common/envs/dev.ts
@ -16,7 +16,6 @@ export const DEV_CONFIG: EnvConfig = {
  cloudRunId: 'w3txbmd3ba',
  cloudRunRegion: 'uc',
  amplitudeApiKey: 'fd8cbfd964b9a205b8678a39faae71b3',
-  // this is Phil's deployment
-  twitchBotEndpoint: 'https://king-prawn-app-5btyw.ondigitalocean.app',
+  twitchBotEndpoint: 'https://dev-twitch-bot.manifold.markets',
  sprigEnvironmentId: 'Tu7kRZPm7daP',
 }
--- a/common/like.ts
+++ b/common/like.ts
@ -6,3 +6,4 @@ export type Like = {
  tipTxnId?: string // only holds most recent tip txn id
 }
 export const LIKE_TIP_AMOUNT = 10
+export const TIP_UNDO_DURATION = 2000
--- a/common/util/parse.ts
+++ b/common/util/parse.ts
@ -1,4 +1,4 @@
-import { generateText, JSONContent } from '@tiptap/core'
+import { generateText, JSONContent, Node } from '@tiptap/core'
 import { generateJSON } from '@tiptap/html'
 // Tiptap starter extensions
 import { Blockquote } from '@tiptap/extension-blockquote'
@ -52,6 +52,26 @@ export function parseMentions(data: JSONContent): string[] {
  return uniq(mentions)
 }

+// TODO: this is a hack to get around the fact that tiptap doesn't have a
+// way to add a node view without bundling in tsx
+function skippableComponent(name: string): Node<any, any> {
+  return Node.create({
+    name,
+
+    group: 'block',
+
+    content: 'inline*',
+
+    parseHTML() {
+      return [
+        {
+          tag: 'grid-cards-component',
+        },
+      ]
+    },
+  })
+}
+
 const stringParseExts = [
  // StarterKit extensions
  Blockquote,
@ -79,6 +99,7 @@ const stringParseExts = [
    renderText: ({ node }) =>
      '[embed]' + node.attrs.src ? `(${node.attrs.src})` : '',
  }),
+  skippableComponent('gridCardsComponent'),
  TiptapTweet.extend({ renderText: () => '[tweet]' }),
  TiptapSpoiler.extend({ renderHTML: () => ['span', '[spoiler]', 0] }),
 ]
--- a/firestore.rules
+++ b/firestore.rules
@ -110,7 +110,7 @@ service cloud.firestore {
    match /contracts/{contractId} {
      allow read;
      allow update: if request.resource.data.diff(resource.data).affectedKeys()
-                                                                 .hasOnly(['tags', 'lowercaseTags', 'groupSlugs', 'groupLinks']);
+                                                                 .hasOnly(['tags', 'lowercaseTags', 'groupSlugs', 'groupLinks', 'flaggedByUsernames']);
      allow update: if request.resource.data.diff(resource.data).affectedKeys()
                                                                 .hasOnly(['description', 'closeTime', 'question', 'visibility', 'unlistedById'])
                       && resource.data.creatorId == request.auth.uid;
--- a/functions/.eslintrc.js
+++ b/functions/.eslintrc.js
@ -26,7 +26,7 @@ module.exports = {
            caughtErrorsIgnorePattern: '^_',
          },
        ],
-        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-imports': 'warn',
      },
    },
  ],
--- a/functions/src/create-notification.ts
+++ b/functions/src/create-notification.ts
@ -197,6 +197,7 @@ export const createCommentOrAnswerOrUpdatedContractNotification = async (
    return await notificationRef.set(removeUndefinedProps(notification))
  }

+  const needNotFollowContractReasons = ['tagged_user']
  const stillFollowingContract = (userId: string) => {
    return contractFollowersIds.includes(userId)
  }
@ -205,7 +206,12 @@ export const createCommentOrAnswerOrUpdatedContractNotification = async (
    userId: string,
    reason: notification_reason_types
  ) => {
-    if (!stillFollowingContract(userId) || sourceUser.id == userId) return
+    if (
+      (!stillFollowingContract(userId) &&
+        !needNotFollowContractReasons.includes(reason)) ||
+      sourceUser.id == userId
+    )
+      return
    const privateUser = await getPrivateUser(userId)
    if (!privateUser) return
    const { sendToBrowser, sendToEmail } = getNotificationDestinationsForUser(
--- a/functions/src/resolve-market.ts
+++ b/functions/src/resolve-market.ts
@ -171,12 +171,12 @@ export const resolveMarket = async (
  const openBets = bets.filter((b) => !b.isSold && !b.sale)
  const loanPayouts = getLoanPayouts(openBets)

-  const payouts = [
+  const payoutsWithoutLoans = [
    { userId: creatorId, payout: creatorPayout, deposit: creatorPayout },
    ...liquidityPayouts.map((p) => ({ ...p, deposit: p.payout })),
    ...traderPayouts,
-    ...loanPayouts,
  ]
+  const payouts = [...payoutsWithoutLoans, ...loanPayouts]

  if (!isProd())
    console.log(
@ -208,7 +208,7 @@ export const resolveMarket = async (
  await undoUniqueBettorRewardsIfCancelResolution(contract, outcome)
  await revalidateStaticProps(getContractPath(contract))

-  const userPayoutsWithoutLoans = groupPayoutsByUser(payouts)
+  const userPayoutsWithoutLoans = groupPayoutsByUser(payoutsWithoutLoans)

  const userInvestments = mapValues(
    groupBy(bets, (bet) => bet.userId),
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@ -22,8 +22,9 @@ module.exports = {
    '@next/next/no-typos': 'off',
    'linebreak-style': ['error', 'unix'],
    'lodash/import-scope': [2, 'member'],
-    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-imports': 'warn',
  },
+  ignorePatterns: ['/public/mtg/*'],
  env: {
    browser: true,
    node: true,
--- a/web/components/add-funds-modal.tsx
+++ b/web/components/add-funds-modal.tsx
@ -35,7 +35,7 @@ export function AddFundsModal(props: {
        <div className="text-xl">{manaToUSD(amountSelected)}</div>
      </div>

-      <div className="modal-action">
+      <div className="flex">
        <Button color="gray-white" onClick={() => setOpen(false)}>
          Back
        </Button>
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@ -7,6 +7,8 @@ import { ENV_CONFIG } from 'common/envs/constants'
 import { Row } from './layout/row'
 import { AddFundsModal } from './add-funds-modal'
 import { Input } from './input'
+import Slider from 'rc-slider'
+import 'rc-slider/assets/index.css'

 export function AmountInput(props: {
  amount: number | undefined
@ -40,17 +42,13 @@ export function AmountInput(props: {

  return (
    <>
-      <Col className={className}>
+      <Col className={clsx('relative', className)}>
        <label className="font-sm md:font-lg relative">
          <span className="text-greyscale-4 absolute top-1/2 my-auto ml-2 -translate-y-1/2">
            {label}
          </span>
          <Input
-            className={clsx(
-              'w-24 pl-9 !text-base md:w-auto',
-              error && 'input-error',
-              inputClassName
-            )}
+            className={clsx('w-24 pl-9 !text-base md:w-auto', inputClassName)}
            ref={inputRef}
            type="text"
            pattern="[0-9]*"
@ -58,13 +56,14 @@ export function AmountInput(props: {
            placeholder="0"
            maxLength={6}
            value={amount ?? ''}
+            error={!!error}
            disabled={disabled}
            onChange={(e) => onAmountChange(e.target.value)}
          />
        </label>

        {error && (
-          <div className="absolute mt-11 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
+          <div className="absolute -bottom-5 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
            {error === 'Insufficient balance' ? (
              <>
                Not enough funds.
@ -148,7 +147,7 @@ export function BuyAmountInput(props: {

  return (
    <>
-      <Row className="gap-4">
+      <Row className="items-center gap-4">
        <AmountInput
          amount={amount}
          onChange={onAmountChange}
@ -160,14 +159,23 @@ export function BuyAmountInput(props: {
          inputRef={inputRef}
        />
        {showSlider && (
-          <input
-            type="range"
-            min="0"
-            max="205"
+          <Slider
+            min={0}
+            max={205}
            value={getRaw(amount ?? 0)}
-            onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))}
-            className="range range-lg only-thumb my-auto align-middle xl:hidden"
-            step="5"
+            onChange={(value) => onAmountChange(parseRaw(value as number))}
+            className="mx-4 !h-4 xl:hidden [&>.rc-slider-rail]:bg-gray-200 [&>.rc-slider-track]:bg-indigo-400 [&>.rc-slider-handle]:bg-indigo-400"
+            railStyle={{ height: 16, top: 0, left: 0 }}
+            trackStyle={{ height: 16, top: 0 }}
+            handleStyle={{
+              height: 32,
+              width: 32,
+              opacity: 1,
+              border: 'none',
+              boxShadow: 'none',
+              top: -2,
+            }}
+            step={5}
          />
        )}
      </Row>
--- a/web/components/answers/answer-item.tsx
+++ b/web/components/answers/answer-item.tsx
@ -100,8 +100,8 @@ export function AnswerItem(props: {
            </div>
          ))}
        {showChoice ? (
-          <div className="form-control py-1">
-            <label className="label cursor-pointer gap-3">
+          <div className="flex flex-col py-1">
+            <label className="cursor-pointer gap-3 px-1 py-2">
              <span className="">Choose this answer</span>
              {showChoice === 'radio' && (
                <input
--- a/web/components/answers/answers-panel.tsx
+++ b/web/components/answers/answers-panel.tsx
@ -27,6 +27,13 @@ import { CHOICE_ANSWER_COLORS } from '../charts/contract/choice'
 import { useChartAnswers } from '../charts/contract/choice'
 import { ChatIcon } from '@heroicons/react/outline'

+export function getAnswerColor(answer: Answer, answersArray: string[]) {
+  const colorIndex = answersArray.indexOf(answer.text)
+  return colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
+    ? CHOICE_ANSWER_COLORS[colorIndex]
+    : '#B1B1C7'
+}
+
 export function AnswersPanel(props: {
  contract: FreeResponseContract | MultipleChoiceContract
  onAnswerCommentClick: (answer: Answer) => void
@ -107,8 +114,8 @@ export function AnswersPanel(props: {
    ? 'checkbox'
    : undefined

-  const colorSortedAnswer = useChartAnswers(contract).map(
-    (value, _index) => value.text
+  const answersArray = useChartAnswers(contract).map(
+    (answer, _index) => answer.text
  )

  return (
@ -139,8 +146,8 @@ export function AnswersPanel(props: {
              key={item.id}
              answer={item}
              contract={contract}
-              colorIndex={colorSortedAnswer.indexOf(item.text)}
              onAnswerCommentClick={onAnswerCommentClick}
+              color={getAnswerColor(item, answersArray)}
            />
          ))}
          {hasZeroBetAnswers && !showAllAnswers && (
@ -185,18 +192,14 @@ export function AnswersPanel(props: {
 function OpenAnswer(props: {
  contract: FreeResponseContract | MultipleChoiceContract
  answer: Answer
-  colorIndex: number | undefined
+  color: string
  onAnswerCommentClick: (answer: Answer) => void
 }) {
-  const { answer, contract, colorIndex, onAnswerCommentClick } = props
+  const { answer, contract, onAnswerCommentClick, color } = props
  const { username, avatarUrl, text } = answer
  const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
  const probPercent = formatPercent(prob)
  const [open, setOpen] = useState(false)
-  const color =
-    colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
-      ? CHOICE_ANSWER_COLORS[colorIndex] + '55' // semi-transparent
-      : '#B1B1C755'
  const colorWidth = 100 * Math.max(prob, 0.01)

  return (
@ -217,7 +220,7 @@ function OpenAnswer(props: {
          tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5'
        )}
        style={{
-          background: `linear-gradient(to right, ${color} ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
+          background: `linear-gradient(to right, ${color}90 ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
        }}
      >
        <Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">
@ -227,10 +230,7 @@ function OpenAnswer(props: {
              username={username}
              avatarUrl={avatarUrl}
            />
-            <Linkify
-              className="text-md cursor-pointer whitespace-pre-line"
-              text={text}
-            />
+            <Linkify className="text-md whitespace-pre-line" text={text} />
          </Row>
          <Row className="gap-2">
            <div className="my-auto text-xl">{probPercent}</div>
--- a/web/components/bet-inline.tsx
+++ b/web/components/bet-inline.tsx
@ -92,10 +92,7 @@ export function BetInline(props: {
        />
        <BuyAmountInput
          className="-mb-4"
-          inputClassName={clsx(
-            'input-sm w-20 !text-base',
-            error && 'input-error'
-          )}
+          inputClassName="w-20 !text-base"
          amount={amount}
          onChange={setAmount}
          error="" // handle error ourselves
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@ -631,9 +631,9 @@ function LimitOrderPanel(props: {

  return (
    <Col className={hidden ? 'hidden' : ''}>
-      <Row className="mt-1 items-center gap-4">
+      <Row className="mt-1 mb-4 items-center gap-4">
        <Col className="gap-2">
-          <div className="relative ml-1 text-sm text-gray-500">
+          <div className="text-sm text-gray-500">
            Buy {isPseudoNumeric ? <HigherLabel /> : <YesLabel />} up to
          </div>
          <ProbabilityOrNumericInput
@ -641,10 +641,11 @@ function LimitOrderPanel(props: {
            prob={lowLimitProb}
            setProb={setLowLimitProb}
            isSubmitting={isSubmitting}
+            placeholder="10"
          />
        </Col>
        <Col className="gap-2">
-          <div className="ml-1 text-sm text-gray-500">
+          <div className="text-sm text-gray-500">
            Buy {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} down to
          </div>
          <ProbabilityOrNumericInput
@ -652,6 +653,7 @@ function LimitOrderPanel(props: {
            prob={highLimitProb}
            setProb={setHighLimitProb}
            isSubmitting={isSubmitting}
+            placeholder="90"
          />
        </Col>
      </Row>
@ -980,11 +982,11 @@ export function SellPanel(props: {
      <Col className="mt-3 w-full gap-3 text-sm">
        <Row className="items-center justify-between gap-2 text-gray-500">
          Sale amount
-          <span className="text-neutral">{formatMoney(saleValue)}</span>
+          <span className="text-gray-700">{formatMoney(saleValue)}</span>
        </Row>
        <Row className="items-center justify-between gap-2 text-gray-500">
          Profit
-          <span className="text-neutral">{formatMoney(profit)}</span>
+          <span className="text-gray-700">{formatMoney(profit)}</span>
        </Row>
        <Row className="items-center justify-between">
          <div className="text-gray-500">
@ -1000,11 +1002,11 @@ export function SellPanel(props: {
          <>
            <Row className="mt-6 items-center justify-between gap-2 text-gray-500">
              Loan payment
-              <span className="text-neutral">{formatMoney(-loanPaid)}</span>
+              <span className="text-gray-700">{formatMoney(-loanPaid)}</span>
            </Row>
            <Row className="items-center justify-between gap-2 text-gray-500">
              Net proceeds
-              <span className="text-neutral">{formatMoney(netProceeds)}</span>
+              <span className="text-gray-700">{formatMoney(netProceeds)}</span>
            </Row>
          </>
        )}
--- a/web/components/bet-summary.tsx
+++ b/web/components/bet-summary.tsx
@ -25,10 +25,8 @@ export function BetsSummary(props: {
  const isBinary = outcomeType === 'BINARY'

  const bets = props.userBets.filter((b) => !b.isAnte)
-  const { profitPercent, payout, profit, invested } = getContractBetMetrics(
-    contract,
-    bets
-  )
+  const { profitPercent, payout, profit, invested, hasShares } =
+    getContractBetMetrics(contract, bets)

  const excludeSales = bets.filter((b) => !b.isSold && !b.sale)
  const yesWinnings = sumBy(excludeSales, (bet) =>
@ -39,6 +37,7 @@ export function BetsSummary(props: {
  )

  const position = yesWinnings - noWinnings
+  const outcome = hasShares ? (position > 0 ? 'YES' : 'NO') : undefined

  const prob = isBinary ? getProbability(contract) : 0
  const expectation = prob * yesWinnings + (1 - prob) * noWinnings
@ -60,7 +59,9 @@ export function BetsSummary(props: {
          <Col>
            <div className="whitespace-nowrap text-sm text-gray-500">
              Position{' '}
-              <InfoTooltip text="Number of shares you own on net. 1 YES share = M$1 if the market resolves YES." />
+              <InfoTooltip
+                text={`Number of shares you own on net. 1 ${outcome} share = M$1 if the market resolves ${outcome}.`}
+              />
            </div>
            <div className="whitespace-nowrap">
              {position > 1e-7 ? (
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@ -52,6 +52,8 @@ import {
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
 import { ExclamationIcon } from '@heroicons/react/outline'
+import { Select } from './select'
+import { Table } from './table'

 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
@ -200,8 +202,7 @@ export function BetsList(props: { user: User }) {
        </Row>

        <Row className="gap-2">
-          <select
-            className="border-greyscale-4 self-start overflow-hidden rounded border px-2 py-2 text-sm"
+          <Select
            value={filter}
            onChange={(e) => setFilter(e.target.value as BetFilter)}
          >
@ -211,10 +212,9 @@ export function BetsList(props: { user: User }) {
            <option value="closed">Closed</option>
            <option value="resolved">Resolved</option>
            <option value="all">All</option>
-          </select>
+          </Select>

-          <select
-            className="border-greyscale-4 self-start overflow-hidden rounded px-2 py-2 text-sm"
+          <Select
            value={sort}
            onChange={(e) => setSort(e.target.value as BetSort)}
          >
@ -222,7 +222,7 @@ export function BetsList(props: { user: User }) {
            <option value="value">Value</option>
            <option value="profit">Profit</option>
            <option value="closeTime">Close date</option>
-          </select>
+          </Select>
        </Row>
      </Col>

@ -451,7 +451,7 @@ export function ContractBetsTable(props: {
        </>
      )}

-      <table className="table-zebra table-compact table w-full text-gray-500">
+      <Table>
        <thead>
          <tr className="p-2">
            <th></th>
@ -480,7 +480,7 @@ export function ContractBetsTable(props: {
            />
          ))}
        </tbody>
-      </table>
+      </Table>
    </div>
  )
 }
@ -551,7 +551,7 @@ function BetRow(props: {

  return (
    <tr>
-      <td className="text-neutral">
+      <td className="text-gray-700">
        {isYourBet &&
          !isCPMM &&
          !isResolved &&
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@ -108,7 +108,7 @@ export function IconButton(props: {
      className={clsx(
        'inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed',
        sizeClasses[size],
-        'disabled:text-greyscale-2 text-greyscale-6 hover:text-indigo-600',
+        'disabled:text-greyscale-2 text-greyscale-5 hover:text-greyscale-6',
        className
      )}
      disabled={disabled || loading}
--- a/web/components/challenges/create-challenge-modal.tsx
+++ b/web/components/challenges/create-challenge-modal.tsx
@ -171,7 +171,7 @@ function CreateChallengeForm(props: {
              <div>You'll bet:</div>
              <Row
                className={
-                  'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
+                  'w-full max-w-xs items-center justify-between gap-4 pr-3'
                }
              >
                <AmountInput
--- a/web/components/comment-input.tsx
+++ b/web/components/comment-input.tsx
@ -8,10 +8,12 @@ import { useEffect, useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
 import Curve from 'web/public/custom-components/curve'
+import { getAnswerColor } from './answers/answers-panel'
 import { Avatar } from './avatar'
 import { TextEditor, useTextEditor } from './editor'
 import { CommentsAnswer } from './feed/feed-answer-comment-group'
 import { ContractCommentInput } from './feed/feed-comments'
+import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'

@ -81,20 +83,30 @@ export function AnswerCommentInput(props: {
  contract: Contract<AnyContractType>
  answerResponse: Answer
  onCancelAnswerResponse?: () => void
+  answersArray: string[]
 }) {
-  const { contract, answerResponse, onCancelAnswerResponse } = props
+  const { contract, answerResponse, onCancelAnswerResponse, answersArray } =
+    props
  const replyTo = {
    id: answerResponse.id,
    username: answerResponse.username,
  }
-
+  const color = getAnswerColor(answerResponse, answersArray)
  return (
    <>
-      <CommentsAnswer answer={answerResponse} contract={contract} />
-      <Row>
-        <div className="ml-1">
-          <Curve size={28} strokeWidth={1} color="#D8D8EB" />
-        </div>
+      <Col>
+        <Row className="relative">
+          <div className="absolute -bottom-1 left-1.5">
+            <Curve size={32} strokeWidth={1} color="#D8D8EB" />
+          </div>
+          <div className="ml-[38px]">
+            <CommentsAnswer
+              answer={answerResponse}
+              contract={contract}
+              color={color}
+            />
+          </div>
+        </Row>
        <div className="relative w-full pt-1">
          <ContractCommentInput
            contract={contract}
@ -107,7 +119,7 @@ export function AnswerCommentInput(props: {
            <XCircleIcon className="text-greyscale-5 hover:text-greyscale-6 absolute -top-1 -right-2 h-5 w-5" />
          </button>
        </div>
-      </Row>
+      </Col>
    </>
  )
 }
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@ -42,6 +42,7 @@ import { Button } from './button'
 import { Modal } from './layout/modal'
 import { Title } from './title'
 import { Input } from './input'
+import { Select } from './select'

 export const SORTS = [
  { label: 'Newest', value: 'newest' },
@ -437,7 +438,7 @@ function ContractSearchControls(props: {
  }

  return (
-    <Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
+    <Col className={clsx('bg-greyscale-1 top-0 z-20 gap-3 pb-3', className)}>
      <Row className="gap-1 sm:gap-2">
        <Input
          type="text"
@ -543,8 +544,7 @@ export function SearchFilters(props: {

  return (
    <div className={className}>
-      <select
-        className="select select-bordered"
+      <Select
        value={filter}
        onChange={(e) => selectFilter(e.target.value as filter)}
      >
@ -552,10 +552,9 @@ export function SearchFilters(props: {
        <option value="closed">Closed</option>
        <option value="resolved">Resolved</option>
        <option value="all">All</option>
-      </select>
+      </Select>
      {!hideOrderSelector && (
-        <select
-          className="select select-bordered"
+        <Select
          value={sort}
          onChange={(e) => selectSort(e.target.value as Sort)}
        >
@ -564,7 +563,7 @@ export function SearchFilters(props: {
              {option.label}
            </option>
          ))}
-        </select>
+        </Select>
      )}
    </div>
  )
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@ -1,7 +1,11 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 import { Row } from '../layout/row'
-import { formatLargeNumber, formatPercent } from 'common/util/format'
+import {
+  formatLargeNumber,
+  formatPercent,
+  formatWithCommas,
+} from 'common/util/format'
 import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import {
@ -35,10 +39,10 @@ import { trackCallback } from 'web/lib/service/analytics'
 import { getMappedValue } from 'common/pseudo-numeric'
 import { Tooltip } from '../tooltip'
 import { SiteLink } from '../site-link'
-import { ProbChange } from './prob-change-table'
+import { ProbOrNumericChange } from './prob-change-table'
 import { Card } from '../card'
-import { ProfitBadgeMana } from '../profit-badge'
 import { floatingEqual } from 'common/util/math'
+import { ENV_CONFIG } from 'common/envs/constants'

 export function ContractCard(props: {
  contract: Contract
@ -396,14 +400,25 @@ export function ContractCardProbChange(props: {
  className?: string
 }) {
  const { noLinkAvatar, showPosition, className } = props
+  const yesOutcomeLabel =
+    props.contract.outcomeType === 'PSEUDO_NUMERIC' ? 'HIGHER' : 'YES'
+  const noOutcomeLabel =
+    props.contract.outcomeType === 'PSEUDO_NUMERIC' ? 'LOWER' : 'NO'
+
  const contract = useContractWithPreload(props.contract) as CPMMBinaryContract

  const user = useUser()
  const metrics = useUserContractMetrics(user?.id, contract.id)
  const dayMetrics = metrics && metrics.from && metrics.from.day
-  const outcome =
+  const binaryOutcome =
    metrics && floatingEqual(metrics.totalShares.NO ?? 0, 0) ? 'YES' : 'NO'

+  const displayedProfit = dayMetrics
+    ? ENV_CONFIG.moneyMoniker +
+      (dayMetrics.profit > 0 ? '+' : '') +
+      dayMetrics.profit.toFixed(0)
+    : undefined
+
  return (
    <Card className={clsx(className, 'mb-4')}>
      <AvatarDetails
@ -418,7 +433,7 @@ export function ContractCardProbChange(props: {
        >
          <span className="line-clamp-3">{contract.question}</span>
        </SiteLink>
-        <ProbChange className="py-2 pr-4" contract={contract} />
+        <ProbOrNumericChange className="py-2 pr-4" contract={contract} />
      </Row>
      {showPosition && metrics && metrics.hasShares && (
        <Row
@ -426,18 +441,11 @@ export function ContractCardProbChange(props: {
            'items-center justify-between gap-4 pl-6 pr-4 pb-2 text-sm'
          )}
        >
-          <Row className="gap-1 text-gray-500">
-            {Math.floor(metrics.totalShares[outcome])} {outcome} shares
+          <Row className="gap-1 text-gray-400">
+            You: {formatWithCommas(metrics.totalShares[binaryOutcome])}{' '}
+            {binaryOutcome === 'YES' ? yesOutcomeLabel : noOutcomeLabel} shares
+            <span className="ml-1.5">{displayedProfit} today</span>
          </Row>
-
-          {dayMetrics && (
-            <>
-              <Row className="items-center">
-                <div className="mr-1 text-gray-500">Daily profit</div>
-                <ProfitBadgeMana amount={dayMetrics.profit} gray />
-              </Row>
-            </>
-          )}
        </Row>
      )}
    </Card>
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@ -3,6 +3,7 @@ import {
  ExclamationIcon,
  PencilIcon,
  PlusCircleIcon,
+  UserGroupIcon,
 } from '@heroicons/react/solid'
 import clsx from 'clsx'
 import { Editor } from '@tiptap/react'
@ -50,8 +51,13 @@ export function MiscDetails(props: {
  hideGroupLink?: boolean
 }) {
  const { contract, showTime, hideGroupLink } = props
-  const { volume, closeTime, isResolved, createdTime, resolutionTime } =
-    contract
+  const {
+    closeTime,
+    isResolved,
+    createdTime,
+    resolutionTime,
+    uniqueBettorCount,
+  } = contract

  const isClient = useIsClient()
  const isNew = createdTime > Date.now() - DAY_MS && !isResolved
@ -75,8 +81,11 @@ export function MiscDetails(props: {
        <FeaturedContractBadge />
      ) : (contract.openCommentBounties ?? 0) > 0 ? (
        <BountiedContractBadge />
-      ) : volume > 0 || !isNew ? (
-        <Row className={'shrink-0'}>{formatMoney(volume)} bet</Row>
+      ) : !isNew || (uniqueBettorCount ?? 0) > 1 ? (
+        <Row className={'shrink-0'}>
+          <UserGroupIcon className="mr-1 h-4 w-4" />
+          {uniqueBettorCount} trader{uniqueBettorCount !== 1 ? 's' : ''}
+        </Row>
      ) : (
        <NewContractBadge />
      )}
--- a/web/components/contract/contract-info-dialog.tsx
+++ b/web/components/contract/contract-info-dialog.tsx
@ -22,6 +22,7 @@ import { BETTORS, User } from 'common/user'
 import { IconButton } from '../button'
 import { AddLiquidityButton } from './add-liquidity-button'
 import { Tooltip } from '../tooltip'
+import { Table } from '../table'

 export function ContractInfoDialog(props: {
  contract: Contract
@ -98,7 +99,7 @@ export function ContractInfoDialog(props: {
          <Col className="gap-4 rounded bg-white p-6">
            <Title className="!mt-0 !mb-0" text="This Market" />

-            <table className="table-compact table-zebra table w-full text-gray-500">
+            <Table>
              <tbody>
                <tr>
                  <td>Type</td>
@ -238,7 +239,7 @@ export function ContractInfoDialog(props: {
                  </tr>
                )}
              </tbody>
-            </table>
+            </Table>

            <Row className="flex-wrap">
              {mechanism === 'cpmm-1' && (
--- a/web/components/contract/contract-report-resolution.tsx
+++ b/web/components/contract/contract-report-resolution.tsx
@ -32,7 +32,7 @@ export function ContractReportResolution(props: { contract: Contract }) {
  }

  const flagClass = clsx(
-    'mx-2 flex flex-col items-center gap-1  w-6 h-6  rounded-md !bg-gray-100 px-2 py-1 hover:bg-gray-300',
+    'mx-2 flex flex-col items-center gap-1  w-6 h-6  rounded-md !bg-gray-100 px-1 py-2 hover:bg-gray-300',
    userReported ? '!text-red-500' : '!text-gray-500'
  )

--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@ -2,11 +2,11 @@ import { memo, useState } from 'react'
 import { Pagination } from 'web/components/pagination'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedLiquidity } from '../feed/feed-liquidity'
-import { CommentsAnswer } from '../feed/feed-answer-comment-group'
+import { FreeResponseComments } from '../feed/feed-answer-comment-group'
 import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
 import { groupBy, sortBy, sum } from 'lodash'
 import { Bet } from 'common/bet'
-import { Contract } from 'common/contract'
+import { AnyContractType, Contract } from 'common/contract'
 import { PAST_BETS } from 'common/user'
 import { ContractBetsTable } from '../bets-list'
 import { Spacer } from '../layout/spacer'
@ -35,9 +35,7 @@ import {
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
 import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
-import Curve from 'web/public/custom-components/curve'
 import { Answer } from 'common/answer'
-import { AnswerCommentInput } from '../comment-input'

 export function ContractTabs(props: {
  contract: Contract
@ -139,95 +137,27 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
  )
  const topLevelComments = commentsByParent['_'] ?? []

-  const sortRow = comments.length > 0 && (
-    <Row className="mb-4 items-center justify-end gap-4">
-      <BountiedContractSmallBadge contract={contract} showAmount />
-      <Row className="items-center gap-1">
-        <div className="text-greyscale-4 text-sm">Sort by:</div>
-        <button
-          className="text-greyscale-6 w-20 text-sm"
-          onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
-        >
-          <Tooltip
-            text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
-          >
-            <Row className="items-center gap-1">
-              {sort}
-              <TriangleDownFillIcon className=" h-2 w-2" />
-            </Row>
-          </Tooltip>
-        </button>
-      </Row>
-    </Row>
-  )
-  if (contract.outcomeType === 'FREE_RESPONSE') {
-    return (
-      <>
-        <ContractCommentInput className="mb-5" contract={contract} />
-        {sortRow}
-        {answerResponse && (
-          <AnswerCommentInput
-            contract={contract}
-            answerResponse={answerResponse}
-            onCancelAnswerResponse={onCancelAnswerResponse}
-          />
-        )}
-        {topLevelComments.map((parent) => {
-          if (parent.answerOutcome === undefined) {
-            return (
-              <FeedCommentThread
-                key={parent.id}
-                contract={contract}
-                parentComment={parent}
-                threadComments={sortBy(
-                  commentsByParent[parent.id] ?? [],
-                  (c) => c.createdTime
-                )}
-                tips={tips}
-              />
-            )
-          }
-          const answer = contract.answers.find(
-            (answer) => answer.id === parent.answerOutcome
-          )
-          if (answer === undefined) {
-            console.error('Could not find answer that matches ID')
-            return <></>
-          }
-          return (
-            <>
-              <Row className="gap-2">
-                <CommentsAnswer answer={answer} contract={contract} />
-              </Row>
-              <Row>
-                <div className="ml-1">
-                  <Curve size={28} strokeWidth={1} color="#D8D8EB" />
-                </div>
-                <div className="w-full pt-1">
-                  <FeedCommentThread
-                    key={parent.id}
-                    contract={contract}
-                    parentComment={parent}
-                    threadComments={sortBy(
-                      commentsByParent[parent.id] ?? [],
-                      (c) => c.createdTime
-                    )}
-                    tips={tips}
-                  />
-                </div>
-              </Row>
-            </>
-          )
-        })}
-      </>
-    )
-  } else {
-    return (
-      <>
-        <ContractCommentInput className="mb-5" contract={contract} />
-        {sortRow}
-
-        {topLevelComments.map((parent) => (
+  return (
+    <>
+      <ContractCommentInput className="mb-5" contract={contract} />
+      <SortRow
+        comments={comments}
+        contract={contract}
+        sort={sort}
+        onSortClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
+      />
+      {contract.outcomeType === 'FREE_RESPONSE' && (
+        <FreeResponseComments
+          contract={contract}
+          answerResponse={answerResponse}
+          onCancelAnswerResponse={onCancelAnswerResponse}
+          topLevelComments={topLevelComments}
+          commentsByParent={commentsByParent}
+          tips={tips}
+        />
+      )}
+      {contract.outcomeType !== 'FREE_RESPONSE' &&
+        topLevelComments.map((parent) => (
          <FeedCommentThread
            key={parent.id}
            contract={contract}
@ -239,9 +169,8 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
            tips={tips}
          />
        ))}
-      </>
-    )
-  }
+    </>
+  )
 })

 const BetsTabContent = memo(function BetsTabContent(props: {
@ -310,3 +239,33 @@ const BetsTabContent = memo(function BetsTabContent(props: {
    </>
  )
 })
+
+export function SortRow(props: {
+  comments: ContractComment[]
+  contract: Contract<AnyContractType>
+  sort: 'Best' | 'Newest'
+  onSortClick: () => void
+}) {
+  const { comments, contract, sort, onSortClick } = props
+  if (comments.length <= 0) {
+    return <></>
+  }
+  return (
+    <Row className="mb-4 items-center justify-end gap-4">
+      <BountiedContractSmallBadge contract={contract} showAmount />
+      <Row className="items-center gap-1">
+        <div className="text-greyscale-4 text-sm">Sort by:</div>
+        <button className="text-greyscale-6 w-20 text-sm" onClick={onSortClick}>
+          <Tooltip
+            text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
+          >
+            <Row className="items-center gap-1">
+              {sort}
+              <TriangleDownFillIcon className=" h-2 w-2" />
+            </Row>
+          </Tooltip>
+        </button>
+      </Row>
+    </Row>
+  )
+}
--- a/web/components/contract/like-item-button.tsx
+++ b/web/components/contract/like-item-button.tsx
@ -2,15 +2,15 @@ import React, { useMemo, useState } from 'react'
 import { User } from 'common/user'
 import { useUserLikes } from 'web/hooks/use-likes'
 import toast from 'react-hot-toast'
-import { formatMoney } from 'common/util/format'
 import { likeItem } from 'web/lib/firebase/likes'
-import { LIKE_TIP_AMOUNT } from 'common/like'
+import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { useItemTipTxns } from 'web/hooks/use-tip-txns'
 import { sum } from 'lodash'
 import { TipButton } from './tip-button'
 import { Contract } from 'common/contract'
 import { Post } from 'common/post'
+import { TipToast } from '../tipper'

 export function LikeItemButton(props: {
  item: Contract | Post
@ -37,9 +37,21 @@ export function LikeItemButton(props: {
    if (!user) return firebaseLogin()

    setIsLiking(true)
-    likeItem(user, item, itemType).catch(() => setIsLiking(false))

-    toast(`You tipped ${item.creatorName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
+    const timeoutId = setTimeout(() => {
+      likeItem(user, item, itemType).catch(() => setIsLiking(false))
+    }, 3000)
+    toast.custom(
+      () => (
+        <TipToast
+          userName={item.creatorUsername}
+          onUndoClick={() => {
+            clearTimeout(timeoutId)
+          }}
+        />
+      ),
+      { duration: TIP_UNDO_DURATION }
+    )
  }

  return (
--- a/web/components/contract/prob-change-table.tsx
+++ b/web/components/contract/prob-change-table.tsx
@ -7,12 +7,14 @@ import { formatPercent } from 'common/util/format'
 import { Col } from '../layout/col'
 import { LoadingIndicator } from '../loading-indicator'
 import { ContractCardProbChange } from './contract-card'
+import { formatNumericProbability } from 'common/pseudo-numeric'

 export function ProfitChangeTable(props: {
  contracts: CPMMBinaryContract[]
  metrics: ContractMetrics[]
+  maxRows?: number
 }) {
-  const { contracts, metrics } = props
+  const { contracts, metrics, maxRows } = props

  const contractProfit = metrics.map(
    (m) => [m.contractId, m.from?.day.profit ?? 0] as const
@ -26,7 +28,7 @@ export function ProfitChangeTable(props: {
    positiveProfit.map(([contractId]) =>
      contracts.find((c) => c.id === contractId)
    )
-  )
+  ).slice(0, maxRows)

  const negativeProfit = sortBy(
    contractProfit.filter(([, profit]) => profit < 0),
@ -36,7 +38,7 @@ export function ProfitChangeTable(props: {
    negativeProfit.map(([contractId]) =>
      contracts.find((c) => c.id === contractId)
    )
-  )
+  ).slice(0, maxRows)

  if (positive.length === 0 && negative.length === 0)
    return <div className="px-4 text-gray-500">None</div>
@ -118,7 +120,7 @@ export function ProbChangeTable(props: {
  )
 }

-export function ProbChange(props: {
+export function ProbOrNumericChange(props: {
  contract: CPMMContract
  className?: string
 }) {
@ -127,13 +129,17 @@ export function ProbChange(props: {
    prob,
    probChanges: { day: change },
  } = contract
+  const number =
+    contract.outcomeType === 'PSEUDO_NUMERIC'
+      ? formatNumericProbability(prob, contract)
+      : null

  const color = change >= 0 ? 'text-teal-500' : 'text-red-400'

  return (
    <Col className={clsx('flex flex-col items-end', className)}>
      <div className="mb-0.5 mr-0.5 text-2xl">
-        {formatPercent(Math.round(100 * prob) / 100)}
+        {number ? number : formatPercent(Math.round(100 * prob) / 100)}
      </div>
      <div className={clsx('text-base', color)}>
        {(change > 0 ? '+' : '') + (change * 100).toFixed(0) + '%'}
--- a/web/components/contract/tip-button.tsx
+++ b/web/components/contract/tip-button.tsx
@ -4,6 +4,7 @@ import { Col } from 'web/components/layout/col'
 import { Tooltip } from '../tooltip'
 import TipJar from 'web/public/custom-components/tipJar'
 import { useState } from 'react'
+import Coin from 'web/public/custom-components/coin'

 export function TipButton(props: {
  tipAmount: number
@ -23,7 +24,7 @@ export function TipButton(props: {
    <Tooltip
      text={
        disabled
-          ? `Tips (${formatMoney(totalTipped)})`
+          ? `Total tips ${formatMoney(totalTipped)}`
          : `Tip ${formatMoney(tipAmount)}`
      }
      placement="bottom"
@ -35,22 +36,49 @@ export function TipButton(props: {
        disabled={disabled}
        className={clsx(
          'px-2 py-1 text-xs', //2xs button
-          'text-greyscale-6 transition-transform hover:text-indigo-600 disabled:cursor-not-allowed',
-          !disabled ? 'hover:rotate-12' : ''
+          'text-greyscale-5 transition-transform disabled:cursor-not-allowed',
+          !disabled ? 'hover:text-greyscale-6' : ''
        )}
-        onMouseOver={() => setHover(true)}
+        onMouseOver={() => {
+          if (!disabled) {
+            setHover(true)
+          }
+        }}
        onMouseLeave={() => setHover(false)}
      >
-        <Col className={clsx('relative', disabled ? 'opacity-30' : '')}>
+        <Col className={clsx('relative')}>
+          <div
+            className={clsx(
+              'absolute transition-all',
+              hover ? 'left-[6px] -top-[9px]' : 'left-[8px] -top-[10px]'
+            )}
+          >
+            <Coin
+              size={10}
+              color={
+                hover && !userTipped
+                  ? '#66667C'
+                  : userTipped
+                  ? '#4f46e5'
+                  : '#9191a7'
+              }
+              strokeWidth={2}
+            />
+          </div>
          <TipJar
            size={18}
-            color={userTipped || (hover && !disabled) ? '#4f46e5' : '#66667C'}
-            fill={userTipped ? '#4f46e5' : 'none'}
+            color={
+              hover && !disabled && !userTipped
+                ? '#66667C'
+                : userTipped
+                ? '#4f46e5'
+                : '#9191a7'
+            }
          />
          <div
            className={clsx(
+              userTipped && 'text-indigo-600',
              ' absolute top-[2px] text-[0.5rem]',
-              userTipped ? 'text-white' : '',
              tipDisplay.length === 1
                ? 'left-[7px]'
                : tipDisplay.length === 2
--- a/web/components/create-post.tsx
+++ b/web/components/create-post.tsx
@ -55,8 +55,8 @@ export function CreatePost(props: { group?: Group }) {
      <div className="rounded-lg px-6 py-4 sm:py-0">
        <Title className="!mt-0" text="Create a post" />
        <form>
-          <div className="form-control w-full">
-            <label className="label">
+          <div className="flex w-full flex-col">
+            <label className="px-1 py-2">
              <span className="mb-1">
                Title<span className={'text-red-700'}> *</span>
              </span>
@ -69,7 +69,7 @@ export function CreatePost(props: { group?: Group }) {
              onChange={(e) => setTitle(e.target.value || '')}
            />
            <Spacer h={6} />
-            <label className="label">
+            <label className="px-1 py-2">
              <span className="mb-1">
                Subtitle<span className={'text-red-700'}> *</span>
              </span>
@ -82,7 +82,7 @@ export function CreatePost(props: { group?: Group }) {
              onChange={(e) => setSubtitle(e.target.value || '')}
            />
            <Spacer h={6} />
-            <label className="label">
+            <label className="px-1 py-2">
              <span className="mb-1">
                Content<span className={'text-red-700'}> *</span>
              </span>
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@ -52,7 +52,7 @@ import { debounce } from 'lodash'

 const DisplayImage = Image.configure({
  HTMLAttributes: {
-    class: 'max-h-60',
+    class: 'max-h-60 hover:max-h-[120rem] transition-all',
  },
 })

@ -258,7 +258,8 @@ export function TextEditor(props: {
    <>
      {/* hide placeholder when focused */}
      <div className="relative w-full [&:focus-within_p.is-empty]:before:content-none">
-        <div className="rounded-lg border border-gray-300 bg-white shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
+        {/* matches input styling */}
+        <div className="rounded-lg border border-gray-300 bg-white shadow-sm transition-colors focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
          <FloatingMenu editor={editor} />
          <EditorContent editor={editor} />
          {/* Toolbar, with buttons for images and embeds */}
--- a/web/components/editor/contract-mention-suggestion.ts
+++ b/web/components/editor/contract-mention-suggestion.ts
@ -14,6 +14,7 @@ const beginsWith = (text: string, query: string) =>
 export const contractMentionSuggestion: Suggestion = {
  char: '%',
  allowSpaces: true,
+  allowedPrefixes: [' '],
  pluginKey: new PluginKey('contract-mention'),
  items: async ({ query }) =>
    orderBy(
--- a/web/components/editor/image-modal.tsx
+++ b/web/components/editor/image-modal.tsx
@ -120,7 +120,10 @@ function DreamTab(props: {
        <div className="text-sm">This may take ~10 seconds...</div>
      )}
      {/* TODO: Allow the user to choose their own modifiers */}
-      <div className="pt-2 text-sm text-gray-400">Modifiers: {MODIFIERS}</div>
+      <div className="pt-2 text-sm text-gray-400">
+        Commission a custom image using AI.
+      </div>
+      <div className="pt-2 text-xs text-gray-400">Modifiers: {MODIFIERS}</div>

      {/* Show the current imageUrl */}
      {/* TODO: Keep the other generated images, so the user can play with different attempts. */}
--- a/web/components/editor/mention-suggestion.ts
+++ b/web/components/editor/mention-suggestion.ts
@ -14,6 +14,7 @@ const beginsWith = (text: string, query: string) =>

 // copied from https://tiptap.dev/api/nodes/mention#usage
 export const mentionSuggestion: Suggestion = {
+  allowedPrefixes: [' '],
  items: async ({ query }) =>
    orderBy(
      (await getCachedUsers()).filter((u) =>
--- a/web/components/expanding-input.tsx
+++ b/web/components/expanding-input.tsx
@ -7,7 +7,7 @@ export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
  return (
    <Textarea
      className={clsx(
-        'textarea textarea-bordered resize-none text-[16px] md:text-[14px]',
+        'resize-none rounded-md border border-gray-300 bg-white px-4 text-[16px] leading-loose shadow-sm transition-colors focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-[14px]',
        className
      )}
      {...rest}
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/web/components/feed/feed-answer-comment-group.tsx
@ -1,42 +1,154 @@
 import { Answer } from 'common/answer'
-import { Contract } from 'common/contract'
-import React, { useEffect, useRef } from 'react'
+import {
+  Contract,
+  FreeResponseContract,
+  MultipleChoiceContract,
+} from 'common/contract'
+import React, { useEffect, useRef, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
-import { Avatar } from 'web/components/avatar'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { useRouter } from 'next/router'
 import { UserLink } from 'web/components/user-link'
+import { FeedCommentThread } from './feed-comments'
+import { AnswerCommentInput } from '../comment-input'
+import { ContractComment } from 'common/comment'
+import { Dictionary, sortBy } from 'lodash'
+import { getAnswerColor } from '../answers/answers-panel'
+import Curve from 'web/public/custom-components/curve'
+import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { useChartAnswers } from '../charts/contract/choice'

-export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
-  const { answer, contract } = props
-  const { username, avatarUrl, name, text } = answer
+export function CommentsAnswer(props: {
+  answer: Answer
+  contract: Contract
+  color: string
+}) {
+  const { answer, contract, color } = props
+  const { username, name, text } = answer
  const answerElementId = `answer-${answer.id}`
-  const router = useRouter()
-  const highlighted = router.asPath.endsWith(`#${answerElementId}`)
+
+  const { isReady, asPath } = useRouter()
+  const [highlighted, setHighlighted] = useState(false)
  const answerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
-    if (highlighted && answerRef.current != null) {
+    if (isReady && asPath.endsWith(`#${answerElementId}`)) {
+      setHighlighted(true)
+    }
+  }, [isReady, asPath, answerElementId])
+
+  useEffect(() => {
+    if (highlighted && answerRef.current) {
      answerRef.current.scrollIntoView(true)
    }
  }, [highlighted])

  return (
-    <Col className="bg-greyscale-2 w-fit gap-1 rounded-t-xl rounded-bl-xl py-2 px-4">
-      <Row className="gap-2">
-        <Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
-        <div className="text-greyscale-6 text-xs">
-          <UserLink username={username} name={name} /> answered
-          <CopyLinkDateTimeComponent
-            prefix={contract.creatorUsername}
-            slug={contract.slug}
-            createdTime={answer.createdTime}
-            elementId={answerElementId}
-          />
-        </div>
-      </Row>
-      <div className="text-sm">{text}</div>
-    </Col>
+    <Row>
+      <div
+        className="w-2"
+        style={{
+          background: color ? color : '#B1B1C7',
+        }}
+      />
+      <Col className="w-fit bg-gray-100 py-1 pl-2 pr-2">
+        <Row className="gap-2">
+          <div className="text-greyscale-4 text-xs">
+            <UserLink username={username} name={name} /> answered
+            <CopyLinkDateTimeComponent
+              prefix={contract.creatorUsername}
+              slug={contract.slug}
+              createdTime={answer.createdTime}
+              elementId={answerElementId}
+            />
+          </div>
+        </Row>
+        <div className="text-sm">{text}</div>
+      </Col>
+    </Row>
+  )
+}
+
+export function FreeResponseComments(props: {
+  contract: FreeResponseContract | MultipleChoiceContract
+  answerResponse: Answer | undefined
+  onCancelAnswerResponse?: () => void
+  topLevelComments: ContractComment[]
+  commentsByParent: Dictionary<[ContractComment, ...ContractComment[]]>
+  tips: CommentTipMap
+}) {
+  const {
+    contract,
+    answerResponse,
+    onCancelAnswerResponse,
+    topLevelComments,
+    commentsByParent,
+    tips,
+  } = props
+  const answersArray = useChartAnswers(contract).map((answer) => answer.text)
+  return (
+    <>
+      {answerResponse && (
+        <AnswerCommentInput
+          contract={contract}
+          answerResponse={answerResponse}
+          onCancelAnswerResponse={onCancelAnswerResponse}
+          answersArray={answersArray}
+        />
+      )}
+      {topLevelComments.map((parent) => {
+        if (parent.answerOutcome === undefined) {
+          return (
+            <FeedCommentThread
+              key={parent.id}
+              contract={contract}
+              parentComment={parent}
+              threadComments={sortBy(
+                commentsByParent[parent.id] ?? [],
+                (c) => c.createdTime
+              )}
+              tips={tips}
+            />
+          )
+        }
+        const answer = contract.answers.find(
+          (answer) => answer.id === parent.answerOutcome
+        )
+        if (answer === undefined) {
+          console.error('Could not find answer that matches ID')
+          return <></>
+        }
+        const color = getAnswerColor(answer, answersArray)
+        return (
+          <>
+            <Row className="relative">
+              <div className="absolute -bottom-1 left-1.5">
+                <Curve size={32} strokeWidth={1} color="#D8D8EB" />
+              </div>
+              <div className="ml-[38px]">
+                <CommentsAnswer
+                  answer={answer}
+                  contract={contract}
+                  color={color}
+                />
+              </div>
+            </Row>
+            <div className="w-full pt-1">
+              <FeedCommentThread
+                key={parent.id}
+                contract={contract}
+                parentComment={parent}
+                threadComments={sortBy(
+                  commentsByParent[parent.id] ?? [],
+                  (c) => c.createdTime
+                )}
+                tips={tips}
+              />
+            </div>
+          </>
+        )
+      })}
+    </>
  )
 }
--- a/web/components/groups/create-group-button.tsx
+++ b/web/components/groups/create-group-button.tsx
@ -103,7 +103,7 @@ export function CreateGroupButton(props: {
      </Col>
      {errorText && <div className={'text-error'}>{errorText}</div>}

-      <div className="form-control w-full">
+      <div className="flex w-full flex-col">
        <label className="mb-2 ml-1 mt-0">Group name</label>
        <Input
          placeholder={'Your group name'}
--- a/web/components/groups/edit-group-button.tsx
+++ b/web/components/groups/edit-group-button.tsx
@ -51,8 +51,8 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
      </Button>
      <Modal open={open} setOpen={updateOpen}>
        <div className="h-full rounded-md bg-white p-8">
-          <div className="form-control w-full">
-            <label className="label">
+          <div className="flex w-full flex-col">
+            <label className="px-1 py-2">
              <span className="mb-1">Group name</span>
            </label>

@ -66,8 +66,8 @@ export function EditGroupButton(props: { group: Group; className?: string }) {

          <Spacer h={4} />

-          <div className="form-control w-full">
-            <label className="label">
+          <div className="flex w-full flex-col">
+            <label className="px-1 py-2">
              <span className="mb-0">Add members</span>
            </label>
            <FilterSelectUsers
@ -77,7 +77,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
            />
          </div>

-          <div className="modal-action">
+          <div className="flex">
            <Button
              color="red"
              size="xs"
--- a/web/components/groups/group-overview.tsx
+++ b/web/components/groups/group-overview.tsx
@ -377,7 +377,7 @@ export function GroupAbout(props: {
          <div className={'inline-flex items-center'}>
            <div className="mr-1 text-gray-500">Created by</div>
            <UserLink
-              className="text-neutral"
+              className="text-gray-700"
              name={creator.name}
              username={creator.username}
            />
--- a/web/components/groups/group-selector.tsx
+++ b/web/components/groups/group-selector.tsx
@ -72,7 +72,7 @@ export function GroupSelector(props: {
    )
  }
  return (
-    <div className="form-control items-start">
+    <div className="flex flex-col items-start">
      <Combobox
        as="div"
        value={selectedGroup}
@ -83,7 +83,7 @@ export function GroupSelector(props: {
        {() => (
          <>
            {showLabel && (
-              <Combobox.Label className="label justify-start gap-2 text-base">
+              <Combobox.Label className="justify-start gap-2 px-1 py-2 text-base">
                Add to Group
                <InfoTooltip text="Question will be displayed alongside the other questions in the group." />
              </Combobox.Label>
--- a/web/components/input.tsx
+++ b/web/components/input.tsx
@ -2,21 +2,21 @@ import clsx from 'clsx'
 import React from 'react'

 /** Text input. Wraps html `<input>` */
-export const Input = (props: JSX.IntrinsicElements['input']) => {
-  const { className, ...rest } = props
+export const Input = (
+  props: { error?: boolean } & JSX.IntrinsicElements['input']
+) => {
+  const { error, className, ...rest } = props

  return (
    <input
-      className={clsx('input input-bordered text-base md:text-sm', className)}
+      className={clsx(
+        'h-12 rounded-md border bg-white px-4 shadow-sm transition-colors invalid:border-red-600 invalid:text-red-900 invalid:placeholder-red-300 focus:outline-none disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-sm',
+        error
+          ? 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-600 focus:ring-red-500' // matches invalid: styles
+          : 'placeholder-greyscale-4 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500',
+        className
+      )}
      {...rest}
    />
  )
 }
-
-/*
-  TODO: replace daisyui style with our own. For reference:
-
-  james: text-lg placeholder:text-gray-400
-  inga: placeholder:text-greyscale-4 border-greyscale-2 rounded-md
-  austin: border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
- */
--- a/web/components/leaderboard.tsx
+++ b/web/components/leaderboard.tsx
@ -2,6 +2,7 @@ import clsx from 'clsx'
 import { Avatar } from './avatar'
 import { Row } from './layout/row'
 import { SiteLink } from './site-link'
+import { Table } from './table'
 import { Title } from './title'

 interface LeaderboardEntry {
@ -31,9 +32,9 @@ export function Leaderboard<T extends LeaderboardEntry>(props: {
        <div className="ml-2 text-gray-500">None yet</div>
      ) : (
        <div className="overflow-x-auto">
-          <table className="table-zebra table-compact table w-full text-gray-500">
+          <Table>
            <thead>
-              <tr className="p-2">
+              <tr>
                <th>#</th>
                <th>Name</th>
                {columns.map((column) => (
@ -59,7 +60,7 @@ export function Leaderboard<T extends LeaderboardEntry>(props: {
                </tr>
              ))}
            </tbody>
-          </table>
+          </Table>
        </div>
      )}
    </div>
--- a/web/components/limit-bets.tsx
+++ b/web/components/limit-bets.tsx
@ -14,6 +14,7 @@ import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
 import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label'
 import { Subtitle } from './subtitle'
+import { Table } from './table'
 import { Title } from './title'

 export function LimitBets(props: {
@ -74,7 +75,7 @@ export function LimitOrderTable(props: {
  const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'

  return (
-    <table className="table-compact table w-full rounded text-gray-500">
+    <Table className="rounded">
      <thead>
        <tr>
          {!isYou && <th></th>}
@ -89,7 +90,7 @@ export function LimitOrderTable(props: {
          <LimitBet key={bet.id} bet={bet} contract={contract} isYou={isYou} />
        ))}
      </tbody>
-    </table>
+    </Table>
  )
 }

--- a/web/components/manalinks/create-links-button.tsx
+++ b/web/components/manalinks/create-links-button.tsx
@ -14,6 +14,7 @@ import { DuplicateIcon } from '@heroicons/react/outline'
 import { QRCode } from '../qr-code'
 import { Input } from '../input'
 import { ExpandingInput } from '../expanding-input'
+import { Select } from '../select'

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

  return (
    <Col className={className}>
-      <label className="input-group">
-        <Input
-          className={clsx(
-            'max-w-[200px] !text-lg',
-            error && 'input-error',
-            inputClassName
-          )}
-          ref={inputRef}
-          type="number"
-          pattern="[0-9]*"
-          inputMode="numeric"
-          placeholder={placeholder ?? '0'}
-          maxLength={9}
-          value={numberString}
-          disabled={disabled}
-          onChange={(e) => onChange(e.target.value.substring(0, 9))}
-        />
-      </label>
+      <Input
+        className={clsx('max-w-[200px] !text-lg', inputClassName)}
+        ref={inputRef}
+        type="number"
+        pattern="[0-9]*"
+        inputMode="numeric"
+        placeholder={placeholder ?? '0'}
+        maxLength={9}
+        value={numberString}
+        error={!!error}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value.substring(0, 9))}
+      />

      <Spacer h={4} />

--- a/web/components/probability-input.tsx
+++ b/web/components/probability-input.tsx
@ -4,18 +4,15 @@ import { getPseudoProbability } from 'common/pseudo-numeric'
 import { BucketInput } from './bucket-input'
 import { Input } from './input'
 import { Col } from './layout/col'
-import { Spacer } from './layout/spacer'

-export function ProbabilityInput(props: {
+function ProbabilityInput(props: {
  prob: number | undefined
  onChange: (newProb: number | undefined) => void
  disabled?: boolean
  placeholder?: string
-  className?: string
  inputClassName?: string
 }) {
-  const { prob, onChange, disabled, placeholder, className, inputClassName } =
-    props
+  const { prob, onChange, disabled, placeholder, inputClassName } = props

  const onProbChange = (str: string) => {
    let prob = parseInt(str.replace(/\D/g, ''))
@ -29,10 +26,10 @@ export function ProbabilityInput(props: {
  }

  return (
-    <Col className={className}>
-      <label className="input-group">
+    <Col>
+      <label className="relative w-fit">
        <Input
-          className={clsx('max-w-[200px] !text-lg', inputClassName)}
+          className={clsx('pr-2 !text-lg', inputClassName)}
          type="number"
          max={99}
          min={1}
@ -44,9 +41,10 @@ export function ProbabilityInput(props: {
          disabled={disabled}
          onChange={(e) => onProbChange(e.target.value)}
        />
-        <span className="bg-gray-200 text-sm">%</span>
+        <span className="text-greyscale-4 absolute top-1/2 right-10 my-auto -translate-y-1/2">
+          %
+        </span>
      </label>
-      <Spacer h={4} />
    </Col>
  )
 }
@ -82,7 +80,7 @@ export function ProbabilityOrNumericInput(props: {
    />
  ) : (
    <ProbabilityInput
-      inputClassName="w-full max-w-none"
+      inputClassName="w-24"
      prob={prob}
      onChange={setProb}
      disabled={isSubmitting}
--- a/web/components/probability-selector.tsx
+++ b/web/components/probability-selector.tsx
@ -1,5 +1,4 @@
 import { Input } from './input'
-import { Row } from './layout/row'

 export function ProbabilitySelector(props: {
  probabilityInt: number
@ -9,21 +8,19 @@ export function ProbabilitySelector(props: {
  const { probabilityInt, setProbabilityInt, isSubmitting } = props

  return (
-    <Row className="items-center  gap-2">
-      <label className="input-group input-group-lg text-lg">
-        <Input
-          type="number"
-          value={probabilityInt}
-          className="input-md w-28 !text-lg"
-          disabled={isSubmitting}
-          min={1}
-          max={99}
-          onChange={(e) =>
-            setProbabilityInt(parseInt(e.target.value.substring(0, 2)))
-          }
-        />
-        <span>%</span>
-      </label>
-    </Row>
+    <label className="flex items-center text-lg">
+      <Input
+        type="number"
+        value={probabilityInt}
+        className="input-md w-28 !text-lg"
+        disabled={isSubmitting}
+        min={1}
+        max={99}
+        onChange={(e) =>
+          setProbabilityInt(parseInt(e.target.value.substring(0, 2)))
+        }
+      />
+      <span>%</span>
+    </label>
  )
 }
--- a/web/components/select.tsx
+++ b/web/components/select.tsx
@ -0,0 +1,17 @@
+import clsx from 'clsx'
+
+export const Select = (props: JSX.IntrinsicElements['select']) => {
+  const { className, children, ...rest } = props
+
+  return (
+    <select
+      className={clsx(
+        'h-12 cursor-pointer self-start overflow-hidden rounded-md border border-gray-300 pl-4 pr-10 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500',
+        className
+      )}
+      {...rest}
+    >
+      ß{children}
+    </select>
+  )
+}
--- a/web/components/table.tsx
+++ b/web/components/table.tsx
@ -0,0 +1,21 @@
+import clsx from 'clsx'
+
+/** `<table>` with styles. Expects table html (`<thead>`, `<td>` etc) */
+export const Table = (props: {
+  zebra?: boolean
+  className?: string
+  children: React.ReactNode
+}) => {
+  const { className, children } = props
+
+  return (
+    <table
+      className={clsx(
+        'w-full whitespace-nowrap text-left text-sm text-gray-500 [&_td]:p-2 [&_th]:p-2 [&>thead]:font-bold [&>tbody_tr:nth-child(odd)]:bg-white',
+        className
+      )}
+    >
+      {children}
+    </table>
+  )
+}
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@ -1,6 +1,5 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import toast from 'react-hot-toast'
-import { debounce } from 'lodash'

 import { Comment } from 'common/comment'
 import { User } from 'common/user'
@ -9,8 +8,10 @@ import { transact } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
 import { TipButton } from './contract/tip-button'
 import { Row } from './layout/row'
-import { LIKE_TIP_AMOUNT } from 'common/like'
+import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
 import { formatMoney } from 'common/util/format'
+import { Button } from './button'
+import clsx from 'clsx'

 export function Tipper(prop: {
  comment: Comment
@ -19,24 +20,13 @@ export function Tipper(prop: {
 }) {
  const { comment, myTip, totalTip } = prop

+  // This is a temporary tipping amount before it actually gets confirmed. This is so tha we dont accidentally tip more than you have
+  const [tempTip, setTempTip] = useState(0)
+
  const me = useUser()

-  const [localTip, setLocalTip] = useState(myTip)
-
-  // listen for user being set
-  const initialized = useRef(false)
-  useEffect(() => {
-    if (myTip && !initialized.current) {
-      setLocalTip(myTip)
-      initialized.current = true
-    }
-  }, [myTip])
-
-  const total = totalTip - myTip + localTip
-
-  // declare debounced function only on first render
-  const [saveTip] = useState(() =>
-    debounce(async (user: User, comment: Comment, change: number) => {
+  const [saveTip] = useState(
+    () => async (user: User, comment: Comment, change: number) => {
      if (change === 0) {
        return
      }
@ -67,30 +57,88 @@ export function Tipper(prop: {
        fromId: user.id,
        toId: comment.userId,
      })
-    }, 1500)
+    }
  )
-  // instant save on unrender
-  useEffect(() => () => void saveTip.flush(), [saveTip])

  const addTip = (delta: number) => {
-    setLocalTip(localTip + delta)
-    me && saveTip(me, comment, localTip - myTip + delta)
-    toast(`You tipped ${comment.userName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
+    setTempTip((tempTip) => tempTip + delta)
+    const timeoutId = setTimeout(() => {
+      me &&
+        saveTip(me, comment, delta)
+          .then(() => setTempTip((tempTip) => tempTip - delta))
+          .catch((e) => console.error(e))
+    }, TIP_UNDO_DURATION + 1000)
+    toast.custom(
+      () => (
+        <TipToast
+          userName={comment.userName}
+          onUndoClick={() => {
+            clearTimeout(timeoutId)
+            setTempTip((tempTip) => tempTip - delta)
+          }}
+        />
+      ),
+      { duration: TIP_UNDO_DURATION }
+    )
  }

  const canUp =
-    me && comment.userId !== me.id && me.balance >= localTip + LIKE_TIP_AMOUNT
+    me && comment.userId !== me.id && me.balance - tempTip >= LIKE_TIP_AMOUNT

  return (
    <Row className="items-center gap-0.5">
      <TipButton
        tipAmount={LIKE_TIP_AMOUNT}
-        totalTipped={total}
+        totalTipped={totalTip}
        onClick={() => addTip(+LIKE_TIP_AMOUNT)}
-        userTipped={localTip > 0}
+        userTipped={tempTip > 0 || myTip > 0}
        disabled={!canUp}
        isCompact
      />
    </Row>
  )
 }
+
+export function TipToast(props: { userName: string; onUndoClick: () => void }) {
+  const { userName, onUndoClick } = props
+  const [cancelled, setCancelled] = useState(false)
+
+  // There is a strange bug with toast where sometimes if you interact with one popup, the others will not dissappear at the right time, overriding it for now with this
+  const [timedOut, setTimedOut] = useState(false)
+  setTimeout(() => {
+    setTimedOut(true)
+  }, TIP_UNDO_DURATION)
+  if (timedOut) {
+    return <></>
+  }
+  return (
+    <div className="relative overflow-hidden rounded-lg bg-white drop-shadow-md">
+      <div
+        className={clsx(
+          'animate-progress-loading absolute bottom-0 z-10 h-1 w-full bg-indigo-600',
+          cancelled ? 'hidden' : ''
+        )}
+      />
+      <Row className="text-greyscale-6 items-center gap-4 px-4 py-2 text-sm">
+        <div className={clsx(cancelled ? 'hidden' : 'inline')}>
+          Tipping {userName} {formatMoney(LIKE_TIP_AMOUNT)}...
+        </div>
+        <div className={clsx('py-1', cancelled ? 'inline' : 'hidden')}>
+          Cancelled tipping
+        </div>
+        <Button
+          className={clsx(cancelled ? 'hidden' : 'inline')}
+          size="xs"
+          color="gray-outline"
+          onClick={() => {
+            onUndoClick()
+            setCancelled(true)
+          }}
+          disabled={cancelled}
+        >
+          Cancel
+        </Button>
+      </Row>
+    </div>
+  )
+}
--- a/web/components/toast-clipboard.tsx
+++ b/web/components/toast-clipboard.tsx
@ -8,7 +8,7 @@ export function ToastClipboard(props: { className?: string }) {
  return (
    <Row
      className={clsx(
-        'border-base-300 absolute items-center' +
+        'border-greyscale-4 absolute items-center' +
          'gap-2 divide-x divide-gray-200 rounded-md border-2 bg-white ' +
          'h-15 z-10 w-[15rem] p-2 pr-3 text-gray-500',
        className
--- a/web/components/user-link.tsx
+++ b/web/components/user-link.tsx
@ -48,6 +48,7 @@ const BOT_USERNAMES = [
  'MarketManagerBot',
  'Botlab',
  'JuniorBot',
+  'ManifoldDream',
 ]

 function BotBadge() {
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@ -291,7 +291,7 @@ export function ProfilePrivateStats(props: {
      <Row className={'justify-between gap-4 sm:justify-end'}>
        <Col className={'text-greyscale-4 text-md sm:text-lg'}>
          <span
-            className={clsx(profit >= 0 ? 'text-green-600' : 'text-red-400')}
+            className={clsx(profit >= 0 ? 'text-teal-600' : 'text-red-400')}
          >
            {formatMoney(profit)}
          </span>
--- a/web/hooks/use-persistent-state.ts
+++ b/web/hooks/use-persistent-state.ts
@ -114,6 +114,7 @@ export const usePersistentState = <T>(
    if (key != null && store != null) {
      store.set(key, state)
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [key, state])

  if (store?.readsUrl) {
@ -127,6 +128,7 @@ export const usePersistentState = <T>(
        const savedValue = key != null ? store.get(key) : undefined
        setState(savedValue ?? initial)
      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [router.isReady])
  }

--- a/web/hooks/use-propz.ts
+++ b/web/hooks/use-propz.ts
@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { isEmpty } from 'lodash'
 import { useRouter } from 'next/router'
 import { useState, useEffect } from 'react'
@ -12,7 +13,7 @@ type PropzProps = {
 // This allows us to client-side render the page for authenticated users.
 // TODO: Could cache the result using stale-while-revalidate: https://swr.vercel.app/
 export function usePropz(
-  initialProps: Object,
+  initialProps: Record<string, unknown>,
  getStaticPropz: (props: PropzProps) => Promise<any>
 ) {
  // If props were successfully server-side generated, just use those
@ -29,6 +30,7 @@ export function usePropz(
    if (router.isReady) {
      getStaticPropz({ params }).then((result) => setPropz(result.props))
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [params])
  return propz
 }
--- a/web/hooks/use-user.ts
+++ b/web/hooks/use-user.ts
@ -47,10 +47,7 @@ export const usePrefetchUsers = (userIds: string[]) => {
  )
 }

-export const useUserContractMetricsByProfit = (
-  userId: string,
-  count: number
-) => {
+export const useUserContractMetricsByProfit = (userId: string, count = 50) => {
  const positiveResult = useFirestoreQueryData<ContractMetrics>(
    ['contract-metrics-descending', userId, count],
    getUserContractMetricsQuery(userId, count, 'desc')
@ -71,10 +68,13 @@ export const useUserContractMetricsByProfit = (
  if (!positiveResult.data || !negativeResult.data || !contracts)
    return undefined

-  const filteredContracts = filterDefined(contracts) as CPMMBinaryContract[]
-  const filteredMetrics = metrics.filter(
-    (m) => m.from && Math.abs(m.from.day.profit) >= 0.5
-  )
+  const filteredContracts = filterDefined(contracts).filter(
+    (c) => !c.isResolved
+  ) as CPMMBinaryContract[]
+  const filteredMetrics = metrics
+    .filter((m) => m.from && Math.abs(m.from.day.profit) >= 0.5)
+    .filter((m) => filteredContracts.find((c) => c.id === m.contractId))
+
  return { contracts: filteredContracts, metrics: filteredMetrics }
 }

--- a/web/package.json
+++ b/web/package.json
@ -46,7 +46,6 @@
    "d3-scale": "4.0.2",
    "d3-selection": "3.0.0",
    "d3-shape": "3.1.0",
-    "daisyui": "1.16.4",
    "dayjs": "1.10.7",
    "firebase": "9.9.3",
    "gridjs": "5.0.2",
@ -56,6 +55,7 @@
    "next": "12.3.1",
    "node-fetch": "3.2.4",
    "prosemirror-state": "1.4.1",
+    "rc-slider": "10.0.1",
    "react": "18.2.0",
    "react-confetti": "6.0.1",
    "react-dom": "18.2.0",
@ -65,7 +65,7 @@
    "react-masonry-css": "1.0.16",
    "react-query": "3.39.0",
    "react-twitter-embed": "4.0.4",
-    "stability-client": "1.5.0",
+    "stability-client": "1.6.1",
    "string-similarity": "^4.0.4",
    "tippy.js": "6.3.7"
  },
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@ -23,7 +23,7 @@ export default function Document() {
          crossOrigin="anonymous"
        />
      </Head>
-      <body className="font-readex-pro bg-base-200 min-h-screen">
+      <body className="font-readex-pro bg-greyscale-1 min-h-screen">
        <Main />
        <NextScript />
      </body>
--- a/web/pages/contract-search-firestore.tsx
+++ b/web/pages/contract-search-firestore.tsx
@ -10,6 +10,7 @@ import {
 } from 'web/hooks/use-persistent-state'
 import { PAST_BETS } from 'common/user'
 import { Input } from 'web/components/input'
+import { Select } from 'web/components/select'

 const MAX_CONTRACTS_RENDERED = 100

@ -96,17 +97,13 @@ export default function ContractSearchFirestore(props: {
          placeholder="Search markets"
          className="w-full"
        />
-        <select
-          className="select select-bordered"
-          value={sort}
-          onChange={(e) => setSort(e.target.value)}
-        >
+        <Select value={sort} onChange={(e) => setSort(e.target.value)}>
          <option value="score">Trending</option>
          <option value="newest">Newest</option>
          <option value="most-traded">Most ${PAST_BETS}</option>
          <option value="24-hour-vol">24h volume</option>
          <option value="close-date">Closing soon</option>
-        </select>
+        </Select>
      </div>
      <ContractsGrid contracts={matches} showTime={showTime} />
    </div>
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@ -96,11 +96,9 @@ export default function Create(props: { auth: { user: User } }) {
          <Title className="!mt-0" text="Create a market" />

          <form>
-            <div className="form-control w-full">
-              <label className="label">
-                <span className="mb-1">
-                  Question<span className={'text-red-700'}>*</span>
-                </span>
+            <div className="flex w-full flex-col">
+              <label className="px-1 pt-2 pb-3">
+                Question<span className={'text-red-700'}>*</span>
              </label>

              <ExpandingInput
@ -280,9 +278,7 @@ export function NewContract(props: {

  return (
    <div>
-      <label className="label">
-        <span className="mb-1">Answer type</span>
-      </label>
+      <label className="px-1 pt-2 pb-3">Answer type</label>
      <Row>
        <ChoicesToggleGroup
          currentChoice={outcomeType}
@ -318,8 +314,8 @@ export function NewContract(props: {

      {outcomeType === 'PSEUDO_NUMERIC' && (
        <>
-          <div className="form-control mb-2 items-start">
-            <label className="label gap-2">
+          <div className="mb-2 flex flex-col items-start">
+            <label className="gap-2 px-1 py-2">
              <span className="mb-1">Range</span>
              <InfoTooltip text="The lower and higher bounds of the numeric range. Choose bounds the value could reasonably be expected to hit." />
            </label>
@ -363,8 +359,8 @@ export function NewContract(props: {
              </div>
            )}
          </div>
-          <div className="form-control mb-2 items-start">
-            <label className="label gap-2">
+          <div className="mb-2 flex flex-col items-start">
+            <label className="gap-2 px-1 py-2">
              <span className="mb-1">Initial value</span>
              <InfoTooltip text="The starting value for this market. Should be in between min and max values." />
            </label>
@ -410,7 +406,7 @@ export function NewContract(props: {
        )}
      </Row>

-      <Row className="form-control my-2 items-center gap-2 text-sm">
+      <Row className="my-2 items-center gap-2 text-sm">
        <span>Display this market on homepage</span>
        <ShortToggle
          on={visibility === 'public'}
@ -420,8 +416,8 @@ export function NewContract(props: {

      <Spacer h={6} />

-      <div className="form-control mb-1 items-start">
-        <label className="label mb-1 gap-2">
+      <div className="mb-1 flex flex-col items-start">
+        <label className="mb-1 gap-2 px-1 py-2">
          <span>Question closes in</span>
          <InfoTooltip text="Predicting will be halted after this time (local timezone)." />
        </label>
@ -463,8 +459,8 @@ export function NewContract(props: {

      <Spacer h={6} />

-      <div className="form-control mb-1 items-start gap-1">
-        <label className="label gap-2">
+      <div className="mb-1 flex flex-col items-start gap-1">
+        <label className="gap-2 px-1 py-2">
          <span className="mb-1">Description</span>
          <InfoTooltip text="Optional. Describe how you will resolve this question." />
        </label>
@ -474,24 +470,24 @@ export function NewContract(props: {
      <Spacer h={6} />
      <span className={'text-error'}>{errorText}</span>
      <Row className="items-end justify-between">
-        <div className="form-control mb-1 items-start">
-          <label className="label mb-1 gap-2">
+        <div className="mb-1 flex flex-col items-start">
+          <label className="mb-1 gap-2 px-1 py-2">
            <span>Cost</span>
            <InfoTooltip
              text={`Cost to create your question. This amount is used to subsidize predictions.`}
            />
          </label>
          {!deservesFreeMarket ? (
-            <div className="label-text text-neutral pl-1">
+            <div className="pl-1 text-sm text-gray-700">
              {formatMoney(ante)}
            </div>
          ) : (
-            <Row>
-              <div className="label-text text-neutral pl-1 line-through">
+            <Row className="text-sm">
+              <div className="pl-1 text-gray-700 line-through">
                {formatMoney(ante)}
              </div>
-              <div className="label-text text-primary pl-1">FREE </div>
-              <div className="label-text pl-1 text-gray-500">
+              <div className="text-primary pl-1">FREE </div>
+              <div className="pl-1 text-gray-500">
                (You have{' '}
                {FREE_MARKETS_PER_USER_MAX - (creator?.freeMarketsCreated ?? 0)}{' '}
                free markets left)
--- a/web/pages/daily-movers.tsx
+++ b/web/pages/daily-movers.tsx
@ -28,7 +28,7 @@ export default function DailyMovers() {
 function ProbChangesWrapper(props: { userId: string }) {
  const { userId } = props

-  const data = useUserContractMetricsByProfit(userId, 50)
+  const data = useUserContractMetricsByProfit(userId)

  if (!data) return <LoadingIndicator />

--- a/web/pages/groups.tsx
+++ b/web/pages/groups.tsx
@ -228,7 +228,7 @@ function GroupMembersList(props: { group: Group }) {
  const { totalMembers } = group
  if (totalMembers === 1) return <div />
  return (
-    <div className="text-neutral flex flex-wrap gap-1">
+    <div className="flex flex-wrap gap-1 text-gray-700">
      <span>{totalMembers} members</span>
    </div>
  )
--- a/web/pages/home/index.tsx
+++ b/web/pages/home/index.tsx
@ -95,8 +95,7 @@ export default function Home() {
  }, [user, sections])

  const contractMetricsByProfit = useUserContractMetricsByProfit(
-    user?.id ?? '_',
-    3
+    user?.id ?? '_'
  )

  const trendingContracts = useTrendingContracts(6)
@ -494,7 +493,7 @@ function DailyMoversSection(props: {
  return (
    <Col className="gap-2">
      <SectionHeader label="Daily movers" href="/daily-movers" />
-      <ProfitChangeTable contracts={contracts} metrics={metrics} />
+      <ProfitChangeTable contracts={contracts} metrics={metrics} maxRows={3} />
    </Col>
  )
 }
@ -530,8 +529,7 @@ export function DailyProfit(props: { user: User | null | undefined }) {
  const { user } = props

  const contractMetricsByProfit = useUserContractMetricsByProfit(
-    user?.id ?? '_',
-    100
+    user?.id ?? '_'
  )
  const profit = sum(
    contractMetricsByProfit?.metrics.map((m) =>
--- a/web/pages/post/[...slugs]/index.tsx
+++ b/web/pages/post/[...slugs]/index.tsx
@ -87,7 +87,7 @@ export default function PostPage(props: {
            <div className={'inline-flex'}>
              <div className="mr-1 text-gray-500">Created by</div>
              <UserLink
-                className="text-neutral"
+                className="text-gray-700"
                name={creator.name}
                username={creator.username}
              />
@ -122,7 +122,7 @@ export default function PostPage(props: {

        <Spacer h={2} />
        <div className="rounded-lg bg-white px-6 py-4 sm:py-0">
-          <div className="form-control w-full py-2">
+          <div className="flex w-full flex-col py-2">
            {user && user.id === post.creatorId ? (
              <RichEditPost post={post} />
            ) : (
--- a/web/pages/profile.tsx
+++ b/web/pages/profile.tsx
@ -43,7 +43,7 @@ function EditUserField(props: {

  return (
    <div>
-      <label className="label">{label}</label>
+      <label className="px-1 py-2">{label}</label>

      {field === 'bio' ? (
        <ExpandingInput
@ -156,7 +156,7 @@ export default function ProfilePage(props: {
          </Row>

          <div>
-            <label className="label">Display name</label>
+            <label className="px-1 py-2">Display name</label>
            <Input
              type="text"
              placeholder="Display name"
@ -167,7 +167,7 @@ export default function ProfilePage(props: {
          </div>

          <div>
-            <label className="label">Username</label>
+            <label className="px-1 py-2">Username</label>
            <Input
              type="text"
              placeholder="Username"
@ -193,15 +193,15 @@ export default function ProfilePage(props: {
          ))}

          <div>
-            <label className="label">Email</label>
+            <label className="px-1 py-2">Email</label>
            <div className="ml-1 text-gray-500">
              {privateUser.email ?? '\u00a0'}
            </div>
          </div>

          <div>
-            <label className="label">API key</label>
-            <div className="input-group w-full">
+            <label className="px-1 py-2">API key</label>
+            <div className="flex w-full items-stretch">
              <Input
                type="text"
                placeholder="Click refresh to generate key"
--- a/web/pages/tournaments/index.tsx
+++ b/web/pages/tournaments/index.tsx
@ -25,6 +25,7 @@ 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'
+import { useTracking } from 'web/hooks/use-tracking'

 dayjs.extend(utc)
 dayjs.extend(timezone)
@ -170,6 +171,9 @@ export default function TournamentPage(props: { sections: SectionInfo[] }) {

  const description = `Win real prizes (including cash!) by participating in forecasting
            tournaments on current events, sports, science, and more.`
+
+  useTracking('view tournaments')
+
  return (
    <Page>
      <SEO title="Tournaments" description={description} />
--- a/web/public/custom-components/coin.tsx
+++ b/web/public/custom-components/coin.tsx
@ -0,0 +1,29 @@
+export default function Coin({
+  size = 18,
+  color = '#66667C',
+  strokeWidth = 1.5,
+  fill = 'none',
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 18 18"
+      width={size}
+      height={size}
+      fill={fill}
+      stroke={color}
+      strokeWidth={strokeWidth}
+      opacity={50}
+      transform="rotate(-30)"
+    >
+      <path
+        className="cls-2"
+        d="M15,9c0,.35-.07,.68-.2,1-.66,1.73-3.01,3-5.8,3s-5.14-1.27-5.8-3c-.13-.32-.2-.65-.2-1,0-2.21,2.69-4,6-4s6,1.79,6,4Z"
+      />
+      <path
+        className="cls-1"
+        d="M15,9v2c0,2.21-2.69,4-6,4s-6-1.79-6-4v-2c0,.35,.07,.68,.2,1,.66,1.73,3.01,3,5.8,3s5.14-1.27,5.8-3c.13-.32,.2-.65,.2-1Z"
+      />
+    </svg>
+  )
+}
--- a/web/public/custom-components/curve.tsx
+++ b/web/public/custom-components/curve.tsx
@ -12,6 +12,7 @@ export default function Curve({
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
+      transform="rotate(90)"
    >
      <path d="M5.02,0V5.24c0,4.3,3.49,7.79,7.79,7.79h5.2" />
    </svg>
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const defaultTheme = require('tailwindcss/defaultTheme')
 const plugin = require('tailwindcss/plugin')

@ -15,7 +16,20 @@ module.exports = {
      }
    ),
    extend: {
+      keyframes: {
+        progress: {
+          '0%': { width: '0%' },
+          '100%': { width: '100%' },
+        },
+      },
+      animation: {
+        'progress-loading': 'progress 2s linear',
+      },
      colors: {
+        primary: '#11b981',
+        'primary-focus': '#069668',
+        warning: '#F59E0B', // amber-500 TODO: change color
+        error: '#ff5724', // TODO: change color
        'red-25': '#FDF7F6',
        'greyscale-1': '#FBFBFF',
        'greyscale-1.5': '#F4F4FB',
@ -42,7 +56,6 @@ module.exports = {
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/line-clamp'),
-    require('daisyui'),
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
@ -61,57 +74,7 @@ module.exports = {
          'overflow-wrap': 'anywhere',
          'word-break': 'break-word', // for Safari
        },
-        '.only-thumb': {
-          'pointer-events': 'none',
-          '&::-webkit-slider-thumb': {
-            'pointer-events': 'auto !important',
-          },
-          '&::-moz-range-thumb': {
-            'pointer-events': 'auto !important',
-          },
-          '&::-ms-thumb': {
-            'pointer-events': 'auto !important',
-          },
-        },
      })
    }),
  ],
-  daisyui: {
-    themes: [
-      {
-        mantic: {
-          primary: '#11b981',
-          'primary-focus': '#069668',
-          // Foreground content color to use on primary color
-          'primary-content': '#ffffff',
-
-          secondary: '#a991f7',
-          'secondary-focus': '#8462f4',
-          // Foreground content color to use on secondary color
-          'secondary-content': '#ffffff',
-
-          accent: '#f6d860',
-          'accent-focus': '#f3cc30',
-          // Foreground content color to use on accent color
-          'accent-content': '#ffffff',
-
-          neutral: '#3d4451',
-          'neutral-focus': '#2a2e37',
-          // Foreground content color to use on neutral color
-          'neutral-content': '#ffffff',
-
-          'base-100': '#ffffff' /* Base page color, for blank backgrounds */,
-          'base-200': '#f9fafb' /* Base color, a little darker */,
-          'base-300': '#d1d5db' /* Base color, even more dark */,
-          // Foreground content color to use on base color
-          'base-content': '#1f2937',
-
-          info: '#2094f3',
-          success: '#009485',
-          warning: '#ff9900',
-          error: '#ff5724',
-        },
-      },
-    ],
-  },
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1303,6 +1303,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
+  integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.17.2", "@babel/runtime@^7.8.4":
  version "7.18.3"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
@ -5475,11 +5482,6 @@ d3-transition@3:
    d3-interpolate "1 - 3"
    d3-timer "1 - 3"

-daisyui@1.16.4:
-  version "1.16.4"
-  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-1.16.4.tgz#52773401c0962e37ef40507d29f0e513c7f2856f"
-  integrity sha512-bpPUlIR6PJdnaM+Vj+Rd0ljMwbdwjvFAW9E/bhxCRDEU48OnmpKQxnkwNGAtXbwWWATS6I1dEIlLdM8zCbV3uQ==
-
 damerau-levenshtein@^1.0.7:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@ -10216,6 +10218,25 @@ raw-body@2.5.1, raw-body@^2.2.0:
    iconv-lite "0.4.24"
    unpipe "1.0.0"

+rc-slider@10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.0.1.tgz#7058c68ff1e1aa4e7c3536e5e10128bdbccb87f9"
+  integrity sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.18.1"
+    shallowequal "^1.1.0"
+
+rc-util@^5.18.1:
+  version "5.24.4"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.24.4.tgz#a4126f01358c86f17c1bf380a1d83d6c9155ae65"
+  integrity sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
 rc@^1.2.8:
  version "1.2.8"
  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@ -10346,7 +10367,7 @@ react-instantsearch-hooks@6.24.1:
    dequal "^2.0.0"
    instantsearch.js "^4.40.1"

-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -11350,10 +11371,10 @@ sprintf-js@~1.0.2:
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=

-stability-client@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/stability-client/-/stability-client-1.5.0.tgz#f221420a297c808f209c469a0df8fa2401f8f6ae"
-  integrity sha512-hXuDK6QW/msf50pu8M4L1hTCYG4w5ZrhLgxirigUrSZEARupIPT88O7qz4YSmUbbp9nKlzS8UJ6NjYUH7qy45w==
+stability-client@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/stability-client/-/stability-client-1.6.1.tgz#960250c8083119227d25972db662c873333f9a26"
+  integrity sha512-N5igY8YH1vT6T0p++GWbr1KHqeAyYO+/WGgrgsTeKk7bCTXLeQng8B9OWYOOAczb95iyvFXDdUCRj5Cry00iaA==
  dependencies:
    "@improbable-eng/grpc-web" "^0.15.0"
    "@improbable-eng/grpc-web-node-http-transport" "^0.15.0"