react: update ConnectButton to show user tag and profile pic when ava…

…ilable

.changeset/strange-parrots-chew.md

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

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

@@ -13,13 +13,15 @@ type Props = UseConnectOptions;
 
 export const ConnectButton = (props?: Props) => {
   const { t } = useTranslation();
-  const { userAddress, isConnecting, isConnected } = useTreasure();
+  const { userAddress, user, isConnecting, isConnected } = useTreasure();
   const { openConnectModal, openAccountModal } = useConnect(props);
   return (
     <>
       {isConnected ? (
         <ConnectButtonAuthenticatedView
-          userAddress={userAddress}
+          address={userAddress}
+          pfp={user.pfp}
+          tag={user.tag}
           onClick={openAccountModal}
         />
       ) : (

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

@@ -11,6 +11,21 @@ type Story = StoryObj<typeof ConnectButtonAuthenticatedView>;
 
 export const Default: Story = {
   args: {
-    userAddress: "0x1234000000000000000000000000000000005678",
+    address: "0x73239D66c237D5923a7DF2D4E1E59fB7432c7826",
+  },
+};
+
+export const WithProfilePic: Story = {
+  args: {
+    address: "0x73239D66c237D5923a7DF2D4E1E59fB7432c7826",
+    pfp: "https://djmahssgw62sw.cloudfront.net/general/0xb8e0d594cd869e49ae55c5b44fa886857b1cdeb9d4aeb49b44d47eeccf97c835.png",
+  },
+};
+
+export const WithTag: Story = {
+  args: {
+    address: "0x73239D66c237D5923a7DF2D4E1E59fB7432c7826",
+    tag: "rappzula",
+    pfp: "https://djmahssgw62sw.cloudfront.net/general/0xb8e0d594cd869e49ae55c5b44fa886857b1cdeb9d4aeb49b44d47eeccf97c835.png",
   },
 };

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

@@ -6,26 +6,42 @@ import { cn } from "../../utils/classnames";
 import { Button } from "../ui/Button";
 
 type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
-  userAddress: string;
+  address: string;
+  pfp?: string | null;
+  tag?: string | null;
 };
 
 export const ConnectButtonAuthenticatedView = ({
-  userAddress,
+  address,
+  pfp,
+  tag,
   className,
   ...buttonProps
 }: Props) => {
   return (
     <Button
       variant="tertiary"
       className={cn(
-        "tdk-px-2 tdk-flex tdk-items-center tdk-gap-1.5 tdk-bg-night-700 tdk-border-night-500",
+        "tdk-px-2 tdk-flex tdk-items-center tdk-gap-1.5 tdk-bg-night-700 tdk-border tdk-border-night-500",
         className,
       )}
       {...buttonProps}
     >
-      <span className="tdk-flex tdk-items-center tdk-gap-1">
-        <TreasureSparklesIcon className="tdk-w-3.5 tdk-h-3.5 tdk-text-ruby" />
-        {shortenAddress(userAddress)}
+      <span className="tdk-flex tdk-items-center tdk-gap-1.5">
+        {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>
       </span>
     </Button>
   );

packages/react/src/utils/classnames.ts

@@ -1,5 +1,9 @@
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+  prefix: "tdk-",
+});
 
 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));