From 72626797ef2f460aa42992b10e74f264d7618bb9 Mon Sep 17 00:00:00 2001
From: Alec Ananian <1013230+alecananian@users.noreply.github.com>
Date: Tue, 19 Nov 2024 17:28:26 -0800
Subject: [PATCH] react: update connected account modal to show user tag and
 profile pic when available

---
 .changeset/smart-feet-wink.md                 |  5 ++++
 .../ConnectButtonAuthenticatedView.tsx        | 15 ++---------
 .../user/UserDisplayName.stories.tsx          | 25 +++++++++++++++++++
 .../src/components/user/UserDisplayName.tsx   | 19 ++++++++++++++
 packages/react/src/hooks/useConnect.tsx       |  6 +++++
 5 files changed, 57 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/smart-feet-wink.md
 create mode 100644 packages/react/src/components/user/UserDisplayName.stories.tsx
 create mode 100644 packages/react/src/components/user/UserDisplayName.tsx

diff --git a/.changeset/smart-feet-wink.md b/.changeset/smart-feet-wink.md
new file mode 100644
index 00000000..93406659
--- /dev/null
+++ b/.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
diff --git a/packages/react/src/components/connect/ConnectButtonAuthenticatedView.tsx b/packages/react/src/components/connect/ConnectButtonAuthenticatedView.tsx
index b70f5f5f..9eee9b99 100644
--- a/packages/react/src/components/connect/ConnectButtonAuthenticatedView.tsx
+++ b/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>
   );
diff --git a/packages/react/src/components/user/UserDisplayName.stories.tsx b/packages/react/src/components/user/UserDisplayName.stories.tsx
new file mode 100644
index 00000000..99d84887
--- /dev/null
+++ b/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",
+  },
+};
diff --git a/packages/react/src/components/user/UserDisplayName.tsx b/packages/react/src/components/user/UserDisplayName.tsx
new file mode 100644
index 00000000..e23daa38
--- /dev/null
+++ b/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>
+);
diff --git a/packages/react/src/hooks/useConnect.tsx b/packages/react/src/hooks/useConnect.tsx
index 6fb0be4b..2ee639fe 100644
--- a/packages/react/src/hooks/useConnect.tsx
+++ b/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) {