2020-09-09 15:46:10 +02:00
|
|
|
import React, {
|
|
|
|
createContext,
|
|
|
|
useContext,
|
|
|
|
ReactElement,
|
|
|
|
ReactNode,
|
2020-09-10 13:43:20 +02:00
|
|
|
useState,
|
|
|
|
useEffect
|
2020-09-09 15:46:10 +02:00
|
|
|
} from 'react'
|
2021-12-10 12:33:47 +01:00
|
|
|
import { LoggerInstance, LogLevel } from '@oceanprotocol/lib'
|
2021-10-18 20:44:33 +02:00
|
|
|
import { isBrowser } from '@utils/index'
|
2021-10-13 18:48:59 +02:00
|
|
|
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
2020-09-09 15:46:10 +02:00
|
|
|
|
|
|
|
interface UserPreferencesValue {
|
|
|
|
debug: boolean
|
2021-09-30 12:54:44 +02:00
|
|
|
setDebug: (value: boolean) => void
|
2020-09-10 14:21:10 +02:00
|
|
|
currency: string
|
2021-09-30 12:54:44 +02:00
|
|
|
setCurrency: (value: string) => void
|
2021-06-08 10:46:53 +02:00
|
|
|
chainIds: number[]
|
2021-10-12 10:00:57 +02:00
|
|
|
privacyPolicySlug: string
|
|
|
|
showPPC: boolean
|
2021-06-09 11:45:36 +02:00
|
|
|
setChainIds: (chainIds: number[]) => void
|
2021-09-30 12:54:44 +02:00
|
|
|
bookmarks: string[]
|
2020-10-28 23:59:14 +01:00
|
|
|
addBookmark: (did: string) => void
|
|
|
|
removeBookmark: (did: string) => void
|
2021-10-12 10:00:57 +02:00
|
|
|
setPrivacyPolicySlug: (slug: string) => void
|
|
|
|
setShowPPC: (value: boolean) => void
|
2021-09-30 12:54:44 +02:00
|
|
|
infiniteApproval: boolean
|
|
|
|
setInfiniteApproval: (value: boolean) => void
|
|
|
|
locale: string
|
2020-09-09 15:46:10 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const UserPreferencesContext = createContext(null)
|
|
|
|
|
2020-09-10 13:43:20 +02:00
|
|
|
const localStorageKey = 'ocean-user-preferences'
|
|
|
|
|
2020-09-22 19:31:33 +02:00
|
|
|
function getLocalStorage(): UserPreferencesValue {
|
2020-09-10 13:43:20 +02:00
|
|
|
const storageParsed =
|
2021-03-17 11:44:26 +01:00
|
|
|
isBrowser && JSON.parse(window.localStorage.getItem(localStorageKey))
|
2020-09-10 13:43:20 +02:00
|
|
|
return storageParsed
|
|
|
|
}
|
|
|
|
|
2020-09-22 19:31:33 +02:00
|
|
|
function setLocalStorage(values: Partial<UserPreferencesValue>) {
|
2020-09-10 13:43:20 +02:00
|
|
|
return (
|
2021-03-17 11:44:26 +01:00
|
|
|
isBrowser &&
|
2020-09-10 13:43:20 +02:00
|
|
|
window.localStorage.setItem(localStorageKey, JSON.stringify(values))
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-09-09 15:46:10 +02:00
|
|
|
function UserPreferencesProvider({
|
|
|
|
children
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
}): ReactElement {
|
2021-06-08 10:46:53 +02:00
|
|
|
const { appConfig } = useSiteMetadata()
|
2020-09-10 13:43:20 +02:00
|
|
|
const localStorage = getLocalStorage()
|
|
|
|
|
|
|
|
// Set default values from localStorage
|
2020-09-10 22:22:16 +02:00
|
|
|
const [debug, setDebug] = useState<boolean>(localStorage?.debug || false)
|
2020-09-10 14:21:10 +02:00
|
|
|
const [currency, setCurrency] = useState<string>(
|
2020-09-10 22:22:16 +02:00
|
|
|
localStorage?.currency || 'EUR'
|
2020-09-10 13:43:20 +02:00
|
|
|
)
|
2020-09-22 19:31:33 +02:00
|
|
|
const [locale, setLocale] = useState<string>()
|
2021-06-11 15:01:44 +02:00
|
|
|
const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || [])
|
2021-06-09 11:45:36 +02:00
|
|
|
const [chainIds, setChainIds] = useState(
|
|
|
|
localStorage?.chainIds || appConfig.chainIds
|
|
|
|
)
|
2021-10-12 10:00:57 +02:00
|
|
|
const { defaultPrivacyPolicySlug } = useSiteMetadata().appConfig
|
|
|
|
|
|
|
|
const [privacyPolicySlug, setPrivacyPolicySlug] = useState<string>(
|
|
|
|
localStorage?.privacyPolicySlug || defaultPrivacyPolicySlug
|
|
|
|
)
|
|
|
|
|
|
|
|
const [showPPC, setShowPPC] = useState<boolean>(
|
|
|
|
localStorage?.showPPC !== false
|
|
|
|
)
|
|
|
|
|
2021-09-30 12:54:44 +02:00
|
|
|
const [infiniteApproval, setInfiniteApproval] = useState(
|
|
|
|
localStorage?.infiniteApproval || false
|
|
|
|
)
|
2020-09-10 13:43:20 +02:00
|
|
|
|
|
|
|
// Write values to localStorage on change
|
|
|
|
useEffect(() => {
|
2021-10-12 10:00:57 +02:00
|
|
|
setLocalStorage({
|
|
|
|
chainIds,
|
|
|
|
debug,
|
|
|
|
currency,
|
|
|
|
bookmarks,
|
|
|
|
privacyPolicySlug,
|
|
|
|
showPPC,
|
|
|
|
infiniteApproval
|
|
|
|
})
|
|
|
|
}, [
|
|
|
|
chainIds,
|
|
|
|
debug,
|
|
|
|
currency,
|
|
|
|
bookmarks,
|
|
|
|
privacyPolicySlug,
|
|
|
|
showPPC,
|
|
|
|
infiniteApproval
|
|
|
|
])
|
2020-09-09 15:46:10 +02:00
|
|
|
|
2020-10-28 23:59:14 +01:00
|
|
|
// Set ocean.js log levels, default: Error
|
2020-09-10 14:50:13 +02:00
|
|
|
useEffect(() => {
|
|
|
|
debug === true
|
2021-12-10 12:33:47 +01:00
|
|
|
? LoggerInstance.setLevel(LogLevel.Verbose)
|
|
|
|
: LoggerInstance.setLevel(LogLevel.Error)
|
2020-09-10 14:50:13 +02:00
|
|
|
}, [debug])
|
|
|
|
|
2020-09-22 19:31:33 +02:00
|
|
|
// Get locale always from user's browser
|
|
|
|
useEffect(() => {
|
|
|
|
if (!window) return
|
|
|
|
setLocale(window.navigator.language)
|
|
|
|
}, [])
|
|
|
|
|
2021-06-11 15:01:44 +02:00
|
|
|
function addBookmark(didToAdd: string): void {
|
|
|
|
const newPinned = [...bookmarks, didToAdd]
|
|
|
|
setBookmarks(newPinned)
|
|
|
|
}
|
|
|
|
|
|
|
|
function removeBookmark(didToAdd: string): void {
|
|
|
|
const newPinned = bookmarks.filter((did: string) => did !== didToAdd)
|
|
|
|
setBookmarks(newPinned)
|
|
|
|
}
|
2020-10-28 23:59:14 +01:00
|
|
|
|
2020-10-29 11:39:42 +01:00
|
|
|
// Bookmarks old data structure migration
|
|
|
|
useEffect(() => {
|
2021-06-11 15:01:44 +02:00
|
|
|
if (bookmarks.length !== undefined) return
|
|
|
|
const newPinned: string[] = []
|
|
|
|
for (const network in bookmarks) {
|
|
|
|
;(bookmarks[network] as unknown as string[]).forEach((did: string) => {
|
|
|
|
did !== null && newPinned.push(did)
|
|
|
|
})
|
|
|
|
}
|
2020-10-29 11:39:42 +01:00
|
|
|
setBookmarks(newPinned)
|
|
|
|
}, [bookmarks])
|
|
|
|
|
2020-09-09 15:46:10 +02:00
|
|
|
return (
|
|
|
|
<UserPreferencesContext.Provider
|
2020-09-22 19:31:33 +02:00
|
|
|
value={
|
|
|
|
{
|
|
|
|
debug,
|
|
|
|
currency,
|
|
|
|
locale,
|
2021-06-08 10:46:53 +02:00
|
|
|
chainIds,
|
2020-10-28 23:59:14 +01:00
|
|
|
bookmarks,
|
2021-10-12 10:00:57 +02:00
|
|
|
privacyPolicySlug,
|
|
|
|
showPPC,
|
2021-09-30 12:54:44 +02:00
|
|
|
infiniteApproval,
|
|
|
|
setInfiniteApproval,
|
2021-06-09 11:45:36 +02:00
|
|
|
setChainIds,
|
2020-09-22 19:31:33 +02:00
|
|
|
setDebug,
|
2021-06-11 15:01:44 +02:00
|
|
|
setCurrency,
|
|
|
|
addBookmark,
|
2021-10-12 10:00:57 +02:00
|
|
|
removeBookmark,
|
|
|
|
setPrivacyPolicySlug,
|
|
|
|
setShowPPC
|
2020-09-22 19:31:33 +02:00
|
|
|
} as UserPreferencesValue
|
|
|
|
}
|
2020-09-09 15:46:10 +02:00
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</UserPreferencesContext.Provider>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
// Helper hook to access the provider values
|
|
|
|
const useUserPreferences = (): UserPreferencesValue =>
|
|
|
|
useContext(UserPreferencesContext)
|
|
|
|
|
2021-10-27 12:27:14 +02:00
|
|
|
export { UserPreferencesProvider, useUserPreferences }
|