a0402830c5
* WIP liking markets with tip * Refactor Userlink, add MultiUserLink * Lint * Lint * Fix merge * Fix imports * wip liked contracts list * Cache likes and liked by user ids on contract * Refactor tip amount, reduce to M * Move back to M * Change positioning for large screens
74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import dayjs from 'dayjs'
|
|
import { User } from 'common/user'
|
|
import { useUser, useUserById } from 'web/hooks/use-user'
|
|
import { Row } from 'web/components/layout/row'
|
|
import { Avatar, EmptyAvatar } from 'web/components/avatar'
|
|
import { formatMoney } from 'common/util/format'
|
|
import { RelativeTimestamp } from 'web/components/relative-timestamp'
|
|
import React from 'react'
|
|
import { LiquidityProvision } from 'common/liquidity-provision'
|
|
import { UserLink } from 'web/components/user-link'
|
|
|
|
export function FeedLiquidity(props: {
|
|
className?: string
|
|
liquidity: LiquidityProvision
|
|
}) {
|
|
const { liquidity } = props
|
|
const { userId, createdTime } = liquidity
|
|
|
|
const isBeforeJune2022 = dayjs(createdTime).isBefore('2022-06-01')
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
const bettor = isBeforeJune2022 ? undefined : useUserById(userId)
|
|
|
|
const user = useUser()
|
|
const isSelf = user?.id === userId
|
|
|
|
return (
|
|
<>
|
|
<Row className="flex w-full gap-2 pt-3">
|
|
{isSelf ? (
|
|
<Avatar avatarUrl={user.avatarUrl} username={user.username} />
|
|
) : bettor ? (
|
|
<Avatar avatarUrl={bettor.avatarUrl} username={bettor.username} />
|
|
) : (
|
|
<div className="relative px-1">
|
|
<EmptyAvatar />
|
|
</div>
|
|
)}
|
|
<div className={'min-w-0 flex-1 py-1.5'}>
|
|
<LiquidityStatusText
|
|
liquidity={liquidity}
|
|
isSelf={isSelf}
|
|
bettor={bettor}
|
|
/>
|
|
</div>
|
|
</Row>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function LiquidityStatusText(props: {
|
|
liquidity: LiquidityProvision
|
|
isSelf: boolean
|
|
bettor?: User
|
|
}) {
|
|
const { liquidity, bettor, isSelf } = props
|
|
const { amount, createdTime } = liquidity
|
|
|
|
// TODO: Withdrawn liquidity will never be shown, since liquidity amounts currently are zeroed out upon withdrawal.
|
|
const bought = amount >= 0 ? 'added' : 'withdrew'
|
|
const money = formatMoney(Math.abs(amount))
|
|
|
|
return (
|
|
<div className="text-sm text-gray-500">
|
|
{bettor ? (
|
|
<UserLink name={bettor.name} username={bettor.username} />
|
|
) : (
|
|
<span>{isSelf ? 'You' : 'A trader'}</span>
|
|
)}{' '}
|
|
{bought} a subsidy of {money}
|
|
<RelativeTimestamp time={createdTime} />
|
|
</div>
|
|
)
|
|
}
|