[SM-254] add WAF captcha package

Author: MarinaFedy

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"
   }
-}
+}

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/config/SupportAPI.js

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

src/utility/captchaFetch.js

@@ -0,0 +1,20 @@
+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) {
+    throw new Error("Tokens undefined");
+  }
+
+  const captchaFetch = createCaptchaFetchHandler({
+    API_KEY: keys.CAPTCHA_TOKEN,
+    JSAPI_URL: keys.JSAPI_URL,
+    captchaContainerId: "captchaContainer",
+  });
+
+  return captchaFetch;
+};