[V0_FILE]typescriptreact:file="app/buy/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { ArrowLeft, Coins } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useWalletConnect } from "@/hooks/use-wallet-connect" import { useTokenPurchase } from "@/hooks/use-token-purchase" import { ConnectWalletButton } from "@/components/connect-wallet-button" import PurchaseModal from "@/components/purchase-modal" export default function BuyPage() { const { isConnected, address } = useWalletConnect() const [tokenAmount, setTokenAmount] = useState("") const [usdtAmount, setUsdtAmount] = useState("") const [showPurchaseModal, setShowPurchaseModal] = useState(false) const { calculateUsdtAmount, calculateTokenAmount } = useTokenPurchase() const handleTokenAmountChange = (e: React.ChangeEvent) => { const value = e.target.value setTokenAmount(value) if (value) { setUsdtAmount(calculateUsdtAmount(value)) } else { setUsdtAmount("") } } const handleUsdtAmountChange = (e: React.ChangeEvent) => { const value = e.target.value setUsdtAmount(value) if (value) { setTokenAmount(calculateTokenAmount(value)) } else { setTokenAmount("") } } const handleBuyClick = () => { if (!isConnected) return if (!tokenAmount || Number.parseFloat(tokenAmount) <= 0) return setShowPurchaseModal(true) } return (

TokenSale

Back to Home Buy Tokens Current price: 1 Token = 0.03 USDT

Token Amount

TOKEN

USDT Amount

USDT

Exchange Rate 1 TOKEN = 0.03 USDT

Minimum Purchase 100 TOKEN

{!isConnected && (

Please connect your wallet to purchase tokens

)}

{showPurchaseModal && ( setShowPurchaseModal(false)} /> )}

) } [V0_FILE]typescriptreact:file="components/connect-wallet-button.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Wallet } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { useWalletConnect } from "@/hooks/use-wallet-connect" export function ConnectWalletButton() { const [showConnectModal, setShowConnectModal] = useState(false) const { isConnected, address, connect, disconnect } = useWalletConnect() const handleConnectClick = () => { if (isConnected) { disconnect() } else { setShowConnectModal(true) } } const handleConnectWallet = async () => { await connect() setShowConnectModal(false) } return ( <> ) } [V0_FILE]typescriptreact:file="components/purchase-modal.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Check, Loader2 } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { useTokenPurchase } from "@/hooks/use-token-purchase" interface PurchaseModalProps { tokenAmount: string usdtAmount: string onClose: () => void } export default function PurchaseModal({ tokenAmount, usdtAmount, onClose }: PurchaseModalProps) { const [step, setStep] = useState<"check" | "approve" | "confirm">("check") const [loading, setLoading] = useState(false) const [success, setSuccess] = useState(false) const { checkAllowance, approveUsdt, buyTokens } = useTokenPurchase() useEffect(() => { const checkUserAllowance = async () => { setLoading(true) try { const hasAllowance = await checkAllowance(usdtAmount) setStep(hasAllowance ? "confirm" : "approve") } catch (error) { console.error("Error checking allowance:", error) } finally { setLoading(false) } } checkUserAllowance() }, [checkAllowance, usdtAmount]) const handleApprove = async () => { setLoading(true) try { await approveUsdt(usdtAmount) setStep("confirm") } catch (error) { console.error("Error approving USDT:", error) } finally { setLoading(false) } } const handleConfirm = async () => { setLoading(true) try { await buyTokens(tokenAmount, usdtAmount) setSuccess(true) setTimeout(() => { onClose() }, 3000) } catch (error) { console.error("Error buying tokens:", error) } finally { setLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="hooks/use-wallet-connect.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, createContext, useContext, type ReactNode } from "react" interface WalletContextType { isConnected: boolean address: string | null connect: () => Promise disconnect: () => void } const WalletContext = createContext({ isConnected: false, address: null, connect: async () => {}, disconnect: () => {}, }) export function WalletProvider({ children }: { children: ReactNode }) { const [isConnected, setIsConnected] = useState(false) const [address, setAddress] = useState(null) // Check if wallet is already connected on mount useEffect(() => { const checkConnection = async () => { if (typeof window !== "undefined" && window.ethereum) { try { // Check if already connected const accounts = await window.ethereum.request({ method: "eth_accounts" }) if (accounts.length > 0) { setAddress(accounts[0]) setIsConnected(true) } } catch (error) { console.error("Error checking connection:", error) } } } checkConnection() }, []) // Listen for account changes useEffect(() => { if (typeof window !== "undefined" && window.ethereum) { const handleAccountsChanged = (accounts: string[]) => { if (accounts.length === 0) { // User disconnected setIsConnected(false) setAddress(null) } else { // Account changed setAddress(accounts[0]) setIsConnected(true) } } window.ethereum.on("accountsChanged", handleAccountsChanged) return () => { window.ethereum.removeListener("accountsChanged", handleAccountsChanged) } } }, []) const connect = async () => { if (typeof window !== "undefined" && window.ethereum) { try { const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }) setAddress(accounts[0]) setIsConnected(true) return accounts[0] } catch (error) { console.error("Error connecting wallet:", error) throw error } } else { window.open("https://metamask.io/download/", "_blank") throw new Error("MetaMask is not installed") } } const disconnect = () => { setIsConnected(false) setAddress(null) } return ( {children} ) } export const useWalletConnect = () => useContext(WalletContext) // Add this to your global.d.ts file or create one if it doesn't exist declare global { interface Window { ethereum?: any } } [V0_FILE]typescriptreact:file="hooks/use-token-purchase.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { useWalletConnect } from "./use-wallet-connect" // Token price in USDT const TOKEN_PRICE = 0.03 export function useTokenPurchase() { const { isConnected, address } = useWalletConnect() const [isLoading, setIsLoading] = useState(false) // Calculate USDT amount based on token amount const calculateUsdtAmount = (tokenAmount: string): string => { if (!tokenAmount || isNaN(Number.parseFloat(tokenAmount))) return "" const usdtAmount = Number.parseFloat(tokenAmount) * TOKEN_PRICE return usdtAmount.toFixed(6) } // Calculate token amount based on USDT amount const calculateTokenAmount = (usdtAmount: string): string => { if (!usdtAmount || isNaN(Number.parseFloat(usdtAmount))) return "" const tokenAmount = Number.parseFloat(usdtAmount) / TOKEN_PRICE return tokenAmount.toFixed(2) } // Check if user has enough USDT allowance for the contract const checkAllowance = async (usdtAmount: string): Promise => { if (!isConnected || !address) return false // In a real implementation, you would: // 1. Get the USDT contract instance // 2. Call allowance(userAddress, presaleContractAddress) // 3. Compare with the required amount // Simulating API call setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 1500)) setIsLoading(false) // For demo purposes, randomly return true or false return Math.random() > 0.5 } // Approve USDT spending for the contract const approveUsdt = async (usdtAmount: string): Promise => { if (!isConnected || !address) throw new Error("Wallet not connected") // In a real implementation, you would: // 1. Get the USDT contract instance // 2. Call approve(presaleContractAddress, amount) // Simulating API call setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 2000)) setIsLoading(false) } // Buy tokens with USDT const buyTokens = async (tokenAmount: string, usdtAmount: string): Promise => { if (!isConnected || !address) throw new Error("Wallet not connected") // In a real implementation, you would: // 1. Get the presale contract instance // 2. Call the buy function with the token amount // Simulating API call setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 3000)) setIsLoading(false) } return { isLoading, calculateUsdtAmount, calculateTokenAmount, checkAllowance, approveUsdt, buyTokens, } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { WalletProvider } from "@/hooks/use-wallet-connect" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "TokenSale - ERC20 Token Presale", description: "Participate in our ERC20 token presale. Get tokens at the best price before they hit the market.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isMerged="true" 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-md 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-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md 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" isEdit="true" isMerged="true" 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, CardTitle, CardDescription, CardContent, CardFooter } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true" "use client" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from "lucide-react" import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( )) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 210 100% 35%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 210 100% 35%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 100% 50%; --primary-foreground: 0 0% 100%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 210 100% 50%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], 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))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, 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", }, gradients: { "primary-gradient": "linear-gradient(135deg, hsl(210, 100%, 35%) 0%, hsl(210, 100%, 25%) 100%)", "secondary-gradient": "linear-gradient(135deg, hsl(210, 40%, 96.1%) 0%, hsl(210, 40%, 90%) 100%)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import Link from "next/link" import { ArrowRight, ChevronRight, Coins, Shield, Zap } from "lucide-react" import { Button } from "@/components/ui/button" import TokenStats from "@/components/token-stats" import CountdownTimer from "@/components/countdown-timer" export default function LandingPage() { return (

TokenSale

Home About Tokenomics Roadmap

The Next Generation Token Presale

Secure your tokens at the best price before they hit the market. Limited time offer with increasing price tiers.

Presale Ends In

Current Price $0.03 USDT

Next Price $0.05 USDT

Tokens Sold 7,500,000 / 10,000,000

About Our Token

Our ERC20 token is designed to revolutionize the way people interact with decentralized finance. With a focus on security, scalability, and user experience, we're building the future of digital assets.

Secure & Audited

Our smart contracts have been thoroughly audited by leading security firms to ensure your assets are safe.

High Performance

Built on Ethereum with optimizations for speed and low gas fees, our token is designed for real-world use.

Tokenomics

Carefully designed token distribution and utility to ensure long-term value and sustainable growth.

Tokenomics

Our token distribution is designed to ensure long-term sustainability and value for all holders.

Token Distribution

Presale 40%

Liquidity 30%

Team & Development 15%

Marketing 10%

Reserve 5%

Token Details

Token Name TokenSale

Token Symbol TKS

Total Supply 100,000,000 TKS

Presale Supply 40,000,000 TKS

Initial Price $0.03 USDT

Listing Price $0.06 USDT

Network Ethereum

Roadmap

Our strategic plan for development and growth over the coming months.

Q1 2025: Presale Launch

Initial token presale with tiered pricing structure. Community building and marketing campaigns.

Q2 2025: DEX Listing

Token listing on decentralized exchanges. Liquidity pool establishment and trading begins.

Q3 2025: Platform Development

Launch of core platform features. Integration with major DeFi protocols. Staking program begins.

Q4 2025: Ecosystem Expansion

Cross-chain integration. Partnership announcements. Enhanced utility features and governance implementation.

Q1 2026: Global Adoption

Major exchange listings. Mobile app launch. Enterprise partnerships and real-world use case implementation.

Ready to Join the Presale?

Don't miss your chance to get tokens at the best possible price before they hit the market.

© 2025 TokenSale. All rights reserved.

Terms Privacy Contact

) } [V0_FILE]typescriptreact:file="components/token-stats.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { ArrowUpRight, TrendingUp, Users, Wallet } from "lucide-react" export default function TokenStats() { const [stats, setStats] = useState({ totalRaised: "1,250,000", participants: "3,750", averagePurchase: "333", nextPriceIncrease: "2d 14h 22m", }) // In a real app, you would fetch this data from your backend or blockchain useEffect(() => { // Simulating data fetch const interval = setInterval(() => { const randomIncrease = Math.floor(Math.random() * 10000) const newParticipants = Math.floor(Math.random() * 10) + 1 setStats((prev) => ({ totalRaised: (Number.parseInt(prev.totalRaised.replace(/,/g, "")) + randomIncrease).toLocaleString(), participants: (Number.parseInt(prev.participants.replace(/,/g, "")) + newParticipants).toLocaleString(), averagePurchase: Math.floor( Number.parseInt(prev.totalRaised.replace(/,/g, "")) / Number.parseInt(prev.participants.replace(/,/g, "")), ).toLocaleString(), nextPriceIncrease: prev.nextPriceIncrease, })) }, 30000) // Update every 30 seconds return () => clearInterval(interval) }, []) return (

Total Raised

${stats.totalRaised}

+5.2%

Participants

{stats.participants}

+12.8%

Avg. Purchase

${stats.averagePurchase}

Next Price Increase

{stats.nextPriceIncrease}

) } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" interface CountdownTimerProps { targetDate: string } export default function CountdownTimer({ targetDate }: CountdownTimerProps) { const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, }) useEffect(() => { const calculateTimeLeft = () => { const difference = new Date(targetDate).getTime() - new Date().getTime() if (difference > 0) { setTimeLeft({ days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), }) } else { setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }) } } calculateTimeLeft() const timer = setInterval(calculateTimeLeft, 1000) return () => clearInterval(timer) }, [targetDate]) return (

{timeLeft.days} Days

{timeLeft.hours} Hours

{timeLeft.minutes} Minutes

{timeLeft.seconds} Seconds

) }

About

Tags

Share

About

Tags

Share

More from nnlgsakib

More Templates Like This

About

Tags

Share

About

Tags

Share

More from nnlgsakib

More Templates Like This