Add small follow button after creator name in market page

web/components/contract/contract-details.tsx

@@ -23,6 +23,7 @@ import { Bet } from 'common/bet'
 import NewContractBadge from '../new-contract-badge'
 import { CATEGORY_LIST } from 'common/categories'
 import { TagsList } from '../tags-list'
+import { UserFollowButton } from '../follow-button'
 
 export function MiscDetails(props: {
   contract: Contract
@@ -103,7 +104,7 @@ export function ContractDetails(props: {
   disabled?: boolean
 }) {
   const { contract, bets, isCreator, disabled } = props
-  const { closeTime, creatorName, creatorUsername } = contract
+  const { closeTime, creatorName, creatorUsername, creatorId } = contract
   const { volumeLabel, resolvedDate } = contractMetrics(contract)
 
   return (
@@ -124,6 +125,7 @@ export function ContractDetails(props: {
             username={creatorUsername}
           />
         )}
+        {!disabled && <UserFollowButton userId={creatorId} small />}
       </Row>
 
       {(!!closeTime || !!resolvedDate) && (

web/components/follow-button.tsx

@@ -1,19 +1,27 @@
 import clsx from 'clsx'
+import { useFollows } from 'web/hooks/use-follows'
 import { useUser } from 'web/hooks/use-user'
+import { follow, unfollow } from 'web/lib/firebase/users'
 
 export function FollowButton(props: {
   isFollowing: boolean | undefined
   onFollow: () => void
   onUnfollow: () => void
+  small?: boolean
   className?: string
 }) {
-  const { isFollowing, onFollow, onUnfollow, className } = props
+  const { isFollowing, onFollow, onUnfollow, small, className } = props
 
   const user = useUser()
 
+  const smallStyle =
+    'btn !btn-xs border-2 border-gray-600 bg-white normal-case text-gray-600 hover:border-gray-600 hover:bg-white hover:text-gray-600'
+
   if (!user || isFollowing === undefined)
     return (
-      <button className={clsx('btn btn-sm invisible', className)}>
+      <button
+        className={clsx('btn btn-sm invisible', small && smallStyle, className)}
+      >
         Follow
       </button>
     )
@@ -21,7 +29,11 @@ export function FollowButton(props: {
   if (isFollowing) {
     return (
       <button
-        className={clsx('btn btn-outline btn-sm', className)}
+        className={clsx(
+          'btn btn-outline btn-sm',
+          small && smallStyle,
+          className
+        )}
         onClick={onUnfollow}
       >
         Following
@@ -30,8 +42,29 @@ export function FollowButton(props: {
   }
 
   return (
-    <button className={clsx('btn btn-sm', className)} onClick={onFollow}>
+    <button
+      className={clsx('btn btn-sm', small && smallStyle, className)}
+      onClick={onFollow}
+    >
       Follow
     </button>
   )
 }
+
+export function UserFollowButton(props: { userId: string; small?: boolean }) {
+  const { userId, small } = props
+  const currentUser = useUser()
+  const following = useFollows(currentUser?.id)
+  const isFollowing = following?.includes(userId)
+
+  if (!currentUser) return null
+
+  return (
+    <FollowButton
+      isFollowing={isFollowing}
+      onFollow={() => follow(currentUser.id, userId)}
+      onUnfollow={() => unfollow(currentUser.id, userId)}
+      small={small}
+    />
+  )
+}