Replace /contract/[id] with /[username]/[id]

web/components/bets-list.tsx

@@ -8,7 +8,7 @@ import { User } from '../lib/firebase/users'
 import { formatMoney, formatPercent } from '../lib/util/format'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
-import { Contract } from '../lib/firebase/contracts'
+import { Contract, path } from '../lib/firebase/contracts'
 import { Row } from './layout/row'
 import { calculateWinnings, currentValue } from '../lib/calculation/contract'
 
@@ -58,7 +58,7 @@ function MyContractBets(props: { contractId: string; bets: Bet[] }) {
 
   return (
     <div className="px-4">
-      <Link href={`/contract/${contractId}`}>
+      <Link href={path(contract)}>
         <a>
           <div className="font-medium text-indigo-700 mb-1">
             {contract.question}

web/components/contracts-list.tsx

@@ -3,7 +3,12 @@ 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, listContracts } from '../lib/firebase/contracts'
+import {
+  compute,
+  Contract,
+  listContracts,
+  path,
+} from '../lib/firebase/contracts'
 import { formatMoney } from '../lib/util/format'
 
 export function ContractDetails(props: { contract: Contract }) {
@@ -42,7 +47,7 @@ function ContractCard(props: { contract: Contract }) {
   }[contract.resolution || '']
 
   return (
-    <Link href={`/contract/${contract.id}`}>
+    <Link href={path(contract)}>
       <a>
         <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
           <div className="card">
@@ -81,10 +86,7 @@ function ContractCard(props: { contract: Contract }) {
 export function ContractsGrid(props: { contracts: Contract[] }) {
   const { contracts } = props
   return (
-    <ul
-      role="list"
-      className="grid grid-cols-1 gap-6 lg:grid-cols-2"
-    >
+    <ul role="list" className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {contracts.map((contract) => (
         <ContractCard contract={contract} key={contract.id} />
       ))}

web/lib/firebase/contracts.ts

@@ -37,6 +37,13 @@ export type Contract = {
   resolution?: 'YES' | 'NO' | 'CANCEL' // Chosen by creator; must be one of outcomes
 }
 
+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.id}`
+}
+
 export function compute(contract: Contract) {
   const { pot, seedAmounts, createdTime, resolutionTime, isResolved } = contract
   const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO

web/pages/[username]/index.tsx

@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router'
+import React from 'react'
+import { Header } from '../../components/header'
+import { Col } from '../../components/layout/col'
+import { Title } from '../../components/title'
+
+// For now, render a placeholder page
+export default function ContractPage() {
+  const router = useRouter()
+  const { username } = router.query as { username: string }
+
+  return (
+    <Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <Header />
+      <Title text={username} />
+    </Col>
+  )
+}