diff --git a/web/components/contract/prob-change-table.tsx b/web/components/contract/prob-change-table.tsx
new file mode 100644
index 00000000..9f1f171d
--- /dev/null
+++ b/web/components/contract/prob-change-table.tsx
@@ -0,0 +1,72 @@
+import clsx from 'clsx'
+import { contractPath } from 'web/lib/firebase/contracts'
+import { CPMMContract } from 'common/contract'
+import { formatPercent } from 'common/util/format'
+import { useProbChanges } from 'web/hooks/use-prob-changes'
+import { SiteLink } from '../site-link'
+
+export function ProbChangeTable(props: { userId: string | undefined }) {
+ const { userId } = props
+
+ const changes = useProbChanges(userId ?? '')
+ console.log('changes', changes)
+
+ if (!changes) {
+ return null
+ }
+
+ const { positiveChanges, negativeChanges } = changes
+
+ const count = 3
+
+ return (
+
+
Daily movers
+
% pts
+ {positiveChanges.slice(0, count).map((contract) => (
+ <>
+
+
+ {contract.question}
+
+
+
+ >
+ ))}
+
+ {negativeChanges.slice(0, count).map((contract) => (
+ <>
+
+
+ {contract.question}
+
+
+
+ >
+ ))}
+
+ )
+}
+
+export function ProbChange(props: {
+ contract: CPMMContract
+ className?: string
+}) {
+ const { contract, className } = props
+ const {
+ probChanges: { day: change },
+ } = contract
+
+ const color =
+ change > 0
+ ? 'text-green-500'
+ : change < 0
+ ? 'text-red-500'
+ : 'text-gray-500'
+
+ const str =
+ change === 0
+ ? '+0%'
+ : `${change > 0 ? '+' : '-'}${formatPercent(Math.abs(change))}`
+ return {str}
+}
diff --git a/web/hooks/use-prob-changes.tsx b/web/hooks/use-prob-changes.tsx
new file mode 100644
index 00000000..c5e2c9bd
--- /dev/null
+++ b/web/hooks/use-prob-changes.tsx
@@ -0,0 +1,22 @@
+import { useFirestoreQueryData } from '@react-query-firebase/firestore'
+import {
+ getProbChangesNegative,
+ getProbChangesPositive,
+} from 'web/lib/firebase/contracts'
+
+export const useProbChanges = (userId: string) => {
+ const { data: positiveChanges } = useFirestoreQueryData(
+ ['prob-changes-day-positive', userId],
+ getProbChangesPositive(userId)
+ )
+ const { data: negativeChanges } = useFirestoreQueryData(
+ ['prob-changes-day-negative', userId],
+ getProbChangesNegative(userId)
+ )
+
+ if (!positiveChanges || !negativeChanges) {
+ return undefined
+ }
+
+ return { positiveChanges, negativeChanges }
+}
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index 5c65b23f..702f1c99 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -16,7 +16,7 @@ import {
import { partition, sortBy, sum, uniqBy } from 'lodash'
import { coll, getValues, listenForValue, listenForValues } from './utils'
-import { BinaryContract, Contract } from 'common/contract'
+import { BinaryContract, Contract, CPMMContract } from 'common/contract'
import { createRNG, shuffle } from 'common/util/random'
import { formatMoney, formatPercent } from 'common/util/format'
import { DAY_MS } from 'common/util/time'
@@ -402,3 +402,21 @@ export async function getRecentBetsAndComments(contract: Contract) {
recentComments,
}
}
+
+export const getProbChangesPositive = (userId: string) =>
+ query(
+ contracts,
+ where('uniqueBettorIds', 'array-contains', userId),
+ where('probChanges.day', '>', 0),
+ orderBy('probChanges.day', 'desc'),
+ limit(10)
+ ) as Query
+
+export const getProbChangesNegative = (userId: string) =>
+ query(
+ contracts,
+ where('uniqueBettorIds', 'array-contains', userId),
+ where('probChanges.day', '<', 0),
+ orderBy('probChanges.day', 'asc'),
+ limit(10)
+ ) as Query
diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx
index 2164e280..9e393d4f 100644
--- a/web/pages/experimental/home/index.tsx
+++ b/web/pages/experimental/home/index.tsx
@@ -25,6 +25,7 @@ import { Button } from 'web/components/button'
import { ArrangeHome, getHomeItems } from '../../../components/arrange-home'
import { Title } from 'web/components/title'
import { Row } from 'web/components/layout/row'
+import { ProbChangeTable } from 'web/components/contract/prob-change-table'
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const creds = await authenticateOnServer(ctx)
@@ -75,36 +76,40 @@ const Home = (props: { auth: { user: User } | null }) => {
/>
>
) : (
- visibleItems.map((item) => {
- const { id } = item
- if (id === 'your-bets') {
- return (
-
- )
- }
- const sort = SORTS.find((sort) => sort.value === id)
- if (sort)
- return (
-
- )
+ <>
+
- const group = groups.find((g) => g.id === id)
- if (group)
- return
+ {visibleItems.map((item) => {
+ const { id } = item
+ if (id === 'your-bets') {
+ return (
+
+ )
+ }
+ const sort = SORTS.find((sort) => sort.value === id)
+ if (sort)
+ return (
+
+ )
- return null
- })
+ const group = groups.find((g) => g.id === id)
+ if (group)
+ return
+
+ return null
+ })}
+ >
)}
) : (