import { useState, useEffect } from "react";
import useSWRSubscription from "swr/subscription"
import { useUnstableProvider } from "./UnstableProvider"

export const useLatestBlockNumber = () => {
    const { chainHead$ } = useUnstableProvider();
    const [blockNumber, setBlockNumber] = useState(null);

    useEffect(() => {
        if (!chainHead$) return;
        const subscription = chainHead$.best$.subscribe((block) => {
            setBlockNumber(block.number);
        });
        return () => subscription.unsubscribe();
    }, [chainHead$]);

    return blockNumber;
}