Accepted challenge sharing card, fix accept bet call
This commit is contained in:
parent
1123d09530
commit
754d4cb489
|
@ -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(),
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -23,4 +23,6 @@ export interface ParsedRequest {
|
|||
challengerOutcome: string
|
||||
creatorAmount: string
|
||||
creatorOutcome: string
|
||||
acceptedName: string
|
||||
acceptedAvatarUrl: string
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
</>
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue
Block a user