feat: integrate starknetID (#169)

packages/nextjs/components/scaffold-stark/Address.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Link from "next/link";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Address as AddressType } from "@starknet-react/chains";
@@ -12,8 +12,9 @@ import {
 } from "@heroicons/react/24/outline";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-stark";
-import { useStarkProfile } from "@starknet-react/core";
 import { BlockieAvatar } from "~~/components/scaffold-stark/BlockieAvatar";
+import { getStarknetPFPIfExists } from "~~/utils/profile";
+import useConditionalStarkProfile from "~~/hooks/useConditionalStarkProfile";
 
 type AddressProps = {
   address?: AddressType;
@@ -45,9 +46,10 @@ export const Address = ({
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const [addressCopied, setAddressCopied] = useState(false);
   const checkSumAddress = address ? getChecksumAddress(address) : undefined;
-  //   const checkSumAddress = address ? address : undefined;
-
   const { targetNetwork } = useTargetNetwork();
+  const { data: profile } = useConditionalStarkProfile(address);
+
+  //   const checkSumAddress = address ? address : undefined;
 
   // TODO add starkprofile | not working on devnet now
   //const { data: fetchedProfile } = useStarkProfile({ address });
@@ -92,19 +94,32 @@ export const Address = ({
   return (
     <div className="flex items-center">
       <div className="flex-shrink-0">
-        <BlockieAvatar
-          address={checkSumAddress}
-          ensImage={ensAvatar}
-          size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-        />
+        {getStarknetPFPIfExists(profile?.profilePicture) ? (
+          //eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={profile?.profilePicture}
+            alt="Profile Picture"
+            className="rounded-full h-6 w-6"
+            width={24}
+            height={24}
+          />
+        ) : (
+          <BlockieAvatar
+            address={checkSumAddress}
+            ensImage={ensAvatar}
+            size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+          />
+        )}
       </div>
       {disableAddressLink ? (
         <span className={`ml-1.5 text-${size} font-normal`}>
-          {displayAddress}
+          {profile?.name || displayAddress}
         </span>
       ) : targetNetwork.network === devnet.network ? (
         <span className={`ml-1.5 text-${size} font-normal`}>
-          <Link href={blockExplorerAddressLink}>{displayAddress}</Link>
+          <Link href={blockExplorerAddressLink}>
+            {profile?.name || displayAddress}
+          </Link>
         </span>
       ) : (
         <a
@@ -113,7 +128,7 @@ export const Address = ({
           href={blockExplorerAddressLink}
           rel="noopener noreferrer"
         >
-          {displayAddress}
+          {profile?.name || displayAddress}
         </a>
       )}
       {addressCopied ? (

packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx

@@ -15,6 +15,8 @@ import { useOutsideClick } from "~~/hooks/scaffold-stark";
 import { getTargetNetworks } from "~~/utils/scaffold-stark";
 import { Address } from "@starknet-react/chains";
 import { useDisconnect } from "@starknet-react/core";
+import { getStarknetPFPIfExists } from "~~/utils/profile";
+import useConditionalStarkProfile from "~~/hooks/useConditionalStarkProfile";
 
 const allowedNetworks = getTargetNetworks();
 
@@ -35,6 +37,8 @@ export const AddressInfoDropdown = ({
 
   const [addressCopied, setAddressCopied] = useState(false);
 
+  const { data: profile } = useConditionalStarkProfile(address);
+
   const [selectingNetwork, setSelectingNetwork] = useState(false);
   const dropdownRef = useRef<HTMLDetailsElement>(null);
   const closeDropdown = () => {
@@ -50,11 +54,23 @@ export const AddressInfoDropdown = ({
           tabIndex={0}
           className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
         >
-          <BlockieAvatar address={address} size={30} ensImage={ensAvatar} />
+          {getStarknetPFPIfExists(profile?.profilePicture) ? (
+            //eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={profile?.profilePicture}
+              alt="Profile Picture"
+              className="rounded-full h-8 w-8"
+              width={30}
+              height={30}
+            />
+          ) : (
+            <BlockieAvatar address={address} size={30} ensImage={ensAvatar} />
+          )}
           <span className="ml-2 mr-1">
             {isENS(displayName)
               ? displayName
-              : address?.slice(0, 6) + "..." + address?.slice(-4)}
+              : profile?.name ||
+                address?.slice(0, 6) + "..." + address?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
         </summary>

packages/nextjs/hooks/useConditionalStarkProfile.tsx

@@ -0,0 +1,16 @@
+import { useStarkProfile } from "@starknet-react/core";
+import * as chains from "@starknet-react/chains";
+import scaffoldConfig from "~~/scaffold.config";
+
+const useConditionalStarkProfile = (address: string | undefined) => {
+  const shouldUseProfile =
+    scaffoldConfig.targetNetworks[0].network !== chains.devnet.network;
+  // Conditional hooks are not recommended, but in this case, it's the best approach to avoid issues on devnet.
+  const profile = shouldUseProfile
+    ? // eslint-disable-next-line react-hooks/rules-of-hooks
+      useStarkProfile({ address })
+    : { data: undefined };
+  return profile;
+};
+
+export default useConditionalStarkProfile;

packages/nextjs/package.json

@@ -18,12 +18,12 @@
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/themes": "2.0.3",
     "@starknet-react/chains": "^0.1.7",
-    "@starknet-react/core": "^2.3.0",
+    "@starknet-react/core": "^2.8.2",
     "abi-wan-kanabi": "^2.2.2",
     "blo": "^1.1.1",
     "daisyui": "^4.7.3",
     "ethers": "^6.12.0",
-    "get-starknet-core": "^3.2.0",
+    "get-starknet-core": "^3.3.0",
     "next": "14.1.3",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",

packages/nextjs/utils/profile.ts

@@ -0,0 +1,5 @@
+export const getStarknetPFPIfExists = (profilePicture: string | undefined) => {
+  return profilePicture !== "https://starknet.id/api/identicons/0"
+    ? profilePicture
+    : undefined;
+};