diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 6377899..cee20ac 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, useImperativeHandle, forwardRef } from 'react'; import { useWallet } from '@solana/wallet-adapter-react'; -import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'; +import { WalletName } from '@solana/wallet-adapter-base'; import { Connection, PublicKey } from '@solana/web3.js'; import Image from 'next/image'; import '@solana/wallet-adapter-react-ui/styles.css'; @@ -13,6 +13,86 @@ export interface HeaderRef { refreshBalance: () => Promise; } +// Custom Wallet Button Component +const CustomWalletButton = () => { + const { publicKey, disconnect, select, wallets } = useWallet(); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + + const handleWalletSelect = (walletName: WalletName) => { + select(walletName); + setIsDropdownOpen(false); + }; + + const handleDisconnect = () => { + disconnect(); + setIsDropdownOpen(false); + }; + + if (publicKey) { + return ( +
+ + + {isDropdownOpen && ( +
+ +
+ )} +
+ ); + } + + return ( +
+ + + {isDropdownOpen && ( +
+ {wallets.map((wallet) => ( + + ))} +
+ )} +
+ ); +}; + const Header = forwardRef((props, ref) => { const { publicKey } = useWallet(); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); @@ -178,22 +258,16 @@ const Header = forwardRef((props, ref) => { - + ) : ( - + )} {/* Mobile Menu Button */}
- - +