Show how much you've tipped a market

web/components/contract/like-market-button.tsx

@@ -1,6 +1,6 @@
 import { HeartIcon } from '@heroicons/react/outline'
 import { Button } from 'web/components/button'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Contract } from 'common/contract'
 import { User } from 'common/user'
 import { useUserLikes } from 'web/hooks/use-likes'
@@ -11,13 +11,20 @@ import { LIKE_TIP_AMOUNT } from 'common/like'
 import clsx from 'clsx'
 import { Col } from 'web/components/layout/col'
 import { firebaseLogin } from 'web/lib/firebase/users'
+import { useMarketTipTxns } from 'web/hooks/use-tip-txns'
+import { sum } from 'lodash'
 
 export function LikeMarketButton(props: {
   contract: Contract
   user: User | null | undefined
 }) {
   const { contract, user } = props
-
+  const tips = useMarketTipTxns(contract.id).filter(
+    (txn) => txn.fromId === user?.id
+  )
+  const totalTipped = useMemo(() => {
+    return sum(tips.map((tip) => tip.amount))
+  }, [tips])
   const likes = useUserLikes(user?.id)
   const userLikedContractIds = likes
     ?.filter((l) => l.type === 'contract')
@@ -36,7 +43,7 @@ export function LikeMarketButton(props: {
       color={'gray-white'}
       onClick={onLike}
     >
-      <Col className={'sm:flex-row sm:gap-x-2'}>
+      <Col className={'items-center sm:flex-row sm:gap-x-2'}>
         <HeartIcon
           className={clsx(
             'h-6 w-6',
@@ -47,7 +54,7 @@ export function LikeMarketButton(props: {
               : ''
           )}
         />
-        Tip
+        Tip {totalTipped > 0 ? `(${formatMoney(totalTipped)})` : ''}
       </Col>
     </Button>
   )

web/hooks/use-tip-txns.ts

@@ -29,3 +29,15 @@ export function useTipTxns(on: {
     })
   }, [txns])
 }
+
+export function useMarketTipTxns(contractId: string): TipTxn[] {
+  const [txns, setTxns] = useState<TipTxn[]>([])
+
+  useEffect(() => {
+    return listenForTipTxns(contractId, (txns) => {
+      setTxns(txns.filter((txn) => !txn.data.commentId))
+    })
+  }, [contractId])
+
+  return txns
+}