Merge branch 'main' into stripe

functions/package.json

@@ -2,9 +2,9 @@
   "name": "functions",
   "scripts": {
     "build": "tsc",
-    "serve": "npm run build && firebase emulators:start --only functions",
+    "serve": "yarn build && firebase emulators:start --only functions",
-    "shell": "npm run build && firebase functions:shell",
+    "shell": "yarn build && firebase functions:shell",
-    "start": "npm run shell",
+    "start": "yarn shell",
     "deploy": "firebase deploy --only functions",
     "logs": "firebase functions:log"
   },

package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "mantic",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {}
-}

web/.gitignore

@@ -2,3 +2,4 @@
 .next
 node_modules
 out
+tsconfig.tsbuildinfo

web/components/bets-list.tsx

@@ -197,7 +197,7 @@ export function MyBetsSummary(props: {
       {resolution ? (
         <>
           <Col>
-            <div className="text-sm text-gray-500">Winnings</div>
+            <div className="text-sm text-gray-500">Payout</div>
             <div className="whitespace-nowrap">{formatMoney(betsPayout)}</div>
           </Col>
         </>

web/components/contracts-list.tsx

@@ -173,7 +173,7 @@ export function SearchableGrid(props: {
 
 export function ContractsList(props: { creator: User }) {
   const { creator } = props
-  const [contracts, setContracts] = useState<Contract[]>([])
+  const [contracts, setContracts] = useState<Contract[] | 'loading'>('loading')
 
   useEffect(() => {
     if (creator?.id) {
@@ -182,5 +182,7 @@ export function ContractsList(props: { creator: User }) {
     }
   }, [creator])
 
+  if (contracts === 'loading') return <></>
+
   return <SearchableGrid contracts={contracts} defaultSort="all" />
 }

web/components/header.tsx

@@ -11,24 +11,32 @@ import { MenuButton } from './menu'
 const hoverClasses =
   'hover:underline hover:decoration-indigo-400 hover:decoration-2'
 
-const mobileNavigation = [
+function getNavigationOptions(user: User, options: { mobile: boolean }) {
+  const { mobile } = options
+  return [
     {
       name: 'Home',
       href: '/',
     },
-  {
+    ...(mobile
-    name: 'Account',
+      ? [
-    href: '/account',
+          { name: 'FAQ', href: '/about' },
-  },
-  {
-    name: 'Your bets',
-    href: '/bets',
-  },
           {
             name: 'Create a market',
             href: '/create',
           },
         ]
+      : []),
+    {
+      name: 'Your bets',
+      href: '/bets',
+    },
+    {
+      name: 'Your markets',
+      href: `/${user.username}`,
+    },
+  ]
+}
 
 function ProfileSummary(props: { user: User }) {
   const { user } = props
@@ -50,6 +58,17 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) {
 
   return (
     <>
+      <Link href="/about">
+        <a
+          className={clsx(
+            'text-base hidden md:block whitespace-nowrap',
+            themeClasses
+          )}
+        >
+          FAQ
+        </a>
+      </Link>
+
       <Link href="/create">
         <a
           className={clsx(
@@ -61,30 +80,15 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) {
         </a>
       </Link>
 
-      <Link href="/bets">
+      <MenuButton
-        <a
+        className="hidden md:block"
-          className={clsx(
+        menuItems={getNavigationOptions(user, { mobile: false })}
-            'text-base hidden md:block whitespace-nowrap',
+        buttonContent={<ProfileSummary user={user} />}
-            themeClasses
+      />
-          )}
-        >
-          Your bets
-        </a>
-      </Link>
-
-      <Link href="/account">
-        <a
-          className={clsx(
-            'text-base hidden md:block hover:underline hover:decoration-2 hover:decoration-indigo-700'
-          )}
-        >
-          <ProfileSummary user={user} />
-        </a>
-      </Link>
 
       <MenuButton
         className="md:hidden"
-        menuItems={mobileNavigation}
+        menuItems={getNavigationOptions(user, { mobile: true })}
         buttonContent={<ProfileSummary user={user} />}
       />
     </>
@@ -138,7 +142,7 @@ export function Header(props: {
           />
           <div
             className={clsx(
-              'font-major-mono lowercase mt-1 sm:text-2xl',
+              'font-major-mono lowercase mt-1 sm:text-2xl md:whitespace-nowrap',
               darkBackground && 'text-white'
             )}
           >

web/package.json

@@ -2,7 +2,8 @@
   "name": "mantic",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "concurrently -n NEXT,TS -c magenta,cyan \"next dev -p 3000\" \"yarn ts --watch\"",
+    "ts": "tsc --noEmit --incremental --preserveWatchOutput --pretty",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -10,8 +11,8 @@
     "prepare": "cd .. && husky install web/.husky"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.2",
+    "@headlessui/react": "1.4.2",
-    "@heroicons/react": "^1.0.5",
+    "@heroicons/react": "1.0.5",
     "@nivo/core": "0.74.0",
     "@nivo/line": "0.74.0",
     "clsx": "1.1.1",
@@ -25,19 +26,20 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "0.4.0",
-    "@types/lodash": "^4.14.178",
+    "@types/lodash": "4.14.178",
     "@types/node": "16.11.11",
     "@types/react": "17.0.37",
     "autoprefixer": "10.2.6",
+    "concurrently": "6.5.1",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.4",
-    "husky": "^7.0.4",
+    "husky": "7.0.4",
-    "lint-staged": "^12.1.3",
+    "lint-staged": "12.1.3",
     "postcss": "8.3.5",
     "prettier": "2.5.0",
-    "pretty-quick": "^3.1.2",
+    "pretty-quick": "3.1.2",
     "tailwindcss": "3.0.1",
-    "tsc-files": "^1.1.3",
+    "tsc-files": "1.1.3",
     "typescript": "4.5.2"
   },
   "lint-staged": {

web/pages/markets.tsx

@@ -21,9 +21,11 @@ export default function Markets(props: { contracts: Contract[] }) {
   return (
     <div className="max-w-4xl px-4 pb-8 mx-auto">
       <Header />
+      {(props.contracts || contracts !== 'loading') && (
         <SearchableGrid
-        contracts={contracts === 'loading' ? props.contracts || [] : contracts}
+          contracts={contracts === 'loading' ? props.contracts : contracts}
         />
+      )}
     </div>
   )
 }