update: implemented the initials fallback for profiles without avatars

Author: Biokes

frontend/src/app/profile/[username]/page.tsx

@@ -107,6 +107,7 @@ export default async function ProfilePage({ params }: PageProps) {
             bio={profile.bio}
             walletAddress={profile.walletAddress}
             acceptedAssets={profile.acceptedAssets}
+            avatarUrl={profile.avatarUrl || undefined}
           />
 
           <div className="px-2">

frontend/src/components/profile-card.tsx

@@ -13,6 +13,7 @@ type ProfileCardProps = {
   bio: string;
   walletAddress: string;
   acceptedAssets: Asset[];
+  avatarUrl?: string;
   email?: string;
   websiteUrl?: string;
   twitterHandle?: string;
@@ -25,6 +26,7 @@ export function ProfileCard({
   bio,
   walletAddress,
   acceptedAssets,
+  avatarUrl,
   email,
   websiteUrl,
   twitterHandle,
@@ -45,48 +47,57 @@ export function ProfileCard({
   return (
     <article className="rounded-[2rem] border border-white/10 bg-white/[0.04] p-5 sm:p-7 shadow-xl shadow-black/15">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <p className="text-xs uppercase tracking-[0.3em] text-mint">@{username}</p>
-          <h1 className="mt-3 text-2xl sm:text-3xl font-semibold text-white">{displayName}</h1>
-          <p className="mt-4 max-w-2xl text-sm sm:text-base leading-relaxed sm:leading-7 text-sky/80">{bio}</p>
-
-          {hasSocialLinks && (
-            <div className="mt-4 flex flex-wrap gap-3">
-              {websiteUrl && (
-                <a
-                  href={websiteUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-xs text-sky/70 hover:text-mint transition"
-                >
-                  🌐 Website
-                </a>
-              )}
-              {twitterHandle && (
-                <a
-                  href={`https://twitter.com/${twitterHandle}`}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-xs text-sky/70 hover:text-mint transition"
-                >
-                  𝕏 @{twitterHandle}
-                </a>
-              )}
-              {githubHandle && (
-                <a
-                  href={`https://github.com/${githubHandle}`}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-xs text-sky/70 hover:text-mint transition"
-                >
-                  GitHub
-                </a>
-              )}
-              {email && (
-                <span className="text-xs text-sky/50">{email}</span>
-              )}
+        <div className="flex gap-4">
+          {avatarUrl ? (
+            <img src={avatarUrl} alt={displayName} className="w-16 h-16 rounded-full object-cover" />
+          ) : (
+            <div className="w-16 h-16 rounded-full bg-indigo-600 flex items-center justify-center text-white text-xl font-bold">
+              {displayName.slice(0, 2).toUpperCase()}
             </div>
           )}
+          <div>
+            <p className="text-xs uppercase tracking-[0.3em] text-mint">@{username}</p>
+            <h1 className="mt-3 text-2xl sm:text-3xl font-semibold text-white">{displayName}</h1>
+            <p className="mt-4 max-w-2xl text-sm sm:text-base leading-relaxed sm:leading-7 text-sky/80">{bio}</p>
+
+            {hasSocialLinks && (
+              <div className="mt-4 flex flex-wrap gap-3">
+                {websiteUrl && (
+                  <a
+                    href={websiteUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-xs text-sky/70 hover:text-mint transition"
+                  >
+                    🌐 Website
+                  </a>
+                )}
+                {twitterHandle && (
+                  <a
+                    href={`https://twitter.com/${twitterHandle}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-xs text-sky/70 hover:text-mint transition"
+                  >
+                    𝕏 @{twitterHandle}
+                  </a>
+                )}
+                {githubHandle && (
+                  <a
+                    href={`https://github.com/${githubHandle}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-xs text-sky/70 hover:text-mint transition"
+                  >
+                    GitHub
+                  </a>
+                )}
+                {email && (
+                  <span className="text-xs text-sky/50">{email}</span>
+                )}
+              </div>
+            )}
+          </div>
         </div>
         <div className="w-full sm:w-auto mt-4 sm:mt-0 rounded-3xl border border-mint/20 bg-ink/50 px-4 py-3 text-sm text-sky/80">
           <p className="font-semibold text-white">Stellar Wallet</p>