import { useEffect } from "react";
import { Hash } from "viem"
import { useWaitForTransactionReceipt } from "wagmi";
import styles from "../styles/Modal.module.css"

interface WaitingForTxModalProps {
  hash: Hash,
  callbackFn: () => void;
}

const WaitingForTxModal = ({
  hash,
  callbackFn
}: WaitingForTxModalProps) => {
  const { isFetched } = useWaitForTransactionReceipt({ hash })
  useEffect(() => {
    if (isFetched) {
      callbackFn()
    }
  }, [isFetched, callbackFn])
  return <div className={styles.modal}>
    <div className={styles.loadingImage}>
      <div className={styles.loadingHamsterWheelStand} />
      <div className={styles.loadingHamsterWheel} />
      <div className={styles.loadingHamster} />
    </div>
    <p className={styles.loadingText}>Spinning the chain ...</p>
  </div>
}

export default WaitingForTxModal