feat: support CSP by adding optional nonce

.changeset/fine-mice-matter.md

@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": minor
+---
+
+Added support for Content Security Policy (CSP) by optionally attaching a nonce to <style> tags

packages/rainbowkit/package.json

@@ -70,6 +70,7 @@
     "@vanilla-extract/sprinkles": "1.6.4",
     "clsx": "2.1.1",
     "cuer": "0.0.2",
+    "get-nonce": "^1.0.1",
     "react-remove-scroll": "2.6.2",
     "ua-parser-js": "^1.0.37"
   },

packages/rainbowkit/src/components/AccountModal/AccountModal.tsx

@@ -8,9 +8,10 @@ import { ProfileDetails } from '../ProfileDetails/ProfileDetails';
 export interface AccountModalProps {
   open: boolean;
   onClose: () => void;
+  nonce?: string;
 }
 
-export function AccountModal({ onClose, open }: AccountModalProps) {
+export function AccountModal({ onClose, open, nonce }: AccountModalProps) {
   const { address } = useAccount();
   const { balance, ensAvatar, ensName } = useProfile({
     address,
@@ -27,7 +28,7 @@ export function AccountModal({ onClose, open }: AccountModalProps) {
   return (
     <>
       {address && (
-        <Dialog onClose={onClose} open={open} titleId={titleId}>
+        <Dialog onClose={onClose} open={open} titleId={titleId} nonce={nonce}>
           <DialogContent bottomSheetOnMobile padding="0">
             <ProfileDetails
               address={address}

packages/rainbowkit/src/components/ChainModal/ChainModal.tsx

@@ -20,9 +20,10 @@ import {
 export interface ChainModalProps {
   open: boolean;
   onClose: () => void;
+  nonce?: string;
 }
 
-export function ChainModal({ onClose, open }: ChainModalProps) {
+export function ChainModal({ onClose, open, nonce }: ChainModalProps) {
   const { chainId } = useAccount();
   const { chains } = useConfig();
   const [pendingChainId, setPendingChainId] = useState<number | null>(null);
@@ -57,7 +58,7 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
   }
 
   return (
-    <Dialog onClose={onClose} open={open} titleId={titleId}>
+    <Dialog onClose={onClose} open={open} titleId={titleId} nonce={nonce}>
       <DialogContent bottomSheetOnMobile paddingBottom="0">
         <Box display="flex" flexDirection="column" gap="14">
           <Box

packages/rainbowkit/src/components/ConnectModal/ConnectModal.tsx

@@ -9,9 +9,10 @@ import { SignIn } from '../SignIn/SignIn';
 export interface ConnectModalProps {
   open: boolean;
   onClose: () => void;
+  nonce?: string;
 }
 
-export function ConnectModal({ onClose, open }: ConnectModalProps) {
+export function ConnectModal({ onClose, open, nonce }: ConnectModalProps) {
   const titleId = 'rk_connect_title';
   const connectionStatus = useConnectionStatus();
 
@@ -35,7 +36,12 @@ export function ConnectModal({ onClose, open }: ConnectModalProps) {
 
   if (connectionStatus === 'disconnected') {
     return (
-      <Dialog onClose={onConnectModalCancel} open={open} titleId={titleId}>
+      <Dialog
+        onClose={onConnectModalCancel}
+        open={open}
+        titleId={titleId}
+        nonce={nonce}
+      >
         <DialogContent bottomSheetOnMobile padding="0" wide>
           <ConnectOptions onClose={onConnectModalCancel} />
         </DialogContent>
@@ -45,7 +51,12 @@ export function ConnectModal({ onClose, open }: ConnectModalProps) {
 
   if (connectionStatus === 'unauthenticated') {
     return (
-      <Dialog onClose={onAuthCancel} open={open} titleId={titleId}>
+      <Dialog
+        onClose={onAuthCancel}
+        open={open}
+        titleId={titleId}
+        nonce={nonce}
+      >
         <DialogContent bottomSheetOnMobile padding="0">
           <SignIn onClose={onAuthCancel} onCloseModal={onClose} />
         </DialogContent>

packages/rainbowkit/src/components/Dialog/Dialog.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { createPortal } from 'react-dom';
 import { RemoveScroll } from 'react-remove-scroll';
+import { setNonce } from 'get-nonce';
 import { isMobile } from '../../utils/isMobile';
 import { Box } from '../Box/Box';
 import { useThemeRootProps } from '../RainbowKitProvider/RainbowKitProvider';
@@ -22,9 +23,16 @@ interface DialogProps {
   titleId: string;
   onMountAutoFocus?: (event: Event) => void;
   children: ReactNode;
+  nonce?: string;
 }
 
-export function Dialog({ children, onClose, open, titleId }: DialogProps) {
+export function Dialog({
+  children,
+  onClose,
+  open,
+  titleId,
+  nonce,
+}: DialogProps) {
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) =>
       open && event.key === 'Escape' && onClose();
@@ -45,6 +53,10 @@ export function Dialog({ children, onClose, open, titleId }: DialogProps) {
   const themeRootProps = useThemeRootProps();
   const mobile = isMobile();
 
+  if (nonce) {
+    setNonce(nonce);
+  }
+
   return (
     <>
       {open

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

@@ -45,9 +45,10 @@ const ModalContext = createContext<ModalContextValue>({
 
 interface ModalProviderProps {
   children: ReactNode;
+  nonce?: string;
 }
 
-export function ModalProvider({ children }: ModalProviderProps) {
+export function ModalProvider({ children, nonce }: ModalProviderProps) {
   const {
     closeModal: closeConnectModal,
     isModalOpen: connectModalOpen,
@@ -140,9 +141,21 @@ export function ModalProvider({ children }: ModalProviderProps) {
       )}
     >
       {children}
-      <ConnectModal onClose={closeConnectModal} open={connectModalOpen} />
-      <AccountModal onClose={closeAccountModal} open={accountModalOpen} />
-      <ChainModal onClose={closeChainModal} open={chainModalOpen} />
+      <ConnectModal
+        onClose={closeConnectModal}
+        open={connectModalOpen}
+        nonce={nonce}
+      />
+      <AccountModal
+        onClose={closeAccountModal}
+        open={accountModalOpen}
+        nonce={nonce}
+      />
+      <ChainModal
+        onClose={closeChainModal}
+        open={chainModalOpen}
+        nonce={nonce}
+      />
     </ModalContext.Provider>
   );
 }

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

@@ -73,6 +73,7 @@ export interface RainbowKitProviderProps {
   avatar?: AvatarComponent;
   modalSize?: ModalSizes;
   locale?: Locale;
+  nonce?: string; // optional CSP nonce
 }
 
 const defaultTheme = lightTheme();
@@ -88,6 +89,7 @@ export function RainbowKitProvider({
   modalSize = ModalSizeOptions.WIDE,
   showRecentTransactions = false,
   theme = defaultTheme,
+  nonce,
 }: RainbowKitProviderProps) {
   usePreloadImages();
   useFingerprint();
@@ -123,10 +125,11 @@ export function RainbowKitProvider({
                     <AppContext.Provider value={appContext}>
                       <ThemeIdContext.Provider value={id}>
                         <ShowBalanceProvider>
-                          <ModalProvider>
+                          <ModalProvider nonce={nonce}>
                             {theme ? (
                               <div {...createThemeRootProps(id)}>
                                 <style
+                                  nonce={nonce}
                                   // biome-ignore lint/security/noDangerouslySetInnerHtml: TODO
                                   dangerouslySetInnerHTML={{
                                     // Selectors are sanitized to only contain alphanumeric