chore: replace ens image with starknet (#666)

tu11aa · web-flow · commit 182d47b5ad35 · 2025-10-08T21:01:59.000+07:00
diff --git a/.cursorrules b/.cursorrules
@@ -265,7 +265,7 @@ import { Balance } from "~~/components/scaffold-stark";
 <description>
 Show a blockie (bar code profile icon) component for a given Starknet address.
 
-The autogenerated blockie can be manually replaced by another image that we pass through the `ensImage` prop.
+If a Starknet ID profile picture is available, prefer rendering that image in the parent and fallback to `BlockieAvatar` otherwise. `BlockieAvatar` itself always renders a blo-generated identicon for the provided address.
 
 If you want more control over styling the blockie, you can directly use blo (pre-installed in Scaffold-Stark 2) and internally used by `BlockieAvatar` component to get the image URL.
 </description>
@@ -294,10 +294,45 @@ import { BlockieAvatar } from "~~/components/scaffold-stark";
 |------|------|---------------|-------------|
 | `address` | `string` | `undefined` | The address for which you want to display its blockie. Ensure it's in the `0x___` format. |
 | `size` | `number` | `undefined` | Width and Height in pixels (square). |
-| `ensImage` (optional) | `string` | `undefined` | An arbitrary image url to render instead of the blockie. |
 </props>
 </blockie_avatar_component>
 
+<avatar_component>
+
+<description>
+Reusable avatar component that renders a Starknet ID profile picture when provided; otherwise falls back to a blo-generated blockie for the given address.
+</description>
+
+<import_statement>
+
+```tsx
+import { Avatar } from "~~/components/scaffold-stark";
+```
+
+</import_statement>
+
+<usage_example>
+
+```tsx
+<Avatar
+  address="0x034aA3F359A9D614239015126635CE7732c18fDF3"
+  size={30}
+  profilePicture={profile?.profilePicture}
+/>
+```
+
+</usage_example>
+
+<props>
+| Prop | Type | Default Value | Description |
+|------|------|---------------|-------------|
+| `address` | `string` | `undefined` | The address used to render a fallback blockie if no profile picture is available. Must be in `0x___` format. |
+| `size` | `number` | `undefined` | Width and Height in pixels (square). |
+| `profilePicture` (optional) | `string` | `undefined` | Starknet ID profile picture URL. If present, it will be rendered. |
+| `className` (optional) | `string` | `undefined` | Extra class names applied to the rendered image. |
+</props>
+</avatar_component>
+
 <stark_input_component>
 
 <source>https://www.scaffoldstark.com/docs/components/StarkInput</source>
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -204,7 +204,7 @@ Source: https://www.scaffoldstark.com/docs/components/BlockieAvatar
 
 Show a blockie (bar code profile icon) component for a given Starknet address.
 
-The autogenerated blockie can be manually replaced by another image that we pass through the `ensImage` prop.
+If a Starknet ID profile picture is available, prefer rendering that image in the parent and fallback to `BlockieAvatar` otherwise. `BlockieAvatar` itself always renders a blo-generated identicon for the provided address.
 
 If you want more control over styling the blockie, you can directly use [blo](https://github.com/bpierre/blo) (pre-installed in Scaffold-Stark 2) and internally used by `BlockieAvatar` component to get the image URL.
 
@@ -225,11 +225,39 @@ import { BlockieAvatar } from "~~/components/scaffold-stark";
 
 #### Props
 
-| Prop                  | Type     | Default Value | Description                                                                               |
-| --------------------- | -------- | ------------- | ----------------------------------------------------------------------------------------- |
-| `address`             | `string` | `undefined`   | The address for which you want to display its blockie. Ensure it's in the `0x___` format. |
-| `size`                | `number` | `undefined`   | Width and Height in pixels (square).                                                      |
-| `ensImage` (optional) | `string` | `undefined`   | An arbitrary image url to render instead of the blockie.                                  |
+| Prop      | Type     | Default Value | Description                                                                               |
+| --------- | -------- | ------------- | ----------------------------------------------------------------------------------------- |
+| `address` | `string` | `undefined`   | The address for which you want to display its blockie. Ensure it's in the `0x___` format. |
+| `size`    | `number` | `undefined`   | Width and Height in pixels (square).                                                      |
+
+### Avatar
+
+Reusable avatar component that renders a Starknet ID profile picture when provided; otherwise falls back to a blo-generated blockie for the given address.
+
+#### Import
+
+```tsx
+import { Avatar } from "~~/components/scaffold-stark";
+```
+
+#### Usage
+
+```tsx
+<Avatar
+  address="0x034aA3F359A9D614239015126635CE7732c18fDF3"
+  size={30}
+  profilePicture={profile?.profilePicture}
+/>
+```
+
+#### Props
+
+| Prop               | Type     | Default Value | Description                                                                                                  |
+| ------------------ | -------- | ------------- | ------------------------------------------------------------------------------------------------------------ |
+| `address`          | `string` | `undefined`   | The address used to render a fallback blockie if no profile picture is available. Must be in `0x___` format. |
+| `size`             | `number` | `undefined`   | Width and Height in pixels (square).                                                                         |
+| `profilePicture`   | `string` | `undefined`   | Starknet ID profile picture URL. If present, it will be rendered.                                            |
+| `className` (opt.) | `string` | `undefined`   | Extra class names applied to the rendered image.                                                             |
 
 ### StarkInput
 
diff --git a/global_rules.md b/global_rules.md
@@ -204,7 +204,7 @@ Source: https://www.scaffoldstark.com/docs/components/BlockieAvatar
 
 Show a blockie (bar code profile icon) component for a given Starknet address.
 
-The autogenerated blockie can be manually replaced by another image that we pass through the `ensImage` prop.
+If a Starknet ID profile picture is available, prefer rendering that image in the parent and fallback to `BlockieAvatar` otherwise. `BlockieAvatar` itself always renders a blo-generated identicon for the provided address.
 
 If you want more control over styling the blockie, you can directly use [blo](https://github.com/bpierre/blo) (pre-installed in Scaffold-Stark 2) and internally used by `BlockieAvatar` component to get the image URL.
 
@@ -225,11 +225,39 @@ import { BlockieAvatar } from "~~/components/scaffold-stark";
 
 #### Props
 
-| Prop                  | Type     | Default Value | Description                                                                               |
-| --------------------- | -------- | ------------- | ----------------------------------------------------------------------------------------- |
-| `address`             | `string` | `undefined`   | The address for which you want to display its blockie. Ensure it's in the `0x___` format. |
-| `size`                | `number` | `undefined`   | Width and Height in pixels (square).                                                      |
-| `ensImage` (optional) | `string` | `undefined`   | An arbitrary image url to render instead of the blockie.                                  |
+| Prop      | Type     | Default Value | Description                                                                               |
+| --------- | -------- | ------------- | ----------------------------------------------------------------------------------------- |
+| `address` | `string` | `undefined`   | The address for which you want to display its blockie. Ensure it's in the `0x___` format. |
+| `size`    | `number` | `undefined`   | Width and Height in pixels (square).                                                      |
+
+### Avatar
+
+Reusable avatar component that renders a Starknet ID profile picture when provided; otherwise falls back to a blo-generated blockie for the given address.
+
+#### Import
+
+```tsx
+import { Avatar } from "~~/components/scaffold-stark";
+```
+
+#### Usage
+
+```tsx
+<Avatar
+  address="0x034aA3F359A9D614239015126635CE7732c18fDF3"
+  size={30}
+  profilePicture={profile?.profilePicture}
+/>
+```
+
+#### Props
+
+| Prop               | Type     | Default Value | Description                                                                                                  |
+| ------------------ | -------- | ------------- | ------------------------------------------------------------------------------------------------------------ |
+| `address`          | `string` | `undefined`   | The address used to render a fallback blockie if no profile picture is available. Must be in `0x___` format. |
+| `size`             | `number` | `undefined`   | Width and Height in pixels (square).                                                                         |
+| `profilePicture`   | `string` | `undefined`   | Starknet ID profile picture URL. If present, it will be rendered.                                            |
+| `className` (opt.) | `string` | `undefined`   | Extra class names applied to the rendered image.                                                             |
 
 ### StarkInput
 
diff --git a/packages/nextjs/components/scaffold-stark/Address.tsx b/packages/nextjs/components/scaffold-stark/Address.tsx
@@ -12,9 +12,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-stark";
-import { BlockieAvatar } from "~~/components/scaffold-stark/BlockieAvatar";
-import { getStarknetPFPIfExists } from "~~/utils/profile";
-import { default as NextImage } from "next/image";
+import { Avatar } from "~~/components/scaffold-stark/Avatar";
 import CopyToClipboard from "react-copy-to-clipboard";
 
 type AddressProps = {
@@ -123,21 +121,11 @@ export const Address = ({
   return (
     <div className="flex items-center">
       <div className="shrink-0">
-        {getStarknetPFPIfExists(profile?.profilePicture) ? (
-          <NextImage
-            src={profile?.profilePicture || ""}
-            alt="Profile Picture"
-            className="rounded-full"
-            width={24}
-            height={24}
-          />
-        ) : (
-          <BlockieAvatar
-            address={checkSumAddress}
-            size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            ensImage={ensAvatar}
-          />
-        )}
+        <Avatar
+          address={checkSumAddress}
+          size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+          profilePicture={profile?.profilePicture}
+        />
       </div>
       {disableAddressLink ? (
         <span className={`ml-1.5 text-${size} font-normal`}>
diff --git a/packages/nextjs/components/scaffold-stark/Avatar.tsx b/packages/nextjs/components/scaffold-stark/Avatar.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { default as NextImage } from "next/image";
+import { BlockieAvatar } from "./BlockieAvatar";
+import { getStarknetPFPIfExists } from "~~/utils/profile";
+
+type AvatarProps = {
+  address: string;
+  size: number;
+  profilePicture?: string;
+  className?: string;
+};
+
+export const Avatar = ({
+  address,
+  size,
+  profilePicture,
+  className,
+}: AvatarProps) => {
+  const pfp = getStarknetPFPIfExists(profilePicture);
+  if (pfp) {
+    return (
+      <NextImage
+        src={pfp}
+        alt="Profile Picture"
+        className={`rounded-full ${className ?? ""}`}
+        width={size}
+        height={size}
+      />
+    );
+  }
+  return <BlockieAvatar address={address} size={size} />;
+};
diff --git a/packages/nextjs/components/scaffold-stark/BlockieAvatar.tsx b/packages/nextjs/components/scaffold-stark/BlockieAvatar.tsx
@@ -1,43 +1,15 @@
 "use client";
 
 import { blo } from "blo";
-import { useState, useEffect } from "react";
 
 interface BlockieAvatarProps {
   address: string;
-  ensImage?: string | null;
   size: number;
 }
 
 // Custom Avatar for RainbowKit
-export const BlockieAvatar = ({
-  address,
-  ensImage,
-  size,
-}: BlockieAvatarProps) => {
-  const [avatarSrc, setAvatarSrc] = useState<string>("");
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    if (ensImage) {
-      setAvatarSrc(ensImage);
-      setIsLoading(false);
-    } else {
-      const avatarUrl = blo(address as `0x${string}`);
-      setAvatarSrc(avatarUrl);
-      setIsLoading(false);
-    }
-  }, [address, ensImage]);
-
-  if (isLoading) {
-    return (
-      <div
-        className="rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"
-        style={{ width: size, height: size }}
-      />
-    );
-  }
-
+export const BlockieAvatar = ({ address, size }: BlockieAvatarProps) => {
+  const avatarSrc = blo(address as `0x${string}`);
   return (
     // Don't want to use nextJS Image here (and adding remote patterns for the URL)
     // eslint-disable-next-line @next/next/no-img-element
diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
@@ -12,29 +12,29 @@ import {
   UserCircleIcon,
 } from "@heroicons/react/24/outline";
 import { useLocalStorage } from "usehooks-ts";
-import { BlockieAvatar, isENS } from "~~/components/scaffold-stark";
+import {
+  Avatar,
+  BlockieAvatar,
+  isStarknetName,
+} from "~~/components/scaffold-stark";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
 import { BurnerConnector, burnerAccounts } from "@scaffold-stark/stark-burner";
 import { getTargetNetworks, notification } from "~~/utils/scaffold-stark";
 import { Address } from "@starknet-react/chains";
 import { useDisconnect, useNetwork, useConnect } from "@starknet-react/core";
-import { getStarknetPFPIfExists } from "~~/utils/profile";
 import { useScaffoldStarkProfile } from "~~/hooks/scaffold-stark/useScaffoldStarkProfile";
 import { useTheme } from "next-themes";
-import { default as NextImage } from "next/image";
 
 const allowedNetworks = getTargetNetworks();
 
 type AddressInfoDropdownProps = {
   address: Address;
   blockExplorerAddressLink: string | undefined;
   displayName: string;
-  ensAvatar?: string;
 };
 
 export const AddressInfoDropdown = ({
   address,
-  ensAvatar,
   displayName,
   blockExplorerAddressLink,
 }: AddressInfoDropdownProps) => {
@@ -102,20 +102,14 @@ export const AddressInfoDropdown = ({
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
         <summary className="btn bg-transparent btn-sm px-2 py-[0.35rem] dropdown-toggle gap-0 !h-auto border border-[#5c4fe5] ">
           <div className="hidden [@media(min-width:412px)]:block">
-            {getStarknetPFPIfExists(profile?.profilePicture) ? (
-              <NextImage
-                src={profile?.profilePicture || ""}
-                alt="Profile Picture"
-                className="rounded-full"
-                width={30}
-                height={30}
-              />
-            ) : (
-              <BlockieAvatar address={address} size={28} ensImage={ensAvatar} />
-            )}
+            <Avatar
+              address={address}
+              size={30}
+              profilePicture={profile?.profilePicture}
+            />
           </div>
           <span className="ml-2 mr-2 text-sm">
-            {isENS(displayName)
+            {isStarknetName(displayName)
               ? displayName
               : profile?.name ||
                 address?.slice(0, 6) + "..." + address?.slice(-4)}
diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/index.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/index.tsx
@@ -101,7 +101,6 @@ export const CustomConnectButton = () => {
       <AddressInfoDropdown
         address={accountAddress as Address}
         displayName=""
-        ensAvatar=""
         blockExplorerAddressLink={blockExplorerAddressLink}
       />
       <AddressQRCodeModal
diff --git a/packages/nextjs/components/scaffold-stark/Input/utils.ts b/packages/nextjs/components/scaffold-stark/Input/utils.ts
@@ -76,6 +76,6 @@ const fitsWithinBitCount = (
 
   return true;
 };
-// Treat any dot-separated string as a potential ENS name
-const ensRegex = /.+\..+/;
-export const isENS = (address = "") => ensRegex.test(address);
+// Treat any dot-separated string as a potential starknet name
+const starknetNameRegex = /.+\..+/;
+export const isStarknetName = (address = "") => starknetNameRegex.test(address);
diff --git a/packages/nextjs/components/scaffold-stark/index.tsx b/packages/nextjs/components/scaffold-stark/index.tsx
@@ -2,5 +2,6 @@ export * from "./Address";
 export * from "./Balance";
 export * from "./Input";
 export * from "./BlockieAvatar";
+export * from "./Avatar";
 export * from "./Faucet";
 export * from "./SearchBar";
