Configure your frontend

Assuming you have a web3-enabled frontend set up, it's very simple to add in a call to the API to fetch the attestation before triggering a transaction.

Here's some sample code for a React button that fetches a digital signature for the given user before firing off a transaction to a contract that exposes the function claim(AttestationData calldata data, bytes calldata signature).

📘
Please Note!
This piece of code is for demonstration purposes only and is not to be copied and pasted into production code as is. Your code should practice good separation of concerns and error handling. We highly recommend wrapping API calls in hooks using something like TanStack Query.

import axios from "axios";
import {Spearmint} from "./typechain/contracts/Spearmint";
import {API_KEY, PROJECT_ID} from "./settings";

interface ClaimButtonProps {
  connectedAddress: string;
  contract: Spearmint;
}

interface SignatureResponse {
  data: {
    signature: string;
    attestationData: Record<string, string | boolean> | null;
  };
}

function ClaimButton({connectedAddress, contract}: ClaimButtonProps) {
  const onClick = useCallback(async () => {
    // 1. Fetch the attestation
    let attestation;
    try {
      const {data} = await axios.get<SignatureResponse>(
        `https://api.spearmint.xyz/projects/${PROJECT_ID}/signatures/${connectedAddress}`,
        {
          headers: {
            accept: "application/json",
            authorization: `Bearer ${API_KEY}`,
          },
        },
      );
      attestation = data.data;
    } catch (e) {
      console.log("Failed to fetch attestation!");
      return;
    }
    // 2. Prompt the transaction to be signed and sent.
    await contract.claim(attestation.attestationData, attestation.signature);
  }, [connectedAddress, contract]);

  return <button onClick={onClick}>Mint</button>;
}

📘Please Note!

📘
Please Note!