Show referrals banner on user-page

web/components/referrals-button.tsx

@@ -5,13 +5,13 @@ import { prefetchUsers, useUserById } from 'web/hooks/use-user'
 import { Col } from './layout/col'
 import { Modal } from './layout/modal'
 import { Tabs } from './layout/tabs'
-import { TextButton } from './text-button'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 import { UserLink } from 'web/components/user-page'
 import { useReferrals } from 'web/hooks/use-referrals'
 import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { getUser, updateUser } from 'web/lib/firebase/users'
+import { TextButton } from 'web/components/text-button'
 
 export function ReferralsButton(props: { user: User; currentUser?: User }) {
   const { user, currentUser } = props
@@ -24,7 +24,6 @@ export function ReferralsButton(props: { user: User; currentUser?: User }) {
         <span className="font-semibold">{referralIds?.length ?? ''}</span>{' '}
         Referrals
       </TextButton>
-
       <ReferralsDialog
         user={user}
         referralIds={referralIds ?? []}

web/components/text-button.tsx

@@ -8,7 +8,7 @@ export function TextButton(props: {
   const { onClick, children, className } = props
 
   return (
-    <div
+    <span
       className={clsx(
         className,
         'cursor-pointer gap-2 hover:underline hover:decoration-indigo-400 hover:decoration-2 focus:underline focus:decoration-indigo-400 focus:decoration-2'
@@ -17,6 +17,6 @@ export function TextButton(props: {
       onClick={onClick}
     >
       {children}
-    </div>
+    </span>
   )
 }

web/components/user-page.tsx

@@ -8,9 +8,9 @@ import Confetti from 'react-confetti'
 
 import {
   follow,
+  getPortfolioHistory,
   unfollow,
   User,
-  getPortfolioHistory,
 } from 'web/lib/firebase/users'
 import { CreatorContractsList } from './contract/contracts-list'
 import { SEO } from './SEO'
@@ -40,6 +40,8 @@ import { filterDefined } from 'common/util/array'
 import { useUserBets } from 'web/hooks/use-user-bets'
 import { ReferralsButton } from 'web/components/referrals-button'
 import { formatMoney } from 'common/util/format'
+import { ShareIconButton } from 'web/components/share-icon-button'
+import { ENV_CONFIG } from 'common/envs/constants'
 
 export function UserLink(props: {
   name: string
@@ -212,9 +214,6 @@ export function UserPage(props: { user: User; currentUser?: User }) {
           <Row className="gap-4">
             <FollowingButton user={user} />
             <FollowersButton user={user} />
-            {currentUser?.username === 'ian' && (
-              <ReferralsButton user={user} currentUser={currentUser} />
-            )}
             <GroupsButton user={user} />
           </Row>
 
@@ -269,7 +268,26 @@ export function UserPage(props: { user: User; currentUser?: User }) {
           )}
         </Col>
 
-        <Spacer h={10} />
+        <Spacer h={5} />
+        {currentUser?.id === user.id && (
+          <Row
+            className={
+              'w-full items-center justify-center gap-2 rounded-md border-2 border-indigo-100 bg-indigo-50 p-2 text-indigo-600'
+            }
+          >
+            <span>
+              Refer a friend and earn {formatMoney(500)} when they sign up! You
+              have <ReferralsButton user={user} currentUser={currentUser} />
+            </span>
+            <ShareIconButton
+              copyPayload={`https://${ENV_CONFIG.domain}?referrer=${currentUser.username}`}
+              toastClassName={'sm:-left-40 -left-40 min-w-[250%]'}
+              buttonClassName={'h-10 w-10'}
+              iconClassName={'h-8 w-8 text-indigo-700'}
+            />
+          </Row>
+        )}
+        <Spacer h={5} />
 
         {usersContracts !== 'loading' && contractsById && usersComments ? (
           <QueryUncontrolledTabs