"use client"; import { useEffect, useState, useRef } from "react"; import { Link, useRouter } from "@/i18n/routing"; import { Card, CardContent } from "@/components/ui/card"; import BecomeLeaderLoading from "./loading"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Slider } from "@/components/ui/slider"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { motion } from "framer-motion"; import { ArrowLeft, Loader2, DollarSign, Users, BarChart3, Crown, Zap, Shield, CheckCircle2, Trophy, TrendingUp, Star, LineChart, X, Settings2, } from "lucide-react"; import { $fetch } from "@/lib/api"; import { toast } from "sonner"; import { useTranslations } from "next-intl"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; interface EcosystemMarket { id: string; currency: string; pair: string; metadata: any; } interface SelectedMarket { symbol: string; baseCurrency: string; quoteCurrency: string; minBase: number; minQuote: number; } const tradingStyles = [ { value: "SCALPING", title: "Scalping", description: "Quick trades, small profits, high frequency", icon: Zap, }, { value: "DAY_TRADING", title: "Day Trading", description: "Positions closed same day", icon: BarChart3, }, { value: "SWING", title: "Swing Trading", description: "Hold for days to weeks", icon: TrendingUp, }, { value: "POSITION", title: "Position Trading", description: "Long-term holds, weeks to months", icon: Shield, }, ]; const riskLevels = [ { value: "LOW", title: "Low Risk", description: "Conservative approach, steady growth", color: 'text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-900/30', }, { value: "MEDIUM", title: "Medium Risk", description: "Balanced risk and reward", color: 'text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30', }, { value: "HIGH", title: "High Risk", description: "Aggressive strategy, higher volatility", color: 'text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30', }, ]; export default function BecomeLeaderClient() { const t = useTranslations("ext_copy-trading"); const tExt = useTranslations("ext"); const tCommon = useTranslations("common"); const router = useRouter(); const [isLoading, setIsLoading] = useState(true); const [isSubmitting, setIsSubmitting] = useState(false); const [hasExistingApplication, setHasExistingApplication] = useState(false); // Form state const [displayName, setDisplayName] = useState(""); const [bio, setBio] = useState(""); const [tradingStyle, setTradingStyle] = useState("DAY_TRADING"); const [riskLevel, setRiskLevel] = useState("MEDIUM"); const [profitSharePercent, setProfitSharePercent] = useState(20); // Markets state const [availableMarkets, setAvailableMarkets] = useState([]); const [selectedMarkets, setSelectedMarkets] = useState([]); const [marketsLoading, setMarketsLoading] = useState(true); const fetchedRef = useRef(false); useEffect(() => { if (fetchedRef.current) return; fetchedRef.current = true; const checkExisting = async () => { const { data, error } = await $fetch({ url: "/api/copy-trading/leader/me", method: "GET", silentSuccess: true, }); if (!error && data) { setHasExistingApplication(true); router.push("/copy-trading/dashboard"); return; } setIsLoading(false); }; const fetchMarkets = async () => { setMarketsLoading(true); const { data, error } = await $fetch({ url: "/api/ecosystem/market", method: "GET", silentSuccess: true, }); if (!error && data) { setAvailableMarkets(data); } setMarketsLoading(false); }; checkExisting(); fetchMarkets(); }, [router]); const addMarket = (symbol: string) => { const [baseCurrency, quoteCurrency] = symbol.split("/"); if (!selectedMarkets.find((m) => m.symbol === symbol)) { setSelectedMarkets([ ...selectedMarkets, { symbol, baseCurrency, quoteCurrency, minBase: 0, minQuote: 0 }, ]); } }; const removeMarket = (symbol: string) => { setSelectedMarkets(selectedMarkets.filter((m) => m.symbol !== symbol)); }; const updateMarketSettings = ( symbol: string, field: "minBase" | "minQuote", value: number ) => { setSelectedMarkets( selectedMarkets.map((m) => m.symbol === symbol ? { ...m, [field]: value } : m ) ); }; const handleSubmit = async () => { if (!displayName.trim()) { toast.error("Display name is required"); return; } if (displayName.length < 2) { toast.error("Display name must be at least 2 characters"); return; } if (selectedMarkets.length === 0) { toast.error("Please select at least one market to trade"); return; } setIsSubmitting(true); const { error } = await $fetch({ url: "/api/copy-trading/leader/apply", method: "POST", body: { displayName: displayName.trim(), bio: bio.trim(), tradingStyle, riskLevel, profitSharePercent, markets: selectedMarkets.map((m) => ({ symbol: m.symbol, minBase: m.minBase, minQuote: m.minQuote, })), }, }); if (!error) { toast.success("Application submitted successfully!"); router.push("/copy-trading/dashboard"); } setIsSubmitting(false); }; if (isLoading) { return ; } return (
{/* Back button */} {t("back_to_copy_trading")} {/* Header */}
{t("become_a_leader")}

{t("share_your_trading_expertise")}

{t("help_others_profit_from_your_trades")}

{/* Benefits */}
{[ { icon: Users, title: "Build Following", desc: "Attract traders who want to copy your strategies" }, { icon: DollarSign, title: "Earn Commission", desc: "Get paid when your followers make profits" }, { icon: Trophy, title: "Gain Recognition", desc: "Build your reputation as a top trader" }, ].map((item, i) => (

{item.title}

{item.desc}

 ))}
{/* Form */}
{/* Profile Section */}

{tExt("your_profile")}

setDisplayName(e.target.value)} placeholder={t("enter_your_trader_name")} className="mt-2 h-12" maxLength={50} />

{t("this_is_how_followers_will_see_you")}{displayName.length}/50)