Merge branch 'main' into contract-page

web/.eslintrc.js

@@ -1,10 +1,7 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  extends: [
+  extends: ['plugin:react-hooks/recommended', 'plugin:@next/next/recommended'],
-	  'plugin:react-hooks/recommended',
-	  'plugin:@next/next/recommended',
-	],
   rules: {
-	  // Add or disable rules here.
+    // Add or disable rules here.
-  }
+  },
 }

web/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore Next artifacts
+.next/
+out/

web/components/header.tsx

@@ -1,7 +1,7 @@
 import { Popover } from '@headlessui/react'
 import Link from 'next/link'
-import { useEffect, useState } from 'react'
+import { useUser } from '../hooks/use-user'
-import { firebaseLogin, listenForLogin, User } from '../lib/firebase/users'
+import { firebaseLogin } from '../lib/firebase/users'
 
 const navigation = [
   {
@@ -12,12 +12,11 @@ const navigation = [
 ]
 
 function SignInLink() {
-  const [user, setUser] = useState<User | null>(null)
+  const user = useUser()
-  useEffect(() => listenForLogin(setUser), [])
 
   return (
     <>
-      {user && user.id ? (
+      {user ? (
         <Link href="/account">
           <a className="text-base font-medium text-green-400 hover:text-gray-300">
             {user.name}

web/hooks/use-contract.ts

@@ -2,12 +2,13 @@ import { useEffect, useState } from 'react'
 import { Contract, listenForContract } from '../lib/firebase/contracts'
 
 export const useContract = (contractId: string) => {
-	const [contract, setContract] = useState<Contract | null | 'loading'>('loading')
+  const [contract, setContract] = useState<Contract | null | 'loading'>(
+    'loading'
+  )
 
-	useEffect(() => {
+  useEffect(() => {
-		if (contractId)
+    if (contractId) return listenForContract(contractId, setContract)
-			return listenForContract(contractId, setContract)
+  }, [contractId])
-	}, [contractId])
 
-	return contract
+  return contract
-}
+}

web/hooks/use-user.ts

@@ -2,11 +2,7 @@ import { useEffect, useState } from 'react'
 import { listenForLogin, User } from '../lib/firebase/users'
 
 export const useUser = () => {
-	const [user, setUser] = useState<User | null>(null)
+  const [user, setUser] = useState<User | null>(null)
-
+  useEffect(() => listenForLogin(setUser), [])
-	useEffect(() => {
+  return user
-		return listenForLogin(setUser)
+}
-	}, [])
-
-	return user
-}

web/lib/firebase/init.ts

@@ -7,7 +7,7 @@ const firebaseConfig = {
   storageBucket: 'mantic-markets.appspot.com',
   messagingSenderId: '128925704902',
   appId: '1:128925704902:web:f61f86944d8ffa2a642dc7',
-  measurementId: '${config.measurementId}',
+  measurementId: 'G-SSFK1Q138D',
 }
 
 // Initialize Firebase

web/lib/firebase/users.ts

@@ -32,14 +32,14 @@ export async function setUser(userId: string, user: User) {
 }
 
 const CACHED_USER_KEY = 'CACHED_USER_KEY'
-export function listenForLogin(onUser: (user: User) => void) {
+export function listenForLogin(onUser: (_user: User | null) => void) {
   // Immediately load any persisted user object from browser cache.
   const cachedUser = localStorage.getItem(CACHED_USER_KEY)
   if (cachedUser) {
     onUser(JSON.parse(cachedUser))
   }
 
-  onAuthStateChanged(auth, async (user) => {
+  return onAuthStateChanged(auth, async (user) => {
     if (user) {
       let fetchedUser = await getUser(user.uid)
       if (!fetchedUser) {
@@ -63,8 +63,8 @@ export function listenForLogin(onUser: (user: User) => void) {
       // Note: Cap on localStorage size is ~5mb
       localStorage.setItem(CACHED_USER_KEY, JSON.stringify(fetchedUser))
     } else {
-      // User logged out; reset to the empty object
+      // User logged out; reset to null
-      onUser({} as User)
+      onUser(null)
     }
   })
 }
@@ -76,7 +76,6 @@ export async function firebaseLogin() {
 
 export async function firebaseLogout() {
   auth.signOut()
-  localStorage.removeItem(CACHED_USER_KEY)
 }
 
 const storage = getStorage(app)

web/package.json

@@ -11,12 +11,12 @@
   "dependencies": {
     "@headlessui/react": "1.4.2",
     "@heroicons/react": "1.0.5",
-    "chart.js": "^3.6.1",
+    "chart.js": "3.6.1",
-    "daisyui": "^1.16.2",
+    "daisyui": "1.16.2",
-    "firebase": "^9.6.0",
+    "firebase": "9.6.0",
     "next": "12.0.4",
     "react": "17.0.2",
-    "react-chartjs-2": "^4.0.0",
+    "react-chartjs-2": "4.0.0",
     "react-dom": "17.0.2"
   },
   "devDependencies": {

web/pages/account.tsx

@@ -1,11 +1,10 @@
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { firebaseLogout } from '../lib/firebase/users'
-import { firebaseLogout, listenForLogin, User } from '../lib/firebase/users'
 import { Header } from '../components/header'
+import { useUser } from '../hooks/use-user'
 
 export default function Account() {
-  const [user, setUser] = useState<User | null>(null)
+  const user = useUser()
-  useEffect(() => listenForLogin(setUser), [])
   const router = useRouter()
 
   return (