import { useWallet } from '@solana/wallet-adapter-react' import { PublicKey } from '@solana/web3.js' import { getProfilePicture } from '@solflare-wallet/pfp' import { useEffect, useState } from 'react' import useMangoStore from 'stores/useMangoStore' import { ProfileIcon } from './icons' const ProfileImage = ({ imageSize, placeholderSize, publicKey, }: { imageSize: string placeholderSize: string publicKey?: string }) => { const pfp = useMangoStore((s) => s.wallet.pfp) const loadPfp = useMangoStore((s) => s.wallet.loadPfp) const loadingTransaction = useMangoStore( (s) => s.wallet.nfts.loadingTransaction ) const connection = useMangoStore((s) => s.connection.current) const [unownedPfp, setUnownedPfp] = useState(null) const [loadUnownedPfp, setLoadUnownedPfp] = useState(false) const { connected } = useWallet() useEffect(() => { if (publicKey) { setLoadUnownedPfp(true) const getProfilePic = async () => { const pfp = await getProfilePicture( connection, new PublicKey(publicKey) ) setUnownedPfp(pfp) setLoadUnownedPfp(false) } getProfilePic() } }, [publicKey]) const isLoading = (connected && loadingTransaction && !publicKey) || (connected && loadPfp && !publicKey) || loadUnownedPfp return (pfp?.isAvailable && !publicKey) || unownedPfp?.isAvailable ? ( ) : (
) } export default ProfileImage