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)}