Use-wait-for-transaction-hash NPM

Welcome to use-wait-for-transaction-hash 👋

Simple hook for getting transaction status from the ETH network.

✨ Demo

Prerequisites

React >=16.8

Install

yarn add use-wait-for-transaction-hash

Usage

Simple usage with Notify component

import { useWaitForTransactionHash } from 'use-wait-for-transaction-hash';

interface Props {
  providerUrl: string;
  transactionHash: string;
}

function Notify({ providerUrl, transactionHash }: Props) {
  const { status } = useWaitForTransactionHash({
    hash: transactionHash,
    providerUrl,
  });
  return (
    <div>
      <pre>Hash: {transactionHash}</pre>
      <pre>Provider Url: {providerUrl}</pre>
      <pre>Status: {status}</pre>
    </div>
  );
}

function App() {
  const [toggle, setToggle] = useState(false);

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => (toggle ? setToggle(false) : setToggle(true))}>
          Toggle the transaction hash
        </button>
        <Notify
          providerUrl="https://data-seed-prebsc-1-s1.binance.org:8545"
          transactionHash={
            toggle
              ? '0x5fbc777b0c99e84b8a3f1c750ae4d1cdaa5f8f852da892897f6b9cf0ea2f59b5'
              : '0x35403cfc33cababac41ad998dff9038c57945ac7cbe9f22e5bdfbf89a8756bd7'
          }
        />
      </header>
    </div>
  );
}

For more detail, please check the example app (example folder),

Recipes

import { useEffect } from 'react';
import { useWaitForTransactionHash } from 'use-wait-for-transaction-hash';
import toast, { Toaster } from 'react-hot-toast';

function Notify({ providerUrl, transactionHash }: Props) {
  const { status } = useWaitForTransactionHash({
    hash: transactionHash,
    providerUrl,
  });

  useEffect(() => {
    switch (status) {
      case 'PENDING':
        toast.loading('Checking...' + transactionHash);
        break;

      case 'FAILED':
        actions.stop();
        toast.error('This is a failed transaction');
        break;

      default:
        actions.stop();
        toast.success('This is a success transaction');
    }
  }, [status]);

  return (
    <div>
      <pre>Hash: {transactionHash}</pre>
      <pre>Provider Url: {providerUrl}</pre>
      <pre>Status: {status}</pre>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Notify
        providerUrl="https://data-seed-prebsc-1-s1.binance.org:8545"
        transactionHash="0x5fbc777b0c99e84b8a3f1c750ae4d1cdaa5f8f852da892897f6b9cf0ea2f59b5"
      />

      <Toaster position="top-right" />
    </div>
  );
}