🛑How to add a check in my front-end?

0. Requirements

• The address of a whitelist instance already deployed using Talaria App.

• react + viem dependencies installed

1. Built your reusable hook

useWhitelistCheck.ts

import { useState, useEffect } from 'react';
import { useContractRead, useAccount } from 'viem';

// Hook to check if the user is whitelisted
const useWhitelistCheck = (contractAddress) => {
  const [isWhitelisted, setIsWhitelisted] = useState(false);
  
  // Get user's wallet address using viem or another wallet connection hook
  const { address: userAddress } = useAccount(); // Hook to get the connected user's address

  // Define the contract details
  const config = {
    address: contractAddress,
    abi: [
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "_user",
            "type": "address"
          }
        ],
        "name": "isWhitelisted",
        "outputs": [
          {
            "internalType": "bool",
            "name": "",
            "type": "bool"
          }
        ],
        "stateMutability": "view",
        "type": "function"
      }
    ], // Minimal ABI with the 'isWhitelisted' function
    functionName: 'isWhitelisted',
    args: [userAddress], // Pass the user address dynamically
  };

  const { data, error, isLoading } = useContractRead(config);

  useEffect(() => {
    if (data !== undefined) {
      setIsWhitelisted(data);
    }
  }, [data]);

  if (error) {
    console.error('Error reading whitelist status:', error);
  }

  return { isWhitelisted, isLoading, userAddress };
};

export default useWhitelistCheck;

2. Use it

YourComponent.tsx

import React from 'react';
import useWhitelistCheck from './useWhitelistCheck';

const YOUR_WHITELIST_ADDRESS = "0xADS"

const WhitelistChecker = () => {
  const { isWhitelisted, isLoading } = useWhitelistCheck(YOUR_WHITELIST_ADDRESS);

  if (isLoading) return <p>Loading whitelist status...</p>;

  return (
    <div>
      {isWhitelisted ? (
        <p>User {userAddress} is whitelisted.</p>
      ) : (
        <p>User {userAddress} is not whitelisted.</p>
      )}
    </div>
  );
};

export default WhitelistChecker;