changes as per feedback

admin_frontend/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

frontend/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

frontend/.gitignore

@@ -14,3 +14,5 @@ chrome-user-data
 .vscode
 *.swp
 *.swo
+
+.env.local

frontend/src/components/ConnectedIcon.jsx

@@ -1,13 +1,13 @@
 import React, { Fragment } from "react";
 
 const ColoredCircle = ({ color }) => {
-  const styles = { backgroundColor: color };
+	const styles = { backgroundColor: color };
 
-  return color ? (
-    <Fragment>
-      <span className="colored-circle" style={styles} />
-    </Fragment>
-  ) : null;
+	return color ? (
+		<Fragment>
+			<span className="colored-circle" style={styles} />
+		</Fragment>
+	) : null;
 };
 
 export default ColoredCircle;

frontend/src/components/Dashboard.jsx

@@ -30,6 +30,7 @@ import EtherspotLogo from "../assets/[email protected]";
 // constants
 import { networks } from "../utils/constant";
 import EtherspotPaymasterAbi from "../abi/EtherspotPaymasterAbi.json";
+import { ENDPOINTS } from "../constants/constants";
 
 const ITEM_HEIGHT = 48;
 const MenuProps = {
@@ -137,7 +138,7 @@ const Dashboard = ({ logInType }) => {
 		try {
 			setIsLoading(true);
 			const data = await (
-				await fetch("http://localhost:5050/getSupportedNetworks", {
+				await fetch(`${process.env.REACT_APP_SERVER_URL}${ENDPOINTS['getSupportedNetworks']}`, {
 					method: "POST",
 					body: JSON.stringify({ WALLET_ADDRESS: address }),
 				})
@@ -308,7 +309,7 @@ const Dashboard = ({ logInType }) => {
 			setIsLoading(false);
 		} catch (e) {
 			console.error(e.message);
-			toast.error("Something went wrong on MetaMask");
+			toast.error("Something went wrong while submitting. Please check your injected wallet");
 			setIsLoading(false);
 		}
 	};
@@ -364,7 +365,7 @@ const Dashboard = ({ logInType }) => {
 			setIsLoading(false);
 		} catch (err) {
 			console.error(err);
-			toast.error("Something went wrong on MetaMask");
+			toast.error("Something went wrong while submitting. Please check your injected wallet");
 			setIsLoading(false);
 		}
 	};

frontend/src/components/Header.jsx

@@ -6,35 +6,42 @@ import { styled } from "styled-components";
 import { UserAuth } from "../context/AuthContext";
 
 // assets
-import EtherspotLogo from '../assets/[email protected]';
+import EtherspotLogo from "../assets/[email protected]";
 
 const LogoText = styled.span`
     margin: '3px 0 4px 8px', 
     font-size: '24px', 
     text-align: 'center', 
     color: '#cfcfcf'
-  `
+  `;
 
 const Header = () => {
-  const { user, signIn } = UserAuth();
-  const [signedIn, setSignedIn] = useState(false);
+	const { user, signIn } = UserAuth();
+	const [signedIn, setSignedIn] = useState(false);
 
-  useEffect(() => {
-    if (user?.address) setSignedIn(true);
-  }, [user])
+	useEffect(() => {
+		if (user?.address) setSignedIn(true);
+	}, [user]);
 
-  return (
-    <div className="flex justify-between w-full items-center mx-auto p-4">
-      <div className="flex items-center text-cyan-400">
-        <img src={EtherspotLogo} width={36} height={36} alt={'EtherspotLogo'} />
-        <LogoText>Etherspot Arka</LogoText>
-      </div>
-      { signedIn ? <span className="text-white text-sm">{user?.address}</span> :
-      <button onClick={signIn} className="w-40 h-10 font-medium text-sm rounded-full" style={{ backgroundColor: "#2f2f2f", color: "#fff" }}>
-        Connect Wallet
-      </button>}
-    </div>
-  );
+	return (
+		<div className="flex justify-between w-full items-center mx-auto p-4">
+			<div className="flex items-center text-cyan-400">
+				<img src={EtherspotLogo} width={36} height={36} alt={"EtherspotLogo"} />
+				<LogoText>Etherspot Arka</LogoText>
+			</div>
+			{signedIn ? (
+				<span className="text-white text-sm">{user?.address}</span>
+			) : (
+				<button
+					onClick={signIn}
+					className="w-40 h-10 font-medium text-sm rounded-full"
+					style={{ backgroundColor: "#2f2f2f", color: "#fff" }}
+				>
+					Connect Wallet
+				</button>
+			)}
+		</div>
+	);
 };
 
 export default Header;

frontend/src/components/NotFound.jsx

@@ -4,21 +4,21 @@ import { useNavigate } from "react-router-dom";
 import { UserAuth } from "../context/AuthContext";
 
 const NotFound = () => {
-  const { user } = UserAuth();
-  const navigate = useNavigate();
+	const { user } = UserAuth();
+	const navigate = useNavigate();
 
-  useEffect(() => {
-    if(!user) {
-      toast.error('no such user exists');
-      navigate('/');
-    }
-  }, [user, navigate]);
+	useEffect(() => {
+		if (!user) {
+			toast.error("no such user exists");
+			navigate("/");
+		}
+	}, [user, navigate]);
 
-  return (
-    <div>
-      <h1>Page Not Found</h1>
-    </div>
-  );
+	return (
+		<div>
+			<h1>Page Not Found</h1>
+		</div>
+	);
 };
 
 export default NotFound;

frontend/src/components/ProtectedRoute.js

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { UserAuth } from '../context/AuthContext';
 

frontend/src/components/TransactionSentToast.jsx

@@ -1,30 +1,30 @@
 import toast from "react-hot-toast";
 
 const TransactionSentToast = ({ t, blockExplorerLink, txHash }) => {
-  const openInExplorer = (txHash) => {
-    window.open(`${blockExplorerLink}${txHash}`, "_blank");
-  };
+	const openInExplorer = (txHash) => {
+		window.open(`${blockExplorerLink}${txHash}`, "_blank");
+	};
 
-  return (
-    <div className="flex">
-      <b className="justify-center align-middle">Transaction Sent</b>
-      <button
-        className="font-medium text-sm rounded-full text-blue-600 ml-4 mr-4"
-        onClick={() => {
-          openInExplorer(txHash);
-          toast.dismiss(t.id);
-        }}
-      >
-        Open in Explorer
-      </button>
-      <button
-        className="text-md font-bold text-red-600"
-        onClick={() => toast.dismiss(t.id)}
-      >
-        x
-      </button>
-    </div>
-  );
+	return (
+		<div className="flex">
+			<b className="justify-center align-middle">Transaction Sent</b>
+			<button
+				className="font-medium text-sm rounded-full text-blue-600 ml-4 mr-4"
+				onClick={() => {
+					openInExplorer(txHash);
+					toast.dismiss(t.id);
+				}}
+			>
+				Open in Explorer
+			</button>
+			<button
+				className="text-md font-bold text-red-600"
+				onClick={() => toast.dismiss(t.id)}
+			>
+				x
+			</button>
+		</div>
+	);
 };
 
 export default TransactionSentToast;

frontend/src/context/AuthContext.js

@@ -16,7 +16,7 @@ export const AuthContextProvider = ({ children }) => {
           params: [address, "latest"]
         })
       return balance;
-    } catch(err) {
+    } catch (err) {
       console.error('Error on retrieving balance', err);
       return 0;
     }

frontend/src/utils/constant.js

@@ -135,3 +135,7 @@ export const networks = {
     blockExplorerLink: 'https://snowtrace.io/tx/'
   }
 }
+
+export const ENDPOINTS = {
+  'getSupportedNetworks': '/getSupportedNetworks'
+}