diff --git a/src/helpers/wrapRootElement.tsx b/src/helpers/wrapRootElement.tsx
index b98873d21..5000ccb90 100644
--- a/src/helpers/wrapRootElement.tsx
+++ b/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}
>
-
- {element}
+
+
+ {element}
+
)
}
diff --git a/src/providers/UserPreferences.tsx b/src/providers/UserPreferences.tsx
new file mode 100644
index 000000000..1b0b8e7d1
--- /dev/null
+++ b/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(false)
+ const [currency, setCurrency] = useState('eur')
+
+ return (
+
+ {children}
+
+ )
+}
+
+// Helper hook to access the provider values
+const useUserPreferences = (): UserPreferencesValue =>
+ useContext(UserPreferencesContext)
+
+export { UserPreferencesProvider, useUserPreferences, UserPreferencesValue }