Add referral link to your user page

web/components/user-page.tsx

@@ -8,13 +8,14 @@ import {
   PencilIcon,
   ScaleIcon,
 } from '@heroicons/react/outline'
+import toast from 'react-hot-toast'
 
 import { User } from 'web/lib/firebase/users'
 import { useUser } from 'web/hooks/use-user'
 import { CreatorContractsList } from './contract/contracts-grid'
 import { SEO } from './SEO'
 import { Page } from './page'
-import { SiteLink } from './site-link'
+import { linkClass, SiteLink } from './site-link'
 import { Avatar } from './avatar'
 import { Col } from './layout/col'
 import { Linkify } from './linkify'
@@ -35,6 +36,9 @@ import {
   hasCompletedStreakToday,
 } from 'web/components/profile/betting-streak-modal'
 import { LoansModal } from './profile/loans-modal'
+import { copyToClipboard } from 'web/lib/util/copy'
+import { track } from 'web/lib/service/analytics'
+import { DOMAIN } from 'common/envs/constants'
 
 export function UserPage(props: { user: User }) {
   const { user } = props
@@ -63,6 +67,7 @@ export function UserPage(props: { user: User }) {
   }, [])
 
   const profit = user.profitCached.allTime
+  const referralUrl = `https://${DOMAIN}?referrer=${user?.username}`
 
   return (
     <Page key={user.id}>
@@ -184,6 +189,30 @@ export function UserPage(props: { user: User }) {
                   </Row>
                 </SiteLink>
               )}
+
+              {isCurrentUser && (
+                <div
+                  className={clsx(
+                    linkClass,
+                    'text-greyscale-4 cursor-pointer text-sm'
+                  )}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    copyToClipboard(referralUrl)
+                    toast.success('Referral link copied!', {
+                      icon: (
+                        <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
+                      ),
+                    })
+                    track('copy referral link')
+                  }}
+                >
+                  <Row className="items-center gap-1">
+                    <LinkIcon className="h-4 w-4" />
+                    Earn M$250 per referral
+                  </Row>
+                </div>
+              )}
             </Row>
           )}
           <QueryUncontrolledTabs

web/pages/date-docs/[username].tsx

@@ -2,6 +2,8 @@ import { getDateDoc } from 'web/lib/firebase/posts'
 import { ArrowLeftIcon, LinkIcon } from '@heroicons/react/outline'
 import { Page } from 'web/components/page'
 import dayjs from 'dayjs'
+import toast from 'react-hot-toast'
+import clsx from 'clsx'
 
 import { DateDoc } from 'common/post'
 import { Content } from 'web/components/editor'
@@ -12,10 +14,8 @@ import { User } from 'web/lib/firebase/users'
 import { DOMAIN } from 'common/envs/constants'
 import Custom404 from '../404'
 import { ShareIcon } from '@heroicons/react/solid'
-import clsx from 'clsx'
 import { Button } from 'web/components/button'
 import { track } from '@amplitude/analytics-browser'
-import toast from 'react-hot-toast'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { useUser } from 'web/hooks/use-user'
 import { PostCommentsActivity, RichEditPost } from '../post/[...slugs]'