Merge pull request #930 from singnet/package-updating

Package updating
singnet · Aug 12, 2024 · 1732ba5 · 1732ba5
2 parents 40bd664 + e776336
commit 1732ba5
Show file tree

Hide file tree

Showing 9 changed files with 514 additions and 665 deletions.
diff --git a/README.md b/README.md
@@ -14,27 +14,27 @@ This Dapp allows you to browse the list of AI services from the SingularityNET R
 
 ## Development instructions
 
-Install [Node.js and npm](https://nodejs.org/) and [yarn](https://classic.yarnpkg.com/lang/en/docs/install)
+Install [Node.js and npm](https://nodejs.org/)
 
-- node version >=18
-- yarn  version >=1.22.21
+- node version 20 || >= 22
 
 For getting dependencies:
 ```
-yarn install
+npm install --force
 ```
-To serve the application locally and watch source files for modifications:
+or
 ```
-yarn start
+yarn install
 ```
-or 
+To serve the application locally and watch source files for modifications:
 ```
 npm run start
 ```
 ## UI for Services
 
 Currently the UI needed by a service to capture inputs and render the output must be provided by the service developer through [Publisher](https://publisher.singularitynet.io/). To create a Snet-dapp style user interface, a developer can use the [next repository](https://github.com/singnet/snet-dapp-components).
 
+Also you can importing components and styles from [Material UI components](https://mui.com/material-ui/all-components/) 
 
 This approach will change in the future. Work on it is in progress
 
@@ -50,7 +50,7 @@ cd snet-dapp
 ```
 Get dependencies:
 ```
-yarn install
+npm install --force
 ```
 Create the env file:
 ```

diff --git a/src/Redux/actionCreators/PaymentActions.js b/src/Redux/actionCreators/PaymentActions.js
@@ -60,7 +60,7 @@ export const updatePaypalInProgress = (orderId, orderType, paymentId, paypalPaym
   dispatch(userActions.updateWallet({ type: walletTypes.GENERAL }));
 };
 
-export const updatePaypalCompleted = (dispatch) => {
+export const updatePaypalCompleted = () => (dispatch) => {
   dispatch({ type: UPDATE_PAYPAL_COMPLETED });
 };
 
@@ -87,7 +87,7 @@ const USDConversionRateAPI = async (amount) => {
   return response.json();
 };
 
-export const fetchUSDConversionRate = async (dispatch) => {
+export const fetchUSDConversionRate = () => async (dispatch) => {
   const { data } = await USDConversionRateAPI(1);
   return dispatch(fetchUSDConversionRateSuccess(data));
 };
diff --git a/src/components/Login/Signup/index.js b/src/components/Login/Signup/index.js
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import { signUp, confirmSignUp, resendSignUpCode } from "aws-amplify/auth";
 import Grid from "@mui/material/Grid";
 import { withStyles } from "@mui/styles";
-import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import Routes from "../../../utility/constants/Routes";
 import { useStyles } from "./styles";
@@ -14,45 +14,45 @@ import { alertTypes } from "../../common/AlertBox";
 import { signupFormConstraints, singupOtpContraints } from "./validationConstraints";
 import snetValidator from "../../../utility/snetValidator";
 import { Helmet } from "react-helmet";
+import { useNavigate } from "react-router-dom";
 
-class SignUp extends Component {
-  state = {
-    nickname: "",
-    email: "",
-    password: "",
-    alert: {},
-    toBeConfirmed: false,
-    otp: "",
-  };
+const SignUp = ({ classes }) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const [nickname, setNickname] = useState();
+  const [email, setEmail] = useState();
+  const [password, setPassword] = useState();
+  const [alert, setAlert] = useState();
+  const [toBeConfirmed, setToBeConfirmed] = useState();
+  const [verificationCode, setVerificationCode] = useState();
 
-  handleNickname = (event) => {
-    this.setState({ nickname: event.currentTarget.value });
+  const handleNickname = (event) => {
+    setNickname(event.currentTarget.value);
   };
 
-  handleEmail = (event) => {
-    this.setState({ email: event.currentTarget.value.toLowerCase() });
+  const handleEmail = (event) => {
+    setEmail(event.currentTarget.value.toLowerCase());
   };
 
-  handlePassword = (event) => {
-    this.setState({ password: event.currentTarget.value });
+  const handlePassword = (event) => {
+    setPassword(event.currentTarget.value);
   };
 
-  handleOTP = (event) => {
-    this.setState({ otp: event.currentTarget.value });
+  const handleOTP = (event) => {
+    setVerificationCode(event.currentTarget.value);
   };
 
-  handleSubmit = (event) => {
+  const handleSubmit = (event) => {
     event.preventDefault();
-    this.setState({ alert: {} });
-    const isNotValid = snetValidator(this.state, signupFormConstraints);
+    setAlert({});
+    const isNotValid = snetValidator({ nickname, email, password }, signupFormConstraints);
     if (isNotValid) {
-      this.setState({ alert: { type: alertTypes.ERROR, message: isNotValid[0] } });
+      setAlert({ type: alertTypes.ERROR, message: isNotValid[0] });
       return;
     }
-    const { nickname, password, email } = this.state;
-    const { startSignupLoader, stopLoader } = this.props;
 
-    startSignupLoader();
+    dispatch(loaderActions.startAppLoader(LoaderContent.SIGNUP));
     signUp({
       username: email,
       password,
@@ -64,99 +64,85 @@ class SignUp extends Component {
       },
     })
       .then(() => {
-        this.props.updateNickname(nickname);
-        this.setState({ toBeConfirmed: true });
-        stopLoader();
+        dispatch(userActions.updateNickname(nickname));
+        setToBeConfirmed(true);
+        dispatch(loaderActions.stopAppLoader());
       })
       .catch((err) => {
-        this.setState({ alert: { type: alertTypes.ERROR, message: err.message } });
-        stopLoader();
+        setAlert({ type: alertTypes.ERROR, message: err.message });
+        dispatch(loaderActions.stopAppLoader());
       });
   };
 
-  handleConfirmSignup = (event) => {
-    this.setState({ alert: {} });
-    const isNotValid = snetValidator(this.state, singupOtpContraints);
+  const handleConfirmSignup = (event) => {
+    setAlert({});
+    const isNotValid = snetValidator(verificationCode, singupOtpContraints);
     if (isNotValid) {
-      this.setState({ alert: { type: alertTypes.ERROR, message: isNotValid[0] } });
+      setAlert({ type: alertTypes.ERROR, message: isNotValid[0] });
       return;
     }
-    const { email, otp } = this.state;
-    const { history, updateEmail } = this.props;
     event.preventDefault();
     event.stopPropagation();
     let route = `/${Routes.LOGIN}`;
-
-    confirmSignUp(email, otp)
+    confirmSignUp({ username: email, confirmationCode: verificationCode })
       .then(() => {
-        updateEmail(email);
-        history.push(route);
+        dispatch(userActions.updateEmail(email));
+        navigate(route);
       })
-      .catch(() => {
-        this.setState({ alert: { type: alertTypes.ERROR, message: "email confirmation failed. Please try again" } });
+      .catch((e) => {
+        console.log("e: ", e);
+
+        setAlert({ type: alertTypes.ERROR, message: "email confirmation failed. Please try again" });
       });
   };
 
-  handleResendOTP = () => {
-    this.setState({ alert: {} });
-    const { email } = this.state;
+  const handleResendVerificationCode = () => {
+    setAlert({});
     resendSignUpCode(email)
       .then(() => {
-        this.setState({ alert: { type: alertTypes.SUCCESS, message: "code resent successfully" } });
+        setAlert({ type: alertTypes.SUCCESS, message: "code resent successfully" });
       })
       .catch((err) => {
-        this.setState({ alert: { type: alertTypes.ERROR, message: err.message } });
+        setAlert({ type: alertTypes.ERROR, message: err.message });
       });
   };
 
-  render() {
-    const { nickname, email, password, otp, alert, toBeConfirmed } = this.state;
-    const { classes } = this.props;
-
-    return (
-      <div className={classes.signupMainContainer}>
-        <Helmet>
-          <meta
-            name="description"
-            content="Developers & researchers welcome! Join SingularityNET Marketplace to share & utilize ethical AI models. Automate tasks, gain insights, and solve problems with cutting-edge AI."
+  return (
+    <div className={classes.signupMainContainer}>
+      <Helmet>
+        <meta
+          name="description"
+          content="Developers & researchers welcome! Join SingularityNET Marketplace to share & utilize ethical AI models. Automate tasks, gain insights, and solve problems with cutting-edge AI."
+        />
+        <meta
+          name="keywords"
+          content="decentralized AI, AI monetization, pre-trained AI models, AI marketplace, signup"
+        />
+      </Helmet>
+      <Grid container className={classes.signupMainContent}>
+        {toBeConfirmed ? (
+          <RenderOTP
+            otp={verificationCode}
+            handleOTP={handleOTP}
+            handleResendOTP={handleResendVerificationCode}
+            handleConfirmSignup={handleConfirmSignup}
+            alert={alert}
           />
-          <meta
-            name="keywords"
-            content="decentralized AI, AI monetization, pre-trained AI models, AI marketplace, signup"
+        ) : (
+          <RenderForm
+            nickname={nickname}
+            handleNickname={handleNickname}
+            email={email}
+            handleEmail={handleEmail}
+            password={password}
+            handlePassword={handlePassword}
+            alert={alert}
+            handleSubmit={handleSubmit}
           />
-        </Helmet>
-        <Grid container className={classes.signupMainContent}>
-          {toBeConfirmed ? (
-            <RenderOTP
-              otp={otp}
-              handleOTP={this.handleOTP}
-              handleResendOTP={this.handleResendOTP}
-              handleConfirmSignup={this.handleConfirmSignup}
-              alert={alert}
-            />
-          ) : (
-            <RenderForm
-              nickname={nickname}
-              handleNickname={this.handleNickname}
-              email={email}
-              handleEmail={this.handleEmail}
-              password={password}
-              handlePassword={this.handlePassword}
-              alert={alert}
-              handleSubmit={this.handleSubmit}
-            />
-          )}
-        </Grid>
-      </div>
-    );
-  }
-}
-
-const mapDispatchToProps = (dispatch) => ({
-  startSignupLoader: () => dispatch(loaderActions.startAppLoader(LoaderContent.SIGNUP)),
-  stopLoader: () => dispatch(loaderActions.stopAppLoader()),
-  updateNickname: (nickname) => dispatch(userActions.updateNickname(nickname)),
-  updateEmail: (email) => dispatch(userActions.updateEmail(email)),
-});
+        )}
+      </Grid>
+    </div>
+  );
+};
 
-export default connect(null, mapDispatchToProps)(withStyles(useStyles)(SignUp));
+export default withStyles(useStyles)(SignUp);