makestx-frontend 1.0.0

package/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ['api.dicebear.com'],
+  },
+};
+
+module.exports = nextConfig;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "makestx-frontend",
+  "version": "1.0.0",
+  "private": false,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@stacks/connect": "^7.10.0",
+    "@stacks/network": "^6.13.0",
+    "@stacks/transactions": "^6.17.0",
+    "@stacks/wallet-sdk": "^6.17.0",
+    "lucide-react": "^0.400.0",
+    "next": "14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5"
+  }
+}

package/postcss.config.js

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

package/src/components/NFTCard.tsx

@@ -0,0 +1,64 @@
+import { ExternalLink, Tag } from 'lucide-react';
+
+interface Props {
+  tokenId: number;
+  name: string;
+  image: string;
+  owner?: string;
+  price?: number;
+  isListed?: boolean;
+  onBuy?: () => void;
+}
+
+export default function NFTCard({ tokenId, name, image, owner, price, isListed, onBuy }: Props) {
+  return (
+    <div className="nft-card rounded-none overflow-hidden group cursor-pointer" style={{ clipPath: 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))' }}>
+      {/* Image */}
+      <div className="relative aspect-square overflow-hidden bg-gradient-to-br from-ms-cyan/10 to-ms-magenta/10">
+        <img
+          src={image}
+          alt={name}
+          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-ms-bg/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+        {isListed && (
+          <div className="absolute top-2 right-2">
+            <span className="tag tag-magenta flex items-center gap-1">
+              <Tag size={8} /> LISTED
+            </span>
+          </div>
+        )}
+        <div className="absolute top-2 left-2">
+          <span className="tag tag-cyan">#{tokenId}</span>
+        </div>
+      </div>
+
+      {/* Info */}
+      <div className="p-3 border-t border-ms-border">
+        <p className="text-xs font-display font-bold text-ms-text truncate tracking-wider">{name}</p>
+        {owner && (
+          <p className="text-xs font-mono text-ms-muted mt-0.5 truncate">
+            {owner.slice(0, 8)}...{owner.slice(-4)}
+          </p>
+        )}
+        {isListed && price ? (
+          <div className="flex items-center justify-between mt-2">
+            <span className="text-xs font-mono text-ms-cyan">
+              {(price / 1_000_000).toFixed(2)} STX
+            </span>
+            {onBuy && (
+              <button
+                onClick={onBuy}
+                className="text-xs font-mono text-ms-bg bg-ms-cyan px-2 py-0.5 hover:bg-white transition-colors"
+              >
+                BUY
+              </button>
+            )}
+          </div>
+        ) : (
+          <p className="text-xs font-mono text-ms-muted mt-1">NOT LISTED</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/Navbar.tsx

@@ -0,0 +1,137 @@
+'use client';
+import Link from 'next/link';
+import { useWallet } from '@/hooks/useWallet';
+import { useState } from 'react';
+import { Menu, X, Wallet, LogOut, Copy, Check, Zap } from 'lucide-react';
+
+export default function Navbar() {
+  const { isConnected, address, connect, disconnect } = useWallet();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [copied, setCopied]     = useState(false);
+
+  const short = address ? `${address.slice(0, 6)}...${address.slice(-4)}` : '';
+
+  const copy = () => {
+    if (address) {
+      navigator.clipboard.writeText(address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 border-b border-ms-border bg-ms-bg/90 backdrop-blur-xl">
+      {/* top accent line */}
+      <div className="h-px bg-gradient-to-r from-transparent via-ms-cyan to-transparent opacity-60" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-3 group">
+            <div className="relative w-9 h-9 flex items-center justify-center">
+              <div className="absolute inset-0 border border-ms-cyan opacity-40 group-hover:opacity-100 transition-opacity"
+                   style={{ clipPath: 'polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)' }} />
+              <span className="font-display font-black text-xs text-ms-cyan text-glow-cyan">MS</span>
+            </div>
+            <span className="font-display font-bold text-base tracking-widest text-ms-text group-hover:text-ms-cyan transition-colors">
+              MAKE<span className="text-ms-cyan">STX</span>
+            </span>
+          </Link>
+
+          {/* Desktop Nav */}
+          <div className="hidden md:flex items-center gap-8">
+            {[
+              { href: '/explore',    label: 'EXPLORE' },
+              { href: '/mint',       label: 'MINT' },
+              { href: '/auto-mint',  label: 'AUTO MINT' },
+              { href: '/multi-mint', label: '⚡ MULTI MINT', hot: true },
+            ].map(({ href, label, hot }) => (
+              <Link
+                key={href}
+                href={href}
+                className={
+                  hot
+                    ? 'font-mono text-xs tracking-wider text-ms-magenta hover:text-white border border-ms-magenta/40 hover:border-ms-magenta px-3 py-1.5 transition-all hover:bg-ms-magenta/10'
+                    : 'font-mono text-xs tracking-widest text-ms-muted hover:text-ms-cyan transition-colors'
+                }
+              >
+                {label}
+              </Link>
+            ))}
+            {isConnected && (
+              <Link href="/my-nfts" className="font-mono text-xs tracking-widest text-ms-muted hover:text-ms-cyan transition-colors">
+                MY NFTS
+              </Link>
+            )}
+          </div>
+
+          {/* Wallet */}
+          <div className="hidden md:flex items-center gap-3">
+            {isConnected ? (
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={copy}
+                  className="flex items-center gap-2 px-3 py-1.5 border border-ms-border hover:border-ms-cyan text-xs font-mono text-ms-muted hover:text-ms-cyan transition-all"
+                >
+                  <div className="w-1.5 h-1.5 bg-green-400 animate-pulse" />
+                  {short}
+                  {copied ? <Check size={11} className="text-green-400" /> : <Copy size={11} />}
+                </button>
+                <button
+                  onClick={disconnect}
+                  className="p-2 border border-ms-border hover:border-red-500 text-ms-muted hover:text-red-400 transition-all"
+                  title="Disconnect"
+                >
+                  <LogOut size={15} />
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={connect}
+                className="btn-primary flex items-center gap-2 px-5 py-2"
+              >
+                <Wallet size={13} />
+                <span>CONNECT</span>
+              </button>
+            )}
+          </div>
+
+          {/* Mobile toggle */}
+          <button onClick={() => setMenuOpen(!menuOpen)} className="md:hidden p-2 text-ms-muted hover:text-ms-cyan">
+            {menuOpen ? <X size={20} /> : <Menu size={20} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {menuOpen && (
+        <div className="md:hidden border-t border-ms-border bg-ms-surface px-4 py-4 space-y-3">
+          {[
+            { href: '/explore',    label: 'EXPLORE' },
+            { href: '/mint',       label: 'MINT' },
+            { href: '/auto-mint',  label: 'AUTO MINT' },
+            { href: '/multi-mint', label: '⚡ MULTI MINT' },
+          ].map(({ href, label }) => (
+            <Link key={href} href={href} className="block font-mono text-xs tracking-widest text-ms-muted hover:text-ms-cyan py-2">
+              {label}
+            </Link>
+          ))}
+          {isConnected && (
+            <Link href="/my-nfts" className="block font-mono text-xs tracking-widest text-ms-muted hover:text-ms-cyan py-2">MY NFTS</Link>
+          )}
+          <div className="pt-2 border-t border-ms-border">
+            {isConnected ? (
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-mono text-ms-muted">{short}</span>
+                <button onClick={disconnect} className="text-red-400 text-xs font-mono">DISCONNECT</button>
+              </div>
+            ) : (
+              <button onClick={connect} className="btn-primary w-full py-2 text-xs">CONNECT WALLET</button>
+            )}
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}

package/src/hooks/useContract.ts

@@ -0,0 +1,74 @@
+import {
+  makeContractCall,
+  broadcastTransaction,
+  AnchorMode,
+  PostConditionMode,
+  uintCV,
+  principalCV,
+} from '@stacks/transactions';
+import { openContractCall } from '@stacks/connect';
+import { network, CONTRACT_ADDRESS, CONTRACT_NAME, userSession } from './useWallet';
+
+export function useContractActions() {
+  const mintNFT = async (recipient: string, onFinish?: () => void) => {
+    await openContractCall({
+      contractAddress: CONTRACT_ADDRESS,
+      contractName:    CONTRACT_NAME,
+      functionName:    'mint',
+      functionArgs:    [principalCV(recipient)],
+      network,
+      anchorMode:         AnchorMode.Any,
+      postConditionMode:  PostConditionMode.Allow,
+      onFinish:  (data) => { onFinish?.(); },
+      onCancel:  () => { onFinish?.(); },
+      userSession,
+    });
+  };
+
+  const listNFT = async (tokenId: number, price: number, onFinish?: () => void) => {
+    await openContractCall({
+      contractAddress: CONTRACT_ADDRESS,
+      contractName:    CONTRACT_NAME,
+      functionName:    'list-nft',
+      functionArgs:    [uintCV(tokenId), uintCV(price)],
+      network,
+      anchorMode:         AnchorMode.Any,
+      postConditionMode:  PostConditionMode.Allow,
+      onFinish:  () => { onFinish?.(); },
+      onCancel:  () => { onFinish?.(); },
+      userSession,
+    });
+  };
+
+  const unlistNFT = async (tokenId: number, onFinish?: () => void) => {
+    await openContractCall({
+      contractAddress: CONTRACT_ADDRESS,
+      contractName:    CONTRACT_NAME,
+      functionName:    'unlist-nft',
+      functionArgs:    [uintCV(tokenId)],
+      network,
+      anchorMode:        AnchorMode.Any,
+      postConditionMode: PostConditionMode.Allow,
+      onFinish:  () => { onFinish?.(); },
+      onCancel:  () => { onFinish?.(); },
+      userSession,
+    });
+  };
+
+  const buyNFT = async (tokenId: number, price: number, seller: string, onFinish?: () => void) => {
+    await openContractCall({
+      contractAddress: CONTRACT_ADDRESS,
+      contractName:    CONTRACT_NAME,
+      functionName:    'buy-nft',
+      functionArgs:    [uintCV(tokenId)],
+      network,
+      anchorMode:        AnchorMode.Any,
+      postConditionMode: PostConditionMode.Allow,
+      onFinish:  () => { onFinish?.(); },
+      onCancel:  () => { onFinish?.(); },
+      userSession,
+    });
+  };
+
+  return { mintNFT, listNFT, unlistNFT, buyNFT };
+}

package/src/hooks/useWallet.tsx

@@ -0,0 +1,75 @@
+'use client';
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { AppConfig, UserSession, showConnect } from '@stacks/connect';
+import { StacksMainnet, StacksTestnet } from '@stacks/network';
+
+const appConfig = new AppConfig(['store_write', 'publish_data']);
+export const userSession = new UserSession({ appConfig });
+
+const isMainnet = process.env.NEXT_PUBLIC_STACKS_NETWORK === 'mainnet';
+export const network = isMainnet ? new StacksMainnet() : new StacksTestnet();
+
+export const CONTRACT_ADDRESS = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS || 'SPXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
+export const CONTRACT_NAME    = 'makestx-nft';
+
+interface WalletContextType {
+  isConnected: boolean;
+  address: string | null;
+  connect: () => void;
+  disconnect: () => void;
+  userData: any;
+}
+
+const WalletContext = createContext<WalletContextType>({
+  isConnected: false,
+  address: null,
+  connect: () => {},
+  disconnect: () => {},
+  userData: null,
+});
+
+export function WalletProvider({ children }: { children: React.ReactNode }) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [address, setAddress]         = useState<string | null>(null);
+  const [userData, setUserData]       = useState<any>(null);
+
+  useEffect(() => {
+    if (userSession.isUserSignedIn()) {
+      const data = userSession.loadUserData();
+      setIsConnected(true);
+      setUserData(data);
+      setAddress(isMainnet ? data.profile.stxAddress.mainnet : data.profile.stxAddress.testnet);
+    }
+  }, []);
+
+  const connect = useCallback(() => {
+    showConnect({
+      appDetails: { name: 'MakeSTX', icon: '/logo.png' },
+      redirectTo: '/',
+      onFinish: () => {
+        const data = userSession.loadUserData();
+        setIsConnected(true);
+        setUserData(data);
+        setAddress(isMainnet ? data.profile.stxAddress.mainnet : data.profile.stxAddress.testnet);
+      },
+      userSession,
+    });
+  }, []);
+
+  const disconnect = useCallback(() => {
+    userSession.signUserOut('/');
+    setIsConnected(false);
+    setAddress(null);
+    setUserData(null);
+  }, []);
+
+  return (
+    <WalletContext.Provider value={{ isConnected, address, connect, disconnect, userData }}>
+      {children}
+    </WalletContext.Provider>
+  );
+}
+
+export function useWallet() {
+  return useContext(WalletContext);
+}

package/src/pages/_app.tsx

@@ -0,0 +1,11 @@
+import type { AppProps } from 'next/app';
+import { WalletProvider } from '@/hooks/useWallet';
+import '@/styles/globals.css';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <WalletProvider>
+      <Component {...pageProps} />
+    </WalletProvider>
+  );
+}

package/src/pages/_document.tsx

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <meta name="theme-color" content="#030308" />
+        <meta name="talentapp:project_verification" content="dd37cf261777fe9809a7b7cbdf7ade559547a19fa03f833549a727820fe69b8086867db239c5242994aefae9059143c43b741c1a50a3b482334844a756f345ee" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}