wrap application in wallet provider

Client/src/App.jsx

@@ -11,6 +11,7 @@ import { getAppSettings } from "./Features/Settings/settingsSlice";
 import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Routes } from "./Routes";
+import WalletProvider from "./Components/WalletProvider";
 
 function App() {
 	const mode = useSelector((state) => state.ui.mode);
@@ -34,19 +35,21 @@ function App() {
 	return (
 		/* Extract Themeprovider, baseline and global styles to Styles */
 		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
-			<CssBaseline />
-			<GlobalStyles
-				styles={({ palette }) => {
-					return {
-						body: {
-							backgroundImage: `radial-gradient(circle, ${palette.gradient.color1}, ${palette.gradient.color2}, ${palette.gradient.color3}, ${palette.gradient.color4}, ${palette.gradient.color5})`,
-							color: palette.primary.contrastText,
-						},
-					};
-				}}
-			/>
-			<Routes />
-			<ToastContainer />
+			<WalletProvider>
+				<CssBaseline />
+				<GlobalStyles
+					styles={({ palette }) => {
+						return {
+							body: {
+								backgroundImage: `radial-gradient(circle, ${palette.gradient.color1}, ${palette.gradient.color2}, ${palette.gradient.color3}, ${palette.gradient.color4}, ${palette.gradient.color5})`,
+								color: palette.primary.contrastText,
+							},
+						};
+					}}
+				/>
+				<Routes />
+				<ToastContainer />
+			</WalletProvider>
 		</ThemeProvider>
 	);
 }