Link to UserPage with @username

web/components/bets-list.tsx

@@ -11,6 +11,7 @@ import { Spacer } from './layout/spacer'
 import { Contract, path } from '../lib/firebase/contracts'
 import { Row } from './layout/row'
 import { calculateWinnings, currentValue } from '../lib/calculation/contract'
+import { UserLink } from '../pages/account'
 
 export function BetsList(props: { user: User }) {
   const { user } = props
@@ -65,7 +66,9 @@ function MyContractBets(props: { contractId: string; bets: Bet[] }) {
           </div>
 
           <Row className="gap-2 text-gray-500 text-sm">
-            <div>By {contract.creatorName}</div>
+            <div>
+              <UserLink displayName={contract.creatorName} />
+            </div>
             {resolution && <div>•</div>}
             {resolution === 'YES' && (
               <div className="text-primary">Resolved YES</div>

web/components/contracts-list.tsx

@@ -2,7 +2,6 @@ import Link from 'next/link'
 import { Col } from '../components/layout/col'
 import { Row } from '../components/layout/row'
 import { useEffect, useState } from 'react'
-import { useUser } from '../hooks/use-user'
 import {
   compute,
   Contract,
@@ -11,6 +10,7 @@ import {
 } from '../lib/firebase/contracts'
 import { formatMoney } from '../lib/util/format'
 import { User } from '../lib/firebase/users'
+import { UserLink } from '../pages/account'
 
 export function ContractDetails(props: { contract: Contract }) {
   const { contract } = props
@@ -18,7 +18,9 @@ export function ContractDetails(props: { contract: Contract }) {
 
   return (
     <Row className="flex-wrap text-sm text-gray-500">
-      <div className="whitespace-nowrap">By {contract.creatorName}</div>
+      <div className="whitespace-nowrap">
+        <UserLink displayName={contract.creatorName} />
+      </div>
       <div className="mx-2">•</div>
       <div className="whitespace-nowrap">
         {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}

web/pages/account.tsx

@@ -7,6 +7,26 @@ import { Row } from '../components/layout/row'
 import { formatMoney } from '../lib/util/format'
 import { BetsList } from '../components/bets-list'
 import { Spacer } from '../components/layout/spacer'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+export function UserLink(props: { displayName: string; className?: string }) {
+  const { displayName, className } = props
+  const username = displayName.replace(/\s+/g, '')
+
+  return (
+    <Link href={`/${username}`}>
+      <a
+        className={clsx(
+          'hover:underline hover:decoration-indigo-400 hover:decoration-2',
+          className
+        )}
+      >
+        @{username}
+      </a>
+    </Link>
+  )
+}
 
 function UserCard(props: { user: User }) {
   const { user } = props
@@ -23,7 +43,10 @@ function UserCard(props: { user: User }) {
         )}
       </div>
       <div className="max-w-md card-body">
-        <h2 className="card-title font-major-mono">{user?.name}</h2>
+        <UserLink
+          displayName={user?.name}
+          className="card-title font-major-mono"
+        />
         <p>{user?.email}</p>
         <p>{formatMoney(user?.balance)}</p>
         <div className="card-actions">