Update @sats-connect/core version

example/package.json

@@ -8,6 +8,12 @@
   },
   "license": "ISC",
   "description": "A cookie cutter for dapps using sats-connect",
+  "scripts": {
+    "prepare": "cd .. && npm i && npm run build && cd example",
+    "start": "GENERATE_SOURCEMAP=false PORT=3001 react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
   "dependencies": {
     "@types/node": "^16.18.87",
     "@types/react": "^18.2.64",
@@ -16,14 +22,9 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "sats-connect": "file:..",
+    "styled-components": "6.1.11",
     "typescript": "^4.9.5"
   },
-  "scripts": {
-    "prepare": "cd .. && npm i && npm run build && cd example",
-    "start": "GENERATE_SOURCEMAP=false PORT=3001 react-scripts start",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject"
-  },
   "eslintConfig": {
     "extends": [
       "react-app",

example/src/App.styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const ConnectButtonsContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});

example/src/App.tsx

@@ -1,4 +1,4 @@
-import Wallet, { Address, AddressPurpose, BitcoinNetworkType } from 'sats-connect';
+import Wallet, { type Address, AddressPurpose, BitcoinNetworkType } from 'sats-connect';
 import './App.css';
 import {
   AddressDisplay,
@@ -9,30 +9,72 @@ import {
   SendStx,
 } from './components';
 import { useLocalStorage } from './hooks';
+import { useCallback } from 'react';
+import GetBtcBalance from './components/GetBtcBalance';
+import GetRunesBalance from './components/GetRunesBalance';
+import { ConnectButtonsContainer } from './App.styles';
+import GetInscriptions from './components/GetInscriptions';
 
 function App() {
   const [network, setNetwork] = useLocalStorage<BitcoinNetworkType>(
     'network',
     BitcoinNetworkType.Mainnet
   );
-  const [addressInfo, setAddressInfo] = useLocalStorage<Address[]>('addresses', []);
+  const [btcAddressInfo, setBtcAddressInfo] = useLocalStorage<Address[]>('btc-addresses', []);
+  const [stxAddressInfo, setStxAddressInfo] = useLocalStorage<Address[]>('stx-addresses', []);
+  const [legacyAddressInfo, setLegacyAddressInfo] = useLocalStorage<Address[]>(
+    'legacy-addresses',
+    []
+  );
 
-  const isConnected = addressInfo.length > 0;
+  const isConnected = btcAddressInfo.length + stxAddressInfo.length + legacyAddressInfo.length > 0;
 
-  const onConnect = async () => {
+  const onConnectLegacy = async () => {
     const response = await Wallet.request('getAccounts', {
       purposes: [AddressPurpose.Payment, AddressPurpose.Ordinals, AddressPurpose.Stacks],
       message: 'Cool app wants to know your addresses!',
     });
     if (response.status === 'success') {
-      setAddressInfo(response.result);
-      console.log(response.result);
+      setLegacyAddressInfo(response.result);
     }
   };
 
+  const onConnect = useCallback(async () => {
+    const res = await Wallet.request('wallet_requestPermissions', undefined);
+    if (res.status === 'error') {
+      console.error('Error connecting to wallet, details in terminal.');
+      console.error(res);
+      return;
+    }
+
+    const res2 = await Wallet.request('getAddresses', {
+      purposes: [AddressPurpose.Ordinals, AddressPurpose.Payment],
+    });
+
+    if (res2.status === 'error') {
+      console.error('Error retrieving bitcoin addresses after having requested permissions.');
+      console.error(res2);
+      return;
+    }
+
+    setBtcAddressInfo(res2.result.addresses);
+    const res3 = await Wallet.request('stx_getAddresses', null);
+
+    if (res3.status === 'error') {
+      alert(
+        'Error retrieving stacks addresses after having requested permissions. Details in terminal.'
+      );
+      console.error(res3);
+      return;
+    }
+
+    setStxAddressInfo(res3.result.addresses);
+  }, [setBtcAddressInfo, setStxAddressInfo]);
+
   const onDisconnect = () => {
     Wallet.disconnect();
-    setAddressInfo([]);
+    setBtcAddressInfo([]);
+    setStxAddressInfo([]);
   };
 
   if (!isConnected) {
@@ -42,7 +84,10 @@ function App() {
           <img className="logo" src="/sats-connect.svg" alt="SatsConnect" />
           <NetworkSelector network={network} setNetwork={setNetwork} />
           <p>Click the button to connect your wallet</p>
-          <button onClick={onConnect}>Connect</button>
+          <ConnectButtonsContainer>
+            <button onClick={onConnect}>Connect</button>
+            <button onClick={onConnectLegacy}>Connect (Legacy)</button>
+          </ConnectButtonsContainer>
         </header>
       </div>
     );
@@ -54,11 +99,18 @@ function App() {
         <div>
           <img className="logo" src="/sats-connect.svg" alt="SatsConnect" />
         </div>
-        <AddressDisplay network={network} addresses={addressInfo} onDisconnect={onDisconnect} />
+        <AddressDisplay
+          network={network}
+          addresses={[...btcAddressInfo, ...stxAddressInfo]}
+          onDisconnect={onDisconnect}
+        />
         <SendStx network={network} />
         <SendBtc network={network} />
-        <MintRunes network={network} addresses={addressInfo} />
-        <EtchRunes network={network} addresses={addressInfo} />
+        <GetBtcBalance />
+        <MintRunes network={network} addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
+        <EtchRunes network={network} addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
+        <GetRunesBalance />
+        <GetInscriptions />
       </div>
     </div>
   );

example/src/components/GetBtcBalance/index.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import Wallet, { RpcErrorCode } from 'sats-connect';
+
+const GetBtcBalance = () => {
+  const [confirmed, setConfirmed] = useState('');
+  const [unconfirmed, setUnconfirmed] = useState('');
+  const [total, setTotal] = useState('');
+
+  const onClick = async () => {
+    const response = await Wallet.request('getBalance', undefined);
+
+    if (response.status === 'success') {
+      setConfirmed(response.result.confirmed);
+      setUnconfirmed(response.result.unconfirmed);
+      setTotal(response.result.total);
+    } else if (response.error.code === RpcErrorCode.USER_REJECTION) {
+      alert('User cancelled the request');
+    } else {
+      console.error(response.error);
+      alert('Error sending BTC. See console for details.');
+    }
+  };
+
+  return (
+    <div className="card">
+      <h3>BTC balance</h3>
+
+      <button onClick={onClick}>Get BTC balance</button>
+
+      <div>
+        <div>Confirmed: {confirmed}</div>
+        <div>Unconfirmed: {unconfirmed}</div>
+        <div>Total: {total}</div>
+      </div>
+    </div>
+  );
+};
+
+export default GetBtcBalance;