Implement addListener example

example/src/App.tsx

@@ -8,7 +8,7 @@ import {
   SendStx,
 } from './components';
 import { useLocalStorage } from './hooks';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import GetBtcBalance from './components/GetBtcBalance';
 import GetRunesBalance from './components/GetRunesBalance';
 import { Container, ConnectButtonsContainer, Header, Logo, Body, Button } from './App.styles';
@@ -31,6 +31,15 @@ function AppWithProviders() {
 
   const isConnected = btcAddressInfo.length + stxAddressInfo.length > 0;
 
+  useEffect(() => {
+    if (btcAddressInfo.length < 1) return;
+
+    const removeListener = Wallet.addListener('accountChange', (ev) => {
+      console.log('The account has changed.', ev);
+    });
+
+    return removeListener;
+  });
   const onConnectLegacy = useCallback(() => {
     (async () => {
       const response = await Wallet.request('getAccounts', {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sats-connect",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "main": "dist/index.mjs",
   "files": [
     "dist"
@@ -24,7 +24,7 @@
     ]
   },
   "dependencies": {
-    "@sats-connect/core": "0.1.2",
+    "@sats-connect/core": "0.2.1",
     "@sats-connect/make-default-provider-config": "0.0.5",
     "@sats-connect/ui": "0.0.6"
   },

src/index.ts

@@ -11,6 +11,7 @@ import {
   removeDefaultProvider,
   RpcErrorCode,
   BaseAdapter,
+  type AddListener,
 } from '@sats-connect/core';
 import {
   Config,
@@ -107,6 +108,34 @@ class Wallet {
     }
     return response;
   }
+
+  public addListener: AddListener = (event, cb) => {
+    const defaultProvider = getDefaultProvider();
+    if (!this.isProviderSet() && defaultProvider) {
+      this.providerId = defaultProvider;
+    }
+
+    if (!this.isProviderSet()) {
+      throw new Error(
+        'No wallet provider selected. The user must first select a wallet before adding listeners to wallet events.'
+      );
+    }
+
+    const adapter = this.defaultAdapters[this.providerId as string];
+
+    // Clients may have be using the latest version of sats-connect without
+    // their wallets having been updated. Until we have API versioning for the
+    // wallet, we can avoid having apps crash by checking whether the adapter
+    // actually supports `addListener`.
+    if (!new adapter().addListener) {
+      console.error(
+        `The wallet provider you are using does not support the addListener method. Please update your wallet provider.`
+      );
+      return () => {};
+    }
+
+    return new adapter().addListener(event, cb);
+  };
 }
 
 export * from '@sats-connect/core';