diff --git a/apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx b/apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx
index 734a71f8dc..5960b37331 100644
--- a/apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx
+++ b/apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx
@@ -1,10 +1,13 @@
import { APP_LANGUAGE_QUERY_KEY } from '@/common/consts/consts';
+import { IThemeContext } from '@/common/providers/ThemeProvider/types';
import { ITheme } from '@/common/types/settings';
import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
import { transformThemeToInlineStyles } from '@/utils/transform-theme-to-inline-styles';
import { useLayoutEffect, useMemo } from 'react';
import defaultTheme from '../../../../theme.json';
+import { themeContext } from './theme.context';
+const { Provider } = themeContext;
interface Props {
children: React.ReactNode | React.ReactNode[];
}
@@ -27,6 +30,8 @@ export const ThemeProvider = ({ children }: Props) => {
return uiSchema.uiSchema.theme;
}, [uiSchema, isLoading, error]);
+ const context = useMemo(() => ({ themeDefinition: theme } as IThemeContext), [theme]);
+
useLayoutEffect(() => {
if (!theme) return;
@@ -35,5 +40,5 @@ export const ThemeProvider = ({ children }: Props) => {
?.setAttribute('style', transformThemeToInlineStyles(theme as ITheme));
}, [theme]);
- return <>{children}>;
+ return {children};
};
diff --git a/apps/kyb-app/src/common/providers/ThemeProvider/index.ts b/apps/kyb-app/src/common/providers/ThemeProvider/index.ts
index 8abd195f69..87dbc115ad 100644
--- a/apps/kyb-app/src/common/providers/ThemeProvider/index.ts
+++ b/apps/kyb-app/src/common/providers/ThemeProvider/index.ts
@@ -1 +1,2 @@
export * from './ThemeProvider';
+export * from './useTheme';
diff --git a/apps/kyb-app/src/common/providers/ThemeProvider/theme.context.ts b/apps/kyb-app/src/common/providers/ThemeProvider/theme.context.ts
new file mode 100644
index 0000000000..c4feb5780c
--- /dev/null
+++ b/apps/kyb-app/src/common/providers/ThemeProvider/theme.context.ts
@@ -0,0 +1,4 @@
+import { IThemeContext } from '@/common/providers/ThemeProvider/types';
+import { createContext } from 'react';
+
+export const themeContext = createContext({} as IThemeContext);
diff --git a/apps/kyb-app/src/common/providers/ThemeProvider/types.ts b/apps/kyb-app/src/common/providers/ThemeProvider/types.ts
index bf1e1bc14a..1dc99678a7 100644
--- a/apps/kyb-app/src/common/providers/ThemeProvider/types.ts
+++ b/apps/kyb-app/src/common/providers/ThemeProvider/types.ts
@@ -1,3 +1,5 @@
-import { ISettings } from '@/common/types/settings';
+import { ITheme } from '@/common/types/settings';
-export type ThemeContext = ISettings['theme'];
+export interface IThemeContext {
+ themeDefinition: ITheme;
+}
diff --git a/apps/kyb-app/src/common/providers/ThemeProvider/useTheme.ts b/apps/kyb-app/src/common/providers/ThemeProvider/useTheme.ts
new file mode 100644
index 0000000000..907885a8e0
--- /dev/null
+++ b/apps/kyb-app/src/common/providers/ThemeProvider/useTheme.ts
@@ -0,0 +1,4 @@
+import { themeContext } from '@/common/providers/ThemeProvider/theme.context';
+import { useContext } from 'react';
+
+export const useTheme = () => useContext(themeContext);
diff --git a/apps/kyb-app/src/common/types/settings.ts b/apps/kyb-app/src/common/types/settings.ts
index a35019d029..f77d3bb64b 100644
--- a/apps/kyb-app/src/common/types/settings.ts
+++ b/apps/kyb-app/src/common/types/settings.ts
@@ -1,4 +1,5 @@
export interface ITheme {
+ logo?: string;
pallete: Record;
elements: Record>;
}
diff --git a/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx b/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx
index 9de9cf5b8b..48290ad2de 100644
--- a/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx
+++ b/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
import { StepperProgress } from '@/common/components/atoms/StepperProgress';
import { ProgressBar } from '@/common/components/molecules/ProgressBar';
+import { useTheme } from '@/common/providers/ThemeProvider';
import { AppShell } from '@/components/layouts/AppShell';
import { PoweredByLogo } from '@/components/molecules/PoweredByLogo';
import { DynamicUI, State } from '@/components/organisms/DynamicUI';
@@ -85,6 +86,7 @@ export const CollectionFlow = withSessionProtected(() => {
const { data: context } = useFlowContextQuery();
const { customer } = useCustomer();
const { t } = useTranslation();
+ const { themeDefinition } = useTheme();
const elements = schema?.uiSchema?.elements;
const definition = schema?.definition.definition;
@@ -180,7 +182,7 @@ export const CollectionFlow = withSessionProtected(() => {
{customer?.logoImageUri && (
setLogoLoaded(true)}