@devvmichael/create-stacks-app 0.2.1 → 0.2.3

package/dist/index.js

@@ -1,47 +1,47 @@
 #!/usr/bin/env node
-import { Command } from 'commander';
-import { createCommand } from './commands/create.js';
-import { addCommand } from './commands/add.js';
-import { deployCommand } from './commands/deploy.js';
-import { readFileSync } from 'fs';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
+import { Command } from "commander";
+import { createCommand } from "./commands/create.js";
+import { addCommand } from "./commands/add.js";
+import { deployCommand } from "./commands/deploy.js";
+import { readFileSync } from "fs";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-const packageJsonPath = join(__dirname, '..', 'package.json');
-const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+const packageJsonPath = join(__dirname, "..", "package.json");
+const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
 const program = new Command();
 program
-    .name('create-stacks-app')
-    .description('Scaffold full-stack Stacks blockchain applications')
+    .name("create-stacks-app")
+    .description("Scaffold full-stack Stacks blockchain applications")
     .version(packageJson.version);
 // Main create command (default)
 program
-    .argument('[project-name]', 'Name of the project')
-    .option('-t, --template <name>', 'Template to use (nextjs, react, vue)', 'nextjs')
-    .option('-c, --contracts <list>', 'Contracts to include (counter,token,nft)')
-    .option('--typescript', 'Use TypeScript', true)
-    .option('--no-typescript', 'Use JavaScript')
-    .option('--tailwind', 'Include Tailwind CSS', true)
-    .option('--no-tailwind', 'Skip Tailwind CSS')
-    .option('--no-git', 'Skip Git initialization')
-    .option('--package-manager <pm>', 'Package manager (npm, pnpm, yarn)', 'pnpm')
-    .option('--skip-install', 'Skip dependency installation')
-    .option('-y, --yes', 'Skip prompts, use defaults')
+    .argument("[project-name]", "Name of the project")
+    .option("-t, --template <name>", "Template to use (nextjs, react, vue)")
+    .option("-c, --contracts <list>", "Contracts to include (counter,token,nft)")
+    .option("--typescript", "Use TypeScript")
+    .option("--no-typescript", "Use JavaScript")
+    .option("--tailwind", "Include Tailwind CSS")
+    .option("--no-tailwind", "Skip Tailwind CSS")
+    .option("--no-git", "Skip Git initialization")
+    .option("--package-manager <pm>", "Package manager (npm, pnpm, yarn)")
+    .option("--skip-install", "Skip dependency installation")
+    .option("-y, --yes", "Skip prompts, use defaults")
     .action(createCommand);
 // Add command for contracts and components
 program
-    .command('add <type> <name>')
-    .description('Add a contract or component to existing project')
-    .option('--sip010', 'Create a SIP-010 fungible token contract')
-    .option('--sip009', 'Create a SIP-009 NFT contract')
-    .option('-t, --template <name>', 'Use a specific template (e.g. marketplace, defi)')
+    .command("add <type> <name>")
+    .description("Add a contract or component to existing project")
+    .option("--sip010", "Create a SIP-010 fungible token contract")
+    .option("--sip009", "Create a SIP-009 NFT contract")
+    .option("-t, --template <name>", "Use a specific template (e.g. marketplace, defi)")
     .action(addCommand);
 // Deploy command
 program
-    .command('deploy <network>')
-    .description('Deploy contracts to testnet or mainnet')
-    .option('--private-key <key>', 'Private key for deployment (or use env var)')
+    .command("deploy <network>")
+    .description("Deploy contracts to testnet or mainnet")
+    .option("--private-key <key>", "Private key for deployment (or use env var)")
     .action(deployCommand);
 program.parse();
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAErC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAEtC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC;AAC9D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;AAEvE,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,mBAAmB,CAAC;KACzB,WAAW,CAAC,oDAAoD,CAAC;KACjE,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAEhC,gCAAgC;AAChC,OAAO;KACJ,QAAQ,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;KACjD,MAAM,CAAC,uBAAuB,EAAE,sCAAsC,EAAE,QAAQ,CAAC;KACjF,MAAM,CAAC,wBAAwB,EAAE,0CAA0C,CAAC;KAC5E,MAAM,CAAC,cAAc,EAAE,gBAAgB,EAAE,IAAI,CAAC;KAC9C,MAAM,CAAC,iBAAiB,EAAE,gBAAgB,CAAC;KAC3C,MAAM,CAAC,YAAY,EAAE,sBAAsB,EAAE,IAAI,CAAC;KAClD,MAAM,CAAC,eAAe,EAAE,mBAAmB,CAAC;KAC5C,MAAM,CAAC,UAAU,EAAE,yBAAyB,CAAC;KAC7C,MAAM,CAAC,wBAAwB,EAAE,mCAAmC,EAAE,MAAM,CAAC;KAC7E,MAAM,CAAC,gBAAgB,EAAE,8BAA8B,CAAC;KACxD,MAAM,CAAC,WAAW,EAAE,4BAA4B,CAAC;KACjD,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,2CAA2C;AAC3C,OAAO;KACJ,OAAO,CAAC,mBAAmB,CAAC;KAC5B,WAAW,CAAC,iDAAiD,CAAC;KAC9D,MAAM,CAAC,UAAU,EAAE,0CAA0C,CAAC;KAC9D,MAAM,CAAC,UAAU,EAAE,+BAA+B,CAAC;KACnD,MAAM,CAAC,uBAAuB,EAAE,kDAAkD,CAAC;KACnF,MAAM,CAAC,UAAU,CAAC,CAAC;AAGtB,iBAAiB;AACjB,OAAO;KACJ,OAAO,CAAC,kBAAkB,CAAC;KAC3B,WAAW,CAAC,wCAAwC,CAAC;KACrD,MAAM,CAAC,qBAAqB,EAAE,6CAA6C,CAAC;KAC5E,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,OAAO,CAAC,KAAK,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAErC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAEtC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC;AAC9D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;AAEvE,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,mBAAmB,CAAC;KACzB,WAAW,CAAC,oDAAoD,CAAC;KACjE,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAEhC,gCAAgC;AAChC,OAAO;KACJ,QAAQ,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;KACjD,MAAM,CAAC,uBAAuB,EAAE,sCAAsC,CAAC;KACvE,MAAM,CAAC,wBAAwB,EAAE,0CAA0C,CAAC;KAC5E,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC;KACxC,MAAM,CAAC,iBAAiB,EAAE,gBAAgB,CAAC;KAC3C,MAAM,CAAC,YAAY,EAAE,sBAAsB,CAAC;KAC5C,MAAM,CAAC,eAAe,EAAE,mBAAmB,CAAC;KAC5C,MAAM,CAAC,UAAU,EAAE,yBAAyB,CAAC;KAC7C,MAAM,CAAC,wBAAwB,EAAE,mCAAmC,CAAC;KACrE,MAAM,CAAC,gBAAgB,EAAE,8BAA8B,CAAC;KACxD,MAAM,CAAC,WAAW,EAAE,4BAA4B,CAAC;KACjD,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,2CAA2C;AAC3C,OAAO;KACJ,OAAO,CAAC,mBAAmB,CAAC;KAC5B,WAAW,CAAC,iDAAiD,CAAC;KAC9D,MAAM,CAAC,UAAU,EAAE,0CAA0C,CAAC;KAC9D,MAAM,CAAC,UAAU,EAAE,+BAA+B,CAAC;KACnD,MAAM,CACL,uBAAuB,EACvB,kDAAkD,CACnD;KACA,MAAM,CAAC,UAAU,CAAC,CAAC;AAEtB,iBAAiB;AACjB,OAAO;KACJ,OAAO,CAAC,kBAAkB,CAAC;KAC3B,WAAW,CAAC,wCAAwC,CAAC;KACrD,MAAM,CAAC,qBAAqB,EAAE,6CAA6C,CAAC;KAC5E,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devvmichael/create-stacks-app",
-    "version": "0.2.1",
+    "version": "0.2.3",
     "description": "Scaffold full-stack Stacks blockchain applications",
     "type": "module",
     "main": "./dist/index.js",

package/templates/frontends/nextjs/template/app/providers.tsx

@@ -1,31 +1,13 @@
-'use client';
+"use client";
 
-import { ReactNode } from 'react';
-import { Connect } from '@stacks/connect-react';
-import { userSession } from '@/lib/stacks';
+import { ReactNode } from "react";
 
 interface ProvidersProps {
   children: ReactNode;
 }
 
+// With Stacks Connect v8, no provider wrapper is needed
+// The connect() function handles wallet connection directly
 export function Providers({ children }: ProvidersProps) {
-  const appDetails = {
-    name: 'Stacks App',
-    icon: typeof window !== 'undefined' ? window.location.origin + '/logo.svg' : '/logo.svg',
-  };
-
-  return (
-    <Connect
-      authOptions={{
-        appDetails,
-        redirectTo: '/',
-        onFinish: () => {
-          window.location.reload();
-        },
-        userSession,
-      }}
-    >
-      {children}
-    </Connect>
-  );
+  return <>{children}</>;
 }

package/templates/frontends/nextjs/template/components/wallet/connect-button.tsx

@@ -1,19 +1,9 @@
-'use client';
+"use client";
 
-import { useConnect } from '@stacks/connect-react';
-import { useStacks } from '@/hooks/use-stacks';
+import { useStacks } from "@/hooks/use-stacks";
 
 export function ConnectButton() {
-  const { authenticate } = useConnect();
-  const { userSession, address, isLoading } = useStacks();
-
-  const handleConnect = () => {
-    authenticate();
-  };
-
-  const handleDisconnect = () => {
-    userSession.signUserOut('/');
-  };
+  const { address, isLoading, isConnected, connect, disconnect } = useStacks();
 
   if (isLoading) {
     return (
@@ -23,13 +13,13 @@ export function ConnectButton() {
     );
   }
 
-  if (address) {
+  if (isConnected && address) {
     return (
       <div className="flex items-center gap-3">
         <span className="text-sm bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
           {address.slice(0, 6)}...{address.slice(-4)}
         </span>
-        <button onClick={handleDisconnect} className="btn-secondary text-sm">
+        <button onClick={disconnect} className="btn-secondary text-sm">
           Disconnect
         </button>
       </div>
@@ -37,7 +27,7 @@ export function ConnectButton() {
   }
 
   return (
-    <button onClick={handleConnect} className="btn-primary">
+    <button onClick={connect} className="btn-primary">
       Connect Wallet
     </button>
   );

package/templates/frontends/nextjs/template/hooks/use-contract-call.ts

@@ -1,11 +1,14 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { openContractCall } from '@stacks/connect';
-import { useStacks } from './use-stacks';
-import type { ContractConfig } from '@/lib/contracts';
+import { useState } from "react";
+import { request } from "@/lib/stacks";
+import { useStacks } from "./use-stacks";
+import type { ContractConfig } from "@/lib/contracts";
 
-export function useContractCall(contract: ContractConfig, functionName: string) {
+export function useContractCall(
+  contract: ContractConfig,
+  functionName: string,
+) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const [txId, setTxId] = useState<string | null>(null);
@@ -13,28 +16,26 @@ export function useContractCall(contract: ContractConfig, functionName: string)
 
   const call = async (functionArgs: any[] = []) => {
     if (!address) {
-      throw new Error('Wallet not connected');
+      throw new Error("Wallet not connected");
     }
 
     setIsLoading(true);
     setError(null);
 
     try {
-      await openContractCall({
-        contractAddress: contract.address,
-        contractName: contract.name,
+      // Using Stacks Connect v8 request API
+      const result = await request("stx_callContract", {
+        contract: `${contract.address}.${contract.name}`,
         functionName,
         functionArgs,
-        network: contract.network,
-        postConditions: [],
-        onFinish: (data) => {
-          setTxId(data.txId);
-          console.log('Transaction submitted:', data.txId);
-        },
-        onCancel: () => {
-          setIsLoading(false);
-        },
       });
+
+      if (result?.txId) {
+        setTxId(result.txId);
+        console.log("Transaction submitted:", result.txId);
+      }
+
+      return result;
     } catch (err) {
       setError(err as Error);
       throw err;

package/templates/frontends/nextjs/template/hooks/use-stacks.ts

@@ -1,26 +1,49 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { userSession } from '@/lib/stacks';
+import { useEffect, useState, useCallback } from "react";
+import {
+  getConnectedAddress,
+  checkIsConnected,
+  connectWallet,
+  disconnectWallet,
+} from "@/lib/stacks";
 
 export function useStacks() {
   const [address, setAddress] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
+  // Check connection status on mount
   useEffect(() => {
-    if (userSession.isUserSignedIn()) {
-      const userData = userSession.loadUserData();
-      // Use testnet address by default, mainnet in production
-      const network = process.env.NEXT_PUBLIC_NETWORK === 'mainnet' ? 'mainnet' : 'testnet';
-      setAddress(userData.profile.stxAddress[network]);
-    }
+    const connectedAddress = getConnectedAddress();
+    setAddress(connectedAddress);
+    setIsLoading(false);
+  }, []);
+
+  // Connect handler
+  const connect = useCallback(async () => {
+    setIsLoading(true);
+    const connectedAddress = await connectWallet();
+    setAddress(connectedAddress);
     setIsLoading(false);
+
+    // Reload to sync state
+    if (connectedAddress) {
+      window.location.reload();
+    }
+  }, []);
+
+  // Disconnect handler
+  const disconnect = useCallback(() => {
+    disconnectWallet();
+    setAddress(null);
+    window.location.reload();
   }, []);
 
   return {
-    userSession,
     address,
     isLoading,
-    isConnected: !!address,
+    isConnected: !!address && checkIsConnected(),
+    connect,
+    disconnect,
   };
 }

package/templates/frontends/nextjs/template/lib/contracts.ts

@@ -1,5 +1,5 @@
-import { network } from './stacks';
-import type { StacksNetwork } from '@stacks/network';
+import { network } from "./stacks";
+import type { StacksNetwork } from "@stacks/network";
 
 export interface ContractConfig {
   address: string;
@@ -8,22 +8,24 @@ export interface ContractConfig {
 }
 
 // Contract address from environment or default devnet address
-const contractAddress = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS || 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM';
+const contractAddress =
+  process.env.NEXT_PUBLIC_CONTRACT_ADDRESS ||
+  "ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM";
 
 export const counterContract: ContractConfig = {
   address: contractAddress,
-  name: 'counter',
+  name: "counter",
   network,
 };
 
 export const tokenContract: ContractConfig = {
   address: contractAddress,
-  name: 'token',
+  name: "token",
   network,
 };
 
 export const nftContract: ContractConfig = {
   address: contractAddress,
-  name: 'nft',
+  name: "nft",
   network,
 };

package/templates/frontends/nextjs/template/lib/stacks.ts

@@ -1,18 +1,57 @@
-import { AppConfig, UserSession } from '@stacks/connect';
-import { StacksTestnet, StacksMainnet } from '@stacks/network';
-
-const appConfig = new AppConfig(['store_write', 'publish_data']);
-export const userSession = new UserSession({ appConfig });
+import {
+  connect,
+  disconnect,
+  isConnected,
+  getLocalStorage,
+  request,
+} from "@stacks/connect";
+import { STACKS_TESTNET, STACKS_MAINNET } from "@stacks/network";
 
+// Network configuration
 export const network =
-  process.env.NEXT_PUBLIC_NETWORK === 'mainnet'
-    ? new StacksMainnet()
-    : new StacksTestnet();
+  process.env.NEXT_PUBLIC_NETWORK === "mainnet"
+    ? STACKS_MAINNET
+    : STACKS_TESTNET;
+
+// Get the connected user's address from local storage
+export function getConnectedAddress(): string | null {
+  const storage = getLocalStorage();
+  if (!storage) return null;
+
+  const networkType =
+    process.env.NEXT_PUBLIC_NETWORK === "mainnet" ? "mainnet" : "testnet";
+  return storage.addresses?.[networkType] || null;
+}
+
+// Check if user is connected
+export function checkIsConnected(): boolean {
+  return isConnected();
+}
 
+// Connect wallet
+export async function connectWallet(): Promise<string | null> {
+  try {
+    const response = await connect();
+    return response.addresses?.[0]?.address || null;
+  } catch (error) {
+    console.error("Failed to connect wallet:", error);
+    return null;
+  }
+}
+
+// Disconnect wallet
+export function disconnectWallet(): void {
+  disconnect();
+}
+
+// Get explorer link
 export function getExplorerLink(txId: string): string {
   const baseUrl =
-    process.env.NEXT_PUBLIC_NETWORK === 'mainnet'
-      ? 'https://explorer.stacks.co'
-      : 'https://explorer.stacks.co/?chain=testnet';
+    process.env.NEXT_PUBLIC_NETWORK === "mainnet"
+      ? "https://explorer.stacks.co"
+      : "https://explorer.stacks.co/?chain=testnet";
   return `${baseUrl}/txid/${txId}`;
 }
+
+// Export request for contract calls
+export { request };

package/templates/frontends/nextjs/template/package.json

@@ -10,7 +10,6 @@
     },
     "dependencies": {
         "@stacks/connect": "^8.2.4",
-        "@stacks/connect-react": "^23.1.4",
         "@stacks/network": "^7.3.1",
         "@stacks/transactions": "^7.3.1",
         "next": "^14.2.21",