"use client" import { motion } from 'framer-motion'; import React, { useState, useEffect } from 'react' import { Copy, Check } from 'lucide-react'; import PressableIcon from './pressable-icon'; import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'; import { cn } from '@/lib/utils'; interface Wallet { id: number; name: string; logo: string; qr: string; } const web3walletAddress = '0x5775f66a765d323bEBD0Cd95F9Ae868ee4606AB3' const WALLET_SELECTION_VARIANTS = { isSelected: { scale: 1, }, select: { scale: 0.9, }, }; const SPRING_OPTIONS = { type: "spring", damping: 20, stiffness: 400, mass: 1, }; const COPIED_VARIANT = { copied: { scale: 1.06, }, copy: { scale: 1, opacity: 0.9 } } const Web3WalletWidget: React.FC = () => { const wallets: Wallet[] = [ { id: 1, name: 'Uniswap', logo: 'https://app.uniswap.org/favicon.png', qr: 'https://erencanarica.com/wallets/uniswap.png' }, { id: 2, name: 'Raindow', logo: 'https://erencanarica.com/icons/rainbow.svg', qr: 'https://erencanarica.com/wallets/rainbow.png' }, { id: 3, name: 'Binance', logo: 'https://erencanarica.com/icons/binance.svg', qr: 'https://erencanarica.com/wallets/binance.png' }, ] const [selectedWallet, setSelectedWallet] = useState(wallets[0].id); const [isUserInteracted, setIsUserInteracted] = useState(false) const isSelectedWalletBinance = selectedWallet === 3; const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 1000 }) useEffect(() => { const interval = setInterval(() => { if (!isUserInteracted) { setSelectedWallet((prevSelected) => { const nextIndex = wallets.findIndex((ft) => ft.id === prevSelected) + 1; return nextIndex >= wallets.length ? wallets[0].id : wallets[nextIndex].id; }); } }, 2000); return () => clearInterval(interval); }, [isUserInteracted]); const handleWalletSelection = (id: number) => { setSelectedWallet(id) setIsUserInteracted(true) } const handleCopy = () => { copyToClipboard(web3walletAddress); } return (

{ isCopied ? 'Copied!' : '0x5...06AB3' } { isCopied ? : }

{ wallets.map((_) => ( _.id === selectedWallet)?.qr} className={cn(`max-w-[210px] max-h-[210px] sm:max-w-[200px] sm:max-h-[200px] object-cover overflow-hidden absolute`)} /> )) }

{ wallets.map((_, index) => ( handleWalletSelection(_.id)} src={_.logo} className={cn(`w-10 h-10 rounded-full cursor-pointer overflow-hidden border-2`, selectedWallet === _.id ? 'border-gray-400' : 'border-transparent') } alt={_.name} /> )) }

); }; export default Web3WalletWidget;

Web3 Wallets

0x5...06AB3

0x5...06AB3