useWayfinderRequest

import { useWayfinderRequest } from '@ar.io/wayfinder-react';

function WayfinderData({ txId }: { txId: string }) {
  const request = useWayfinderRequest();
  const [data, setData] = useState\<any\>(null);
  const [dataLoading, setDataLoading] = useState(false);
  const [dataError, setDataError] = useState\<Error | null\>(null);

  useEffect(() => {
    (async () => {
      try {
        setDataLoading(true);
        setDataError(null);
        // fetch the data for the txId using wayfinder
        const response = await request(`ar://${txId}`, {
          verificationSettings: {
            enabled: true, // enable verification on the request
            strict: true, // don't use the data if it's not verified
          },
        });
        const data = await response.arrayBuffer(); // or response.json() if you want to parse the data as JSON
        setData(data);
      } catch (error) {
        setDataError(error as Error);
      } finally {
        setDataLoading(false);
      }
    })();
  }, [request, txId]);

  if (dataError) {
    return <p>Error loading data: {dataError.message}</p>;
  }

  if (dataLoading) {
    return <p>Loading data...</p>;
  }

  if (!data) {
    return <p>No data</p>;
  }

  return (
    <div>
      <pre>{data}</pre>
    </div>
  );
}