Link to user from feed mentions. Show name instead of username in card.

web/components/bets-list.tsx

@@ -151,9 +151,10 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
           </Row>
 
           <Row className="gap-2 text-gray-500 text-sm">
-            <div>
-              <UserLink username={contract.creatorUsername} />
-            </div>
+            <UserLink
+              name={contract.creatorName}
+              username={contract.creatorUsername}
+            />
             {resolution && (
               <>
                 <div>•</div>

web/components/contract-card.tsx

@@ -102,15 +102,17 @@ export function AbbrContractDetails(props: {
   showHotVolume?: boolean
 }) {
   const { contract, showHotVolume } = props
-  const { volume24Hours } = contract
+  const { volume24Hours, creatorName, creatorUsername } = contract
   const { truePool } = contractMetrics(contract)
 
   return (
     <Col className={clsx('text-sm text-gray-500 gap-2')}>
       <Row className="gap-2 flex-wrap">
-        <div className="whitespace-nowrap">
-          <UserLink username={contract.creatorUsername} />
-        </div>
+        <UserLink
+          className="whitespace-nowrap"
+          name={creatorName}
+          username={creatorUsername}
+        />
         <div>•</div>
         {showHotVolume ? (
           <div className="whitespace-nowrap">
@@ -127,7 +129,8 @@ export function AbbrContractDetails(props: {
 
 export function ContractDetails(props: { contract: Contract }) {
   const { contract } = props
-  const { question, description, closeTime } = contract
+  const { question, description, closeTime, creatorName, creatorUsername } =
+    contract
   const { truePool, createdDate, resolvedDate } = contractMetrics(contract)
 
   const tags = parseTags(`${question} ${description}`).map((tag) => `#${tag}`)
@@ -135,9 +138,11 @@ export function ContractDetails(props: { contract: Contract }) {
   return (
     <Col className="text-sm text-gray-500 gap-2 sm:flex-row sm:flex-wrap">
       <Row className="gap-2 flex-wrap">
-        <div className="whitespace-nowrap">
-          <UserLink username={contract.creatorUsername} />
-        </div>
+        <UserLink
+          className="whitespace-nowrap"
+          name={creatorName}
+          username={creatorUsername}
+        />
         <div className="">•</div>
         <div className="whitespace-nowrap">
           {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}

web/components/contract-feed.tsx

@@ -31,6 +31,7 @@ import { formatMoney } from '../lib/util/format'
 import { ResolutionOrChance } from './contract-card'
 import { SiteLink } from './site-link'
 import { Col } from './layout/col'
+import { UserLink } from './user-page'
 dayjs.extend(relativeTime)
 
 function FeedComment(props: { activityItem: any }) {
@@ -205,6 +206,8 @@ export function ContractDescription(props: {
 
 function FeedQuestion(props: { contract: Contract }) {
   const { contract } = props
+  const { creatorName, creatorUsername, createdTime, question, resolution } =
+    contract
   const { probPercent } = contractMetrics(contract)
 
   return (
@@ -218,19 +221,23 @@ function FeedQuestion(props: { contract: Contract }) {
       </div>
       <div className="min-w-0 flex-1 py-1.5">
         <div className="text-sm text-gray-500 mb-2">
-          <span className="text-gray-900">{contract.creatorName}</span> asked{' '}
-          <Timestamp time={contract.createdTime} />
+          <UserLink
+            className="text-gray-900"
+            name={creatorName}
+            username={creatorUsername}
+          />{' '}
+          asked <Timestamp time={createdTime} />
         </div>
         <Col className="items-start sm:flex-row justify-between gap-2 sm:gap-4 mb-4 mr-2">
           <SiteLink
             href={contractPath(contract)}
             className="text-lg sm:text-xl text-indigo-700"
           >
-            {contract.question}
+            {question}
           </SiteLink>
           <ResolutionOrChance
             className="items-center"
-            resolution={contract.resolution}
+            resolution={resolution}
             probPercent={probPercent}
           />
         </Col>
@@ -242,6 +249,7 @@ function FeedQuestion(props: { contract: Contract }) {
 
 function FeedDescription(props: { contract: Contract }) {
   const { contract } = props
+  const { creatorName, creatorUsername } = contract
   const user = useUser()
   const isCreator = user?.id === contract.creatorId
 
@@ -256,8 +264,12 @@ function FeedDescription(props: { contract: Contract }) {
       </div>
       <div className="min-w-0 flex-1 py-1.5">
         <div className="text-sm text-gray-500">
-          <span className="text-gray-900">{contract.creatorName}</span> created
-          this market <Timestamp time={contract.createdTime} />
+          <UserLink
+            className="text-gray-900"
+            name={creatorName}
+            username={creatorUsername}
+          />{' '}
+          created this market <Timestamp time={contract.createdTime} />
         </div>
         <ContractDescription contract={contract} isCreator={isCreator} />
       </div>
@@ -280,6 +292,7 @@ function OutcomeIcon(props: { outcome?: 'YES' | 'NO' | 'CANCEL' }) {
 
 function FeedResolve(props: { contract: Contract }) {
   const { contract } = props
+  const { creatorName, creatorUsername } = contract
   const resolution = contract.resolution || 'CANCEL'
 
   return (
@@ -293,8 +306,12 @@ function FeedResolve(props: { contract: Contract }) {
       </div>
       <div className="min-w-0 flex-1 py-1.5">
         <div className="text-sm text-gray-500">
-          <span className="text-gray-900">{contract.creatorName}</span> resolved
-          this market to <OutcomeLabel outcome={resolution} />{' '}
+          <UserLink
+            className="text-gray-900"
+            name={creatorName}
+            username={creatorUsername}
+          />{' '}
+          resolved this market to <OutcomeLabel outcome={resolution} />{' '}
           <Timestamp time={contract.resolutionTime || 0} />
         </div>
       </div>

web/components/user-page.tsx

@@ -7,12 +7,18 @@ import { SEO } from './SEO'
 import { Page } from './page'
 import { SiteLink } from './site-link'
 
-export function UserLink(props: { username: string; className?: string }) {
-  const { username, className } = props
+export function UserLink(props: {
+  name: string
+  username: string
+  showUsername?: boolean
+  className?: string
+}) {
+  const { name, username, showUsername, className } = props
 
   return (
     <SiteLink href={`/${username}`} className={className}>
-      @{username}
+      {name}
+      {showUsername && ` (@${username})`}
     </SiteLink>
   )
 }