Refactor ModalProvider to remove wrapper div and apply theme props directly

packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx

@@ -1,20 +1,28 @@
-import React, { ReactNode, createContext, useContext } from 'react';
+import React, { type ReactNode, createContext, useContext } from 'react';
 import { useAccountEffect } from 'wagmi';
 import type { Chain } from 'wagmi/chains';
 import { cssStringFromTheme } from '../../css/cssStringFromTheme';
-import { ThemeVars } from '../../css/sprinkles.css';
-import { Locale } from '../../locales';
+import type { ThemeVars } from '../../css/sprinkles.css';
+import type { Locale } from '../../locales';
 import { lightTheme } from '../../themes/lightTheme';
 import { TransactionStoreProvider } from '../../transactions/TransactionStoreContext';
-import { AppContext, DisclaimerComponent, defaultAppInfo } from './AppContext';
-import { AvatarComponent, AvatarContext, defaultAvatar } from './AvatarContext';
+import {
+  AppContext,
+  type DisclaimerComponent,
+  defaultAppInfo,
+} from './AppContext';
+import {
+  type AvatarComponent,
+  AvatarContext,
+  defaultAvatar,
+} from './AvatarContext';
 import { CoolModeContext } from './CoolModeContext';
 import { I18nProvider } from './I18nContext';
 import { ModalProvider } from './ModalContext';
 import {
   ModalSizeOptions,
   ModalSizeProvider,
-  ModalSizes,
+  type ModalSizes,
 } from './ModalSizeContext';
 import { RainbowKitChainProvider } from './RainbowKitChainContext';
 import { ShowBalanceProvider } from './ShowBalanceContext';
@@ -100,6 +108,20 @@ export function RainbowKitProvider({
   };
 
   const avatarContext = avatar ?? defaultAvatar;
+  const themeProps = theme ? createThemeRootProps(id) : {};
+  const themeStyles = theme
+    ? [
+        `${selector}{${cssStringFromTheme(
+          'lightMode' in theme ? theme.lightMode : theme,
+        )}}`,
+        'darkMode' in theme
+          ? `@media(prefers-color-scheme:dark){${selector}{${cssStringFromTheme(
+              theme.darkMode,
+              { extends: theme.lightMode },
+            )}}}`
+          : null,
+      ].join('')
+    : '';
 
   return (
     <RainbowKitChainProvider initialChain={initialChain}>
@@ -116,36 +138,21 @@ export function RainbowKitProvider({
                       <ThemeIdContext.Provider value={id}>
                         <ShowBalanceProvider>
                           <ModalProvider>
-                            {theme ? (
-                              <div {...createThemeRootProps(id)}>
+                            <React.Fragment>
+                              {theme && (
                                 <style
                                   // biome-ignore lint/security/noDangerouslySetInnerHtml: TODO
                                   dangerouslySetInnerHTML={{
-                                    // Selectors are sanitized to only contain alphanumeric
-                                    // and underscore characters. Theme values generated by
-                                    // cssStringFromTheme are sanitized, removing
-                                    // characters that terminate values / HTML tags.
-                                    __html: [
-                                      `${selector}{${cssStringFromTheme(
-                                        'lightMode' in theme
-                                          ? theme.lightMode
-                                          : theme,
-                                      )}}`,
-
-                                      'darkMode' in theme
-                                        ? `@media(prefers-color-scheme:dark){${selector}{${cssStringFromTheme(
-                                            theme.darkMode,
-                                            { extends: theme.lightMode },
-                                          )}}}`
-                                        : null,
-                                    ].join(''),
+                                    __html: themeStyles,
                                   }}
                                 />
-                                {children}
-                              </div>
-                            ) : (
-                              children
-                            )}
+                              )}
+                              {React.Children.map(children, (child) =>
+                                React.isValidElement(child)
+                                  ? React.cloneElement(child, themeProps)
+                                  : child,
+                              )}
+                            </React.Fragment>
                           </ModalProvider>
                         </ShowBalanceProvider>
                       </ThemeIdContext.Provider>