Username Display

1'use client';
2 
3import React from 'react';
4import { Skeleton } from '@/components/ui/skeleton';
5import { TooltipProvider } from '@/components/ui/tooltip';
6import { useUsername, useProfile } from '@/hooks/useProfile';
7import { cn, truncateText } from '@/lib/utils/deso';
8import { CopyButton } from './copy-button';
9import { VerificationBadge } from './verification-badge';
10import { CheckCircleIcon } from 'lucide-react';
11import Link from 'next/link';
12import { Profile } from '@/lib/schemas/deso';
13 
14export interface UsernameDisplayProps {
15  publicKey: string;
16  profile?: Profile;
17  isVerified?: boolean;
18  showVerification?: boolean;
19  truncate?: boolean;
20  maxLength?: number;
21  className?: string;
22  onClick?: () => void;
23  showCopyButton?: boolean;
24  linkToProfile?: boolean;
25  variant?: 'social' | 'token';
26}
27 
28export function UsernameDisplay({
29  publicKey,
30  profile: profileProp,
31  isVerified = false,
32  showVerification = true,
33  truncate = false,
34  maxLength = 20,
35  className,
36  onClick,
37  showCopyButton = false,
38  linkToProfile = false,
39  variant,
40}: UsernameDisplayProps) {
41  const {
42    profile: fetchedProfile,
43    loading,
44    error,
45  } = useProfile(profileProp ? '' : publicKey);
46  const profile = profileProp || fetchedProfile;
47  const username = profile?.username;
48  const verificationStatus = isVerified || profile?.isVerified;
49 
50  const handleClick = () => {
51    if (linkToProfile && username) {
52      window.open(`https://diamondapp.com/u/${username}`, '_blank');
53    } else if (onClick) {
54      onClick();
55    }
56  };
57 
58  if (loading) {
59    return (
60      <div className={cn('flex items-center gap-2', className)}>
61        <Skeleton className="h-4 w-20" />
62        {showVerification && verificationStatus && <Skeleton className="h-4 w-4 rounded-full" />}
63      </div>
64    );
65  }
66 
67  if (error || !username) {
68    return (
69      <div className={cn('flex items-center gap-2 text-muted-foreground', className)}>
70        <span className="text-sm">{username || ''}</span>
71      </div>
72    );
73  }
74 
75  const prefix = variant === 'social' ? '@' : variant === 'token' ? '$' : '';
76  let displayText = `${prefix}${username}`;
77  if (truncate) {
78    displayText = truncateText(displayText, maxLength);
79  }
80 
81  return (
82    <TooltipProvider>
83      <div className={cn('flex items-center gap-2', className)}>
84        <div
85          className={cn(
86            'flex items-center gap-1',
87            (onClick || linkToProfile) && 'cursor-pointer hover:opacity-80 transition-opacity'
88          )}
89// … truncated