import { useRef, useState } from "react"; import { motion, AnimatePresence } from "motion/react"; import { ChevronDown, ChevronUp } from "lucide-react"; import NumberFlow from "@number-flow/react"; import { useOnClickOutside } from "usehooks-ts"; export default function App() { const [amount1, setAmount1] = useState("4738.85"); const [amount2, setAmount2] = useState("7.87"); const [currency1, setCurrency1] = useState(currencies[0]); const [currency2, setCurrency2] = useState(currencies[2]); const [activeDropdown, setActiveDropdown] = useState<number | null>(null); const calculateExchange = ( amount: number, fromCurrency: (typeof currencies)[0], toCurrency: (typeof currencies)[0] ) => { const inUSD = amount / fromCurrency.rate; return (inUSD * toCurrency.rate).toFixed(2); }; const handleAmount1Change = (value: string) => { if (!value) { setAmount1(""); setAmount2(""); return; } const numericValue = parseFloat(value); if (isNaN(numericValue)) { setAmount1(""); setAmount2(""); return; } setAmount1(value); const newAmount = calculateExchange(numericValue, currency1, currency2); setAmount2(newAmount); }; const handleAmount2Change = (value: string) => { if (!value) { setAmount2(""); setAmount1(""); return; } const numericValue = parseFloat(value); if (isNaN(numericValue)) { setAmount2(""); setAmount1(""); return; } setAmount2(value); const newAmount = calculateExchange(numericValue, currency2, currency1); setAmount1(newAmount); }; const [isEditing1, setIsEditing1] = useState(false); const [isEditing2, setIsEditing2] = useState(false); const dropdownRef = useRef<HTMLDivElement | null>(null); const handleClickOutsideDropdown = () => { setActiveDropdown(null); }; useOnClickOutside(dropdownRef, handleClickOutsideDropdown); return ( <main className="relative w-full min-h-screen flex items-center justify-center px-4 py-10"> <div className="max-w-[360px] w-full relative z-50"> <div className="w-full bg-white rounded-3xl shadow-lg p-6 space-y-4 relative border"> <h2 className="text-2xl text-gray-600 mb-6">Swap Currency</h2> <div className="space-y-1"> <div className="bg-gray-50 rounded-xl rounded-br-none rounded-bl-none p-4 flex justify-between items-center gap-4"> {isEditing1 ? ( <input type="number" value={amount1} onChange={(e) => handleAmount1Change(e.target.value)} onBlur={() => setIsEditing1(false)} autoFocus className="bg-transparent text-2xl w-[130px] outline-none" /> ) : ( <NumberFlow value={amount1 as unknown as number} className="bg-transparent text-2xl w-[130px] outline-none" onClick={() => setIsEditing1(true)} /> )} <motion.button className="flex items-center gap-2 px-4 py-2 rounded-full bg-white shadow-sm shrink-0" whileTap={{ scale: 0.95 }} onClick={() => setActiveDropdown(activeDropdown === 1 ? null : 1) } > <img src={currency1.flag} alt={currency1.code} className="w-6 h-4 object-cover" /> <NumberFlow value={0} className="text-gray-600 hide-number" suffix={currency1.code} /> {activeDropdown === 1 ? ( <ChevronUp size={16} /> ) : ( <ChevronDown size={16} /> )} </motion.button> </div> <div className="bg-gray-50 rounded-xl rounded-tr-none rounded-tl-none p-4 flex justify-between items-center gap-4"> {isEditing2 ? ( <input type="number" value={amount2} onChange={(e) => handleAmount2Change(e.target.value)} onBlur={() => setIsEditing2(false)} className="bg-transparent text-2xl w-[130px] outline-none" autoFocus /> ) : ( <NumberFlow value={amount2 as unknown as number} onClick={() => setIsEditing2(true)} className="bg-transparent text-2xl w-[130px] outline-none cursor-pointer" /> )} <motion.button className="flex items-center gap-2 px-4 py-2 rounded-full bg-white shadow-sm shrink-0" whileTap={{ scale: 0.95 }} onClick={() => setActiveDropdown(activeDropdown === 2 ? null : 2) } > <img src={currency2.flag} alt={currency2.code} className="w-6 h-4 object-cover" /> <NumberFlow value={0} className="text-gray-600 hide-number" suffix={currency2.code} /> {activeDropdown === 2 ? ( <ChevronUp size={16} /> ) : ( <ChevronDown size={16} /> )} </motion.button> </div> </div> <AnimatePresence> {activeDropdown && ( <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 20 }} className="absolute mt-2 w-40 bg-white rounded-xl border shadow-lg p-2 space-y-1 z-50" style={{ right: "38px", top: activeDropdown === 1 ? "125px" : "202px", }} ref={dropdownRef} > {currencies.map((currency) => ( <motion.button key={currency.code} className="w-full flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg" whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} onClick={() => { if (activeDropdown === 1) { setCurrency1(currency); setAmount1( calculateExchange( parseFloat(amount2), currency2, currency ) ); } else { setCurrency2(currency); setAmount2( calculateExchange( parseFloat(amount1), currency1, currency ) ); } setActiveDropdown(null); }} > <img src={currency.flag} alt={currency.code} className="w-6 h-4 object-cover" /> <span className="text-gray-600">{currency.code}</span> {(activeDropdown === 1 ? currency1 : currency2).code === currency.code && ( <span className="ml-auto text-blue-500">✓</span> )} </motion.button> ))} </motion.div> )} </AnimatePresence> <a href="https://x.com/intent/follow?screen_name=ln_dev7" target="_blank" className="w-full bg-gray-900 text-white font-medium text-center rounded-xl py-3 mt-6 block" > Proceed </a> <p className="text-sm text-center text-gray-500"> 1{" "} <NumberFlow className="-mt-1 hide-number" value={0} suffix={currency1.code} />{" "} ≈{" "} <NumberFlow className="-mt-1" value={currency2.rate / currency1.rate} />{" "} <NumberFlow className="-mt-1 hide-number" value={0} suffix={currency2.code} /> </p> </div> </div> <motion.div variants={circleVariants} animate="animate" className="absolute size-80 border-dashed border border-gray-200 rounded-full" style={{ transformOrigin: "center bottom" }} /> <motion.div variants={circleVariants} animate="animate" className="absolute size-60 border-dashed border border-gray-200 rounded-full" style={{ transformOrigin: "center bottom" }} /> <motion.div variants={circleVariants} animate="animate" className="absolute size-40 border-dashed border border-gray-200 rounded-full" style={{ transformOrigin: "center bottom" }} /> </main> ); } const currencies = [ { code: "XAF", flag: "https://upload.wikimedia.org/wikipedia/commons/4/4f/Flag_of_Cameroon.svg", rate: 553.97, }, { code: "USD", flag: "https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg", rate: 1, }, { code: "EUR", flag: "https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg", rate: 0.92, }, { code: "GBP", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flag_of_the_United_Kingdom_%281-2%29.svg/1600px-Flag_of_the_United_Kingdom_%281-2%29.svg.png", rate: 0.79, }, { code: "JPY", flag: "https://upload.wikimedia.org/wikipedia/commons/9/9e/Flag_of_Japan.svg", rate: 151.67, }, { code: "CHF", flag: "https://upload.wikimedia.org/wikipedia/commons/f/f3/Flag_of_Switzerland.svg", rate: 0.9, }, ]; const circleVariants = { animate: { rotate: 360, transition: { duration: 5, repeat: Infinity, ease: "linear", }, }, };

Swap Currency Interaction

Code

Stacks

Inspiration

X ( Twitter ) Post