@devvmichael/create-stacks-app 0.1.0

package/templates/contracts/nft/nft.test.ts

@@ -0,0 +1,204 @@
+import { describe, expect, it } from "vitest";
+import { Cl } from "@stacks/transactions";
+
+const accounts = simnet.getAccounts();
+const deployer = accounts.get("deployer")!;
+const wallet1 = accounts.get("wallet_1")!;
+const wallet2 = accounts.get("wallet_2")!;
+
+describe("NFT Contract (SIP-009)", () => {
+  describe("Minting", () => {
+    it("should mint an NFT successfully", () => {
+      const block = simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+      expect(block.result).toBeOk(Cl.uint(1));
+    });
+
+    it("should increment last token id", () => {
+      simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+
+      const result = simnet.callReadOnlyFn(
+        "nft",
+        "get-last-token-id",
+        [],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.uint(1));
+    });
+
+    it("should store token URI", () => {
+      simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+
+      const result = simnet.callReadOnlyFn(
+        "nft",
+        "get-token-uri",
+        [Cl.uint(1)],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.some(Cl.stringAscii("ipfs://test-uri-1")));
+    });
+  });
+
+  describe("Ownership", () => {
+    it("should return correct owner", () => {
+      simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+
+      const result = simnet.callReadOnlyFn(
+        "nft",
+        "get-owner",
+        [Cl.uint(1)],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.some(Cl.principal(wallet1)));
+    });
+  });
+
+  describe("Transfer", () => {
+    it("should transfer NFT successfully", () => {
+      simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+
+      const block = simnet.callPublicFn(
+        "nft",
+        "transfer",
+        [Cl.uint(1), Cl.principal(wallet1), Cl.principal(wallet2)],
+        wallet1
+      );
+      expect(block.result).toBeOk(Cl.bool(true));
+
+      const result = simnet.callReadOnlyFn(
+        "nft",
+        "get-owner",
+        [Cl.uint(1)],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.some(Cl.principal(wallet2)));
+    });
+
+    it("should fail if sender is not owner", () => {
+      simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+
+      const block = simnet.callPublicFn(
+        "nft",
+        "transfer",
+        [Cl.uint(1), Cl.principal(wallet1), Cl.principal(wallet2)],
+        wallet2
+      );
+      expect(block.result).toBeErr(Cl.uint(101));
+    });
+  });
+
+  describe("Marketplace", () => {
+    it("should list NFT for sale", () => {
+      simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+
+      const block = simnet.callPublicFn(
+        "nft",
+        "list-for-sale",
+        [Cl.uint(1), Cl.uint(1000000)],
+        wallet1
+      );
+      expect(block.result).toBeOk(Cl.bool(true));
+
+      const listing = simnet.callReadOnlyFn(
+        "nft",
+        "get-listing",
+        [Cl.uint(1)],
+        deployer
+      );
+      expect(listing.result).toBeSome(
+        Cl.tuple({
+          price: Cl.uint(1000000),
+          seller: Cl.principal(wallet1),
+        })
+      );
+    });
+
+    it("should allow purchase of listed NFT", () => {
+      simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+
+      simnet.callPublicFn(
+        "nft",
+        "list-for-sale",
+        [Cl.uint(1), Cl.uint(1000000)],
+        wallet1
+      );
+
+      const block = simnet.callPublicFn("nft", "buy", [Cl.uint(1)], wallet2);
+      expect(block.result).toBeOk(Cl.uint(1));
+
+      const result = simnet.callReadOnlyFn(
+        "nft",
+        "get-owner",
+        [Cl.uint(1)],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.some(Cl.principal(wallet2)));
+    });
+
+    it("should unlist NFT", () => {
+      simnet.callPublicFn(
+        "nft",
+        "mint",
+        [Cl.principal(wallet1), Cl.stringAscii("ipfs://test-uri-1")],
+        deployer
+      );
+
+      simnet.callPublicFn(
+        "nft",
+        "list-for-sale",
+        [Cl.uint(1), Cl.uint(1000000)],
+        wallet1
+      );
+
+      const block = simnet.callPublicFn("nft", "unlist", [Cl.uint(1)], wallet1);
+      expect(block.result).toBeOk(Cl.bool(true));
+
+      const listing = simnet.callReadOnlyFn(
+        "nft",
+        "get-listing",
+        [Cl.uint(1)],
+        deployer
+      );
+      expect(listing.result).toBeNone();
+    });
+  });
+});

package/templates/contracts/token/token.clar

@@ -0,0 +1,67 @@
+;; SIP-010 Fungible Token
+;; A standard fungible token implementation
+
+(impl-trait 'SP3FBR2AGK5H9QBDH3EEN6DF8EK8JY7RX8QJ5SVTE.sip-010-trait-ft-standard.sip-010-trait)
+
+;; Token configuration
+(define-constant CONTRACT-OWNER tx-sender)
+(define-constant TOKEN-NAME "MyToken")
+(define-constant TOKEN-SYMBOL "MTK")
+(define-constant TOKEN-DECIMALS u6)
+(define-constant TOKEN-SUPPLY u1000000000000) ;; 1 million tokens with 6 decimals
+
+;; Error codes
+(define-constant ERR-OWNER-ONLY (err u100))
+(define-constant ERR-NOT-TOKEN-OWNER (err u101))
+(define-constant ERR-INSUFFICIENT-BALANCE (err u102))
+
+;; Storage
+(define-fungible-token my-token TOKEN-SUPPLY)
+(define-data-var token-uri (optional (string-utf8 256)) none)
+
+;; Initialize token supply to contract owner
+(ft-mint? my-token TOKEN-SUPPLY CONTRACT-OWNER)
+
+;; SIP-010 Functions
+
+(define-public (transfer (amount uint) (sender principal) (recipient principal) (memo (optional (buff 34))))
+  (begin
+    (asserts! (is-eq tx-sender sender) ERR-NOT-TOKEN-OWNER)
+    (try! (ft-transfer? my-token amount sender recipient))
+    (match memo to-print (print to-print) 0x)
+    (ok true)))
+
+(define-read-only (get-name)
+  (ok TOKEN-NAME))
+
+(define-read-only (get-symbol)
+  (ok TOKEN-SYMBOL))
+
+(define-read-only (get-decimals)
+  (ok TOKEN-DECIMALS))
+
+(define-read-only (get-balance (who principal))
+  (ok (ft-get-balance my-token who)))
+
+(define-read-only (get-total-supply)
+  (ok (ft-get-supply my-token)))
+
+(define-read-only (get-token-uri)
+  (ok (var-get token-uri)))
+
+;; Admin functions
+
+(define-public (set-token-uri (value (string-utf8 256)))
+  (begin
+    (asserts! (is-eq tx-sender CONTRACT-OWNER) ERR-OWNER-ONLY)
+    (ok (var-set token-uri (some value)))))
+
+;; Mint additional tokens (owner only)
+(define-public (mint (amount uint) (recipient principal))
+  (begin
+    (asserts! (is-eq tx-sender CONTRACT-OWNER) ERR-OWNER-ONLY)
+    (ft-mint? my-token amount recipient)))
+
+;; Burn tokens
+(define-public (burn (amount uint))
+  (ft-burn? my-token amount tx-sender))

package/templates/contracts/token/token.test.ts

@@ -0,0 +1,139 @@
+import { describe, expect, it } from "vitest";
+import { Cl } from "@stacks/transactions";
+
+const accounts = simnet.getAccounts();
+const deployer = accounts.get("deployer")!;
+const wallet1 = accounts.get("wallet_1")!;
+const wallet2 = accounts.get("wallet_2")!;
+
+describe("Token Contract (SIP-010)", () => {
+  describe("Token Info", () => {
+    it("should return correct name", () => {
+      const result = simnet.callReadOnlyFn("token", "get-name", [], deployer);
+      expect(result.result).toBeOk(Cl.stringAscii("MyToken"));
+    });
+
+    it("should return correct symbol", () => {
+      const result = simnet.callReadOnlyFn("token", "get-symbol", [], deployer);
+      expect(result.result).toBeOk(Cl.stringAscii("MTK"));
+    });
+
+    it("should return correct decimals", () => {
+      const result = simnet.callReadOnlyFn(
+        "token",
+        "get-decimals",
+        [],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.uint(6));
+    });
+
+    it("should return correct total supply", () => {
+      const result = simnet.callReadOnlyFn(
+        "token",
+        "get-total-supply",
+        [],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.uint(1000000000000));
+    });
+  });
+
+  describe("Balance", () => {
+    it("should have initial supply at deployer", () => {
+      const result = simnet.callReadOnlyFn(
+        "token",
+        "get-balance",
+        [Cl.principal(deployer)],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.uint(1000000000000));
+    });
+
+    it("should have zero balance for new accounts", () => {
+      const result = simnet.callReadOnlyFn(
+        "token",
+        "get-balance",
+        [Cl.principal(wallet1)],
+        deployer
+      );
+      expect(result.result).toBeOk(Cl.uint(0));
+    });
+  });
+
+  describe("Transfer", () => {
+    it("should transfer tokens successfully", () => {
+      const amount = 1000000; // 1 token
+
+      const block = simnet.callPublicFn(
+        "token",
+        "transfer",
+        [
+          Cl.uint(amount),
+          Cl.principal(deployer),
+          Cl.principal(wallet1),
+          Cl.none(),
+        ],
+        deployer
+      );
+      expect(block.result).toBeOk(Cl.bool(true));
+
+      const balance = simnet.callReadOnlyFn(
+        "token",
+        "get-balance",
+        [Cl.principal(wallet1)],
+        deployer
+      );
+      expect(balance.result).toBeOk(Cl.uint(amount));
+    });
+
+    it("should fail if sender is not tx-sender", () => {
+      const block = simnet.callPublicFn(
+        "token",
+        "transfer",
+        [
+          Cl.uint(1000000),
+          Cl.principal(deployer),
+          Cl.principal(wallet2),
+          Cl.none(),
+        ],
+        wallet1
+      );
+      expect(block.result).toBeErr(Cl.uint(101));
+    });
+  });
+
+  describe("Mint", () => {
+    it("should allow owner to mint", () => {
+      const block = simnet.callPublicFn(
+        "token",
+        "mint",
+        [Cl.uint(1000000), Cl.principal(wallet1)],
+        deployer
+      );
+      expect(block.result).toBeOk(Cl.bool(true));
+    });
+
+    it("should prevent non-owner from minting", () => {
+      const block = simnet.callPublicFn(
+        "token",
+        "mint",
+        [Cl.uint(1000000), Cl.principal(wallet1)],
+        wallet1
+      );
+      expect(block.result).toBeErr(Cl.uint(100));
+    });
+  });
+
+  describe("Burn", () => {
+    it("should allow token holder to burn", () => {
+      const block = simnet.callPublicFn(
+        "token",
+        "burn",
+        [Cl.uint(1000000)],
+        deployer
+      );
+      expect(block.result).toBeOk(Cl.bool(true));
+    });
+  });
+});

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

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_NETWORK=testnet
+NEXT_PUBLIC_CONTRACT_ADDRESS=ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM

package/templates/frontends/nextjs/template/app/globals.css

@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+  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-300 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 font-semibold py-2 px-4 rounded-lg transition-colors;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-900 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700;
+}

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

@@ -0,0 +1,36 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Providers } from './providers';
+import { Header } from '@/components/header';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Stacks App',
+  description: 'A full-stack Stacks blockchain application',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>
+          <div className="flex min-h-screen flex-col">
+            <Header />
+            <main className="flex-1 container mx-auto px-4 py-8">
+              {children}
+            </main>
+            <footer className="border-t border-gray-200 dark:border-gray-800 py-6 text-center text-sm text-gray-500">
+              Built with Create Stacks App
+            </footer>
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { CounterInteraction } from '@/components/contracts/counter-interaction';
+
+export default function Home() {
+  return (
+    <div>
+      <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-600 dark: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 />
+      </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-600 dark:text-gray-400">
+              Modify contracts in <code className="bg-gray-100 dark: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-600 dark:text-gray-400">
+              Run <code className="bg-gray-100 dark: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-600 dark:text-gray-400">
+              Run <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">npm run deploy:testnet</code>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { Connect } from '@stacks/connect-react';
+import { userSession } from '@/lib/stacks';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+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>
+  );
+}

package/templates/frontends/nextjs/template/components/contracts/counter-interaction.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useContractCall } from '@/hooks/use-contract-call';
+import { useContractRead } from '@/hooks/use-contract-read';
+import { counterContract } from '@/lib/contracts';
+import { useStacks } from '@/hooks/use-stacks';
+
+export function CounterInteraction() {
+  const { isConnected } = useStacks();
+  const { data: counter, isLoading: isLoadingCounter, refetch } = useContractRead(
+    counterContract,
+    'get-counter'
+  );
+  const { call: increment, isLoading: isIncrementing } = useContractCall(
+    counterContract,
+    'increment'
+  );
+  const { call: decrement, isLoading: isDecrementing } = useContractCall(
+    counterContract,
+    'decrement'
+  );
+
+  const handleIncrement = async () => {
+    try {
+      await increment([]);
+      // Refetch after a delay to allow transaction to process
+      setTimeout(refetch, 2000);
+    } catch (error) {
+      console.error('Increment failed:', error);
+    }
+  };
+
+  const handleDecrement = async () => {
+    try {
+      await decrement([]);
+      setTimeout(refetch, 2000);
+    } catch (error) {
+      console.error('Decrement failed:', error);
+    }
+  };
+
+  const counterValue = counter?.value ?? 0;
+
+  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">
+          {isLoadingCounter ? '...' : counterValue.toString()}
+        </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 || counterValue === 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/nextjs/template/components/header.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { ConnectButton } from '@/components/wallet/connect-button';
+import Link from 'next/link';
+
+export function Header() {
+  return (
+    <header className="border-b border-gray-200 dark:border-gray-800">
+      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
+        <Link 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>
+        </Link>
+        <ConnectButton />
+      </div>
+    </header>
+  );
+}