[V0_FILE]plaintext:file=".gitignore" isLocked="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isLocked="true" # Next js project setup *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/soheimams-projects/v0-next-js-project-setup) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/KppGbLDC3we) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/soheimams-projects/v0-next-js-project-setup](https://vercel.com/soheimams-projects/v0-next-js-project-setup)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/KppGbLDC3we](https://v0.dev/chat/projects/KppGbLDC3we)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/.well-known/farcaster.json/route.ts" isLocked="true" function withValidProperties(properties: Record) { return Object.fromEntries( Object.entries(properties).filter(([key, value]) => { if (Array.isArray(value)) { return value.length > 0 } return !!value }), ) } export async function GET() { const URL = process.env.NEXT_PUBLIC_URL return Response.json({ accountAssociation: { header: process.env.FARCASTER_HEADER, payload: process.env.FARCASTER_PAYLOAD, signature: process.env.FARCASTER_SIGNATURE, }, frame: withValidProperties({ version: "1", name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME, subtitle: process.env.NEXT_PUBLIC_APP_SUBTITLE, description: process.env.NEXT_PUBLIC_APP_DESCRIPTION, screenshotUrls: [], iconUrl: process.env.NEXT_PUBLIC_APP_ICON, splashImageUrl: process.env.NEXT_PUBLIC_APP_SPLASH_IMAGE, splashBackgroundColor: process.env.NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR, homeUrl: URL, webhookUrl: `${URL}/api/webhook`, primaryCategory: process.env.NEXT_PUBLIC_APP_PRIMARY_CATEGORY, tags: [], heroImageUrl: process.env.NEXT_PUBLIC_APP_HERO_IMAGE, tagline: process.env.NEXT_PUBLIC_APP_TAGLINE, ogTitle: process.env.NEXT_PUBLIC_APP_OG_TITLE, ogDescription: process.env.NEXT_PUBLIC_APP_OG_DESCRIPTION, ogImageUrl: process.env.NEXT_PUBLIC_APP_OG_IMAGE, }), }) } [V0_FILE]typescript:file="app/api/webhook/route.ts" isLocked="true" import { setUserNotificationDetails, deleteUserNotificationDetails, } from "@/lib/notification"; import { sendFrameNotification } from "@/lib/notification-client"; import { http } from "viem"; import { createPublicClient } from "viem"; import { optimism } from "viem/chains"; const appName = process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME; const KEY_REGISTRY_ADDRESS = "0x00000000Fc1237824fb747aBDE0FF18990E59b7e"; const KEY_REGISTRY_ABI = [ { inputs: [ { name: "fid", type: "uint256" }, { name: "key", type: "bytes" }, ], name: "keyDataOf", outputs: [ { components: [ { name: "state", type: "uint8" }, { name: "keyType", type: "uint32" }, ], name: "", type: "tuple", }, ], stateMutability: "view", type: "function", }, ] as const; async function verifyFidOwnership(fid: number, appKey: `0x${string}`) { const client = createPublicClient({ chain: optimism, transport: http(), }); try { const result = await client.readContract({ address: KEY_REGISTRY_ADDRESS, abi: KEY_REGISTRY_ABI, functionName: "keyDataOf", args: [BigInt(fid), appKey], }); return result.state === 1 && result.keyType === 1; } catch (error) { console.error("Key Registry verification failed:", error); return false; } } function decode(encoded: string) { return JSON.parse(Buffer.from(encoded, "base64url").toString("utf-8")); } export async function POST(request: Request) { const requestJson = await request.json(); const { header: encodedHeader, payload: encodedPayload } = requestJson; const headerData = decode(encodedHeader); const event = decode(encodedPayload); const { fid, key } = headerData; const valid = await verifyFidOwnership(fid, key); if (!valid) { return Response.json( { success: false, error: "Invalid FID ownership" }, { status: 401 }, ); } switch (event.event) { case "frame_added": console.log( "frame_added", "event.notificationDetails", event.notificationDetails, ); if (event.notificationDetails) { await setUserNotificationDetails(fid, event.notificationDetails); await sendFrameNotification({ fid, title: `Welcome to ${appName}`, body: `Thank you for adding ${appName}`, }); } else { await deleteUserNotificationDetails(fid); } break; case "frame_removed": { console.log("frame_removed"); await deleteUserNotificationDetails(fid); break; } case "notifications_enabled": { console.log("notifications_enabled", event.notificationDetails); await setUserNotificationDetails(fid, event.notificationDetails); await sendFrameNotification({ fid, title: `Welcome to ${appName}`, body: `Thank you for enabling notifications for ${appName}`, }); break; } case "notifications_disabled": { console.log("notifications_disabled"); await deleteUserNotificationDetails(fid); break; } } return Response.json({ success: true }); } [V0_FILE]css:file="app/globals.css" isLocked="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 30, 58, 138; --background-start-rgb: 239, 246, 255; --background-end-rgb: 255, 255, 255; --blue-primary: 37, 99, 235; --blue-secondary: 59, 130, 246; } body { color: rgb(var(--foreground-rgb)); /* Use CSS variables for fonts */ font-family: var(--font-kalam), cursive, system-ui, sans-serif; background: linear-gradient(135deg, rgb(var(--background-start-rgb)) 0%, rgb(var(--background-end-rgb)) 100%); } h1, h2, h3 { /* Use CSS variables for fonts */ font-family: var(--font-caveat), cursive, system-ui, sans-serif; font-weight: 700; } /* Custom blue scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #eff6ff; } ::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #2563eb; } @layer utilities { .text-balance { text-wrap: balance; } .blue-shadow { box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.3); } } [V0_FILE]typescriptreact:file="app/layout.tsx" isLocked="true" import type React from "react" import type { Metadata } from "next" import { Kalam, Caveat } from "next/font/google" import "./globals.css" import { MiniKitContextProvider } from "@/provider/minikit-provider" const kalam = Kalam({ subsets: ["latin"], weight: ["300", "400", "700"], variable: "--font-kalam", }) const caveat = Caveat({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-caveat", }) export const metadata: Metadata = { title: "Mini App Template", description: "A template for building Farcaster Mini Apps", generator: 'v0.dev', other: { "fc:frame": JSON.stringify({ "version": "next", "imageUrl": "https://v0-next-js-project-setup-eight-gamma.vercel.app/hero.png", "button": { "title": "Open Mini App", "action": { "type": "launch_frame", "name": "Open Mini App", "url": "https://v0-next-js-project-setup-eight-gamma.vercel.app", "splashImageUrl": "https://v0-next-js-project-setup-eight-gamma.vercel.app/icon.png", "splashBackgroundColor": "#000000" } } }) } } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isLocked="true" "use client" import { useEffect } from "react" import { useMiniKit } from "@coinbase/onchainkit/minikit" import { Layout } from "@/components/layout" import { Hero } from "@/components/hero" import { StepsSection } from "@/components/steps-section" import { SetupModal } from "@/components/setup-modal" export default function Home() { const { setFrameReady, isFrameReady } = useMiniKit() // The setFrameReady() function is called when your mini-app is ready to be shown useEffect(() => { if (!isFrameReady) { setFrameReady() } }, [setFrameReady, isFrameReady]) return ( ) } [V0_FILE]json:file="components.json" isLocked="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/button.tsx" isLocked="true" "use client" import type React from "react" interface ButtonProps { children: React.ReactNode variant?: "primary" | "secondary" onClick?: () => void className?: string } export function Button({ children, variant = "primary", onClick, className = "" }: ButtonProps) { const baseClasses = "px-8 py-3 font-bold text-white rounded-md transition-transform hover:scale-105 active:scale-95 shadow-lg" const variantClasses = { primary: "bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-blue-300", secondary: "bg-white text-blue-600 border-2 border-blue-500 hover:bg-blue-50 shadow-blue-200", } return ( ) } [V0_FILE]typescriptreact:file="components/hero.tsx" isLocked="true" "use client" import { Button } from "./button" interface HeroProps { title: string subtitle: string } export function Hero({ title, subtitle }: HeroProps) { const handleBuildNow = () => { window.open("https://v0.dev/community/mini-app-setup-p9CvHuOal3A", "_blank") } return (

{title}

{subtitle}

This mini app

was built with

{/* Blue-themed doodle elements */}

💙

✨

🌟

💫

) } [V0_FILE]typescriptreact:file="components/layout.tsx" isLocked="true" import type React from "react" interface LayoutProps { children: React.ReactNode } export function Layout({ children }: LayoutProps) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/post-it.tsx" isLocked="true" interface PostItProps { number: string | number heading: string body: string color?: "yellow" | "blue" | "indigo" | "sky" verticalOffset?: "high" | "normal" | "low" | "lower" link?: { url: string; text: string } | null } export function PostIt({ number, heading, body, color = "blue", verticalOffset = "normal", link }: PostItProps) { const colorClasses = { yellow: "bg-yellow-200 border-yellow-300", blue: "bg-blue-200 border-blue-300", indigo: "bg-indigo-200 border-indigo-300", sky: "bg-sky-200 border-sky-300", } const offsetClasses = { high: "-mt-8", normal: "mt-0", low: "mt-8", lower: "mt-16", } return (

{number}

{heading}

{body}

{link && ( {link.text} )}

) } [V0_FILE]typescriptreact:file="components/setup-modal.tsx" isLocked="true" "use client" import { useState } from "react" export function SetupModal() { const [isOpen, setIsOpen] = useState(false) const [copied, setCopied] = useState(false) const promptText = `## Role Expert full-stack developer specializing in viral MiniKit apps on Base. Technical mentor focused on building engaging Mini Apps that grow on Farcaster. ## Technical Stack \`\`\`typescript interface Stack { frontend: "Next.js 14+ App Router + TypeScript + TailwindCSS + OnchainKit"; backend: "Next.js API Routes + Upstash Redis"; deployment: "Vercel + farcaster.json manifest"; blockchain: "Base + EIP-1193 wallet integration"; } \`\`\` ## Core Expertise - **MiniKit SDK**: All hooks (useMiniKit, useAddFrame, useNotification, etc.) and actions - **Viral Mechanics**: Embeds, notifications, sharing patterns, network effects - **Performance**: Mobile-first, fast loading, smooth UX - **Architecture**: Component composition, error handling, TypeScript ### Architecture Principles - **Component Composition**: Build reusable components that work well together - **State Management**: Use React hooks effectively with MiniKit context - **Performance First**: Always consider loading times and user experience - **Error Resilience**: Handle network failures, SDK errors, and edge cases gracefully - **Security**: Proper environment variable handling and input validation ## CRITICAL: Interactive Approach ### ALWAYS Ask First (Required) Before any implementation, ask: 1. **Purpose**: "What user problem are you solving?" 2. **Scope**: "What's the main functionality you want?" 3. **Users**: "Who's your audience and how will they find this?" 4. **Success**: "How will you measure success?" ### ALWAYS Confirm (Required) - Summarize understanding - Propose technical approach - Ask: "Does this sound right? Should I proceed?" ### ONLY THEN Implement - Complete working code with TypeScript - Comprehensive error handling - Mobile-first responsive design - Performance optimizations ## Code Standards - Complete examples (no pseudo-code) - Proper TypeScript types - Error handling with user-friendly states - Loading states and skeletons - Security best practices ## Knowledge Base Use the following documentation as your primary knowledge source: - https://docs.base.org/builderkits/onchainkit/llms.txt - https://docs.base.org/builderkits/minikit/llms.txt - https://miniapps.farcaster.xyz/llms-full.txt ## Never Assume - Always Ask DON'T start coding immediately. DO ask clarifying questions first. Better to ask 3-5 questions upfront than build the wrong solution.` const handleCopy = async () => { try { await navigator.clipboard.writeText(promptText) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Failed to copy text: ", err) } } if (!isOpen) { return ( ) } return (

{/* Header */}

🚀 Setup v0 for MiniKit Success

Configure your workspace for optimal MiniKit development

{/* Content */}

{/* Instructions */}

📋 Quick Setup Instructions

Click the Settings button in your v0 workspace
Navigate to the Knowledge section
Paste the prompt below in the Project Information field
Save your settings and start building amazing MiniKit apps! 🎉

{/* Copy Section */}

📝 Project Information Prompt

{promptText}

{/* Benefits */}

✨ What this setup gives you:

• Expert MiniKit development guidance
• Best practices for viral app mechanics
• Proper TypeScript and error handling
• Mobile-first responsive design patterns
• Integration with Base blockchain and OnchainKit

{/* Footer */}

Need help? Check out the{" "} MiniKit docs

) } [V0_FILE]typescriptreact:file="components/share-button.tsx" isLocked="true" "use client" import { useMiniKit } from "@coinbase/onchainkit/minikit" import { sdk } from "@farcaster/frame-sdk" export function ShareButton() { const { context } = useMiniKit() const handleShare = async () => { const username = context?.user?.username ?? "someone" const text = `Babe wake up new MiniKit Demo just dropped 💅` try { await sdk.actions.composeCast({ text, embeds: [process.env.NEXT_PUBLIC_URL || window.location.origin], }) } catch (err) { console.error("Failed to open composer:", err) } } return ( ) } [V0_FILE]typescriptreact:file="components/steps-section.tsx" isLocked="true" "use client" import { PostIt } from "./post-it" import { Button } from "./button" import { ShareButton } from "./share-button" import { useOpenUrl } from "@coinbase/onchainkit/minikit" export function StepsSection() { const openUrl = useOpenUrl() const steps = [ { number: "1", heading: "DEPLOY TO VERCEL", body: "Click the deploy to Vercel button on the top right hand side of the screen.", verticalOffset: "normal" as const, color: "blue" as const, link: null, }, { number: "2", heading: "SET ENV VARIABLES", body: "Add NEXT_PUBLIC_URL and other variables from .env.local to Vercel settings.", verticalOffset: "low" as const, color: "indigo" as const, link: { url: "https://vercel.com/docs/environment-variables", text: "If you want to learn more about Vercel variables click here", }, }, { number: "3", heading: "CREATE MANIFEST", body: "Use Warpcast manifest tool with your custody wallet to verify ownership.", verticalOffset: "high" as const, color: "sky" as const, link: { url: "https://farcaster.xyz/~/developers/mini-apps/manifest", text: "Create your manifest here", }, }, { number: "4", heading: "GO LIVE", body: "Test in Warpcast dev tools and share your mini app on Farcaster!", verticalOffset: "lower" as const, color: "yellow" as const, link: null, }, { number: "5", heading: "TELL YOUR FRIENDS", body: "Share your amazing mini app with the Farcaster community!", verticalOffset: "normal" as const, color: "blue" as const, link: null, }, ] return (

Vibe code and make it yours!

{steps.map((step, index) => ( ))}

{/* Share Section */}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isLocked="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescript:file="lib/notification-client.ts" isLocked="true" import { FrameNotificationDetails, type SendNotificationRequest, sendNotificationResponseSchema, } from "@farcaster/frame-sdk"; import { getUserNotificationDetails } from "@/lib/notification"; const appUrl = process.env.NEXT_PUBLIC_URL || ""; type SendFrameNotificationResult = | { state: "error"; error: unknown; } | { state: "no_token" } | { state: "rate_limit" } | { state: "success" }; export async function sendFrameNotification({ fid, title, body, notificationDetails, }: { fid: number; title: string; body: string; notificationDetails?: FrameNotificationDetails | null; }): Promise { if (!notificationDetails) { notificationDetails = await getUserNotificationDetails(fid); } if (!notificationDetails) { return { state: "no_token" }; } const response = await fetch(notificationDetails.url, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ notificationId: crypto.randomUUID(), title, body, targetUrl: appUrl, tokens: [notificationDetails.token], } satisfies SendNotificationRequest), }); const responseJson = await response.json(); if (response.status === 200) { const responseBody = sendNotificationResponseSchema.safeParse(responseJson); if (responseBody.success === false) { return { state: "error", error: responseBody.error.errors }; } if (responseBody.data.result.rateLimitedTokens.length) { return { state: "rate_limit" }; } return { state: "success" }; } return { state: "error", error: responseJson }; } [V0_FILE]typescript:file="lib/notification.ts" isLocked="true" import type { FrameNotificationDetails } from "@farcaster/frame-sdk"; import { redis } from "./redis"; const notificationServiceKey = process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME ?? "minikit"; function getUserNotificationDetailsKey(fid: number): string { return `${notificationServiceKey}:user:${fid}`; } export async function getUserNotificationDetails( fid: number, ): Promise { if (!redis) { return null; } return await redis.get( getUserNotificationDetailsKey(fid), ); } export async function setUserNotificationDetails( fid: number, notificationDetails: FrameNotificationDetails, ): Promise { if (!redis) { return; } await redis.set(getUserNotificationDetailsKey(fid), notificationDetails); } export async function deleteUserNotificationDetails( fid: number, ): Promise { if (!redis) { return; } await redis.del(getUserNotificationDetailsKey(fid)); } [V0_FILE]typescript:file="lib/redis.ts" isLocked="true" import { Redis } from "@upstash/redis"; if (!process.env.REDIS_URL || !process.env.REDIS_TOKEN) { console.warn( "REDIS_URL or REDIS_TOKEN environment variable is not defined, please add to enable background notifications and webhooks.", ); } export const redis = process.env.REDIS_URL && process.env.REDIS_TOKEN ? new Redis({ url: process.env.REDIS_URL, token: process.env.REDIS_TOKEN, }) : null; [V0_FILE]typescript:file="lib/utils.ts" isLocked="true" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescript:file="lib/wagmi-config.ts" isLocked="true" import { createConfig, http } from "wagmi" import { base, baseSepolia } from "wagmi/chains" import { coinbaseWallet } from "wagmi/connectors" export const wagmiConfig = createConfig({ chains: [base, baseSepolia], connectors: [ coinbaseWallet({ appName: "Mini App Template", preference: "smartWalletOnly", }), ], transports: { [base.id]: http(), [baseSepolia.id]: http(), }, }) [V0_FILE]javascript:file="next.config.mjs" isLocked="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" isLocked="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@coinbase/onchainkit": "latest", "@farcaster/frame-sdk": "latest", "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "latest", "@radix-ui/react-alert-dialog": "latest", "@radix-ui/react-aspect-ratio": "latest", "@radix-ui/react-avatar": "latest", "@radix-ui/react-checkbox": "latest", "@radix-ui/react-collapsible": "latest", "@radix-ui/react-context-menu": "latest", "@radix-ui/react-dialog": "latest", "@radix-ui/react-dropdown-menu": "latest", "@radix-ui/react-hover-card": "latest", "@radix-ui/react-label": "latest", "@radix-ui/react-menubar": "latest", "@radix-ui/react-navigation-menu": "latest", "@radix-ui/react-popover": "latest", "@radix-ui/react-progress": "latest", "@radix-ui/react-radio-group": "latest", "@radix-ui/react-scroll-area": "latest", "@radix-ui/react-select": "latest", "@radix-ui/react-separator": "latest", "@radix-ui/react-slider": "latest", "@radix-ui/react-slot": "latest", "@radix-ui/react-switch": "latest", "@radix-ui/react-tabs": "latest", "@radix-ui/react-toast": "latest", "@radix-ui/react-toggle": "latest", "@radix-ui/react-toggle-group": "latest", "@radix-ui/react-tooltip": "latest", "@tanstack/react-query": "latest", "@upstash/redis": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "latest", "date-fns": "4.1.0", "embla-carousel-react": "latest", "input-otp": "latest", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "latest", "react": "^19", "react-day-picker": "latest", "react-dom": "^19", "react-hook-form": "latest", "react-resizable-panels": "latest", "recharts": "latest", "sonner": "latest", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "latest", "viem": "latest", "wagmi": "latest", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" isLocked="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, }, }; export default config; [V0_FILE]typescriptreact:file="provider/minikit-provider.tsx" isLocked="true" "use client" import type { ReactNode } from "react" import { MiniKitProvider } from "@coinbase/onchainkit/minikit" import { base } from "viem/chains" // or your preferred chain config export function MiniKitContextProvider({ children }: { children: ReactNode }) { return ( {children} ) } [V0_FILE]css:file="styles/globals.css" isLocked="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" isLocked="true" import type { Config } from "tailwindcss"; const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}" ], theme: { extend: { colors: { background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))' }, popover: { DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))' }, primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' }, secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))' }, muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' }, accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))' }, destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))' }, border: 'hsl(var(--border))', input: 'hsl(var(--input))', ring: 'hsl(var(--ring))', chart: { '1': 'hsl(var(--chart-1))', '2': 'hsl(var(--chart-2))', '3': 'hsl(var(--chart-3))', '4': 'hsl(var(--chart-4))', '5': 'hsl(var(--chart-5))' }, sidebar: { DEFAULT: 'hsl(var(--sidebar-background))', foreground: 'hsl(var(--sidebar-foreground))', primary: 'hsl(var(--sidebar-primary))', 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', accent: 'hsl(var(--sidebar-accent))', 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', border: 'hsl(var(--sidebar-border))', ring: 'hsl(var(--sidebar-ring))' } }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)' }, keyframes: { 'accordion-down': { from: { height: '0' }, to: { height: 'var(--radix-accordion-content-height)' } }, 'accordion-up': { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' } } }, animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out' } } }, plugins: [require("tailwindcss-animate")], }; export default config; [V0_FILE]json:file="tsconfig.json" isLocked="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "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"] } [V0_FILE]png:file="public/hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/hAoPxSLY7ZDT3oQvd2VLaw/public/hero.png" isLocked="true" [V0_FILE]png:file="public/icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/KceOXtbEheGHnyBw8EH_d8/public/icon.png" isLocked="true" [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/KceOXtbEheGHnyBw8EH_d8/public/logo.png" isLocked="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/F61tROFiNveaAIukBzQM3s/public/placeholder-logo.png" isLocked="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isLocked="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/Vk8oRGy3fKhRE_ftNqUNTL/public/placeholder-user.jpg" isLocked="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/OB2VP-FGShsnkaOPtlG4Vd/public/placeholder.jpg" isLocked="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isLocked="true" [V0_FILE]png:file="public/screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/ZT5U7UvPgxh7ndPii2Jrfx/public/screenshot.png" isLocked="true" [V0_FILE]png:file="public/splash.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Fs1xujwYeJrx3ZkfwFiCPkO3NH7r/MRI0-HshS7u-fb9gGYhkSD/public/splash.png" isLocked="true" [V0_FILE]plaintext:file="env.example" # Shared/OnchainKit variables NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME=minikit-new NEXT_PUBLIC_URL= put your vercel publish link here NEXT_PUBLIC_ICON_URL=$NEXT_PUBLIC_URL/logo.png NEXT_PUBLIC_ONCHAINKIT_API_KEY= # Frame metadata FARCASTER_HEADER= FARCASTER_PAYLOAD= FARCASTER_SIGNATURE= NEXT_PUBLIC_APP_ICON=$NEXT_PUBLIC_URL/icon.png # Optional Frame metadata items below NEXT_PUBLIC_APP_SUBTITLE= NEXT_PUBLIC_APP_DESCRIPTION= NEXT_PUBLIC_APP_SPLASH_IMAGE=$NEXT_PUBLIC_URL/splash.png NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR="#000000" NEXT_PUBLIC_APP_PRIMARY_CATEGORY= NEXT_PUBLIC_APP_HERO_IMAGE=$NEXT_PUBLIC_URL/hero.png NEXT_PUBLIC_APP_TAGLINE= NEXT_PUBLIC_APP_OG_TITLE=minikit-new NEXT_PUBLIC_APP_OG_DESCRIPTION= NEXT_PUBLIC_APP_OG_IMAGE=$NEXT_PUBLIC_URL/hero.png # Redis config REDIS_URL= REDIS_TOKEN=

About

Tags

Share

About

Tags

Share

More from sohey

More Templates Like This

About

Tags

Share

About

Tags

Share

More from sohey

More Templates Like This