[React] Feature: Show social profiles on linked accounts (#4543)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds functionality to display social profiles for linked accounts in the `LinkedProfilesScreen`.

### Detailed summary
- Added a new `LinkedProfile` component to display social profiles
- Used `useSocialProfiles` hook to fetch social profiles data
- Updated rendering logic for linked profiles
- Improved UI for displaying linked profiles

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx

@@ -4,6 +4,7 @@ import { shortenAddress } from "../../../../../utils/address.js";
 import type { Profile } from "../../../../../wallets/in-app/core/authentication/types.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
 import { useProfiles } from "../../../../core/hooks/others/useProfiles.js";
+import { useSocialProfiles } from "../../../../core/social/useSocialProfiles.js";
 import { getWalletIcon } from "../../../../core/utils/walletIcon.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Img } from "../../components/Img.js";
@@ -88,41 +89,11 @@ export function LinkedProfilesScreen(props: {
             </MenuButton>
             <Spacer y="xs" />
             {connectedProfiles?.map((profile) => (
-              <MenuButton
+              <LinkedProfile
                 key={`${profile.type}-${getProfileDisplayName(profile)}`}
-                onClick={() => {
-                  props.setScreen("linked-profiles");
-                }}
-                style={{
-                  fontSize: fontSize.sm,
-                  cursor: "default",
-                }}
-                disabled // disabled until we have more data to show on a dedicated profile screen
-              >
-                {profile.type === "wallet" && profile.details.address ? (
-                  <Container
-                    style={{
-                      width: "24px",
-                      height: "24px",
-                      borderRadius: "100%",
-                      overflow: "hidden",
-                    }}
-                  >
-                    <Blobbie address={profile.details.address} size={24} />
-                  </Container>
-                ) : (
-                  <Img
-                    src={getWalletIcon(profile.type)}
-                    width={iconSize.md}
-                    height={iconSize.md}
-                    loading="eager"
-                    client={props.client}
-                  />
-                )}
-                <Text color="primaryText">
-                  {getProfileDisplayName(profile)}
-                </Text>
-              </MenuButton>
+                profile={profile}
+                client={props.client}
+              />
             ))}
           </Container>
           <Spacer y="md" />
@@ -131,3 +102,75 @@ export function LinkedProfilesScreen(props: {
     </Container>
   );
 }
+
+function LinkedProfile({
+  profile,
+  client,
+}: { profile: Profile; client: ThirdwebClient }) {
+  const { data: socialProfiles } = useSocialProfiles({
+    client,
+    address: profile.details.address,
+  });
+
+  return (
+    <MenuButton
+      style={{
+        fontSize: fontSize.sm,
+        cursor: "default",
+      }}
+      disabled // disabled until we have more data to show on a dedicated profile screen
+    >
+      {socialProfiles?.some((p) => p.avatar) ? (
+        <Img
+          src={socialProfiles?.find((p) => p.avatar)?.avatar}
+          width={iconSize.lg}
+          height={iconSize.lg}
+          loading="eager"
+          client={client}
+          style={{
+            borderRadius: "100%",
+          }}
+        />
+      ) : profile.details.address !== undefined ? (
+        <Container
+          style={{
+            width: "32px",
+            height: "32px",
+            borderRadius: "100%",
+            overflow: "hidden",
+          }}
+        >
+          <Blobbie address={profile.details.address} size={32} />
+        </Container>
+      ) : (
+        <Img
+          src={getWalletIcon(profile.type)}
+          width={iconSize.lg}
+          height={iconSize.lg}
+          loading="eager"
+          client={client}
+        />
+      )}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          width: "100%",
+        }}
+      >
+        <Text color="primaryText">
+          {socialProfiles?.find((p) => p.avatar)?.name ||
+            getProfileDisplayName(profile)}
+        </Text>
+        {socialProfiles?.find((p) => p.avatar)?.name &&
+          profile.details.address && (
+            <Text color="secondaryText" size="sm">
+              {shortenAddress(profile.details.address, 4)}
+            </Text>
+          )}
+      </div>
+    </MenuButton>
+  );
+}