import React from "react"; import { Avatar } from "@material-ui/core"; import { styled } from "@material-ui/styles"; import { Blockie } from "modules/common/Blockie"; import { useProfileClaim } from "services/tzprofiles/hooks/useProfileClaim"; const StyledAvatar = styled(Avatar)(({ size }: { size?: number }) => ({ width: size || 40, height: size || 40, })); export const ProfileAvatar: React.FC<{ address: string; size?: number }> = ({ address, size, }) => { const { data: profile } = useProfileClaim(address); return ( <> {profile ? ( <StyledAvatar alt={profile.credentialSubject.alias} src={profile.credentialSubject.logo} size={size} /> ) : ( <Blockie address={address} size={size} /> )} </> ); };