Merge pull request #987 from singnet/ui-fix

Fixed UI and payment system
singnet · Feb 20, 2025 · 585c40a · 585c40a
2 parents 57a1f5c + 9958263
commit 585c40a
Show file tree

Hide file tree

Showing 48 changed files with 368 additions and 735 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "redux-thunk": "^3.1.0",
     "singularitynet-platform-contracts": "^1.0.4",
     "slick-carousel": "^1.8.1",
-    "snet-sdk-web": "^4.0.4",
+    "snet-sdk-web": "^4.1.2",
     "utf8": "^3.0.0",
     "validate.js": "^0.13.1",
     "web3": "^4.11.1"

diff --git a/src/Redux/actionCreators/ServiceDetailsActions.js b/src/Redux/actionCreators/ServiceDetailsActions.js
@@ -88,7 +88,8 @@ export const fetchMeteringData =
   async (dispatch) => {
     const { email, token } = await dispatch(fetchAuthenticatedUser());
     const usageData = await meteringAPI(token, orgId, serviceId, groupId, email);
-    return dispatch(fetchMeteringDataSuccess(usageData));
+    dispatch(fetchMeteringDataSuccess(usageData));
+    return usageData;
   };
 
 export const getIsTrainingAvailable = (detailsTraining, isLoggedIn) => {

diff --git a/src/Redux/actionCreators/UserActions.js b/src/Redux/actionCreators/UserActions.js
@@ -569,21 +569,25 @@ export const registerWallet = (address, type) => async (dispatch) => {
 };
 
 export const updateMetamaskWallet = () => async (dispatch, getState) => {
-  const sdk = await dispatch(sdkActions.getSdk());
-  const address = await sdk.account.getAddress();
+  try {
+    const sdk = await dispatch(sdkActions.getSdk());
+    const address = await sdk.account.getAddress();
 
-  if (getState().userReducer.wallet?.address === address) {
-    return address;
-  }
+    if (getState().userReducer.wallet?.address === address) {
+      return address;
+    }
 
-  const availableUserWallets = await dispatch(fetchAvailableUserWallets());
-  const addressAlreadyRegistered = availableUserWallets.some(
-    (wallet) => wallet.address.toLowerCase() === address.toLowerCase()
-  );
+    const availableUserWallets = await dispatch(fetchAvailableUserWallets());
+    const addressAlreadyRegistered = availableUserWallets.some(
+      (wallet) => wallet.address.toLowerCase() === address.toLowerCase()
+    );
 
-  if (!addressAlreadyRegistered) {
-    await dispatch(registerWallet(address, walletTypes.METAMASK));
+    if (!addressAlreadyRegistered) {
+      await dispatch(registerWallet(address, walletTypes.METAMASK));
+    }
+    dispatch(updateWallet({ type: walletTypes.METAMASK, address }));
+    return address;
+  } catch (err) {
+    throw new Error("Can't update metamask wallet");
   }
-  dispatch(updateWallet({ type: walletTypes.METAMASK, address }));
-  return address;
 };
diff --git a/src/components/AiMarketplace/MainSection/Filter/index.js b/src/components/AiMarketplace/MainSection/Filter/index.js
@@ -21,7 +21,7 @@ const Filter = ({ listView, total_count, handleSearchChange, toggleView, current
 
   useEffect(() => {
     return () => dispatch(serviceActions.resetFilter({ pagination }));
-  }, []);
+  }, [dispatch]);
 
   const handleSearch = (event) => {
     setSearchKeyword(event.currentTarget.value);

diff --git a/src/components/FeedbackFormModal/styles.css b/src/components/FeedbackFormModal/styles.css
@@ -81,7 +81,7 @@
 }
 
 .cancel-button {
-   border-color: var(--button-background) !important;
+    border-color: var(--button-background) !important;
 }
 
 /* FORM LAUNCHER */
@@ -91,7 +91,7 @@
     position: fixed;
     bottom: 50px;
     right: 30px;
-    z-index: var(--modal-layout-z-index);
+    z-index: 1;
 }
 
 .feedback-form-launcher {

diff --git a/src/components/Login/Signup/styles.js b/src/components/Login/Signup/styles.js
@@ -121,7 +121,7 @@ export const useStyles = (theme) => ({
     marginTop: 10,
     display: "flex",
     "& button": {
-      padding: " 13px 60px 11px",
+      padding: "15px 60px",
       marginTop: 10,
       "&:first-of-type": { marginRight: 10 },
     },

diff --git a/src/components/Onboarding/Authentication/styles.js b/src/components/Onboarding/Authentication/styles.js
@@ -45,7 +45,7 @@ export const useStyles = (theme) => ({
   buttonsContainer: {
     marginTop: 40,
     "& button": {
-      padding: " 13px 60px 11px",
+      padding: "15px 60px",
     },
   },
   infoText: {

diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js
@@ -20,25 +20,25 @@ const Onboarding = ({ classes }) => {
   const [activeSection, setActiveSection] = useState(0);
   const progressText = [{ label: "Authentication" }, { label: "Terms of service" }];
 
-  const initialChecks = () => {
-    if (!isEmailVerified) {
-      return;
-    }
-    if (activeSection === 0) {
-      setActiveSection(1);
-    }
-    if (isTermsAccepted) {
-      if (location?.state && location?.state?.sourcePath) {
-        navigate(location.state.sourcePath);
+  useEffect(() => {
+    const initialChecks = () => {
+      if (!isEmailVerified) {
         return;
       }
-      navigate(`/${Routes.AI_MARKETPLACE}`);
-    }
-  };
+      if (activeSection === 0) {
+        setActiveSection(1);
+      }
+      if (isTermsAccepted) {
+        if (location?.state && location?.state?.sourcePath) {
+          navigate(location.state.sourcePath);
+          return;
+        }
+        navigate(`/${Routes.AI_MARKETPLACE}`);
+      }
+    };
 
-  useEffect(() => {
     initialChecks();
-  }, []);
+  }, [navigate, isEmailVerified, isTermsAccepted, activeSection, location.state]);
 
   const handleNextSection = () => {
     setActiveSection(activeSection + 1);

diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/CompletedActions/styles.js b/src/components/ServiceDetails/AboutService/ServiceDemo/CompletedActions/styles.js
@@ -5,7 +5,7 @@ export const useStyles = makeStyles((theme) => ({
     marginTop: 10,
     textAlign: "center",
     "& button": {
-      padding: " 13px 60px 11px",
+      padding: "15px 60px",
       marginTop: 10,
       marginRight: "0 !important",
     },

diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { withStyles } from "@mui/styles";
 import Tooltip from "@mui/material/Tooltip";
-import CircularProgress from "@mui/material/CircularProgress";
 
 import AlertBox from "../../../../../common/AlertBox";
 import StyledButton from "../../../../../common/StyledButton";
@@ -14,20 +13,12 @@ import { currentServiceDetails } from "../../../../../../Redux/reducers/ServiceD
 import { isUndefined } from "lodash";
 import { updateMetamaskWallet } from "../../../../../../Redux/actionCreators/UserActions";
 
-const ActiveSession = ({
-  classes,
-  isFreecallLoading,
-  freeCallsRemaining,
-  handleComplete,
-  freeCallsAllowed,
-  isServiceAvailable,
-}) => {
+const ActiveSession = ({ classes, freeCallsRemaining, handleComplete, freeCallsAllowed, isServiceAvailable }) => {
   const dispatch = useDispatch();
   const { detailsTraining } = useSelector((state) => state.serviceDetailsReducer);
   const { org_id, service_id } = useSelector((state) => currentServiceDetails(state));
   const { modelsList } = useSelector((state) => state.serviceTrainingReducer);
   const isLoggedIn = useSelector((state) => state.userReducer.login.isLoggedIn);
-
   const [showTooltip, setShowTooltip] = useState(false);
 
   const progressValue = () => (freeCallsRemaining / freeCallsAllowed) * 100;
@@ -49,7 +40,7 @@ const ActiveSession = ({
     await dispatch(getTrainingModels(org_id, service_id, address));
   };
 
-  const isActionsDisabled = !isServiceAvailable || isFreecallLoading;
+  const isActionsDisabled = !isServiceAvailable;
 
   return (
     <div className={classes.activeSessionContainer}>
@@ -60,9 +51,7 @@ const ActiveSession = ({
       />
       <div className={classes.freeCallsInfo}>
         <span className={classes.FreeApiCallsText}>Free API Calls</span>
-        <span className={classes.ReaminaingCallsNo}>
-          {isFreecallLoading ? <CircularProgress size="20px" /> : freeCallsRemaining}
-        </span>
+        <span className={classes.ReaminaingCallsNo}>{freeCallsRemaining}</span>
         <StyledLinearProgress value={progressValue()} />
       </div>
       <Tooltip

diff --git a/...ts/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/CallPriceInput.js b/...ts/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/CallPriceInput.js
@@ -1,18 +1,20 @@
-import React from "react";
+import React, { Fragment } from "react";
 
 const CallPriceInput = ({ classes, disabled, inputProps }) => {
   if (!inputProps) {
     return null;
   }
 
   return (
-    <div>
+    <Fragment>
       {!inputProps?.noInput && (
-        <input type="text" disabled={disabled} value={inputProps.noOfServiceCalls} onChange={inputProps.onChange} />
+        <input type="number" disabled={disabled} value={inputProps.noOfServiceCalls} onChange={inputProps.onChange} />
       )}
-      <span className={classes.value}>{Number(inputProps.totalPrice)}</span>
-      <span className={classes.unit}>{inputProps.unit}</span>
-    </div>
+      <div className={classes.priceContainer}>
+        <span className={classes.value}>{String(inputProps.totalPrice)}</span>
+        <span className={classes.unit}>{inputProps.unit}</span>
+      </div>
+    </Fragment>
   );
 };
 

diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/index.js
@@ -28,13 +28,17 @@ const ChannelSelectionBox = ({
       onClick={onClick}
     >
       <Grid item xs={4} sm={4} md={4} lg={4} className={classes.LeftSideSection}>
-        <div className={classes.RadioButtonContainer}>
+        <Grid item lg={2} className={classes.RadioButtonContainer}>
           <Radio checked={checked} color="primary" name="radio-button" disabled={disabled} {...restProps} />
-        </div>
-        <div className={`${classes.InputDataContainer} ${disabled && classes.disabledInputDataContainer}`}>
+        </Grid>
+        <Grid
+          item
+          lg={10}
+          className={`${classes.InputDataContainer} ${disabled && classes.disabledInputDataContainer}`}
+        >
           <h2>{title}</h2>
           <CallPriceInput classes={classes} disabled={disabled} inputProps={inputProps} />
-        </div>
+        </Grid>
       </Grid>
       <Grid
         item

diff --git a/...components/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/styles.js b/...components/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/styles.js
@@ -5,7 +5,6 @@ export const useStyles = (theme) => ({
     borderStyle: "solid",
     borderColor: theme.palette.text.verticalTabLeftBorder,
     borderRadius: 4,
-    marginBottom: 20,
     backgroundColor: theme.palette.text.cardBackground,
     "&:hover": {
       borderColor: theme.palette.text.primary,
@@ -24,9 +23,10 @@ export const useStyles = (theme) => ({
     borderStyle: "solid",
     borderColor: theme.palette.text.primary,
     backgroundColor: theme.palette.text.cardBackground,
+    boxShadow: `0 0 5px ${theme.palette.text.primary}`,
   },
   LeftSideSection: {
-    padding: "14px 0",
+    padding: "14px 10px",
     display: "flex",
     alignItems: "center",
     "@media(max-width:480px)": { maxWidth: "100%" },
@@ -38,7 +38,7 @@ export const useStyles = (theme) => ({
     display: "flex",
     flexDirection: "column",
     gap: 7,
-
+    maxWidth: "70%",
     "& h2": {
       color: theme.palette.text.darkShadedGray,
       fontSize: 22,
@@ -51,13 +51,11 @@ export const useStyles = (theme) => ({
       },
     },
     "& input": {
-      width: 24,
       padding: "7px",
       borderWidth: 1,
       borderStyle: "solid",
       borderColor: theme.palette.text.inputBoxBorder,
       borderRadius: 4,
-      marginRight: 10,
       backgroundColor: theme.palette.text.whiteColor,
       color: theme.palette.text.mediumShadeGray,
       fontSize: 16,
@@ -66,7 +64,6 @@ export const useStyles = (theme) => ({
     },
     "& span": {
       color: theme.palette.text.lightShadedGray,
-      lineHeight: "17px",
     },
   },
   disabledInputDataContainer: {
@@ -80,14 +77,14 @@ export const useStyles = (theme) => ({
       color: theme.palette.text.disabledBtnBg,
     },
   },
-  value: {
-    fontSize: 18,
-    "@media(max-width:1023px)": { fontSize: 16 },
+  priceContainer: {
+    fontSize: 16,
+    display: "flex",
+    gap: 5,
+    flexWrap: "wrap",
   },
-  unit: {
-    marginLeft: 5,
-    display: "inline-block",
-    fontSize: 12,
+  value: {
+    overflow: "auto",
   },
   selectionBoxDescription: {
     padding: "14px 8px",
@@ -97,7 +94,6 @@ export const useStyles = (theme) => ({
     display: "flex",
     alignItems: "center",
     "& p": {
-      paddingLeft: 22,
       margin: 0,
       color: theme.palette.text.mediumShadeGray,
       fontSize: 14,