system
[default = 'ethereum']'bitcoin'
and 'ethereum'
. 1
Main Network3
Ropsten Test Network4
Rinkeby Test Network5
Goerli Test Network42
Kovan Test Network56
Binance Smart Chain100
xDai POA Network137
Polygon Matic Main Network250
Fantom Opera Main Network1
Main Network2
Testnet Networkonerror
darkMode
false
.mobilePosition
top
or bottom
. Default is top
.desktopPosition
bottomLeft
, bottomRight
, topLeft
, or topRight
. Default is bottomRight
.txApproveReminderTimeout
20000
milliseconds (20 seconds).tsStallPendingTimeout
txPool
. Default is 20000
milliseconds (20 seconds).tsStallConfirmedTimeout
90000
milliseconds (90 seconds).transactionHandler
transactionHandler
parameter will be called once for every status update for every transaction that is associated with a watched address or a watched transaction. This is useful as a global handler for all transactions and status updates. The callback is called with the following object:clientLocale
'en'
). See the i18n section for more details.notifyMessages
hash
hash
function:account
account
function:transaction
transaction
function:result
is a promise that resolves with the id
of the transaction or rejects with an error if there was an error initiating the transaction. The id
is useful for when you would like to initiate the transaction yourself and didn't pass a sendTransaction
function in to transaction
. You can then send the transaction yourself, receive the hash, and then call notify.hash(hash, id)
. By passing in the id
to hash
you enable notify to link the preflight notifications to the post send transaction notifications, ensuring a consistent UX.transaction
function takes an object as the argument which allows you to progressively opt in to which checks and corresponding notifications that you would like during the "pre-flight" phase of the transaction lifecycle. Below is a list of the parameters, what is expected for each of those parameters, and the corresponding notifications you will get by including those parameters:estimateGas
- [balance check notification]estimateGas
function must return a Promise
that resolves with a String
that is the gas estimate in wei
. This function can vary depending on whether it is a contract transaction or just a regular send transaction call.gasPrice
- [balance check notification]gasPrice
function must return a Promise
that resolves with a String
that is the gas price in wei
.balance
- [balance check notification]wei
txDetails
- [repeat transaction check notification]txDetails
object includes a to
parameter which is the address the transaction is being sent to and the value
parameter, which is the value of the transaction.contractCall
- [repeat transaction check notification]contractCall
object includes a methodName
parameter which is the name of the method on the contract being called and the params
parameter is the parameters that the contract method was called with.sendTransaction
- [send transaction error, approval reminder, and stall notifications]sendTransaction
function must return a Promise
that resolves with a String
that is the transaction hash.notification
notification
function to do that:notification
function is called with a notification object with the following parameters:eventCode
: a string which is used to keep track of that event for your analytics dashboardtype
: a string that defines the style - ['hint' (gray), 'pending' (yellow), 'success' (green), 'error' (red)]message
: a message string that is displayed on the notificationautoDismiss
: a number in milliseconds before the notification auto dismisses or 0
for no auto dismissal. success
and hint
types default to 4000
onclick
: a function to call when the notification is clicked by the userupdate
: a function that can be called with a new notification object to replace the original notification withdismiss
: a function that can be called to dismiss the notification manuallyunsubscribe
config
networkId
or system
is passed to the config
function, then the current WebSocket connection will automatically be closed and a new connection will be established.emitter
object returned is used to listen for transaction events:txRequest
: Transaction has been initiated and is waiting approval from the usertxRepeat
: Transaction has the same value and to address, so may be a repeat transactiontxAwaitingApproval
: A previous transaction is awaiting approvaltxConfirmReminder
: Transaction has not been confirmed after timeouttxStallPending
: Transaction has not been received in the mempool after timeouttxStallConfirmed
: Transaction has been in the mempool for longer than the timeouttxError
: An error has occurred initiating the transactiontxSendFail
: The user rejected the transactiontxUnderpriced
: The gas was set too low for the transaction to completetxSent
: Transaction has been sent to the networktxPool
: Transaction was detected in the "pending" area of the mempool and is eligible for inclusion in a blocktxStuck
: Transaction was detected in the "queued" area of the mempool and is not eligible for inclusion in a blocktxConfirmed
: Transaction has been minedtxFailed
: Transaction has failedtxSpeedUp
: A new transaction has been submitted with the same nonce and a higher gas price, replacing the original transactiontxCancel
: A new transaction has been submitted with the same nonce, a higher gas price, a value of zero and sent to an external address (not a contract)txDropped
: Transaction was dropped from the mempool without being added to a block. NOTE: Transaction could reappear in mempool.pending
and confirmed
statuses for transactions on that network and will not display any notifications. The emitter will also not emit events for those statuses. Notify will set the network to local
if a networkId
is passed in during initialization that is not one of the supported networks.bn-notify-custom
plus the class name that you would like to override in your CSS
file. For example, if you would like to customize the font-family
of the notifications, then you would target the top level ul
element that has the class bn-notify-notifications
in your CSS
file:CSS
: .bn-notify-notifications
.bn-notify.notification
.bn-notify-notification-info
.bn-notify-notification-info-message
.bn-notify-notification-close
clientLocale
clientLocale
. If that locale is defined within the notifyMessages
object, then it will use that locale for all transaction messages. If it isn't defined, then it will fallback to the default 'en'
locale. You can explicitly set the clientLocale
for the user by calling the config
function or passing it in via initializationObject
.notifyMessages
'en'
clientLocale
and can be extended to include transaction messages for additional clientLocale
settings. To extend the default notifyMessages
object, you can pass in a notifyMessages
object to either the config
function or to the initializationObject
.'es'
(Spanish) notifyMessages
object:notifyMessages
object above would get merged with Notify's internal notifyMessages
object, extending Notify to support both English and Spanish transaction notification messages.undefined
value back from the language object, then it will fallback to the English default included in Notify.format.js
under the hood, which uses the ICU message syntax to format messages. Check out their guide to the ICU message syntax here.transaction
object, a watched
object and a time
object. transaction
object will be referenced for notifications that have been triggered via the hash
or transaction
function.
The watched
object will be referenced for notifications that have been triggered by watching an address via the account
function.
The time
object will be referenced for expressing the amount of time that has passed during pending states on the notification.formattedValue
- (transaction
, watched
)asset
- (transaction
, watched
)verb
- (watched
)
Possible values are: 'received'
, 'sent'
, 'receiving'
, 'sending'
preposition
- (watched
)
Possible values are: 'from'
, 'to'
counterpartyShortened
- (watched
)dappId
in your initialization options. In this scenario, Notify.js will not initiate a WebSocket connection to the Blocknative servers and all functionality other than the notification
function will be disabled.Uncaught TypeError: dist is not a constructor
when building with Rollup.js. To fix this issue make sure that you are using @rollup/plugin-commonjs
version 16.0.0
and abovereact-demo
repo on GitHub: https://github.com/blocknative/react-demo
We have the reactdemo
codebase deployed so that you try Notify from an end user perspective: https://reactdemo.blocknative.com/