Unfollow/follow => heart

web/components/contract/contract-overview.tsx

@@ -22,6 +22,7 @@ import { ContractDescription } from './contract-description'
 import { ContractDetails } from './contract-details'
 import { NumericGraph } from './numeric-graph'
 import { ShareRow } from './share-row'
+import { FollowMarketButton } from 'web/components/follow-market-button'
 
 export const ContractOverview = (props: {
   contract: Contract
@@ -44,37 +45,42 @@ export const ContractOverview = (props: {
           <div className="text-2xl text-indigo-700 md:text-3xl">
             <Linkify text={question} />
           </div>
+          <Row className={'hidden gap-3 xl:flex'}>
+            <FollowMarketButton contract={contract} user={user} />
 
-          {isBinary && (
+            {isBinary && (
-            <BinaryResolutionOrChance
+              <BinaryResolutionOrChance
-              className="hidden items-end xl:flex"
+                className="items-end"
-              contract={contract}
+                contract={contract}
-              large
+                large
-            />
+              />
-          )}
+            )}
 
-          {isPseudoNumeric && (
+            {isPseudoNumeric && (
-            <PseudoNumericResolutionOrExpectation
+              <PseudoNumericResolutionOrExpectation
-              contract={contract}
+                contract={contract}
-              className="hidden items-end xl:flex"
+                className="items-end"
-            />
+              />
-          )}
+            )}
 
-          {outcomeType === 'NUMERIC' && (
+            {outcomeType === 'NUMERIC' && (
-            <NumericResolutionOrExpectation
+              <NumericResolutionOrExpectation
-              contract={contract}
+                contract={contract}
-              className="hidden items-end xl:flex"
+                className="items-end"
-            />
+              />
-          )}
+            )}
+          </Row>
         </Row>
 
         {isBinary ? (
           <Row className="items-center justify-between gap-4 xl:hidden">
             <BinaryResolutionOrChance contract={contract} />
-
+            <Row className={'items-start gap-2'}>
-            {tradingAllowed(contract) && (
+              <FollowMarketButton contract={contract} user={user} />
-              <BetButton contract={contract as CPMMBinaryContract} />
+              {tradingAllowed(contract) && (
-            )}
+                <BetButton contract={contract as CPMMBinaryContract} />
+              )}
+            </Row>
           </Row>
         ) : isPseudoNumeric ? (
           <Row className="items-center justify-between gap-4 xl:hidden">

web/components/contract/share-row.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx'
-import { EyeIcon, EyeOffIcon, ShareIcon } from '@heroicons/react/outline'
+import { ShareIcon } from '@heroicons/react/outline'
 
 import { Row } from '../layout/row'
-import { Contract, contracts } from 'web/lib/firebase/contracts'
+import { Contract } from 'web/lib/firebase/contracts'
 import { useState } from 'react'
 import { Button } from 'web/components/button'
 import { CreateChallengeModal } from '../challenges/create-challenge-modal'
@@ -10,8 +10,6 @@ import { User } from 'common/user'
 import { CHALLENGES_ENABLED } from 'common/challenge'
 import { ShareModal } from './share-modal'
 import { withTracking } from 'web/lib/service/analytics'
-import { collection, deleteDoc, doc, setDoc } from 'firebase/firestore'
-import { useContractFollows } from 'web/hooks/use-follows'
 
 export function ShareRow(props: {
   contract: Contract
@@ -25,7 +23,6 @@ export function ShareRow(props: {
 
   const [isOpen, setIsOpen] = useState(false)
   const [isShareOpen, setShareOpen] = useState(false)
-  const followers = useContractFollows(contract.id)
 
   return (
     <Row className="mt-2">
@@ -65,42 +62,6 @@ export function ShareRow(props: {
           />
         </Button>
       )}
-      {user && (
-        <Button
-          size={'lg'}
-          color={'gray-white'}
-          onClick={async () => {
-            const followDoc = doc(
-              collection(contracts, contract.id, 'follows'),
-              user.id
-            )
-            if (followers?.includes(user.id)) await deleteDoc(followDoc)
-            else
-              await setDoc(followDoc, {
-                id: user.id,
-                createdTime: Date.now(),
-              })
-          }}
-        >
-          {followers?.includes(user.id) ? (
-            <Row>
-              <EyeOffIcon
-                className={clsx('mr-2 h-[24px] w-5')}
-                aria-hidden="true"
-              />
-              Unfollow
-            </Row>
-          ) : (
-            <Row>
-              <EyeIcon
-                className={clsx('mr-2 h-[24px] w-5')}
-                aria-hidden="true"
-              />
-              Follow
-            </Row>
-          )}
-        </Button>
-      )}
     </Row>
   )
 }

web/components/follow-market-button.tsx

@@ -0,0 +1,53 @@
+import { Button } from 'web/components/button'
+import {
+  Contract,
+  followContract,
+  unFollowContract,
+} from 'web/lib/firebase/contracts'
+import toast from 'react-hot-toast'
+import { CheckIcon, HeartIcon } from '@heroicons/react/outline'
+import clsx from 'clsx'
+import { User } from 'common/user'
+import { useContractFollows } from 'web/hooks/use-follows'
+import { firebaseLogin } from 'web/lib/firebase/users'
+
+export const FollowMarketButton = (props: {
+  contract: Contract
+  user: User | undefined | null
+}) => {
+  const { contract, user } = props
+  const followers = useContractFollows(contract.id)
+
+  return (
+    <Button
+      size={'lg'}
+      color={'gray-white'}
+      onClick={async () => {
+        if (!user) return firebaseLogin()
+        if (followers?.includes(user.id)) {
+          await unFollowContract(contract.id, user.id)
+          toast('Notifications from this market are now silenced.', {
+            icon: <CheckIcon className={'text-primary h-5 w-5'} />,
+          })
+        } else {
+          await followContract(contract.id, user.id)
+          toast('You are now following this market!', {
+            icon: <CheckIcon className={'text-primary h-5 w-5'} />,
+          })
+        }
+      }}
+    >
+      {followers?.includes(user?.id ?? 'nope') ? (
+        <HeartIcon
+          className={clsx('h-6 w-6  fill-red-600 stroke-red-600 xl:h-7 xl:w-7')}
+          aria-hidden="true"
+        />
+      ) : (
+        <HeartIcon
+          className={clsx('h-6 w-6 xl:h-7 xl:w-7')}
+          aria-hidden="true"
+        />
+      )}
+    </Button>
+  )
+}

web/lib/firebase/contracts.ts

@@ -222,6 +222,19 @@ export function listenForContractFollows(
   )
 }
 
+export async function followContract(contractId: string, userId: string) {
+  const followDoc = doc(collection(contracts, contractId, 'follows'), userId)
+  return await setDoc(followDoc, {
+    id: userId,
+    createdTime: Date.now(),
+  })
+}
+
+export async function unFollowContract(contractId: string, userId: string) {
+  const followDoc = doc(collection(contracts, contractId, 'follows'), userId)
+  await deleteDoc(followDoc)
+}
+
 function chooseRandomSubset(contracts: Contract[], count: number) {
   const fiveMinutes = 5 * 60 * 1000
   const seed = Math.round(Date.now() / fiveMinutes).toString()