[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Manrope } from "next/font/google" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import { AuthProvider } from "@/components/auth-provider" import "./globals.css" const manrope = Manrope({ subsets: ["latin"], variable: "--font-manrope", }) export const metadata: Metadata = { title: "Immediate Edge - Professional Trading Platform", description: "Real-time cryptocurrency trading with advanced charts and portfolio tracking", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/order-book.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" interface OrderBookEntry { price: number amount: number total: number } export function OrderBook() { const bids: OrderBookEntry[] = [ { price: 67234.5, amount: 0.5234, total: 35189.23 }, { price: 67230.0, amount: 1.2341, total: 82956.93 }, { price: 67225.5, amount: 0.8765, total: 58923.45 }, { price: 67220.0, amount: 2.1234, total: 142734.85 }, { price: 67215.5, amount: 0.4567, total: 30689.12 }, ] const asks: OrderBookEntry[] = [ { price: 67240.0, amount: 0.6543, total: 43998.79 }, { price: 67245.5, amount: 1.4321, total: 96312.45 }, { price: 67250.0, amount: 0.9876, total: 66423.75 }, { price: 67255.5, amount: 2.3456, total: 157789.23 }, { price: 67260.0, amount: 0.5678, total: 38189.43 }, ] return (

Order Book

{/* Asks (Sell Orders) */}

Price (USDT)

Amount (BTC)

Total

{asks.reverse().map((ask, i) => (

{ask.price.toFixed(2)}

{ask.amount.toFixed(4)}

{ask.total.toFixed(2)}

))}

{/* Current Price */}

67,234.50

Last Price

{/* Bids (Buy Orders) */}

{bids.map((bid, i) => (

{bid.price.toFixed(2)}

{bid.amount.toFixed(4)}

{bid.total.toFixed(2)}

))}

) } [V0_FILE]typescriptreact:file="components/recent-trades.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { ArrowUpRight, ArrowDownRight } from "lucide-react" interface Trade { price: number amount: number time: string type: "buy" | "sell" } export function RecentTrades() { const trades: Trade[] = [ { price: 67234.5, amount: 0.0234, time: "14:23:45", type: "buy" }, { price: 67230.0, amount: 0.1567, time: "14:23:42", type: "sell" }, { price: 67235.5, amount: 0.0891, time: "14:23:38", type: "buy" }, { price: 67228.0, amount: 0.2345, time: "14:23:35", type: "sell" }, { price: 67240.0, amount: 0.0456, time: "14:23:31", type: "buy" }, { price: 67232.5, amount: 0.1234, time: "14:23:28", type: "buy" }, { price: 67225.0, amount: 0.0678, time: "14:23:24", type: "sell" }, { price: 67238.5, amount: 0.189, time: "14:23:20", type: "buy" }, ] return (

Recent Trades

Price (USDT)

Amount (BTC)

Time

{trades.map((trade, i) => (

{trade.type === "buy" ? : } {trade.price.toFixed(2)}

{trade.amount.toFixed(4)}

{trade.time}

))}

) } [V0_FILE]json:file="package.json" isMerged="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": { "@hookform/resolvers": "^3.10.0", "@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": "1.1.1", "@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": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@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", "autoprefixer": "^10.4.20", "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": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "swr": "2.3.6", "resend": "6.1.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.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="app/api/crypto/markets/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { try { const response = await fetch( "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin,ethereum,solana,binancecoin&order=market_cap_desc&sparkline=false&price_change_percentage=24h", { next: { revalidate: 60 } }, ) if (!response.ok) { throw new Error("Failed to fetch market data") } const data = await response.json() const markets = data.map((coin: any) => ({ id: coin.id, symbol: coin.symbol.toUpperCase(), name: coin.name, price: coin.current_price, change: coin.price_change_percentage_24h, volume: `$${(coin.total_volume / 1000000000).toFixed(1)}B`, marketCap: coin.market_cap, })) return NextResponse.json(markets) } catch (error) { console.error("[v0] Error fetching market data:", error) return NextResponse.json({ error: "Failed to fetch market data" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/crypto/chart/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET(request: Request) { try { const { searchParams } = new URL(request.url) const coinId = searchParams.get("coinId") || "bitcoin" const days = searchParams.get("days") || "7" const response = await fetch( `https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=usd&days=${days}`, { next: { revalidate: 300 } }, ) if (!response.ok) { throw new Error("Failed to fetch chart data") } const data = await response.json() const chartData = data.prices.map((price: [number, number], index: number) => ({ time: new Date(price[0]).toLocaleDateString("en-US", { month: "short", day: "numeric", ...(days === "1" ? { hour: "2-digit" } : {}), }), price: price[1], volume: data.total_volumes[index]?.[1] || 0, })) return NextResponse.json(chartData) } catch (error) { console.error("[v0] Error fetching chart data:", error) return NextResponse.json({ error: "Failed to fetch chart data" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/crypto/price/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET(request: Request) { try { const { searchParams } = new URL(request.url) const coinId = searchParams.get("coinId") || "bitcoin" const response = await fetch( `https://api.coingecko.com/api/v3/simple/price?ids=${coinId}&vs_currencies=usd&include_24hr_change=true`, { next: { revalidate: 30 } }, ) if (!response.ok) { throw new Error("Failed to fetch price data") } const data = await response.json() const coinData = data[coinId] return NextResponse.json({ price: coinData.usd, change: coinData.usd_24h_change, }) } catch (error) { console.error("[v0] Error fetching price data:", error) return NextResponse.json({ error: "Failed to fetch price data" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/price-chart.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart } from "recharts" import { useState } from "react" import useSWR from "swr" const fetcher = (url: string) => fetch(url).then((res) => res.json()) export function PriceChart() { const [timeframe, setTimeframe] = useState("7") const [coinId, setCoinId] = useState("bitcoin") const { data: chartData, error } = useSWR(`/api/crypto/chart?coinId=${coinId}&days=${timeframe}`, fetcher, { refreshInterval: 300000, // Refresh every 5 minutes }) const { data: priceData } = useSWR(`/api/crypto/price?coinId=${coinId}`, fetcher, { refreshInterval: 30000, // Refresh every 30 seconds }) const handleTimeframeChange = (tf: string) => { setTimeframe(tf) } const currentPrice = priceData?.price || 0 const priceChange = priceData?.change || 0 const priceChangeAmount = (currentPrice * priceChange) / 100 return (

BTC/USDT

${currentPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

= 0 ? "text-primary" : "text-destructive"}`}> {priceChange >= 0 ? "+" : ""} {priceChange.toFixed(2)}% ({priceChange >= 0 ? "+" : ""}${priceChangeAmount.toFixed(2)})

{[ { label: "24H", value: "1" }, { label: "7D", value: "7" }, { label: "30D", value: "30" }, { label: "90D", value: "90" }, ].map((tf) => ( ))}

{error && (

Failed to load chart data. Please try again later.

)} {!chartData && !error && (

Loading chart data...

)} {chartData && ( [ `$${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, "Price", ]} /> )} ) } [V0_FILE]typescriptreact:file="components/portfolio.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { TrendingUp, TrendingDown, Wallet } from "lucide-react" import useSWR from "swr" import { useAuth } from "./auth-provider" interface Holding { symbol: string name: string amount: number value: number change: number allocation: number } const fetcher = (url: string) => fetch(url).then((res) => res.json()) export function Portfolio() { const { data: markets } = useSWR("/api/crypto/markets", fetcher, { refreshInterval: 60000, }) const { user } = useAuth() const holdingsAmounts = [ { symbol: "BTC", amount: 0.15 }, { symbol: "ETH", amount: 2.5 }, { symbol: "SOL", amount: 15 }, { symbol: "BNB", amount: 2.5 }, ] const holdings: Holding[] = holdingsAmounts.map((holding) => { const market = markets?.find((m: any) => m.symbol === holding.symbol) const value = market ? holding.amount * market.price : 0 return { symbol: holding.symbol, name: market?.name || holding.symbol, amount: holding.amount, value, change: market?.change || 0, allocation: 0, // Will calculate after } }) const totalValue = holdings.reduce((sum, h) => sum + h.value, 0) holdings.forEach((h) => { h.allocation = totalValue > 0 ? (h.value / totalValue) * 100 : 0 }) const initialInvestment = user?.balance || 10000 const totalChange = totalValue > 0 ? ((totalValue - initialInvestment) / initialInvestment) * 100 : 0 if (!markets) { return (

) } return (

Portfolio

Your cryptocurrency holdings

${totalValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

= 0 ? "text-primary" : "text-destructive"}`}> {totalChange >= 0 ? "+" : ""} {totalChange.toFixed(2)}% (${(totalValue - initialInvestment).toFixed(2)})

{holdings.map((holding) => ( ))}

Asset	Amount	Value	24h Change	Allocation
{holding.symbol} {holding.name} {holding.symbol}	{holding.amount} {holding.symbol}	${holding.value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}	= 0 ? "text-primary" : "text-destructive"}`} > {holding.change >= 0 ? : } {holding.change >= 0 ? "+" : ""} {holding.change.toFixed(2)}%	{holding.allocation.toFixed(1)}%

Asset

Amount

Value

24h Change

Allocation

{holding.symbol}

{holding.name}

{holding.symbol}

{holding.amount}

{holding.symbol}

${holding.value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

= 0 ? "text-primary" : "text-destructive"}`} > {holding.change >= 0 ? : } {holding.change >= 0 ? "+" : ""} {holding.change.toFixed(2)}%

{holding.allocation.toFixed(1)}%

) } [V0_FILE]typescriptreact:file="components/auth-provider.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" import { useRouter, usePathname } from "next/navigation" interface User { name?: string email: string phone: string authenticated: boolean balance: number isAdmin?: boolean createdAt?: string } interface AuthContextType { user: User | null signOut: () => void updateBalance: (amount: number) => void depositFunds: (amount: number) => void withdrawFunds: (amount: number) => void } const AuthContext = createContext({ user: null, signOut: () => {}, updateBalance: () => {}, depositFunds: () => {}, withdrawFunds: () => {}, }) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) const router = useRouter() const pathname = usePathname() useEffect(() => { // Check for authenticated user const storedUser = localStorage.getItem("user") if (storedUser) { const parsedUser = JSON.parse(storedUser) if (parsedUser.balance === undefined) { parsedUser.balance = 10000 localStorage.setItem("user", JSON.stringify(parsedUser)) } setUser(parsedUser) } else if (pathname !== "/auth" && pathname !== "/admin") { router.push("/auth") } setIsLoading(false) }, [pathname, router]) const signOut = () => { localStorage.removeItem("user") setUser(null) router.push("/auth") } const updateBalance = (amount: number) => { if (user) { const updatedUser = { ...user, balance: amount } setUser(updatedUser) localStorage.setItem("user", JSON.stringify(updatedUser)) } } const depositFunds = (amount: number) => { if (user && amount > 0) { const updatedUser = { ...user, balance: user.balance + amount } setUser(updatedUser) localStorage.setItem("user", JSON.stringify(updatedUser)) } } const withdrawFunds = (amount: number) => { if (user && amount > 0 && user.balance >= amount) { const updatedUser = { ...user, balance: user.balance - amount } setUser(updatedUser) localStorage.setItem("user", JSON.stringify(updatedUser)) } } if (isLoading) { return (

) } return ( {children} ) } export const useAuth = () => useContext(AuthContext) [V0_FILE]typescriptreact:file="components/email-template.tsx" isEdit="true" isMerged="true" export function WelcomeEmailTemplate({ name, email }: { name: string; email: string }) { return ` Bienvenue sur Immediate Edge

Immediate Edge

Plateforme de Trading Professionnel

Bonjour ${name},

Merci d'avoir rejoint Immediate Edge ! 🚀

Nous sommes ravis de vous compter parmi nous et nous avons hâte de vous accompagner dans vos premiers pas.

Voici ce que vous pouvez faire dès maintenant :

✅ Explorer votre tableau de bord personnalisé
✅ Découvrir les outils disponibles pour suivre vos investissements
✅ Configurer vos préférences pour une expérience adaptée à vos besoins

Notre équipe est à vos côtés pour vous aider à tirer le meilleur parti de la plateforme.

👉 Accéder à mon compte

Si vous avez des questions, notre support est disponible 24/7 à l'adresse suivante : support@immediate-edge.com.

Encore une fois, bienvenue dans la communauté Immediate Edge.

Ensemble, nous allons plus loin.

À très bientôt,
L'équipe Immediate Edge

Cet email a été envoyé à ${email}

`.trim() } [V0_FILE]typescript:file="app/api/send-welcome-email/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { WelcomeEmailTemplate } from "@/components/email-template" export async function POST(request: Request) { try { const { name, email } = await request.json() if (!name || !email) { return NextResponse.json({ error: "Name and email are required" }, { status: 400 }) } // Generate the email HTML const emailHtml = WelcomeEmailTemplate({ name, email }) // In a production environment, you would use a service like: // - Resend (resend.com) // - SendGrid // - AWS SES // - Postmark // For now, we'll log the email and return success console.log("[v0] Welcome email generated for:", email) console.log("[v0] Email HTML length:", emailHtml.length) // Simulate sending email // await sendEmail({ to: email, subject: "Bienvenue sur Immediate Edge", html: emailHtml }) return NextResponse.json({ success: true, message: "Welcome email sent successfully", preview: emailHtml, // In production, remove this }) } catch (error) { console.error("[v0] Error sending welcome email:", error) return NextResponse.json({ error: "Failed to send welcome email" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/withdrawal-email-template.tsx" isMerged="true" interface WithdrawalEmailProps { userName: string userEmail: string userPhone: string amount: number method: string details: { walletAddress?: string cryptoCurrency?: string iban?: string accountName?: string } timestamp: string } export function WithdrawalEmailTemplate({ userName, userEmail, userPhone, amount, method, details, timestamp, }: WithdrawalEmailProps) { return (

Nouvelle Demande de Retrait

Informations Utilisateur

Nom: {userName}

Email: {userEmail}

Téléphone: {userPhone}

Détails du Retrait

Montant: ${amount.toFixed(2)} USD

Méthode: {method}

Date: {timestamp}

{details.walletAddress && (

Détails de Paiement

{details.cryptoCurrency && (

Cryptomonnaie: {details.cryptoCurrency}

)}

Adresse du Portefeuille: {details.walletAddress}

)} {details.iban && (

Détails Bancaires

Titulaire du Compte: {details.accountName}

IBAN: {details.iban}

)}

Action Requise: Veuillez traiter cette demande de retrait dans les 24-48 heures.

Immediate Edge - Notification Automatique

) } [V0_FILE]typescriptreact:file="components/withdrawal-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowDownToLine, Bitcoin, Euro, DollarSign } from "lucide-react" import { useAuth } from "./auth-provider" type WithdrawalMethod = "crypto" | "euro" | "usdt" export function WithdrawalForm() { const { user, withdrawFunds } = useAuth() const [method, setMethod] = useState("crypto") const [amount, setAmount] = useState("") const [walletAddress, setWalletAddress] = useState("") const [cryptoCurrency, setCryptoCurrency] = useState("BTC") const [iban, setIban] = useState("") const [accountName, setAccountName] = useState("") const [isProcessing, setIsProcessing] = useState(false) const handleWithdrawal = async () => { const value = Number.parseFloat(amount) if (isNaN(value) || value <= 0) { alert("Please enter a valid amount") return } if (value > (user?.balance || 0)) { alert("Insufficient balance") return } // Validate based on method if (method === "crypto" && !walletAddress) { alert("Please enter a wallet address") return } if (method === "euro" && (!iban || !accountName)) { alert("Please enter IBAN and account name") return } if (method === "usdt" && !walletAddress) { alert("Please enter a USDT wallet address") return } setIsProcessing(true) try { const methodName = method === "crypto" ? `Cryptocurrency (${cryptoCurrency})` : method === "euro" ? "EURO (Bank Transfer)" : "USDT (Tether)" const withdrawalDetails = { userName: user?.name || "Unknown", userEmail: user?.email || "Unknown", userPhone: user?.phone || "Unknown", amount: value, method: methodName, details: { walletAddress: method === "crypto" || method === "usdt" ? walletAddress : undefined, cryptoCurrency: method === "crypto" ? cryptoCurrency : undefined, iban: method === "euro" ? iban : undefined, accountName: method === "euro" ? accountName : undefined, }, timestamp: new Date().toLocaleString("fr-FR", { dateStyle: "full", timeStyle: "short", }), } await fetch("/api/notify-withdrawal", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(withdrawalDetails), }) } catch (error) { console.error("Failed to send notification:", error) } // Simulate processing setTimeout(() => { withdrawFunds(value) // Show success message const methodName = method === "crypto" ? cryptoCurrency : method.toUpperCase() alert( `Withdrawal of $${value.toFixed(2)} via ${methodName} has been initiated. You will receive your funds within 24-48 hours.`, ) // Reset form setAmount("") setWalletAddress("") setIban("") setAccountName("") setIsProcessing(false) }, 1500) } return (

Withdraw Funds

Choose your withdrawal method

{/* Withdrawal Method Selection */}

Withdrawal Method

{/* Amount Input */}

Amount (USD) setAmount(e.target.value)} min="0" step="0.01" />

Available: $ {user?.balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

{/* Crypto-specific fields */} {method === "crypto" && ( <>

Cryptocurrency

Wallet Address setWalletAddress(e.target.value)} />

Make sure the address is correct. Transactions cannot be reversed.

)} {/* EURO-specific fields */} {method === "euro" && ( <>

Account Holder Name setAccountName(e.target.value)} />

IBAN setIban(e.target.value)} />

Bank transfers typically take 2-3 business days

)} {/* USDT-specific fields */} {method === "usdt" && (

USDT Wallet Address setWalletAddress(e.target.value)} />

Supports ERC-20, TRC-20, and BEP-20 networks

)} {/* Withdrawal Button */} {/* Info Box */}

Withdrawal Information:

• Minimum withdrawal: $50
• Processing time: 24-48 hours
• Network fees may apply
• Withdrawals are processed Monday-Friday

) } [V0_FILE]typescriptreact:file="components/user-withdrawal-email-template.tsx" isMerged="true" import type * as React from "react" interface UserWithdrawalEmailProps { userName: string amount: number method: string timestamp: string } export const UserWithdrawalEmailTemplate: React.FC = ({ userName, amount, method, timestamp, }) => { return (

Immediate Edge

Demande de Retrait Reçue

Bonjour {userName},

Nous avons bien reçu votre demande de retrait et celle-ci est actuellement{" "} en cours de traitement.

Détails de votre retrait :

Montant :

${amount.toFixed(2)}

Méthode : {method}

Date de la demande : {new Date(timestamp).toLocaleString("fr-FR")}

Prochaines étapes :

Notre équipe va vérifier votre demande et vous contactera sous peu pour confirmer les détails de votre retrait. Ce processus peut prendre de quelques heures à 24 heures ouvrables.

Vous recevrez un email de confirmation une fois que votre retrait aura été traité et les fonds transférés.

Si vous avez des questions concernant votre retrait, n'hésitez pas à nous contacter.

Cordialement,
L'équipe Immediate Edge

Cet email a été envoyé automatiquement, merci de ne pas y répondre.

) } [V0_FILE]typescriptreact:file="app/auth/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" const ADMIN_EMAIL = "edouard@immediat-edge.net" export default function AuthPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const handleSignIn = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) const formData = new FormData(e.currentTarget) const email = formData.get("email") as string const phone = formData.get("phone") as string const allUsersData = localStorage.getItem("allUsers") let userData = { email, phone, authenticated: true, balance: 10000, isAdmin: email === ADMIN_EMAIL } if (allUsersData) { const allUsers = JSON.parse(allUsersData) const existingUser = allUsers.find((u: any) => u.email === email) if (existingUser) { userData = { ...existingUser, authenticated: true } } } // Simulate authentication setTimeout(() => { localStorage.setItem("user", JSON.stringify(userData)) setIsLoading(false) router.push("/") }, 1000) } const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) const formData = new FormData(e.currentTarget) const name = formData.get("name") as string const email = formData.get("email") as string const phone = formData.get("phone") as string try { await fetch("/api/send-welcome-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, email }), }) } catch (error) { console.error("[v0] Failed to send welcome email:", error) } const allUsersData = localStorage.getItem("allUsers") const allUsers = allUsersData ? JSON.parse(allUsersData) : [] const settingsData = localStorage.getItem("appSettings") const defaultBalance = settingsData ? JSON.parse(settingsData).defaultBalance : 10000 const newUser = { name, email, phone, balance: defaultBalance, // Use default balance from settings isAdmin: email === ADMIN_EMAIL, createdAt: new Date().toISOString(), } allUsers.push(newUser) localStorage.setItem("allUsers", JSON.stringify(allUsers)) // Simulate registration setTimeout(() => { localStorage.setItem("user", JSON.stringify({ ...newUser, authenticated: true })) setIsLoading(false) router.push("/") }, 1000) } return (

Immediate Edge Sign in to access your trading account Sign In Sign Up

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Updated color scheme to professional gray-based palette with purple accents */ :root { --background: #ffffff; --foreground: #1f2937; --card: #f9fafb; --card-foreground: #1f2937; --popover: #ffffff; --popover-foreground: #1f2937; --primary: #1f2937; --primary-foreground: #ffffff; --secondary: #6b7280; --secondary-foreground: #ffffff; --muted: #f1f5f9; --muted-foreground: #6b7280; --accent: #8b5cf6; --accent-foreground: #ffffff; --destructive: #dc2626; --destructive-foreground: #ffffff; --border: #e5e7eb; --input: #f9fafb; --ring: rgba(139, 92, 246, 0.5); --chart-1: #8b5cf6; --chart-2: #dc2626; --chart-3: #f59e0b; --chart-4: #6b7280; --chart-5: #1f2937; --radius: 0.75rem; --sidebar: #f1f5f9; --sidebar-foreground: #1f2937; --sidebar-primary: #8b5cf6; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #dc2626; --sidebar-accent-foreground: #ffffff; --sidebar-border: #e5e7eb; --sidebar-ring: rgba(139, 92, 246, 0.5); } .dark { --background: #0f172a; --foreground: #f1f5f9; --card: #1e293b; --card-foreground: #f1f5f9; --popover: #1e293b; --popover-foreground: #f1f5f9; --primary: #8b5cf6; --primary-foreground: #ffffff; --secondary: #6b7280; --secondary-foreground: #ffffff; --muted: #1e293b; --muted-foreground: #94a3b8; --accent: #8b5cf6; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #334155; --input: #1e293b; --ring: rgba(139, 92, 246, 0.5); --chart-1: #a78bfa; --chart-2: #f87171; --chart-3: #fbbf24; --chart-4: #9ca3af; --chart-5: #e5e7eb; --sidebar: #0f172a; --sidebar-foreground: #f1f5f9; --sidebar-primary: #8b5cf6; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #a78bfa; --sidebar-accent-foreground: #ffffff; --sidebar-border: #334155; --sidebar-ring: rgba(139, 92, 246, 0.3); } @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]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Moon, Sun, Menu, LogOut, User, Shield, TrendingUp } from "lucide-react" import { useState, useEffect } from "react" import { useAuth } from "@/components/auth-provider" import { useRouter } from "next/navigation" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function Header() { const [isDark, setIsDark] = useState(false) const { user, signOut } = useAuth() const router = useRouter() useEffect(() => { const isDarkMode = document.documentElement.classList.contains("dark") setIsDark(isDarkMode) }, []) const toggleTheme = () => { document.documentElement.classList.toggle("dark") setIsDark(!isDark) } return (

Immediate Edge

{user && ( My Account

{user.name || "User"}

{user.email}

{user.phone}

{user.isAdmin && ( <> router.push("/admin")} className="cursor-pointer"> Admin Panel )} Sign Out )}

) } [V0_FILE]typescriptreact:file="components/market-overview.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { TrendingUp, TrendingDown } from "lucide-react" import useSWR from "swr" interface MarketData { id: string symbol: string name: string price: number change: number volume: string } const fetcher = (url: string) => fetch(url).then((res) => res.json()) export function MarketOverview() { const { data: markets, error } = useSWR("/api/crypto/markets", fetcher, { refreshInterval: 60000, }) if (error) { return

Failed to load market data. Please try again later.

} if (!markets) { return (

{[1, 2, 3, 4].map((i) => (

))}

) } return (

{markets.map((market) => (

{market.name}

{market.symbol}/USDT

= 0 ? "bg-accent/10" : "bg-destructive/10"}`}> {market.change >= 0 ? ( ) : ( )}

${market.price.toLocaleString()}

= 0 ? "bg-accent/10 text-accent" : "bg-destructive/10 text-destructive"}`} > {market.change >= 0 ? "+" : ""} {market.change.toFixed(2)}% Vol: {market.volume}

))}

) } [V0_FILE]typescriptreact:file="components/trading-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Slider } from "@/components/ui/slider" import { useState } from "react" import useSWR from "swr" import { ArrowUpRight, ArrowDownRight } from "lucide-react" const fetcher = (url: string) => fetch(url).then((res) => res.json()) export function TradingPanel() { const [orderType, setOrderType] = useState<"market" | "limit">("market") const [amount, setAmount] = useState("") const [price, setPrice] = useState("") const [percentage, setPercentage] = useState([0]) const { data: priceData } = useSWR("/api/crypto/price?coinId=bitcoin", fetcher, { refreshInterval: 30000, }) const currentPrice = priceData?.price || 0 const displayPrice = price || currentPrice.toFixed(2) const handlePercentageChange = (value: number[]) => { setPercentage(value) const balance = 10000 setAmount(((balance * value[0]) / 100 / currentPrice).toFixed(6)) } return ( Buy Sell

Available Balance

10,000.00 USDT

{orderType === "limit" && (

Price (USDT) setPrice(e.target.value)} placeholder={currentPrice.toFixed(2)} className="h-12" />

)} {orderType === "market" && (

Current Market Price

${currentPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

)}

Amount (BTC) setAmount(e.target.value)} placeholder="0.00" className="h-12" />

Percentage {percentage[0]}%

0% 25% 50% 75% 100%

Total {amount ? (Number.parseFloat(amount) * Number.parseFloat(displayPrice)).toFixed(2) : "0.00"} USDT

Trading Fee 0.1%

Est. Fee {amount ? (Number.parseFloat(amount) * Number.parseFloat(displayPrice) * 0.001).toFixed(2) : "0.00"}{" "} USDT

Available Balance

0.15 BTC

{orderType === "limit" && (

Price (USDT) setPrice(e.target.value)} placeholder={currentPrice.toFixed(2)} className="h-12" />

)} {orderType === "market" && (

Current Market Price

${currentPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

)}

Amount (BTC) setAmount(e.target.value)} placeholder="0.00" className="h-12" />

Percentage {percentage[0]}%

0% 25% 50% 75% 100%

Total {amount ? (Number.parseFloat(amount) * Number.parseFloat(displayPrice)).toFixed(2) : "0.00"} USDT

Trading Fee 0.1%

Est. Fee {amount ? (Number.parseFloat(amount) * Number.parseFloat(displayPrice) * 0.001).toFixed(2) : "0.00"}{" "} USDT

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Header } from "@/components/header" import { MarketOverview } from "@/components/market-overview" import { TradingPanel } from "@/components/trading-panel" import { PriceChart } from "@/components/price-chart" import { OrderBook } from "@/components/order-book" import { RecentTrades } from "@/components/recent-trades" import { Portfolio } from "@/components/portfolio" import { BalanceManager } from "@/components/balance-manager" import { WithdrawalForm } from "@/components/withdrawal-form" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/balance-manager.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Wallet } from "lucide-react" import { useAuth } from "./auth-provider" export function BalanceManager() { const { user } = useAuth() return (

Balance Manager

View your trading balance

Current Balance

${user?.balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

) } [V0_FILE]typescriptreact:file="app/admin/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/components/auth-provider" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Trash2, UserPlus, ArrowLeft, Plus, Minus, DollarSign, Search } from "lucide-react" interface StoredUser { name?: string email: string phone: string balance: number isAdmin?: boolean createdAt?: string } interface AppSettings { defaultBalance: number } export default function AdminPage() { const { user } = useAuth() const router = useRouter() const [users, setUsers] = useState([]) const [filteredUsers, setFilteredUsers] = useState([]) const [searchQuery, setSearchQuery] = useState("") const [editingUser, setEditingUser] = useState(null) const [balanceAction, setBalanceAction] = useState<"set" | "add" | "subtract">("set") const [balanceAmount, setBalanceAmount] = useState("") const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [defaultBalance, setDefaultBalance] = useState("10000") const [isSettingsSaved, setIsSettingsSaved] = useState(false) useEffect(() => { // Check if user is admin if (!user?.isAdmin) { router.push("/") return } // Load all users from localStorage loadUsers() loadSettings() }, [user, router]) useEffect(() => { if (searchQuery.trim() === "") { setFilteredUsers(users) } else { const query = searchQuery.toLowerCase() setFilteredUsers( users.filter( (u) => u.email.toLowerCase().includes(query) || u.phone.includes(query) || u.name?.toLowerCase().includes(query), ), ) } }, [searchQuery, users]) const loadUsers = () => { const allUsers: StoredUser[] = [] const usersData = localStorage.getItem("allUsers") if (usersData) { const parsed = JSON.parse(usersData) allUsers.push(...parsed) } setUsers(allUsers) setFilteredUsers(allUsers) } const loadSettings = () => { const settingsData = localStorage.getItem("appSettings") if (settingsData) { const settings: AppSettings = JSON.parse(settingsData) setDefaultBalance(settings.defaultBalance.toString()) } } const saveDefaultBalance = () => { const settings: AppSettings = { defaultBalance: Number.parseFloat(defaultBalance) || 10000, } localStorage.setItem("appSettings", JSON.stringify(settings)) setIsSettingsSaved(true) setTimeout(() => setIsSettingsSaved(false), 3000) } const deleteUser = (email: string) => { if (confirm(`Êtes-vous sûr de vouloir supprimer l'utilisateur ${email}?`)) { const updatedUsers = users.filter((u) => u.email !== email) localStorage.setItem("allUsers", JSON.stringify(updatedUsers)) setUsers(updatedUsers) } } const openEditDialog = (user: StoredUser) => { setEditingUser(user) setBalanceAmount("") setBalanceAction("set") setIsEditDialogOpen(true) } const saveUserChanges = () => { if (!editingUser) return const amount = Number.parseFloat(balanceAmount) || 0 let newBalance = editingUser.balance switch (balanceAction) { case "set": newBalance = amount break case "add": newBalance = editingUser.balance + amount break case "subtract": newBalance = Math.max(0, editingUser.balance - amount) break } const updatedUsers = users.map((u) => (u.email === editingUser.email ? { ...u, balance: newBalance } : u)) localStorage.setItem("allUsers", JSON.stringify(updatedUsers)) // Update current user if editing themselves const currentUser = localStorage.getItem("user") if (currentUser) { const parsed = JSON.parse(currentUser) if (parsed.email === editingUser.email) { parsed.balance = newBalance localStorage.setItem("user", JSON.stringify(parsed)) } } setUsers(updatedUsers) setIsEditDialogOpen(false) setEditingUser(null) } const formatDate = (dateString?: string) => { if (!dateString) return "N/A" return new Date(dateString).toLocaleDateString("fr-FR", { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit", }) } const formatCurrency = (amount: number) => { return new Intl.NumberFormat("fr-FR", { style: "currency", currency: "USD", }).format(amount) } const totalBalance = users.reduce((sum, user) => sum + user.balance, 0) const averageBalance = users.length > 0 ? totalBalance / users.length : 0 if (!user?.isAdmin) { return null } return (

Panneau d'Administration

Gérez tous les comptes utilisateurs et leurs portefeuilles

Paramètres des Nouveaux Utilisateurs Définissez le solde initial pour tous les futurs utilisateurs

Solde Initial par Défaut (USD) setDefaultBalance(e.target.value)} placeholder="10000" className="bg-gray-800 border-gray-700 text-white mt-2" />

Ce montant sera attribué automatiquement à chaque nouvel utilisateur lors de l'inscription

Total Utilisateurs

{users.length}

Solde Total

{formatCurrency(totalBalance)}

Solde Moyen

{formatCurrency(averageBalance)}

Administrateurs

{users.filter((u) => u.isAdmin).length}

Gestion des Utilisateurs Visualisez et gérez tous les comptes utilisateurs et leurs portefeuilles

setSearchQuery(e.target.value)} className="pl-10 bg-gray-800 border-gray-700 text-white" />

{filteredUsers.length === 0 ? (

{searchQuery ? "Aucun utilisateur trouvé" : "Aucun utilisateur enregistré"}

) : (

Nom Email Téléphone Solde Portfolio Rôle Date d'inscription Actions {filteredUsers.map((u) => ( {u.name || "N/A"} {u.email} {u.phone} {formatCurrency(u.balance)} {u.isAdmin ? ( Admin ) : ( Utilisateur )} {formatDate(u.createdAt)}

))}

)}

) } [V0_FILE]typescript:file="app/api/notify-withdrawal/route.ts" isEdit="true" import { NextResponse } from "next/server" import { Resend } from "resend" import { WithdrawalEmailTemplate } from "@/components/withdrawal-email-template" import { UserWithdrawalEmailTemplate } from "@/components/user-withdrawal-email-template" export async function POST(request: Request) { try { const body = await request.json() const { userName, userEmail, userPhone, amount, method, details, timestamp } = body const resend = new Resend(process.env.RESEND_API_KEY) // Send admin notification await resend.emails.send({ from: "Immediate Edge ", to: "edouard@immediat-edge.net", subject: `Nouvelle Demande de Retrait - ${userName} - $${amount}`, react: WithdrawalEmailTemplate({ userName, userEmail, userPhone, amount, method, details, timestamp, }), }) // Send user confirmation await resend.emails.send({ from: "Immediate Edge ", to: userEmail, subject: "Votre demande de retrait est en cours de traitement", react: UserWithdrawalEmailTemplate({ userName, amount, method, timestamp, }), }) return NextResponse.json({ success: true, message: "Notifications sent" }) } catch (error) { console.error("Error sending withdrawal notifications:", error) return NextResponse.json({ success: false, error: "Failed to send notifications" }, { status: 500 }) } }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This