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

Usage with react-hot-toast

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,
  });

  // measure performance base on the transaction status
  useEffect(() => {
    switch (status) {
      case 'SUCCESS':
        toast.success('This is a success transaction');
        break;

      case 'FAILED':
        toast.error('This is a failed transaction');
        break;
      default: // PENDING
    }
  }, [status]);

  // clear previous toast message and show checking information
  useEffect(() => {
    toast.dismiss();
    toast.loading('Checking...' + transactionHash);
  }, [transactionHash]);

  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>
  );
}

Run tests

yarn test

Author

👤 Huynh Duc Dung

• Website: https://productsway.com/
• Twitter: @jellydn
• Github: @jellydn

Stargazers 🌟

Show your support

Give a ⭐️ if this project helped you!


---

This README was generated with ❤️ by readme-md-generator