Merge pull request #970 from singnet/ui-fix

Ui-fix
singnet · Jan 20, 2025 · e325d3f · e325d3f
2 parents e1c56d7 + 03bc2b2
commit e325d3f
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 59 deletions.
diff --git a/src/Redux/actionCreators/ServiceActions.js b/src/Redux/actionCreators/ServiceActions.js
@@ -119,7 +119,7 @@ const fetchFeedbackAPI = (email, orgId, serviceId, token) => {
   return getAPI(apiName, path, apiOptions);
 };
 
-const fetchAuthTokenAPI = (serviceId, groupId, publicKey, orgId, userId, token) => {
+const fetchAuthTokenAPI = async (serviceId, groupId, publicKey, orgId, userId, token) => {
   const apiName = APIEndpoints.SIGNER_SERVICE.name;
   const apiPath = APIPaths.FREE_CALL_TOKEN;
   const queryParams = {
@@ -130,8 +130,8 @@ const fetchAuthTokenAPI = (serviceId, groupId, publicKey, orgId, userId, token)
     user_id: userId,
   };
   const apiOptions = initializeAPIOptions(token, null, queryParams);
-  const authTokenRequest = getAPI(apiName, apiPath, apiOptions);
-  return authTokenRequest.response;
+  const authTokenRequest = await getAPI(apiName, apiPath, apiOptions);
+  return authTokenRequest;
 };
 
 export const downloadAuthToken = (serviceId, groupId, publicKey, orgId) => async (dispatch) => {

diff --git a/src/components/ServiceDetails/InstallAndRunService/index.js b/src/components/ServiceDetails/InstallAndRunService/index.js
@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import Grid from "@mui/material/Grid";
 import { withStyles } from "@mui/styles";
-import Button from "@mui/material/Button";
 import InfoIcon from "@mui/icons-material/Info";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
@@ -16,6 +15,7 @@ import { useStyles } from "./styles";
 import { serviceActions } from "../../../Redux/actionCreators";
 import AlertBox, { alertTypes } from "../../common/AlertBox";
 import Card from "../../common/Card";
+import StyledButton from "../../common/StyledButton";
 
 const web3 = new Web3(process.env.REACT_APP_WEB3_PROVIDER, null, {});
 const downloadTokenFileName = "authToken.txt";
@@ -26,40 +26,59 @@ class InstallAndRunService extends Component {
     publickey: "",
     downloadTokenURL: "",
     alert: {},
+    isTokenGenerating: false,
+    isAddressValid: false,
   };
 
   handleTabChange = (activeTab) => {
     this.setState({ activeTab, alert: {}, downloadTokenURL: "" });
   };
 
-  generateToken = async (e) => {
-    e.preventDefault();
+  isValidAddress = (address) => {
     try {
-      this.setState({ alert: {}, downloadTokenURL: "" });
-      if (web3.utils.isAddress(this.state.publickey)) {
-        const { service, groupId, downloadAuthToken } = this.props;
-        const downloadTokenURL = await downloadAuthToken(
-          service.service_id,
-          groupId,
-          this.state.publickey,
-          service.org_id
-        );
-        this.setState({ downloadTokenURL });
-      } else {
-        this.setState({ alert: { type: alertTypes.ERROR, message: "invalid public key" } });
-      }
+      const checksumAddress = web3.utils.toChecksumAddress(address);
+      return checksumAddress ? true : false;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  generateToken = async () => {
+    if (this.state.isTokenGenerating) {
+      return;
+    }
+
+    try {
+      this.setState({ alert: {}, downloadTokenURL: "", isTokenGenerating: true });
+      const { service, groupId, downloadAuthToken } = this.props;
+      const downloadTokenURL = await downloadAuthToken(
+        service.service_id,
+        groupId,
+        this.state.publickey,
+        service.org_id
+      );
+      this.setState({ downloadTokenURL });
     } catch (e) {
       this.setState({ alert: { type: alertTypes.ERROR, message: "Unable to download the token. Please try later" } });
+    } finally {
+      this.setState({ isTokenGenerating: false });
     }
   };
 
   handlePublicKey = (event) => {
-    this.setState({ publickey: event.currentTarget.value, alert: {}, downloadTokenURL: "" });
+    const address = event.currentTarget.value;
+    this.setState({ publickey: address, downloadTokenURL: "" });
+    const isAddressValid = this.isValidAddress(address);
+    if (!isAddressValid) {
+      this.setState({ alert: { type: alertTypes.ERROR, message: "invalid public key" }, isAddressValid: false });
+    } else {
+      this.setState({ alert: {}, isAddressValid: true });
+    }
   };
 
   render() {
     const { classes, service } = this.props;
-    const { activeTab, downloadTokenURL, alert } = this.state;
+    const { activeTab, downloadTokenURL, alert, isTokenGenerating, isAddressValid } = this.state;
     const tabs = [
       {
         name: "Python",
@@ -128,19 +147,27 @@ class InstallAndRunService extends Component {
                       </Typography>
                     </div>
                     {!downloadTokenURL && (
-                      <Button
-                        type="submit"
-                        className={classes.DownloadTokenBtn}
-                        color="primary"
+                      <StyledButton
+                        type="blue"
+                        btnText="Generate Token"
                         onClick={this.generateToken}
-                      >
-                        Generate Token
-                      </Button>
+                        disabled={isTokenGenerating || !isAddressValid}
+                      />
                     )}
                     {downloadTokenURL && (
-                      <a href={downloadTokenURL} download={downloadTokenFileName}>
-                        Download Token
-                      </a>
+                      <StyledButton
+                        type="blue"
+                        btnText={
+                          <a
+                            className={classes.downloadTokenLink}
+                            href={downloadTokenURL}
+                            download={downloadTokenFileName}
+                          >
+                            Download Token
+                          </a>
+                        }
+                        onClick={this.generateToken}
+                      />
                     )}
                   </div>
                   <AlertBox type={alert.type} message={alert.message} />

diff --git a/src/components/ServiceDetails/InstallAndRunService/styles.js b/src/components/ServiceDetails/InstallAndRunService/styles.js
@@ -1,12 +1,7 @@
 export const useStyles = (theme) => ({
-  DownloadTokenBtn: {
-    padding: "10px 30px",
-    display: "block",
-    color: "#fff",
-    backgroundColor: theme.palette.text.primary,
-    "&:hover": {
-      backgroundColor: "#005ACB",
-    },
+  downloadTokenLink: {
+    textDecoration: "none",
+    color: "inherit",
   },
   freecallContainer: {
     paddingLeft: 20,

diff --git a/src/components/UserProfile/UserProfileAccount/MetamaskDetails/MPEActionTabs.js b/src/components/UserProfile/UserProfileAccount/MetamaskDetails/MPEActionTabs.js
@@ -7,12 +7,11 @@ import Tab from "@mui/material/Tab";
 import StyledButton from "../../../common/StyledButton";
 import AlertBox, { alertTypes } from "../../../common/AlertBox";
 import { agiToCogs, txnTypes } from "../../../../utility/PricingStrategy";
-import { loaderActions, sdkActions } from "../../../../Redux/actionCreators";
-import { LoaderContent } from "../../../../utility/constants/LoaderContent";
-
+import { sdkActions } from "../../../../Redux/actionCreators";
 import { withStyles } from "@mui/styles";
 import { useStyles } from "./styles";
 import StyledTextField from "../../../common/StyledTextField";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 const successAlert = {
   [txnTypes.WITHDRAW]: "Successfully withdrawn",
@@ -24,10 +23,19 @@ const errorAlert = {
   [txnTypes.DEPOSIT]: "Unable to deposit amount",
 };
 
+const MPEActions = {
+  [txnTypes.WITHDRAW]: "withdrawFromEscrowAccount",
+  [txnTypes.DEPOSIT]: "depositToEscrowAccount",
+};
+
 const MPEActionTabs = ({ classes }) => {
   const [activeTab, setActiveTab] = useState(0);
   const [amount, setAmount] = useState({});
   const [alert, setAlert] = useState({});
+  const [isActionInProgress, setIsActionInProgress] = useState({
+    [txnTypes.WITHDRAW]: false,
+    [txnTypes.DEPOSIT]: false,
+  });
 
   const dispatch = useDispatch();
 
@@ -41,32 +49,29 @@ const MPEActionTabs = ({ classes }) => {
     setAmount({ ...amount, [txnType]: value });
   };
 
-  const startLoader = {
-    [txnTypes.WITHDRAW]: () => dispatch(loaderActions.startAppLoader(LoaderContent.WITHDRAW)),
-    [txnTypes.DEPOSIT]: () => dispatch(loaderActions.startAppLoader(LoaderContent.DEPOSIT)),
-  };
-
-  const MPEAction = async () => {
+  const MPEAction = async (txnType, amountInCogs) => {
     const sdk = await dispatch(sdkActions.getSdk());
-    return {
-      [txnTypes.WITHDRAW]: () => sdk.account.withdrawFromEscrowAccount,
-      [txnTypes.DEPOSIT]: () => sdk.account.depositToEscrowAccount,
-    };
+    return await sdk.account[MPEActions[txnType]](amountInCogs);
   };
 
   const handleMPEAction = async () => {
-    const txnType = activeTab;
+    const txnType = activeComponent.name;
+    if (isActionInProgress[txnType]) {
+      return;
+    }
+
+    setIsActionInProgress({ ...isActionInProgress, [txnType]: true });
     setAlert({});
-    startLoader[txnType]();
     try {
       const amountInAGI = amount[txnType];
       const amountInCogs = agiToCogs(amountInAGI);
-      await MPEAction[txnType](amountInCogs);
+      await MPEAction(txnType, amountInCogs);
       setAlert({ type: alertTypes.SUCCESS, message: successAlert[txnType] });
     } catch (error) {
+      console.error(error);
       setAlert({ type: alertTypes.ERROR, message: errorAlert[txnType] });
     } finally {
-      dispatch(loaderActions.stopAppLoader());
+      setIsActionInProgress({ ...isActionInProgress, [txnType]: false });
     }
   };
 
@@ -95,6 +100,7 @@ const MPEActionTabs = ({ classes }) => {
     },
   ];
   const activeComponent = tabs[activeTab];
+  const activeComponentType = activeComponent.name;
 
   return (
     <Fragment>
@@ -112,8 +118,15 @@ const MPEActionTabs = ({ classes }) => {
       <div className={classes.btnContainer}>
         <StyledButton
           type="blue"
-          btnText={activeComponent.name}
-          onClick={() => handleMPEAction(activeComponent.name)}
+          btnText={
+            isActionInProgress[activeComponentType] ? (
+              <CircularProgress className={classes.circularProgress} />
+            ) : (
+              activeComponentType
+            )
+          }
+          onClick={() => handleMPEAction(activeComponentType)}
+          disabled={!Number(amount[activeComponentType]) || isActionInProgress[activeComponentType]}
         />
       </div>
     </Fragment>

diff --git a/src/components/UserProfile/UserProfileAccount/MetamaskDetails/styles.js b/src/components/UserProfile/UserProfileAccount/MetamaskDetails/styles.js
@@ -86,8 +86,12 @@ export const useStyles = (theme) => ({
   tabsContainer: {
     "& > div": {
       width: "100%",
-      marginBottom: 28,
     },
   },
   btnContainer: { textAlign: "center" },
+  circularProgress: {
+    width: "1rem !important",
+    height: "1rem !important",
+    color: theme.palette.text.gray1,
+  },
 });