Merge pull request #184 from DistributedCollective/develop

Develop

Author: Rickk137

packages/dev-frontend/package.json

@@ -9,6 +9,7 @@
     "@fortawesome/free-regular-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
+    "@hcaptcha/react-hcaptcha": "1.4.4",
     "@ledgerhq/devices": "^7.0.0",
     "@popperjs/core": "2.9.1",
     "@testing-library/dom": "7.30.0",

packages/dev-frontend/src/pages/WaitListSignup.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { useCallback } from "react";
 import { useState } from "react";
 import {
@@ -19,23 +19,27 @@ import { validateEmail } from "../utils/helpers";
 import { registerEmail } from "../utils/whitelist";
 import { useLocation } from "react-router-dom";
 import { sovrynLink } from "src/contracts/config";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
+import { captchaSiteKey } from "src/utils";
 
 export const WaitListSignup: React.FC = ({ children }) => {
   const [isLoading, setIsLoading] = useState(false);
+  const [token, setToken] = useState("");
   const [success, setSuccess] = useState(false);
   const [sovrynMail, setSovrylMail] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
+  const [error, setError] = useState("");
   const [email, setEmail] = useState("");
+  const captchaRef = useRef<HCaptcha>(null);
 
   const location = useLocation();
 
   const isValidEmail = useMemo(() => validateEmail(email), [email]);
 
   const resetStatus = useCallback(() => {
-    if (!errorMessage && !success) return;
-    setErrorMessage("");
+    if (!error && !success) return;
+    setError("");
     setSuccess(false);
-  }, [errorMessage, success]);
+  }, [error, success]);
 
   const handleEmailChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -52,29 +56,44 @@ export const WaitListSignup: React.FC = ({ children }) => {
 
       const ref = params.get("r") || "";
       resetStatus();
-      if (!isValidEmail) {
+      if (!isValidEmail || !token) {
         return;
       }
       try {
         setIsLoading(true);
-        await registerEmail(email, ref, sovrynMail);
+        await registerEmail(email, ref, sovrynMail, token);
 
         setEmail("");
-        setErrorMessage("");
+        setError("");
         setSuccess(true);
         setIsLoading(false);
       } catch (error: any) {
         if (error?.response?.data?.message) {
-          setErrorMessage(error?.response?.data?.message);
+          setError(error?.response?.data?.message);
         } else {
-          setErrorMessage("An error has occurred");
+          setError("An error has occurred");
         }
         setIsLoading(false);
       }
+      setToken("");
+      captchaRef.current?.resetCaptcha();
     },
-    [email, isValidEmail, location.search, resetStatus, sovrynMail]
+    [email, isValidEmail, location.search, resetStatus, sovrynMail, token]
   );
 
+  const errorMessage = useMemo(() => {
+    if (error) {
+      return error;
+    }
+    if (email && !isValidEmail) {
+      return "Please enter a valid email address.";
+    }
+    if (email && !token) {
+      return "Please compelete recaptcha";
+    }
+    return null;
+  }, [email, error, isValidEmail, token]);
+
   return (
     <Box
       sx={{
@@ -169,6 +188,16 @@ export const WaitListSignup: React.FC = ({ children }) => {
             />
             Add me to the general Sovryn mailing list
           </Label>
+
+          <Box sx={{ my: 1 }}>
+            <HCaptcha
+              theme="dark"
+              sitekey={captchaSiteKey || ""}
+              onVerify={setToken}
+              ref={captchaRef}
+            />
+          </Box>
+
           <Button
             sx={{
               width: 285,
@@ -177,13 +206,13 @@ export const WaitListSignup: React.FC = ({ children }) => {
               alignItems: "center"
             }}
             variant="secondary"
-            disabled={!isValidEmail || isLoading}
+            disabled={!isValidEmail || isLoading || !token}
             data-action-id="zero-landing-signUp"
           >
             Sign Up
             {isLoading && <Spinner sx={{ ml: 1 }} color={"cardBackground"} size={24} />}
           </Button>
-          {((email && !isValidEmail) || errorMessage) && (
+          {errorMessage && (
             <Paragraph
               sx={{
                 fontSize: 1,
@@ -198,7 +227,7 @@ export const WaitListSignup: React.FC = ({ children }) => {
                 textAlign: "center"
               }}
             >
-              {errorMessage ? errorMessage : "Please enter a valid email address."}
+              {errorMessage}
             </Paragraph>
           )}
         </form>

packages/dev-frontend/src/utils/index.ts

@@ -22,3 +22,5 @@ export const parseBalance = (
   decimals = 18,
   decimalsToDisplay = 2
 ) => new BigNumber(formatUnits(value || 0, decimals)).toFixed(decimalsToDisplay);
+
+export const captchaSiteKey = process.env.REACT_APP_HCAPTCHA;

packages/dev-frontend/src/utils/whitelist.ts

@@ -12,12 +12,14 @@ const whitelistClient = axios.create({
 export const registerEmail = (
   email: string,
   ref: string,
-  sovrynMail: boolean
+  sovrynMail: boolean,
+  token: string
 ): Promise<AxiosResponse<any>> =>
   whitelistClient.post("register/" + WhitelistType.ZERO, {
     email,
     ref,
-    sovrynMail: !!sovrynMail
+    sovrynMail: !!sovrynMail,
+    token
   });
 
 export const checkAccountAccess = (account: string): Promise<AxiosResponse<any>> =>

yarn.lock

@@ -1198,6 +1198,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.17.9":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.8.7":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
@@ -3408,6 +3415,13 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@hcaptcha/react-hcaptcha@^1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@hcaptcha/react-hcaptcha/-/react-hcaptcha-1.4.4.tgz#529c55369160995115735b5fe5453daef4670f04"
+  integrity sha512-Aen217LDnf5ywbPSwBG5CsoqBLIHIAS9lhj3zQjXJuO13doQ6/ubkCWNuY8jmwYLefoFt3V3MrZmCdKDaFoTuQ==
+  dependencies:
+    "@babel/runtime" "^7.17.9"
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -20621,6 +20635,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"