add wallet adapter

Client/src/Components/WalletConnector/index.jsx

@@ -0,0 +1,54 @@
+import { Stack } from "@mui/material";
+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,
+	WalletMultiButton,
+	WalletDisconnectButton,
+} from "@solana/wallet-adapter-react-ui";
+import { clusterApiUrl } from "@solana/web3.js";
+
+// Default styles that can be overridden by your app
+import "@solana/wallet-adapter-react-ui/styles.css";
+
+export const Wallet = () => {
+	// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
+	const network = WalletAdapterNetwork.Devnet;
+
+	// You can also provide a custom RPC endpoint.
+	const endpoint = useMemo(() => clusterApiUrl(network), [network]);
+
+	const wallets = useMemo(
+		() => [new UnsafeBurnerWalletAdapter(), new PhantomWalletAdapter()],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[network]
+	);
+
+	return (
+		<ConnectionProvider endpoint={endpoint}>
+			<WalletProvider
+				wallets={wallets}
+				autoConnect
+			>
+				<WalletModalProvider>
+					<Stack
+						direction="row"
+						spacing={2}
+					>
+						<WalletMultiButton />
+						<WalletDisconnectButton />
+					</Stack>
+					{/* Your app's components go here, nested within the context providers. */}
+				</WalletModalProvider>
+			</WalletProvider>
+		</ConnectionProvider>
+	);
+};
+
+export default Wallet;

Client/src/Pages/Settings/index.jsx

@@ -7,6 +7,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import { useIsAdmin } from "../../Hooks/useIsAdmin";
 import Dialog from "../../Components/Dialog";
 import ConfigBox from "../../Components/ConfigBox";
+import WalletConnector from "../../Components/WalletConnector";
 
 //Utils
 import { useTheme } from "@emotion/react";
@@ -360,6 +361,19 @@ const Settings = () => {
 						/>
 					</ConfigBox>
 				)}
+				{isAdmin && (
+					<ConfigBox>
+						<Box>
+							<Typography component="h1">Wallet</Typography>
+							<Typography sx={{ mt: theme.spacing(2) }}>
+								Connect your wallet here
+							</Typography>
+						</Box>
+						<Box>
+							<WalletConnector />
+						</Box>
+					</ConfigBox>
+				)}
 
 				<ConfigBox>
 					<Box>

Client/src/Pages/Wallet/index.jsx

@@ -0,0 +1,55 @@
+import {
+	WalletNotConnectedError,
+	WalletAdapterNetwork,
+} from "@solana/wallet-adapter-base";
+
+import { useConnection, useWallet } from "@solana/wallet-adapter-react";
+import { Keypair, SystemProgram, Transaction } from "@solana/web3.js";
+import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
+import { clusterApiUrl } from "@solana/web3.js";
+import { useMemo, useEffect } from "react";
+import {
+	UnsafeBurnerWalletAdapter,
+	PhantomWalletAdapter,
+} from "@solana/wallet-adapter-wallets";
+const Wallet = () => {
+	const { connection } = useConnection();
+	const { publicKey, sendTransaction } = useWallet();
+
+	useEffect(() => {
+		try {
+			if (!publicKey) return;
+			const getBalance = async () => {
+				const balance = await connection.getBalance(publicKey);
+				console.log({ balance });
+			};
+			getBalance();
+		} catch (error) {
+			console.log(error);
+		}
+	}, [connection, publicKey]);
+	return <div>Wallet</div>;
+};
+
+const Provider = () => {
+	const network = WalletAdapterNetwork.Devnet;
+	const wallets = useMemo(
+		() => [new UnsafeBurnerWalletAdapter(), new PhantomWalletAdapter()],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[network]
+	);
+	const endpoint = useMemo(() => clusterApiUrl(network), [network]);
+
+	return (
+		<ConnectionProvider endpoint={endpoint}>
+			<WalletProvider
+				wallets={wallets}
+				autoConnect
+			>
+				<Wallet />
+			</WalletProvider>
+		</ConnectionProvider>
+	);
+};
+
+export default Provider;

Client/src/Routes/index.jsx

@@ -52,6 +52,8 @@ import Settings from "../Pages/Settings";
 
 import Maintenance from "../Pages/Maintenance";
 
+import Wallet from "../Pages/Wallet";
+
 import ProtectedRoute from "../Components/ProtectedRoute";
 import ProtectedDistributedUptimeRoute from "../Components/ProtectedDistributedUptimeRoute";
 import CreateNewMaintenanceWindow from "../Pages/Maintenance/CreateMaintenance";
@@ -267,6 +269,11 @@ const Routes = () => {
 				element={<DistributedUptimeStatus />}
 			/>
 
+			<Route
+				path="/wallet"
+				element={<Wallet />}
+			/>
+
 			<Route
 				path="*"
 				element={<NotFound />}

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: {