web3-notifier v1.1.1

web3-notifier

Get live status notifications for your web3 transactions.

Author

• @thisisgazzar

Table of Contents

• Installation
• Example
• Parameters

Installation

To install, you can use npm or yarn:

$ npm install --save web3-notifier
$ yarn add web3-notifier

Example

Here is a simple React example:

import React, { useState } from 'react';
import styled from "styled-components";
import Web3 from 'web3';
import { Notifier } from 'web3-notifier';

const Title = styled.h2`
    font-size: 15px;
`
const Button = styled.button`
    cursor: pointer;
`
export default function App() {
    const [statuses, setStatuses] = useState({});
    const provider = window.ethereum;
    const web3 = new Web3(provider);

    const sendTransaction = async () => {
        const accounts = await provider.enable();
        const txData = {
            from: accounts[0],
            to: "",
            value: ""
        }
        return new Promise((resolve, reject) => 
            web3.eth
                .sendTransaction(txData)
                .on("transactionHash", resolve)
                .catch(reject)
        );
    }

    const send = () => {
        Notifier({
            transactionEvent: () => sendTransaction(),
            web3: web3,
            useStateEvent: setStatuses
        })
    }

    return(
        <>
            <Title>Send Transaction</Title>
            <Button onClick={send}>Send transaction</Button>
        </>

    );
}

Parameters

• transactionEvent: Takes your web3 transaction event.
• web3: Takes the web3 object.
• notifier: Enables the built-in notifications(true is the default value).
• useStateEvent: Optional parameter for React projects which take a useState event and returns an object of the transactions status.
• getTransactionHash: Optional parameter that gets the transaction hash once it's available.
• onConfirmationAwait: Optional parameter which takes an event that fires while waiting for user's confirmation.
• onCancelled: Optional parameter which takes an event that fires on rejecting the transaction.
• onPending: Optional parameter which takes an event that fires on confirming the transaction.
• onSuccess: Optional parameter which takes an event that fires after the transaction succeeds.
• onFailed: Optional parameter which takes an event that fires if the transaction failed.
• onError: Optional parameter which takes an event that fires if the transaction threw an error.