"use client" import { useState } from "react" import { ChevronDown } from 'lucide-react' import { motion, AnimatePresence } from "framer-motion" /** * CryptoBorrow Component * * A component that allows users to borrow cryptocurrency by providing collateral. * Users can specify the collateral amount, loan amount, and view loan details. */ export function CryptoBorrow() { // State for input values const [collateralAmount, setCollateralAmount] = useState("") const [loanAmount, setLoanAmount] = useState("") // State for dropdowns const [showCollateralDropdown, setShowCollateralDropdown] = useState(false) const [showLoanDropdown, setShowLoanDropdown] = useState(false) // State for selected currencies const [collateralCurrency, setCollateralCurrency] = useState({ symbol: "APT", name: "Aptos", icon: "🔵" }) const [loanCurrency, setLoanCurrency] = useState({ symbol: "USDC", name: "USD Coin", icon: "💲" }) // Interest rate and loan period const interestRate = 6.16 const loanPeriod = 180 // days // Calculate interest based on loan amount const calculateInterest = () => { if (!loanAmount || isNaN(parseFloat(loanAmount))) return "0" const principal = parseFloat(loanAmount) const interest = (principal * interestRate * loanPeriod) / (100 * 365) return interest.toFixed(0) } // List of cryptocurrencies const collateralOptions = [ { symbol: "APT", name: "Aptos", icon: "🔵" }, { symbol: "ETH", name: "Ethereum", icon: "Ξ" }, { symbol: "BTC", name: "Bitcoin", icon: "₿" }, { symbol: "SOL", name: "Solana", icon: "◎" }, ] const loanOptions = [ { symbol: "USDC", name: "USD Coin", icon: "💲" }, { symbol: "DAI", name: "Dai", icon: "◈" }, { symbol: "USDT", name: "Tether", icon: "₮" }, ] // Animation variants const buttonVariants = { initial: { scale: 1 }, hover: { scale: 1.02, transition: { duration: 0.2 } }, tap: { scale: 0.98, transition: { duration: 0.1 } }, } const inputVariants = { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0, transition: { duration: 0.3 } }, focus: { boxShadow: "0 0 0 2px rgba(99, 102, 241, 0.3)", transition: { duration: 0.2 }, }, } 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 (

{/* Header */}

Borrow Crypto

{/* Interest Rate */}

{interestRate}% Interest Rate

{/* Available Balance */}

Avl. balance: 502.2 {collateralCurrency.symbol}

{/* Collateral Input */}

setCollateralAmount(e.target.value)} placeholder="Enter collateral amount" className="bg-transparent border-none outline-none w-full text-white placeholder-gray-500" />

{showCollateralDropdown && ( {collateralOptions.map((crypto) => ( ))} )}

{/* Loan Amount Input */}

setLoanAmount(e.target.value)} placeholder="Enter Loan amount" className="bg-transparent border-none outline-none w-full text-white placeholder-gray-500" />

{showLoanDropdown && ( {loanOptions.map((crypto) => ( ))} )}

{/* Loan Details */}

Interest on Loan

{calculateInterest()} {loanCurrency.symbol}

Loan Period

{loanPeriod} Days

{/* Borrow Button */} Borrow {loanCurrency.symbol}

) }

Crypto Borrow

Borrow Crypto