"use client" import { useState } from "react" import { ChevronDown, ArrowDownUp } from 'lucide-react' import { motion, AnimatePresence } from "framer-motion" /** * CryptoSwap Component * * A component that allows users to swap between different cryptocurrencies * with real-time conversion rates and slippage control. */ export function CryptoSwap() { // State for dropdowns const [showFromDropdown, setShowFromDropdown] = useState(false) const [showToDropdown, setShowToDropdown] = useState(false) const [showSlippageControls, setShowSlippageControls] = useState(false) // State for input values const [fromAmount, setFromAmount] = useState("10.0") const [toAmount, setToAmount] = useState("60.0") // State for selected currencies const [fromCurrency, setFromCurrency] = useState({ symbol: "BTC", name: "Bitcoin", icon: "₿" }) const [toCurrency, setToCurrency] = useState({ symbol: "USDC", name: "USD Coin", icon: "💲" }) const [slippage, setSlippage] = useState(1) // List of cryptocurrencies const cryptocurrencies = [ { symbol: "BTC", name: "Bitcoin", icon: "₿" }, { symbol: "ETH", name: "Ethereum", icon: "Ξ" }, { symbol: "APT", name: "Aptos", icon: "🔵" }, { symbol: "SOL", name: "Solana", icon: "◎" }, { symbol: "USDC", name: "USD Coin", icon: "💲" }, ] // Handle from amount change const handleFromAmountChange = (e: React.ChangeEvent) => { const value = e.target.value setFromAmount(value) // Simple conversion for demo purposes (1 BTC = 6 USDC) if (value && !isNaN(parseFloat(value))) { setToAmount((parseFloat(value) * 6).toString()) } else { setToAmount("") } } // Handle to amount change const handleToAmountChange = (e: React.ChangeEvent) => { const value = e.target.value setToAmount(value) // Simple conversion for demo purposes (1 BTC = 6 USDC) if (value && !isNaN(parseFloat(value))) { setFromAmount((parseFloat(value) / 6).toString()) } else { setFromAmount("") } } // Animation variants const buttonVariants = { initial: { scale: 1 }, hover: { scale: 1.03, transition: { duration: 0.2 } }, tap: { scale: 0.97, transition: { duration: 0.1 } }, } const inputVariants = { focus: { boxShadow: "0 0 0 2px rgba(99, 102, 241, 0.3)", transition: { duration: 0.2 }, }, } const iconVariants = { hover: { rotate: 180, transition: { duration: 0.3 }, }, } const dropdownVariants = { hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0, transition: { duration: 0.2 }, }, exit: { opacity: 0, y: -10, transition: { duration: 0.15 }, }, } return (

Crypto swap

{/* From currency section */}

Avl. balance: 502.2 {fromCurrency.symbol}

{showFromDropdown && ( {cryptocurrencies.map((crypto) => ( ))} )}

{/* Swap button */}

{ const tempCurrency = fromCurrency setFromCurrency(toCurrency) setToCurrency(tempCurrency) const tempAmount = fromAmount setFromAmount(toAmount) setToAmount(tempAmount) }} >

{/* To currency section */}

{showToDropdown && ( {cryptocurrencies.map((crypto) => ( ))} )}

Avl. balance: 2000 {toCurrency.symbol}

{/* Slippage control */}

Max Slippage

setShowSlippageControls(!showSlippageControls)} className="flex items-center gap-2 bg-[#131313] py-1.5 px-3 rounded-full" variants={buttonVariants} initial="initial" whileHover="hover" whileTap="tap" > {slippage}% {showSlippageControls && ( {[0.5, 1, 2, 3].map((value) => ( ))} )}

{/* Exchange rate and fee */}

1 {fromCurrency.symbol} = $6 {toCurrency.symbol}

$0.010

{/* Swap button */} Swap now

) }