@devvmichael/create-stacks-app 0.1.0

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { useConnect } from '@stacks/connect-react';
+import { useStacks } from '@/hooks/use-stacks';
+
+export function ConnectButton() {
+  const { authenticate } = useConnect();
+  const { userSession, address, isLoading } = useStacks();
+
+  const handleConnect = () => {
+    authenticate();
+  };
+
+  const handleDisconnect = () => {
+    userSession.signUserOut('/');
+  };
+
+  if (isLoading) {
+    return (
+      <button className="btn-secondary opacity-50" disabled>
+        Loading...
+      </button>
+    );
+  }
+
+  if (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">
+          Disconnect
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <button onClick={handleConnect} className="btn-primary">
+      Connect Wallet
+    </button>
+  );
+}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { useState } from 'react';
+import { openContractCall } from '@stacks/connect';
+import { useStacks } from './use-stacks';
+import type { ContractConfig } from '@/lib/contracts';
+
+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);
+  const { address } = useStacks();
+
+  const call = async (functionArgs: any[] = []) => {
+    if (!address) {
+      throw new Error('Wallet not connected');
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      await openContractCall({
+        contractAddress: contract.address,
+        contractName: contract.name,
+        functionName,
+        functionArgs,
+        network: contract.network,
+        postConditions: [],
+        onFinish: (data) => {
+          setTxId(data.txId);
+          console.log('Transaction submitted:', data.txId);
+        },
+        onCancel: () => {
+          setIsLoading(false);
+        },
+      });
+    } catch (err) {
+      setError(err as Error);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    call,
+    isLoading,
+    error,
+    txId,
+  };
+}

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

@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { callReadOnlyFunction, cvToValue } from '@stacks/transactions';
+import type { ContractConfig } from '@/lib/contracts';
+
+export function useContractRead(
+  contract: ContractConfig,
+  functionName: string,
+  functionArgs: any[] = []
+) {
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await callReadOnlyFunction({
+        contractAddress: contract.address,
+        contractName: contract.name,
+        functionName,
+        functionArgs,
+        network: contract.network,
+        senderAddress: contract.address,
+      });
+
+      setData(cvToValue(result));
+    } catch (err) {
+      setError(err as Error);
+      console.error('Contract read error:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [contract.address, contract.name, contract.network, functionName, functionArgs]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchData,
+  };
+}

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { userSession } from '@/lib/stacks';
+
+export function useStacks() {
+  const [address, setAddress] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  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]);
+    }
+    setIsLoading(false);
+  }, []);
+
+  return {
+    userSession,
+    address,
+    isLoading,
+    isConnected: !!address,
+  };
+}

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

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

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

@@ -0,0 +1,18 @@
+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 });
+
+export const network =
+  process.env.NEXT_PUBLIC_NETWORK === 'mainnet'
+    ? new StacksMainnet()
+    : new StacksTestnet();
+
+export function getExplorerLink(txId: string): string {
+  const baseUrl =
+    process.env.NEXT_PUBLIC_NETWORK === 'mainnet'
+      ? 'https://explorer.stacks.co'
+      : 'https://explorer.stacks.co/?chain=testnet';
+  return `${baseUrl}/txid/${txId}`;
+}

package/templates/frontends/nextjs/template/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

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

@@ -0,0 +1,29 @@
+{
+    "name": "stacks-app-frontend",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@stacks/connect": "^7.8.2",
+        "@stacks/connect-react": "^21.1.1",
+        "@stacks/network": "^6.13.0",
+        "@stacks/transactions": "^6.13.1",
+        "next": "14.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "autoprefixer": "^10.0.1",
+        "postcss": "^8",
+        "tailwindcss": "^3.3.0",
+        "typescript": "^5"
+    }
+}

package/templates/frontends/nextjs/template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/frontends/nextjs/template/public/logo.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#5546FF" d="M16 0L3 8v16l13 8 13-8V8L16 0zm0 4l9 5.5v11L16 26l-9-5.5v-11L16 4z"/>
+</svg>

package/templates/frontends/nextjs/template/tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        stacks: {
+          purple: '#5546FF',
+          'purple-dark': '#3D2DB8',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

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

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/frontends/react/template/.env.example

@@ -0,0 +1,2 @@
+VITE_NETWORK=testnet
+VITE_CONTRACT_ADDRESS=ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM

package/templates/frontends/react/template/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stacks App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/frontends/react/template/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "stacks-app-frontend",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    },
+    "dependencies": {
+        "@stacks/connect": "^7.8.2",
+        "@stacks/network": "^6.13.0",
+        "@stacks/transactions": "^6.13.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.43",
+        "@types/react-dom": "^18.2.17",
+        "@vitejs/plugin-react": "^4.2.1",
+        "autoprefixer": "^10.4.16",
+        "postcss": "^8.4.32",
+        "tailwindcss": "^3.3.6",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.10"
+    }
+}

package/templates/frontends/react/template/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/frontends/react/template/public/logo.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#5546FF" d="M16 0L3 8v16l13 8 13-8V8L16 0zm0 4l9 5.5v11L16 26l-9-5.5v-11L16 4z"/>
+</svg>

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

@@ -0,0 +1,100 @@
+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 });
+
+const network =
+  import.meta.env.VITE_NETWORK === 'mainnet'
+    ? new StacksMainnet()
+    : new StacksTestnet();
+
+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]);
+    }
+  }, []);
+
+  const handleConnect = useCallback(() => {
+    showConnect({
+      appDetails: {
+        name: 'Stacks App',
+        icon: window.location.origin + '/logo.svg',
+      },
+      redirectTo: '/',
+      onFinish: () => {
+        window.location.reload();
+      },
+      userSession,
+    });
+  }, []);
+
+  const handleDisconnect = useCallback(() => {
+    userSession.signUserOut('/');
+  }, []);
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header
+        address={address}
+        onConnect={handleConnect}
+        onDisconnect={handleDisconnect}
+      />
+
+      <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>
+          <p className="text-lg text-gray-400">
+            A full-stack Stacks blockchain application
+          </p>
+        </div>
+
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <CounterInteraction
+            network={network}
+            isConnected={!!address}
+            senderAddress={address}
+          />
+        </div>
+
+        <div className="mt-12 text-center">
+          <h2 className="mb-4 text-2xl font-bold">Get Started</h2>
+          <div className="grid gap-4 md:grid-cols-3 max-w-3xl mx-auto">
+            <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>
+              </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>
+              </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>
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <footer className="border-t border-gray-800 py-6 text-center text-sm text-gray-500">
+        Built with Create Stacks App
+      </footer>
+    </div>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,121 @@
+import { useState, useEffect, useCallback } from 'react';
+import { openContractCall } from '@stacks/connect';
+import { callReadOnlyFunction, cvToValue } from '@stacks/transactions';
+import type { StacksNetwork } from '@stacks/network';
+
+interface CounterInteractionProps {
+  network: StacksNetwork;
+  isConnected: boolean;
+  senderAddress: string | null;
+}
+
+const contractAddress = import.meta.env.VITE_CONTRACT_ADDRESS || 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM';
+const contractName = 'counter';
+
+export function CounterInteraction({ network, isConnected, senderAddress }: CounterInteractionProps) {
+  const [counter, setCounter] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isIncrementing, setIsIncrementing] = useState(false);
+  const [isDecrementing, setIsDecrementing] = useState(false);
+
+  const fetchCounter = useCallback(async () => {
+    try {
+      const result = await callReadOnlyFunction({
+        contractAddress,
+        contractName,
+        functionName: 'get-counter',
+        functionArgs: [],
+        network,
+        senderAddress: contractAddress,
+      });
+      const value = cvToValue(result);
+      setCounter(value?.value ?? 0);
+    } catch (error) {
+      console.error('Failed to fetch counter:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [network]);
+
+  useEffect(() => {
+    fetchCounter();
+  }, [fetchCounter]);
+
+  const handleIncrement = async () => {
+    if (!senderAddress) return;
+    setIsIncrementing(true);
+    try {
+      await openContractCall({
+        contractAddress,
+        contractName,
+        functionName: 'increment',
+        functionArgs: [],
+        network,
+        onFinish: () => {
+          setTimeout(fetchCounter, 2000);
+        },
+      });
+    } catch (error) {
+      console.error('Increment failed:', error);
+    } finally {
+      setIsIncrementing(false);
+    }
+  };
+
+  const handleDecrement = async () => {
+    if (!senderAddress) return;
+    setIsDecrementing(true);
+    try {
+      await openContractCall({
+        contractAddress,
+        contractName,
+        functionName: 'decrement',
+        functionArgs: [],
+        network,
+        onFinish: () => {
+          setTimeout(fetchCounter, 2000);
+        },
+      });
+    } catch (error) {
+      console.error('Decrement failed:', error);
+    } finally {
+      setIsDecrementing(false);
+    }
+  };
+
+  return (
+    <div className="card">
+      <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>
+        <p className="text-sm text-gray-500 mt-2">Current count</p>
+      </div>
+
+      {isConnected ? (
+        <div className="flex gap-2">
+          <button
+            onClick={handleDecrement}
+            disabled={isDecrementing || counter === 0}
+            className="btn-secondary flex-1 disabled:opacity-50"
+          >
+            {isDecrementing ? 'Processing...' : '− Decrement'}
+          </button>
+          <button
+            onClick={handleIncrement}
+            disabled={isIncrementing}
+            className="btn-primary flex-1 disabled:opacity-50"
+          >
+            {isIncrementing ? 'Processing...' : '+ Increment'}
+          </button>
+        </div>
+      ) : (
+        <p className="text-center text-gray-500">
+          Connect your wallet to interact with the contract
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+interface HeaderProps {
+  address: string | null;
+  onConnect: () => void;
+  onDisconnect: () => void;
+}
+
+export function Header({ address, onConnect, onDisconnect }: HeaderProps) {
+  return (
+    <header className="border-b border-gray-800">
+      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
+        <a href="/" className="flex items-center gap-2">
+          <svg
+            className="w-8 h-8 text-stacks-purple"
+            viewBox="0 0 32 32"
+            fill="currentColor"
+          >
+            <path d="M16 0L3 8v16l13 8 13-8V8L16 0zm0 4l9 5.5v11L16 26l-9-5.5v-11L16 4z" />
+          </svg>
+          <span className="font-bold text-xl">Stacks App</span>
+        </a>
+
+        {address ? (
+          <div className="flex items-center gap-3">
+            <span className="text-sm bg-gray-800 px-3 py-1 rounded-full">
+              {address.slice(0, 6)}...{address.slice(-4)}
+            </span>
+            <button onClick={onDisconnect} className="btn-secondary text-sm">
+              Disconnect
+            </button>
+          </div>
+        ) : (
+          <button onClick={onConnect} className="btn-primary">
+            Connect Wallet
+          </button>
+        )}
+      </div>
+    </header>
+  );
+}

package/templates/frontends/react/template/src/index.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+}
+
+.btn-primary {
+    @apply bg-stacks-purple hover:bg-stacks-purple-dark text-white font-semibold py-2 px-4 rounded-lg transition-colors;
+}
+
+.btn-secondary {
+    @apply border border-gray-600 hover:bg-gray-800 font-semibold py-2 px-4 rounded-lg transition-colors;
+}
+
+.card {
+    @apply bg-gray-900 rounded-xl shadow-lg p-6 border border-gray-700;
+}