From d82a595a1c3a065d812b510f71fdf23a5f104b61 Mon Sep 17 00:00:00 2001 From: Gurkenglas Date: Mon, 8 Aug 2022 20:06:30 +0200 Subject: [PATCH 1/7] Add bets and users tables per market --- web/components/contract/contract-tabs.tsx | 79 ++++++++++++++++++++++- 1 file changed, 78 insertions(+), 1 deletion(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 5aee7899..073054f6 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 } from 'react' +import { maxBy } from 'lodash' export function ContractTabs(props: { contract: Contract @@ -93,6 +100,73 @@ export function ContractTabs(props: { ) + const [users, setUsers] = useState({} as {[key: string]: User}) + const [asked, setAsked] = useState({} as {[key: string]: boolean}) + useEffect(() => { + bets.map((bet) => { + if (!asked[bet.userId]) { + getUser(bet.userId).then((user) => { + setUsers({ ...users, [bet.userId]: user }) + }) + setAsked({ ...asked, [bet.userId]: true }) + } + }) + }, [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 = { + table: { + border: '3px solid #ccc', + 'text-align': 'center', + }, + th: { + 'background-color': 'rgba(0, 0, 0, 0.1)', + color: '#000', + 'border-bottom': '3px solid #ccc', + 'padding': '0', + }, + td: { + 'padding': '0', + } + } + + const userpositions = {} as {[key: string]: any} + bets.forEach((bet) => { + const {id, position, mana} = userpositions[bet.userId] || {id: bet.userId, position: {}, mana: 0} + position[bet.outcome] = (position[bet.outcome] || 0) + bet.shares + userpositions[bet.userId] = {id:id, position:position, mana:(mana + bet.amount)} + }) + const gridjsusers = Object.values(userpositions).map((row:any) => ({...row, ['username']: users[row.userId]?.username})) + + const argmax = (obj:{[key:string]:number}) => maxBy(Object.keys(obj), (k:string) => obj[k]) + + const gridjsusercolumns = [ + {name: "User", id: "id", formatter:formatUser}, + {name: "is down", id: "mana", formatter: (i:number) => "M$"+i.toFixed(0)}, + {name: "and holds", id: "position", formatter: (p:{[key: string]: number}) => p[argmax(p) ?? ""].toFixed(0)}, + {name: "of", id: "position", formatter: (p:{[key: string]: number}) => argmax(p)}, + ] + return ( }, + { title: 'Users', content: }, + ...(!user || !userBets?.length ? [] : [{ title: 'Your bets', content: yourTrades }]), From 720467363f3183679ca00ee55ff76e58c66278ec Mon Sep 17 00:00:00 2001 From: Gurkenglas Date: Tue, 9 Aug 2022 02:49:51 +0200 Subject: [PATCH 2/7] fix races by short-circuiting setAsked --- web/components/contract/contract-tabs.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 073054f6..6f20d429 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -16,7 +16,7 @@ import { Avatar } from 'web/components/avatar' import { Grid, _ } from 'gridjs-react' import 'gridjs/dist/theme/mermaid.css' import { useState, useEffect } from 'react' -import { maxBy } from 'lodash' +import { maxBy, uniq } from 'lodash' export function ContractTabs(props: { contract: Contract @@ -101,15 +101,13 @@ export function ContractTabs(props: { ) const [users, setUsers] = useState({} as {[key: string]: User}) - const [asked, setAsked] = useState({} as {[key: string]: boolean}) + const [asked, _setAsked] = useState(new Set()) + useEffect(() => { - bets.map((bet) => { - if (!asked[bet.userId]) { - getUser(bet.userId).then((user) => { - setUsers({ ...users, [bet.userId]: user }) - }) - setAsked({ ...asked, [bet.userId]: true }) - } + uniq(bets.map((bet:Bet) => bet.userId)).filter((uid) => !asked.has(uid)).forEach((uid) => { + console.log("adding",uid) + asked.add(uid) + getUser(uid).then((u) => setUsers((users) => ({...users, [uid]: u}))) }) }, [bets]) From fd45df88133e8056ea3fbde11d0597a8230befe8 Mon Sep 17 00:00:00 2001 From: Gurkenglas Date: Tue, 9 Aug 2022 03:08:59 +0200 Subject: [PATCH 3/7] refactor for better fit and less warning --- web/components/contract/contract-tabs.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 6f20d429..b1174a4b 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -15,7 +15,7 @@ import dayjs from 'dayjs' import { Avatar } from 'web/components/avatar' import { Grid, _ } from 'gridjs-react' import 'gridjs/dist/theme/mermaid.css' -import { useState, useEffect } from 'react' +import { useState, useEffect, useRef } from 'react' import { maxBy, uniq } from 'lodash' export function ContractTabs(props: { @@ -101,12 +101,12 @@ export function ContractTabs(props: { ) const [users, setUsers] = useState({} as {[key: string]: User}) - const [asked, _setAsked] = useState(new Set()) + const asked = useRef(new Set()) useEffect(() => { - uniq(bets.map((bet:Bet) => bet.userId)).filter((uid) => !asked.has(uid)).forEach((uid) => { + uniq(bets.map((bet:Bet) => bet.userId)).filter((uid) => !asked.current.has(uid)).forEach((uid) => { console.log("adding",uid) - asked.add(uid) + asked.current.add(uid) getUser(uid).then((u) => setUsers((users) => ({...users, [uid]: u}))) }) }, [bets]) From 20874d354731b0c7b33167e4758a5954ecc2b25d Mon Sep 17 00:00:00 2001 From: Gurkenglas Date: Tue, 9 Aug 2022 03:12:20 +0200 Subject: [PATCH 4/7] oh whoops i had a console.log in there --- web/components/contract/contract-tabs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index b1174a4b..07b8e240 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -105,7 +105,6 @@ export function ContractTabs(props: { useEffect(() => { uniq(bets.map((bet:Bet) => bet.userId)).filter((uid) => !asked.current.has(uid)).forEach((uid) => { - console.log("adding",uid) asked.current.add(uid) getUser(uid).then((u) => setUsers((users) => ({...users, [uid]: u}))) }) From 5282cbb629bf7aa69a5129bca9af2f341d2ee26b Mon Sep 17 00:00:00 2001 From: Gurkenglas Date: Tue, 9 Aug 2022 21:41:13 +0200 Subject: [PATCH 5/7] move argmax from formatter to data for sorting --- web/components/contract/contract-tabs.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 07b8e240..d352c1b1 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -153,15 +153,17 @@ export function ContractTabs(props: { position[bet.outcome] = (position[bet.outcome] || 0) + bet.shares userpositions[bet.userId] = {id:id, position:position, mana:(mana + bet.amount)} }) - const gridjsusers = Object.values(userpositions).map((row:any) => ({...row, ['username']: users[row.userId]?.username})) - 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)})) + .map((row:any) => ({...row, ['topshr']: row.position[row.topout]})) + .map((row:any) => ({...row, ['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: "position", formatter: (p:{[key: string]: number}) => p[argmax(p) ?? ""].toFixed(0)}, - {name: "of", id: "position", formatter: (p:{[key: string]: number}) => argmax(p)}, + {name: "and holds", id: "topshr", formatter: (i:number) => i.toFixed(0)}, + {name: "of", id: "topout"}, ] return ( From ab0c47065d5d8c12d34f5249fcb9b0600cfe6893 Mon Sep 17 00:00:00 2001 From: Gurkenglas Date: Tue, 9 Aug 2022 22:00:24 +0200 Subject: [PATCH 6/7] refactor, restyle --- web/components/contract/contract-tabs.tsx | 26 ++++++----------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index d352c1b1..329cee58 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -16,7 +16,7 @@ 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, uniq } from 'lodash' +import { maxBy } from 'lodash' export function ContractTabs(props: { contract: Contract @@ -104,9 +104,11 @@ export function ContractTabs(props: { const asked = useRef(new Set()) useEffect(() => { - uniq(bets.map((bet:Bet) => bet.userId)).filter((uid) => !asked.current.has(uid)).forEach((uid) => { - asked.current.add(uid) - getUser(uid).then((u) => setUsers((users) => ({...users, [uid]: u}))) + bets.forEach(({ userId }) => { + if (!asked.current.has(userId)) { + asked.current.add(userId) + getUser(userId).then((u) => setUsers((us) => ({...us, [userId]: u}))) + } }) }, [bets]) @@ -131,21 +133,7 @@ export function ContractTabs(props: { {name: "on", id: "createdTime", formatter: (t:number) => dayjs(t).format('YY/MM/DD,hh:mm:ss')}, ] - const gridjsstyle = { - table: { - border: '3px solid #ccc', - 'text-align': 'center', - }, - th: { - 'background-color': 'rgba(0, 0, 0, 0.1)', - color: '#000', - 'border-bottom': '3px solid #ccc', - 'padding': '0', - }, - td: { - 'padding': '0', - } - } + const gridjsstyle = {th: {padding: 0}, td: {padding: 0}} const userpositions = {} as {[key: string]: any} bets.forEach((bet) => { From adfc5dbda187a82126fbcf725763a0242a67b9f4 Mon Sep 17 00:00:00 2001 From: Gurkenglas Date: Tue, 9 Aug 2022 22:12:59 +0200 Subject: [PATCH 7/7] refactor --- web/components/contract/contract-tabs.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 329cee58..a4a5e89c 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -120,7 +120,7 @@ export function ContractTabs(props: { ) } - const gridjsbets = bets.map((bet) => ({...bet, ['username']: users[bet.userId]?.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)}, @@ -136,16 +136,16 @@ export function ContractTabs(props: { const gridjsstyle = {th: {padding: 0}, td: {padding: 0}} const userpositions = {} as {[key: string]: any} - bets.forEach((bet) => { - const {id, position, mana} = userpositions[bet.userId] || {id: bet.userId, position: {}, mana: 0} - position[bet.outcome] = (position[bet.outcome] || 0) + bet.shares - userpositions[bet.userId] = {id:id, position:position, mana:(mana + bet.amount)} + 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)})) - .map((row:any) => ({...row, ['topshr']: row.position[row.topout]})) - .map((row:any) => ({...row, ['username']: users[row.userId]?.username})) + 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},