diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index 824d364d..64604bc7 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { Fragment, useState } from 'react'
import {
compute,
Contract,
@@ -13,7 +13,7 @@ import router from 'next/router'
import { useUser } from '../hooks/use-user'
import { Row } from './layout/row'
import dayjs from 'dayjs'
-import { Title } from './title'
+import Link from 'next/link'
function ContractDescription(props: {
contract: Contract
@@ -33,9 +33,49 @@ function ContractDescription(props: {
setDescription(editStatement())
}
+ // Return a JSX span, linkifying @username, #hashtags, and https://...
+ function Linkify(props: { text: string }) {
+ const { text } = props
+ const regex = /(?:^|\s)(?:[@#][a-z0-9_]+|https?:\/\/\S+)/gi
+ const matches = text.match(regex) || []
+ const links = matches.map((match) => {
+ // Matches are in the form: " @username" or "https://example.com"
+ const whitespace = match.match(/^\s/)
+ const symbol = match.trim().substring(0, 1)
+ const tag = match.trim().substring(1)
+ const href =
+ {
+ '@': `/${tag}`,
+ '#': `/tag/${tag}`,
+ }[symbol] ?? match
+
+ return (
+ <>
+ {whitespace}
+
+
+ {symbol}
+ {tag}
+
+
+ >
+ )
+ })
+ return (
+
+ {text.split(regex).map((part, i) => (
+