chore(js/frontend): migrate faucet verification to Cloudflare Turnstile (#815)

Author: nikitayutanov

.github/workflows/deploy-frontend.yml

@@ -94,7 +94,7 @@ jobs:
             VITE_ERC20_MANAGER_CONTRACT_ADDRESSES=${{ secrets.VITE_ERC20_MANAGER_CONTRACT_ADDRESSES }}
             VITE_TOKEN_PRICE_API_URL=${{ secrets.VITE_TOKEN_PRICE_API_URL }}
             VITE_FAUCET_API_URL=${{ secrets.VITE_FAUCET_API_URL }}
-            VITE_HCAPTCHA_SITEKEY=${{ secrets.VITE_HCAPTCHA_SITEKEY }}
+            VITE_TURNSTILE_SITEKEY=${{ secrets.VITE_TURNSTILE_SITEKEY }}
             VITE_VARA_ARCHIVE_NODE_ADDRESSES=${{ secrets.VITE_VARA_ARCHIVE_NODE_ADDRESSES }}
             VITE_ETH_BEACON_NODE_ADDRESSES=${{ secrets.VITE_ETH_BEACON_NODE_ADDRESSES }}
             VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES=${{ secrets.VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES }}

js/frontend/Dockerfile

@@ -25,7 +25,7 @@ ARG VITE_VARA_NODE_ADDRESSES \
     VITE_ERC20_MANAGER_CONTRACT_ADDRESSES \
     VITE_TOKEN_PRICE_API_URL \
     VITE_FAUCET_API_URL \
-    VITE_HCAPTCHA_SITEKEY \
+    VITE_TURNSTILE_SITEKEY \
     VITE_VARA_ARCHIVE_NODE_ADDRESSES \
     VITE_ETH_BEACON_NODE_ADDRESSES \
     VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES \
@@ -42,7 +42,7 @@ ENV VITE_VARA_NODE_ADDRESSES=${VITE_VARA_NODE_ADDRESSES} \
     VITE_ERC20_MANAGER_CONTRACT_ADDRESSES=${VITE_ERC20_MANAGER_CONTRACT_ADDRESSES} \
     VITE_TOKEN_PRICE_API_URL=${VITE_TOKEN_PRICE_API_URL} \
     VITE_FAUCET_API_URL=${VITE_FAUCET_API_URL} \
-    VITE_HCAPTCHA_SITEKEY=${VITE_HCAPTCHA_SITEKEY} \
+    VITE_TURNSTILE_SITEKEY=${VITE_TURNSTILE_SITEKEY} \
     VITE_VARA_ARCHIVE_NODE_ADDRESSES=${VITE_VARA_ARCHIVE_NODE_ADDRESSES} \
     VITE_ETH_BEACON_NODE_ADDRESSES=${VITE_ETH_BEACON_NODE_ADDRESSES} \
     VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES=${VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES} \

js/frontend/package.json

@@ -17,8 +17,8 @@
     "@gear-js/ui": "0.7.0",
     "@gear-js/vara-ui": "0.3.1",
     "@gear-js/wallet-connect": "0.4.3",
-    "@hcaptcha/react-hcaptcha": "1.17.1",
     "@hookform/resolvers": "5.2.2",
+    "@marsidev/react-turnstile": "1.4.2",
     "@polkadot/api": "16.4.6",
     "@polkadot/react-identicon": "3.16.4",
     "@reown/appkit": "1.8.15",

js/frontend/src/features/faucet/components/get-balance-button/get-balance-button.module.scss

@@ -3,3 +3,25 @@
   --padding: 4px 8px;
   --spinner-size: 14px;
 }
+
+.overlay {
+  display: none;
+
+  width: 100%;
+  height: 100%;
+  padding: 0 32px;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  background-color: #0003;
+  backdrop-filter: blur(20px);
+
+  &.active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

js/frontend/src/features/faucet/components/get-balance-button/get-balance-button.tsx

@@ -1,17 +1,18 @@
 import { HexString } from '@gear-js/api';
 import { useAccount, useAlert, useApi } from '@gear-js/react-hooks';
 import { Button } from '@gear-js/vara-ui';
-import HCaptcha from '@hcaptcha/react-hcaptcha';
+import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
 import { useMutation } from '@tanstack/react-query';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import { LinkButton } from '@/components';
 import { useNetworkType } from '@/context/network-type';
-import { useEthAccount } from '@/hooks';
+import { useEthAccount, useModal } from '@/hooks';
+import { cx } from '@/utils';
 
 import { GetBalanceParameters, getEthTokenBalance, getVaraAccountBalance } from '../../api';
 import GiftSVG from '../../assets/gift.svg?react';
-import { HCAPTCHA_SITEKEY } from '../../consts';
+import { TURNSTILE_SITEKEY } from '../../consts';
 
 import styles from './get-balance-button.module.scss';
 
@@ -29,38 +30,63 @@ const BUTTON_PROPS = {
 
 function ButtonComponent<T>({ getBalance, onSuccess, ...parameters }: Props<T>) {
   const alert = useAlert();
-  const hCaptchaRef = useRef<HCaptcha>(null);
+  const turnstileRef = useRef<TurnstileInstance>(null);
+
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [isVerificationVisible, openVerification, closeVerification] = useModal();
 
   const { mutateAsync, isPending } = useMutation({
-    mutationFn: async () => {
-      if (!hCaptchaRef.current) throw new Error('HCaptcha ref is null');
+    mutationFn: (token: string) => getBalance({ token, ...(parameters as T) }),
+  });
 
-      const token = (await hCaptchaRef.current.execute({ async: true })).response;
-      const payload = parameters as T;
+  const handleClick = () => {
+    setIsVerifying(true);
 
-      return getBalance({ token, ...payload });
-    },
-  });
+    turnstileRef.current?.reset();
+    turnstileRef.current?.execute();
+  };
+
+  const settleVerification = () => {
+    closeVerification();
+    setIsVerifying(false);
+  };
 
-  const handleClick = () =>
-    mutateAsync()
+  const handleVerificationSuccess = (token: string) => {
+    settleVerification();
+
+    mutateAsync(token)
       .then(() => {
         onSuccess?.();
+
         alert.success(
           'Your request for test tokens has been received and is being processed. The tokens will appear in your balance shortly.',
         );
       })
-      .catch((error: string | Error) => {
-        if (error === 'challenge-closed') return;
+      .catch((error) => alert.error(error instanceof Error ? error.message : String(error)));
+  };
+
+  const handleVerificationError = (code: string) => {
+    settleVerification();
 
-        alert.error(error instanceof Error ? error.message : error);
-      });
+    alert.error(`Error verifying that you are a human, code: ${code}. Please try again.`);
+  };
 
   return (
-    <div>
-      <Button onClick={handleClick} isLoading={isPending} {...BUTTON_PROPS} />
-      <HCaptcha ref={hCaptchaRef} theme="dark" size="invisible" sitekey={HCAPTCHA_SITEKEY} />
-    </div>
+    <>
+      <Button onClick={handleClick} isLoading={isPending || isVerifying} {...BUTTON_PROPS} />
+
+      <div className={cx(styles.overlay, isVerificationVisible && styles.active)}>
+        <Turnstile
+          options={{ execution: 'execute', appearance: 'interaction-only' }}
+          siteKey={TURNSTILE_SITEKEY}
+          ref={turnstileRef}
+          onBeforeInteractive={openVerification}
+          onAfterInteractive={settleVerification}
+          onError={handleVerificationError}
+          onSuccess={handleVerificationSuccess}
+        />
+      </div>
+    </>
   );
 }
 

js/frontend/src/features/faucet/consts.ts

@@ -1,3 +1,3 @@
-const HCAPTCHA_SITEKEY = import.meta.env.VITE_HCAPTCHA_SITEKEY as string;
+const TURNSTILE_SITEKEY = import.meta.env.VITE_TURNSTILE_SITEKEY as string;
 
-export { HCAPTCHA_SITEKEY };
+export { TURNSTILE_SITEKEY };

yarn.lock

@@ -208,7 +208,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.17.9, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.26.10, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.26.10, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
   version: 7.28.3
   resolution: "@babel/runtime@npm:7.28.3"
   checksum: 10c0/b360f82c2c5114f2a062d4d143d7b4ec690094764853937110585a9497977aed66c102166d0e404766c274e02a50ffb8f6d77fef7251ecf3f607f0e03e6397bc
@@ -2017,26 +2017,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hcaptcha/loader@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "@hcaptcha/loader@npm:2.3.0"
-  checksum: 10c0/2273c0de35968bad169ba1102085930da52e6a5d3b74bfdc5c00a8959066f9671ddf2f1d25dddbc7544f290268439559cb49b42009d88c5a7e8481dcb9c67981
-  languageName: node
-  linkType: hard
-
-"@hcaptcha/react-hcaptcha@npm:1.17.1":
-  version: 1.17.1
-  resolution: "@hcaptcha/react-hcaptcha@npm:1.17.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.17.9"
-    "@hcaptcha/loader": "npm:^2.3.0"
-  peerDependencies:
-    react: ">= 16.3.0"
-    react-dom: ">= 16.3.0"
-  checksum: 10c0/f807130fa9068ef096caa6cb97ab8d922c3f78bae6a22fc9a79b01caf47189555b36bd72585119783b9a271d369854ce572cea0df9c29c75ac349f9ba1abf05a
-  languageName: node
-  linkType: hard
-
 "@hookform/resolvers@npm:5.2.2":
   version: 5.2.2
   resolution: "@hookform/resolvers@npm:5.2.2"
@@ -2549,6 +2529,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@marsidev/react-turnstile@npm:1.4.2":
+  version: 1.4.2
+  resolution: "@marsidev/react-turnstile@npm:1.4.2"
+  peerDependencies:
+    react: ^17.0.2 || ^18.0.0 || ^19.0
+    react-dom: ^17.0.2 || ^18.0.0 || ^19.0
+  checksum: 10c0/3cb72435076f65eb1bf965ad2aaa15900df032bf32609246591a8810f633d508f98561b9a2376c9b3c15f36de639b885df6bf90d3001f3ffb086f29e3396945a
+  languageName: node
+  linkType: hard
+
 "@metamask/eth-json-rpc-provider@npm:^1.0.0":
   version: 1.0.1
   resolution: "@metamask/eth-json-rpc-provider@npm:1.0.1"
@@ -13006,8 +12996,8 @@ __metadata:
     "@graphql-codegen/cli": "npm:6.1.0"
     "@graphql-codegen/client-preset": "npm:5.2.2"
     "@graphql-typed-document-node/core": "npm:3.2.0"
-    "@hcaptcha/react-hcaptcha": "npm:1.17.1"
     "@hookform/resolvers": "npm:5.2.2"
+    "@marsidev/react-turnstile": "npm:1.4.2"
     "@polkadot/api": "npm:16.4.6"
     "@polkadot/react-identicon": "npm:3.16.4"
     "@polkadot/types": "npm:16.4.6"