create-varity-app 2.0.0-beta.16 → 2.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-varity-app",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.18",
   "description": "Create production-ready apps with auth, database, and payments built in",
   "license": "MIT",
   "repository": {

package/template/.turbo/turbo-build.log

@@ -2,5 +2,14 @@
 > my-saas-app@0.1.0 build /home/macoding/varity-workspace/varity-sdk-private/templates/saas-starter
 > next build
 
+ ⚠ Warning: Next.js inferred your workspace root, but it may not be correct.
+ We detected multiple lockfiles and selected the directory of /home/macoding/varity-workspace/package-lock.json as the root directory.
+ To silence this warning, set `outputFileTracingRoot` in your Next.js config, or consider removing one of the lockfiles if it's not needed.
+   See https://nextjs.org/docs/app/api-reference/config/next-config-js/output#caveats for more information.
+ Detected additional lockfiles: 
+   * /home/macoding/varity-workspace/varity-sdk-private/pnpm-lock.yaml
+
    ▲ Next.js 15.5.11
 
+   Creating an optimized production build ...
+ ⚠ Mismatching @next/swc version, detected: 15.5.7 while Next.js is on 15.5.11. Please ensure these match

package/template/KNOWN_ISSUES.md

@@ -17,7 +17,7 @@
 | Settings | Working | 4 tabs with backend persistence via DB Proxy |
 | Command Palette | Working | Cmd+K / Ctrl+K |
 | Color Themes | Working | 4 presets (Blue, Purple, Green, Orange) |
-| Static Export | Working | `output: 'export'` for IPFS deployment |
+| Static Export | Working | `output: 'export'` for static hosting (global CDN) |
 | Mobile Nav | Working | Responsive sidebar with hamburger menu |
 
 ## Known Issues

package/template/next.config.js

@@ -5,15 +5,9 @@ const nextConfig = {
   trailingSlash: true,
   productionBrowserSourceMaps: false,
   webpack: (config, { isServer, dev }) => {
-    // Suppress MetaMask SDK warning for @react-native-async-storage
-    config.resolve.fallback = {
-      ...config.resolve.fallback,
-      '@react-native-async-storage/async-storage': false,
-    };
-    // Force production devtool to avoid 35MB eval-source-map chunks
-    if (!dev && !isServer) {
-      config.devtool = false;
-    }
+    // Suppress unused optional peer dependencies from UI Kit internals
+    ['@react-native-async-storage/async-storage', 'viem', 'viem/chains', '@solana/kit', '@solana/sysvars', '@solana-program/token-2022', 'x402', '@coinbase/wallet-sdk', '@walletconnect/ethereum-provider'].forEach(pkg => { config.resolve.alias[pkg] = false; });
+    if (!dev && !isServer) config.devtool = false;
     return config;
   },
 };

package/template/package.json

@@ -13,7 +13,8 @@
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
     "test:e2e:debug": "playwright test --debug",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "deploy": "varitykit app deploy"
   },
   "dependencies": {
     "@varity-labs/sdk": "workspace:^",

package/template/src/app/dashboard/layout.tsx

@@ -7,7 +7,11 @@ import { useProjects, useTasks, useTeam } from '@/lib/hooks';
 import { CommandPalette } from '@varity-labs/ui-kit';
 import { Menu, X } from 'lucide-react';
 
-// Conditionally import Privy/UI-Kit components
+// Defensively import Privy/UI-Kit components at runtime (not statically) so the
+// dashboard renders gracefully even if @varity-labs/ui-kit hasn't been installed
+// yet (e.g. during local scaffolding before `npm install` completes).
+// This is intentional — it is NOT a sign that something is broken.
+// See KNOWN_ISSUES.md for details on this pattern.
 let DashboardLayout: any = null;
 let PrivyProtectedRoute: any = null;
 let PrivyStackComponent: any = null;
@@ -19,7 +23,9 @@ try {
   PrivyProtectedRoute = uiKit.PrivyProtectedRoute;
   PrivyStackComponent = uiKit.PrivyStack;
   usePrivyHook = uiKit.usePrivy;
-} catch {}
+} catch {
+  // ui-kit not installed or not yet available — DashboardShell fallback renders below
+}
 
 function RedirectToLogin() {
   const router = useRouter();
@@ -113,8 +119,8 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
   const privy = usePrivyHook ? usePrivyHook() : { user: null, logout: async () => {} };
   const { user, logout } = privy;
-  const router = useRouter();
   const pathname = usePathname();
+  const router = useRouter();
   const isMobile = useIsMobile();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
@@ -154,7 +160,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
 
   const handleLogout = async () => {
     await logout();
-    window.location.href = '/';
+    router.push('/');
   };
 
   // Fallback layout when DashboardLayout from ui-kit isn't available
@@ -255,9 +261,8 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
           showSidebar={!isMobile}
           user={{
             name: userName,
-            address: userEmail,
+            email: userEmail,
           }}
-          onNavigate={(path: string) => router.push(path)}
           onLogout={handleLogout}
           onNavigateToProfile={() => router.push('/dashboard/settings')}
           onNavigateToSettings={() => router.push('/dashboard/settings')}
@@ -287,9 +292,8 @@ export default function DashboardRootLayout({
   return (
     <PrivyStackComponent
       appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
-      thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
       loginMethods={['email', 'google']}
-      appearance={{ theme: 'light', accentColor: '#2563EB' }}
+      appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
     >
       <PrivyProtectedRoute fallback={<RedirectToLogin />}>
         <DashboardShell>{children}</DashboardShell>

package/template/src/app/dashboard/page.tsx

@@ -9,6 +9,7 @@ import { FolderKanban, ListTodo, Users, ArrowRight } from 'lucide-react';
 
 function QuickActions() {
   const router = useRouter();
+
   const actions = [
     {
       label: 'New Project',
@@ -137,6 +138,7 @@ function GettingStarted({
 }
 
 export default function DashboardPage() {
+  const router = useRouter();
   const { name } = useCurrentUser();
   const { data: projects, loading: projectsLoading, error: projectsError, refresh: refreshProjects } = useProjects();
   const { data: tasks, loading: tasksLoading, error: tasksError, refresh: refreshTasks } = useTasks();
@@ -161,14 +163,14 @@ export default function DashboardPage() {
         </p>
       </div>
 
-      {error && !loading && (
-        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
-          <p className="text-sm text-amber-700">Syncing your data...</p>
+      {error && (
+        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
+          <p className="text-sm text-red-700">Failed to load data. Please check your connection and try again.</p>
           <button
             onClick={() => { refreshProjects(); refreshTasks(); refreshTeam(); }}
-            className="text-sm font-medium text-amber-700 hover:text-amber-800 underline"
+            className="text-sm font-medium text-red-700 hover:text-red-800 underline"
           >
-            Refresh
+            Retry
           </button>
         </div>
       )}

package/template/src/app/dashboard/projects/page.tsx

@@ -606,10 +606,10 @@ export default function ProjectsPage() {
         </div>
       </Dialog>
 
-      {error && !loading && (
-        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
-          <p className="text-sm text-amber-700">Syncing your projects...</p>
-          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
+      {error && (
+        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
+          <p className="text-sm text-red-700">Failed to load projects. Please check your connection and try again.</p>
+          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
         </div>
       )}
 

package/template/src/app/dashboard/tasks/page.tsx

@@ -258,10 +258,10 @@ export default function TasksPage() {
         )}
       </div>
 
-      {error && !loading && (
-        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
-          <p className="text-sm text-amber-700">Syncing your tasks...</p>
-          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
+      {error && (
+        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
+          <p className="text-sm text-red-700">Failed to load tasks. Please check your connection and try again.</p>
+          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
         </div>
       )}
 

package/template/src/app/dashboard/team/page.tsx

@@ -246,10 +246,10 @@ export default function TeamPage() {
         loading={removeSubmitting}
       />
 
-      {error && !loading && (
-        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
-          <p className="text-sm text-amber-700">Syncing your team data...</p>
-          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
+      {error && (
+        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
+          <p className="text-sm text-red-700">Failed to load team data. Please check your connection and try again.</p>
+          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
         </div>
       )}
 

package/template/src/app/layout.tsx

@@ -1,23 +1,20 @@
 import type { Metadata } from 'next';
 import { Providers } from '@/components/providers';
-import { APP_NAME } from '@/lib/constants';
 import './globals.css';
 
-const description = 'Built with Varity — auth, database, and deployment included.';
-
 export const metadata: Metadata = {
-  title: APP_NAME,
-  description,
-  metadataBase: new URL('https://varity.app'),
+  title: 'TaskFlow - Project Management',
+  description: 'Manage projects, track tasks, and collaborate with your team.',
+  metadataBase: new URL('https://example.com'),
   openGraph: {
-    title: APP_NAME,
-    description,
+    title: 'TaskFlow - Project Management',
+    description: 'Manage projects, track tasks, and collaborate with your team.',
     type: 'website',
   },
   twitter: {
     card: 'summary',
-    title: APP_NAME,
-    description,
+    title: 'TaskFlow - Project Management',
+    description: 'Manage projects, track tasks, and collaborate with your team.',
   },
 };
 

package/template/src/app/login/page.tsx

@@ -15,12 +15,6 @@ try {
   usePrivyHook = uiKit.usePrivy;
 } catch {}
 
-function loginButtonLabel(privy: { ready: boolean; authenticated: boolean }): string {
-  if (!privy.ready) return 'Loading...';
-  if (privy.authenticated) return 'Already Signed In';
-  return 'Sign In with Email or Social';
-}
-
 function LoginContent() {
   const router = useRouter();
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
@@ -61,7 +55,11 @@ function LoginContent() {
               disabled={!privy.ready || privy.authenticated}
               className="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors shadow-sm"
             >
-              {loginButtonLabel(privy)}
+              {!privy.ready
+                ? 'Loading...'
+                : privy.authenticated
+                ? 'Already Signed In'
+                : 'Sign In with Email or Social'}
             </button>
           ) : (
             <div className="text-center space-y-4">
@@ -81,18 +79,19 @@ function LoginContent() {
 }
 
 export default function LoginPage() {
+  // Always wrap in PrivyStack - it uses dev credentials automatically when no appId is provided
   if (PrivyStackComponent) {
     return (
       <PrivyStackComponent
         appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
-        thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
         loginMethods={['email', 'google']}
-        appearance={{ theme: 'light', accentColor: '#2563EB' }}
+        appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
       >
         <LoginContent />
       </PrivyStackComponent>
     );
   }
 
+  // Fallback if ui-kit package isn't installed
   return <LoginContent />;
 }

package/template/src/app/not-found.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Link from 'next/link';
 
 export default function NotFound() {

package/template/src/app/page.tsx

@@ -2,6 +2,7 @@ import { Navbar } from '@/components/shared/Navbar';
 import { Hero } from '@/components/landing/Hero';
 import { Features } from '@/components/landing/Features';
 import { HowItWorks } from '@/components/landing/HowItWorks';
+import { Testimonials } from '@/components/landing/Testimonials';
 import { Pricing } from '@/components/landing/Pricing';
 import { CTA } from '@/components/landing/CTA';
 import { Footer } from '@/components/shared/Footer';
@@ -13,7 +14,7 @@ export default function HomePage() {
       <Hero />
       <Features />
       <HowItWorks />
-
+      <Testimonials />
       <Pricing />
       <CTA />
       <Footer />

package/template/src/components/dashboard/RecentActivity.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import Link from 'next/link';
-import { DataTable, TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
+import { DataTable } from '@varity-labs/ui-kit';
+import { TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
 import { formatRelativeDate } from '@/lib/utils';
 import { ArrowRight } from 'lucide-react';
 import type { Task } from '@/types';

package/template/src/components/landing/Pricing.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { Check } from 'lucide-react';
 
 const plans = [
@@ -53,12 +52,6 @@ const plans = [
   },
 ];
 
-function buttonStyle(plan: (typeof plans)[number]): string {
-  if (plan.popular) return 'bg-primary-600 text-white hover:bg-primary-700';
-  if (plan.price === 0) return 'bg-gray-100 text-gray-900 hover:bg-gray-200';
-  return 'bg-gray-900 text-white hover:bg-gray-800';
-}
-
 export function Pricing() {
   return (
     <section id="pricing" className="py-24 bg-white">
@@ -109,12 +102,18 @@ export function Pricing() {
               </ul>
 
               <div className="mt-8">
-                <Link
+                <a
                   href="/login"
-                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${buttonStyle(plan)}`}
+                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${
+                    plan.popular
+                      ? 'bg-primary-600 text-white hover:bg-primary-700'
+                      : plan.price === 0
+                        ? 'bg-gray-100 text-gray-900 hover:bg-gray-200'
+                        : 'bg-gray-900 text-white hover:bg-gray-800'
+                  }`}
                 >
                   {plan.cta}
-                </Link>
+                </a>
               </div>
             </div>
           ))}

package/template/src/components/shared/Navbar.tsx

@@ -46,6 +46,7 @@ export function Navbar() {
             >
               Get Started
             </Link>
+            {/* Mobile menu toggle */}
             <button
               onClick={() => setMobileOpen(!mobileOpen)}
               className="rounded-lg p-2 text-gray-600 hover:bg-gray-100 sm:hidden"
@@ -57,6 +58,7 @@ export function Navbar() {
         </div>
       </div>
 
+      {/* Mobile dropdown */}
       {mobileOpen && (
         <div className="border-t border-gray-100 bg-white px-4 pb-4 pt-2 sm:hidden">
           <div className="space-y-1">

package/template/src/lib/constants.ts

@@ -1,6 +1,6 @@
 import type { NavigationItem } from '@varity-labs/ui-kit';
 
-export const APP_NAME = 'My App';
+export const APP_NAME = 'TaskFlow';
 
 export const NAVIGATION_ITEMS: NavigationItem[] = [
   { label: 'Dashboard', icon: 'dashboard', path: '/dashboard' },

package/template/src/lib/hooks.ts

@@ -10,18 +10,6 @@ try {
   usePrivyHook = uiKit.usePrivy;
 } catch {}
 
-async function fetchWithRetry<T>(fn: () => Promise<T>, retries = 3, delay = 1500): Promise<T> {
-  for (let i = 0; i < retries; i++) {
-    try {
-      return await fn();
-    } catch (err) {
-      if (i === retries - 1) throw err;
-      await new Promise((r) => setTimeout(r, delay));
-    }
-  }
-  throw new Error('Unexpected');
-}
-
 export function useCurrentUser() {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
   const privy = usePrivyHook ? usePrivyHook() : { user: null, authenticated: false, logout: async () => {} };
@@ -66,7 +54,7 @@ export function useProjects(): UseCollectionReturn<Project> {
     try {
       setLoading(true);
       setError(null);
-      const result = await fetchWithRetry(() => projects().get());
+      const result = await projects().get();
       setData(result as Project[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load projects');
@@ -138,7 +126,7 @@ export function useTasks(projectId?: string): UseCollectionReturn<Task> {
     try {
       setLoading(true);
       setError(null);
-      const result = await fetchWithRetry(() => tasks().get());
+      const result = await tasks().get();
       setAllTasks(result as Task[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load tasks');
@@ -214,7 +202,7 @@ export function useTeam(): UseCollectionReturn<TeamMember> {
     try {
       setLoading(true);
       setError(null);
-      const result = await fetchWithRetry(() => teamMembers().get());
+      const result = await teamMembers().get();
       setData(result as TeamMember[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load team');
@@ -301,7 +289,7 @@ export function useUserSettings() {
     try {
       setLoading(true);
       setError(null);
-      const all = await fetchWithRetry(() => userSettings().get());
+      const all = await userSettings().get();
       const mine = (all as UserSettings[]).find((s) => s.user_id === userId);
       if (mine) {
         setSettings(mine);

package/template/varity.config.json

@@ -2,7 +2,7 @@
   "name": "my-saas-app",
   "version": "0.1.0",
   "framework": "nextjs",
-  "hosting": "ipfs",
+  "hosting": "static",
   "build": {
     "command": "npm run build",
     "output": "out"