From 370040b64d94f8cb8a17e2170415f51bcd0e56ce Mon Sep 17 00:00:00 2001
From: Adebesin Cell <adebesintolulope80@gmail.com>
Date: Wed, 11 Sep 2024 06:11:24 +0100
Subject: [PATCH 1/3] chore: fix wrapper issue in ranibowkit provider

---
 .../RainbowKitProvider/RainbowKitProvider.tsx | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
index fde6e7d5b6..b98445225e 100644
--- a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
+++ b/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';
@@ -80,7 +88,7 @@ export function RainbowKitProvider({
   modalSize = ModalSizeOptions.WIDE,
   showRecentTransactions = false,
   theme = defaultTheme,
-}: RainbowKitProviderProps) {
+}: Readonly<RainbowKitProviderProps>) {
   usePreloadImages();
   useFingerprint();
 
@@ -101,6 +109,20 @@ export function RainbowKitProvider({
 
   const avatarContext = avatar ?? defaultAvatar;
 
+  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}>
       <WalletButtonProvider>
@@ -117,32 +139,10 @@ export function RainbowKitProvider({
                         <ShowBalanceProvider>
                           <ModalProvider>
                             {theme ? (
-                              <div {...createThemeRootProps(id)}>
-                                <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(''),
-                                  }}
-                                />
+                              <>
+                                <style>{themeStyles}</style>
                                 {children}
-                              </div>
+                              </>
                             ) : (
                               children
                             )}

From 2f1e3ad32bca08f7f7619c54047f7c618b574d1e Mon Sep 17 00:00:00 2001
From: Adebesin Cell <adebesintolulope80@gmail.com>
Date: Wed, 11 Sep 2024 06:31:43 +0100
Subject: [PATCH 2/3] chore: fixes formatting

---
 .../src/components/RainbowKitProvider/RainbowKitProvider.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
index b98445225e..16fda14ca5 100644
--- a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
+++ b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
@@ -88,7 +88,7 @@ export function RainbowKitProvider({
   modalSize = ModalSizeOptions.WIDE,
   showRecentTransactions = false,
   theme = defaultTheme,
-}: Readonly<RainbowKitProviderProps>) {
+}: RainbowKitProviderProps) {
   usePreloadImages();
   useFingerprint();
 

From 7b81eecbddbb5092ddc9f828bf498ce3ef39e06d Mon Sep 17 00:00:00 2001
From: Adebesin Cell <adebesintolulope80@gmail.com>
Date: Wed, 11 Sep 2024 07:08:50 +0100
Subject: [PATCH 3/3] chore: refactor modal provider to remove wrapper div

---
 .../RainbowKitProvider/RainbowKitProvider.tsx | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
index 16fda14ca5..559beae8fe 100644
--- a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
+++ b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
@@ -108,7 +108,7 @@ export function RainbowKitProvider({
   };
 
   const avatarContext = avatar ?? defaultAvatar;
-
+  const themeProps = theme ? createThemeRootProps(id) : {};
   const themeStyles = theme
     ? [
         `${selector}{${cssStringFromTheme(
@@ -138,14 +138,21 @@ export function RainbowKitProvider({
                       <ThemeIdContext.Provider value={id}>
                         <ShowBalanceProvider>
                           <ModalProvider>
-                            {theme ? (
-                              <>
-                                <style>{themeStyles}</style>
-                                {children}
-                              </>
-                            ) : (
-                              children
-                            )}
+                            <React.Fragment>
+                              {theme && (
+                                <style
+                                  // biome-ignore lint/security/noDangerouslySetInnerHtml: TODO
+                                  dangerouslySetInnerHTML={{
+                                    __html: themeStyles,
+                                  }}
+                                />
+                              )}
+                              {React.Children.map(children, (child) =>
+                                React.isValidElement(child)
+                                  ? React.cloneElement(child, themeProps)
+                                  : child,
+                              )}
+                            </React.Fragment>
                           </ModalProvider>
                         </ShowBalanceProvider>
                       </ThemeIdContext.Provider>