Appearance
Event hooks
Use state hooks for UI. Use event hooks for side effects (navigate, toast, analytics).
The dedicated wallets event hook is useOnWalletTransferStatus. Other wallets:* events are available through useClientEvent or client.on — see Events (Core).
Connection UI (list, restore, pairing URI) should read useWalletConnections / useConnectWallet / useWallet instead of these events.
Transfer status
tsx
import { useOnWalletTransferStatus } from '@swapped/connect-sdk/react'
function TransferListener() {
useOnWalletTransferStatus(event => {
event.status
event.hash
event.clientTxId
})
return null
}Same payload as onStatus on submit / retry. Status values: Submit.
Other wallet events
tsx
import { useClientEvent } from '@swapped/connect-sdk/react'
function WalletListeners() {
useClientEvent('wallets:connected', ({ connection }) => {
connection.walletId
})
useClientEvent('wallets:disconnected', ({ walletId, reason }) => {
/* … */
})
useClientEvent('wallets:pairingUri', ({ uri, deeplinkUrl }) => {
/* … */
})
useClientEvent('wallets:balancesUpdated', ({ balances }) => {
/* … */
})
return null
}