DevSolex · DevSolex · Feb 17, 2026 · Feb 17, 2026 · Feb 17, 2026 · Feb 17, 2026
diff --git a/frontend/.nvmrc b/frontend/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/frontend/README.md b/frontend/README.md
@@ -1 +1,17 @@
-# Final Frontend Polishing
+# S-pay Frontend
+
+Next.js frontend for S-pay protocol.
+
+## Setup
+
+```bash
+npm install
+npm run dev
+```
+
+## Features
+
+- Connect wallet (Leather, Xverse)
+- Register user / merchant
+- Process payments, vault deposit
+- Read-only contract queries
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -2,10 +2,13 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { StacksProvider } from "@/context/StacksContext";
 import Navbar from "@/components/Navbar/Navbar";
+import { Footer } from "@/components/Footer/Footer";
 
 export const metadata: Metadata = {
   title: "S-pay | Premium Stacks Payments",
   description: "Experience the future of decentralized payments on Stacks.",
+  keywords: ["Stacks", "Bitcoin", "payments", "crypto", "decentralized"],
+  openGraph: { title: "S-pay | Premium Stacks Payments", description: "Fast, decentralized payments on Stacks." },
 };
 
 export default function RootLayout({
@@ -20,10 +23,11 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
       </head>
-      <body>
+      <body style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
         <StacksProvider>
           <Navbar />
-          {children}
+          <main style={{ flex: 1 }}>{children}</main>
+          <Footer />
         </StacksProvider>
       </body>
     </html>

diff --git a/frontend/app/merchant/register/page.tsx b/frontend/app/merchant/register/page.tsx
@@ -8,7 +8,7 @@ export default function MerchantRegisterPage() {
     <div className={styles.page}>
       <h1 className={styles.title}>Register as Merchant</h1>
       <p className={styles.subtitle}>
-        Requires 50 STX verification stake (register-merchant)
+        Requires 50 STX verification stake. Refundable after verification.
       </p>
       <RegisterMerchantForm />
     </div>

diff --git a/frontend/app/pay/page.tsx b/frontend/app/pay/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { PaymentForm } from "@/components/PaymentForm/PaymentForm";
+import { SPAY_FULL_CONTRACT } from "@/lib/constants";
 import styles from "./pay.module.css";
 
 export default function PayPage() {
@@ -10,6 +11,7 @@ export default function PayPage() {
       <p className={styles.subtitle}>
         Send STX via S-pay protocol (process-payment)
       </p>
+      <p className={styles.contract}>Contract: {SPAY_FULL_CONTRACT}</p>
       <PaymentForm />
     </div>
   );

diff --git a/frontend/app/pay/pay.module.css b/frontend/app/pay/pay.module.css
@@ -14,5 +14,12 @@
 
 .subtitle {
   color: #a0a0aa;
+  margin-bottom: 0.5rem;
+}
+
+.contract {
+  font-size: 0.8rem;
+  font-family: monospace;
+  color: #6b6b7b;
   margin-bottom: 2rem;
 }
diff --git a/frontend/app/register/page.tsx b/frontend/app/register/page.tsx
@@ -1,15 +1,24 @@
 "use client";
 
+import Link from "next/link";
 import { RegisterUserForm } from "@/components/RegisterUserForm/RegisterUserForm";
+import { useStacks } from "@/context/StacksContext";
 import styles from "./register.module.css";
 
 export default function RegisterPage() {
+  const { address } = useStacks();
+
   return (
     <div className={styles.page}>
       <h1 className={styles.title}>Register as User</h1>
       <p className={styles.subtitle}>
         Pick a unique username to join S-pay (string-ascii 24 max)
       </p>
+      {!address && (
+        <p className={styles.cta}>
+          <Link href="/">Connect your wallet</Link> to get started.
+        </p>
+      )}
       <RegisterUserForm />
     </div>
   );

diff --git a/frontend/app/register/register.module.css b/frontend/app/register/register.module.css
@@ -14,5 +14,15 @@
 
 .subtitle {
   color: #a0a0aa;
+  margin-bottom: 1rem;
+}
+
+.cta {
+  color: var(--primary);
   margin-bottom: 2rem;
 }
+
+.cta a {
+  color: inherit;
+  text-decoration: underline;
+}
diff --git a/frontend/app/vault/page.tsx b/frontend/app/vault/page.tsx
@@ -8,7 +8,7 @@ export default function VaultPage() {
     <div className={styles.page}>
       <h1 className={styles.title}>Vault Deposit</h1>
       <p className={styles.subtitle}>
-        Deposit STX to your S-pay vault (vault-deposit)
+        Deposit STX to your S-pay vault. Minimum 0.000001 STX.
       </p>
       <VaultDepositForm />
     </div>

diff --git a/frontend/components/Button/Button.tsx b/frontend/components/Button/Button.tsx
@@ -23,18 +23,3 @@ export default function Button({
     </button>
   );
 }
-// Feature extension 36
-// Feature extension 37
-// Feature extension 38
-// Feature extension 39
-// Feature extension 40
-// Feature extension 41
-// Feature extension 42
-// Feature extension 43
-// Feature extension 44
-// Feature extension 45
-// Feature extension 46
-// Feature extension 47
-// Feature extension 48
-// Feature extension 49
-// Feature extension 50
diff --git a/frontend/components/ConnectWallet/ConnectWallet.test.tsx b/frontend/components/ConnectWallet/ConnectWallet.test.tsx
@@ -0,0 +1,6 @@
+/**
+ * ConnectWallet component tests placeholder.
+ * Add tests with React Testing Library.
+ */
+
+export const placeholder = true;
diff --git a/frontend/components/ConnectWallet/ConnectWallet.tsx b/frontend/components/ConnectWallet/ConnectWallet.tsx
@@ -1,24 +1,45 @@
 "use client";
 
+import { useState } from "react";
 import { useStacks } from "@/context/StacksContext";
+import { shortenAddress } from "@/lib/utils";
 import styles from "./ConnectWallet.module.css";
 
 export function ConnectWallet() {
   const { address, handleConnect, handleDisconnect } = useStacks();
+  const [connecting, setConnecting] = useState(false);
+
+  const onConnect = async () => {
+    setConnecting(true);
+    try {
+      await handleConnect();
+    } finally {
+      setConnecting(false);
+    }
+  };
 
   return (
     <div className={styles.actions}>
       {address ? (
         <>
-          <span className={styles.address}>{address.slice(0, 6)}…{address.slice(-4)}</span>
-          <button className={styles.secondaryBtn} onClick={handleDisconnect}>
+          <span className={styles.address}>{shortenAddress(address)}</span>
+          <button
+            className={styles.secondaryBtn}
+            onClick={handleDisconnect}
+            aria-label="Disconnect wallet"
+          >
             Disconnect
           </button>
         </>
       ) : (
         <>
-          <button className={styles.primaryBtn} onClick={handleConnect}>
-            Connect Wallet
+          <button
+            className={styles.primaryBtn}
+            onClick={onConnect}
+            disabled={connecting}
+            aria-label="Connect wallet"
+          >
+            {connecting ? "Connecting…" : "Connect Wallet"}
           </button>
           <button className={styles.secondaryBtn}>Learn More</button>
         </>

diff --git a/frontend/components/Footer/Footer.module.css b/frontend/components/Footer/Footer.module.css
@@ -0,0 +1,27 @@
+.footer {
+  margin-top: auto;
+  padding: 2rem;
+  text-align: center;
+  border-top: 1px solid var(--glass-border);
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 1rem;
+}
+
+.links a {
+  color: #a0a0aa;
+  text-decoration: none;
+}
+
+.links a:hover {
+  color: var(--foreground);
+}
+
+.copyright {
+  font-size: 0.85rem;
+  color: #6b6b7b;
+}
diff --git a/frontend/components/Footer/Footer.tsx b/frontend/components/Footer/Footer.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import Link from "next/link";
+import styles from "./Footer.module.css";
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.links}>
+        <Link href="/">Home</Link>
+        <Link href="/docs">Docs</Link>
+        <a href="https://github.com/DevSolex/S-pay" target="_blank" rel="noopener noreferrer">
+          GitHub
+        </a>
+      </div>
+      <p className={styles.copyright}>© {new Date().getFullYear()} S-pay · Stacks Mainnet</p>
+    </footer>
+  );
+}
diff --git a/frontend/components/LoadingSpinner/LoadingSpinner.module.css b/frontend/components/LoadingSpinner/LoadingSpinner.module.css
@@ -0,0 +1,14 @@
+.spinner {
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.sm { width: 16px; height: 16px; border-width: 2px; }
+.md { width: 24px; height: 24px; border-width: 2px; }
+.lg { width: 40px; height: 40px; border-width: 3px; }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
diff --git a/frontend/components/LoadingSpinner/LoadingSpinner.tsx b/frontend/components/LoadingSpinner/LoadingSpinner.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import styles from "./LoadingSpinner.module.css";
+
+export function LoadingSpinner({ size = "md" }: { size?: "sm" | "md" | "lg" }) {
+  return <div className={`${styles.spinner} ${styles[size]}`} aria-label="Loading" />;
+}
diff --git a/frontend/components/Navbar/Navbar.module.css b/frontend/components/Navbar/Navbar.module.css
@@ -62,6 +62,9 @@
   background: rgba(255, 255, 255, 0.05);
   padding: 0.4rem 0.8rem;
   border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: var(--transition-smooth);
 }
 
 .connectBtn {
@@ -80,3 +83,11 @@
   border-color: var(--primary);
   box-shadow: 0 0 15px var(--primary-glow);
 }
+
+@media (max-width: 900px) {
+  .links { gap: 1.5rem; }
+}
+
+@media (max-width: 700px) {
+  .links { display: none; }
+}
diff --git a/frontend/components/Navbar/Navbar.tsx b/frontend/components/Navbar/Navbar.tsx
@@ -2,10 +2,14 @@
 
 import Link from "next/link";
 import { useStacks } from "@/context/StacksContext";
+import { useCopyAddress } from "@/hooks/useCopyAddress";
+import { shortenAddress } from "@/lib/utils";
+import { NetworkBadge } from "@/components/NetworkBadge/NetworkBadge";
 import styles from "./Navbar.module.css";
 
 export default function Navbar() {
   const { address: addr, handleConnect, handleDisconnect } = useStacks();
+  const { copy, copied } = useCopyAddress();
 
   return (
     <nav className={styles.navbar}>
@@ -23,9 +27,16 @@ export default function Navbar() {
           <Link href="/docs" className={styles.link}>Developers</Link>
         </div>
         <div className={styles.actions}>
+          <NetworkBadge />
           {addr ? (
             <>
-              <span className={styles.address}>{addr.slice(0, 6)}…{addr.slice(-4)}</span>
+              <button
+                className={styles.address}
+                onClick={() => copy(addr)}
+                title={addr}
+              >
+                {shortenAddress(addr)}{copied ? " ✓" : ""}
+              </button>
               <button className={styles.connectBtn} onClick={handleDisconnect}>Disconnect</button>
             </>
           ) : (

diff --git a/frontend/components/NetworkBadge/NetworkBadge.module.css b/frontend/components/NetworkBadge/NetworkBadge.module.css
@@ -0,0 +1,9 @@
+.badge {
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  background: rgba(34, 197, 94, 0.2);
+  color: #22c55e;
+  border: 1px solid rgba(34, 197, 94, 0.3);
+}
diff --git a/frontend/components/NetworkBadge/NetworkBadge.tsx b/frontend/components/NetworkBadge/NetworkBadge.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import styles from "./NetworkBadge.module.css";
+
+export function NetworkBadge() {
+  return (
+    <span className={styles.badge} title="Stacks Mainnet">
+      Mainnet
+    </span>
+  );
+}
diff --git a/frontend/components/PaymentForm/PaymentForm.module.css b/frontend/components/PaymentForm/PaymentForm.module.css
@@ -20,3 +20,9 @@
   border-radius: 8px;
   font-weight: 600;
 }
+
+.error {
+  color: #ef4444;
+  font-size: 0.85rem;
+  margin: 0;
+}