@aurora-is-near/intents-swap-widget 3.14.0-redesign.3 → 3.14.0-redesign.7

package/src/hooks/useToggleTheme.ts

@@ -1,11 +1,13 @@
 import { useEffect, useState } from 'react';
 import { isBrowser } from 'browser-or-node';
 
+import { useConfig } from '@/config';
+
 type ThemeMode = 'light' | 'dark' | 'auto';
 
-const applyThemeDataAttr = (theme: ThemeMode) => {
+const applyThemeDataAttr = (theme: ThemeMode, parentEl: Element | null) => {
   if (isBrowser) {
-    document.body?.setAttribute('data-sw-theme', theme);
+    (parentEl ?? document.body).setAttribute('data-sw-theme', theme);
   }
 };
 
@@ -13,6 +15,7 @@ export const useToggleTheme = (
   defaultTheme?: ThemeMode,
   onChange?: (colorPalette: 'light' | 'dark') => void,
 ) => {
+  const { themeParentElementSelector } = useConfig();
   const [colorPalette, setColorPalette] = useState<'light' | 'dark'>();
   const [theme, setTheme] = useState<ThemeMode | undefined>(() => {
     if (isBrowser && defaultTheme === undefined) {
@@ -24,6 +27,10 @@ export const useToggleTheme = (
 
   useEffect(() => {
     if (isBrowser) {
+      const themeParentElement = themeParentElementSelector
+        ? document.querySelector(themeParentElementSelector)
+        : null;
+
       if (theme === undefined) {
         setTheme((localStorage.getItem('theme') as ThemeMode) || 'dark');
       } else if (theme === 'auto') {
@@ -31,7 +38,7 @@ export const useToggleTheme = (
         const updateTheme = () => {
           const palette = mediaQuery.matches ? 'dark' : 'light';
 
-          applyThemeDataAttr(palette);
+          applyThemeDataAttr(palette, themeParentElement);
           setColorPalette(palette);
           onChange?.(palette);
         };
@@ -43,7 +50,7 @@ export const useToggleTheme = (
         return () => mediaQuery.removeEventListener('change', updateTheme);
       } else {
         localStorage.setItem('theme', theme);
-        applyThemeDataAttr(theme);
+        applyThemeDataAttr(theme, themeParentElement);
         setColorPalette(theme);
         onChange?.(theme);
       }

package/src/theme/ThemeProvider.tsx

@@ -1,15 +1,31 @@
+import { isBrowser } from 'browser-or-node';
 import { createContext, type ReactNode, useEffect, useMemo } from 'react';
+
 import { ColorPalette, ColorScheme, HexColor, Theme } from '../types/theme';
 import { createColorPalette } from './createColorPalette';
+import { useConfig } from '@/config';
 
-const setColorVariables = (palette: ColorPalette, colorKey: string) => {
-  Object.entries(palette).forEach(([key, value]) => {
-    document.body.style.setProperty(`--c-sw-${colorKey}-${key}`, value);
-  });
+const setColorVariables = (
+  palette: ColorPalette,
+  colorKey: string,
+  parentEl: Element | null,
+) => {
+  if (isBrowser) {
+    let parentElement = document.body;
+
+    if (parentEl instanceof HTMLElement) {
+      parentElement = parentEl;
+    }
+
+    Object.entries(palette).forEach(([key, value]) => {
+      parentElement.style.setProperty(`--c-sw-${colorKey}-${key}`, value);
+    });
+  }
 };
 
 const setColorPalette = (
   colorKey: string,
+  parentEl: Element | null,
   baseColor?: HexColor,
   colorScheme?: ColorScheme,
 ) => {
@@ -21,16 +37,14 @@ const setColorPalette = (
     return;
   }
 
-  setColorVariables(palette, colorKey);
+  setColorVariables(palette, colorKey, parentEl);
 };
 
-const loadTheme = ({
-  primaryColor = '#D5B7FF',
-  surfaceColor = '#7E8396',
-  colorScheme = 'dark',
-}: Theme) => {
-  setColorPalette('accent', primaryColor, colorScheme);
-  setColorPalette('gray', surfaceColor, colorScheme);
+const loadTheme = (parentEl: Element | null, theme: Theme) => {
+  const { primaryColor, surfaceColor, colorScheme } = theme;
+
+  setColorPalette('accent', parentEl, primaryColor, colorScheme);
+  setColorPalette('gray', parentEl, surfaceColor, colorScheme);
 };
 
 export const ThemeContext = createContext<Theme | undefined>(undefined);
@@ -41,11 +55,16 @@ type ThemeProviderProps = {
 };
 
 export const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
+  const { themeParentElementSelector } = useConfig();
   const value = useMemo((): Theme | undefined => theme, [theme]);
 
   useEffect(() => {
-    if (theme) {
-      loadTheme(theme);
+    if (theme && isBrowser) {
+      const themeParentElement = themeParentElementSelector
+        ? document.querySelector(themeParentElementSelector)
+        : null;
+
+      loadTheme(themeParentElement, theme);
     }
   }, [theme]);
 

package/src/types/config.ts

@@ -65,4 +65,5 @@ export type WidgetConfig = {
   // UI
   hideSendAddress?: boolean;
   hideTokenInputHeadings?: boolean;
+  themeParentElementSelector?: string;
 };

package/src/types/localisation.ts

@@ -14,6 +14,7 @@ export type LocalisationKeys =
   | 'wallet.recipient.message.receiveFunds'
   | 'wallet.connected.error.notSupportedChain'
   // transfer
+  | 'transfer.success.title'
   | 'transfer.success.hash.label'
   | 'transfer.success.intent.label'
   // quote

package/src/widgets/WidgetDeposit/WidgetDepositContent.tsx

@@ -62,11 +62,11 @@ export const WidgetDepositContent = ({
   const { tokenModalOpen, updateTokenModalState } = useTokenModal({ onMsg });
 
   const isCompatibilityCheckRequired = useIsCompatibilityCheckRequired();
-  const [isCompatibilityOpen, setIsCompatibilityOpen] = useState(true);
+  const [isCompatibilityOpen, setIsCompatibilityOpen] = useState(false);
 
   useEffect(() => {
-    if (!isCompatibilityCheckRequired) {
-      setIsCompatibilityOpen(false);
+    if (isCompatibilityCheckRequired) {
+      setIsCompatibilityOpen(true);
     }
   }, [isCompatibilityCheckRequired]);
 

package/src/widgets/WidgetSwap/WidgetSwapContent.tsx

@@ -65,11 +65,13 @@ export const WidgetSwapContent = ({
     useTokenInputPair();
 
   const isCompatibilityCheckRequired = useIsCompatibilityCheckRequired();
-  const [isCompatibilityOpen, setIsCompatibilityOpen] = useState(true);
+  const [isCompatibilityOpen, setIsCompatibilityOpen] = useState(
+    isCompatibilityCheckRequired,
+  );
 
   useEffect(() => {
-    if (!isCompatibilityCheckRequired) {
-      setIsCompatibilityOpen(false);
+    if (isCompatibilityCheckRequired) {
+      setIsCompatibilityOpen(isCompatibilityCheckRequired);
     }
   }, [isCompatibilityCheckRequired]);
 

package/src/widgets/WidgetWithdraw/WidgetWithdrawContent.tsx

@@ -61,11 +61,11 @@ export const WidgetWithdrawContent = ({
     useTokenInputPair();
 
   const isCompatibilityCheckRequired = useIsCompatibilityCheckRequired();
-  const [isCompatibilityOpen, setIsCompatibilityOpen] = useState(true);
+  const [isCompatibilityOpen, setIsCompatibilityOpen] = useState(false);
 
   useEffect(() => {
-    if (!isCompatibilityCheckRequired) {
-      setIsCompatibilityOpen(false);
+    if (isCompatibilityCheckRequired) {
+      setIsCompatibilityOpen(true);
     }
   }, [isCompatibilityCheckRequired]);