Add in challenge parts to template and url

2022-08-01 09:49:57 -06:00 · 2022-08-01 09:49:57 -06:00 · ff6fa9db2b
commit ff6fa9db2b
parent c0a5b6fd1c
7 changed files with 56 additions and 29 deletions
--- a/og-image/api/_lib/template.ts
+++ b/og-image/api/_lib/template.ts
@ -91,6 +91,8 @@ export function getHtml(parsedReq: ParsedRequest) {
    creatorName,
    creatorUsername,
    creatorAvatarUrl,
+    challengeAmount,
+    challengeOutcome,
  } = parsedReq
  const MAX_QUESTION_CHARS = 100
  const truncatedQuestion =
@ -148,7 +150,12 @@ export function getHtml(parsedReq: ParsedRequest) {
          ${truncatedQuestion}
        </div>
        <div class="flex flex-col text-primary">
-          <div class="text-8xl">${probability}</div>
+          <div class="text-8xl">${
+            challengeAmount ? challengeAmount : probability
+          }</div>
+           <div class="text-5xl">${
+             challengeOutcome ? 'on' + challengeOutcome : ''
+           }</div>
          <div class="text-4xl">${probability !== '' ? 'chance' : ''}</div>
        </div>
      </div>
--- a/og-image/api/_lib/types.ts
+++ b/og-image/api/_lib/types.ts
@ -1,21 +1,23 @@
-export type FileType = "png" | "jpeg";
-export type Theme = "light" | "dark";
+export type FileType = 'png' | 'jpeg'
+export type Theme = 'light' | 'dark'

 export interface ParsedRequest {
-  fileType: FileType;
-  text: string;
-  theme: Theme;
-  md: boolean;
-  fontSize: string;
-  images: string[];
-  widths: string[];
-  heights: string[];
+  fileType: FileType
+  text: string
+  theme: Theme
+  md: boolean
+  fontSize: string
+  images: string[]
+  widths: string[]
+  heights: string[]

  // Attributes for Manifold card:
-  question: string;
-  probability: string;
-  metadata: string;
-  creatorName: string;
-  creatorUsername: string;
-  creatorAvatarUrl: string;
+  question: string
+  probability: string
+  metadata: string
+  creatorName: string
+  creatorUsername: string
+  creatorAvatarUrl: string
+  challengeAmount: string
+  challengeOutcome: string
 }
--- a/web/components/SEO.tsx
+++ b/web/components/SEO.tsx
@ -10,7 +10,7 @@ export type OgCardProps = {
  creatorAvatarUrl?: string
 }

-function buildCardUrl(props: OgCardProps) {
+function buildCardUrl(props: OgCardProps, challengeProps?: ChallengeCardProps) {
  const probabilityParam =
    props.probability === undefined
      ? ''
@ -20,6 +20,10 @@ function buildCardUrl(props: OgCardProps) {
      ? ''
      : `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}`

+  const challengeUrlParams = challengeProps
+    ? `&challengeAmount=${challengeProps.challengeAmount}&challengeOutcome=${challengeProps.challengeOutcome}`
+    : ''
+
  // URL encode each of the props, then add them as query params
  return (
    `https://manifold-og-image.vercel.app/m.png` +
@ -28,9 +32,14 @@ function buildCardUrl(props: OgCardProps) {
    `&metadata=${encodeURIComponent(props.metadata)}` +
    `&creatorName=${encodeURIComponent(props.creatorName)}` +
    creatorAvatarUrlParam +
-    `&creatorUsername=${encodeURIComponent(props.creatorUsername)}`
+    `&creatorUsername=${encodeURIComponent(props.creatorUsername)}` +
+    challengeUrlParams
  )
 }
+type ChallengeCardProps = {
+  challengeAmount: string
+  challengeOutcome: string
+}

 export function SEO(props: {
  title: string
@ -38,8 +47,10 @@ export function SEO(props: {
  url?: string
  children?: ReactNode
  ogCardProps?: OgCardProps
+  challengeCardProps?: ChallengeCardProps
 }) {
-  const { title, description, url, children, ogCardProps } = props
+  const { title, description, url, children, ogCardProps, challengeCardProps } =
+    props

  return (
    <Head>
@ -71,13 +82,13 @@ export function SEO(props: {
        <>
          <meta
            property="og:image"
-            content={buildCardUrl(ogCardProps)}
+            content={buildCardUrl(ogCardProps, challengeCardProps)}
            key="image1"
          />
          <meta name="twitter:card" content="summary_large_image" key="card" />
          <meta
            name="twitter:image"
-            content={buildCardUrl(ogCardProps)}
+            content={buildCardUrl(ogCardProps, challengeCardProps)}
            key="image2"
          />
        </>
--- a/web/hooks/use-save-referral.ts
+++ b/web/hooks/use-save-referral.ts
@ -6,7 +6,7 @@ import { User, writeReferralInfo } from 'web/lib/firebase/users'
 export const useSaveReferral = (
  user?: User | null,
  options?: {
-    defaultReferrer?: string
+    defaultReferrerUsername?: string
    contractId?: string
    groupId?: string
  }
@ -18,7 +18,7 @@ export const useSaveReferral = (
      referrer?: string
    }

-    const actualReferrer = referrer || options?.defaultReferrer
+    const actualReferrer = referrer || options?.defaultReferrerUsername

    if (!user && router.isReady && actualReferrer) {
      writeReferralInfo(actualReferrer, options?.contractId, options?.groupId)
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@ -155,7 +155,7 @@ export function ContractPageContent(
  const ogCardProps = getOpenGraphProps(contract)

  useSaveReferral(user, {
-    defaultReferrer: contract.creatorUsername,
+    defaultReferrerUsername: contract.creatorUsername,
    contractId: contract.id,
  })

--- a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
+++ b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
@ -40,6 +40,7 @@ import { ContractProbGraph } from 'web/components/contract/contract-prob-graph'
 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'

 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@ -92,15 +93,17 @@ export default function ChallengePage(props: {
    useChallenge(props.challengeSlug, contract?.id) ?? props.challenge
  const { user, bets } = props
  const currentUser = useUser()
+  useSaveReferral(currentUser, {
+    defaultReferrerUsername: challenge?.creatorUsername,
+  })

  if (!contract || !challenge) return <Custom404 />
  const ogCardProps = getOpenGraphProps(contract)

  ogCardProps.creatorUsername = challenge.creatorUsername
  ogCardProps.creatorAvatarUrl = challenge.creatorAvatarUrl
-  ogCardProps.question = 'I challenge you to a bet: ' + contract.question
-  ogCardProps.probability =
-    formatMoney(challenge.creatorAmount) + ' on ' + challenge.creatorOutcome
+  ogCardProps.question = 'CHALLENGED:' + contract.question
+  ogCardProps.probability = ''

  return (
    <Page>
@ -109,6 +112,10 @@ export default function ChallengePage(props: {
        description={ogCardProps.description}
        url={getChallengeUrl(challenge).replace('https://', '')}
        ogCardProps={ogCardProps}
+        challengeCardProps={{
+          challengeOutcome: challenge.creatorOutcome,
+          challengeAmount: challenge.creatorAmount + '',
+        }}
      />
      {challenge.acceptances.length >= challenge.maxUses ? (
        <ClosedChallengeContent
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@ -153,7 +153,7 @@ export default function GroupPage(props: {
  const user = useUser()

  useSaveReferral(user, {
-    defaultReferrer: creator.username,
+    defaultReferrerUsername: creator.username,
    groupId: group?.id,
  })