Accepted challenge sharing card, fix accept bet call

2022-08-02 16:37:57 -06:00 · 2022-08-02 16:37:57 -06:00 · 754d4cb489
commit 754d4cb489
parent 1123d09530
7 changed files with 55 additions and 27 deletions
--- a/functions/src/accept-challenge.ts
+++ b/functions/src/accept-challenge.ts
@ -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(),
--- a/og-image/api/_lib/challenge-template.ts
+++ b/og-image/api/_lib/challenge-template.ts
@ -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>
--- a/og-image/api/_lib/parser.ts
+++ b/og-image/api/_lib/parser.ts
@ -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
--- a/og-image/api/_lib/types.ts
+++ b/og-image/api/_lib/types.ts
@ -23,4 +23,6 @@ export interface ParsedRequest {
  challengerOutcome: string
  creatorAmount: string
  creatorOutcome: string
+  acceptedName: string
+  acceptedAvatarUrl: string
 }
--- a/web/components/SEO.tsx
+++ b/web/components/SEO.tsx
@ -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"
          />
        </>
--- a/web/components/challenges/accept-challenge-button.tsx
+++ b/web/components/challenges/accept-challenge-button.tsx
@ -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)
--- a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
+++ b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
@ -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