Fix embeds on incognito (blocked localStorage)

web/components/use-save-shares.ts

@@ -8,6 +8,7 @@ import {
 import { Bet } from 'common/bet'
 import { useEffect, useState } from 'react'
 import { partition, sumBy } from 'lodash'
+import { safeLocalStorage } from 'web/lib/util/local'
 
 export const useSaveShares = (
   contract: FullContract<CPMM | DPM, Binary | FreeResponseContract>,
@@ -39,18 +40,16 @@ export const useSaveShares = (
   const noFloorShares = Math.round(noShares) === 0 ? 0 : Math.floor(noShares)
 
   useEffect(() => {
+    const local = safeLocalStorage()
     // Save yes and no shares to local storage.
-    const savedShares = localStorage.getItem(`${contract.id}-shares`)
+    const savedShares = local?.getItem(`${contract.id}-shares`)
     if (!userBets && savedShares) {
       setSavedShares(JSON.parse(savedShares))
     }
 
     if (userBets) {
       const updatedShares = { yesShares, noShares }
-      localStorage.setItem(
+      local?.setItem(`${contract.id}-shares`, JSON.stringify(updatedShares))
-        `${contract.id}-shares`,
-        JSON.stringify(updatedShares)
-      )
     }
   }, [contract.id, userBets, noShares, yesShares])
 

web/lib/firebase/fn-call.ts

@@ -5,6 +5,7 @@ import { User } from 'common/user'
 import { randomString } from 'common/util/random'
 import './init'
 import { functions } from './init'
+import { safeLocalStorage } from '../util/local'
 
 export const cloudFunction = <RequestData, ResponseData>(name: string) =>
   httpsCallable<RequestData, ResponseData>(functions, name)
@@ -48,10 +49,11 @@ export const resolveMarket = cloudFunction<
 >('resolveMarket')
 
 export const createUser: () => Promise<User | null> = () => {
-  let deviceToken = window.localStorage.getItem('device-token')
+  const local = safeLocalStorage()
+  let deviceToken = local?.getItem('device-token')
   if (!deviceToken) {
     deviceToken = randomString()
-    window.localStorage.setItem('device-token', deviceToken)
+    local?.setItem('device-token', deviceToken)
   }
 
   return cloudFunction('createUser')({ deviceToken })

web/lib/firebase/users.ts

@@ -27,6 +27,7 @@ import { getValue, getValues, listenForValue, listenForValues } from './utils'
 import { DAY_MS } from 'common/util/time'
 import { feed } from 'common/feed'
 import { CATEGORY_LIST } from 'common/categories'
+import { safeLocalStorage } from '../util/local'
 
 export type { User }
 
@@ -86,8 +87,9 @@ let createUserPromise: Promise<User | null> | undefined = undefined
 const warmUpCreateUser = throttle(createUser, 5000 /* ms */)
 
 export function listenForLogin(onUser: (user: User | null) => void) {
-  const cachedUser = localStorage.getItem(CACHED_USER_KEY)
+  const local = safeLocalStorage()
-  onUser(cachedUser ? JSON.parse(cachedUser) : null)
+  const cachedUser = local?.getItem(CACHED_USER_KEY)
+  onUser(cachedUser && JSON.parse(cachedUser))
 
   if (!cachedUser) warmUpCreateUser()
 
@@ -106,11 +108,11 @@ export function listenForLogin(onUser: (user: User | null) => void) {
 
       // Persist to local storage, to reduce login blink next time.
       // Note: Cap on localStorage size is ~5mb
-      localStorage.setItem(CACHED_USER_KEY, JSON.stringify(user))
+      local?.setItem(CACHED_USER_KEY, JSON.stringify(user))
     } else {
       // User logged out; reset to null
       onUser(null)
-      localStorage.removeItem(CACHED_USER_KEY)
+      local?.removeItem(CACHED_USER_KEY)
       createUserPromise = undefined
     }
   })

web/lib/util/local.ts

@@ -0,0 +1,11 @@
+export const safeLocalStorage = () => (isLocalStorage() ? localStorage : null)
+
+const isLocalStorage = () => {
+  try {
+    localStorage.getItem('test')
+    localStorage.setItem('hi', 'mom')
+    return true
+  } catch (e) {
+    return false
+  }
+}