import { useWalletMultiButton } from '@solana/wallet-adapter-base-ui'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import { BaseWalletConnectionButton } from './BaseWalletConnectionButton.js'; import type { ButtonProps } from './Button.js'; import { useWalletModal } from './useWalletModal.js'; type Props = ButtonProps & { labels: Omit< { [TButtonState in ReturnType['buttonState']]: string }, 'connected' | 'disconnecting' > & { 'copy-address': string; copied: string; 'change-wallet': string; disconnect: string; }; }; const AnimatedText = ({ content }: { content: React.ReactNode }) => (

{content}

); export function BaseWalletMultiButton({ children, labels, ...props }: Props) { const { setVisible: setModalVisible } = useWalletModal(); const { buttonState, onConnect, onDisconnect, publicKey, walletIcon, walletName } = useWalletMultiButton({ onSelectWallet() { setModalVisible(true); }, }); const [copied, setCopied] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const ref = useRef(null); useEffect(() => { const listener = (event: MouseEvent | TouchEvent) => { const node = ref.current; // Do nothing if clicking dropdown or its descendants if (!node || node.contains(event.target as Node)) return; setMenuOpen(false); }; document.addEventListener('mousedown', listener); document.addEventListener('touchstart', listener); return () => { document.removeEventListener('mousedown', listener); document.removeEventListener('touchstart', listener); }; }, []); const handleCopy = async () => { if (publicKey) { await navigator.clipboard.writeText(publicKey.toBase58()); setCopied(true); setTimeout(() => setCopied(false), 400); } }; const ellipsifyAddress = (address: string) => { return `${address.slice(0, 4)}...${address.slice(-4)}`; }; const content = useMemo(() => { if (children) { return children; } else if (publicKey) { const base58 = publicKey.toBase58(); return base58.slice(0, 4) + '..' + base58.slice(-4); } else if (buttonState === 'connecting' || buttonState === 'has-wallet') { return labels[buttonState]; } else { return labels['no-wallet']; } }, [buttonState, children, labels, publicKey]); const SquareIcon = () => ( ); const DisconnectIcon = () => ( ); const ChangeWalletIcon = () => ( ); return (

{ switch (buttonState) { case 'no-wallet': setModalVisible(true); break; case 'has-wallet': if (onConnect) { onConnect(); } break; case 'connected': setMenuOpen(true); break; } }} walletIcon={walletIcon} walletName={walletName} >

); }