diff --git a/web/components/contract/contract-mention.tsx b/web/components/contract/contract-mention.tsx new file mode 100644 index 00000000..09e47c79 --- /dev/null +++ b/web/components/contract/contract-mention.tsx @@ -0,0 +1,54 @@ +import clsx from 'clsx' +import { Contract } from 'common/contract' +import { formatMoney } from 'common/util/format' +import Link from 'next/link' +import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts' +import { fromNow } from 'web/lib/util/time' +import { BinaryContractOutcomeLabel } from '../outcome-label' +import { getColor } from './quick-bet' + +export function ContractMention(props: { contract: Contract }) { + const { contract } = props + const { outcomeType, resolution } = contract + const probTextColor = `text-${getColor(contract)}` + + return ( + + + + {contract.question} + + {outcomeType === 'BINARY' && ( + + {resolution ? ( + + ) : ( + getBinaryProbPercent(contract) + )} + + )} + {/* TODO: numeric? */} + + + ) +} + +function tooltipLabel(contract: Contract) { + const { resolutionTime, creatorName, volume, closeTime = 0 } = contract + const dateFormat = resolutionTime + ? `Resolved ${fromNow(resolutionTime)}` + : `${closeTime < Date.now() ? 'Closed' : 'Closes'} ${fromNow(closeTime)}` + + return `By ${creatorName}. ${formatMoney(volume)} bet. ${dateFormat}` +} diff --git a/web/components/editor/contract-mention.tsx b/web/components/editor/contract-mention.tsx index ddc81bc0..01517aae 100644 --- a/web/components/editor/contract-mention.tsx +++ b/web/components/editor/contract-mention.tsx @@ -6,7 +6,7 @@ import { } from '@tiptap/react' import clsx from 'clsx' import { useContract } from 'web/hooks/use-contract' -import { ContractCard } from '../contract/contract-card' +import { ContractMention } from '../contract/contract-mention' const name = 'contract-mention-component' @@ -14,13 +14,8 @@ const ContractMentionComponent = (props: any) => { const contract = useContract(props.node.attrs.id) return ( - - {contract && ( - - )} + + {contract && } ) } @@ -37,6 +32,5 @@ export const DisplayContractMention = Mention.extend({ addNodeView: () => ReactNodeViewRenderer(ContractMentionComponent, { // On desktop, render cards below half-width so you can stack two - className: 'inline-block sm:w-[calc(50%-1rem)] sm:mr-1', }), })