76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
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<any>(null)
|
|
const [loadUnownedPfp, setLoadUnownedPfp] = useState<boolean>(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 ? (
|
|
<img
|
|
alt=""
|
|
src={publicKey ? unownedPfp?.url : pfp?.url}
|
|
className={`default-transition rounded-full ${
|
|
loadingTransaction ? 'opacity-40' : ''
|
|
}`}
|
|
style={{ width: `${imageSize}px`, height: `${imageSize}px` }}
|
|
/>
|
|
) : (
|
|
<div
|
|
className={`flex flex-shrink-0 items-center justify-center rounded-full ${
|
|
isLoading ? 'animate-pulse bg-th-bkg-4' : 'bg-th-bkg-4'
|
|
}`}
|
|
style={{ width: `${imageSize}px`, height: `${imageSize}px` }}
|
|
>
|
|
<div
|
|
style={{
|
|
width: `${placeholderSize}px`,
|
|
height: `${placeholderSize}px`,
|
|
}}
|
|
>
|
|
<ProfileIcon className={`h-full w-full text-th-fgd-3`} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProfileImage
|