Accepted challenge sharing card, fix accept bet call

This commit is contained in:
Ian Philips 2022-08-02 16:37:57 -06:00
parent 1123d09530
commit 754d4cb489
7 changed files with 55 additions and 27 deletions

View File

@ -9,8 +9,8 @@ import { removeUndefinedProps } from '../../common/util/object'
import { Acceptance, Challenge } from '../../common/challenge'
import { CandidateBet } from '../../common/new-bet'
import { createChallengeAcceptedNotification } from './create-notification'
import { noFees } from 'common/fees'
import { formatMoney, formatPercent } from 'common/util/format'
import { noFees } from '../../common/fees'
import { formatMoney, formatPercent } from '../../common/util/format'
const bodySchema = z.object({
contractId: z.string(),

View File

@ -87,12 +87,13 @@ export function getChallengeHtml(parsedReq: ParsedRequest) {
fontSize,
question,
creatorName,
// creatorUsername,
creatorAvatarUrl,
challengerAmount,
challengerOutcome,
creatorAmount,
creatorOutcome,
acceptedName,
acceptedAvatarUrl,
} = parsedReq
const MAX_QUESTION_CHARS = 85
const truncatedQuestion =
@ -100,6 +101,8 @@ export function getChallengeHtml(parsedReq: ParsedRequest) {
? question.slice(0, MAX_QUESTION_CHARS) + '...'
: question
const hideAvatar = creatorAvatarUrl ? '' : 'hidden'
const hideAcceptedAvatar = acceptedAvatarUrl ? '' : 'hidden'
const accepted = acceptedName !== ''
return `<!DOCTYPE html>
<html>
<head>
@ -131,29 +134,40 @@ export function getChallengeHtml(parsedReq: ParsedRequest) {
/>
<div class="flex flex-col gap-2 items-center justify-center">
<p class="text-gray-900 text-4xl">${creatorName}</p>
</div>
</div>
</div>
<div class="text-6xl mt-8">${'M$' + creatorAmount}</div>
<div class="text-3xl">${'on'}</div>
<div class="text-6xl ">${creatorOutcome}</div>
</div>
<div class="flex flex-col text-gray-900 text-6xl mt-8 text-center">
VS
</div>
<div class="flex flex-col justify-center items-center ${
challengerOutcome === 'YES' ? 'text-primary' : 'text-red-500'
}">
<div class="flex flex-row align-bottom gap-6 mr-20">
<div class="flex flex-row align-bottom gap-6 mr-24 ${
accepted ? 'hidden' : ''
}">
<img
class="h-24 w-24 rounded-full bg-white flex items-center justify-center ${hideAvatar}"
class="h-24 w-24 rounded-full bg-white flex items-center justify-center "
src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png"
alt=""
/>
<div class="flex flex-col gap-2 items-center justify-center">
<p class="text-gray-900 text-4xl">You</p>
</div>
</div>
</div>
</div>
<div class="flex flex-row align-bottom gap-6">
<img
class="h-24 w-24 rounded-full bg-white flex items-center justify-center ${hideAcceptedAvatar}"
src="${acceptedAvatarUrl}"
alt=""
/>
<div class="flex flex-col gap-2 items-center justify-center">
<p class="text-gray-900 text-4xl">${acceptedName}</p>
</div>
</div>
<div class="text-6xl mt-8">${'M$' + challengerAmount}</div>
<div class="text-3xl">${'on'}</div>
<div class="text-6xl ">${challengerOutcome}</div>

View File

@ -26,6 +26,8 @@ export function parseRequest(req: IncomingMessage) {
challengerOutcome,
creatorAmount,
creatorOutcome,
acceptedName,
acceptedAvatarUrl,
} = query || {}
if (Array.isArray(fontSize)) {
@ -77,6 +79,8 @@ export function parseRequest(req: IncomingMessage) {
challengerOutcome: getString(challengerOutcome) || '',
creatorAmount: getString(creatorAmount) || '',
creatorOutcome: getString(creatorOutcome) || '',
acceptedName: getString(acceptedName) || '',
acceptedAvatarUrl: getString(acceptedAvatarUrl) || '',
}
parsedRequest.images = getDefaultImages(parsedRequest.images)
return parsedRequest

View File

@ -23,4 +23,6 @@ export interface ParsedRequest {
challengerOutcome: string
creatorAmount: string
creatorOutcome: string
acceptedName: string
acceptedAvatarUrl: string
}

View File

@ -1,5 +1,6 @@
import { ReactNode } from 'react'
import Head from 'next/head'
import { Challenge } from 'common/challenge'
export type OgCardProps = {
question: string
@ -10,12 +11,19 @@ export type OgCardProps = {
creatorAvatarUrl?: string
}
type ChallengeCardProps = {
challengeAmount: string
challengeOutcome: string
}
function buildCardUrl(props: OgCardProps, challengeProps?: ChallengeCardProps) {
function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
const {
creatorAmount,
acceptances,
creatorOutcomeProb,
creatorOutcome,
yourOutcome,
} = challenge || {}
const { userName, userAvatarUrl } = acceptances?.[0] ?? {}
const challengeAmount =
creatorOutcomeProb &&
creatorAmount &&
Math.round(((1 - creatorOutcomeProb) / creatorOutcomeProb) * creatorAmount)
const probabilityParam =
props.probability === undefined
? ''
@ -25,8 +33,10 @@ function buildCardUrl(props: OgCardProps, challengeProps?: ChallengeCardProps) {
? ''
: `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}`
const challengeUrlParams = challengeProps
? `&challengeAmount=${challengeProps.challengeAmount}&challengeOutcome=${challengeProps.challengeOutcome}`
const challengeUrlParams = challenge
? `&creatorAmount=${creatorAmount}&creatorOutcome=${creatorOutcome}` +
`&challengerAmount=${challengeAmount}&challengerOutcome=${yourOutcome}` +
`&acceptedName=${userName ?? ''}&acceptedAvatarUrl=${userAvatarUrl ?? ''}`
: ''
// URL encode each of the props, then add them as query params
@ -48,10 +58,9 @@ export function SEO(props: {
url?: string
children?: ReactNode
ogCardProps?: OgCardProps
challengeCardProps?: ChallengeCardProps
challenge?: Challenge
}) {
const { title, description, url, children, ogCardProps, challengeCardProps } =
props
const { title, description, url, children, ogCardProps, challenge } = props
return (
<Head>
@ -83,13 +92,13 @@ export function SEO(props: {
<>
<meta
property="og:image"
content={buildCardUrl(ogCardProps, challengeCardProps)}
content={buildCardUrl(ogCardProps, challenge)}
key="image1"
/>
<meta name="twitter:card" content="summary_large_image" key="card" />
<meta
name="twitter:image"
content={buildCardUrl(ogCardProps, challengeCardProps)}
content={buildCardUrl(ogCardProps, challenge)}
key="image2"
/>
</>

View File

@ -40,6 +40,8 @@ export function AcceptChallengeButton(props: {
acceptChallenge({
contractId: contract.id,
challengeSlug: challenge.slug,
outcomeType: contract.outcomeType,
closeTime: contract.closeTime,
})
.then((r) => {
console.log('accepted challenge. Result:', r)

View File

@ -117,10 +117,7 @@ export default function ChallengePage(props: {
description={ogCardProps.description}
url={getChallengeUrl(challenge).replace('https://', '')}
ogCardProps={ogCardProps}
challengeCardProps={{
challengeOutcome: challenge.creatorOutcome,
challengeAmount: challenge.creatorAmount + '',
}}
challenge={challenge}
/>
{challenge.acceptances.length >= challenge.maxUses ? (
<ClosedChallengeContent