diff --git a/packages/redux-devtools-rtk-query-monitor/demo/package.json b/packages/redux-devtools-rtk-query-monitor/demo/package.json
index 2c26db9c..e4f18afb 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/package.json
+++ b/packages/redux-devtools-rtk-query-monitor/demo/package.json
@@ -11,15 +11,13 @@
},
"dependencies": {
"@babel/runtime": "^7.27.1",
- "@chakra-ui/react": "^2.10.9",
+ "@chakra-ui/react": "^3.19.1",
"@emotion/react": "^11.14.0",
- "@emotion/styled": "^11.14.0",
"@mswjs/data": "^0.16.2",
"@redux-devtools/core": "workspace:^",
"@redux-devtools/dock-monitor": "workspace:^",
"@redux-devtools/rtk-query-monitor": "workspace:^",
"@reduxjs/toolkit": "^2.8.2",
- "framer-motion": "^12.15.0",
"msw": "^2.8.7",
"react": "^19.1.0",
"react-dom": "^19.1.0",
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx
index 808cc9b2..db99805c 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx
@@ -1,7 +1,7 @@
import PokemonView from './features/pokemon/PokemonView';
import PostsView from './features/posts/PostsView';
-import { Box, Flex, Heading } from '@chakra-ui/react';
-import { Link, UnorderedList, ListItem } from '@chakra-ui/react';
+import { Box, Flex, Heading, List } from '@chakra-ui/react';
+import { Link } from '@chakra-ui/react';
import { Code } from '@chakra-ui/react';
import * as React from 'react';
import { DevToolsSelector } from './features/DevTools/DevToolsSelector';
@@ -27,44 +27,48 @@ export function App() {
-
-
+
+
demo source
-
-
+
+
@redux-devtools/rtk-query-monitor source
-
-
+
+
polling example
-
-
+
+
mutations example
-
-
+
+
);
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx
new file mode 100644
index 00000000..a1e570bb
--- /dev/null
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import React from 'react';
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+
+export function Provider({ children }: { children: React.ReactNode }) {
+ return {children};
+}
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/toaster.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/toaster.tsx
new file mode 100644
index 00000000..4d2a150e
--- /dev/null
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/toaster.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import {
+ Toaster as ChakraToaster,
+ Portal,
+ Spinner,
+ Stack,
+ Toast,
+ createToaster,
+} from '@chakra-ui/react';
+
+export const toaster = createToaster({
+ placement: 'bottom-end',
+ pauseOnPageIdle: true,
+});
+
+export const Toaster = () => {
+ return (
+
+
+ {(toast) => (
+
+ {toast.type === 'loading' ? (
+
+ ) : (
+
+ )}
+
+ {toast.title && {toast.title}}
+ {toast.description && (
+ {toast.description}
+ )}
+
+ {toast.action && (
+ {toast.action.label}
+ )}
+ {toast.closable && }
+
+ )}
+
+
+ );
+};
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx
index 676c0c76..f14334ab 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx
@@ -14,7 +14,7 @@ export function DevToolsSelector() {
return (
Set active devTools
-
+
-
-
+
+
Polling interval
+
+
+
+
+
+
+
+
+
+
+
+ {intervalOptions.items.map((intervalOption) => (
+
+ {intervalOption.label}
+
+
+ ))}
+
+
+
+