Add getAddresses

example/src/App.tsx

@@ -20,6 +20,7 @@ import { GetRunesBalance } from './components/GetRunesBalance';
 import { SendInscription } from './components/sendInscriptions';
 
 import AddressDisplay from './components/AddressDisplay';
+import { GetAddresses } from './components/bitcoin/GetAddresses.tsx';
 import { SendBtc } from './components/bitcoin/SendBtc';
 import EtchRunes from './components/EtchRunes';
 import MintRunes from './components/MintRunes';
@@ -161,8 +162,9 @@ const WalletMethods = () => {
         addresses={[...btcAddressInfo, ...stxAddressInfo]}
         onDisconnect={onDisconnect}
       />
-      <GetAccounts />
+      <GetAddresses />
       <WalletType />
+      <GetAccounts />
     </>
   );
 };
@@ -235,7 +237,13 @@ const router = createBrowserRouter(
   ),
 );
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
 
 const theme = createTheme({
   primaryColor: 'orange',

example/src/components/bitcoin/GetAccounts.tsx

@@ -1,7 +1,7 @@
-import Wallet, { AddressPurpose } from 'sats-connect';
-import { Button, Card } from '../../App.styles';
 import { useQuery } from '@tanstack/react-query';
+import Wallet, { AddressPurpose } from 'sats-connect';
 import styled from 'styled-components';
+import { Button, Card } from '../../App.styles';
 
 const ErrorMessage = styled.div({
   color: 'red',
@@ -24,7 +24,7 @@ export function GetAccounts() {
 
   return (
     <Card>
-      <h3>Get accounts</h3>
+      <h3>[Legacy] Get accounts</h3>
 
       <Button
         onClick={() => {

example/src/components/bitcoin/GetAddresses.tsx

@@ -0,0 +1,59 @@
+import { useQuery } from '@tanstack/react-query';
+import Wallet, { AddressPurpose } from 'sats-connect';
+import styled from 'styled-components';
+import { Button, Card } from '../../App.styles';
+
+const ErrorMessage = styled.div({
+  color: 'red',
+});
+
+export function GetAddresses() {
+  const { refetch, error, data, isFetching, isError, isSuccess } = useQuery({
+    queryKey: ['getAddresses'],
+    queryFn: async () => {
+      const res = await Wallet.request('getAddresses', {
+        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 addresses</h3>
+
+      <Button
+        onClick={() => {
+          refetch().catch(console.error);
+        }}
+      >
+        Get addresses
+      </Button>
+
+      {(() => {
+        if (isFetching) {
+          return <p>Loading...</p>;
+        }
+
+        if (isError) {
+          console.error(error);
+          console.error(error.cause);
+          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

@@ -1,7 +1,7 @@
-import Wallet from 'sats-connect';
-import { Button, Card } from '../../App.styles';
 import { useQuery } from '@tanstack/react-query';
+import Wallet from 'sats-connect';
 import styled from 'styled-components';
+import { Button, Card } from '../../App.styles';
 
 const ErrorMessage = styled.div({
   color: 'red',
@@ -39,6 +39,7 @@ export function WalletType() {
 
         if (isError) {
           console.error(error);
+          console.error(error.cause);
           return <ErrorMessage>Error. Check console for details.</ErrorMessage>;
         }