Denormalize username to each contract

web/components/bets-list.tsx

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

web/components/contracts-list.tsx

@@ -21,7 +21,7 @@ export function ContractDetails(props: { contract: Contract }) {
   return (
     <Row className="flex-wrap text-sm text-gray-500">
       <div className="whitespace-nowrap">
-        <UserLink displayName={contract.creatorName} />
+        <UserLink username={contract.creatorUsername} />
       </div>
       <div className="mx-2">•</div>
       <div className="whitespace-nowrap">

web/components/user-page.tsx

@@ -4,15 +4,12 @@ import { ContractsList } from './contracts-list'
 import { Title } from './title'
 import { Row } from './layout/row'
 import { formatMoney } from '../lib/util/format'
-import { BetsList } from './bets-list'
-import { Spacer } from './layout/spacer'
 import Link from 'next/link'
 import clsx from 'clsx'
 import { SEO } from './SEO'
 
-export function UserLink(props: { displayName: string; className?: string }) {
-  const { displayName, className } = props
-  const username = displayName.replace(/\s+/g, '')
+export function UserLink(props: { username: string; className?: string }) {
+  const { username, className } = props
 
   return (
     <Link href={`/${username}`}>

web/lib/firebase/contracts.ts

@@ -21,6 +21,7 @@ export type Contract = {
 
   creatorId: string
   creatorName: string
+  creatorUsername: string
 
   question: string
   description: string // More info about what the contract is about
@@ -42,9 +43,7 @@ export type Contract = {
 
 export function path(contract: Contract) {
   // For now, derive username from creatorName
-  // Fix this when users can change their own names
-  const username = contract.creatorName.replace(/\s+/g, '')
-  return `/${username}/${contract.slug}`
+  return `/${contract.creatorUsername}/${contract.slug}`
 }
 
 export function compute(contract: Contract) {

web/lib/service/create-contract.ts

@@ -31,6 +31,7 @@ export async function createContract(
 
     creatorId: creator.id,
     creatorName: creator.name,
+    creatorUsername: creator.username,
 
     question: question.trim(),
     description: description.trim(),