WIP

example/package.json

@@ -16,6 +16,8 @@
     "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",

example/src/App.styles.ts

@@ -10,7 +10,6 @@ export const Container = styled.div({
   minHeight: '100vh',
   backgroundColor: '#282c34',
   color: '#aeaeae',
-  fontSize: 'calc(10px + 1vmin)',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',

example/src/App.tsx

@@ -17,6 +17,7 @@ import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/reac
 import { WalletType } from './components/wallet/WalletType';
 import { GetAccounts } from './components/bitcoin/GetAccounts';
 import { SignMessage } from './components/SignMessage';
+import SignTransaction from './components/stacks/signTransaction';
 
 function AppWithProviders() {
   const queryClient = useQueryClient();
@@ -126,6 +127,15 @@ function AppWithProviders() {
         <EtchRunes network={network} addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
         <GetRunesBalance />
         <GetInscriptions />
+        {(() => {
+          const publicKey = stxAddressInfo[0]?.publicKey;
+
+          if (!publicKey) {
+            return null;
+          }
+
+          return <SignTransaction network={network} publicKey={publicKey} />;
+        })()}
       </Body>
     </Container>
   );

example/src/components/common/Error.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const ErrorMessage = styled.div({
+  color: 'red',
+});

example/src/components/stacks/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))
+)
+`;

example/src/components/stacks/signTransaction/index.tsx

@@ -0,0 +1,189 @@
+import {
+  makeUnsignedContractCall,
+  makeUnsignedContractDeploy,
+  makeUnsignedSTXTokenTransfer,
+  uintCV,
+} from '@stacks/transactions';
+import { BitcoinNetworkType, request } from 'sats-connect';
+import { code } from './contractCode';
+import { bytesToHex } from '@stacks/common';
+import { useMutation } from '@tanstack/react-query';
+import { ErrorMessage } from '../../common/Error';
+import { Button, Card } from '../../../App.styles';
+import { useState } from 'react';
+
+interface Props {
+  network: BitcoinNetworkType;
+  publicKey: string;
+}
+
+const errorMessage = 'Error signing transaction. Check console for error logs.';
+
+function SignTransaction(props: Props) {
+  const [broadcast, setBroadcast] = useState(true);
+
+  const contractCallMutation = useMutation({
+    mutationKey: ['stx_signTransaction', 'contract-call'],
+    mutationFn: async () => {
+      const transaction = await makeUnsignedContractCall({
+        fee: 3000,
+        anchorMode: 'onChainOnly',
+        contractAddress: 'SP21YTSM60CAY6D011EZVEVNKXVW8FVZE198XEFFP',
+        contractName: 'pox-fast-pool-v2',
+        functionName: 'set-stx-buffer',
+        functionArgs: [uintCV(1)],
+        publicKey: props.publicKey,
+      });
+
+      const response = await request('stx_signTransaction', {
+        transaction: bytesToHex(transaction.serialize()),
+      });
+
+      if (response.status === 'error') {
+        throw new Error('Error signing transaction', { cause: response.error });
+      }
+
+      return response.result;
+    },
+  });
+
+  const tokenTransferMutation = useMutation({
+    mutationKey: ['stx_signTransaction', 'token-transfer'],
+    mutationFn: async () => {
+      const transaction = await makeUnsignedSTXTokenTransfer({
+        anchorMode: 'any',
+        fee: 3000,
+        recipient: 'SP2FFKDKR122BZWS7GDPFWC0J0FK4WMW5NPQ0Z21M', // account 4
+        amount: 1000,
+        publicKey: props.publicKey,
+      });
+
+      const response = await request('stx_signTransaction', {
+        transaction: bytesToHex(transaction.serialize()),
+      });
+
+      if (response.status === 'error') {
+        throw new Error('Error signing transaction', { cause: response.error });
+      }
+
+      return response.result;
+    },
+  });
+
+  const contractDeployMutation = useMutation({
+    mutationKey: ['stx_signTransaction', 'contract-deploy'],
+    mutationFn: async () => {
+      const transaction = await makeUnsignedContractDeploy({
+        anchorMode: 'any',
+        contractName: 'my-contract',
+        codeBody: code,
+        fee: 3000,
+        publicKey: props.publicKey,
+      });
+
+      const response = await request('stx_signTransaction', {
+        transaction: bytesToHex(transaction.serialize()),
+      });
+
+      if (response.status === 'error') {
+        throw new Error('Error signing transaction', { cause: response.error });
+      }
+
+      return response.result;
+    },
+  });
+
+  return (
+    <Card>
+      <h3>Sign transaction</h3>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '10px',
+        }}
+      >
+        <div>
+          <label>
+            <input type="checkbox" checked={broadcast} onChange={() => setBroadcast(!broadcast)} />
+            Broadcast transaction after signing
+          </label>
+        </div>
+        <div>
+          <div>
+            <Button style={{ width: '20rem' }} onClick={() => contractCallMutation.mutate()}>
+              Sign Transaction (contract call)
+            </Button>
+          </div>
+          <div>
+            {(() => {
+              if (contractCallMutation.isPending) {
+                return <p>Loading...</p>;
+              }
+
+              if (contractCallMutation.isError) {
+                console.error(contractCallMutation.error);
+                return <ErrorMessage>{errorMessage}</ErrorMessage>;
+              }
+
+              if (contractCallMutation.isSuccess) {
+                console.log(contractCallMutation.data);
+                return <p>Transaction signed successfully. Check console for details.</p>;
+              }
+            })()}
+          </div>
+        </div>
+        <div>
+          <div>
+            <Button style={{ width: '20rem' }} onClick={() => tokenTransferMutation.mutate()}>
+              Sign Transaction (token transfer)
+            </Button>
+          </div>
+          <div>
+            {(() => {
+              if (tokenTransferMutation.isPending) {
+                return <p>Loading...</p>;
+              }
+
+              if (tokenTransferMutation.isError) {
+                console.error(tokenTransferMutation.error);
+                return <ErrorMessage>{errorMessage}</ErrorMessage>;
+              }
+
+              if (tokenTransferMutation.isSuccess) {
+                console.log(tokenTransferMutation.data);
+                return <p>Transaction signed successfully. Check console for details.</p>;
+              }
+            })()}
+          </div>
+        </div>
+        <div>
+          <div>
+            <Button style={{ width: '20rem' }} onClick={() => contractDeployMutation.mutate()}>
+              Sign Transaction (contract deploy)
+            </Button>
+          </div>
+          <div>
+            {(() => {
+              if (contractDeployMutation.isPending) {
+                return <p>Loading...</p>;
+              }
+
+              if (contractDeployMutation.isError) {
+                console.error(contractDeployMutation.error);
+                return <ErrorMessage>{errorMessage}</ErrorMessage>;
+              }
+
+              if (contractDeployMutation.isSuccess) {
+                console.log(contractDeployMutation.data);
+                return <p>Transaction signed successfully. Check console for details.</p>;
+              }
+            })()}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export default SignTransaction;

example/src/components/wallet/WalletType.tsx

@@ -1,11 +1,7 @@
 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',
-});
+import { ErrorMessage } from '../common/Error';
 
 export function WalletType() {
   const { refetch, error, data, isFetching, isError, isSuccess } = useQuery({