react: update ConnectButton to fall back to Blobbie avatar

.changeset/great-humans-shave.md

@@ -0,0 +1,5 @@
+---
+"@treasure-dev/tdk-react": patch
+---
+
+Updated `ConnectButton` to fall back to `Blobbie` avatar

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

@@ -2,6 +2,7 @@ import type { ButtonHTMLAttributes } from "react";
 
 import { cn } from "../../utils/classnames";
 import { Button } from "../ui/Button";
+import { UserAvatar } from "../user/UserAvatar";
 import { UserDisplayName } from "../user/UserDisplayName";
 
 type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -27,9 +28,11 @@ export const ConnectButtonAuthenticatedView = ({
       {...buttonProps}
     >
       <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}
+        <UserAvatar
+          address={address}
+          pfp={pfp}
+          className="tdk-w-6 tdk-h-6 tdk-rounded-lg"
+        />
         <UserDisplayName address={address} tag={tag} />
       </span>
     </Button>

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { UserAvatar } from "./UserAvatar";
+
+const meta: Meta<typeof UserAvatar> = {
+  component: UserAvatar,
+};
+
+export default meta;
+type Story = StoryObj<typeof UserAvatar>;
+
+export const Default: Story = {
+  args: {
+    address: "0x73239D66c237D5923a7DF2D4E1E59fB7432c7826",
+    className: "tdk-w-6 tdk-h-6 tdk-rounded-lg",
+  },
+};
+
+export const WithPfp: Story = {
+  args: {
+    address: "0x73239D66c237D5923a7DF2D4E1E59fB7432c7826",
+    pfp: "https://djmahssgw62sw.cloudfront.net/general/0xb8e0d594cd869e49ae55c5b44fa886857b1cdeb9d4aeb49b44d47eeccf97c835.png",
+    className: "tdk-w-6 tdk-h-6 tdk-rounded-lg",
+  },
+};

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

@@ -0,0 +1,14 @@
+import { Blobbie } from "thirdweb/react";
+
+type Props = {
+  address: string;
+  pfp?: string | null;
+  className?: string;
+};
+
+export const UserAvatar = ({ address, pfp, className }: Props) =>
+  pfp ? (
+    <img src={pfp} alt="" className={className} />
+  ) : (
+    <Blobbie address={address} className={className} />
+  );