diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 5aee7899..a4a5e89c 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -10,6 +10,13 @@ import { Col } from '../layout/col' import { CommentTipMap } from 'web/hooks/use-tip-txns' import { LiquidityProvision } from 'common/liquidity-provision' import { useComments } from 'web/hooks/use-comments' +import { getUser } from 'web/lib/firebase/users' +import dayjs from 'dayjs' +import { Avatar } from 'web/components/avatar' +import { Grid, _ } from 'gridjs-react' +import 'gridjs/dist/theme/mermaid.css' +import { useState, useEffect, useRef } from 'react' +import { maxBy } from 'lodash' export function ContractTabs(props: { contract: Contract @@ -93,6 +100,60 @@ export function ContractTabs(props: { ) + const [users, setUsers] = useState({} as {[key: string]: User}) + const asked = useRef(new Set()) + + useEffect(() => { + bets.forEach(({ userId }) => { + if (!asked.current.has(userId)) { + asked.current.add(userId) + getUser(userId).then((u) => setUsers((us) => ({...us, [userId]: u}))) + } + }) + }, [bets]) + + const formatUser = (bettorId:string) => { + const bettor = users[bettorId] + return _(
+ + {bettor?.username} +
) + } + + const gridjsbets = bets.map((bet) => ({...bet, username: users[bet.userId]?.username})) + const gridjsbetcolumns = [ + {name: "User", id: "userId", formatter:formatUser}, + {name: "bought", id: "shares", formatter: (i:number) => i.toFixed(0)}, + {name: "of", id: "outcome"}, + {name: "for", id: "amount", formatter: (i:number) => "M$"+i.toFixed(0)}, + ...(bets[0]?.orderAmount ? + [{name: "out of", id: "orderAmount", formatter: (i:number) => i ? "M$"+i.toFixed(0) : ""}] : []), + {name: "from", id: "probBefore", formatter: (p:number) => (100*p).toFixed(0)+"%"}, + {name: "to", id: "probAfter", formatter: (p:number) => (100*p).toFixed(0)+"%"}, + {name: "on", id: "createdTime", formatter: (t:number) => dayjs(t).format('YY/MM/DD,hh:mm:ss')}, + ] + + const gridjsstyle = {th: {padding: 0}, td: {padding: 0}} + + const userpositions = {} as {[key: string]: any} + bets.forEach(({ userId, outcome, shares, amount }) => { + const {id, position, mana} = userpositions[userId] || {id: userId, position: {}, mana: 0} + position[outcome] = (position[outcome] || 0) + shares + userpositions[userId] = {id:id, position:position, mana:(mana + amount)} + }) + const argmax = (obj:{[key:string]:number}) => maxBy(Object.keys(obj), (k:string) => obj[k]) + const gridjsusers = Object.values(userpositions).map((row:any) => ({...row + , topout: argmax(row.position) + , topshr: row.position[argmax(row.position) || ""] + , username: users[row.userId]?.username})) + + const gridjsusercolumns = [ + {name: "User", id: "id", formatter:formatUser}, + {name: "is down", id: "mana", formatter: (i:number) => "M$"+i.toFixed(0)}, + {name: "and holds", id: "topshr", formatter: (i:number) => i.toFixed(0)}, + {name: "of", id: "topout"}, + ] + return ( }, + { title: 'Users', content: }, + ...(!user || !userBets?.length ? [] : [{ title: 'Your bets', content: yourTrades }]),