Merge pull request #1750 from bluewave-labs/feat/fe/wallet-adapter

feat: fe/wallet adapter

Client/package.json

@@ -22,6 +22,12 @@
 		"@mui/x-data-grid": "7.26.0",
 		"@mui/x-date-pickers": "7.26.0",
 		"@reduxjs/toolkit": "2.5.1",
+		"@solana/wallet-adapter-base": "0.9.23",
+		"@solana/wallet-adapter-material-ui": "0.16.34",
+		"@solana/wallet-adapter-react": "0.15.35",
+		"@solana/wallet-adapter-react-ui": "0.9.35",
+		"@solana/wallet-adapter-wallets": "0.19.32",
+		"@solana/web3.js": "1.98.0",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
 		"flag-icons": "7.3.2",
@@ -31,7 +37,7 @@
 		"jwt-decode": "^4.0.0",
 		"maplibre-gl": "5.1.0",
 		"mui-color-input": "^5.0.1",
-		"react": "^18.2.0",
+		"react": "18.3.1",
 		"react-dnd": "^16.0.1",
 		"react-dnd-html5-backend": "^16.0.1",
 		"react-dom": "^18.2.0",

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>
 	);
 }

Client/src/Components/WalletProvider/index.jsx

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
+import {
+	UnsafeBurnerWalletAdapter,
+	PhantomWalletAdapter,
+} from "@solana/wallet-adapter-wallets";
+
+import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+import { clusterApiUrl } from "@solana/web3.js";
+import PropTypes from "prop-types";
+
+// Default styles that can be overridden by your app
+import "@solana/wallet-adapter-react-ui/styles.css";
+
+export const Wallet = ({ children }) => {
+	// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
+	const network = WalletAdapterNetwork.Mainnet;
+
+	// You can also provide a custom RPC endpoint.
+	const endpoint = useMemo(() => clusterApiUrl(network), [network]);
+
+	const wallets = useMemo(
+		() => [new PhantomWalletAdapter()],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[network]
+	);
+
+	return (
+		<ConnectionProvider endpoint={endpoint}>
+			<WalletProvider
+				wallets={wallets}
+				autoConnect
+			>
+				<WalletModalProvider>{children}</WalletModalProvider>
+			</WalletProvider>
+		</ConnectionProvider>
+	);
+};
+
+Wallet.propTypes = {
+	children: PropTypes.node,
+};
+
+export default Wallet;

Client/src/Pages/Settings/index.jsx

@@ -7,6 +7,10 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import { useIsAdmin } from "../../Hooks/useIsAdmin";
 import Dialog from "../../Components/Dialog";
 import ConfigBox from "../../Components/ConfigBox";
+import {
+	WalletMultiButton,
+	WalletDisconnectButton,
+} from "@solana/wallet-adapter-react-ui";
 
 //Utils
 import { useTheme } from "@emotion/react";
@@ -360,6 +364,25 @@ const Settings = () => {
 						/>
 					</ConfigBox>
 				)}
+				{isAdmin && (
+					<ConfigBox>
+						<Box>
+							<Typography component="h1">Wallet</Typography>
+							<Typography sx={{ mt: theme.spacing(2) }}>
+								Connect your wallet here
+							</Typography>
+						</Box>
+						<Box>
+							<Stack
+								direction="row"
+								spacing={2}
+							>
+								<WalletMultiButton />
+								<WalletDisconnectButton />
+							</Stack>
+						</Box>
+					</ConfigBox>
+				)}
 
 				<ConfigBox>
 					<Box>

Client/src/Utils/Theme/globalTheme.js

@@ -109,7 +109,7 @@ const baseTheme = (palette) => ({
 								return (
 									props.variant === "contained" &&
 									props.disabled &&
-									props.classes.loadingIndicator === undefined // Do not apply to loading button
+									props?.classes?.loadingIndicator === undefined // Do not apply to loading button
 								);
 							},
 							style: {