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',
}),
})