@devvmichael/create-stacks-app 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devvmichael/create-stacks-app",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "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",