Documentation

Event Management

WalletConnect provides two methods for monitoring events:

  • Observe WalletConnect properties using React effects.
  • Register event listeners on the walletInstance.

Observe WalletConnect Properties using React Effects

WalletConnect properties can be observed using React effects. This is the recommended method. These properties return null when the wallet is disconnected and update only on their corresponding events.

The following table shows which WalletConnect properties update in response to wallet actions:

Action Primary Properties Additional Properties
Connection walletInstance, walletAddress, network, walletBalance All other properties
Network Changed network, walletAddress walletBalance, publicKey, provider
Account Changed walletAddress walletBalance, publicKey
Disconnection walletInstance, walletAddress, network All other properties
The following example demonstrates how to listen for events with React effects:
Listening to events using React effectsreact
import { useWalletConnect } from "@btc-vision/walletconnect";

function App() {
    const {connectToWallet, walletAddress, network, walletInstance} = useWalletConnect()

    useEffect(() => {
        console.log(walletInstance ? "Connected" : "Disconnected");
    }, [walletInstance]);

    useEffect(() => {
        if (walletAddress) {
            console.log("Connected to wallet: ", walletAddress);
        }
    }, [walletAddress]);

    useEffect(() => {
        if (network) {
            console.log("Connected to network: ", network.network);
        }
    }, [network]);

    return (
        <button onClick={async () => { await connectToWallet('OP_WALLET')} } >Connect to OP_WALLET</button>
    )
}

Register Event Listeners on the walletInstance

The walletInstance exposes an on() method for registering event listeners. This allows your application to respond to wallet events such as network changes, account switches, and disconnections.

Call removeListener() method to unregister event listeners. Listeners must be removed when no longer needed to prevent memory leaks. Since this approach operates outside React's lifecycle, consult your wallet extension's documentation for available events and usage details.

The following example demonstrates how to register an event listener on an OPWallet walletInstance:
Listening to events using walletInstancereact
import { useWalletConnect } from "@btc-vision/walletconnect";

function App() {
    const {connectToWallet, walletInstance} = useWalletConnect()

    const accountChanged = useCallback((accounts: string[]) => {
        // Do something knowing accounts changed
        console.log("AccountChanged", accounts)
    }, []);

    useEffect(() => {
        if (walletInstance) {
            walletInstance.on("accountsChanged", accountChanged);

            return () => {
                walletInstance.removeListener("accountsChanged", accountChanged);
            };
        }
    }, [walletInstance, accountChanged]);

    return (
        <button onClick={async () => { await connectToWallet('OP_WALLET')} } >Connect to OP_WALLET</button>
    )
}

Specific Wallet Events

Each wallet provider defines its own set of events with different event names and callback signatures. Some wallets may offer more events than others, and the same event type may have different names across providers. For example, network change events may be named networkChanged in one wallet and chainChanged in another.

Always consult your target wallet's documentation for the complete list of available events and their expected parameters.

On this page