import { HeartIcon } from '@heroicons/react/outline' import { Button } from 'web/components/button' import React, { useMemo } from 'react' import { Contract } from 'common/contract' import { User } from 'common/user' import { useUserLikes } from 'web/hooks/use-likes' import toast from 'react-hot-toast' import { formatMoney } from 'common/util/format' import { likeContract } from 'web/lib/firebase/likes' 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' import { Tooltip } from '../tooltip' 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') .map((l) => l.id) const onLike = async () => { if (!user) return firebaseLogin() await likeContract(user, contract) toast(`You tipped ${contract.creatorName} ${formatMoney(LIKE_TIP_AMOUNT)}!`) } return ( <Tooltip text={`Tip ${formatMoney(LIKE_TIP_AMOUNT)}`} placement="bottom" noTap noFade > <Button size={'sm'} className={'max-w-xs self-center'} color={'gray-white'} onClick={onLike} > <Col className={'relative items-center sm:flex-row'}> <HeartIcon className={clsx( 'h-5 w-5 sm:h-6 sm:w-6', totalTipped > 0 ? 'mr-2' : '', user && (userLikedContractIds?.includes(contract.id) || (!likes && contract.likedByUserIds?.includes(user.id))) ? 'fill-red-500 text-red-500' : '' )} /> {totalTipped > 0 && ( <div className={clsx( 'bg-greyscale-6 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1', totalTipped > 99 ? 'text-[0.4rem] sm:text-[0.5rem]' : 'sm:text-2xs text-[0.5rem]' )} > {totalTipped} </div> )} </Col> </Button> </Tooltip> ) }