Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor ModalProvider to remove wrapper div and apply theme props directly #2176

Closed
wants to merge 3 commits into from
Closed

Refactor ModalProvider to remove wrapper div and apply theme props directly #2176

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
370040b
chore: fix wrapper issue in ranibowkit provider
Adebesin-Cell Sep 11, 2024
2f1e3ad
chore: fixes formatting
Adebesin-Cell Sep 11, 2024
7b81eec
chore: refactor modal provider to remove wrapper div
Adebesin-Cell Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 38 additions & 31 deletions packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}>
Expand All @@ -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>
Expand Down