useCallAnyContract

const {
  callAnyContract,
  callAnyContractAsync,
  data,
  isLoading,
  isError,
  error,
  isSuccess,
  reset
} = useCallAnyContract();

export function GenericContractForm() {
  const { callAnyContractAsync, data, isLoading, isError, error } = useCallAnyContract();
  const [form, setForm] = useState({
    pin: '',
    contractAddress: '',
    entrypoint: '',
    calldata: ''
  });

  const handleCall = async (e: React.FormEvent) => {
    e.preventDefault();

    const bearerToken = await getBearerToken();

    try {
      await callAnyContractAsync({
        params: {
          encryptKey: form.pin,
          wallet: walletData, 
          contractAddress: form.contractAddress, 
          calls: [
            {
              contractAddress: form.contractAddress,
              entrypoint: form.entrypoint, 
              calldata: JSON.parse(form.calldata || '[]')
            }
          ],
        },
        bearerToken,
      });
    } catch (err) {
      console.error('Contract call failed:', err);
    }
  };

  return (
    <div className="bg-white rounded-xl shadow-lg p-6">
      <h2 className="text-2xl font-bold mb-4">Contract Interaction</h2>
      
      <form onSubmit={handleCall} className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-1">Security PIN</label>
          <input
            type="password"
            value={form.pin}
            onChange={(e) => setForm({...form, pin: e.target.value})}
            className="w-full p-2 border rounded-md"
            required
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">Contract Address</label>
          <input
            type="text"
            value={form.contractAddress}
            onChange={(e) => setForm({...form, contractAddress: e.target.value})}
            className="w-full p-2 border rounded-md"
            required
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">Method Name</label>
          <input
            type="text"
            value={form.entrypoint}
            onChange={(e) => setForm({...form, entrypoint: e.target.value})}
            className="w-full p-2 border rounded-md"
            required
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">Call Data (JSON array)</label>
          <input
            type="text"
            value={form.calldata}
            onChange={(e) => setForm({...form, calldata: e.target.value})}
            className="w-full p-2 border rounded-md"
            placeholder='Example: [123, "0xabc...", true]'
          />
        </div>

        <button 
          type="submit" 
          disabled={isLoading}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:bg-gray-400"
        >
          {isLoading ? 'Processing...' : 'Execute'}
        </button>
      </form>

      {data && (
        <div className="mt-4 p-3 bg-gray-50 rounded-md">
          <p className="text-sm font-mono break-all">
            TX Hash: {data}
          </p>
        </div>
      )}

      {isError && error && (
        <div className="mt-4 p-3 bg-red-50 text-red-700 rounded-md">
          Error: {error.message}
        </div>
      )}
    </div>
  );
}