[V0_FILE]markdown:file="README.md" # ★★ ZOO3 (2) *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/cocos-projects-676b27b0/v0-zoo-3) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/bWhPXtgCCe6) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/cocos-projects-676b27b0/v0-zoo-3](https://vercel.com/cocos-projects-676b27b0/v0-zoo-3)** ## Build your app Continue building your app on: **[https://v0.app/chat/bWhPXtgCCe6](https://v0.app/chat/bWhPXtgCCe6)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 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]typescriptreact:file="app/auth/discord/callback/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/auth/discord/callback/page.tsx" "use client" import { useEffect, useState } from "react" import { useSearchParams, useRouter } from 'next/navigation' import { exchangeCodeForToken, getDiscordUser, checkGuildMembership } from "@/lib/discord-auth" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { LionLogo } from "@/components/lion-logo" import { CheckCircle2, XCircle, Loader2 } from 'lucide-react' export default function DiscordCallbackPage() { const searchParams = useSearchParams() const router = useRouter() const [status, setStatus] = useState<"loading" | "success" | "error">("loading") const [message, setMessage] = useState("") useEffect(() => { const handleCallback = async () => { const code = searchParams.get("code") const error = searchParams.get("error") if (error) { setStatus("error") setMessage("授權失敗，請重試") return } if (!code) { setStatus("error") setMessage("無效的授權碼") return } try { // Exchange code for access token const accessToken = await exchangeCodeForToken(code) // Get user information const user = await getDiscordUser(accessToken) // Check guild membership const isMember = await checkGuildMembership(accessToken) if (isMember) { // Store token and user info localStorage.setItem(`discord_token_${user.id}`, accessToken) localStorage.setItem("discord_verified", "true") setStatus("success") setMessage("成功加入 Discord 社區！") // Redirect to tasks page after 2 seconds setTimeout(() => { router.push("/tasks?discord_verified=true") }, 2000) } else { setStatus("error") setMessage("請先加入 Discord 社區") } } catch (error) { console.error("Discord callback error:", error) setStatus("error") setMessage("驗證過程出現錯誤，請重試") } } handleCallback() }, [searchParams, router]) return (

{status === "loading" && ( <>

正在驗證...

請稍候，我們正在確認您的 Discord 身份

)} {status === "success" && ( <>

{message}

您已獲得 +5 $HONEY 獎勵

正在返回任務頁面...

)} {status === "error" && ( <>

{message}

)}

) } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; /* Moved shadcn design tokens to :root and .dark (not wrapped in @layer base) for Tailwind v4 */ :root { --background: hsl(0 0% 100%); --foreground: hsl(222.2 84% 4.9%); --card: hsl(0 0% 100%); --card-foreground: hsl(222.2 84% 4.9%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(222.2 84% 4.9%); --primary: hsl(222.2 47.4% 11.2%); --primary-foreground: hsl(210 40% 98%); --secondary: hsl(210 40% 96.1%); --secondary-foreground: hsl(222.2 47.4% 11.2%); --muted: hsl(210 40% 96.1%); --muted-foreground: hsl(215.4 16.3% 46.9%); --accent: hsl(210 40% 96.1%); --accent-foreground: hsl(222.2 47.4% 11.2%); --destructive: hsl(0 84.2% 60.2%); --destructive-foreground: hsl(210 40% 98%); --border: hsl(214.3 31.8% 91.4%); --input: hsl(214.3 31.8% 91.4%); --ring: hsl(222.2 84% 4.9%); --radius: 0.5rem; } .dark { --background: hsl(222.2 84% 4.9%); --foreground: hsl(210 40% 98%); --card: hsl(222.2 84% 4.9%); --card-foreground: hsl(210 40% 98%); --popover: hsl(222.2 84% 4.9%); --popover-foreground: hsl(210 40% 98%); --primary: hsl(210 40% 98%); --primary-foreground: hsl(222.2 47.4% 11.2%); --secondary: hsl(217.2 32.6% 17.5%); --secondary-foreground: hsl(210 40% 98%); --muted: hsl(217.2 32.6% 17.5%); --muted-foreground: hsl(215 20.2% 65.1%); --accent: hsl(217.2 32.6% 17.5%); --accent-foreground: hsl(210 40% 98%); --destructive: hsl(0 62.8% 30.6%); --destructive-foreground: hsl(210 40% 98%); --border: hsl(217.2 32.6% 17.5%); --input: hsl(217.2 32.6% 17.5%); --ring: hsl(212.7 26.8% 83.9%); } /* Added Tailwind v4 @theme for custom design tokens */ @theme { /* Lion-themed color palette */ --color-lion-orange: #ff6b00; --color-lion-orange-light: #ff8a3d; --color-lion-orange-dark: #e55a00; --color-lion-red: #ff2d00; --color-lion-red-light: #ff5c3d; --color-lion-red-dark: #e52800; --color-lion-teal: #0a7b7d; --color-lion-teal-light: #0e9799; --color-lion-teal-dark: #086466; --color-lion-face: #ffd699; --color-lion-face-light: #ffeac7; --color-lion-face-dark: #f5c170; --color-lion-accent: #2d3748; --color-lion-accent-light: #4a5568; --color-lion-accent-dark: #1a202c; /* Border radius tokens */ --radius-lg: 1rem; --radius-md: 0.75rem; --radius-sm: 0.5rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; /* Animation keyframes */ --animate-accordion-down: accordion-down 0.2s ease-out; --animate-accordion-up: accordion-up 0.2s ease-out; --animate-bounce-subtle: bounce-subtle 2s ease-in-out infinite; --animate-pulse-subtle: pulse-subtle 2s ease-in-out infinite; /* Box shadows */ --shadow-lion: 0 10px 25px -5px rgba(255, 107, 0, 0.1), 0 8px 10px -6px rgba(255, 107, 0, 0.1); --shadow-lion-teal: 0 10px 25px -5px rgba(10, 123, 125, 0.1), 0 8px 10px -6px rgba(10, 123, 125, 0.1); } @keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } } @keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes pulse-subtle { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } /* Base styles */ * { border-color: var(--border); } body { background-color: var(--background); color: var(--foreground); } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "BitBee - 獎勵任務平台", description: "完成任務獲取獎勵", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/liff-page.tsx" "use client" import { useEffect, useState } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Progress } from "@/components/ui/progress" import { Gift, Copy, Users } from "lucide-react" import { useLiff } from "./liff-provider" import { toast } from "@/components/ui/use-toast" import { LineConnectButton } from "@/components/line-connect-button" // Replace with your actual LIFF ID const LIFF_ID = "YOUR_LIFF_ID" export default function LiffPage() { const { isLoggedIn, profile, loading } = useLiff() const [referralLink, setReferralLink] = useState("") const [dailyRewardClaimed, setDailyRewardClaimed] = useState(false) useEffect(() => { // Generate a random referral link for demo purposes if (profile) { const randomRef = Math.random().toString(36).substring(2, 8) setReferralLink(`https://bitbee.app/register?ref=${randomRef}`) } }, [profile]) const copyReferralLink = () => { navigator.clipboard.writeText(referralLink) toast({ title: "Link copied!", description: "Referral link copied to clipboard", }) } const claimDailyReward = () => { setDailyRewardClaimed(true) toast({ title: "Reward claimed!", description: "You've received +0.0000037 WBTC", }) } const handleLogin = () => { // This would normally call loginWithLine() from lib/liff.ts console.log("Connecting to LINE wallet...") } return (

{/* Header */}

🐾

BitBee

完成任務獲取獎勵

{/* LINE Wallet Connection Card */}

🐾 連接 LINE 錢包

連接您的 LINE 錢包以查看您的代幣並參與任務

{isLoggedIn ? (

已連接

{profile?.displayName ? `歡迎, ${profile.displayName}` : "LINE 錢包已成功連接"}

) : ( )}

{/* Daily Login Challenge Card */}

🐾 每日連續登入挑戰

{/* Day Progress */}

{[ { day: 1, reward: "+1", active: true }, { day: 2, reward: "+1", active: true }, { day: 3, reward: "+2", active: false }, { day: 4, reward: "+2", active: false }, { day: 5, reward: "+3", active: false }, { day: 6, reward: "+3", active: false }, { day: 7, reward: "+10 🎁", active: false, special: true }, ].map((item, index) => (

{item.special ? "🎁" : item.day}

))}

開始您的獎勵之旅！

{/* Referral Program Card */}

BitBee

完成任務獲取獎勵

{/* Token Balance Display Section */}

王琳瑄Coco的錢包

HONEY x 30

USDT

x 0

WBTC

x 0.0000037

{/* LINE Wallet Connection Card */} {!isWalletConnected && (

🐾 連接 LINE 錢包

連接您的 LINE 錢包以查看您的代幣並參與任務

)} {/* Daily Login Challenge Card */}

🐾 每日連續登入挑戰

完成七天簽到獎勵：+0.0000037 WBTC

{/* Day Progress */}

{loginStreak.days.map((day, index) => (

{index === 6 ? "🎁" : index + 1}

))}

{loginStreak.currentDay === 6 && loginStreak.days[6].completed ? "恭喜完成連續登入挑戰！" : `連續登入: ${loginStreak.currentDay + 1}/7 天`}

{/* Referral Program Card */}

BitBee 推薦計劃

邀請朋友加入 BitBee，雙方都能獲得獎勵！

推薦獎勵

+10 $HONEY

已推薦: 35 人

邀請朋友加入 BitBee，當他們使用您的推薦連結註冊時，您們雙方都將獲得{" "} 10 $HONEY 獎勵！

{/* Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" "use client" import type React from "react" import { Card } from "@/components/ui/card" import { BottomNavigation } from "@/components/bottom-navigation" import { Trophy, RefreshCw, Users, Star } from "lucide-react" import { Progress } from "@/components/ui/progress" import { LionLogo } from "@/components/lion-logo" export default function ProfilePage() { return (

成就

{/* Stats Cards */}

{/* Achievements */}

成就

} title="早期採用者" description="在發布月份加入" status={ 已解鎖 } /> } title="連續簽到大師" description="連續簽到天數" currentValue={3} levels={[ { target: 3, reward: "初級簽到", achieved: true }, { target: 7, reward: "週簽達人", achieved: false }, { target: 14, reward: "雙週勇士", achieved: false }, { target: 30, reward: "月度冠軍", achieved: false }, { target: 60, reward: "季度之星", achieved: false }, { target: 90, reward: "季度大師", achieved: false }, { target: 180, reward: "半年傳說", achieved: false }, ]} unit="天" colorClass="orange" /> } title="推薦大師" description="推薦更多的朋友參與" currentValue={35} levels={[ { target: 10, reward: "一星推薦", achieved: true }, { target: 25, reward: "二星推薦", achieved: true }, { target: 50, reward: "三星推薦", achieved: false }, { target: 75, reward: "四星推薦", achieved: false }, { target: 100, reward: "五星推薦", achieved: false }, { target: 150, reward: "專業推薦", achieved: false }, { target: 200, reward: "頂級推薦", achieved: false }, ]} unit="人" colorClass="teal" />

) } interface StatsCardProps { title: string value: string } function StatsCard({ title, value }: StatsCardProps) { return (

{title}

{value}

) } interface AchievementProps { icon: React.ReactNode title: string description: string status: React.ReactNode } function Achievement({ icon, title, description, status }: AchievementProps) { return (

{icon}

{title}

{description}

{status}

) } interface Level { target: number reward: string achieved: boolean } interface MultiLevelAchievementProps { icon: React.ReactNode title: string description: string currentValue: number levels: Level[] unit?: string colorClass?: "orange" | "teal" | "green" | "yellow" } function MultiLevelAchievement({ icon, title, description, currentValue, levels, unit = "", colorClass = "orange", }: MultiLevelAchievementProps) { // Find the current level and next level const currentLevelIndex = levels.findIndex((level) => !level.achieved) const currentLevel = currentLevelIndex > 0 ? levels[currentLevelIndex - 1] : null const nextLevel = currentLevelIndex >= 0 ? levels[currentLevelIndex] : levels[levels.length - 1] // Calculate progress percentage const prevTarget = currentLevelIndex > 0 ? levels[currentLevelIndex - 1].target : 0 const progressValue = nextLevel ? Math.min(((currentValue - prevTarget) / (nextLevel.target - prevTarget)) * 100, 100) : 100 // Color classes based on the colorClass prop const colorClasses = { orange: { bg: "bg-lion-orange/20", text: "text-lion-orange", fill: "text-lion-orange fill-lion-orange", progress: "bg-gradient-to-r from-lion-orange to-lion-red", light: "bg-lion-orange/30 text-lion-orange", medium: "bg-gradient-to-r from-lion-orange to-lion-red text-white", }, teal: { bg: "bg-lion-teal/20", text: "text-lion-teal", fill: "text-lion-teal fill-lion-teal", progress: "bg-gradient-to-r from-lion-teal to-lion-teal-dark", light: "bg-lion-teal/30 text-lion-teal", medium: "bg-gradient-to-r from-lion-teal to-lion-teal-dark text-white", }, green: { bg: "bg-green-100", text: "text-green-800", fill: "text-green-500 fill-green-500", progress: "bg-green-500", light: "bg-green-200 text-green-800", medium: "bg-green-500 text-white", }, yellow: { bg: "bg-yellow-100", text: "text-yellow-800", fill: "text-yellow-500 fill-yellow-500", progress: "bg-yellow-500", light: "bg-yellow-200 text-yellow-800", medium: "bg-yellow-500 text-white", }, } const colors = colorClasses[colorClass] return (

{icon}

{title}

{description}

{[...Array(5)].map((_, i) => ( ))}

目前: {currentValue} {unit} {currentLevel ? currentLevel.reward : "尚未達成"}

{prevTarget} {nextLevel ? nextLevel.target : levels[levels.length - 1].target} {unit}

下一等級: {nextLevel ? nextLevel.reward : "已達最高等級"} {nextLevel && ( {" "} (還需 {nextLevel.target - currentValue} {unit}) )}

{levels.map((level, index) => (

{index + 1}

{level.target}人

))}

) } [V0_FILE]typescriptreact:file="app/rewards/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { BottomNavigation } from "@/components/bottom-navigation" import { LionLogo } from "@/components/lion-logo" import { ChevronLeft, ChevronRight } from "lucide-react" export default function RewardsPage() { // Sample reward history data const rewardHistory = [ { id: 1, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-11 13:45" }, { id: 2, type: "加入社區", token: "ZOO", amount: 3, timestamp: "2025-05-10 18:22" }, { id: 3, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-10 09:15" }, { id: 4, type: "推薦朋友", token: "ZOO", amount: 10, timestamp: "2025-05-09 14:37" }, { id: 5, type: "加密貨幣測驗", token: "WBTC", amount: 0.0001, timestamp: "2025-05-08 20:11" }, { id: 6, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-08 10:05" }, { id: 7, type: "社交媒體分享", token: "ZOO", amount: 5, timestamp: "2025-05-07 16:48" }, { id: 8, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-07 08:30" }, { id: 9, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-06 09:12" }, { id: 10, type: "加入社區", token: "ZOO", amount: 3, timestamp: "2025-05-05 14:22" }, { id: 11, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-05 08:45" }, { id: 12, type: "推薦朋友", token: "ZOO", amount: 10, timestamp: "2025-05-04 16:37" }, { id: 13, type: "加密貨幣測驗", token: "WBTC", amount: 0.0001, timestamp: "2025-05-03 11:11" }, { id: 14, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-03 09:05" }, { id: 15, type: "社交媒體分享", token: "ZOO", amount: 5, timestamp: "2025-05-02 15:48" }, { id: 16, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-02 08:30" }, { id: 17, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-05-01 09:22" }, { id: 18, type: "加入社區", token: "ZOO", amount: 3, timestamp: "2025-04-30 17:22" }, { id: 19, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-04-30 08:15" }, { id: 20, type: "推薦朋友", token: "ZOO", amount: 10, timestamp: "2025-04-29 13:37" }, { id: 21, type: "加密貨幣測驗", token: "WBTC", amount: 0.0001, timestamp: "2025-04-28 19:11" }, { id: 22, type: "每日簽到", token: "KAIA", amount: 1, timestamp: "2025-04-28 09:05" }, ] // Pagination state const [currentPage, setCurrentPage] = useState(1) const itemsPerPage = 10 const totalPages = Math.ceil(rewardHistory.length / itemsPerPage) // Get current page items const getCurrentPageItems = () => { const startIndex = (currentPage - 1) * itemsPerPage const endIndex = startIndex + itemsPerPage return rewardHistory.slice(startIndex, endIndex) } // Navigation functions const goToNextPage = () => { if (currentPage < totalPages) { setCurrentPage(currentPage + 1) } } const goToPreviousPage = () => { if (currentPage > 1) { setCurrentPage(currentPage - 1) } } // Function to get the token icon based on token name const getTokenIcon = (token: string) => { switch (token) { case "KAIA": return "/images/kaia-token.png" case "ZOO": return "/images/zoo-token.png" case "WBTC": return "/images/wbtc-token.png" default: return "/images/kaia-token.png" } } // Function to get token color const getTokenColor = (token: string) => { switch (token) { case "KAIA": return "text-lion-orange" case "ZOO": return "text-lion-teal" case "WBTC": return "text-orange-500" default: return "text-lion-orange" } } return (

獎勵中心

獎勵歷史

共 {rewardHistory.length} 筆記錄

{getCurrentPageItems().map((reward) => (

{reward.type}

{reward.timestamp}

+ {reward.amount} ${reward.token}

))}

{/* Pagination Controls */}

{currentPage} / {totalPages}

) } [V0_FILE]typescriptreact:file="app/tasks/page.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { MessageSquare, ChevronDown, ChevronUp, Check, ExternalLink, ShieldCheck } from "lucide-react" import { BottomNavigation } from "@/components/bottom-navigation" import { LionLogo } from "@/components/lion-logo" import { toast } from "@/components/ui/use-toast" import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" export default function TasksPage() { const [completedTasks, setCompletedTasks] = useState([]) const [referralLink, setReferralLink] = useState("") const [discordVerifying, setDiscordVerifying] = useState(false) const [identityVerifying, setIdentityVerifying] = useState(false) const [showPrerequisiteDialog, setShowPrerequisiteDialog] = useState(false) useEffect(() => { // Generate referral link - you can customize this logic const savedReferralLink = localStorage.getItem("referralLink") if (savedReferralLink) { setReferralLink(savedReferralLink) } else { const randomRef = Math.random().toString(36).substring(2, 8) const newLink = `https://bitbee.app/register?ref=${randomRef}` setReferralLink(newLink) localStorage.setItem("referralLink", newLink) } }, []) // Function to mark a task as completed const completeTask = (taskId: string, reward: string) => { if (!completedTasks.includes(taskId)) { setCompletedTasks([...completedTasks, taskId]) toast({ title: "任務完成!", description: `您獲得了 ${reward}`, }) } } // Simulate Discord OAuth callback const handleDiscordCallback = async () => { if (!completedTasks.includes("identity")) { toast({ title: "請先完成首要任務", description: "您需要先完成身分驗證才能進行其他任務", variant: "destructive", }) return } setDiscordVerifying(true) try { // In a real app, this would verify the Discord OAuth callback // For now, we'll simulate the verification process await new Promise((resolve) => setTimeout(resolve, 2000)) completeTask("discord", "+5 $HONEY") toast({ title: "Discord 驗證成功!", description: "您已成功加入社區並完成驗證", }) } catch (error) { toast({ title: "驗證失敗", description: "請確保您已加入 Discord 社區", }) } finally { setDiscordVerifying(false) } } const handleIdentityVerification = async () => { setIdentityVerifying(true) try { await new Promise((resolve) => setTimeout(resolve, 2000)) completeTask("identity", "+10 $HONEY") toast({ title: "身分驗證成功!", description: "您已成功完成身分驗證", }) } catch (error) { toast({ title: "驗證失敗", description: "請確保您已完成所有驗證步驟", }) } finally { setIdentityVerifying(false) } } return (

{/* Header */}

任務中心

{/* Tasks List */}

{/* Task Cards */}

} title="首要任務: 證明你是人類" description="完成 twin3 身分驗證以獲得獎勵" reward="+10 $HONEY" isCompleted={completedTasks.includes("identity")} onComplete={() => completeTask("identity", "+10 $HONEY")} onIdentityCallback={handleIdentityVerification} isVerifying={identityVerifying} /> {/* Discord Task */} } title="加入 Discord 社區" description="加入 BitBee 官方 Discord 社區" reward="+5 $HONEY" isCompleted={completedTasks.includes("discord")} onComplete={() => completeTask("discord", "+5 $HONEY")} onDiscordCallback={handleDiscordCallback} isVerifying={discordVerifying} completedTasks={completedTasks} onShowPrerequisite={() => setShowPrerequisiteDialog(true)} />

{/* Bottom Navigation */} 請先完成首要任務您需要先完成身分驗證才能進行其他任務確定

) } interface TaskCardProps { id: string icon: React.ReactNode title: string description: string reward: string isCompleted?: boolean onComplete: () => void onDiscordCallback?: () => void onIdentityCallback?: () => void referralLink?: string isVerifying?: boolean completedTasks?: string[] onShowPrerequisite?: () => void } function TaskCard({ id, icon, title, description, reward, isCompleted = false, onComplete, onDiscordCallback, onIdentityCallback, referralLink = "", isVerifying = false, completedTasks = [], onShowPrerequisite, }: TaskCardProps) { const [isExpanded, setIsExpanded] = useState(false) // Toggle expanded state const toggleExpand = () => { if (!isCompleted) { setIsExpanded(!isExpanded) } } // Handle Discord join const handleDiscordJoin = (e: React.MouseEvent) => { e.stopPropagation() if (id === "discord" && !completedTasks.includes("identity")) { if (onShowPrerequisite) { onShowPrerequisite() } return } window.open("https://discord.gg/zoo3", "_blank") if (id === "discord" && onDiscordCallback) { setTimeout(() => { onDiscordCallback() }, 2000) } } const handleIdentityVerify = (e: React.MouseEvent) => { e.stopPropagation() window.open("https://twin3.ai/verify", "_blank") if (id === "identity" && onIdentityCallback) { setTimeout(() => { onIdentityCallback() }, 2000) } } return (

{isCompleted ? : icon}

{title}

{description}

{reward}

{!isCompleted && (

{isExpanded ? : }

)}

{/* Expanded content */} {isExpanded && !isCompleted && (

{id === "identity" && (

完成以下步驟以獲得獎勵：

點擊下方按鈕開始驗證

返回此頁面點擊「驗證完成」按鈕

完成驗證後即可獲得 +10 $HONEY 獎勵
verify powered by twin3

)} {id === "discord" && (

完成以下步驟以獲得獎勵：

點擊下方按鈕加入 Discord 社區

返回此頁面點擊「驗證加入」按鈕

完成驗證後即可獲得 +5 $HONEY 獎勵

)}

)} {/* Completed state */} {isCompleted && (

任務已完成！

)}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "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/bottom-navigation.tsx" "use client" import type React from "react" import Link from "next/link" import { Home, ListTodo, Gift, User } from "lucide-react" interface BottomNavigationProps { activeTab: "home" | "tasks" | "rewards" | "profile" } export function BottomNavigation({ activeTab }: BottomNavigationProps) { return (

} label="首頁" isActive={activeTab === "home"} /> } label="任務" isActive={activeTab === "tasks"} /> } label="獎勵" isActive={activeTab === "rewards"} /> } label="成就" isActive={activeTab === "profile"} />

) } interface NavItemProps { href: string icon: React.ReactNode label: string isActive: boolean } function NavItem({ href, icon, label, isActive }: NavItemProps) { return (

{icon}

{label} ) } [V0_FILE]typescriptreact:file="components/line-connect-button.tsx" "use client" import Image from "next/image" import { cn } from "@/lib/utils" interface LineConnectButtonProps { onClick: () => void isConnected?: boolean isLoading?: boolean className?: string } export function LineConnectButton({ onClick, isConnected = false, isLoading = false, className, }: LineConnectButtonProps) { return ( ) } [V0_FILE]typescriptreact:file="components/line-login-button.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { initializeLiff, loginWithLine } from "@/lib/liff" import Image from "next/image" interface LineLoginButtonProps { liffId: string onSuccess?: () => void onError?: (error: Error) => void className?: string children?: React.ReactNode } export function LineLoginButton({ liffId, onSuccess, onError, className, children = "Connect LINE Wallet", }: LineLoginButtonProps) { const [isInitialized, setIsInitialized] = useState(false) const [isLoading, setIsLoading] = useState(false) useEffect(() => { const initialize = async () => { try { setIsLoading(true) const success = await initializeLiff(liffId) setIsInitialized(success) if (success && onSuccess) { onSuccess() } } catch (error) { console.error("Failed to initialize LIFF:", error) if (onError && error instanceof Error) { onError(error) } } finally { setIsLoading(false) } } initialize() }, [liffId, onSuccess, onError]) const handleLogin = () => { if (!isInitialized) { console.error("LIFF is not initialized") return } try { setIsLoading(true) loginWithLine() } catch (error) { console.error("Failed to login with LINE:", error) if (onError && error instanceof Error) { onError(error) } setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/lion-logo.tsx" import Image from "next/image" interface LionLogoProps { variant?: "orange" | "teal" size?: "sm" | "md" | "lg" | "xl" className?: string } export function LionLogo({ variant = "orange", size = "md", className = "" }: LionLogoProps) { const sizes = { sm: { width: 32, height: 32 }, md: { width: 48, height: 48 }, lg: { width: 64, height: 64 }, xl: { width: 96, height: 96 }, } const { width, height } = sizes[size] const src = "/images/bitbee-logo.png" return (

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" '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]typescriptreact:file="components/ui/alert-dialog.tsx" 'use client' import * as React from 'react' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogContent({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( ) } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-lion-orange text-white hover:bg-lion-orange-dark shadow-md hover:shadow-lg transition-all duration-200", destructive: "bg-lion-red text-white hover:bg-lion-red-dark shadow-md", outline: "border-2 border-lion-orange bg-transparent text-lion-orange hover:bg-lion-orange/10", secondary: "bg-lion-teal text-white hover:bg-lion-teal-dark shadow-md", ghost: "hover:bg-lion-face hover:text-lion-accent", link: "text-lion-orange underline-offset-4 hover:underline", teal: "bg-lion-teal text-white hover:bg-lion-teal-dark shadow-md hover:shadow-lg transition-all duration-200", orange: "bg-gradient-to-r from-lion-orange to-lion-red text-white hover:from-lion-orange-dark hover:to-lion-red-dark shadow-md hover:shadow-lg transition-all duration-200", face: "bg-lion-face text-lion-accent hover:bg-lion-face-dark shadow-md", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-lg px-3", lg: "h-11 rounded-xl px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" 'use client' import * as React from 'react' import * as ProgressPrimitive from '@radix-ui/react-progress' import { cn } from '@/lib/utils' function Progress({ className, value, ...props }: React.ComponentProps) { return ( ) } export { Progress } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" 'use client' import * as React from 'react' import * as ToastPrimitives from '@radix-ui/react-toast' import { cva, type VariantProps } from 'class-variance-authority' import { X } from 'lucide-react' import { cn } from '@/lib/utils' const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', { variants: { variant: { default: 'border bg-background text-foreground', destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return ( ) }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" 'use client' import { useToast } from '@/hooks/use-toast' import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from '@/components/ui/toast' export function Toaster() { const { toasts } = useToast() return ( {toasts.map(function ({ id, title, description, action, ...props }) { return (
{title && {title}} {description && ( {description} )}
{action} ) })} ) } [V0_FILE]typescript:file="components/ui/use-toast.ts" 'use client' // Inspired by react-hot-toast library import * as React from 'react' import type { ToastActionElement, ToastProps } from '@/components/ui/toast' const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: 'ADD_TOAST', UPDATE_TOAST: 'UPDATE_TOAST', DISMISS_TOAST: 'DISMISS_TOAST', REMOVE_TOAST: 'REMOVE_TOAST', } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType['ADD_TOAST'] toast: ToasterToast } | { type: ActionType['UPDATE_TOAST'] toast: Partial } | { type: ActionType['DISMISS_TOAST'] toastId?: ToasterToast['id'] } | { type: ActionType['REMOVE_TOAST'] toastId?: ToasterToast['id'] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: 'REMOVE_TOAST', toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case 'ADD_TOAST': return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case 'UPDATE_TOAST': return { ...state, toasts: state.toasts.map((t) => t.id === action.toast.id ? { ...t, ...action.toast } : t, ), } case 'DISMISS_TOAST': { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case 'REMOVE_TOAST': if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: 'UPDATE_TOAST', toast: { ...props, id }, }) const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id }) dispatch({ type: 'ADD_TOAST', toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }), } } export { useToast, toast } [V0_FILE]typescript:file="hooks/use-toast.ts" 'use client' // Inspired by react-hot-toast library import * as React from 'react' import type { ToastActionElement, ToastProps } from '@/components/ui/toast' const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: 'ADD_TOAST', UPDATE_TOAST: 'UPDATE_TOAST', DISMISS_TOAST: 'DISMISS_TOAST', REMOVE_TOAST: 'REMOVE_TOAST', } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType['ADD_TOAST'] toast: ToasterToast } | { type: ActionType['UPDATE_TOAST'] toast: Partial } | { type: ActionType['DISMISS_TOAST'] toastId?: ToasterToast['id'] } | { type: ActionType['REMOVE_TOAST'] toastId?: ToasterToast['id'] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: 'REMOVE_TOAST', toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case 'ADD_TOAST': return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case 'UPDATE_TOAST': return { ...state, toasts: state.toasts.map((t) => t.id === action.toast.id ? { ...t, ...action.toast } : t, ), } case 'DISMISS_TOAST': { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case 'REMOVE_TOAST': if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: 'UPDATE_TOAST', toast: { ...props, id }, }) const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id }) dispatch({ type: 'ADD_TOAST', toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }), } } export { useToast, toast } [V0_FILE]typescript:file="lib/discord-auth.ts" // Discord OAuth configuration const DISCORD_CLIENT_ID = process.env.NEXT_PUBLIC_DISCORD_CLIENT_ID || "YOUR_DISCORD_CLIENT_ID" const DISCORD_REDIRECT_URI = process.env.NEXT_PUBLIC_DISCORD_REDIRECT_URI || "https://bitbee.app/auth/discord/callback" const DISCORD_GUILD_ID = process.env.NEXT_PUBLIC_DISCORD_GUILD_ID || "YOUR_DISCORD_GUILD_ID" export interface DiscordUser { id: string username: string discriminator: string avatar: string verified: boolean email: string } export interface DiscordGuildMember { user: DiscordUser nick: string | null roles: string[] joined_at: string } // Generate Discord OAuth URL export function getDiscordAuthUrl(): string { const params = new URLSearchParams({ client_id: DISCORD_CLIENT_ID, redirect_uri: DISCORD_REDIRECT_URI, response_type: "code", scope: "identify guilds.join guilds.members.read", }) return `https://discord.com/api/oauth2/authorize?${params.toString()}` } // Exchange authorization code for access token export async function exchangeCodeForToken(code: string): Promise { const response = await fetch("https://discord.com/api/oauth2/token", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: new URLSearchParams({ client_id: DISCORD_CLIENT_ID, client_secret: process.env.DISCORD_CLIENT_SECRET || "", grant_type: "authorization_code", code, redirect_uri: DISCORD_REDIRECT_URI, }), }) const data = await response.json() return data.access_token } // Get Discord user information export async function getDiscordUser(accessToken: string): Promise { const response = await fetch("https://discord.com/api/users/@me", { headers: { Authorization: `Bearer ${accessToken}`, }, }) return response.json() } // Check if user is member of the guild export async function checkGuildMembership(accessToken: string): Promise { try { const response = await fetch(`https://discord.com/api/users/@me/guilds/${DISCORD_GUILD_ID}/member`, { headers: { Authorization: `Bearer ${accessToken}`, }, }) return response.ok } catch (error) { console.error("Error checking guild membership:", error) return false } } // Verify Discord task completion export async function verifyDiscordTask(userId: string): Promise { try { // Get stored Discord access token for this user const accessToken = localStorage.getItem(`discord_token_${userId}`) if (!accessToken) { return false } // Check if user is still a member of the guild const isMember = await checkGuildMembership(accessToken) return isMember } catch (error) { console.error("Error verifying Discord task:", error) return false } } [V0_FILE]typescript:file="lib/liff.ts" // LINE LIFF SDK integration // Type definitions for LINE LIFF SDK interface LiffProfile { userId: string displayName: string pictureUrl?: string statusMessage?: string } interface LiffContext { type: "utou" | "room" | "group" | "none" viewType: "compact" | "tall" | "full" userId?: string utouId?: string roomId?: string groupId?: string } interface Liff { init: (config: { liffId: string }) => Promise isLoggedIn: () => boolean login: (options?: { redirectUri?: string }) => void logout: () => void getProfile: () => Promise getContext: () => LiffContext openWindow: (params: { url: string; external: boolean }) => void closeWindow: () => void sendMessages: (messages: any[]) => Promise scanCode: () => Promise<{ value: string }> getAccessToken: () => string getIDToken: () => string getDecodedIDToken: () => any getOS: () => "ios" | "android" | "web" getLanguage: () => string getVersion: () => string isInClient: () => boolean isApiAvailable: (apiName: string) => boolean } declare global { interface Window { liff: Liff } } // Initialize LIFF export async function initializeLiff(liffId: string): Promise { try { if (typeof window === "undefined") { console.log("[v0] Not in browser environment, skipping LIFF init") return false } if (!window.liff) { try { const liffModule = await import("@line/liff") console.log("[v0] LIFF SDK loaded successfully") // Ensure the module is properly loaded if (!window.liff) { console.log("[v0] LIFF SDK loaded but not available on window object") return false } } catch (importError: any) { console.log( "[v0] LIFF SDK not available - this is expected in preview environment:", importError?.message || importError, ) // Return false gracefully instead of throwing error return false } } if (window.liff) { try { await window.liff.init({ liffId }) console.log("[v0] LIFF initialized successfully") return true } catch (initError: any) { console.log("[v0] LIFF init failed:", initError?.message || initError) return false } } return false } catch (error: any) { console.log("[v0] LIFF initialization skipped:", error?.message || error) // Return false instead of throwing to prevent app crashes return false } } // Get user profile export async function getUserProfile(): Promise { try { if (typeof window === "undefined" || !window.liff) { return null } if (!window.liff.isLoggedIn()) { console.log("User is not logged in") return null } return await window.liff.getProfile() } catch (error) { console.error("Failed to get user profile:", error) return null } } // Check if running in LINE environment export function isInLineApp(): boolean { if (typeof window === "undefined" || !window.liff) { return false } return window.liff.isInClient() } // Login with LINE export function loginWithLine(redirectUri?: string): void { if (typeof window === "undefined" || !window.liff) { return } window.liff.login({ redirectUri }) } // Logout from LINE export function logoutFromLine(): void { if (typeof window === "undefined" || !window.liff) { return } window.liff.logout() window.location.reload() } // Send message to LINE chat export async function sendMessage(message: string): Promise { try { if (typeof window === "undefined" || !window.liff || !window.liff.isInClient()) { return false } await window.liff.sendMessages([ { type: "text", text: message, }, ]) return true } catch (error) { console.error("Failed to send message:", error) return false } } // Close LIFF window export function closeLiffWindow(): void { if (typeof window === "undefined" || !window.liff) { return } window.liff.closeWindow() } // Get LINE access token export function getLineAccessToken(): string | null { if (typeof window === "undefined" || !window.liff || !window.liff.isLoggedIn()) { return null } return window.liff.getAccessToken() } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, eslint: { ignoreDuringBuilds: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@line/liff": "latest", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "latest", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "latest", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "latest", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "latest", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "^1.4.0", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} / const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark )); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", // Lion-themed color palette lion: { // Orange side orange: { DEFAULT: "#FF6B00", // Main orange light: "#FF8A3D", dark: "#E55A00", }, // Red side red: { DEFAULT: "#FF2D00", // Main red light: "#FF5C3D", dark: "#E52800", }, // Teal variant teal: { DEFAULT: "#0A7B7D", // Main teal light: "#0E9799", dark: "#086466", }, // Face colors face: { DEFAULT: "#FFD699", // Main beige light: "#FFEAC7", dark: "#F5C170", }, // Accent colors accent: { DEFAULT: "#2D3748", // Dark blue for text/accents light: "#4A5568", dark: "#1A202C", }, }, primary: { DEFAULT: "#FF6B00", // Orange from lion foreground: "#FFFFFF", }, secondary: { DEFAULT: "#0A7B7D", // Teal from lion foreground: "#FFFFFF", }, destructive: { DEFAULT: "#FF2D00", // Red from lion foreground: "#FFFFFF", }, muted: { DEFAULT: "#FFD699", // Beige from lion face foreground: "#2D3748", // Dark blue }, accent: { DEFAULT: "#0E9799", // Light teal foreground: "#FFFFFF", }, popover: { DEFAULT: "#FFFFFF", foreground: "#2D3748", // Dark blue }, card: { DEFAULT: "#FFFFFF", foreground: "#2D3748", // Dark blue }, }, borderRadius: { lg: "1rem", md: "0.75rem", sm: "0.5rem", xl: "1.5rem", "2xl": "2rem", }, 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" }, }, "bounce-subtle": { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-5px)" }, }, "pulse-subtle": { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.8" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "bounce-subtle": "bounce-subtle 2s ease-in-out infinite", "pulse-subtle": "pulse-subtle 2s ease-in-out infinite", }, boxShadow: { lion: "0 10px 25px -5px rgba(255, 107, 0, 0.1), 0 8px 10px -6px rgba(255, 107, 0, 0.1)", "lion-teal": "0 10px 25px -5px rgba(10, 123, 125, 0.1), 0 8px 10px -6px rgba(10, 123, 125, 0.1)", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]json:file="tsconfig.json" { "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/discord-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/RJ2Q-VuKU3KdluSAoxIbqY/public/discord-logo.png" [V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" [V0_FILE]png:file="public/images/bitbee-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/3Xtc69Q1T87ZzMSOb5YWQy/public/images/bitbee-logo.png" [V0_FILE]png:file="public/images/honey-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/RqDLqdozH3ff-VyK071xld/public/images/honey-icon.png" [V0_FILE]png:file="public/images/kaia-token.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/mi1YIlKUOYZn9SvMbArnzc/public/images/kaia-token.png" [V0_FILE]png:file="public/images/line-wallet-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/uZLvnN8ONTmqBnoATMwLyh/public/images/line-wallet-icon.png" [V0_FILE]png:file="public/images/lion-logo-teal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/vPWc5773QfUh81xKwEOcox/public/images/lion-logo-teal.png" [V0_FILE]png:file="public/images/lion-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/vgiBDOBmslDSoU1A0LXIFY/public/images/lion-logo.png" [V0_FILE]xml:file="public/images/usdt-icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/elYdLViv9ReL4_0kFc2UY_/public/images/usdt-icon.svg" [V0_FILE]jpg:file="public/images/usdt-token.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/DO4m6jkIgg8ShTIQIfRaIm/public/images/usdt-token.jpg" [V0_FILE]png:file="public/images/wbtc-token.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/aTiqabMdOmuwsMgM577T7c/public/images/wbtc-token.png" [V0_FILE]png:file="public/images/zoo-token.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/vPWc5773QfUh81xKwEOcox/public/images/zoo-token.png" [V0_FILE]png:file="public/line-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/JFXnVnYq6n3fq80w3Bze6L/public/line-logo.png" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fOFIHxlC4BlYBD3jiPGZiAoJfOi0/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"