create UserPreferencesProvider

src/helpers/wrapRootElement.tsx

@@ -8,6 +8,7 @@ import {
   ConfigHelperNetworkName,
   ConfigHelperNetworkId
 } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
+import { UserPreferencesProvider } from '../providers/UserPreferences'
 
 export function getOceanConfig(
   network: ConfigHelperNetworkName | ConfigHelperNetworkId
@@ -30,8 +31,10 @@ export default function wrapRootElement({
       initialConfig={oceanInitialConfig}
       web3ModalOpts={web3ModalOpts}
     >
-      <NetworkMonitor />
-      {element}
+      <UserPreferencesProvider>
+        <NetworkMonitor />
+        {element}
+      </UserPreferencesProvider>
     </OceanProvider>
   )
 }

src/providers/UserPreferences.tsx

@@ -0,0 +1,41 @@
+import React, {
+  createContext,
+  useContext,
+  ReactElement,
+  ReactNode,
+  useState
+} from 'react'
+
+declare type Currency = 'eur' | 'usd'
+
+interface UserPreferencesValue {
+  debug: boolean
+  currency: Currency
+  setDebug: (value: boolean) => void
+  setCurrency: (value: string) => void
+}
+
+const UserPreferencesContext = createContext(null)
+
+function UserPreferencesProvider({
+  children
+}: {
+  children: ReactNode
+}): ReactElement {
+  const [debug, setDebug] = useState<boolean>(false)
+  const [currency, setCurrency] = useState<Currency>('eur')
+
+  return (
+    <UserPreferencesContext.Provider
+      value={{ debug, currency, setDebug, setCurrency } as UserPreferencesValue}
+    >
+      {children}
+    </UserPreferencesContext.Provider>
+  )
+}
+
+// Helper hook to access the provider values
+const useUserPreferences = (): UserPreferencesValue =>
+  useContext(UserPreferencesContext)
+
+export { UserPreferencesProvider, useUserPreferences, UserPreferencesValue }