react: update connected account modal to show user tag and profile pi…

…c when available

.changeset/smart-feet-wink.md

@@ -0,0 +1,5 @@
+---
+"@treasure-dev/tdk-react": patch
+---
+
+Updated connected account modal to show user tag and profile pic when available

packages/react/src/components/connect/ConnectButtonAuthenticatedView.tsx

@@ -1,9 +1,8 @@
 import type { ButtonHTMLAttributes } from "react";
-import { shortenAddress } from "thirdweb/utils";
 
-import { TreasureSparklesIcon } from "../../icons/TreasureSparklesIcon";
 import { cn } from "../../utils/classnames";
 import { Button } from "../ui/Button";
+import { UserDisplayName } from "../user/UserDisplayName";
 
 type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
   address: string;
@@ -31,17 +30,7 @@ export const ConnectButtonAuthenticatedView = ({
         {pfp ? (
           <img src={pfp} alt="" className="tdk-w-6 tdk-h-6 tdk-rounded-lg" />
         ) : null}
-        <span className="tdk-flex tdk-items-center tdk-gap-1">
-          <TreasureSparklesIcon className="tdk-w-3.5 tdk-h-3.5 tdk-text-ruby" />
-          <span
-            className={cn(
-              "tdk-text-cream",
-              tag ? "tdk-font-medium" : "tdk-tabular-nums",
-            )}
-          >
-            {tag ?? shortenAddress(address)}
-          </span>
-        </span>
+        <UserDisplayName address={address} tag={tag} />
       </span>
     </Button>
   );

packages/react/src/components/user/UserDisplayName.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { UserDisplayName } from "./UserDisplayName";
+
+const meta: Meta<typeof UserDisplayName> = {
+  component: UserDisplayName,
+};
+
+export default meta;
+type Story = StoryObj<typeof UserDisplayName>;
+
+export const Default: Story = {
+  args: {
+    address: "0x73239D66c237D5923a7DF2D4E1E59fB7432c7826",
+    className: "tdk-bg-black tdk-p-2",
+  },
+};
+
+export const WithTag: Story = {
+  args: {
+    address: "0x73239D66c237D5923a7DF2D4E1E59fB7432c7826",
+    tag: "rappzula",
+    className: "tdk-bg-black tdk-p-2",
+  },
+};

packages/react/src/components/user/UserDisplayName.tsx

@@ -0,0 +1,19 @@
+import { shortenAddress } from "thirdweb/utils";
+
+import { TreasureSparklesIcon } from "../../icons/TreasureSparklesIcon";
+import { cn } from "../../utils/classnames";
+
+type Props = {
+  address: string;
+  tag?: string | null;
+  className?: string;
+};
+
+export const UserDisplayName = ({ address, tag, className }: Props) => (
+  <span className={cn("tdk-flex tdk-items-center tdk-gap-1", className)}>
+    <TreasureSparklesIcon className="tdk-w-3.5 tdk-h-3.5 tdk-text-ruby" />
+    <span className={cn("tdk-text-cream", !!tag && "tdk-font-medium")}>
+      {tag ?? shortenAddress(address)}
+    </span>
+  </span>
+);

packages/react/src/hooks/useConnect.tsx

@@ -15,6 +15,7 @@ import {
   type Options as ConnectModalOptions,
   type Props as ConnectModalProps,
 } from "../components/connect/ConnectModal";
+import { UserDisplayName } from "../components/user/UserDisplayName";
 import { useTreasure } from "../contexts/treasure";
 import { getLocaleId } from "../i18n";
 import {
@@ -73,6 +74,7 @@ export const useConnect = (props?: Props) => {
     chain,
     client,
     ecosystemId,
+    user,
     logIn,
     logOut,
     setRootElement,
@@ -138,6 +140,10 @@ export const useConnect = (props?: Props) => {
       connectOptions: {
         hiddenWallets: ["inApp", ecosystemId],
       },
+      connectedAccountAvatarUrl: user?.pfp ?? undefined,
+      connectedAccountName: user ? (
+        <UserDisplayName address={user.address} tag={user.tag} />
+      ) : undefined,
       networkSelector: {
         onSwitch: (nextChain) => {
           if (activeWallet) {