@devvmichael/create-stacks-app 0.2.3 → 0.2.4

package/README.md

@@ -50,13 +50,13 @@ npx @devvmichael/create-stacks-app
 npx @devvmichael/create-stacks-app my-dapp [options]
 
 Options:
-  -t, --template <name>      Frontend template: nextjs, react, vue (default: nextjs)
+  -t, --template <name>      Frontend template: nextjs, react, vue
   -c, --contracts <list>     Contracts to include: counter,token,nft
   --typescript               Use TypeScript (default: true)
   --no-typescript            Use JavaScript
   --tailwind                 Include Tailwind CSS (default: true)
   --no-git                   Skip Git initialization
-  --package-manager <pm>     Package manager: npm, pnpm, yarn (default: pnpm)
+  --package-manager <pm>     Package manager: npm, pnpm, yarn
   --skip-install             Skip dependency installation
   -y, --yes                  Skip prompts, use defaults
 ```

package/dist/utils/clarinet.d.ts

@@ -1,4 +1,4 @@
-import type { ProjectConfig } from '../types/index.js';
+import type { ProjectConfig } from "../types/index.js";
 export declare function checkClarinetInstallation(): Promise<boolean>;
 export declare function initializeClarinet(config: ProjectConfig): Promise<void>;
 export declare function updateClarinetConfig(projectPath: string, contracts: string[]): Promise<void>;

package/dist/utils/clarinet.js

@@ -1,12 +1,12 @@
-import { exec } from 'child_process';
-import { promisify } from 'util';
-import ora from 'ora';
-import path from 'path';
-import fs from 'fs-extra';
+import { exec } from "child_process";
+import { promisify } from "util";
+import ora from "ora";
+import path from "path";
+import fs from "fs-extra";
 const execAsync = promisify(exec);
 export async function checkClarinetInstallation() {
     try {
-        await execAsync('clarinet --version');
+        await execAsync("clarinet --version");
         return true;
     }
     catch {
@@ -14,50 +14,42 @@ export async function checkClarinetInstallation() {
     }
 }
 export async function initializeClarinet(config) {
-    const spinner = ora('Initializing Clarinet...').start();
+    const spinner = ora("Initializing Clarinet...").start();
     try {
         const { projectPath, projectName } = config;
-        // Create Clarinet.toml manually instead of using clarinet new
-        const clarinetToml = `[project]
-name = "${projectName}"
-description = ""
-authors = []
-telemetry = false
-cache_dir = "./.cache"
-
-[contracts]
-`;
-        await fs.writeFile(path.join(projectPath, 'Clarinet.toml'), clarinetToml);
-        // Create settings directory
-        await fs.ensureDir(path.join(projectPath, 'settings'));
-        // Create Devnet.toml
-        const devnetToml = `[network]
-name = "devnet"
-deployment_fee_rate = 10
-
-[accounts.deployer]
-mnemonic = "twice particular affair smile push picture miss direct toss brass expose better"
-balance = 10_000_000_000_000_000
-
-[accounts.wallet_1]
-mnemonic = "sell invite acquire kitten believe struggle find damp current debris convince key"
-balance = 10_000_000_000_000_000
-
-[accounts.wallet_2]
-mnemonic = "hold excess usual excess ring elephant install account glad dry display sauce"
-balance = 10_000_000_000_000_000
-`;
-        await fs.writeFile(path.join(projectPath, 'settings', 'Devnet.toml'), devnetToml);
-        spinner.succeed('Clarinet initialized');
+        // Create a temporary directory for Clarinet initialization
+        const tempDir = path.join(projectPath, ".temp_clarinet");
+        await fs.ensureDir(tempDir);
+        // Run clarinet new in temp directory
+        try {
+            await execAsync(`cd "${tempDir}" && clarinet new "${projectName}"`);
+        }
+        catch (e) {
+            // If clarinet new fails, it might be because of directory structure
+            // specific error handling could be added here
+            throw new Error(`Clarinet initialization failed: ${e.message}`);
+        }
+        const sourceDir = path.join(tempDir, projectName);
+        // Copy generated Clarinet.toml
+        if (await fs.pathExists(path.join(sourceDir, "Clarinet.toml"))) {
+            await fs.copy(path.join(sourceDir, "Clarinet.toml"), path.join(projectPath, "Clarinet.toml"));
+        }
+        // Copy settings directory (Devnet.toml)
+        if (await fs.pathExists(path.join(sourceDir, "settings"))) {
+            await fs.copy(path.join(sourceDir, "settings"), path.join(projectPath, "settings"));
+        }
+        // Cleanup temp directory
+        await fs.remove(tempDir);
+        spinner.succeed("Clarinet initialized");
     }
     catch (error) {
-        spinner.fail('Failed to initialize Clarinet');
+        spinner.fail("Failed to initialize Clarinet");
         throw error;
     }
 }
 export async function updateClarinetConfig(projectPath, contracts) {
-    const clarinetTomlPath = path.join(projectPath, 'Clarinet.toml');
-    let tomlContent = await fs.readFile(clarinetTomlPath, 'utf-8');
+    const clarinetTomlPath = path.join(projectPath, "Clarinet.toml");
+    let tomlContent = await fs.readFile(clarinetTomlPath, "utf-8");
     // Add contracts based on selection
     for (const contract of contracts) {
         tomlContent += `

package/dist/utils/clarinet.js.map

@@ -1 +1 @@
-{"version":3,"file":"clarinet.js","sourceRoot":"","sources":["../../src/utils/clarinet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AACjC,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,UAAU,CAAC;AAG1B,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AAElC,MAAM,CAAC,KAAK,UAAU,yBAAyB;IAC7C,IAAI,CAAC;QACH,MAAM,SAAS,CAAC,oBAAoB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,kBAAkB,CAAC,MAAqB;IAC5D,MAAM,OAAO,GAAG,GAAG,CAAC,0BAA0B,CAAC,CAAC,KAAK,EAAE,CAAC;IAExD,IAAI,CAAC;QACH,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC;QAE5C,8DAA8D;QAC9D,MAAM,YAAY,GAAG;UACf,WAAW;;;;;;;CAOpB,CAAC;QAEE,MAAM,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,eAAe,CAAC,EAAE,YAAY,CAAC,CAAC;QAE1E,4BAA4B;QAC5B,MAAM,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;QAEvD,qBAAqB;QACrB,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;CAetB,CAAC;QAEE,MAAM,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,EAAE,aAAa,CAAC,EAAE,UAAU,CAAC,CAAC;QAElF,OAAO,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAC1C,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;QAC9C,MAAM,KAAK,CAAC;IACd,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,oBAAoB,CACxC,WAAmB,EACnB,SAAmB;IAEnB,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAEjE,IAAI,WAAW,GAAG,MAAM,EAAE,CAAC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;IAE/D,mCAAmC;IACnC,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;QACjC,WAAW,IAAI;aACN,QAAQ;oBACD,QAAQ;;;CAG3B,CAAC;IACA,CAAC;IAED,MAAM,EAAE,CAAC,SAAS,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;AACpD,CAAC"}
+{"version":3,"file":"clarinet.js","sourceRoot":"","sources":["../../src/utils/clarinet.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/templates/frontends/react/template/src/App.tsx

@@ -1,14 +1,11 @@
-import { useState, useEffect, useCallback } from 'react';
-import { AppConfig, UserSession, showConnect } from '@stacks/connect';
-import { StacksTestnet, StacksMainnet } from '@stacks/network';
-import { Header } from './components/Header';
-import { CounterInteraction } from './components/CounterInteraction';
-
-const appConfig = new AppConfig(['store_write', 'publish_data']);
-const userSession = new UserSession({ appConfig });
+import { useState, useEffect, useCallback } from "react";
+import { connect, disconnect, getLocalStorage } from "@stacks/connect";
+import { StacksTestnet, StacksMainnet } from "@stacks/network";
+import { Header } from "./components/Header";
+import { CounterInteraction } from "./components/CounterInteraction";
 
 const network =
-  import.meta.env.VITE_NETWORK === 'mainnet'
+  import.meta.env.VITE_NETWORK === "mainnet"
     ? new StacksMainnet()
     : new StacksTestnet();
 
@@ -16,29 +13,34 @@ function App() {
   const [address, setAddress] = useState<string | null>(null);
 
   useEffect(() => {
-    if (userSession.isUserSignedIn()) {
-      const userData = userSession.loadUserData();
-      const networkKey = import.meta.env.VITE_NETWORK === 'mainnet' ? 'mainnet' : 'testnet';
-      setAddress(userData.profile.stxAddress[networkKey]);
+    // Check local storage for existing session
+    const storage = getLocalStorage();
+    const networkKey =
+      import.meta.env.VITE_NETWORK === "mainnet" ? "mainnet" : "testnet";
+    if (storage?.addresses?.[networkKey]) {
+      setAddress(storage.addresses[networkKey]);
     }
   }, []);
 
-  const handleConnect = useCallback(() => {
-    showConnect({
-      appDetails: {
-        name: 'Stacks App',
-        icon: window.location.origin + '/logo.svg',
-      },
-      redirectTo: '/',
-      onFinish: () => {
+  const handleConnect = useCallback(async () => {
+    try {
+      const response = await connect();
+      // Access the first address from the response
+      const userAddress = response.addresses?.[0]?.address;
+      if (userAddress) {
+        setAddress(userAddress);
+        // Optional: reload if needed to reset state, or handle reactively
         window.location.reload();
-      },
-      userSession,
-    });
+      }
+    } catch (error) {
+      console.error("Failed to connect:", error);
+    }
   }, []);
 
   const handleDisconnect = useCallback(() => {
-    userSession.signUserOut('/');
+    disconnect();
+    setAddress(null);
+    window.location.reload();
   }, []);
 
   return (
@@ -51,7 +53,9 @@ function App() {
 
       <main className="flex-1 container mx-auto px-4 py-8">
         <div className="mb-8 text-center">
-          <h1 className="mb-4 text-4xl font-bold">Welcome to Your Stacks App</h1>
+          <h1 className="mb-4 text-4xl font-bold">
+            Welcome to Your Stacks App
+          </h1>
           <p className="text-lg text-gray-400">
             A full-stack Stacks blockchain application
           </p>
@@ -71,19 +75,24 @@ function App() {
             <div className="card">
               <h3 className="font-semibold mb-2">📝 Edit Contracts</h3>
               <p className="text-sm text-gray-400">
-                Modify contracts in <code className="bg-gray-800 px-1 rounded">contracts/</code>
+                Modify contracts in{" "}
+                <code className="bg-gray-800 px-1 rounded">contracts/</code>
               </p>
             </div>
             <div className="card">
               <h3 className="font-semibold mb-2">🧪 Run Tests</h3>
               <p className="text-sm text-gray-400">
-                Run <code className="bg-gray-800 px-1 rounded">npm run test</code>
+                Run{" "}
+                <code className="bg-gray-800 px-1 rounded">npm run test</code>
               </p>
             </div>
             <div className="card">
               <h3 className="font-semibold mb-2">🚀 Deploy</h3>
               <p className="text-sm text-gray-400">
-                Run <code className="bg-gray-800 px-1 rounded">npm run deploy:testnet</code>
+                Run{" "}
+                <code className="bg-gray-800 px-1 rounded">
+                  npm run deploy:testnet
+                </code>
               </p>
             </div>
           </div>

package/templates/frontends/react/template/src/components/CounterInteraction.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect, useCallback } from 'react';
-import { openContractCall } from '@stacks/connect';
-import { callReadOnlyFunction, cvToValue } from '@stacks/transactions';
-import type { StacksNetwork } from '@stacks/network';
+import { useState, useEffect, useCallback } from "react";
+import { request } from "@stacks/connect";
+import { callReadOnlyFunction, cvToValue } from "@stacks/transactions";
+import type { StacksNetwork } from "@stacks/network";
 
 interface CounterInteractionProps {
   network: StacksNetwork;
@@ -9,10 +9,16 @@ interface CounterInteractionProps {
   senderAddress: string | null;
 }
 
-const contractAddress = import.meta.env.VITE_CONTRACT_ADDRESS || 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM';
-const contractName = 'counter';
+const contractAddress =
+  import.meta.env.VITE_CONTRACT_ADDRESS ||
+  "ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM";
+const contractName = "counter";
 
-export function CounterInteraction({ network, isConnected, senderAddress }: CounterInteractionProps) {
+export function CounterInteraction({
+  network,
+  isConnected,
+  senderAddress,
+}: CounterInteractionProps) {
   const [counter, setCounter] = useState<number | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isIncrementing, setIsIncrementing] = useState(false);
@@ -23,15 +29,15 @@ export function CounterInteraction({ network, isConnected, senderAddress }: Coun
       const result = await callReadOnlyFunction({
         contractAddress,
         contractName,
-        functionName: 'get-counter',
+        functionName: "get-counter",
         functionArgs: [],
         network,
         senderAddress: contractAddress,
       });
       const value = cvToValue(result);
-      setCounter(value?.value ?? 0);
+      setCounter(value?.value ? Number(value.value) : 0);
     } catch (error) {
-      console.error('Failed to fetch counter:', error);
+      console.error("Failed to fetch counter:", error);
     } finally {
       setIsLoading(false);
     }
@@ -45,18 +51,16 @@ export function CounterInteraction({ network, isConnected, senderAddress }: Coun
     if (!senderAddress) return;
     setIsIncrementing(true);
     try {
-      await openContractCall({
-        contractAddress,
-        contractName,
-        functionName: 'increment',
+      await request("stx_callContract", {
+        contract: `${contractAddress}.${contractName}`,
+        functionName: "increment",
         functionArgs: [],
-        network,
-        onFinish: () => {
-          setTimeout(fetchCounter, 2000);
-        },
+        postConditions: [],
       });
+
+      setTimeout(fetchCounter, 2000);
     } catch (error) {
-      console.error('Increment failed:', error);
+      console.error("Increment failed:", error);
     } finally {
       setIsIncrementing(false);
     }
@@ -66,18 +70,16 @@ export function CounterInteraction({ network, isConnected, senderAddress }: Coun
     if (!senderAddress) return;
     setIsDecrementing(true);
     try {
-      await openContractCall({
-        contractAddress,
-        contractName,
-        functionName: 'decrement',
+      await request("stx_callContract", {
+        contract: `${contractAddress}.${contractName}`,
+        functionName: "decrement",
         functionArgs: [],
-        network,
-        onFinish: () => {
-          setTimeout(fetchCounter, 2000);
-        },
+        postConditions: [],
       });
+
+      setTimeout(fetchCounter, 2000);
     } catch (error) {
-      console.error('Decrement failed:', error);
+      console.error("Decrement failed:", error);
     } finally {
       setIsDecrementing(false);
     }
@@ -88,8 +90,8 @@ export function CounterInteraction({ network, isConnected, senderAddress }: Coun
       <h2 className="text-2xl font-bold mb-4">Counter Contract</h2>
 
       <div className="mb-6 text-center">
-        <div className="text-6xl font-bold text-stacks-purple">
-          {isLoading ? '...' : counter}
+        <div className="text-6xl font-bold text-gray-100">
+          {isLoading ? "..." : counter}
         </div>
         <p className="text-sm text-gray-500 mt-2">Current count</p>
       </div>
@@ -101,14 +103,14 @@ export function CounterInteraction({ network, isConnected, senderAddress }: Coun
             disabled={isDecrementing || counter === 0}
             className="btn-secondary flex-1 disabled:opacity-50"
           >
-            {isDecrementing ? 'Processing...' : '− Decrement'}
+            {isDecrementing ? "Processing..." : "− Decrement"}
           </button>
           <button
             onClick={handleIncrement}
             disabled={isIncrementing}
             className="btn-primary flex-1 disabled:opacity-50"
           >
-            {isIncrementing ? 'Processing...' : '+ Increment'}
+            {isIncrementing ? "Processing..." : "+ Increment"}
           </button>
         </div>
       ) : (

package/templates/frontends/vue/template/src/App.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { AppConfig, UserSession, showConnect } from '@stacks/connect';
+import { connect, disconnect, getLocalStorage } from '@stacks/connect';
 import { StacksTestnet, StacksMainnet } from '@stacks/network';
 import AppHeader from './components/AppHeader.vue';
 import CounterInteraction from './components/CounterInteraction.vue';
 
-const appConfig = new AppConfig(['store_write', 'publish_data']);
-const userSession = new UserSession({ appConfig });
-
 const network =
   import.meta.env.VITE_NETWORK === 'mainnet'
     ? new StacksMainnet()
@@ -16,29 +13,30 @@ const network =
 const address = ref<string | null>(null);
 
 onMounted(() => {
-  if (userSession.isUserSignedIn()) {
-    const userData = userSession.loadUserData();
-    const networkKey = import.meta.env.VITE_NETWORK === 'mainnet' ? 'mainnet' : 'testnet';
-    address.value = userData.profile.stxAddress[networkKey];
+  const storage = getLocalStorage();
+  const networkKey = import.meta.env.VITE_NETWORK === 'mainnet' ? 'mainnet' : 'testnet';
+  if (storage?.addresses?.[networkKey]) {
+    address.value = storage.addresses[networkKey];
   }
 });
 
-function handleConnect() {
-  showConnect({
-    appDetails: {
-      name: 'Stacks App',
-      icon: window.location.origin + '/logo.svg',
-    },
-    redirectTo: '/',
-    onFinish: () => {
+async function handleConnect() {
+  try {
+    const response = await connect();
+    const userAddress = response.addresses?.[0]?.address;
+    if (userAddress) {
+      address.value = userAddress;
       window.location.reload();
-    },
-    userSession,
-  });
+    }
+  } catch (error) {
+    console.error('Failed to connect:', error);
+  }
 }
 
 function handleDisconnect() {
-  userSession.signUserOut('/');
+  disconnect();
+  address.value = null;
+  window.location.reload();
 }
 </script>
 

package/templates/frontends/vue/template/src/components/CounterInteraction.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { openContractCall } from '@stacks/connect';
+import { request } from '@stacks/connect';
 import { callReadOnlyFunction, cvToValue } from '@stacks/transactions';
 import type { StacksNetwork } from '@stacks/network';
 
@@ -29,7 +29,8 @@ async function fetchCounter() {
       senderAddress: contractAddress,
     });
     const value = cvToValue(result);
-    counter.value = value?.value ?? 0;
+    // Handle both bigint (Stacks returns bigint now often) and number types safely
+    counter.value = value?.value ? Number(value.value) : 0;
   } catch (error) {
     console.error('Failed to fetch counter:', error);
   } finally {
@@ -45,16 +46,15 @@ async function handleIncrement() {
   if (!props.senderAddress) return;
   isIncrementing.value = true;
   try {
-    await openContractCall({
-      contractAddress,
-      contractName,
+    await request('stx_callContract', {
+      contract: `${contractAddress}.${contractName}`,
       functionName: 'increment',
       functionArgs: [],
-      network: props.network,
-      onFinish: () => {
-        setTimeout(fetchCounter, 2000);
-      },
+      postConditions: [],
     });
+    
+    // Speculatively refetch
+    setTimeout(fetchCounter, 2000);
   } catch (error) {
     console.error('Increment failed:', error);
   } finally {
@@ -66,16 +66,14 @@ async function handleDecrement() {
   if (!props.senderAddress) return;
   isDecrementing.value = true;
   try {
-    await openContractCall({
-      contractAddress,
-      contractName,
+    await request('stx_callContract', {
+      contract: `${contractAddress}.${contractName}`,
       functionName: 'decrement',
       functionArgs: [],
-      network: props.network,
-      onFinish: () => {
-        setTimeout(fetchCounter, 2000);
-      },
+      postConditions: [],
     });
+    
+    setTimeout(fetchCounter, 2000);
   } catch (error) {
     console.error('Decrement failed:', error);
   } finally {
@@ -89,7 +87,7 @@ async function handleDecrement() {
     <h2 class="text-2xl font-bold mb-4">Counter Contract</h2>
 
     <div class="mb-6 text-center">
-      <div class="text-6xl font-bold text-stacks-purple">
+      <div class="text-6xl font-bold text-gray-100">
         {{ isLoading ? '...' : counter }}
       </div>
       <p class="text-sm text-gray-500 mt-2">Current count</p>