Merge pull request #161 from secretkeylabs/stacks-sign-tx-example

chore/stx_signTransaction example

example/package.json

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

example/src/App.tsx

@@ -18,6 +18,7 @@ import { WalletType } from './components/wallet/WalletType';
 import { GetAccounts } from './components/bitcoin/GetAccounts';
 import { SignMessage } from './components/SignMessage';
 import SendInscription from './components/sendInscriptions';
+import SignTransaction from './components/signTransaction';
 
 function AppWithProviders() {
   const queryClient = useQueryClient();
@@ -27,12 +28,8 @@ function AppWithProviders() {
   );
   const [btcAddressInfo, setBtcAddressInfo] = useLocalStorage<Address[]>('btc-addresses', []);
   const [stxAddressInfo, setStxAddressInfo] = useLocalStorage<Address[]>('stx-addresses', []);
-  const [legacyAddressInfo, setLegacyAddressInfo] = useLocalStorage<Address[]>(
-    'legacy-addresses',
-    []
-  );
 
-  const isConnected = btcAddressInfo.length + stxAddressInfo.length + legacyAddressInfo.length > 0;
+  const isConnected = btcAddressInfo.length + stxAddressInfo.length > 0;
 
   const onConnectLegacy = useCallback(() => {
     (async () => {
@@ -41,10 +38,11 @@ function AppWithProviders() {
         message: 'Cool app wants to know your addresses!',
       });
       if (response.status === 'success') {
-        setLegacyAddressInfo(response.result);
+        setBtcAddressInfo([response.result[0], response.result[1]]);
+        if (response.result[2]) setStxAddressInfo([response.result[2]]);
       }
     })().catch(console.error);
-  }, [setLegacyAddressInfo]);
+  }, [setBtcAddressInfo, setStxAddressInfo]);
 
   const onConnect = useCallback(() => {
     (async () => {
@@ -85,10 +83,9 @@ function AppWithProviders() {
       await Wallet.disconnect();
       setBtcAddressInfo([]);
       setStxAddressInfo([]);
-      setLegacyAddressInfo([]);
       queryClient.clear();
     })().catch(console.error);
-  }, [queryClient, setBtcAddressInfo, setLegacyAddressInfo, setStxAddressInfo]);
+  }, [queryClient, setBtcAddressInfo, setStxAddressInfo]);
 
   if (!isConnected) {
     return (
@@ -114,18 +111,21 @@ function AppWithProviders() {
         </div>
         <AddressDisplay
           network={network}
-          addresses={[...legacyAddressInfo, ...btcAddressInfo, ...stxAddressInfo]}
+          addresses={[...btcAddressInfo, ...stxAddressInfo]}
           onDisconnect={onDisconnect}
         />
         <GetAccounts />
         <WalletType />
-        <SignMessage addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
+        <SignMessage addresses={btcAddressInfo} />
         <SendStx network={network} />
+        {stxAddressInfo?.[0]?.publicKey ? (
+          <SignTransaction network={network} publicKey={stxAddressInfo?.[0].publicKey} />
+        ) : null}
         <SendBtc network={network} />
         <SendInscription network={network} />
         <GetBtcBalance />
-        <MintRunes network={network} addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
-        <EtchRunes network={network} addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
+        <MintRunes network={network} addresses={btcAddressInfo} />
+        <EtchRunes network={network} addresses={btcAddressInfo} />
         <GetRunesBalance />
         <GetInscriptions />
       </Body>

example/src/components/signTransaction/contractCode.ts

@@ -0,0 +1,13 @@
+export const code = `
+(define-data-var greeting (string-ascii 100) "Hello, World!")
+
+(define-read-only (get-greeting)
+  (ok (var-get greeting))
+)
+
+(define-public (set-greeting (new-greeting (string-ascii 100)))
+  (begin
+    (var-set greeting new-greeting)
+    (ok new-greeting))
+)
+`;