From 7acac0a5d6e1afcc3163bf66b37cab709fb18e66 Mon Sep 17 00:00:00 2001 From: mantikoros Date: Mon, 1 Aug 2022 17:11:02 -0700 Subject: [PATCH] beautify accept bet screen --- .../challenges/accept-challenge-button.tsx | 6 +- .../[contractSlug]/[challengeSlug].tsx | 189 +++++++----------- 2 files changed, 79 insertions(+), 116 deletions(-) diff --git a/web/components/challenges/accept-challenge-button.tsx b/web/components/challenges/accept-challenge-button.tsx index 276e8002..11bf03d6 100644 --- a/web/components/challenges/accept-challenge-button.tsx +++ b/web/components/challenges/accept-challenge-button.tsx @@ -117,12 +117,12 @@ export function AcceptChallengeButton(props: { {challenge.creatorId != user.id && ( )} diff --git a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx index acf8358c..c9a43da0 100644 --- a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx +++ b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx @@ -1,3 +1,6 @@ +import React, { useEffect, useState } from 'react' +import Confetti from 'react-confetti' + import { fromPropz, usePropz } from 'web/hooks/use-propz' import { Contract, @@ -10,28 +13,24 @@ import { Col } from 'web/components/layout/col' import { SiteLink } from 'web/components/site-link' import { Spacer } from 'web/components/layout/spacer' import { Row } from 'web/components/layout/row' - import { Challenge } from 'common/challenge' import { getChallenge, getChallengeUrl, useChallenge, } from 'web/lib/firebase/challenges' -import { getPortfolioHistory, getUserByUsername } from 'web/lib/firebase/users' -import { PortfolioMetrics, User } from 'common/user' +import { getUserByUsername } from 'web/lib/firebase/users' +import { User } from 'common/user' import { Page } from 'web/components/page' import { useUser, useUserById } from 'web/hooks/use-user' import { AcceptChallengeButton } from 'web/components/challenges/accept-challenge-button' import { Avatar } from 'web/components/avatar' import { UserLink } from 'web/components/user-page' -import React, { useEffect, useState } from 'react' import { BinaryOutcomeLabel } from 'web/components/outcome-label' import { formatMoney } from 'common/util/format' -import { last } from 'lodash' import { LoadingIndicator } from 'web/components/loading-indicator' import { useWindowSize } from 'web/hooks/use-window-size' import { Bet, listAllBets } from 'web/lib/firebase/bets' -import Confetti from 'react-confetti' import { BinaryResolutionOrChance, PseudoNumericResolutionOrExpectation, @@ -41,8 +40,11 @@ import { SEO } from 'web/components/SEO' import { getOpenGraphProps } from 'web/components/contract/contract-card-preview' import Custom404 from 'web/pages/404' import { useSaveReferral } from 'web/hooks/use-save-referral' +import { BinaryContract } from 'common/contract' +import { Title } from 'web/components/title' export const getStaticProps = fromPropz(getStaticPropz) + export async function getStaticPropz(props: { params: { username: string; contractSlug: string; challengeSlug: string } }) { @@ -73,7 +75,7 @@ export async function getStaticPaths() { } export default function ChallengePage(props: { - contract: Contract | null + contract: BinaryContract | null user: User slug: string bets: Bet[] @@ -88,18 +90,22 @@ export default function ChallengePage(props: { challenge: null, slug: '', } - const contract = useContractWithPreload(props.contract) ?? props.contract + const contract = (useContractWithPreload(props.contract) ?? + props.contract) as BinaryContract + const challenge = useChallenge(props.challengeSlug, contract?.id) ?? props.challenge + const { user, bets } = props const currentUser = useUser() + useSaveReferral(currentUser, { defaultReferrerUsername: challenge?.creatorUsername, }) if (!contract || !challenge) return - const ogCardProps = getOpenGraphProps(contract) + const ogCardProps = getOpenGraphProps(contract) ogCardProps.creatorUsername = challenge.creatorUsername ogCardProps.creatorName = challenge.creatorName ogCardProps.creatorAvatarUrl = challenge.creatorAvatarUrl @@ -152,7 +158,7 @@ const userRow = (challenger: User) => ( ) function ClosedChallengeContent(props: { - contract: Contract + contract: BinaryContract challenge: Challenge creator: User bets: Bet[] @@ -323,13 +329,13 @@ function ChallengeContract(props: { contract: Contract; bets: Bet[] }) { } function OpenChallengeContent(props: { - contract: Contract + contract: BinaryContract challenge: Challenge creator: User user: User | null | undefined bets: Bet[] }) { - const { contract, challenge, creator, user, bets } = props + const { contract, challenge, creator, user } = props const { question } = contract const { creatorAmount, @@ -339,120 +345,44 @@ function OpenChallengeContent(props: { yourOutcome, } = challenge - const [creatorPortfolioHistory, setUsersCreatorPortfolioHistory] = useState< - PortfolioMetrics[] - >([]) - const [portfolioHistory, setUsersPortfolioHistory] = useState< - PortfolioMetrics[] - >([]) - useEffect(() => { - getPortfolioHistory(creator.id).then(setUsersCreatorPortfolioHistory) - if (user) getPortfolioHistory(user.id).then(setUsersPortfolioHistory) - }, [creator.id, user]) - const href = `https://${DOMAIN}${contractPath(contract)}` - const { width, height } = useWindowSize() - const [containerRef, setContainerRef] = useState(null) - const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0 - const remainingHeight = - (height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight - const isBinary = contract.outcomeType === 'BINARY' - const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC' const yourCost = ((1 - creatorOutcomeProb) / creatorOutcomeProb) * creatorAmount - const userColumn = ( - challenger: User | null | undefined, - portfolioHistory: PortfolioMetrics[], - outcome: string, - amount: number - ) => { - const lastPortfolioMetrics = last(portfolioHistory) - const prob = - (outcome === creatorOutcome - ? creatorOutcomeProb - : 1 - creatorOutcomeProb) * 100 + const title = `${creator.name} is challenging you to bet` - return ( - - {challenger ? ( - userRow(challenger) - ) : ( - - - Your name here - - )} - - - is betting {formatMoney(amount)} - {' on '} - at{' '} - {Math.round(prob)}% - - - {/*// It could be fun to show each user's portfolio history here*/} - {/*// Also show how many challenges they've won*/} - {/**/} - - -
Portfolio value
- - {challenger - ? formatMoney( - (lastPortfolioMetrics?.balance ?? 0) + - (lastPortfolioMetrics?.investmentValue ?? 0) - ) - : 'xxxx'} - - - - ) - } return ( - <> - - {(isBinary || isPseudoNumeric) && ( -
- -
- )} - + + + + + <Row className="my-4 justify-center px-8 pb-4 text-lg sm:text-xl"> <SiteLink href={href}>{question}</SiteLink> </Row> + <Col className={ - 'h-full max-h-[50vh] w-full content-between justify-between gap-1 py-10 sm:flex-row' + 'h-full max-h-[50vh] w-full content-between justify-between gap-1 sm:flex-row' } > - {userColumn( - creator, - creatorPortfolioHistory, - creatorOutcome, - creatorAmount - )} - <Col className="items-center justify-center py-4 text-4xl">VS</Col> - {userColumn( - user?.id === creatorId ? undefined : user, - portfolioHistory, - yourOutcome, - yourCost - )} + <UserBetColumn + challenger={creator} + outcome={creatorOutcome} + amount={creatorAmount} + /> + + <Col className="items-center justify-center py-8 text-2xl sm:text-4xl"> + VS + </Col> + + <UserBetColumn + challenger={user?.id === creatorId ? undefined : user} + outcome={yourOutcome} + amount={yourCost} + /> </Col> + <Spacer h={3} /> <Row className="my-4 w-full items-center justify-center"> @@ -463,6 +393,39 @@ function OpenChallengeContent(props: { /> </Row> </Col> - </> + </Col> + ) +} + +function UserBetColumn(props: { + challenger: User | null | undefined + outcome: string + amount: number +}) { + const { challenger, outcome, amount } = props + + return ( + <Col className="w-full items-start justify-center gap-1"> + {challenger ? ( + userRow(challenger) + ) : ( + <Row className={'mb-2 w-full items-center justify-center gap-2'}> + <Avatar size={12} avatarUrl={undefined} username={undefined} /> + <span className={'text-2xl'}>You</span> + </Row> + )} + <Row className={'w-full items-center justify-center'}> + <span className={'text-lg'}>{challenger ? 'is' : 'are'} betting </span> + </Row> + <Row className={'w-full items-center justify-center'}> + <span className={'text-lg'}> + <span className="bold text-2xl">{formatMoney(amount)}</span> + {' on '} + <span className="bold text-2xl"> + <BinaryOutcomeLabel outcome={outcome as any} /> + </span>{' '} + </span> + </Row> + </Col> ) }