useNotifications does not seem to work as per docs for @web3-onboard/react

[newbreedofgeek]

Current Behavior

In the @web3-onboard/react docs, there is this line that seems to show BlockNative API key - but this is not used anywhere in the example code.
https://github.com/blocknative/web3-onboard/blob/develop/packages/react/README.md?plain=1#L28

The docs also state that This hook allows the dev to access all notifications if enabled, send custom notifications and update notify <enable/disable & update transactionHandler function> **note** requires an API key be added to the initialization, enabled by default if API key exists:
https://github.com/blocknative/web3-onboard/blob/develop/packages/react/README.md?plain=1#L226

But this does not seem to do anything.

In the React package init, i've tried to add it like so:

const web3Onboard = init({
  apiKey: 'foo-bar',
  wallets,
  chains,
  appMetadata
});

The TX happens but there is no useNotifications hooks being called or custom transaction UI being shown.

i've also tried it like so:

import transactionPreviewModule from '@web3-onboard/transaction-preview'

const transactionPreview = transactionPreviewModule();

const web3Onboard = init({
  transactionPreview,
  apiKey: 'foo-bar',
  wallets,
  chains,
  appMetadata
});

const [
    notifications, // the list of all notifications that update when notifications are added, updated or removed
    customNotification, // a function that takes a customNotification object and allows custom notifications to be shown to the user, returns an update and dismiss callback
    updateNotify, // a function that takes a Notify object to allow updating of the properties
    preflightNotifications // a function that takes a PreflightNotificationsOption to create preflight notifications
  ] = useNotifications();

  useEffect(() => {
    console.log('notifications', notifications);
  }, [notifications]);

This is case, the TX does not even work and a Javascript error is thrown.

Question:

• For @web3-onboard/react, how do I get useNotifications to work so I can track the TX state locally in the app?
• Is it also supposed to show some custom UI? or just trigger the useNotifications hook?

Expected Behavior

When enabled as per the documentation, the useNotifications should work.

Or docs need to be updated with a working example.

Steps To Reproduce

No response

What package is effected by this issue?

@web3-onboard/react

Is this a build or a runtime issue?

Runtime

Package Version

^13.4.0

Node Version

v18.15.0

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[Adamj1232]

@newbreedofgeek thanks for raising this issue. I will update the react example code to pass in the Blocknative API key to the web3-onboard initialization.
What chain are you testing transactions on? We currently only support Eth (main + test-nets) and Polygon (main + test-nets)
We have a react example project you can checkout here for contexts that is working as expected - https://github.com/blocknative/react-demo/blob/4bf91352edf35e42415989d3997688b529a4a4cf/src/App.js#L31