Handle Events

The dApp SDK emits events so your UI can stay in sync with the wallet’s state. Subscribe with the on* functions and always unsubscribe with the matching off* function when your component unmounts. For the full list of events and their payloads, see the Events reference.

React to connection status changes

onStatusChanged fires when the connection status or session state changes.

const handler = (status) => {
    console.log('Connected:', status.connection.isConnected)
}

sdk.onStatusChanged(handler)
// Later:
sdk.offStatusChanged(handler)

React to account changes

onAccountsChanged fires when accounts are added or removed, or the primary account changes. Re-read the primary party rather than caching it.

sdk.onAccountsChanged((accounts) => {
    const primary = accounts.find((a) => a.primary)
})

Track transactions

onTxChanged fires as a transaction submitted via prepareExecute moves through its lifecycle (pending, signed, executed, failed).

sdk.onTxChanged((tx) => {
    if (tx.status === 'executed') {
        console.log('Update ID:', tx.payload.updateId)
    }
})

Clean up listeners

Remove every listener when the component unmounts. Leaked listeners cause memory leaks and stale UI updates.

const handler = (status) => setConnected(status.connection.isConnected)

sdk.onStatusChanged(handler)

// On unmount:
sdk.offStatusChanged(handler)

Next steps

Events — The full event list and payload shapes.
Parties & Transactions — Read parties and submit transactions.

Overview

SDKs

Language Bindings

CLI Tools

Development Tools

API Overview

Reference Projects

React to connection status changes

React to account changes

Track transactions

Clean up listeners

Next steps

​React to connection status changes

​React to account changes

​Track transactions

​Clean up listeners

​Next steps

React to connection status changes

React to account changes

Track transactions

Clean up listeners

Next steps