Merge pull request #968 from singnet/ui-fix

[SPT-578] fixed flow on changing metamask account

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/PurchaseDialog/index.js

@@ -3,7 +3,7 @@ import { withStyles } from "@mui/styles";
 import Dialog from "@mui/material/Dialog";
 
 import { useStyles } from "./styles";
-import MetamaskDetails from "../../../../../UserProfile/UserProfileAccount/MetamaskDetails";
+import MetamaskDetails from "../../../../../UserProfile/UserProfileAccount/MetamaskDetails/MetamaskDetails";
 
 const DialogTitles = ["Deposit into Escrow", "Withdraw from Escrow"];
 

src/components/UserProfile/UserProfileAccount/MetamaskDetails/MPEActionTabs.js

@@ -0,0 +1,123 @@
+import { Fragment, useState } from "react";
+import { useDispatch } from "react-redux";
+
+import AppBar from "@mui/material/AppBar";
+import Tabs from "@mui/material/Tabs";
+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 { withStyles } from "@mui/styles";
+import { useStyles } from "./styles";
+import StyledTextField from "../../../common/StyledTextField";
+
+const successAlert = {
+  [txnTypes.WITHDRAW]: "Successfully withdrawn",
+  [txnTypes.DEPOSIT]: "Successfully deposited",
+};
+
+const errorAlert = {
+  [txnTypes.WITHDRAW]: "Unable to withdraw amount",
+  [txnTypes.DEPOSIT]: "Unable to deposit amount",
+};
+
+const MPEActionTabs = ({ classes }) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [amount, setAmount] = useState({});
+  const [alert, setAlert] = useState({});
+
+  const dispatch = useDispatch();
+
+  const onTabChange = (event, newValue) => {
+    setAlert({});
+    setActiveTab(newValue);
+  };
+
+  const handleAmountChange = (event, txnType) => {
+    const { value } = event.target;
+    setAmount({ ...amount, [txnType]: value });
+  };
+
+  const startLoader = {
+    [txnTypes.WITHDRAW]: () => dispatch(loaderActions.startAppLoader(LoaderContent.WITHDRAW)),
+    [txnTypes.DEPOSIT]: () => dispatch(loaderActions.startAppLoader(LoaderContent.DEPOSIT)),
+  };
+
+  const MPEAction = async () => {
+    const sdk = await dispatch(sdkActions.getSdk());
+    return {
+      [txnTypes.WITHDRAW]: () => sdk.account.withdrawFromEscrowAccount,
+      [txnTypes.DEPOSIT]: () => sdk.account.depositToEscrowAccount,
+    };
+  };
+
+  const handleMPEAction = async () => {
+    const txnType = activeTab;
+    setAlert({});
+    startLoader[txnType]();
+    try {
+      const amountInAGI = amount[txnType];
+      const amountInCogs = agiToCogs(amountInAGI);
+      await MPEAction[txnType](amountInCogs);
+      setAlert({ type: alertTypes.SUCCESS, message: successAlert[txnType] });
+    } catch (error) {
+      setAlert({ type: alertTypes.ERROR, message: errorAlert[txnType] });
+    } finally {
+      dispatch(loaderActions.stopAppLoader());
+    }
+  };
+
+  const tabs = [
+    {
+      name: txnTypes.DEPOSIT,
+      activeIndex: 0,
+      component: (
+        <StyledTextField
+          label="Amount to be deposited in AGIX"
+          value={amount[txnTypes.DEPOSIT] || ""}
+          onChange={(event) => handleAmountChange(event, txnTypes.DEPOSIT)}
+        />
+      ),
+    },
+    {
+      name: txnTypes.WITHDRAW,
+      activeIndex: 1,
+      component: (
+        <StyledTextField
+          label="Amount to be withdrawn in AGIX"
+          value={amount[txnTypes.WITHDRAW] || ""}
+          onChange={(event) => handleAmountChange(event, txnTypes.WITHDRAW)}
+        />
+      ),
+    },
+  ];
+  const activeComponent = tabs[activeTab];
+
+  return (
+    <Fragment>
+      <div className={classes.tabsContainer}>
+        <AppBar position="static" className={classes.tabsHeader}>
+          <Tabs value={activeTab} onChange={onTabChange}>
+            {tabs.map((value) => (
+              <Tab key={value.name} label={value.name} />
+            ))}
+          </Tabs>
+        </AppBar>
+        {activeComponent.component}
+        <AlertBox type={alert.type} message={alert.message} />
+      </div>
+      <div className={classes.btnContainer}>
+        <StyledButton
+          type="blue"
+          btnText={activeComponent.name}
+          onClick={() => handleMPEAction(activeComponent.name)}
+        />
+      </div>
+    </Fragment>
+  );
+};
+
+export default withStyles(useStyles)(MPEActionTabs);

src/components/UserProfile/UserProfileAccount/MetamaskDetails/MetamaskDetails.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { withStyles } from "@mui/styles";
+import { useStyles } from "./styles";
+
+import InfoIcon from "@mui/icons-material/Info";
+import { cogsToAgi } from "../../../../utility/PricingStrategy";
+import { loaderActions, sdkActions } from "../../../../Redux/actionCreators";
+import { LoaderContent } from "../../../../utility/constants/LoaderContent";
+import AlertBox, { alertTypes } from "../../../common/AlertBox";
+import { Networks } from "../../../../config/Networks";
+
+const MetamaskDetails = ({ classes }) => {
+  const wallet = useSelector((state) => state.userReducer.wallet);
+
+  const [tokenBalance, setTokenBalance] = useState("");
+  const [escrowBalance, setEscrowBalance] = useState("");
+  const [alert, setAlert] = useState({});
+  const dispatch = useDispatch();
+
+  const currentNetwork = Networks[process.env.REACT_APP_ETH_NETWORK];
+
+  useEffect(() => {
+    const getAccountDetails = async () => {
+      await retrieveAccountDetails();
+    };
+    getAccountDetails();
+  }, [wallet]);
+
+  const retrieveAccountDetails = async () => {
+    try {
+      dispatch(loaderActions.startAppLoader(LoaderContent.FETCH_MM_ACC_DETAILS));
+      const sdk = await dispatch(sdkActions.getSdk());
+      const escrowBalance = await sdk.account.escrowBalance();
+      const tokenBalance = await sdk.account.balance();
+
+      setEscrowBalance(cogsToAgi(escrowBalance));
+      setTokenBalance(cogsToAgi(tokenBalance));
+    } catch (error) {
+      console.log("error: ", error);
+      setAlert({ type: alertTypes.ERROR, message: `Unable to fetch account details` });
+    } finally {
+      dispatch(loaderActions.stopAppLoader());
+    }
+  };
+
+  return (
+    <div className={classes.accountDetails}>
+      <div>
+        <div className={classes.label}>
+          <InfoIcon />
+          <span>Current Network</span>
+        </div>
+        <span>{currentNetwork} Network</span>
+      </div>
+      <div>
+        <div className={classes.label}>
+          <InfoIcon />
+          <span>Wallet ID</span>
+        </div>
+        <span className={classes.walletId}>{wallet.address}</span>
+      </div>
+      <div className={classes.bgBox}>
+        <div className={classes.label}>
+          <InfoIcon />
+          <span>Total Tokens</span>
+        </div>
+        <span>{tokenBalance} AGIX</span>
+      </div>
+      <div className={classes.bgBox}>
+        <div className={classes.label}>
+          <InfoIcon />
+          <span>Escrow Balance</span>
+        </div>
+        <span>{escrowBalance} AGIX</span>
+      </div>
+      <AlertBox type={alert.type} message={alert.message} />
+    </div>
+  );
+};
+
+export default withStyles(useStyles)(MetamaskDetails);