# use-wait-for-transaction-hash

> Typescript starter project

Latest version **0.4.1** (published 2022-06-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-wait-for-transaction-hash
pnpm add use-wait-for-transaction-hash
yarn add use-wait-for-transaction-hash
bun add use-wait-for-transaction-hash
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2022-06-22 |
| First published | 2021-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 143.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Huynh Duc Dung |
| Maintainers | jellydn |

## Links

- npm: https://www.npmjs.com/package/use-wait-for-transaction-hash
- Repository: https://github.com/jellydn/use-wait-for-transaction-hash
- npm.io page: https://npm.io/package/use-wait-for-transaction-hash

## Dependencies (1)

- [quick-lru](https://npm.io/package/quick-lru.md) ^6.1.1

## Recent versions

- 0.4.1 (latest) — 2022-06-22
- 0.4.2-0 (next) — 2023-11-25
- 0.4.0 — 2022-06-21
- 0.3.1-0 — 2022-06-06
- 0.3.0 — 2021-08-13
- 0.2.1-1 — 2021-08-13
- 0.2.1-0 — 2021-04-30
- 0.2.0 — 2021-04-26
- 0.2.0-2 — 2021-04-26
- 0.2.0-1 — 2021-04-26
- 0.2.0-0 — 2021-04-26
- 0.1.2 — 2021-04-26
- 0.1.1 — 2021-04-26
- 0.1.0 — 2021-03-27
- 0.0.8 — 2021-03-27
- … 6 more at https://npm.io/package/use-wait-for-transaction-hash/versions

## README

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

[![Version](https://img.shields.io/npm/v/use-wait-for-transaction-hash.svg)](https://npmjs.org/package/use-wait-for-transaction-hash)
[![Downloads/week](https://img.shields.io/npm/dw/use-wait-for-transaction-hash.svg)](https://npmjs.org/package/use-wait-for-transaction-hash)
![Prerequisite](https://img.shields.io/badge/node-%3E%3D10-blue.svg)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](#)
[![Twitter: jellydn](https://img.shields.io/twitter/follow/jellydn.svg?style=social)](https://twitter.com/jellydn)

> Simple hook for getting transaction status from the ETH network.

## ✨ [Demo](https://use-wait-for-transaction-hash.productsway.com/)

## Prerequisites

- React >=16.8

## Install

```sh
yarn add use-wait-for-transaction-hash
```

## Usage

Simple usage with `Notify component`

```js
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

<details>
 <summary>Usage with react-hot-toast</summary>

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

</details>

## Run tests

```sh
yarn test
```

## Author

👤 **Huynh Duc Dung**

- Website: https://productsway.com/
- Twitter: [@jellydn](https://twitter.com/jellydn)
- Github: [@jellydn](https://github.com/jellydn)

## Stargazers 🌟

[![Stargazers repo roster for jellydn/use-wait-for-transaction-hash](https://reporoster.com/stars/jellydn/use-wait-for-transaction-hash)](https://github.com/jellydn/use-wait-for-transaction-hash/stargazers)


## Show your support

Give a ⭐️ if this project helped you!

[![support us](https://img.shields.io/badge/become-a patreon%20us-orange.svg?cacheSeconds=2592000)](https://www.patreon.com/jellydn)

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

---
_Source: https://npm.io/package/use-wait-for-transaction-hash · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._