diff --git a/package-lock.json b/package-lock.json
index b321d469..6026944a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33099,7 +33099,7 @@
     },
     "packages/connect": {
       "name": "@stacks/connect",
-      "version": "7.8.0",
+      "version": "7.9.0",
       "license": "MIT",
       "dependencies": {
         "@stacks/auth": "^7.0.0",
@@ -33134,10 +33134,10 @@
     },
     "packages/connect-react": {
       "name": "@stacks/connect-react",
-      "version": "22.5.0",
+      "version": "22.6.0",
       "license": "MIT",
       "dependencies": {
-        "@stacks/connect": "7.8.0",
+        "@stacks/connect": "7.9.0",
         "jsontokens": "^4.0.1"
       },
       "devDependencies": {
diff --git a/packages/connect/src/stories/ConnectPage.tsx b/packages/connect/src/stories/ConnectPage.tsx
index f58bb567..7c26fe48 100644
--- a/packages/connect/src/stories/ConnectPage.tsx
+++ b/packages/connect/src/stories/ConnectPage.tsx
@@ -1,6 +1,13 @@
 import { getSelectedProviderId } from '@stacks/connect-ui';
+import {
+  AnchorMode,
+  ClarityVersion,
+  makeUnsignedContractDeploy,
+  makeUnsignedSTXTokenTransfer,
+} from '@stacks/transactions';
 import { useReducer } from 'react';
-import { disconnect, showConnect, showSignMessage } from '../ui';
+import { disconnect, showConnect, showSignMessage, showSignTransaction } from '../ui';
+import { bytesToHex } from '@stacks/common';
 
 export const ConnectPage = ({ children }: { children?: any }) => {
   const refresh = useReducer(x => x + 1, 0)[1];
@@ -71,6 +78,64 @@ export const ConnectPage = ({ children }: { children?: any }) => {
         >
           <code>disconnect()</code>
         </button>
+
+        <hr />
+
+        <button
+          onClick={() => {
+            const run = async () => {
+              const tx = await makeUnsignedContractDeploy({
+                codeBody: `
+                  (define-public (hello-world)
+                    (ok "hello world"))
+                `,
+                contractName: 'hello-world',
+                publicKey: '024cce41b91566d70ec2ed6eb161c6ef9c277bdc034738318ed06f1d5ba09546d6', // account 1, example wallet
+                clarityVersion: ClarityVersion.Clarity3,
+                network: 'testnet',
+              });
+              const txHex = tx.serialize();
+              console.log('txHex', txHex);
+
+              showSignTransaction({
+                txHex,
+                onFinish: d => {
+                  alert(JSON.stringify(d, null, 2));
+                },
+                onCancel: console.error,
+              });
+            };
+            run().catch(console.error);
+          }}
+        >
+          <code>txHex (contract deploy)</code>
+        </button>
+
+        <button
+          onClick={() => {
+            const run = async () => {
+              const tx = await makeUnsignedSTXTokenTransfer({
+                recipient: 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM',
+                amount: '100000',
+                publicKey: '024cce41b91566d70ec2ed6eb161c6ef9c277bdc034738318ed06f1d5ba09546d6', // account 1, example wallet
+                network: 'testnet',
+              });
+              const txHex = tx.serialize();
+              console.log('txHex', txHex);
+
+              showSignTransaction({
+                txHex,
+                onFinish: d => {
+                  alert(JSON.stringify(d, null, 2));
+                },
+                onCancel: console.error,
+              });
+            };
+            run().catch(console.error);
+          }}
+        >
+          <code>txHex (stx transfer)</code>
+        </button>
       </div>
 
       {children}