Merge adfc5dbda1 into 3f6ca6c8ed

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: {
     </div>
   )
 
+  const [users, setUsers] = useState({} as {[key: string]: User})
+  const asked = useRef(new Set<string>())
+
+  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 _(<div className="flex">
+      <Avatar username={bettor?.username} avatarUrl={bettor?.avatarUrl} size="sm" />
+      {bettor?.username}
+    </div>)
+  }
+
+  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 (
     <Tabs
       currentPageForAnalytics={'contract'}
@@ -102,7 +163,10 @@ export function ContractTabs(props: {
           content: commentActivity,
           badge: `${comments.length}`,
         },
-        { title: 'Bets', content: betActivity, badge: `${visibleBets.length}` },
+        { title: 'Bet feed', content: betActivity, badge: `${visibleBets.length}` },
+        { title: 'Bet table', content: <Grid data={gridjsbets} search sort columns={gridjsbetcolumns} style={gridjsstyle} resizable/>},
+        { title: 'Users', content: <Grid data={Object.values(gridjsusers)} search sort columns={gridjsusercolumns} style={gridjsstyle} resizable/>},
+
         ...(!user || !userBets?.length
           ? []
           : [{ title: 'Your bets', content: yourTrades }]),