diff --git a/packages/walletkit-ui/package.json b/packages/walletkit-ui/package.json
index e8ebc64..848a09d 100644
--- a/packages/walletkit-ui/package.json
+++ b/packages/walletkit-ui/package.json
@@ -21,6 +21,7 @@
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
+ "@testing-library/react-hooks": "^8.0.1",
"jest-environment-jsdom": "^29.3.1"
},
"scripts": {
diff --git a/packages/walletkit-ui/src/contexts/ThemeProvider.test.tsx b/packages/walletkit-ui/src/contexts/ThemeProvider.test.tsx
new file mode 100644
index 0000000..b453ffd
--- /dev/null
+++ b/packages/walletkit-ui/src/contexts/ThemeProvider.test.tsx
@@ -0,0 +1,84 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from "@testing-library/react";
+import { renderHook } from "@testing-library/react-hooks";
+import React from "react";
+
+import { ThemeProvider, useTheme, useThemeContext } from "./ThemeProvider";
+
+const consoleLog = jest.spyOn(console, "log").mockImplementation(jest.fn);
+const consoleError = jest.spyOn(console, "error").mockImplementation(jest.fn);
+const logger = { error: () => consoleError, info: () => consoleLog };
+
+describe("useTheme hook test", () => {
+ it("should pass when theme is not set", async () => {
+ const desiredTheme = "dark";
+ const api = {
+ set: jest.fn(),
+ get: async () => null,
+ };
+ const { result, waitForNextUpdate } = renderHook(() =>
+ useTheme({
+ api,
+ colorScheme: desiredTheme,
+ logger,
+ })
+ );
+ await waitForNextUpdate();
+ expect(result.current.theme).toBe(desiredTheme);
+ expect(result.current.isThemeLoaded).toBe(true);
+ });
+
+ it("should pass when theme is already set", async () => {
+ const desiredTheme = "dark";
+ const api = {
+ set: jest.fn(),
+ get: async () => desiredTheme,
+ };
+ const { result, waitForNextUpdate } = renderHook(() =>
+ useTheme({ api, colorScheme: "light", logger })
+ );
+ await waitForNextUpdate();
+ expect(result.current.theme).toBe(desiredTheme);
+ expect(result.current.isThemeLoaded).toBe(true);
+ });
+
+ it("should pass when theme is not set and colorScheme is not defined", async () => {
+ const api = {
+ set: jest.fn(),
+ get: async () => null,
+ };
+ const { result, waitForNextUpdate } = renderHook(() =>
+ useTheme({ api, logger })
+ );
+ await waitForNextUpdate();
+ expect(result.current.theme).toBe("light");
+ expect(result.current.isThemeLoaded).toBe(true);
+ });
+});
+
+describe("ThemeProvider Context test", () => {
+ it("should match snapshot", () => {
+ function ThemeProviderComponent(): JSX.Element {
+ const { isLight, theme } = useThemeContext();
+ return (
+
+ {isLight.toString()}
+ {theme}
+
+ );
+ }
+ const api = {
+ set: jest.fn(),
+ get: async () => "light",
+ };
+ const rendered = render(
+
+
+
+ );
+ expect(rendered).toMatchSnapshot();
+ });
+});
diff --git a/packages/walletkit-ui/src/contexts/ThemeProvider.tsx b/packages/walletkit-ui/src/contexts/ThemeProvider.tsx
new file mode 100644
index 0000000..70f6f4e
--- /dev/null
+++ b/packages/walletkit-ui/src/contexts/ThemeProvider.tsx
@@ -0,0 +1,95 @@
+import React, {
+ createContext,
+ PropsWithChildren,
+ useContext,
+ useEffect,
+ useState,
+} from "react";
+
+import { BaseLogger } from "./logger";
+
+interface ThemeLoader {
+ theme: NonNullable;
+ isThemeLoaded: boolean;
+}
+
+type ColorSchemeName = "light" | "dark" | null | undefined;
+
+interface ThemeContextI {
+ api: {
+ get: () => Promise;
+ set: (language: NonNullable) => Promise;
+ };
+ logger: BaseLogger;
+ colorScheme?: ColorSchemeName;
+}
+
+export function useTheme({
+ api,
+ colorScheme,
+ logger,
+}: ThemeContextI): ThemeLoader {
+ const [isThemeLoaded, setIsThemeLoaded] = useState(false);
+ const [theme, setTheme] = useState>("light");
+
+ useEffect(() => {
+ api
+ .get()
+ .then((t) => {
+ let currentTheme: NonNullable = "light";
+ if (t !== null && t !== undefined) {
+ currentTheme = t as NonNullable;
+ } else if (colorScheme !== null && colorScheme !== undefined) {
+ currentTheme = colorScheme;
+ }
+ setTheme(currentTheme);
+ })
+ .catch(logger?.error)
+ .finally(() => setIsThemeLoaded(true));
+ }, []);
+
+ return {
+ isThemeLoaded,
+ theme,
+ };
+}
+
+interface Theme {
+ theme: NonNullable;
+ setTheme: (theme: NonNullable) => void;
+ isLight: boolean;
+}
+
+const ThemeContext = createContext(undefined as any);
+
+export function useThemeContext(): Theme {
+ return useContext(ThemeContext);
+}
+
+export interface ThemeProviderProps extends PropsWithChildren<{}> {
+ logger: BaseLogger;
+}
+
+export function ThemeProvider(
+ props: ThemeContextI & React.PropsWithChildren
+): JSX.Element | null {
+ const { children, api, colorScheme, logger } = props;
+ const { theme } = useTheme({ api, colorScheme, logger });
+ const [currentTheme, setTheme] =
+ useState>(theme);
+
+ useEffect(() => {
+ setTheme(theme);
+ }, [theme]);
+
+ // eslint-disable-next-line react/jsx-no-constructed-context-values
+ const context: Theme = {
+ theme: currentTheme,
+ setTheme,
+ isLight: currentTheme === "light",
+ };
+
+ return (
+ {children}
+ );
+}
diff --git a/packages/walletkit-ui/src/contexts/__snapshots__/ThemeProvider.test.tsx.snap b/packages/walletkit-ui/src/contexts/__snapshots__/ThemeProvider.test.tsx.snap
new file mode 100644
index 0000000..534a97a
--- /dev/null
+++ b/packages/walletkit-ui/src/contexts/__snapshots__/ThemeProvider.test.tsx.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThemeProvider Context test should match snapshot 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+ true
+
+
+ light
+
+
+
+
+
+ true
+
+
+ light
+
+
+