fix(starknetid): fix issue where starknet ID does not resolve

packages/nextjs/.env.example

@@ -1 +1 @@
-NEXT_PUBLIC_PROVIDER_URL=https://starknet-sepolia.public.blastapi.io/rpc/v0_7
+NEXT_PUBLIC_PROVIDER_URL=https://starknet-sepolia.blastapi.io/64168c77-3fa5-4e1e-9fe4-41675d212522/rpc/v0_7

packages/nextjs/app/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { ConnectedAddress } from "~~/components/ConnectedAddress";
+import { Address } from "~~/components/scaffold-stark";
 
 const Home = () => {
   return (

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

@@ -1,14 +1,10 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Address as AddressType } from "@starknet-react/chains";
-import {
-  getChecksumAddress,
-  validateAndParseAddress,
-  validateChecksumAddress,
-} from "starknet";
+import { getChecksumAddress, validateChecksumAddress } from "starknet";
 import { devnet } from "@starknet-react/chains";
 import {
   CheckCircleIcon,
@@ -17,8 +13,7 @@ import {
 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 useConditionalStarkProfile from "~~/hooks/useConditionalStarkProfile";
+import useScaffoldStarkProfile from "~~/hooks/scaffold-stark/useScaffoldStarkProfile";
 
 type AddressProps = {
   address?: AddressType;
@@ -46,33 +41,43 @@ export const Address = ({
   format,
   size = "base",
 }: AddressProps) => {
-  const [ens, setEns] = useState<string | null>();
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const [addressCopied, setAddressCopied] = useState(false);
+  const [isUseBlockie, setIsUseBlockie] = useState(false);
 
   const { targetNetwork } = useTargetNetwork();
-  const { data: profile } = useConditionalStarkProfile(address);
+  const { data: fetchedProfile, isLoading } = useScaffoldStarkProfile(address);
 
   const checkSumAddress = useMemo(() => {
     if (!address) return undefined;
     return getChecksumAddress(address);
   }, [address]);
 
-  //   const checkSumAddress = address ? address : undefined;
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(
+    targetNetwork,
+    checkSumAddress || address || "",
+  );
+
+  const [displayAddress, setDisplayAddress] = useState(
+    checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4),
+  );
 
-  // TODO add starkprofile | not working on devnet now
-  //const { data: fetchedProfile } = useStarkProfile({ address });
+  useEffect(() => {
+    const addressWithFallback = checkSumAddress || address || "";
 
-  // We need to apply this pattern to avoid Hydration errors.
-  // useEffect(() => {
-  //   if (fetchedProfile) {
-  //     setEns(fetchedProfile.name);
-  //     setEnsAvatar(fetchedProfile.profilePicture);
-  //   }
-  // }, [fetchedProfile]);
+    if (fetchedProfile?.name) {
+      setDisplayAddress(fetchedProfile.name);
+    } else if (format === "long") {
+      setDisplayAddress(addressWithFallback || "");
+    } else {
+      setDisplayAddress(
+        addressWithFallback.slice(0, 6) + "..." + addressWithFallback.slice(-4),
+      );
+    }
+  }, [fetchedProfile, checkSumAddress, address, format]);
 
   // Skeleton UI
-  if (!checkSumAddress) {
+  if (!checkSumAddress || isLoading) {
     return (
       <div className="animate-pulse flex space-x-4">
         <div className="rounded-md bg-slate-300 h-6 w-6"></div>
@@ -87,47 +92,37 @@ export const Address = ({
     return <span className="text-error">Wrong address</span>;
   }
 
-  const blockExplorerAddressLink = getBlockExplorerAddressLink(
-    targetNetwork,
-    checkSumAddress,
-  );
-  let displayAddress =
-    checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
-
-  if (ens) {
-    displayAddress = ens;
-  } else if (format === "long") {
-    displayAddress = checkSumAddress;
-  }
-
   return (
     <div className="flex items-center">
       <div className="flex-shrink-0">
-        {getStarknetPFPIfExists(profile?.profilePicture) ? (
-          //eslint-disable-next-line @next/next/no-img-element
+        {isUseBlockie ? (
+          <BlockieAvatar
+            address={checkSumAddress}
+            ensImage={ensAvatar}
+            size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+          />
+        ) : (
+          // eslint-disable-next-line @next/next/no-img-element
           <img
-            src={profile?.profilePicture}
+            src={fetchedProfile?.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"]}
+            onError={() => {
+              setIsUseBlockie(true);
+            }}
           />
         )}
       </div>
       {disableAddressLink ? (
         <span className={`ml-1.5 text-${size} font-normal`}>
-          {profile?.name || displayAddress}
+          {fetchedProfile?.name || displayAddress}
         </span>
       ) : targetNetwork.network === devnet.network ? (
         <span className={`ml-1.5 text-${size} font-normal`}>
           <Link href={blockExplorerAddressLink}>
-            {profile?.name || displayAddress}
+            {fetchedProfile?.name || displayAddress}
           </Link>
         </span>
       ) : (
@@ -137,7 +132,7 @@ export const Address = ({
           href={blockExplorerAddressLink}
           rel="noopener noreferrer"
         >
-          {profile?.name || displayAddress}
+          {fetchedProfile?.name || displayAddress}
         </a>
       )}
       {addressCopied ? (

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

@@ -21,7 +21,7 @@ import { burnerAccounts } from "~~/utils/devnetAccounts";
 import { Address } from "@starknet-react/chains";
 import { useDisconnect, useNetwork, useConnect } from "@starknet-react/core";
 import { getStarknetPFPIfExists } from "~~/utils/profile";
-import useConditionalStarkProfile from "~~/hooks/useConditionalStarkProfile";
+import useScaffoldStarkProfile from "~~/hooks/scaffold-stark/useScaffoldStarkProfile";
 import { useTheme } from "next-themes";
 import { default as NextImage } from "next/image";
 
@@ -42,7 +42,7 @@ export const AddressInfoDropdown = ({
 }: AddressInfoDropdownProps) => {
   const { disconnect } = useDisconnect();
   const [addressCopied, setAddressCopied] = useState(false);
-  const { data: profile } = useConditionalStarkProfile(address);
+  const { data: profile } = useScaffoldStarkProfile(address);
   const { chain } = useNetwork();
   const [showBurnerAccounts, setShowBurnerAccounts] = useState(false);
   const [selectingNetwork, setSelectingNetwork] = useState(false);

packages/nextjs/hooks/scaffold-stark/useScaffoldStarkProfile.tsx

@@ -0,0 +1,84 @@
+import * as chains from "@starknet-react/chains";
+import scaffoldConfig from "~~/scaffold.config";
+import { useEffect, useState } from "react";
+import { StarkProfile } from "starknet";
+
+const shouldUseProfile = () => {
+  const set = new Set(["mainnet", "sepolia"]);
+  return (
+    set.has(scaffoldConfig.targetNetworks[0].network) &&
+    // @ts-expect-error program thinks this is constant
+    scaffoldConfig.targetNetworks[0].network !== chains.devnet.network
+  );
+};
+
+const starknetIdApiBaseUrl =
+  // @ts-expect-error program thinks this is constant
+  scaffoldConfig.targetNetworks[0].network === chains.mainnet.network
+    ? "https://api.starknet.id"
+    : "https://sepolia.api.starknet.id";
+
+const fetchProfileFromApi = async (address: string) => {
+  const addrToDomainRes = await fetch(
+    `${starknetIdApiBaseUrl}/addr_to_domain?addr=${address}`,
+  );
+
+  if (!addrToDomainRes.ok) {
+    throw new Error(await addrToDomainRes.text());
+  }
+
+  const addrToDomainJson = await addrToDomainRes.json();
+
+  const domain = addrToDomainJson.domain;
+
+  const profileRes = await fetch(
+    `${starknetIdApiBaseUrl}/domain_to_data?domain=${domain}`,
+  );
+
+  if (!profileRes.ok) throw new Error(await profileRes.text());
+
+  const profileData = await profileRes.json();
+
+  return {
+    name: profileData.domain.domain,
+
+    // TODO: figure out where these go in case we have PFP, because its a bit complex to parse the data
+    // profilePicture?: string;
+    // discord?: string;
+    // twitter?: string;
+    // github?: string;
+    // proofOfPersonhood?: boolean;
+  };
+};
+
+// this hook is a workaround, basically a re-implement of the starknet react hook with conditional rendering.
+const useScaffoldStarkProfile = (address: chains.Address | undefined) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [profile, setProfile] = useState<StarkProfile | undefined>();
+  const isEnabled = shouldUseProfile();
+
+  useEffect(() => {
+    if (!isEnabled || !address) {
+      setProfile(undefined);
+      return;
+    }
+
+    setIsLoading(true);
+
+    fetchProfileFromApi(address)
+      .then((data) => {
+        setProfile(data);
+      })
+      .catch((e) => {
+        console.error(`[useScaffoldStarkProfile] ` + e.message);
+        setProfile(undefined);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [address, isEnabled]);
+
+  return { data: profile, isLoading };
+};
+
+export default useScaffoldStarkProfile;

packages/nextjs/next.config.mjs

@@ -1,6 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    // make sure no one injects anything funny in svg
+    dangerouslyAllowSVG: true,
+    remotePatterns: [
+      // we might need to add more links. this is just from the starknet ID identicon
+      {
+        protocol: "https",
+        hostname: "identicon.starknet.id",
+        pathname: "/**", // Allows all paths under this domain
+      },
+    ],
+  },
   typescript: {
     ignoreBuildErrors: process.env.NEXT_PUBLIC_IGNORE_BUILD_ERROR === "true",
   },