import clsx from 'clsx' import { formatMoney } from 'common/util/format' import { fromNow } from 'web/lib/util/time' import { Col } from 'web/components/layout/col' import { Row } from 'web/components/layout/row' import { Claim, Manalink } from 'common/manalink' import { useState } from 'react' import { ShareIconButton } from './share-icon-button' import { DotsHorizontalIcon } from '@heroicons/react/solid' import { contractDetailsButtonClassName } from './contract/contract-info-dialog' import { useUserById } from 'web/hooks/use-user' import getManalinkUrl from 'web/get-manalink-url' export type ManalinkInfo = { expiresTime: number | null maxUses: number | null uses: number amount: number message: string } export function ManalinkCard(props: { info: ManalinkInfo className?: string preview?: boolean }) { const { className, info, preview = false } = props const { expiresTime, maxUses, uses, amount, message } = info return (
{maxUses != null ? `${maxUses - uses}/${maxUses} uses left` : `Unlimited use`}
{expiresTime != null ? `Expires ${fromNow(expiresTime)}` : 'Never expires'}
{formatMoney(amount)}
{message}
) } export function ManalinkCardFromView(props: { className?: string link: Manalink highlightedSlug: string }) { const { className, link, highlightedSlug } = props const { message, amount, expiresTime, maxUses, claims } = link const [details, setDetails] = useState(false) return (
setDetails(!details)} > {details && ( )}
{maxUses != null ? `${maxUses - claims.length}/${maxUses} uses left` : `Unlimited use`}
{expiresTime != null ? `Expires ${fromNow(expiresTime)}` : 'Never expires'}
{formatMoney(amount)}
{message || '\n\n'}
) } function ClaimsList(props: { link: Manalink; className: string }) { const { link, className } = props return ( <>
Claimed by...
{link.claims.length > 0 ? ( <> {link.claims.map((claim) => ( ))} ) : (
No one has claimed this manalink yet! Share your manalink to start spreading the wealth.
)}
) } function Claim(props: { claim: Claim }) { const { claim } = props const who = useUserById(claim.toId) return (
{who?.name || 'Loading...'}
{fromNow(claim.claimedTime)}
) } function getManalinkGradient(amount: number) { if (amount < 20) { return 'from-indigo-200 via-indigo-500 to-indigo-800' } else if (amount >= 20 && amount < 50) { return 'from-fuchsia-200 via-fuchsia-500 to-fuchsia-800' } else if (amount >= 50 && amount < 100) { return 'from-rose-100 via-rose-400 to-rose-700' } else if (amount >= 100) { return 'from-amber-200 via-amber-500 to-amber-700' } } function getManalinkAmountColor(amount: number) { if (amount < 20) { return 'text-indigo-500' } else if (amount >= 20 && amount < 50) { return 'text-fuchsia-600' } else if (amount >= 50 && amount < 100) { return 'text-rose-600' } else if (amount >= 100) { return 'text-amber-600' } }