From 38b7c898f6571b1e3a3e93fe1f921ad743112bfb Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Fri, 30 Sep 2022 16:16:04 -0700
Subject: [PATCH 01/25] More refactoring to make chart tooltips more flexible
 (#975)

---
 web/components/charts/contract/binary.tsx     | 14 ++---
 web/components/charts/contract/choice.tsx     | 16 +++---
 web/components/charts/contract/numeric.tsx    |  9 ++--
 .../charts/contract/pseudo-numeric.tsx        | 16 +++---
 web/components/charts/generic-charts.tsx      | 53 ++++++++-----------
 web/components/charts/helpers.tsx             | 52 +++++++++++-------
 6 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx
index a3f04a29..564ef68c 100644
--- a/web/components/charts/contract/binary.tsx
+++ b/web/components/charts/contract/binary.tsx
@@ -25,19 +25,19 @@ const getBetPoints = (bets: Bet[]) => {
   return sortBy(bets, (b) => b.createdTime).map((b) => ({
     x: new Date(b.createdTime),
     y: b.probAfter,
-    datum: b,
+    obj: b,
   }))
 }
 
-const BinaryChartTooltip = (props: TooltipProps<HistoryPoint<Bet>>) => {
-  const { p, xScale } = props
-  const { x, y, datum } = p
+const BinaryChartTooltip = (props: TooltipProps<Date, HistoryPoint<Bet>>) => {
+  const { data, mouseX, xScale } = props
   const [start, end] = xScale.domain()
+  const d = xScale.invert(mouseX)
   return (
     <Row className="items-center gap-2">
-      {datum && <Avatar size="xs" avatarUrl={datum.userAvatarUrl} />}
-      <span className="font-semibold">{formatDateInRange(x, start, end)}</span>
-      <span className="text-greyscale-6">{formatPct(y)}</span>
+      {data.obj && <Avatar size="xs" avatarUrl={data.obj.userAvatarUrl} />}
+      <span className="font-semibold">{formatDateInRange(d, start, end)}</span>
+      <span className="text-greyscale-6">{formatPct(data.y)}</span>
     </Row>
   )
 }
diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx
index 7c9ec07a..665a01cd 100644
--- a/web/components/charts/contract/choice.tsx
+++ b/web/components/charts/contract/choice.tsx
@@ -114,7 +114,7 @@ const getBetPoints = (answers: Answer[], bets: Bet[]) => {
     points.push({
       x: new Date(bet.createdTime),
       y: answers.map((a) => sharesByOutcome[a.id] ** 2 / sharesSquared),
-      datum: bet,
+      obj: bet,
     })
   }
   return points
@@ -181,12 +181,12 @@ export const ChoiceContractChart = (props: {
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
 
   const ChoiceTooltip = useMemo(
-    () => (props: TooltipProps<MultiPoint<Bet>>) => {
-      const { p, xScale } = props
-      const { x, y, datum } = p
+    () => (props: TooltipProps<Date, MultiPoint<Bet>>) => {
+      const { data, mouseX, xScale } = props
       const [start, end] = xScale.domain()
+      const d = xScale.invert(mouseX)
       const legendItems = sortBy(
-        y.map((p, i) => ({
+        data.y.map((p, i) => ({
           color: CATEGORY_COLORS[i],
           label: answers[i].text,
           value: formatPct(p),
@@ -197,9 +197,11 @@ export const ChoiceContractChart = (props: {
       return (
         <>
           <Row className="items-center gap-2">
-            {datum && <Avatar size="xxs" avatarUrl={datum.userAvatarUrl} />}
+            {data.obj && (
+              <Avatar size="xxs" avatarUrl={data.obj.userAvatarUrl} />
+            )}
             <span className="text-semibold text-base">
-              {formatDateInRange(x, start, end)}
+              {formatDateInRange(d, start, end)}
             </span>
           </Row>
           <Legend className="max-w-xs" items={legendItems} />
diff --git a/web/components/charts/contract/numeric.tsx b/web/components/charts/contract/numeric.tsx
index ac300361..f8051308 100644
--- a/web/components/charts/contract/numeric.tsx
+++ b/web/components/charts/contract/numeric.tsx
@@ -21,12 +21,15 @@ const getNumericChartData = (contract: NumericContract) => {
   }))
 }
 
-const NumericChartTooltip = (props: TooltipProps<DistributionPoint>) => {
-  const { x, y } = props.p
+const NumericChartTooltip = (
+  props: TooltipProps<number, DistributionPoint>
+) => {
+  const { data, mouseX, xScale } = props
+  const x = xScale.invert(mouseX)
   return (
     <>
       <span className="text-semibold">{formatLargeNumber(x)}</span>
-      <span className="text-greyscale-6">{formatPct(y, 2)}</span>
+      <span className="text-greyscale-6">{formatPct(data.y, 2)}</span>
     </>
   )
 }
diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx
index adf2e493..04b1fafb 100644
--- a/web/components/charts/contract/pseudo-numeric.tsx
+++ b/web/components/charts/contract/pseudo-numeric.tsx
@@ -37,19 +37,21 @@ const getBetPoints = (bets: Bet[], scaleP: (p: number) => number) => {
   return sortBy(bets, (b) => b.createdTime).map((b) => ({
     x: new Date(b.createdTime),
     y: scaleP(b.probAfter),
-    datum: b,
+    obj: b,
   }))
 }
 
-const PseudoNumericChartTooltip = (props: TooltipProps<HistoryPoint<Bet>>) => {
-  const { p, xScale } = props
-  const { x, y, datum } = p
+const PseudoNumericChartTooltip = (
+  props: TooltipProps<Date, HistoryPoint<Bet>>
+) => {
+  const { data, mouseX, xScale } = props
   const [start, end] = xScale.domain()
+  const d = xScale.invert(mouseX)
   return (
     <Row className="items-center gap-2">
-      {datum && <Avatar size="xs" avatarUrl={datum.userAvatarUrl} />}
-      <span className="font-semibold">{formatDateInRange(x, start, end)}</span>
-      <span className="text-greyscale-6">{formatLargeNumber(y)}</span>
+      {data.obj && <Avatar size="xs" avatarUrl={data.obj.userAvatarUrl} />}
+      <span className="font-semibold">{formatDateInRange(d, start, end)}</span>
+      <span className="text-greyscale-6">{formatLargeNumber(data.y)}</span>
     </Row>
   )
 }
diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx
index 5ae30ad4..152b264c 100644
--- a/web/components/charts/generic-charts.tsx
+++ b/web/components/charts/generic-charts.tsx
@@ -13,6 +13,7 @@ import {
 import { range } from 'lodash'
 
 import {
+  ContinuousScale,
   SVGChart,
   AreaPath,
   AreaWithTopStroke,
@@ -31,6 +32,19 @@ const getTickValues = (min: number, max: number, n: number) => {
   return [min, ...range(1, n - 1).map((i) => min + step * i), max]
 }
 
+const betAtPointSelector = <X, Y, P extends Point<X, Y>>(
+  data: P[],
+  xScale: ContinuousScale<X>
+) => {
+  const bisect = bisector((p: P) => p.x)
+  return (posX: number) => {
+    const x = xScale.invert(posX)
+    const item = data[bisect.left(data, x) - 1]
+    const result = item ? { ...item, x: posX } : undefined
+    return result
+  }
+}
+
 export const DistributionChart = <P extends DistributionPoint>(props: {
   data: P[]
   w: number
@@ -39,7 +53,7 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   xScale: ScaleContinuousNumeric<number, number>
   yScale: ScaleContinuousNumeric<number, number>
   onMouseOver?: (p: P | undefined) => void
-  Tooltip?: TooltipComponent<P>
+  Tooltip?: TooltipComponent<number, P>
 }) => {
   const { color, data, yScale, w, h, Tooltip } = props
 
@@ -50,7 +64,6 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   const px = useCallback((p: P) => xScale(p.x), [xScale])
   const py0 = yScale(yScale.domain()[0])
   const py1 = useCallback((p: P) => yScale(p.y), [yScale])
-  const xBisector = bisector((p: P) => p.x)
 
   const { xAxis, yAxis } = useMemo(() => {
     const xAxis = axisBottom<number>(xScale).ticks(w / 100)
@@ -58,6 +71,8 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
     return { xAxis, yAxis }
   }, [w, xScale, yScale])
 
+  const onMouseOver = useEvent(betAtPointSelector(data, xScale))
+
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
       const [mouseX0, mouseX1] = ev.selection as [number, number]
@@ -69,14 +84,6 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
     }
   })
 
-  const onMouseOver = useEvent((mouseX: number) => {
-    const queryX = xScale.invert(mouseX)
-    const item = data[xBisector.left(data, queryX) - 1]
-    const result = item ? { ...item, x: queryX } : undefined
-    props.onMouseOver?.(result)
-    return result
-  })
-
   return (
     <SVGChart
       w={w}
@@ -107,7 +114,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
   onMouseOver?: (p: P | undefined) => void
-  Tooltip?: TooltipComponent<P>
+  Tooltip?: TooltipComponent<Date, P>
   pct?: boolean
 }) => {
   const { colors, data, yScale, w, h, Tooltip, pct } = props
@@ -119,7 +126,6 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   const px = useCallback((p: SP) => xScale(p.data.x), [xScale])
   const py0 = useCallback((p: SP) => yScale(p[0]), [yScale])
   const py1 = useCallback((p: SP) => yScale(p[1]), [yScale])
-  const xBisector = bisector((p: P) => p.x)
 
   const { xAxis, yAxis } = useMemo(() => {
     const [min, max] = yScale.domain()
@@ -141,6 +147,8 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
     return d3Stack(data)
   }, [data])
 
+  const onMouseOver = useEvent(betAtPointSelector(data, xScale))
+
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
       const [mouseX0, mouseX1] = ev.selection as [number, number]
@@ -152,14 +160,6 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
     }
   })
 
-  const onMouseOver = useEvent((mouseX: number) => {
-    const queryX = xScale.invert(mouseX)
-    const item = data[xBisector.left(data, queryX) - 1]
-    const result = item ? { ...item, x: queryX } : undefined
-    props.onMouseOver?.(result)
-    return result
-  })
-
   return (
     <SVGChart
       w={w}
@@ -193,7 +193,7 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
   onMouseOver?: (p: P | undefined) => void
-  Tooltip?: TooltipComponent<P>
+  Tooltip?: TooltipComponent<Date, P>
   pct?: boolean
 }) => {
   const { color, data, yScale, w, h, Tooltip, pct } = props
@@ -204,7 +204,6 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   const px = useCallback((p: P) => xScale(p.x), [xScale])
   const py0 = yScale(yScale.domain()[0])
   const py1 = useCallback((p: P) => yScale(p.y), [yScale])
-  const xBisector = bisector((p: P) => p.x)
 
   const { xAxis, yAxis } = useMemo(() => {
     const [min, max] = yScale.domain()
@@ -218,6 +217,8 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
     return { xAxis, yAxis }
   }, [w, h, pct, xScale, yScale])
 
+  const onMouseOver = useEvent(betAtPointSelector(data, xScale))
+
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
       const [mouseX0, mouseX1] = ev.selection as [number, number]
@@ -229,14 +230,6 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
     }
   })
 
-  const onMouseOver = useEvent((mouseX: number) => {
-    const queryX = xScale.invert(mouseX)
-    const item = data[xBisector.left(data, queryX) - 1]
-    const result = item ? { ...item, x: queryX } : undefined
-    props.onMouseOver?.(result)
-    return result
-  })
-
   return (
     <SVGChart
       w={w}
diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx
index ba9865b2..ea221c80 100644
--- a/web/components/charts/helpers.tsx
+++ b/web/components/charts/helpers.tsx
@@ -17,7 +17,12 @@ import clsx from 'clsx'
 
 import { Contract } from 'common/contract'
 
-export type Point<X, Y, T = unknown> = { x: X; y: Y; datum?: T }
+export type Point<X, Y, T = unknown> = { x: X; y: Y; obj?: T }
+
+export interface ContinuousScale<T> extends AxisScale<T> {
+  invert(n: number): T
+}
+
 export type XScale<P> = P extends Point<infer X, infer _> ? AxisScale<X> : never
 export type YScale<P> = P extends Point<infer _, infer Y> ? AxisScale<Y> : never
 
@@ -118,18 +123,18 @@ export const AreaWithTopStroke = <P,>(props: {
   )
 }
 
-export const SVGChart = <X, Y, P extends Point<X, Y>>(props: {
+export const SVGChart = <X, TT>(props: {
   children: ReactNode
   w: number
   h: number
   xAxis: Axis<X>
   yAxis: Axis<number>
   onSelect?: (ev: D3BrushEvent<any>) => void
-  onMouseOver?: (mouseX: number, mouseY: number) => P | undefined
-  Tooltip?: TooltipComponent<P>
+  onMouseOver?: (mouseX: number, mouseY: number) => TT | undefined
+  Tooltip?: TooltipComponent<X, TT>
 }) => {
   const { children, w, h, xAxis, yAxis, onMouseOver, onSelect, Tooltip } = props
-  const [mouseState, setMouseState] = useState<{ pos: TooltipPosition; p: P }>()
+  const [mouse, setMouse] = useState<{ x: number; y: number; data: TT }>()
   const overlayRef = useRef<SVGGElement>(null)
   const innerW = w - MARGIN_X
   const innerH = h - MARGIN_Y
@@ -148,7 +153,7 @@ export const SVGChart = <X, Y, P extends Point<X, Y>>(props: {
         if (!justSelected.current) {
           justSelected.current = true
           onSelect(ev)
-          setMouseState(undefined)
+          setMouse(undefined)
           if (overlayRef.current) {
             select(overlayRef.current).call(brush.clear)
           }
@@ -168,26 +173,32 @@ export const SVGChart = <X, Y, P extends Point<X, Y>>(props: {
 
   const onPointerMove = (ev: React.PointerEvent) => {
     if (ev.pointerType === 'mouse' && onMouseOver) {
-      const [mouseX, mouseY] = pointer(ev)
-      const p = onMouseOver(mouseX, mouseY)
-      if (p != null) {
-        const pos = getTooltipPosition(mouseX, mouseY, innerW, innerH)
-        setMouseState({ pos, p })
+      const [x, y] = pointer(ev)
+      const data = onMouseOver(x, y)
+      if (data !== undefined) {
+        setMouse({ x, y, data })
       } else {
-        setMouseState(undefined)
+        setMouse(undefined)
       }
     }
   }
 
   const onPointerLeave = () => {
-    setMouseState(undefined)
+    setMouse(undefined)
   }
 
   return (
     <div className="relative">
-      {mouseState && Tooltip && (
-        <TooltipContainer pos={mouseState.pos}>
-          <Tooltip xScale={xAxis.scale()} p={mouseState.p} />
+      {mouse && Tooltip && (
+        <TooltipContainer
+          pos={getTooltipPosition(mouse.x, mouse.y, innerW, innerH)}
+        >
+          <Tooltip
+            xScale={xAxis.scale()}
+            mouseX={mouse.x}
+            mouseY={mouse.y}
+            data={mouse.data}
+          />
         </TooltipContainer>
       )}
       <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
@@ -243,8 +254,13 @@ export const getTooltipPosition = (
   return result
 }
 
-export type TooltipProps<P> = { p: P; xScale: XScale<P> }
-export type TooltipComponent<P> = React.ComponentType<TooltipProps<P>>
+export type TooltipProps<X, T> = {
+  mouseX: number
+  mouseY: number
+  xScale: ContinuousScale<X>
+  data: T
+}
+export type TooltipComponent<X, T> = React.ComponentType<TooltipProps<X, T>>
 export const TooltipContainer = (props: {
   pos: TooltipPosition
   className?: string

From 89e26d077e58565afbb4a5d98ecbcd1af53dbed7 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Fri, 30 Sep 2022 16:57:48 -0700
Subject: [PATCH 02/25] Clean up chart sizing code (#977)

* Clean up chart sizing code

* Do all the chart sizing work in same batch
---
 web/components/charts/contract/binary.tsx     | 40 ++++------
 web/components/charts/contract/choice.tsx     | 39 ++++-----
 web/components/charts/contract/index.tsx      |  3 +-
 web/components/charts/contract/numeric.tsx    | 37 ++++-----
 .../charts/contract/pseudo-numeric.tsx        | 44 ++++------
 web/components/contract/contract-overview.tsx | 80 +++++++++++++++----
 web/hooks/use-element-width.tsx               | 17 ----
 web/pages/embed/[username]/[contractSlug].tsx | 11 ++-
 8 files changed, 136 insertions(+), 135 deletions(-)
 delete mode 100644 web/hooks/use-element-width.tsx

diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx
index 564ef68c..7e192767 100644
--- a/web/components/charts/contract/binary.tsx
+++ b/web/components/charts/contract/binary.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { last, sortBy } from 'lodash'
 import { scaleTime, scaleLinear } from 'd3-scale'
 
@@ -6,7 +6,6 @@ import { Bet } from 'common/bet'
 import { getProbability, getInitialProbability } from 'common/calculate'
 import { BinaryContract } from 'common/contract'
 import { DAY_MS } from 'common/util/time'
-import { useIsMobile } from 'web/hooks/use-is-mobile'
 import {
   TooltipProps,
   MARGIN_X,
@@ -17,7 +16,6 @@ import {
   formatPct,
 } from '../helpers'
 import { HistoryPoint, SingleValueHistoryChart } from '../generic-charts'
-import { useElementWidth } from 'web/hooks/use-element-width'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
@@ -45,10 +43,11 @@ const BinaryChartTooltip = (props: TooltipProps<Date, HistoryPoint<Bet>>) => {
 export const BinaryContractChart = (props: {
   contract: BinaryContract
   bets: Bet[]
-  height?: number
+  width: number
+  height: number
   onMouseOver?: (p: HistoryPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets, onMouseOver } = props
+  const { contract, bets, width, height, onMouseOver } = props
   const [start, end] = getDateRange(contract)
   const startP = getInitialProbability(contract)
   const endP = getProbability(contract)
@@ -67,28 +66,19 @@ export const BinaryContractChart = (props: {
     Date.now()
   )
   const visibleRange = [start, rightmostDate]
-  const isMobile = useIsMobile(800)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const width = useElementWidth(containerRef) ?? 0
-  const height = props.height ?? (isMobile ? 150 : 250)
   const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
-
   return (
-    <div ref={containerRef}>
-      {width > 0 && (
-        <SingleValueHistoryChart
-          w={width}
-          h={height}
-          xScale={xScale}
-          yScale={yScale}
-          data={data}
-          color="#11b981"
-          onMouseOver={onMouseOver}
-          Tooltip={BinaryChartTooltip}
-          pct
-        />
-      )}
-    </div>
+    <SingleValueHistoryChart
+      w={width}
+      h={height}
+      xScale={xScale}
+      yScale={yScale}
+      data={data}
+      color="#11b981"
+      onMouseOver={onMouseOver}
+      Tooltip={BinaryChartTooltip}
+      pct
+    />
   )
 }
diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx
index 665a01cd..65279b70 100644
--- a/web/components/charts/contract/choice.tsx
+++ b/web/components/charts/contract/choice.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { last, sum, sortBy, groupBy } from 'lodash'
 import { scaleTime, scaleLinear } from 'd3-scale'
 
@@ -6,7 +6,6 @@ import { Bet } from 'common/bet'
 import { Answer } from 'common/answer'
 import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
 import { getOutcomeProbability } from 'common/calculate'
-import { useIsMobile } from 'web/hooks/use-is-mobile'
 import { DAY_MS } from 'common/util/time'
 import {
   TooltipProps,
@@ -18,7 +17,6 @@ import {
   formatDateInRange,
 } from '../helpers'
 import { MultiPoint, MultiValueHistoryChart } from '../generic-charts'
-import { useElementWidth } from 'web/hooks/use-element-width'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
@@ -146,10 +144,11 @@ const Legend = (props: { className?: string; items: LegendItem[] }) => {
 export const ChoiceContractChart = (props: {
   contract: FreeResponseContract | MultipleChoiceContract
   bets: Bet[]
-  height?: number
+  width: number
+  height: number
   onMouseOver?: (p: MultiPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets, onMouseOver } = props
+  const { contract, bets, width, height, onMouseOver } = props
   const [start, end] = getDateRange(contract)
   const answers = useMemo(
     () => getTrackedAnswers(contract, CATEGORY_COLORS.length),
@@ -173,10 +172,6 @@ export const ChoiceContractChart = (props: {
     Date.now()
   )
   const visibleRange = [start, rightmostDate]
-  const isMobile = useIsMobile(800)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const width = useElementWidth(containerRef) ?? 0
-  const height = props.height ?? (isMobile ? 250 : 350)
   const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
 
@@ -212,20 +207,16 @@ export const ChoiceContractChart = (props: {
   )
 
   return (
-    <div ref={containerRef}>
-      {width > 0 && (
-        <MultiValueHistoryChart
-          w={width}
-          h={height}
-          xScale={xScale}
-          yScale={yScale}
-          data={data}
-          colors={CATEGORY_COLORS}
-          onMouseOver={onMouseOver}
-          Tooltip={ChoiceTooltip}
-          pct
-        />
-      )}
-    </div>
+    <MultiValueHistoryChart
+      w={width}
+      h={height}
+      xScale={xScale}
+      yScale={yScale}
+      data={data}
+      colors={CATEGORY_COLORS}
+      onMouseOver={onMouseOver}
+      Tooltip={ChoiceTooltip}
+      pct
+    />
   )
 }
diff --git a/web/components/charts/contract/index.tsx b/web/components/charts/contract/index.tsx
index 1f580bae..1efe1eb4 100644
--- a/web/components/charts/contract/index.tsx
+++ b/web/components/charts/contract/index.tsx
@@ -8,7 +8,8 @@ import { NumericContractChart } from './numeric'
 export const ContractChart = (props: {
   contract: Contract
   bets: Bet[]
-  height?: number
+  width: number
+  height: number
 }) => {
   const { contract } = props
   switch (contract.outcomeType) {
diff --git a/web/components/charts/contract/numeric.tsx b/web/components/charts/contract/numeric.tsx
index f8051308..2d62cb11 100644
--- a/web/components/charts/contract/numeric.tsx
+++ b/web/components/charts/contract/numeric.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { range } from 'lodash'
 import { scaleLinear } from 'd3-scale'
 
@@ -6,10 +6,8 @@ import { formatLargeNumber } from 'common/util/format'
 import { getDpmOutcomeProbabilities } from 'common/calculate-dpm'
 import { NumericContract } from 'common/contract'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
-import { useIsMobile } from 'web/hooks/use-is-mobile'
 import { TooltipProps, MARGIN_X, MARGIN_Y, formatPct } from '../helpers'
 import { DistributionPoint, DistributionChart } from '../generic-charts'
-import { useElementWidth } from 'web/hooks/use-element-width'
 
 const getNumericChartData = (contract: NumericContract) => {
   const { totalShares, bucketCount, min, max } = contract
@@ -36,33 +34,26 @@ const NumericChartTooltip = (
 
 export const NumericContractChart = (props: {
   contract: NumericContract
-  height?: number
+  width: number
+  height: number
   onMouseOver?: (p: DistributionPoint | undefined) => void
 }) => {
-  const { contract, onMouseOver } = props
+  const { contract, width, height, onMouseOver } = props
   const { min, max } = contract
   const data = useMemo(() => getNumericChartData(contract), [contract])
-  const isMobile = useIsMobile(800)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const width = useElementWidth(containerRef) ?? 0
-  const height = props.height ?? (isMobile ? 150 : 250)
   const maxY = Math.max(...data.map((d) => d.y))
   const xScale = scaleLinear([min, max], [0, width - MARGIN_X])
   const yScale = scaleLinear([0, maxY], [height - MARGIN_Y, 0])
   return (
-    <div ref={containerRef}>
-      {width > 0 && (
-        <DistributionChart
-          w={width}
-          h={height}
-          xScale={xScale}
-          yScale={yScale}
-          data={data}
-          color={NUMERIC_GRAPH_COLOR}
-          onMouseOver={onMouseOver}
-          Tooltip={NumericChartTooltip}
-        />
-      )}
-    </div>
+    <DistributionChart
+      w={width}
+      h={height}
+      xScale={xScale}
+      yScale={yScale}
+      data={data}
+      color={NUMERIC_GRAPH_COLOR}
+      onMouseOver={onMouseOver}
+      Tooltip={NumericChartTooltip}
+    />
   )
 }
diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx
index 04b1fafb..e03d4ad9 100644
--- a/web/components/charts/contract/pseudo-numeric.tsx
+++ b/web/components/charts/contract/pseudo-numeric.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { last, sortBy } from 'lodash'
 import { scaleTime, scaleLog, scaleLinear } from 'd3-scale'
 
@@ -8,7 +8,6 @@ import { getInitialProbability, getProbability } from 'common/calculate'
 import { formatLargeNumber } from 'common/util/format'
 import { PseudoNumericContract } from 'common/contract'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
-import { useIsMobile } from 'web/hooks/use-is-mobile'
 import {
   TooltipProps,
   MARGIN_X,
@@ -18,7 +17,6 @@ import {
   formatDateInRange,
 } from '../helpers'
 import { HistoryPoint, SingleValueHistoryChart } from '../generic-charts'
-import { useElementWidth } from 'web/hooks/use-element-width'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
@@ -59,10 +57,11 @@ const PseudoNumericChartTooltip = (
 export const PseudoNumericContractChart = (props: {
   contract: PseudoNumericContract
   bets: Bet[]
-  height?: number
+  width: number
+  height: number
   onMouseOver?: (p: HistoryPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets, onMouseOver } = props
+  const { contract, bets, width, height, onMouseOver } = props
   const { min, max, isLogScale } = contract
   const [start, end] = getDateRange(contract)
   const scaleP = useMemo(
@@ -86,30 +85,21 @@ export const PseudoNumericContractChart = (props: {
     Date.now()
   )
   const visibleRange = [start, rightmostDate]
-  const isMobile = useIsMobile(800)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const width = useElementWidth(containerRef) ?? 0
-  const height = props.height ?? (isMobile ? 150 : 250)
-  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
+  const xScale = scaleTime(visibleRange, [0, width ?? 0 - MARGIN_X])
   // clamp log scale to make sure zeroes go to the bottom
   const yScale = isLogScale
-    ? scaleLog([Math.max(min, 1), max], [height - MARGIN_Y, 0]).clamp(true)
-    : scaleLinear([min, max], [height - MARGIN_Y, 0])
-
+    ? scaleLog([Math.max(min, 1), max], [height ?? 0 - MARGIN_Y, 0]).clamp(true)
+    : scaleLinear([min, max], [height ?? 0 - MARGIN_Y, 0])
   return (
-    <div ref={containerRef}>
-      {width > 0 && (
-        <SingleValueHistoryChart
-          w={width}
-          h={height}
-          xScale={xScale}
-          yScale={yScale}
-          data={data}
-          onMouseOver={onMouseOver}
-          Tooltip={PseudoNumericChartTooltip}
-          color={NUMERIC_GRAPH_COLOR}
-        />
-      )}
-    </div>
+    <SingleValueHistoryChart
+      w={width}
+      h={height}
+      xScale={xScale}
+      yScale={yScale}
+      data={data}
+      onMouseOver={onMouseOver}
+      Tooltip={PseudoNumericChartTooltip}
+      color={NUMERIC_GRAPH_COLOR}
+    />
   )
 }
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index add9ba48..3e5f22b2 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -1,13 +1,8 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import { tradingAllowed } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
-import {
-  BinaryContractChart,
-  NumericContractChart,
-  PseudoNumericContractChart,
-  ChoiceContractChart,
-} from 'web/components/charts/contract'
+import { ContractChart } from 'web/components/charts/contract'
 import { useUser } from 'web/hooks/use-user'
 import { Row } from '../layout/row'
 import { Linkify } from '../linkify'
@@ -48,8 +43,43 @@ const BetWidget = (props: { contract: CPMMContract }) => {
   )
 }
 
-const NumericOverview = (props: { contract: NumericContract }) => {
-  const { contract } = props
+const SizedContractChart = (props: {
+  contract: Contract
+  bets: Bet[]
+  fullHeight: number
+  mobileHeight: number
+}) => {
+  const { contract, bets, fullHeight, mobileHeight } = props
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [chartWidth, setChartWidth] = useState<number>()
+  const [chartHeight, setChartHeight] = useState<number>()
+  useEffect(() => {
+    const handleResize = () => {
+      setChartHeight(window.innerWidth < 800 ? mobileHeight : fullHeight)
+      setChartWidth(containerRef.current?.clientWidth)
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [fullHeight, mobileHeight])
+  return (
+    <div ref={containerRef}>
+      {chartWidth != null && chartHeight != null && (
+        <ContractChart
+          contract={contract}
+          bets={bets}
+          width={chartWidth}
+          height={chartHeight}
+        />
+      )}
+    </div>
+  )
+}
+
+const NumericOverview = (props: { contract: NumericContract; bets: Bet[] }) => {
+  const { contract, bets } = props
   return (
     <Col className="gap-1 md:gap-2">
       <Col className="gap-3 px-2 sm:gap-4">
@@ -66,7 +96,12 @@ const NumericOverview = (props: { contract: NumericContract }) => {
           contract={contract}
         />
       </Col>
-      <NumericContractChart contract={contract} />
+      <SizedContractChart
+        contract={contract}
+        bets={bets}
+        fullHeight={250}
+        mobileHeight={150}
+      />
     </Col>
   )
 }
@@ -86,7 +121,12 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
           />
         </Row>
       </Col>
-      <BinaryContractChart contract={contract} bets={bets} />
+      <SizedContractChart
+        contract={contract}
+        bets={bets}
+        fullHeight={250}
+        mobileHeight={150}
+      />
       <Row className="items-center justify-between gap-4 xl:hidden">
         {tradingAllowed(contract) && (
           <BinaryMobileBetting contract={contract} />
@@ -111,9 +151,12 @@ const ChoiceOverview = (props: {
           <FreeResponseResolutionOrChance contract={contract} truncate="none" />
         )}
       </Col>
-      <Col className={'mb-1 gap-y-2'}>
-        <ChoiceContractChart contract={contract} bets={bets} />
-      </Col>
+      <SizedContractChart
+        contract={contract}
+        bets={bets}
+        fullHeight={350}
+        mobileHeight={250}
+      />
     </Col>
   )
 }
@@ -139,7 +182,12 @@ const PseudoNumericOverview = (props: {
           {tradingAllowed(contract) && <BetWidget contract={contract} />}
         </Row>
       </Col>
-      <PseudoNumericContractChart contract={contract} bets={bets} />
+      <SizedContractChart
+        contract={contract}
+        bets={bets}
+        fullHeight={250}
+        mobileHeight={150}
+      />
     </Col>
   )
 }
@@ -153,7 +201,7 @@ export const ContractOverview = (props: {
     case 'BINARY':
       return <BinaryOverview contract={contract} bets={bets} />
     case 'NUMERIC':
-      return <NumericOverview contract={contract} />
+      return <NumericOverview contract={contract} bets={bets} />
     case 'PSEUDO_NUMERIC':
       return <PseudoNumericOverview contract={contract} bets={bets} />
     case 'FREE_RESPONSE':
diff --git a/web/hooks/use-element-width.tsx b/web/hooks/use-element-width.tsx
deleted file mode 100644
index 1c373839..00000000
--- a/web/hooks/use-element-width.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { RefObject, useState, useEffect } from 'react'
-
-// todo: consider consolidation with use-measure-size
-export const useElementWidth = <T extends Element>(ref: RefObject<T>) => {
-  const [width, setWidth] = useState<number>()
-  useEffect(() => {
-    const handleResize = () => {
-      setWidth(ref.current?.clientWidth)
-    }
-    handleResize()
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [ref])
-  return width
-}
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index e925a1f6..cc4bc09d 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -79,7 +79,7 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
 
   const href = `https://${DOMAIN}${contractPath(contract)}`
 
-  const { setElem, height: graphHeight } = useMeasureSize()
+  const { setElem, width: graphWidth, height: graphHeight } = useMeasureSize()
 
   const [betPanelOpen, setBetPanelOpen] = useState(false)
 
@@ -132,7 +132,14 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
       )}
 
       <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>
-        <ContractChart contract={contract} bets={bets} height={graphHeight} />
+        {graphWidth != null && graphHeight != null && (
+          <ContractChart
+            contract={contract}
+            bets={bets}
+            width={graphWidth}
+            height={graphHeight}
+          />
+        )}
       </div>
     </Col>
   )

From dc0b6dc6a6917c2bf6976e0b8a1879056787f0fd Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Fri, 30 Sep 2022 18:01:48 -0700
Subject: [PATCH 03/25] Don't render stuff whenever window size changes (#978)

---
 web/components/amount-input.tsx | 5 ++---
 web/components/bet-panel.tsx    | 8 +-------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index 1c9d1c3b..dc5a6124 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -5,7 +5,7 @@ import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
 import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { useWindowSize } from 'web/hooks/use-window-size'
+import { useIsMobile } from 'web/hooks/use-is-mobile'
 import { Row } from './layout/row'
 
 export function AmountInput(props: {
@@ -36,8 +36,7 @@ export function AmountInput(props: {
     onChange(isInvalid ? undefined : amount)
   }
 
-  const { width } = useWindowSize()
-  const isMobile = (width ?? 0) < 768
+  const isMobile = useIsMobile(768)
 
   return (
     <>
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index e93c0e62..beb7168a 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -47,7 +47,6 @@ import { Modal } from './layout/modal'
 import { Title } from './title'
 import toast from 'react-hot-toast'
 import { CheckIcon } from '@heroicons/react/solid'
-import { useWindowSize } from 'web/hooks/use-window-size'
 
 export function BetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -179,12 +178,7 @@ export function BuyPanel(props: {
   const initialProb = getProbability(contract)
   const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
 
-  const windowSize = useWindowSize()
-  const initialOutcome =
-    windowSize.width && windowSize.width >= 1280 ? 'YES' : undefined
-  const [outcome, setOutcome] = useState<'YES' | 'NO' | undefined>(
-    initialOutcome
-  )
+  const [outcome, setOutcome] = useState<'YES' | 'NO' | undefined>()
   const [betAmount, setBetAmount] = useState<number | undefined>(10)
   const [error, setError] = useState<string | undefined>()
   const [isSubmitting, setIsSubmitting] = useState(false)

From b0b1d72ba61382c2035c8867e735816b0bfaf2f8 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Fri, 30 Sep 2022 20:07:49 -0500
Subject: [PATCH 04/25] Cleaner home page loading!

---
 web/hooks/use-contracts.ts |  56 ++++++++++++++-----
 web/lib/service/algolia.ts |   2 +
 web/pages/home/index.tsx   | 112 ++++++++++++++++++++++---------------
 3 files changed, 112 insertions(+), 58 deletions(-)

diff --git a/web/hooks/use-contracts.ts b/web/hooks/use-contracts.ts
index 11aae65c..7952deba 100644
--- a/web/hooks/use-contracts.ts
+++ b/web/hooks/use-contracts.ts
@@ -8,12 +8,14 @@ import {
   getUserBetContracts,
   getUserBetContractsQuery,
   listAllContracts,
-  trendingContractsQuery,
 } from 'web/lib/firebase/contracts'
 import { QueryClient, useQuery, useQueryClient } from 'react-query'
 import { MINUTE_MS, sleep } from 'common/util/time'
-import { query, limit } from 'firebase/firestore'
-import { dailyScoreIndex } from 'web/lib/service/algolia'
+import {
+  dailyScoreIndex,
+  newIndex,
+  trendingIndex,
+} from 'web/lib/service/algolia'
 import { CPMMBinaryContract } from 'common/contract'
 import { zipObject } from 'lodash'
 
@@ -27,16 +29,50 @@ export const useContracts = () => {
   return contracts
 }
 
+export const useTrendingContracts = (maxContracts: number) => {
+  const { data } = useQuery(['trending-contracts', maxContracts], () =>
+    trendingIndex.search<CPMMBinaryContract>('', {
+      facetFilters: ['isResolved:false'],
+      hitsPerPage: maxContracts,
+    })
+  )
+  if (!data) return undefined
+  return data.hits
+}
+
+export const useNewContracts = (maxContracts: number) => {
+  const { data } = useQuery(['newest-contracts', maxContracts], () =>
+    newIndex.search<CPMMBinaryContract>('', {
+      facetFilters: ['isResolved:false'],
+      hitsPerPage: maxContracts,
+    })
+  )
+  if (!data) return undefined
+  return data.hits
+}
+
+export const useContractsByDailyScoreNotBetOn = (
+  userId: string | null | undefined,
+  maxContracts: number
+) => {
+  const { data } = useQuery(['daily-score', userId, maxContracts], () =>
+    dailyScoreIndex.search<CPMMBinaryContract>('', {
+      facetFilters: ['isResolved:false', `uniqueBettors:-${userId}`],
+      hitsPerPage: maxContracts,
+    })
+  )
+  if (!userId || !data) return undefined
+  return data.hits.filter((c) => c.dailyScore)
+}
+
 export const useContractsByDailyScoreGroups = (
   groupSlugs: string[] | undefined
 ) => {
-  const facetFilters = ['isResolved:false']
-
   const { data } = useQuery(['daily-score', groupSlugs], () =>
     Promise.all(
       (groupSlugs ?? []).map((slug) =>
         dailyScoreIndex.search<CPMMBinaryContract>('', {
-          facetFilters: [...facetFilters, `groupLinks.slug:${slug}`],
+          facetFilters: ['isResolved:false', `groupLinks.slug:${slug}`],
         })
       )
     )
@@ -56,14 +92,6 @@ export const getCachedContracts = async () =>
     staleTime: Infinity,
   })
 
-export const useTrendingContracts = (maxContracts: number) => {
-  const result = useFirestoreQueryData(
-    ['trending-contracts', maxContracts],
-    query(trendingContractsQuery, limit(maxContracts))
-  )
-  return result.data
-}
-
 export const useInactiveContracts = () => {
   const [contracts, setContracts] = useState<Contract[] | undefined>()
 
diff --git a/web/lib/service/algolia.ts b/web/lib/service/algolia.ts
index 29cbd6bf..bdace399 100644
--- a/web/lib/service/algolia.ts
+++ b/web/lib/service/algolia.ts
@@ -14,6 +14,8 @@ export const getIndexName = (sort: string) => {
   return `${indexPrefix}contracts-${sort}`
 }
 
+export const trendingIndex = searchClient.initIndex(getIndexName('score'))
+export const newIndex = searchClient.initIndex(getIndexName('newest'))
 export const probChangeDescendingIndex = searchClient.initIndex(
   getIndexName('prob-change-day')
 )
diff --git a/web/pages/home/index.tsx b/web/pages/home/index.tsx
index 2ddc3026..4ad7f97b 100644
--- a/web/pages/home/index.tsx
+++ b/web/pages/home/index.tsx
@@ -12,7 +12,6 @@ import { Dictionary, sortBy, sum } from 'lodash'
 
 import { Page } from 'web/components/page'
 import { Col } from 'web/components/layout/col'
-import { ContractSearch, SORTS } from 'web/components/contract-search'
 import { User } from 'common/user'
 import { useTracking } from 'web/hooks/use-tracking'
 import { track } from 'web/lib/service/analytics'
@@ -43,7 +42,12 @@ import { isArray, keyBy } from 'lodash'
 import { usePrefetch } from 'web/hooks/use-prefetch'
 import { Title } from 'web/components/title'
 import { CPMMBinaryContract } from 'common/contract'
-import { useContractsByDailyScoreGroups } from 'web/hooks/use-contracts'
+import {
+  useContractsByDailyScoreNotBetOn,
+  useContractsByDailyScoreGroups,
+  useTrendingContracts,
+  useNewContracts,
+} from 'web/hooks/use-contracts'
 import { ProfitBadge } from 'web/components/profit-badge'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 
@@ -71,12 +75,18 @@ export default function Home() {
     }
   }, [user, sections])
 
-  const groups = useMemberGroupsSubscription(user)
+  const trendingContracts = useTrendingContracts(6)
+  const newContracts = useNewContracts(6)
+  const dailyTrendingContracts = useContractsByDailyScoreNotBetOn(user?.id, 6)
 
+  const groups = useMemberGroupsSubscription(user)
   const groupContracts = useContractsByDailyScoreGroups(
     groups?.map((g) => g.slug)
   )
 
+  const isLoading =
+    !user || !trendingContracts || !newContracts || !dailyTrendingContracts
+
   return (
     <Page>
       <Toaster />
@@ -90,11 +100,15 @@ export default function Home() {
           <DailyStats user={user} />
         </Row>
 
-        {!user ? (
+        {isLoading ? (
           <LoadingIndicator />
         ) : (
           <>
-            {sections.map((section) => renderSection(section, user))}
+            {renderSections(user, sections, {
+              score: trendingContracts,
+              newest: newContracts,
+              'daily-trending': dailyTrendingContracts,
+            })}
 
             <TrendingGroupsSection user={user} />
 
@@ -118,8 +132,8 @@ export default function Home() {
 }
 
 const HOME_SECTIONS = [
-  { label: 'Daily movers', id: 'daily-movers' },
   { label: 'Daily trending', id: 'daily-trending' },
+  { label: 'Daily movers', id: 'daily-movers' },
   { label: 'Trending', id: 'score' },
   { label: 'New', id: 'newest' },
 ]
@@ -128,11 +142,7 @@ export const getHomeItems = (sections: string[]) => {
   // Accommodate old home sections.
   if (!isArray(sections)) sections = []
 
-  const items: { id: string; label: string; group?: Group }[] = [
-    ...HOME_SECTIONS,
-  ]
-  const itemsById = keyBy(items, 'id')
-
+  const itemsById = keyBy(HOME_SECTIONS, 'id')
   const sectionItems = filterDefined(sections.map((id) => itemsById[id]))
 
   // Add new home section items to the top.
@@ -140,7 +150,9 @@ export const getHomeItems = (sections: string[]) => {
     ...HOME_SECTIONS.filter((item) => !sectionItems.includes(item))
   )
   // Add unmentioned items to the end.
-  sectionItems.push(...items.filter((item) => !sectionItems.includes(item)))
+  sectionItems.push(
+    ...HOME_SECTIONS.filter((item) => !sectionItems.includes(item))
+  )
 
   return {
     sections: sectionItems,
@@ -148,28 +160,46 @@ export const getHomeItems = (sections: string[]) => {
   }
 }
 
-function renderSection(section: { id: string; label: string }, user: User) {
-  const { id, label } = section
-  if (id === 'daily-movers') {
-    return <DailyMoversSection key={id} userId={user.id} />
+function renderSections(
+  user: User,
+  sections: { id: string; label: string }[],
+  sectionContracts: {
+    'daily-trending': CPMMBinaryContract[]
+    newest: CPMMBinaryContract[]
+    score: CPMMBinaryContract[]
   }
-  if (id === 'daily-trending')
-    return (
-      <SearchSection
-        key={id}
-        label={label}
-        sort={'daily-score'}
-        pill="personal"
-        user={user}
-      />
-    )
-  const sort = SORTS.find((sort) => sort.value === id)
-  if (sort)
-    return (
-      <SearchSection key={id} label={label} sort={sort.value} user={user} />
-    )
-
-  return null
+) {
+  return (
+    <>
+      {sections.map((s) => {
+        const { id, label } = s
+        if (id === 'daily-movers') {
+          return <DailyMoversSection key={id} userId={user.id} />
+        }
+        if (id === 'daily-trending') {
+          return (
+            <ContractsSection
+              key={id}
+              label={label}
+              contracts={sectionContracts[id]}
+              sort="daily-score"
+              showProbChange
+            />
+          )
+        }
+        const contracts =
+          sectionContracts[s.id as keyof typeof sectionContracts]
+        return (
+          <ContractsSection
+            key={id}
+            label={label}
+            contracts={contracts}
+            sort={id === 'daily-trending' ? 'daily-score' : (id as Sort)}
+          />
+        )
+      })}
+    </>
+  )
 }
 
 function renderGroupSections(
@@ -237,13 +267,14 @@ function SectionHeader(props: {
   )
 }
 
-function SearchSection(props: {
+function ContractsSection(props: {
   label: string
-  user: User
+  contracts: CPMMBinaryContract[]
   sort: Sort
   pill?: string
+  showProbChange?: boolean
 }) {
-  const { label, user, sort, pill } = props
+  const { label, contracts, sort, pill, showProbChange } = props
 
   return (
     <Col>
@@ -251,14 +282,7 @@ function SearchSection(props: {
         label={label}
         href={`/search?s=${sort}${pill ? `&p=${pill}` : ''}`}
       />
-      <ContractSearch
-        user={user}
-        defaultSort={sort}
-        defaultPill={pill}
-        noControls
-        maxResults={6}
-        persistPrefix={`home-${sort}`}
-      />
+      <ContractsGrid contracts={contracts} cardUIOptions={{ showProbChange }} />
     </Col>
   )
 }

From 2f3ae5192eff205728ffe3063ffcdf30160d50bb Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Fri, 30 Sep 2022 20:30:45 -0500
Subject: [PATCH 05/25] embed: disable clicking contract details

---
 web/components/contract/contract-details.tsx | 42 +++++++++++++++-----
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index b06c6381..d0aa0ee9 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -183,6 +183,7 @@ export function MarketSubheader(props: {
             contract={contract}
             resolvedDate={resolvedDate}
             isCreator={isCreator}
+            disabled={disabled}
           />
           {!isMobile && (
             <Row className={'gap-1'}>
@@ -200,8 +201,9 @@ export function CloseOrResolveTime(props: {
   contract: Contract
   resolvedDate: any
   isCreator: boolean
+  disabled?: boolean
 }) {
-  const { contract, resolvedDate, isCreator } = props
+  const { contract, resolvedDate, isCreator, disabled } = props
   const { resolutionTime, closeTime } = contract
   if (!!closeTime || !!resolvedDate) {
     return (
@@ -225,6 +227,7 @@ export function CloseOrResolveTime(props: {
               closeTime={closeTime}
               contract={contract}
               isCreator={isCreator ?? false}
+              disabled={disabled}
             />
           </Row>
         )}
@@ -245,7 +248,8 @@ export function MarketGroups(props: {
   return (
     <>
       <Row className="items-center gap-1">
-        <GroupDisplay groupToDisplay={groupToDisplay} />
+        <GroupDisplay groupToDisplay={groupToDisplay} disabled={disabled} />
+
         {!disabled && user && (
           <button
             className="text-greyscale-4 hover:text-greyscale-3"
@@ -330,14 +334,29 @@ export function ExtraMobileContractDetails(props: {
   )
 }
 
-export function GroupDisplay(props: { groupToDisplay?: GroupLink | null }) {
-  const { groupToDisplay } = props
+export function GroupDisplay(props: {
+  groupToDisplay?: GroupLink | null
+  disabled?: boolean
+}) {
+  const { groupToDisplay, disabled } = props
+
   if (groupToDisplay) {
-    return (
+    const groupSection = (
+      <a
+        className={clsx(
+          'bg-greyscale-4 max-w-[140px] truncate whitespace-nowrap rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]',
+          !disabled && 'hover:bg-greyscale-3 cursor-pointer'
+        )}
+      >
+        {groupToDisplay.name}
+      </a>
+    )
+
+    return disabled ? (
+      groupSection
+    ) : (
       <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
-        <a className="bg-greyscale-4 hover:bg-greyscale-3 max-w-[140px] truncate whitespace-nowrap rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]">
-          {groupToDisplay.name}
-        </a>
+        {groupSection}
       </Link>
     )
   } else
@@ -352,8 +371,9 @@ function EditableCloseDate(props: {
   closeTime: number
   contract: Contract
   isCreator: boolean
+  disabled?: boolean
 }) {
-  const { closeTime, contract, isCreator } = props
+  const { closeTime, contract, isCreator, disabled } = props
 
   const dayJsCloseTime = dayjs(closeTime)
   const dayJsNow = dayjs()
@@ -452,8 +472,8 @@ function EditableCloseDate(props: {
         time={closeTime}
       >
         <span
-          className={isCreator ? 'cursor-pointer' : ''}
-          onClick={() => isCreator && setIsEditingCloseTime(true)}
+          className={!disabled && isCreator ? 'cursor-pointer' : ''}
+          onClick={() => !disabled && isCreator && setIsEditingCloseTime(true)}
         >
           {isSameDay ? (
             <span className={'capitalize'}> {fromNow(closeTime)}</span>

From 2f1221f094e4d093bd53c2e5834a96c77a7769f3 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Sat, 1 Oct 2022 00:10:17 -0700
Subject: [PATCH 06/25] Size-aware chart tooltip positioning (#980)

---
 web/components/charts/helpers.tsx | 55 +++++++++++++++++++------------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx
index ea221c80..96115dc0 100644
--- a/web/components/charts/helpers.tsx
+++ b/web/components/charts/helpers.tsx
@@ -16,6 +16,7 @@ import dayjs from 'dayjs'
 import clsx from 'clsx'
 
 import { Contract } from 'common/contract'
+import { useMeasureSize } from 'web/hooks/use-measure-size'
 
 export type Point<X, Y, T = unknown> = { x: X; y: Y; obj?: T }
 
@@ -135,6 +136,7 @@ export const SVGChart = <X, TT>(props: {
 }) => {
   const { children, w, h, xAxis, yAxis, onMouseOver, onSelect, Tooltip } = props
   const [mouse, setMouse] = useState<{ x: number; y: number; data: TT }>()
+  const tooltipMeasure = useMeasureSize()
   const overlayRef = useRef<SVGGElement>(null)
   const innerW = w - MARGIN_X
   const innerH = h - MARGIN_Y
@@ -188,10 +190,18 @@ export const SVGChart = <X, TT>(props: {
   }
 
   return (
-    <div className="relative">
+    <div className="relative overflow-hidden">
       {mouse && Tooltip && (
         <TooltipContainer
-          pos={getTooltipPosition(mouse.x, mouse.y, innerW, innerH)}
+          setElem={tooltipMeasure.setElem}
+          pos={getTooltipPosition(
+            mouse.x,
+            mouse.y,
+            innerW,
+            innerH,
+            tooltipMeasure.width,
+            tooltipMeasure.height
+          )}
         >
           <Tooltip
             xScale={xAxis.scale()}
@@ -227,31 +237,31 @@ export const SVGChart = <X, TT>(props: {
   )
 }
 
-export type TooltipPosition = {
-  top?: number
-  right?: number
-  bottom?: number
-  left?: number
-}
+export type TooltipPosition = { left: number; bottom: number }
 
 export const getTooltipPosition = (
   mouseX: number,
   mouseY: number,
-  w: number,
-  h: number
+  containerWidth: number,
+  containerHeight: number,
+  tooltipWidth?: number,
+  tooltipHeight?: number
 ) => {
-  const result: TooltipPosition = {}
-  if (mouseX <= (3 * w) / 4) {
-    result.left = mouseX + 10 // in the left three quarters
-  } else {
-    result.right = w - mouseX + 10 // in the right quarter
+  let left = mouseX + 12
+  let bottom = containerHeight - mouseY + 12
+  if (tooltipWidth != null) {
+    const overflow = left + tooltipWidth - containerWidth
+    if (overflow > 0) {
+      left -= overflow
+    }
   }
-  if (mouseY <= h / 4) {
-    result.top = mouseY + 10 // in the top quarter
-  } else {
-    result.bottom = h - mouseY + 10 // in the bottom three quarters
+  if (tooltipHeight != null) {
+    const overflow = tooltipHeight - mouseY
+    if (overflow > 0) {
+      bottom -= overflow
+    }
   }
-  return result
+  return { left, bottom }
 }
 
 export type TooltipProps<X, T> = {
@@ -260,15 +270,18 @@ export type TooltipProps<X, T> = {
   xScale: ContinuousScale<X>
   data: T
 }
+
 export type TooltipComponent<X, T> = React.ComponentType<TooltipProps<X, T>>
 export const TooltipContainer = (props: {
+  setElem: (e: HTMLElement | null) => void
   pos: TooltipPosition
   className?: string
   children: React.ReactNode
 }) => {
-  const { pos, className, children } = props
+  const { setElem, pos, className, children } = props
   return (
     <div
+      ref={setElem}
       className={clsx(
         className,
         'pointer-events-none absolute z-10 whitespace-pre rounded border border-gray-200 bg-white/80 p-2 px-4 py-2 text-xs sm:text-sm'

From b53e4acea6a8b61ba0f85a356c485069561a5b46 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sat, 1 Oct 2022 13:37:55 -0500
Subject: [PATCH 07/25] API: Cache markets for 15 seconds at least

---
 web/pages/api/v0/market/[id]/index.ts | 3 ++-
 web/pages/api/v0/market/[id]/lite.ts  | 3 ++-
 web/pages/api/v0/markets.ts           | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/pages/api/v0/market/[id]/index.ts b/web/pages/api/v0/market/[id]/index.ts
index eb238dab..72e7cdbc 100644
--- a/web/pages/api/v0/market/[id]/index.ts
+++ b/web/pages/api/v0/market/[id]/index.ts
@@ -4,6 +4,7 @@ import { listAllComments } from 'web/lib/firebase/comments'
 import { getContractFromId } from 'web/lib/firebase/contracts'
 import { applyCorsHeaders, CORS_UNRESTRICTED } from 'web/lib/api/cors'
 import { FullMarket, ApiError, toFullMarket } from '../../_types'
+import { marketCacheStrategy } from '../../markets'
 
 export default async function handler(
   req: NextApiRequest,
@@ -24,6 +25,6 @@ export default async function handler(
     return
   }
 
-  res.setHeader('Cache-Control', 'max-age=0')
+  res.setHeader('Cache-Control', marketCacheStrategy)
   return res.status(200).json(toFullMarket(contract, comments, bets))
 }
diff --git a/web/pages/api/v0/market/[id]/lite.ts b/web/pages/api/v0/market/[id]/lite.ts
index 7688caa8..6ac28db4 100644
--- a/web/pages/api/v0/market/[id]/lite.ts
+++ b/web/pages/api/v0/market/[id]/lite.ts
@@ -2,6 +2,7 @@ import { NextApiRequest, NextApiResponse } from 'next'
 import { getContractFromId } from 'web/lib/firebase/contracts'
 import { applyCorsHeaders, CORS_UNRESTRICTED } from 'web/lib/api/cors'
 import { ApiError, toLiteMarket, LiteMarket } from '../../_types'
+import { marketCacheStrategy } from '../../markets'
 
 export default async function handler(
   req: NextApiRequest,
@@ -18,6 +19,6 @@ export default async function handler(
     return
   }
 
-  res.setHeader('Cache-Control', 'max-age=0')
+  res.setHeader('Cache-Control', marketCacheStrategy)
   return res.status(200).json(toLiteMarket(contract))
 }
diff --git a/web/pages/api/v0/markets.ts b/web/pages/api/v0/markets.ts
index 78c54772..bad6a145 100644
--- a/web/pages/api/v0/markets.ts
+++ b/web/pages/api/v0/markets.ts
@@ -6,6 +6,8 @@ import { toLiteMarket, ValidationError } from './_types'
 import { z } from 'zod'
 import { validate } from './_validate'
 
+export const marketCacheStrategy = 's-maxage=15, stale-while-revalidate=45'
+
 const queryParams = z
   .object({
     limit: z
@@ -39,7 +41,7 @@ export default async function handler(
   try {
     const contracts = await listAllContracts(limit, before)
     // Serve from Vercel cache, then update. see https://vercel.com/docs/concepts/functions/edge-caching
-    res.setHeader('Cache-Control', 's-maxage=1, stale-while-revalidate')
+    res.setHeader('Cache-Control', marketCacheStrategy)
     res.status(200).json(contracts.map(toLiteMarket))
   } catch (e) {
     res.status(400).json({

From 759685258aa579265b80cfb7a4c98c6683e26eb2 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sat, 1 Oct 2022 13:48:13 -0500
Subject: [PATCH 08/25] Turn off autofocus for amount input. (Fixes FR answer
 bug; IMO better UX)

---
 web/components/amount-input.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index dc5a6124..e7c4ce2a 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -5,7 +5,6 @@ import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
 import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { useIsMobile } from 'web/hooks/use-is-mobile'
 import { Row } from './layout/row'
 
 export function AmountInput(props: {
@@ -36,8 +35,6 @@ export function AmountInput(props: {
     onChange(isInvalid ? undefined : amount)
   }
 
-  const isMobile = useIsMobile(768)
-
   return (
     <>
       <Col className={className}>
@@ -49,7 +46,7 @@ export function AmountInput(props: {
             className={clsx(
               'placeholder:text-greyscale-4 border-greyscale-2 rounded-md pl-9',
               error && 'input-error',
-              isMobile ? 'w-24' : '',
+              'w-24 md:w-auto',
               inputClassName
             )}
             ref={inputRef}
@@ -58,7 +55,6 @@ export function AmountInput(props: {
             inputMode="numeric"
             placeholder="0"
             maxLength={6}
-            autoFocus={!isMobile}
             value={amount ?? ''}
             disabled={disabled}
             onChange={(e) => onAmountChange(e.target.value)}

From 2d6fe308b8e7e008eb25acf000b8588ea3206623 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 14:14:03 -0500
Subject: [PATCH 09/25] better group sort

---
 web/components/groups/group-selector.tsx | 40 ++++++++++++------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/web/components/groups/group-selector.tsx b/web/components/groups/group-selector.tsx
index a04a91af..caeb5f7d 100644
--- a/web/components/groups/group-selector.tsx
+++ b/web/components/groups/group-selector.tsx
@@ -32,27 +32,27 @@ export function GroupSelector(props: {
   const openGroups = useOpenGroups()
   const memberGroups = useMemberGroups(creator?.id)
   const memberGroupIds = memberGroups?.map((g) => g.id) ?? []
-  const availableGroups = openGroups
-    .concat(
-      (memberGroups ?? []).filter(
-        (g) => !openGroups.map((og) => og.id).includes(g.id)
-      )
-    )
-    .filter((group) => !ignoreGroupIds?.includes(group.id))
-    .sort((a, b) => b.totalContracts - a.totalContracts)
-    // put the groups the user is a member of first
-    .sort((a, b) => {
-      if (memberGroupIds.includes(a.id)) {
-        return -1
-      }
-      if (memberGroupIds.includes(b.id)) {
-        return 1
-      }
-      return 0
-    })
 
-  const filteredGroups = availableGroups.filter((group) =>
-    searchInAny(query, group.name)
+  const sortGroups = (groups: Group[]) =>
+    groups.sort(
+      (a, b) =>
+        // weight group higher if user is a member
+        (memberGroupIds.includes(b.id) ? 5 : 1) * b.totalContracts -
+        (memberGroupIds.includes(a.id) ? 5 : 1) * a.totalContracts
+    )
+
+  const availableGroups = sortGroups(
+    openGroups
+      .concat(
+        (memberGroups ?? []).filter(
+          (g) => !openGroups.map((og) => og.id).includes(g.id)
+        )
+      )
+      .filter((group) => !ignoreGroupIds?.includes(group.id))
+  )
+
+  const filteredGroups = sortGroups(
+    availableGroups.filter((group) => searchInAny(query, group.name))
   )
 
   if (!showSelector || !creator) {

From 0844e5620a76df2d0bb65257f3e29ae501269a6a Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 14:30:31 -0500
Subject: [PATCH 10/25] create: remove visilbity section

---
 web/pages/create.tsx | 72 ++++++++++++++++++++++----------------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index f5d1c605..03b90d7c 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -280,25 +280,27 @@ export function NewContract(props: {
       <label className="label">
         <span className="mb-1">Answer type</span>
       </label>
-      <ChoicesToggleGroup
-        currentChoice={outcomeType}
-        setChoice={(choice) => {
-          if (choice === 'FREE_RESPONSE')
-            setMarketInfoText(
-              'Users can submit their own answers to this market.'
-            )
-          else setMarketInfoText('')
-          setOutcomeType(choice as outcomeType)
-        }}
-        choicesMap={{
-          'Yes / No': 'BINARY',
-          // 'Multiple choice': 'MULTIPLE_CHOICE',
-          'Free response': 'FREE_RESPONSE',
-          // Numeric: 'PSEUDO_NUMERIC',
-        }}
-        isSubmitting={isSubmitting}
-        className={'col-span-4'}
-      />
+      <Row>
+        <ChoicesToggleGroup
+          currentChoice={outcomeType}
+          setChoice={(choice) => {
+            if (choice === 'FREE_RESPONSE')
+              setMarketInfoText(
+                'Users can submit their own answers to this market.'
+              )
+            else setMarketInfoText('')
+            setOutcomeType(choice as outcomeType)
+          }}
+          choicesMap={{
+            'Yes / No': 'BINARY',
+            // 'Multiple choice': 'MULTIPLE_CHOICE',
+            'Free response': 'FREE_RESPONSE',
+            // Numeric: 'PSEUDO_NUMERIC',
+          }}
+          isSubmitting={isSubmitting}
+          className={'col-span-4'}
+        />
+      </Row>
       {marketInfoText && (
         <div className="mt-3 ml-1 text-sm text-indigo-700">
           {marketInfoText}
@@ -390,23 +392,7 @@ export function NewContract(props: {
         </>
       )}
 
-      <div className="form-control mb-1 items-start gap-1">
-        <label className="label gap-2">
-          <span className="mb-1">Visibility</span>
-          <InfoTooltip text="Whether the market will be listed on the home page." />
-        </label>
-        <ChoicesToggleGroup
-          currentChoice={visibility}
-          setChoice={(choice) => setVisibility(choice as visibility)}
-          choicesMap={{
-            Public: 'public',
-            Unlisted: 'unlisted',
-          }}
-          isSubmitting={isSubmitting}
-        />
-      </div>
-
-      <Spacer h={6} />
+      <Spacer h={4} />
 
       <Row className={'items-end gap-x-2'}>
         <GroupSelector
@@ -421,6 +407,20 @@ export function NewContract(props: {
           </SiteLink>
         )}
       </Row>
+
+      <Row className="form-control my-2 items-center gap-2 text-sm">
+        <span>Display this market on homepage</span>
+        <input
+          type="checkbox"
+          checked={visibility === 'public'}
+          disabled={isSubmitting}
+          className="cursor-pointer"
+          onChange={(e) =>
+            setVisibility(e.target.checked ? 'public' : 'unlisted')
+          }
+        />
+      </Row>
+
       <Spacer h={6} />
 
       <div className="form-control mb-1 items-start">

From aeeb47bdbee6e3f55ef66175e538538e0ace0c1e Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 15:06:09 -0500
Subject: [PATCH 11/25] don't block on tipping

---
 web/components/contract/like-market-button.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/components/contract/like-market-button.tsx b/web/components/contract/like-market-button.tsx
index 7e0c765a..b655f244 100644
--- a/web/components/contract/like-market-button.tsx
+++ b/web/components/contract/like-market-button.tsx
@@ -1,6 +1,6 @@
 import { HeartIcon } from '@heroicons/react/outline'
 import { Button } from 'web/components/button'
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Contract } from 'common/contract'
 import { User } from 'common/user'
 import { useUserLikes } from 'web/hooks/use-likes'
@@ -20,20 +20,27 @@ export function LikeMarketButton(props: {
   user: User | null | undefined
 }) {
   const { contract, user } = props
+
   const tips = useMarketTipTxns(contract.id).filter(
     (txn) => txn.fromId === user?.id
   )
   const totalTipped = useMemo(() => {
     return sum(tips.map((tip) => tip.amount))
   }, [tips])
+
   const likes = useUserLikes(user?.id)
+
+  const [isLiking, setIsLiking] = useState(false)
+
   const userLikedContractIds = likes
     ?.filter((l) => l.type === 'contract')
     .map((l) => l.id)
 
   const onLike = async () => {
     if (!user) return firebaseLogin()
-    await likeContract(user, contract)
+
+    setIsLiking(true)
+    likeContract(user, contract).catch(() => setIsLiking(false))
     toast(`You tipped ${contract.creatorName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
   }
 
@@ -56,7 +63,8 @@ export function LikeMarketButton(props: {
               'h-5 w-5 sm:h-6 sm:w-6',
               totalTipped > 0 ? 'mr-2' : '',
               user &&
-                (userLikedContractIds?.includes(contract.id) ||
+                (isLiking ||
+                  userLikedContractIds?.includes(contract.id) ||
                   (!likes && contract.likedByUserIds?.includes(user.id)))
                 ? 'fill-red-500 text-red-500'
                 : ''

From cb613705e901eb50a3112140452e78571ec1fdf6 Mon Sep 17 00:00:00 2001
From: mantikoros <95266179+mantikoros@users.noreply.github.com>
Date: Sat, 1 Oct 2022 15:51:08 -0500
Subject: [PATCH 12/25] Consistent tips (#984)

* consistent tip button

* hide tips for self

* prettier
---
 web/components/button.tsx                     |  4 +-
 .../contract/like-market-button.tsx           | 57 +++---------
 web/components/contract/tip-button.tsx        | 57 ++++++++++++
 web/components/feed/feed-comments.tsx         |  8 +-
 web/components/tipper.tsx                     | 90 ++++---------------
 web/posts/post-comments.tsx                   |  2 +-
 6 files changed, 94 insertions(+), 124 deletions(-)
 create mode 100644 web/components/contract/tip-button.tsx

diff --git a/web/components/button.tsx b/web/components/button.tsx
index 51e25ea1..ecd8e1c7 100644
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@@ -46,7 +46,6 @@ export function Button(props: {
     <button
       type={type}
       className={clsx(
-        className,
         'font-md items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
         sizeClasses,
         color === 'green' &&
@@ -66,7 +65,8 @@ export function Button(props: {
         color === 'gray-white' &&
           'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
         color === 'highlight-blue' &&
-          'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
+          'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none',
+        className
       )}
       disabled={disabled}
       onClick={onClick}
diff --git a/web/components/contract/like-market-button.tsx b/web/components/contract/like-market-button.tsx
index b655f244..c8eb4d0b 100644
--- a/web/components/contract/like-market-button.tsx
+++ b/web/components/contract/like-market-button.tsx
@@ -1,5 +1,3 @@
-import { HeartIcon } from '@heroicons/react/outline'
-import { Button } from 'web/components/button'
 import React, { useMemo, useState } from 'react'
 import { Contract } from 'common/contract'
 import { User } from 'common/user'
@@ -8,12 +6,10 @@ import toast from 'react-hot-toast'
 import { formatMoney } from 'common/util/format'
 import { likeContract } from 'web/lib/firebase/likes'
 import { LIKE_TIP_AMOUNT } from 'common/like'
-import clsx from 'clsx'
-import { Col } from 'web/components/layout/col'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { useMarketTipTxns } from 'web/hooks/use-tip-txns'
 import { sum } from 'lodash'
-import { Tooltip } from '../tooltip'
+import { TipButton } from './tip-button'
 
 export function LikeMarketButton(props: {
   contract: Contract
@@ -45,45 +41,16 @@ export function LikeMarketButton(props: {
   }
 
   return (
-    <Tooltip
-      text={`Tip ${formatMoney(LIKE_TIP_AMOUNT)}`}
-      placement="bottom"
-      noTap
-      noFade
-    >
-      <Button
-        size={'sm'}
-        className={'max-w-xs self-center'}
-        color={'gray-white'}
-        onClick={onLike}
-      >
-        <Col className={'relative items-center sm:flex-row'}>
-          <HeartIcon
-            className={clsx(
-              'h-5 w-5 sm:h-6 sm:w-6',
-              totalTipped > 0 ? 'mr-2' : '',
-              user &&
-                (isLiking ||
-                  userLikedContractIds?.includes(contract.id) ||
-                  (!likes && contract.likedByUserIds?.includes(user.id)))
-                ? 'fill-red-500 text-red-500'
-                : ''
-            )}
-          />
-          {totalTipped > 0 && (
-            <div
-              className={clsx(
-                'bg-greyscale-6 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
-                totalTipped > 99
-                  ? 'text-[0.4rem] sm:text-[0.5rem]'
-                  : 'sm:text-2xs text-[0.5rem]'
-              )}
-            >
-              {totalTipped}
-            </div>
-          )}
-        </Col>
-      </Button>
-    </Tooltip>
+    <TipButton
+      onClick={onLike}
+      tipAmount={LIKE_TIP_AMOUNT}
+      totalTipped={totalTipped}
+      userTipped={
+        !!user &&
+        (isLiking ||
+          userLikedContractIds?.includes(contract.id) ||
+          (!likes && !!contract.likedByUserIds?.includes(user.id)))
+      }
+    />
   )
 }
diff --git a/web/components/contract/tip-button.tsx b/web/components/contract/tip-button.tsx
new file mode 100644
index 00000000..79059195
--- /dev/null
+++ b/web/components/contract/tip-button.tsx
@@ -0,0 +1,57 @@
+import { HeartIcon } from '@heroicons/react/outline'
+import { Button } from 'web/components/button'
+import { formatMoney } from 'common/util/format'
+import clsx from 'clsx'
+import { Col } from 'web/components/layout/col'
+import { Tooltip } from '../tooltip'
+
+export function TipButton(props: {
+  tipAmount: number
+  totalTipped: number
+  onClick: () => void
+  userTipped: boolean
+  isCompact?: boolean
+  disabled?: boolean
+}) {
+  const { tipAmount, totalTipped, userTipped, isCompact, onClick, disabled } =
+    props
+
+  return (
+    <Tooltip
+      text={`Tip ${formatMoney(tipAmount)}`}
+      placement="bottom"
+      noTap
+      noFade
+    >
+      <Button
+        size={'sm'}
+        className={clsx('max-w-xs self-center', isCompact && 'px-0 py-0')}
+        color={'gray-white'}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        <Col className={'relative items-center sm:flex-row'}>
+          <HeartIcon
+            className={clsx(
+              'h-5 w-5 sm:h-6 sm:w-6',
+              totalTipped > 0 ? 'mr-2' : '',
+              userTipped ? 'fill-red-500 text-red-500' : ''
+            )}
+          />
+          {totalTipped > 0 && (
+            <div
+              className={clsx(
+                'bg-greyscale-6 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
+                totalTipped > 99
+                  ? 'text-[0.4rem] sm:text-[0.5rem]'
+                  : 'sm:text-2xs text-[0.5rem]'
+              )}
+            >
+              {totalTipped}
+            </div>
+          )}
+        </Col>
+      </Button>
+    </Tooltip>
+  )
+}
diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
index 20d124f8..b9387a03 100644
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@@ -177,10 +177,6 @@ export function FeedComment(props: {
           smallImage
         />
         <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
-          {tips && <Tipper comment={comment} tips={tips} />}
-          {(contract.openCommentBounties ?? 0) > 0 && (
-            <AwardBountyButton comment={comment} contract={contract} />
-          )}
           {onReplyClick && (
             <button
               className="font-bold hover:underline"
@@ -189,6 +185,10 @@ export function FeedComment(props: {
               Reply
             </button>
           )}
+          {tips && <Tipper comment={comment} tips={tips} />}
+          {(contract.openCommentBounties ?? 0) > 0 && (
+            <AwardBountyButton comment={comment} contract={contract} />
+          )}
         </Row>
       </div>
     </Row>
diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx
index 1dcb0f05..a9c35937 100644
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@@ -1,20 +1,14 @@
-import {
-  ChevronDoubleRightIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from '@heroicons/react/solid'
-import clsx from 'clsx'
+import { debounce } from 'lodash'
+import { useEffect, useRef, useState } from 'react'
+
 import { Comment } from 'common/comment'
 import { User } from 'common/user'
-import { formatMoney } from 'common/util/format'
-import { debounce, sum } from 'lodash'
-import { useEffect, useRef, useState } from 'react'
 import { CommentTips } from 'web/hooks/use-tip-txns'
 import { useUser } from 'web/hooks/use-user'
 import { transact } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
+import { TipButton } from './contract/tip-button'
 import { Row } from './layout/row'
-import { Tooltip } from './tooltip'
 
 const TIP_SIZE = 10
 
@@ -26,6 +20,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
   const savedTip = tips[myId] ?? 0
 
   const [localTip, setLocalTip] = useState(savedTip)
+
   // listen for user being set
   const initialized = useRef(false)
   useEffect(() => {
@@ -35,8 +30,6 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
     }
   }, [tips, myId])
 
-  const total = sum(Object.values(tips)) - savedTip + localTip
-
   // declare debounced function only on first render
   const [saveTip] = useState(() =>
     debounce(async (user: User, comment: Comment, change: number) => {
@@ -80,69 +73,22 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
     me && saveTip(me, comment, localTip - savedTip + delta)
   }
 
-  const canDown = me && localTip > savedTip
-  const canUp = me && me.id !== comment.userId && me.balance >= localTip + 5
+  if (me && comment.userId === me.id) {
+    return <></>
+  }
+
+  const canUp = me && me.balance >= localTip + TIP_SIZE
+
   return (
     <Row className="items-center gap-0.5">
-      <DownTip onClick={canDown ? () => addTip(-TIP_SIZE) : undefined} />
-      <span className="font-bold">{Math.floor(total)}</span>
-      <UpTip
-        onClick={canUp ? () => addTip(+TIP_SIZE) : undefined}
-        value={localTip}
+      <TipButton
+        tipAmount={TIP_SIZE}
+        totalTipped={localTip}
+        onClick={() => addTip(+TIP_SIZE)}
+        userTipped={localTip > 0}
+        disabled={!canUp}
+        isCompact
       />
-      {localTip === 0 ? (
-        ''
-      ) : (
-        <span
-          className={clsx(
-            'ml-1 font-semibold',
-            localTip > 0 ? 'text-primary' : 'text-red-400'
-          )}
-        >
-          ({formatMoney(localTip)} tip)
-        </span>
-      )}
     </Row>
   )
 }
-
-function DownTip(props: { onClick?: () => void }) {
-  const { onClick } = props
-  return (
-    <Tooltip
-      className="h-6 w-6"
-      placement="bottom"
-      text={onClick && `-${formatMoney(TIP_SIZE)}`}
-      noTap
-    >
-      <button
-        className="hover:text-red-600 disabled:text-gray-100"
-        disabled={!onClick}
-        onClick={onClick}
-      >
-        <ChevronLeftIcon className="h-6 w-6" />
-      </button>
-    </Tooltip>
-  )
-}
-
-function UpTip(props: { onClick?: () => void; value: number }) {
-  const { onClick, value } = props
-  const IconKind = value > TIP_SIZE ? ChevronDoubleRightIcon : ChevronRightIcon
-  return (
-    <Tooltip
-      className="h-6 w-6"
-      placement="bottom"
-      text={onClick && `Tip ${formatMoney(TIP_SIZE)}`}
-      noTap
-    >
-      <button
-        className="hover:text-primary disabled:text-gray-100"
-        disabled={!onClick}
-        onClick={onClick}
-      >
-        <IconKind className={clsx('h-6 w-6', value ? 'text-primary' : '')} />
-      </button>
-    </Tooltip>
-  )
-}
diff --git a/web/posts/post-comments.tsx b/web/posts/post-comments.tsx
index f1d50a29..74fbb300 100644
--- a/web/posts/post-comments.tsx
+++ b/web/posts/post-comments.tsx
@@ -154,7 +154,6 @@ export function PostComment(props: {
           smallImage
         />
         <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
-          <Tipper comment={comment} tips={tips ?? {}} />
           {onReplyClick && (
             <button
               className="font-bold hover:underline"
@@ -163,6 +162,7 @@ export function PostComment(props: {
               Reply
             </button>
           )}
+          <Tipper comment={comment} tips={tips ?? {}} />
         </Row>
       </div>
     </Row>

From a445d9b7fa424685f9067c453480c0337735dcc2 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 15:54:14 -0500
Subject: [PATCH 13/25] make tip button green

---
 web/components/contract/tip-button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/components/contract/tip-button.tsx b/web/components/contract/tip-button.tsx
index 79059195..086fab06 100644
--- a/web/components/contract/tip-button.tsx
+++ b/web/components/contract/tip-button.tsx
@@ -33,15 +33,15 @@ export function TipButton(props: {
         <Col className={'relative items-center sm:flex-row'}>
           <HeartIcon
             className={clsx(
-              'h-5 w-5 sm:h-6 sm:w-6',
+              'h-5 w-5 text-green-700 sm:h-6 sm:w-6',
               totalTipped > 0 ? 'mr-2' : '',
-              userTipped ? 'fill-red-500 text-red-500' : ''
+              userTipped ? 'fill-green-700 text-green-700' : ''
             )}
           />
           {totalTipped > 0 && (
             <div
               className={clsx(
-                'bg-greyscale-6 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
+                'bg-greyscale-5 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
                 totalTipped > 99
                   ? 'text-[0.4rem] sm:text-[0.5rem]'
                   : 'sm:text-2xs text-[0.5rem]'

From 09e4864b321f9232544583f107b60abd15da6c18 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 15:57:47 -0500
Subject: [PATCH 14/25] consistent tip amount (M$10)

---
 common/like.ts            | 2 +-
 web/components/tipper.tsx | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/common/like.ts b/common/like.ts
index 38b25dad..7ec14726 100644
--- a/common/like.ts
+++ b/common/like.ts
@@ -5,4 +5,4 @@ export type Like = {
   createdTime: number
   tipTxnId?: string // only holds most recent tip txn id
 }
-export const LIKE_TIP_AMOUNT = 5
+export const LIKE_TIP_AMOUNT = 10
diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx
index a9c35937..1f6b6e53 100644
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@@ -9,8 +9,7 @@ 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'
-
-const TIP_SIZE = 10
+import { LIKE_TIP_AMOUNT } from 'common/like'
 
 export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
   const { comment, tips } = prop
@@ -77,14 +76,14 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
     return <></>
   }
 
-  const canUp = me && me.balance >= localTip + TIP_SIZE
+  const canUp = me && me.balance >= localTip + LIKE_TIP_AMOUNT
 
   return (
     <Row className="items-center gap-0.5">
       <TipButton
-        tipAmount={TIP_SIZE}
+        tipAmount={LIKE_TIP_AMOUNT}
         totalTipped={localTip}
-        onClick={() => addTip(+TIP_SIZE)}
+        onClick={() => addTip(+LIKE_TIP_AMOUNT)}
         userTipped={localTip > 0}
         disabled={!canUp}
         isCompact

From 670c6faea8f1b17b92fdb5e01b7d63efa60792e8 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 16:00:39 -0500
Subject: [PATCH 15/25] tip button: remove border color

---
 web/components/contract/tip-button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/contract/tip-button.tsx b/web/components/contract/tip-button.tsx
index 086fab06..c6eb54ab 100644
--- a/web/components/contract/tip-button.tsx
+++ b/web/components/contract/tip-button.tsx
@@ -33,7 +33,7 @@ export function TipButton(props: {
         <Col className={'relative items-center sm:flex-row'}>
           <HeartIcon
             className={clsx(
-              'h-5 w-5 text-green-700 sm:h-6 sm:w-6',
+              'h-5 w-5 sm:h-6 sm:w-6',
               totalTipped > 0 ? 'mr-2' : '',
               userTipped ? 'fill-green-700 text-green-700' : ''
             )}

From fac87f8e0c82877a68bf4bcd6a933af7afa630e0 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 16:10:17 -0500
Subject: [PATCH 16/25] tips: display total

---
 web/components/tipper.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx
index 1f6b6e53..a8c7cb4e 100644
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@@ -1,4 +1,4 @@
-import { debounce } from 'lodash'
+import { debounce, sum } from 'lodash'
 import { useEffect, useRef, useState } from 'react'
 
 import { Comment } from 'common/comment'
@@ -29,6 +29,8 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
     }
   }, [tips, myId])
 
+  const total = sum(Object.values(tips)) - savedTip + localTip
+
   // declare debounced function only on first render
   const [saveTip] = useState(() =>
     debounce(async (user: User, comment: Comment, change: number) => {
@@ -82,7 +84,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
     <Row className="items-center gap-0.5">
       <TipButton
         tipAmount={LIKE_TIP_AMOUNT}
-        totalTipped={localTip}
+        totalTipped={total}
         onClick={() => addTip(+LIKE_TIP_AMOUNT)}
         userTipped={localTip > 0}
         disabled={!canUp}

From 2baae33a7706a8a89b83e1503f0d25a05b510ba5 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 16:16:34 -0500
Subject: [PATCH 17/25] show market tip total

---
 web/components/contract/extra-contract-actions-row.tsx | 4 +---
 web/components/contract/like-market-button.tsx         | 6 +++---
 web/components/contract/tip-button.tsx                 | 8 ++++++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/components/contract/extra-contract-actions-row.tsx b/web/components/contract/extra-contract-actions-row.tsx
index 8f4b5579..d9474806 100644
--- a/web/components/contract/extra-contract-actions-row.tsx
+++ b/web/components/contract/extra-contract-actions-row.tsx
@@ -18,9 +18,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
   return (
     <Row>
       <FollowMarketButton contract={contract} user={user} />
-      {user?.id !== contract.creatorId && (
-        <LikeMarketButton contract={contract} user={user} />
-      )}
+      <LikeMarketButton contract={contract} user={user} />
       <Tooltip text="Share" placement="bottom" noTap noFade>
         <Button
           size="sm"
diff --git a/web/components/contract/like-market-button.tsx b/web/components/contract/like-market-button.tsx
index c8eb4d0b..d31b630e 100644
--- a/web/components/contract/like-market-button.tsx
+++ b/web/components/contract/like-market-button.tsx
@@ -17,9 +17,8 @@ export function LikeMarketButton(props: {
 }) {
   const { contract, user } = props
 
-  const tips = useMarketTipTxns(contract.id).filter(
-    (txn) => txn.fromId === user?.id
-  )
+  const tips = useMarketTipTxns(contract.id)
+
   const totalTipped = useMemo(() => {
     return sum(tips.map((tip) => tip.amount))
   }, [tips])
@@ -51,6 +50,7 @@ export function LikeMarketButton(props: {
           userLikedContractIds?.includes(contract.id) ||
           (!likes && !!contract.likedByUserIds?.includes(user.id)))
       }
+      disabled={contract.creatorId === user?.id}
     />
   )
 }
diff --git a/web/components/contract/tip-button.tsx b/web/components/contract/tip-button.tsx
index c6eb54ab..0315c676 100644
--- a/web/components/contract/tip-button.tsx
+++ b/web/components/contract/tip-button.tsx
@@ -18,14 +18,18 @@ export function TipButton(props: {
 
   return (
     <Tooltip
-      text={`Tip ${formatMoney(tipAmount)}`}
+      text={disabled ? 'Tips' : `Tip ${formatMoney(tipAmount)}`}
       placement="bottom"
       noTap
       noFade
     >
       <Button
         size={'sm'}
-        className={clsx('max-w-xs self-center', isCompact && 'px-0 py-0')}
+        className={clsx(
+          'max-w-xs self-center',
+          isCompact && 'px-0 py-0',
+          disabled && 'hover:bg-inherit'
+        )}
         color={'gray-white'}
         onClick={onClick}
         disabled={disabled}

From 0b0b84a6ad7da0b5d5fa3f4f53f3bcf29d9d18af Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 1 Oct 2022 16:22:19 -0500
Subject: [PATCH 18/25] show tips on own comments again

---
 web/components/tipper.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx
index a8c7cb4e..9d5cac84 100644
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@@ -74,11 +74,8 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
     me && saveTip(me, comment, localTip - savedTip + delta)
   }
 
-  if (me && comment.userId === me.id) {
-    return <></>
-  }
-
-  const canUp = me && me.balance >= localTip + LIKE_TIP_AMOUNT
+  const canUp =
+    me && comment.userId !== me.id && me.balance >= localTip + LIKE_TIP_AMOUNT
 
   return (
     <Row className="items-center gap-0.5">

From 1d645e5ff88989773f9779f029932d6afed04836 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Sun, 2 Oct 2022 08:52:53 -0700
Subject: [PATCH 19/25] trim copy on sort & bounty tooltips

---
 web/components/contract/bountied-contract-badge.tsx | 12 +++++++++---
 web/components/contract/contract-tabs.tsx           |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/components/contract/bountied-contract-badge.tsx b/web/components/contract/bountied-contract-badge.tsx
index 72dc70e1..79589990 100644
--- a/web/components/contract/bountied-contract-badge.tsx
+++ b/web/components/contract/bountied-contract-badge.tsx
@@ -22,7 +22,10 @@ export function BountiedContractSmallBadge(props: {
 
   return (
     <Tooltip
-      text={CommentBountiesTooltipText(openCommentBounties)}
+      text={CommentBountiesTooltipText(
+        contract.creatorName,
+        openCommentBounties
+      )}
       placement="bottom"
     >
       <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
@@ -33,8 +36,11 @@ export function BountiedContractSmallBadge(props: {
   )
 }
 
-export const CommentBountiesTooltipText = (openCommentBounties: number) =>
-  `The creator of this market may award ${formatMoney(
+export const CommentBountiesTooltipText = (
+  creator: string,
+  openCommentBounties: number
+) =>
+  `${creator} may award ${formatMoney(
     COMMENT_BOUNTY_AMOUNT
   )} for good comments. ${formatMoney(
     openCommentBounties
diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index a4287b5c..5a4efb94 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -159,7 +159,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
             <Tooltip
               text={
                 sort === 'Best'
-                  ? 'Comments with tips or bounties will be shown first. Your comments made within the last 10 minutes will temporarily appear (to you) first.'
+                  ? 'Highest tips + bounties first. Your new comments briefly appear to you first.'
                   : ''
               }
             >

From fd31b7eaca20c8cb049600e229cc400b8f1c3c35 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sun, 2 Oct 2022 12:50:49 -0500
Subject: [PATCH 20/25] set comment sort default to newest

---
 web/components/contract/contract-tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index 5a4efb94..1a67d86a 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -75,7 +75,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
   const { contract } = props
   const tips = useTipTxns({ contractId: contract.id })
   const comments = useComments(contract.id) ?? props.comments
-  const [sort, setSort] = useState<'Newest' | 'Best'>('Best')
+  const [sort, setSort] = useState<'Newest' | 'Best'>('Newest')
   const me = useUser()
   if (comments == null) {
     return <LoadingIndicator />

From 57b592b5aa9254bcb8c2851ac299496fbcab252b Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sun, 2 Oct 2022 12:55:58 -0500
Subject: [PATCH 21/25] show toast after comment tips

---
 web/components/tipper.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx
index 9d5cac84..b201f946 100644
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@@ -1,5 +1,6 @@
-import { debounce, sum } from 'lodash'
 import { useEffect, useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { debounce, sum } from 'lodash'
 
 import { Comment } from 'common/comment'
 import { User } from 'common/user'
@@ -10,6 +11,7 @@ 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 { formatMoney } from 'common/util/format'
 
 export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
   const { comment, tips } = prop
@@ -72,6 +74,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
   const addTip = (delta: number) => {
     setLocalTip(localTip + delta)
     me && saveTip(me, comment, localTip - savedTip + delta)
+    toast(`You tipped ${comment.userName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
   }
 
   const canUp =

From 4c2f9011d02d960feadb7c91978a04e99e715297 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sun, 2 Oct 2022 13:39:19 -0500
Subject: [PATCH 22/25] track embed hostname

---
 web/pages/embed/[username]/[contractSlug].tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index cc4bc09d..f578631f 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -1,7 +1,7 @@
 import { Bet } from 'common/bet'
 import { Contract } from 'common/contract'
 import { DOMAIN } from 'common/envs/constants'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { BetInline } from 'web/components/bet-inline'
 import { Button } from 'web/components/button'
 import {
@@ -19,7 +19,6 @@ import { SiteLink } from 'web/components/site-link'
 import { useContractWithPreload } from 'web/hooks/use-contract'
 import { useMeasureSize } from 'web/hooks/use-measure-size'
 import { fromPropz, usePropz } from 'web/hooks/use-propz'
-import { useTracking } from 'web/hooks/use-tracking'
 import { listAllBets } from 'web/lib/firebase/bets'
 import {
   contractPath,
@@ -27,6 +26,7 @@ import {
   tradingAllowed,
 } from 'web/lib/firebase/contracts'
 import Custom404 from '../../404'
+import { track } from 'web/lib/service/analytics'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -68,11 +68,14 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
   const { contract, bets } = props
   const { question, outcomeType } = contract
 
-  useTracking('view market embed', {
-    slug: contract.slug,
-    contractId: contract.id,
-    creatorId: contract.creatorId,
-  })
+  useEffect(() => {
+    track('view market embed', {
+      slug: contract.slug,
+      contractId: contract.id,
+      creatorId: contract.creatorId,
+      hostname: window.location.hostname,
+    })
+  }, [contract.creatorId, contract.id, contract.slug])
 
   const isBinary = outcomeType === 'BINARY'
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'

From 290a34bc640bfbc29c0a539ff56db43c24754e4f Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sun, 2 Oct 2022 13:39:29 -0500
Subject: [PATCH 23/25] useTracking

---
 web/hooks/use-tracking.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/hooks/use-tracking.ts b/web/hooks/use-tracking.ts
index e62209c0..3d1d97ba 100644
--- a/web/hooks/use-tracking.ts
+++ b/web/hooks/use-tracking.ts
@@ -1,5 +1,5 @@
-import { track } from '@amplitude/analytics-browser'
 import { useEffect } from 'react'
+import { track } from 'web/lib/service/analytics'
 import { inIframe } from './use-is-iframe'
 
 export const useTracking = (
@@ -10,5 +10,5 @@ export const useTracking = (
   useEffect(() => {
     if (excludeIframe && inIframe()) return
     track(eventName, eventProperties)
-  }, [])
+  }, [eventName, eventProperties, excludeIframe])
 }

From af66d94c84b49a8e506af66d0166cd80adc1ab36 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sun, 2 Oct 2022 13:42:43 -0500
Subject: [PATCH 24/25] Manifold labs

---
 web/pages/labs/index.tsx | 43 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 web/pages/labs/index.tsx

diff --git a/web/pages/labs/index.tsx b/web/pages/labs/index.tsx
new file mode 100644
index 00000000..6ea861a3
--- /dev/null
+++ b/web/pages/labs/index.tsx
@@ -0,0 +1,43 @@
+import Masonry from 'react-masonry-css'
+import { Page } from 'web/components/page'
+import { SiteLink } from 'web/components/site-link'
+import { Title } from 'web/components/title'
+
+export default function LabsPage() {
+  return (
+    <Page>
+      <Title text="Manifold Labs" />
+
+      <Masonry
+        breakpointCols={{ default: 2, 768: 1 }}
+        className="-ml-4 flex w-auto"
+        columnClassName="pl-4 bg-clip-padding"
+      >
+        <LabCard
+          title="Dating docs"
+          description="Browse dating docs or create your own"
+          href="/date-docs"
+        />
+      </Masonry>
+    </Page>
+  )
+}
+
+const LabCard = (props: {
+  title: string
+  description: string
+  href: string
+}) => {
+  const { title, description, href } = props
+  return (
+    <SiteLink
+      href={href}
+      className="group flex h-full w-full flex-col rounded-lg bg-white p-4 shadow-md transition-shadow duration-200 hover:no-underline hover:shadow-lg"
+    >
+      <h3 className="text-lg font-semibold group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
+        {title}
+      </h3>
+      <p className="mt-2 text-gray-600">{description}</p>
+    </SiteLink>
+  )
+}

From 33dfce3e160d01bdb0b64bca26bb8ef172872038 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sun, 2 Oct 2022 13:43:14 -0500
Subject: [PATCH 25/25] Remove dating docs from More menu

---
 web/components/nav/sidebar.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 71842559..b0a9862b 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -164,7 +164,6 @@ function getMoreDesktopNavigation(user?: User | null) {
       { name: 'Charity', href: '/charity' },
       { name: 'Send M$', href: '/links' },
       { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
-      { name: 'Dating docs', href: '/date-docs' },
       { name: 'Help & About', href: 'https://help.manifold.markets/' },
       {
         name: 'Sign out',
@@ -227,7 +226,6 @@ function getMoreMobileNav() {
       { name: 'Charity', href: '/charity' },
       { name: 'Send M$', href: '/links' },
       { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
-      { name: 'Dating docs', href: '/date-docs' },
     ],
     signOut
   )