open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Accepted challenge sharing card, fix accept bet call

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
functions/src/accept-challenge.ts
View File

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

30
og-image/api/_lib/challenge-template.ts
View File

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

4
og-image/api/_lib/parser.ts
View File

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

2
og-image/api/_lib/types.ts
View File

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

35
web/components/SEO.tsx
View File

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

2
web/components/challenges/accept-challenge-button.tsx
View File

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

5
web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
View File

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