Add captcha for feedback

package.json

@@ -51,6 +51,7 @@
     "snet-sdk-web": "5.0.4",
     "utf8": "^3.0.0",
     "validate.js": "^0.13.1",
+    "waf-captcha-frontend": "0.0.7",
     "web3": "^4.11.1"
   },
   "resolutions": {
@@ -126,4 +127,4 @@
     "ts-protoc-gen": "^0.15.0",
     "url": "^0.11.4"
   }
-}
+}

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "SingularityNET AI Merketplace",
-  "name": "SingularityNET AI Merketplace",
+  "short_name": "SingularityNET AI Marketplace",
+  "name": "SingularityNET AI Marketplace",
   "icons": [
     {
       "src": "favicon.ico",

src/components/AiMarketplace/index.js

@@ -6,7 +6,7 @@ import PromoComponent from "../PromoComponent";
 import { Helmet } from "react-helmet";
 
 const seoData = {
-  title: "SingularityNET AI Merketplace",
+  title: "SingularityNET AI Marketplace",
   description: `The SingularityNET Marketplace hosts AI services. Services offer free calls to try before you use ${process.env.REACT_APP_TOKEN_NAME} or Paypal to purchase`,
   image: `${process.env.REACT_APP_SNET_CDN}/dapp/assets/images/SEO/singularitynet-marketplace.png`,
   twitterImage: `${process.env.REACT_APP_SNET_CDN}/dapp/assets/images/SEO/singularitynet-marketplace-twitter.png`,

src/components/FeedbackFormModal/FeedbackForm.js

@@ -38,10 +38,10 @@ const FeedbackForm = ({ closeForm, sendFeedbackAPI }) => {
     } catch (error) {
       setAlert({ type: alertTypes.ERROR, message: error?.message });
     } finally {
+      dispatch(loaderActions.stopAppLoader());
       await new Promise((resolve) => setTimeout(resolve, 3000));
       resetForm();
       setIsRequestHandling(false);
-      dispatch(loaderActions.stopAppLoader());
       closeForm();
     }
   };

src/components/FeedbackFormModal/index.js

@@ -9,6 +9,7 @@ const FeedbackForm = () => {
 
   return (
     <Fragment>
+      <div id="captchaContainer" />
       <FeedbackFormModal
         sendFeedbackAPI={sendFeedbackSnetAPI}
         isModalVisible={isModalVisible}

src/components/GetStarted/index.js

@@ -9,7 +9,7 @@ import { useStyles } from "./styles";
 import SeoMetadata from "../common/SeoMetadata";
 
 const seoData = {
-  title: "SingularityNET AI Merketplace",
+  title: "SingularityNET AI Marketplace",
   description: `The SingularityNET Marketplace hosts AI services. Services offer free calls to try before you use ${process.env.REACT_APP_TOKEN_NAME} or Paypal to purchase`,
   image: `${process.env.REACT_APP_SNET_CDN}/dapp/assets/images/SEO/singularitynet-marketplace.png`,
   twitterImage: `${process.env.REACT_APP_SNET_CDN}/dapp/assets/images/SEO/singularitynet-marketplace-twitter.png`,

src/config/SupportAPI.js

@@ -1,7 +1,10 @@
 import axios from "axios";
+import { getCaptchaFetch } from "../utility/captchaFetch";
 
 const source = "MARKETPLACE";
 
+const captchaFetch = getCaptchaFetch();
+
 export const sendFeedbackSnetAPI = async ({ name, email, category, feedback, attachmentUrls }) => {
   const options = {
     method: "POST",
@@ -26,7 +29,7 @@ export const sendFeedbackSnetAPI = async ({ name, email, category, feedback, att
   if (!feedbackUrl) {
     throw new Error("Cannot start the application! process.env.REACT_APP_FEEDBACK_ENDPOINT is undefined");
   }
-  await fetch(feedbackUrl + "/user/message", options);
+  await captchaFetch(feedbackUrl + "/user/message", options);
 };
 
 const ENTER_CODE = "%0D%0A";

src/utility/captchaFetch.js

@@ -0,0 +1,21 @@
+import { createCaptchaFetchHandler } from "waf-captcha-frontend";
+
+export const getCaptchaFetch = () => {
+  const keys = {
+    JSAPI_URL: process.env.REACT_APP_JSAPI_URL,
+    CAPTCHA_TOKEN: process.env.REACT_APP_CAPTCHA_TOKEN,
+  };
+
+  if (!keys.CAPTCHA_TOKEN || !keys.JSAPI_URL) {
+    console.warn("Captcha configuration is not provided");
+    return fetch;
+  }
+
+  const captchaFetch = createCaptchaFetchHandler({
+    API_KEY: keys.CAPTCHA_TOKEN,
+    JSAPI_URL: keys.JSAPI_URL,
+    captchaContainerId: "captchaContainer",
+  });
+
+  return captchaFetch;
+};