Profile Picture

1'use client';
2 
3import React, { useState, useEffect } from 'react';
4import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
5import { Skeleton } from '@/components/ui/skeleton';
6import { useProfile } from '@/hooks/useProfile';
7import { cn, getUsernameInitial, getSingleProfilePictureUrl, buildProfilePictureUrl } from '@/lib/utils/deso';
8import { Profile } from '@/lib/schemas/deso';
9 
10// Size configurations
11const sizeConfig = {
12  xxs: { avatar: 'h-4 w-4', text: 'text-xs' },
13  xs: { avatar: 'h-6 w-6', text: 'text-xs' },
14  sm: { avatar: 'h-8 w-8', text: 'text-sm' },
15  md: { avatar: 'h-10 w-10', text: 'text-base' },
16  lg: { avatar: 'h-12 w-12', text: 'text-lg' },
17  xl: { avatar: 'h-16 w-16', text: 'text-xl' },
18} as const;
19 
20interface ProfilePictureComponentProps {
21  publicKey: string;
22  profile?: Profile;
23  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
24  className?: string;
25  onClick?: () => void;
26  lazy?: boolean;
27  variant?: 'default' | 'nft' | 'highres';
28  shape?: 'circle' | 'rounded' | 'square';
29  border?: 'none' | 'gradient' | 'solid';
30  isLive?: boolean;
31  associatedPublicKey?: string;
32  actionIcon?: React.ReactNode;
33}
34 
35export function ProfilePicture({
36  publicKey,
37  profile: profileProp,
38  size = 'md',
39  className,
40  onClick,
41  lazy = true,
42  variant = 'default',
43  shape = 'circle',
44  border = 'none',
45  isLive = false,
46  associatedPublicKey,
47  actionIcon,
48}: ProfilePictureComponentProps) {
49  const {
50    profile: fetchedProfile,
51    loading,
52    error,
53  } = useProfile(profileProp ? '' : publicKey);
54  const profile = profileProp || fetchedProfile;
55  const profilePic = profile?.profilePic;
56  const extraData = profile?.extraData || {};
57  const sizeClasses = sizeConfig[size];
58 
59  const shapeStyle =
60    variant === 'nft'
61      ? 'nft-hexagon'
62      : shape === 'square'
63      ? 'rounded-none'
64      : shape === 'rounded'
65      ? 'rounded-xl'
66      : 'rounded-full';
67 
68  const initialProfilePicUrl = buildProfilePictureUrl(profilePic, extraData, variant) || getSingleProfilePictureUrl(publicKey);
69  const [imgSrc, setImgSrc] = useState<string | undefined>(initialProfilePicUrl);
70  const [triedFallback, setTriedFallback] = useState(false);
71 
72  useEffect(() => {
73    setImgSrc(initialProfilePicUrl);
74    setTriedFallback(false);
75  }, [initialProfilePicUrl]);
76 
77  const fallbackInitial = profile?.username
78    ? getUsernameInitial(profile.username)
79    : publicKey
80      ? publicKey[0].toUpperCase()
81      : '?';
82 
83  const handleImgError = () => {
84// … truncated