referral link on user page, manalinks, market share dialog; native sharer on mobile

web/components/contract/share-modal.tsx

@@ -14,7 +14,9 @@ import { Button } from '../button'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { track } from 'web/lib/service/analytics'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { User } from 'common/user'
+import { REFERRAL_AMOUNT, User } from 'common/user'
+import { SiteLink } from '../site-link'
+import { formatMoney } from 'common/util/format'
 
 export function ShareModal(props: {
   contract: Contract
@@ -26,36 +28,50 @@ export function ShareModal(props: {
 
   const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
 
-  const copyPayload = `https://${ENV_CONFIG.domain}${contractPath(contract)}${
+  const shareUrl = `https://${ENV_CONFIG.domain}${contractPath(contract)}${
     user?.username && contract.creatorUsername !== user?.username
       ? '?referrer=' + user?.username
       : ''
   }`
 
   return (
-    <Modal open={isOpen} setOpen={setOpen}>
+    <Modal open={isOpen} setOpen={setOpen} size="md">
       <Col className="gap-4 rounded bg-white p-4">
-        <Title className="!mt-0 mb-2" text="Share this market" />
+        <Title className="!mt-0 !mb-2" text="Share this market" />
+        <p>
+          Earn{' '}
+          <SiteLink href="/referrals">
+            {formatMoney(REFERRAL_AMOUNT)} referral bonus
+          </SiteLink>{' '}
+          if a new user signs up using the link!
+        </p>
 
         <Button
           size="2xl"
           color="gradient"
           className={'mb-2 flex max-w-xs self-center'}
           onClick={() => {
-            copyToClipboard(copyPayload)
-            track('copy share link')
+            if (window.navigator.share) {
+              window.navigator.share({
+                url: shareUrl,
+                title: contract.question,
+              })
+            } else {
+              copyToClipboard(shareUrl)
               toast.success('Link copied!', {
                 icon: linkIcon,
               })
+            }
+            track('copy share link')
           }}
         >
-          {linkIcon} Copy link
+          {!!window.navigator.share ? 'Share' : <>{linkIcon} Copy link</>}
         </Button>
 
-        <Row className="justify-start gap-4 self-center">
+        <Row className="z-0 justify-start gap-4 self-center">
           <TweetButton
             className="self-start"
-            tweetText={getTweetText(contract)}
+            tweetText={getTweetText(contract, shareUrl)}
           />
           <ShareEmbedButton contract={contract} toastClassName={'-left-20'} />
           <DuplicateContractButton contract={contract} />
@@ -65,13 +81,9 @@ export function ShareModal(props: {
   )
 }
 
-const getTweetText = (contract: Contract) => {
+const getTweetText = (contract: Contract, url: string) => {
   const { question, resolution } = contract
-
   const tweetDescription = resolution ? `\n\nResolved ${resolution}!` : ''
 
-  const timeParam = `${Date.now()}`.substring(7)
-  const url = `https://manifold.markets${contractPath(contract)}?t=${timeParam}`
-
   return `${question}\n\n${url}${tweetDescription}`
 }

web/components/share-icon-button.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { ShareIcon } from '@heroicons/react/outline'
+import { LinkIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 
 import { copyToClipboard } from 'web/lib/util/copy'
@@ -40,7 +40,7 @@ export function ShareIconButton(props: {
           setTimeout(() => setShowToast(false), 2000)
         }}
       >
-        <ShareIcon
+        <LinkIcon
           className={clsx(iconClassName ? iconClassName : 'h-[24px] w-5')}
           aria-hidden="true"
         />

web/components/user-page.tsx

@@ -280,8 +280,10 @@ export function UserPage(props: { user: User; currentUser?: User }) {
             }
           >
             <span>
-              Refer a friend and earn {formatMoney(500)} when they sign up! You
-              have <ReferralsButton user={user} currentUser={currentUser} />
+              <SiteLink href="/referrals">
+                Refer a friend and earn {formatMoney(500)} when they sign up!
+              </SiteLink>{' '}
+              You have <ReferralsButton user={user} currentUser={currentUser} />
             </span>
             <ShareIconButton
               copyPayload={`https://${ENV_CONFIG.domain}?referrer=${currentUser.username}`}

web/pages/links.tsx

@@ -26,6 +26,7 @@ import { ManalinkCardFromView } from 'web/components/manalink-card'
 import { Pagination } from 'web/components/pagination'
 import { Manalink } from 'common/manalink'
 import { REFERRAL_AMOUNT } from 'common/user'
+import { SiteLink } from 'web/components/site-link'
 
 const LINKS_PER_PAGE = 24
 
@@ -69,9 +70,11 @@ export default function LinkPage(props: { user: User }) {
         </Row>
         <p>
           You can use manalinks to send mana (M$) to other people, even if they
-          don&apos;t yet have a Manifold account. Manalinks are also eligible
-          for the referral bonus. Invite a new user to Manifold and get M$
-          {REFERRAL_AMOUNT} if they sign up!
+          don&apos;t yet have a Manifold account.{' '}
+          <SiteLink href="/referrals">
+            Eligible for {formatMoney(REFERRAL_AMOUNT)} referral bonus if a new
+            user signs up!
+          </SiteLink>
         </p>
         <Subtitle text="Your Manalinks" />
         <ManalinksDisplay