🕸️Add hCaptcha + clu3 function

This is a PoC on how it is done using hCaptcha and React. It already contains the siteKey and all the information needed to copy-paste change contract and go.

First, we need to add the library of hCaptcha to our project, by using the command below:

npm install @hcaptcha/react-hcaptcha

Once you have installed the react-hcaptcha library, you need to import it on the file that will perform the call to the smart contract

import HCaptcha from '@hcaptcha/react-hcaptcha';

After we installed the library and imported it in the component, we will add it to our code. Also, we need to import the clu3.js file, this function is the one that will send the information to our clu3 service.

// clu3. js file 
const clu3 = async (token, url, address) => {
    
    if (!token) {
        return {
            "type": 'error',
            "message": 'Please complete the captcha'
        };
    }

    const options = {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json;charset=UTF-8",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST",
            'Access-Control-Allow-Headers': "Content-Type, Authorization",
        },
        body: JSON.stringify({
            token,
            senderAddress: address,
        }),

    };
    const myResponse =  fetch(url, options)
    .then((result) => result.json()).then(data =>{
        return data;
    });
 
    return myResponse;
};

export default clu3;

import { useEffect, useRef, useState } from "react";
import clu3 from '../clu3.js';
import { ethers } from "ethers"
import {
    useAccount,
    usePrepareContractWrite,
    useContractWrite,
    useWaitForTransaction
}
from 'wagmi'

const [token, setToken] = useState('');
const [args, setArgs] = useState<any[]>([]);
const [error, setError] = useState('');

const captchaRef = useRef<any>(null);
const API_URL = 'https://clu3-service.herokuapp.com/';

const { config: configSmartContract } = usePrepareContractWrite({
        addressOrName: SMART_CONTRACT_ADDRESS,
        contractInterface: new ethers.utils.Interface(SMART_CONTRACT_ABI),
        functionName: SMART_CONTRACT_FUNCTION_TO_PROTECT,
        args: args
        // enabled: Boolean(debouncedArgs)
    })

const { data, write } = useContractWrite(configSmartContract)

useEffect(() => {
        async function getClu3() {
            let url = API_URL +  'verify';
            let response = await clu3(token, url, address)
            if (response?.success) {
                setRes(response?.data);
                setArgs([response?.data.timestamp, response?.data.messageSignature])
            } else {
                setError(response.error)
            }
        }

        if (token)
            console.log(`hCaptcha Token: ${token}`);
            getClu3();
    }, [token]);

const executeTransaction = () => {
        write?.()
    }

return(
<>
// On the return statement
<Captcha
    sitekey="e241fd32-39e6-44c4-91b2-a1dd28d04b00"
    onLoad={onLoad}
    onVerify={setToken}
    ref={captchaRef}
    onExpire={() => setToken('')}
/>
</>
)