fix(social): link extraction prompt fix

ballerine-io · Oct 2, 2024 · e726c98 · e726c98
2 parents 1ef0964 + 7a98b7c
commit e726c98
Show file tree

Hide file tree

Showing 46 changed files with 480 additions and 104 deletions.
diff --git a/apps/kyb-app/public/poweredby-white.svg b/apps/kyb-app/public/poweredby-white.svg
diff --git a/apps/kyb-app/src/__tests/providers/TestProvider/TestProvider.tsx b/apps/kyb-app/src/__tests/providers/TestProvider/TestProvider.tsx
@@ -1,11 +1,9 @@
 import { Head } from '@/Head';
-import { SettingsProvider } from '@/common/providers/SettingsProvider/SettingsProvider';
 import { ThemeProvider } from '@/common/providers/ThemeProvider';
 import { queryClient } from '@/common/utils/query-client';
 import { AnyChildren } from '@ballerine/ui';
 import { QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import settingsJson from '../../../../settings.json';
 
 interface TestProviderProps {
   children: AnyChildren;
@@ -16,9 +14,7 @@ export const TestProvider = ({ children }: TestProviderProps) => {
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
         <Head />
-        <SettingsProvider settings={settingsJson}>
-          <ThemeProvider theme={settingsJson.theme}>{children}</ThemeProvider>
-        </SettingsProvider>
+        <ThemeProvider>{children}</ThemeProvider>
       </QueryClientProvider>
     </React.StrictMode>
   );

diff --git a/apps/kyb-app/src/common/components/molecules/ProgressBar/ProgressBar.tsx b/apps/kyb-app/src/common/components/molecules/ProgressBar/ProgressBar.tsx
@@ -1,10 +1,10 @@
-import styles from './ProgressBar.module.css';
 import { Chip } from '@/common/components/atoms/Chip';
 import { LoadingSpinner } from '@/common/components/atoms/LoadingSpinner';
-import { Check } from 'lucide-react';
-import { ctw } from '@ballerine/ui';
 import { useDynamicUIContext } from '@/components/organisms/DynamicUI/hooks/useDynamicUIContext';
+import { ctw } from '@ballerine/ui';
+import { Check } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import styles from './ProgressBar.module.css';
 
 interface Props {
   className?: string;

diff --git a/apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx b/apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx
@@ -1,18 +1,44 @@
-import { useLayoutEffect } from 'react';
-import { transformThemeToInlineStyles } from '@/utils/transform-theme-to-inline-styles';
+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 {
-  theme: ITheme;
   children: React.ReactNode | React.ReactNode[];
 }
 
-export const ThemeProvider = ({ theme, children }: Props) => {
+export const ThemeProvider = ({ children }: Props) => {
+  const language = new URLSearchParams(window.location.search).get(APP_LANGUAGE_QUERY_KEY) || 'en';
+  const { data: uiSchema, isLoading, error } = useUISchemasQuery(language);
+
+  const theme = useMemo(() => {
+    if (isLoading) return null;
+
+    if (error) {
+      console.warn('Failed to load theme', error);
+
+      return defaultTheme.theme;
+    }
+
+    if (!uiSchema?.uiSchema?.theme) return defaultTheme.theme;
+
+    return uiSchema.uiSchema.theme;
+  }, [uiSchema, isLoading, error]);
+
+  const context = useMemo(() => ({ themeDefinition: theme } as IThemeContext), [theme]);
+
   useLayoutEffect(() => {
-    document
-      .getElementsByTagName('html')[0]
-      ?.setAttribute('style', transformThemeToInlineStyles(theme));
-  });
+    if (theme) {
+      document
+        .getElementsByTagName('html')[0]
+        ?.setAttribute('style', transformThemeToInlineStyles(theme as ITheme));
+    }
+  }, [theme]);
 
-  return <>{children}</>;
+  return <Provider value={context}>{children}</Provider>;
 };
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,7 @@
 export interface ITheme {
-  pallete: Record<string, { color: string; foreground: string }>;
-  elements: Record<string, string>;
+  logo?: string;
+  palette: Record<string, { color: string; foreground: string }>;
+  elements: Record<string, string | Record<string, string>>;
 }
 
 export interface ISettings {
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './ThemeProvider';
		export * from './useTheme';