Add support for wallet type in sats-connect

example/package.json

@@ -16,11 +16,12 @@
     "prepare": "cd .. && npm i && npm run build && cd example"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.50.1",
     "bip322-js": "^2.0.0",
     "bitcoinjs-message": "^2.2.0",
     "eslint-plugin-react": "^7.34.3",
-    "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react": "^18.3.1",
     "sats-connect": "file:..",
     "styled-components": "6.1.11"
   },

example/src/App.tsx

@@ -13,9 +13,13 @@ import GetBtcBalance from './components/GetBtcBalance';
 import GetRunesBalance from './components/GetRunesBalance';
 import { Container, ConnectButtonsContainer, Header, Logo, Body, Button } from './App.styles';
 import GetInscriptions from './components/GetInscriptions';
+import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
+import { WalletType } from './components/wallet/WalletType';
+import { GetAccounts } from './components/bitcoin/GetAccounts';
 import { SignMessage } from './components/SignMessage';
 
-function App() {
+function AppWithProviders() {
+  const queryClient = useQueryClient();
   const [network, setNetwork] = useLocalStorage<BitcoinNetworkType>(
     'network',
     BitcoinNetworkType.Mainnet
@@ -81,8 +85,9 @@ function App() {
       setBtcAddressInfo([]);
       setStxAddressInfo([]);
       setLegacyAddressInfo([]);
+      queryClient.clear();
     })().catch(console.error);
-  }, [setBtcAddressInfo, setLegacyAddressInfo, setStxAddressInfo]);
+  }, [queryClient, setBtcAddressInfo, setLegacyAddressInfo, setStxAddressInfo]);
 
   if (!isConnected) {
     return (
@@ -111,6 +116,8 @@ function App() {
           addresses={[...legacyAddressInfo, ...btcAddressInfo, ...stxAddressInfo]}
           onDisconnect={onDisconnect}
         />
+        <GetAccounts />
+        <WalletType />
         <SignMessage addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
         <SendStx network={network} />
         <SendBtc network={network} />
@@ -124,4 +131,13 @@ function App() {
   );
 }
 
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppWithProviders />
+    </QueryClientProvider>
+  );
+}
 export default App;

example/src/components/bitcoin/GetAccounts.tsx

@@ -0,0 +1,58 @@
+import Wallet, { AddressPurpose } from 'sats-connect';
+import { Button, Card } from '../../App.styles';
+import { useQuery } from '@tanstack/react-query';
+import styled from 'styled-components';
+
+const ErrorMessage = styled.div({
+  color: 'red',
+});
+
+export function GetAccounts() {
+  const { refetch, error, data, isFetching, isError, isSuccess } = useQuery({
+    queryKey: ['getAccounts'],
+    queryFn: async () => {
+      const res = await Wallet.request('getAccounts', {
+        purposes: [AddressPurpose.Payment, AddressPurpose.Ordinals, AddressPurpose.Stacks],
+      });
+      if (res.status === 'error') {
+        throw new Error('Error getting wallet type', { cause: res.error });
+      }
+      return res.result;
+    },
+    enabled: false,
+  });
+
+  return (
+    <Card>
+      <h3>Get accounts</h3>
+
+      <Button
+        onClick={() => {
+          refetch().catch(console.error);
+        }}
+      >
+        Get accounts
+      </Button>
+
+      {(() => {
+        if (isFetching) {
+          return <p>Loading...</p>;
+        }
+
+        if (isError) {
+          console.error(error);
+          return <ErrorMessage>Error. Check console for details.</ErrorMessage>;
+        }
+
+        if (isSuccess) {
+          console.log(data);
+          return (
+            <div>
+              <p>Check console for data.</p>
+            </div>
+          );
+        }
+      })()}
+    </Card>
+  );
+}

example/src/components/wallet/WalletType.tsx

@@ -0,0 +1,55 @@
+import Wallet from 'sats-connect';
+import { Button, Card } from '../../App.styles';
+import { useQuery } from '@tanstack/react-query';
+import styled from 'styled-components';
+
+const ErrorMessage = styled.div({
+  color: 'red',
+});
+
+export function WalletType() {
+  const { refetch, error, data, isFetching, isError, isSuccess } = useQuery({
+    queryKey: ['wallet_getWalletType'],
+    queryFn: async () => {
+      const res = await Wallet.request('wallet_getWalletType', undefined);
+      if (res.status === 'error') {
+        throw new Error('Error getting wallet type', { cause: res.error });
+      }
+      return res.result;
+    },
+    enabled: false,
+  });
+
+  return (
+    <Card>
+      <h3>Wallet type</h3>
+
+      <Button
+        onClick={() => {
+          refetch().catch(console.error);
+        }}
+      >
+        Get wallet type
+      </Button>
+
+      {(() => {
+        if (isFetching) {
+          return <p>Loading...</p>;
+        }
+
+        if (isError) {
+          console.error(error);
+          return <ErrorMessage>Error. Check console for details.</ErrorMessage>;
+        }
+
+        if (isSuccess) {
+          return (
+            <div>
+              <p>Wallet type: {data}</p>
+            </div>
+          );
+        }
+      })()}
+    </Card>
+  );
+}

example/tsconfig.app.json

@@ -2,9 +2,9 @@
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,