Referrals page added to sidebar; useSaveReferral; InfoBox

web/components/info-box.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx'
+import { InformationCircleIcon } from '@heroicons/react/solid'
+
+import { Linkify } from './linkify'
+
+export function InfoBox(props: {
+  title: string
+  text: string
+  className?: string
+}) {
+  const { title, text, className } = props
+  return (
+    <div className={clsx('rounded-md bg-gray-50 p-4', className)}>
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <InformationCircleIcon
+            className="h-5 w-5 text-gray-400"
+            aria-hidden="true"
+          />
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-black">{title}</h3>
+          <div className="mt-2 text-sm text-black">
+            <Linkify text={text} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

web/components/nav/sidebar.tsx

@@ -64,6 +64,7 @@ function getMoreNavigation(user?: User | null) {
   return [
     { name: 'Send M$', href: '/links' },
     { name: 'Leaderboards', href: '/leaderboards' },
+    { name: 'Referrals', href: '/referrals' },
     { name: 'Charity', href: '/charity' },
     { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
     { name: 'About', href: 'https://docs.manifold.markets/$how-to' },
@@ -114,6 +115,7 @@ function getMoreMobileNav() {
       ? []
       : [
           { name: 'Send M$', href: '/links' },
+          { name: 'Referrals', href: '/referrals' },
           { name: 'Charity', href: '/charity' },
           { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
         ]),

web/hooks/use-save-referral.ts

@@ -0,0 +1,28 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+import { User } from 'common/lib/user'
+import { writeReferralInfo } from 'web/lib/firebase/users'
+
+export const useSaveReferral = (
+  user?: User | null,
+  options?: {
+    defaultReferrer?: string
+    contractId?: string
+    groupId?: string
+  }
+) => {
+  const router = useRouter()
+
+  useEffect(() => {
+    const { referrer } = router.query as {
+      referrer?: string
+    }
+
+    const actualReferrer = referrer || options?.defaultReferrer
+
+    if (!user && router.isReady && actualReferrer) {
+      writeReferralInfo(actualReferrer, options?.contractId, options?.groupId)
+    }
+  }, [user, router, options])
+}

web/pages/[username]/[contractSlug].tsx

@@ -10,7 +10,7 @@ import { useUser } from 'web/hooks/use-user'
 import { ResolutionPanel } from 'web/components/resolution-panel'
 import { Title } from 'web/components/title'
 import { Spacer } from 'web/components/layout/spacer'
-import { listUsers, User, writeReferralInfo } from 'web/lib/firebase/users'
+import { listUsers, User } from 'web/lib/firebase/users'
 import {
   Contract,
   getContractFromSlug,
@@ -46,6 +46,7 @@ import { CommentTipMap, useTipTxns } from 'web/hooks/use-tip-txns'
 import { useRouter } from 'next/router'
 import { useLiquidity } from 'web/hooks/use-liquidity'
 import { richTextToString } from 'common/util/parse'
+import { useSaveReferral } from 'web/hooks/use-save-referral'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -157,15 +158,10 @@ export function ContractPageContent(
 
   const ogCardProps = getOpenGraphProps(contract)
 
-  const router = useRouter()
-
-  useEffect(() => {
-    const { referrer } = router.query as {
-      referrer?: string
-    }
-    if (!user && router.isReady)
-      writeReferralInfo(contract.creatorUsername, contract.id, referrer)
-  }, [user, contract, router])
+  useSaveReferral(user, {
+    defaultReferrer: contract.creatorUsername,
+    contractId: contract.id,
+  })
 
   const rightSidebar = hasSidePanel ? (
     <Col className="gap-4">

web/pages/group/[...slugs]/index.tsx

@@ -53,6 +53,7 @@ import { searchInAny } from 'common/util/parse'
 import { useWindowSize } from 'web/hooks/use-window-size'
 import { CopyLinkButton } from 'web/components/copy-link-button'
 import { ENV_CONFIG } from 'common/envs/constants'
+import { useSaveReferral } from 'web/hooks/use-save-referral'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -155,13 +156,11 @@ export default function GroupPage(props: {
   const messages = useCommentsOnGroup(group?.id)
 
   const user = useUser()
-  useEffect(() => {
-    const { referrer } = router.query as {
-      referrer?: string
-    }
-    if (!user && router.isReady)
-      writeReferralInfo(creator.username, undefined, referrer, group?.id)
-  }, [user, creator, group, router])
+
+  useSaveReferral(user, {
+    defaultReferrer: creator.username,
+    groupId: group?.id,
+  })
 
   const { width } = useWindowSize()
   const chatDisabled = !group || group.chatDisabled

web/pages/home.tsx

@@ -12,6 +12,7 @@ import { getContractFromSlug } from 'web/lib/firebase/contracts'
 import { useTracking } from 'web/hooks/use-tracking'
 import { track } from 'web/lib/service/analytics'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
+import { useSaveReferral } from 'web/hooks/use-save-referral'
 
 export const getServerSideProps = redirectIfLoggedOut('/')
 
@@ -21,6 +22,8 @@ const Home = () => {
   const router = useRouter()
   useTracking('view home')
 
+  useSaveReferral()
+
   return (
     <>
       <Page suspend={!!contract}>

web/pages/index.tsx

@@ -7,6 +7,7 @@ import { LandingPagePanel } from 'web/components/landing-page-panel'
 import { Col } from 'web/components/layout/col'
 import { ManifoldLogo } from 'web/components/nav/manifold-logo'
 import { redirectIfLoggedIn } from 'web/lib/firebase/server-auth'
+import { useSaveReferral } from 'web/hooks/use-save-referral'
 
 export const getServerSideProps = redirectIfLoggedIn('/home', async (_) => {
   // These hardcoded markets will be shown in the frontpage for signed-out users:
@@ -32,6 +33,9 @@ export default function Home(props: { hotContracts: Contract[] }) {
   // on this page and they log in -- in the future we will make some cleaner way
   const user = useUser()
   const router = useRouter()
+
+  useSaveReferral()
+
   useEffect(() => {
     if (user != null) {
       router.replace('/home')

web/pages/referrals.tsx

@@ -0,0 +1,57 @@
+import { Col } from 'web/components/layout/col'
+import { SEO } from 'web/components/SEO'
+import { Title } from 'web/components/title'
+import { useUser } from 'web/hooks/use-user'
+import { Page } from 'web/components/page'
+import { useTracking } from 'web/hooks/use-tracking'
+import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
+import { REFERRAL_AMOUNT } from 'common/user'
+import { CopyLinkButton } from 'web/components/copy-link-button'
+import { ENV_CONFIG } from 'common/envs/constants'
+import { InfoBox } from 'web/components/info-box'
+
+export const getServerSideProps = redirectIfLoggedOut('/')
+
+export default function ReferralsPage() {
+  const user = useUser()
+
+  useTracking('view referrals')
+
+  const url = `https://${ENV_CONFIG.domain}?referrer=${user?.username}`
+
+  return (
+    <Page>
+      <SEO title="Referrals" description="" url="/add-funds" />
+
+      <Col className="items-center">
+        <Col className="h-full rounded bg-white p-4 py-8 sm:p-8 sm:shadow-md">
+          <Title className="!mt-0" text="Referrals" />
+          <img
+            className="mb-6 block -scale-x-100 self-center"
+            src="/logo-flapping-with-money.gif"
+            width={200}
+            height={200}
+          />
+
+          <div className={'mb-4 text-gray-500'}>
+            Invite new users to Manifold and get M${REFERRAL_AMOUNT} if they
+            sign up!
+          </div>
+
+          <CopyLinkButton
+            url={url}
+            tracking="copy referral link"
+            buttonClassName="btn-md rounded-l-none"
+            toastClassName={'-left-28 mt-1'}
+          />
+
+          <InfoBox
+            title="FYI"
+            className='mt-4 max-w-md'
+            text="You can also earn the referral bonus from sharing the link to any market or group you've created!"
+          />
+        </Col>
+      </Col>
+    </Page>
+  )
+}