https://github.com/jellydn/use-wait-for-transaction-hash
Simple hook for getting transaction status from the ETH network.
https://github.com/jellydn/use-wait-for-transaction-hash
binance-smart-chain ethereum hacktoberfest hooks-api react
Last synced: about 1 year ago
JSON representation
Simple hook for getting transaction status from the ETH network.
- Host: GitHub
- URL: https://github.com/jellydn/use-wait-for-transaction-hash
- Owner: jellydn
- License: mit
- Created: 2021-03-27T07:03:16.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-04-05T19:30:20.000Z (about 1 year ago)
- Last Synced: 2025-04-05T20:27:14.634Z (about 1 year ago)
- Topics: binance-smart-chain, ethereum, hacktoberfest, hooks-api, react
- Language: TypeScript
- Homepage: https://use-wait-for-transaction-hash.productsway.com/
- Size: 5.4 MB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Welcome to use-wait-for-transaction-hash 👋
[](https://npmjs.org/package/use-wait-for-transaction-hash)
[](https://npmjs.org/package/use-wait-for-transaction-hash)
[](#)
[](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 (
Hash: {transactionHash}
Provider Url: {providerUrl}
Status: {status}
);
}
function App() {
const [toggle, setToggle] = useState(false);
return (
(toggle ? setToggle(false) : setToggle(true))}>
Toggle the transaction hash
);
}
```
For more detail, please check the example app (`example` folder),
## Recipes
Usage with react-hot-toast
```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 (
Hash: {transactionHash}
Provider Url: {providerUrl}
Status: {status}
);
}
function App() {
return (
);
}
```
## 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 🌟
[](https://github.com/jellydn/use-wait-for-transaction-hash/stargazers)
## Show your support
Give a ⭐️ if this project helped you!
[](https://www.patreon.com/jellydn)
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_