Notifications

To use notifications in your app simply call:

  const { notifications } = useNotifications()

After that you can use notifications as an array. Notifications are automatically removed from array after time declared in config.notifications.expirationPeriod.

In react you can simply use notifications.map(...) to display them.

For example :

  {notifications.map((notification) => {
    if ('transaction' in notification)
      return (
        <NotificationElement
          key={notification.id}
          icon={notificationContent[notification.type].icon}
          title={notificationContent[notification.type].title}
          transaction={notification.transaction}
          date={Date.now()}
        />
      )
    else
      return (
        <NotificationElement
          key={notification.id}
          icon={notificationContent[notification.type].icon}
          title={notificationContent[notification.type].title}
          date={Date.now()}
        />
      )
  })}

NotificationElement is a react function that renders a single notification. notificationContent is an object that holds information about what title and icon to show. You have to remember that object in notifications array may not contain transaction field (that's why there is if statement).

Configuration

If you want to have notifications that don't disappear, set notifications.expirationPeriod to 0 in your config.

const config: Config = {
    notifications: {
        expirationPeriod: 0,
    }
}

Live example

App will deposit 1 wei to Wrapped Ether contract and display transaction notification. Connect a MetaMask wallet and switch to a test network, such as Kovan or Ropsten.

App.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import {
  DAppProvider,
  useEthers,
  useContractFunction,
  useNotifications,
  Config,
  Goerli,
  Kovan,
  Rinkeby,
  Ropsten,
} from '@usedapp/core'
import { getDefaultProvider, utils } from 'ethers'
import { Contract } from '@ethersproject/contracts'
import { WethAbi, WETH_ADDRESSES } from './constants/Weth'
import { MetamaskConnect } from './components/MetamaskConnect'

const config: Config = {
  readOnlyChainId: Goerli.chainId,
  readOnlyUrls: {
    [Goerli.chainId]: getDefaultProvider('goerli'),
    [Kovan.chainId]: getDefaultProvider('kovan'),
    [Rinkeby.chainId]: getDefaultProvider('rinkeby'),
    [Ropsten.chainId]: getDefaultProvider('ropsten'),
  },
  notifications: {
    expirationPeriod: 0,
  },
}

ReactDOM.render(
  <DAppProvider config={config}>
    <App />
  </DAppProvider>,
  document.getElementById('root')
)

const WrapEtherComponent = () => {
  const { notifications } = useNotifications()
  const { chainId } = useEthers()
  const wethAddress = WETH_ADDRESSES[chainId]
  const wethInterface = new utils.Interface(WethAbi)
  const contract = new Contract(wethAddress, wethInterface) as any

  const { state, send } = useContractFunction(contract, 'deposit', { transactionName: 'Wrap' })
  const { status } = state

  const wrapEther = () => {
    void send({ value: 1 })
  }

  return (
    <div>
      <button onClick={() => wrapEther()}>Wrap ether</button>
      <p>Status: {status}</p>
      <p>Notifications</p>
      {notifications.length !== 0 && (
        <table>
          <th>Type</th>
          <th>Date</th>
          {notifications.map((notification) => {
            return (
              <tr>
                <td>{notification.type}</td>
                <td>{new Date(notification.submittedAt).toDateString()}</td>
              </tr>
            )
          })}
        </table>
      )}
    </div>
  )
}

export function App() {
  const { account, chainId } = useEthers()
  if (!config.readOnlyUrls[chainId]) {
    return <p>Please use either Goerli, Kovan, Rinkeby or Ropsten testnet.</p>
  }

  return <div>{!account ? <MetamaskConnect /> : <WrapEtherComponent />}</div>
}

Notifications

Configuration​

Configuration