added follow verification, put back in watch/tip buttons

web/components/contract/contract-details.tsx

@@ -160,7 +160,7 @@ export function ContractDetails(props: {
           </Row>
           <Row className="text-2xs text-greyscale-4 gap-2 sm:text-xs">
             {(!!closeTime || !!resolvedDate) && (
-              <Row className="items-center gap-1">
+              <Row className="select-none items-center gap-1">
                 {resolvedDate && resolutionTime ? (
                   <>
                     <DateTimeTooltip
@@ -169,15 +169,15 @@ export function ContractDetails(props: {
                     >
                       <Row>
                         <div>resolved&nbsp;</div>
-                        <b>{resolvedDate}</b>
+                        {resolvedDate}
                       </Row>
                     </DateTimeTooltip>
                   </>
                 ) : null}
 
-                {!resolvedDate && closeTime && user && (
+                {!resolvedDate && closeTime && (
                   <Row>
-                    <div>Closes&nbsp;</div>
+                    <div>closes&nbsp;</div>
                     <EditableCloseDate
                       closeTime={closeTime}
                       contract={contract}

web/components/contract/contract-info-dialog.tsx

@@ -86,15 +86,7 @@ export function ContractInfoDialog(props: {
 
       <Modal open={open} setOpen={setOpen}>
         <Col className="gap-4 rounded bg-white p-6">
-          <Row className="w-full justify-between">
-            <Title className="!mt-0 !mb-0" text="This Market" />
-            <div>
-              <FollowMarketButton contract={contract} user={user} />
-              {user?.id !== contract.creatorId && (
-                <LikeMarketButton contract={contract} user={user} />
-              )}
-            </div>
-          </Row>
+          <Title className="!mt-0 !mb-0" text="This Market" />
 
           <table className="table-compact table-zebra table w-full text-gray-500">
             <tbody>

web/components/contract/extra-contract-actions-row.tsx

@@ -15,6 +15,7 @@ import { withTracking } from 'web/lib/service/analytics'
 import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
 import { CHALLENGES_ENABLED } from 'common/challenge'
 import ChallengeIcon from 'web/lib/icons/challenge-icon'
+import { getIsMobile } from './contract-details'
 
 export function ExtraContractActionsRow(props: { contract: Contract }) {
   const { contract } = props
@@ -28,6 +29,10 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
 
   return (
     <Row>
+      <FollowMarketButton contract={contract} user={user} />
+      {user?.id !== contract.creatorId && (
+        <LikeMarketButton contract={contract} user={user} />
+      )}
       <Button
         size="sm"
         color="gray-white"

web/components/follow-button.tsx

@@ -1,6 +1,6 @@
 import { CheckCircleIcon, PlusCircleIcon } from '@heroicons/react/solid'
 import clsx from 'clsx'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useFollows } from 'web/hooks/use-follows'
 import { useUser } from 'web/hooks/use-user'
 import { follow, unfollow } from 'web/lib/firebase/users'
@@ -76,14 +76,41 @@ export function UserFollowButton(props: { userId: string; small?: boolean }) {
 
 export function MiniUserFollowButton(props: { userId: string }) {
   const { userId } = props
-  const currentUser = useUser()
-  const following = useFollows(currentUser?.id)
-  const isFollowing = following?.includes(userId)
   const user = useUser()
+  const following = useFollows(user?.id)
+  const isFollowing = following?.includes(userId)
+  const isFirstRender = useRef(true)
+  const [justFollowed, setJustFollowed] = useState(false)
+  // const [followFade, setfollowFade] = useState(false)
 
+  useEffect(() => {
+    if (isFirstRender.current) {
+      if (isFollowing != undefined) {
+        isFirstRender.current = false
+      }
+      return
+    }
+    if (isFollowing) {
+      setJustFollowed(true)
+      setTimeout(() => {
+        setJustFollowed(false)
+      }, 1000)
+    }
+  }, [isFollowing])
+
+  if (justFollowed) {
+    return (
+      <CheckCircleIcon
+        className={clsx(
+          'text-highlight-blue ml-3 mt-2 h-5 w-5 rounded-full bg-white sm:mr-2'
+        )}
+        aria-hidden="true"
+      />
+    )
+  }
   if (
-    !currentUser ||
-    currentUser.id === userId ||
+    !user ||
+    user.id === userId ||
     isFollowing ||
     !user ||
     isFollowing === undefined
@@ -91,18 +118,14 @@ export function MiniUserFollowButton(props: { userId: string }) {
     return null
   return (
     <>
-      <Button
-        size="sm"
-        color="highlight-blue"
-        onClick={withTracking(() => follow(currentUser.id, userId), 'follow')}
-      >
+      <button onClick={withTracking(() => follow(user.id, userId), 'follow')}>
         <PlusCircleIcon
           className={clsx(
-            'hover:text-hover-blue h-5 w-5 rounded-full bg-white sm:mr-2'
+            'text-highlight-blue hover:text-hover-blue mt-2 ml-3 h-5 w-5 rounded-full bg-white sm:mr-2'
           )}
           aria-hidden="true"
         />
-      </Button>
+      </button>
     </>
   )
 }