# react-transaction-toasts

> ![scr1](https://raw.githubusercontent.com/erdDEVcode/react-transaction-toasts/master/screenshot.png) ![scr2](https://raw.githubusercontent.com/erdDEVcode/react-transaction-toasts/master/screenshot2.png)

Latest version **1.4.0** (published 2021-01-26) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-transaction-toasts
pnpm add react-transaction-toasts
yarn add react-transaction-toasts
bun add react-transaction-toasts
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2021-01-26 |
| First published | 2020-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 64.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | erdDEV team |
| Maintainers | hiddentao |

## Links

- npm: https://www.npmjs.com/package/react-transaction-toasts
- Homepage: https://elrondjs.erd.dev
- npm.io page: https://npm.io/package/react-transaction-toasts

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^17.0.1
- [elrondjs](https://npm.io/package/elrondjs.md) ^2.3.1
- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [@types/node](https://npm.io/package/@types/node.md) ^12.0.0
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.53
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.1.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.0.0
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.8
- [emotion-styled-utils](https://npm.io/package/emotion-styled-utils.md) ^2.3.2
- [react-toast-notifications](https://npm.io/package/react-toast-notifications.md) ^2.4.0

## Recent versions

- 1.4.0 (latest) — 2021-01-26
- 1.3.4 — 2021-01-13
- 1.3.3 — 2021-01-04
- 1.3.2 — 2021-01-04
- 1.3.1 — 2021-01-04
- 1.3.0 — 2020-12-30
- 1.2.0 — 2020-11-25
- 1.1.0 — 2020-11-25
- 1.0.2 — 2020-11-25
- 1.0.1 — 2020-11-25
- 1.0.0 — 2020-11-25

## README

![scr1](https://raw.githubusercontent.com/erdDEVcode/react-transaction-toasts/master/screenshot.png)
![scr2](https://raw.githubusercontent.com/erdDEVcode/react-transaction-toasts/master/screenshot2.png)

# react-transaction-toasts

[![NPM module](https://badge.fury.io/js/react-transaction-toasts.svg)](https://badge.fury.io/js/react-transaction-toasts)
[![Join the community](https://img.shields.io/badge/Chat%20on-Telegram-brightgreen.svg?color=0088cc)](https://t.me/erdDEV)
[![Follow on Twitter](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Follow&maxAge=2592000)](https://twitter.com/erd_dev)

React component for visualizing [Elrond](https://elrond.com) transaction progress.

* Tracks transaction progress and reports success/failure.
* Optionally auto-hide a notification once transaction completes.
* Customizable styling.
* Powered by [react-toast-notifications](https://github.com/jossmac/react-toast-notifications).

Live demo: [https://string.erd.dev](https://string.erd.dev)

## Installation

_Note: This package requires React 17 or above._

```shell
npm install --save react-transaction-toasts react@17 elrondjs
```

## Usage

First, you need to setup the `TransactionToastProvider`. In your top-level app component:

```js
import { Component } from 'react'
import { TransactionToastsProvider } from 'react-transaction-toasts'

export default class App extends React.Component {
  componentDidCatch (error: Error, info: React.ErrorInfo) {
    console.error(error, info)
  }

  render() {
    return (
      <TransactionToastProvider>
        {/* app/routing components here */}
      </TransactionToastProvider>
    )
  }
}
```

Then in any child component you can do:

```js
import { useTransactionToasts } from 'react-transaction-toasts'
import { useCallback } from 'react'
import { ProxyProvider } from 'elrondjs'

// React functional component
export default () => {
  const { trackTransaction, showError } = useTransactionToasts()

  const sendTransaction = useCallback(async () => {
    const provider = new ProxyProvider(...)
    const signedTx = ...

    try {
      const ret = await provider.sendSignedTransaction(signedTx)
      trackTransaction(ret.hash, { provider })
    } catch (err) {
      showError(err.message)
    }
  })

  return (
    <button onClick={sendTransaction}>Send</button>
  )
}
```

### Customization

By default the toast notification automatically disappears after a few seconds for a 
transaction that succeeds. To prevent this happening:

```js
const { trackTransaction, showError } = useTransactionToasts({
  disableAutoCloseOnSuccess: true,
})
```

The `TransactionToastsProvider` component takes the same properties as `ToastProvider` in the `react-toast-notification` package. The defaults set are:

* `placement`: `top-right`
* `autoDismissTimeout`: `5000`

[See the full docs](https://github.com/jossmac/react-toast-notifications#toastprovider-props) for more information on values you can set.

## Contributor guide

This is for anyone working on this codebase.

Build and watch component:

```shell
yarn dev
```

Build component for production:

```shell
yarn build
```

Build and publish a new release

```
yarn release
```

## License

MIT

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