"use client" import { useState } from "react" import { ChevronDown, Mail, ArrowRight } from 'lucide-react' import { motion, AnimatePresence } from "framer-motion" /** * WalletConnect Component * * A component that allows users to connect their cryptocurrency wallets * or continue with email authentication. */ export function WalletConnect() { // State for network dropdown const [selectedNetwork, setSelectedNetwork] = useState(null) const [isNetworkDropdownOpen, setIsNetworkDropdownOpen] = useState(false) const [email, setEmail] = useState("") // Wallet options with their respective icons const walletOptions = [ { id: "metamask", name: "Metamask", icon: "🦊", }, { id: "coinbase", name: "Coinbase wallet", icon: "🔵", }, { id: "trust", name: "Trust wallet", icon: "🛡️", }, ] // Animation variants for micro-animations const buttonVariants = { initial: { opacity: 0.9 }, hover: { opacity: 1, scale: 1.02, transition: { duration: 0.2 }, }, tap: { scale: 0.98, transition: { duration: 0.1 }, }, } const dropdownVariants = { hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0, transition: { duration: 0.2, ease: "easeOut", }, }, exit: { opacity: 0, y: -10, transition: { duration: 0.15, ease: "easeIn", }, }, } return (

Connect your wallet

{/* Network selector dropdown */}

setIsNetworkDropdownOpen(!isNetworkDropdownOpen)} variants={buttonVariants} initial="initial" whileHover="hover" whileTap="tap" aria-expanded={isNetworkDropdownOpen} aria-haspopup="listbox" > {selectedNetwork || "Select a network"} {isNetworkDropdownOpen && ( )}

{/* Wallet options */}

{walletOptions.map((wallet) => (

{wallet.icon}

{wallet.name} ))}

{/* Divider with "Or" text */}

{/* Email input field */}

setEmail(e.target.value)} placeholder="Continue with email" className="flex-1 bg-transparent border-none outline-none py-4 text-white" />

) }

Component Preview

Connect your wallet

Usage

Features