feat: integrate starknetId

apps/web/package.json

@@ -14,8 +14,8 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
-    "@starknet-react/chains": "^0.1.6",
-    "@starknet-react/core": "^2.2.4",
+    "@starknet-react/chains": "^0.1.7",
+    "@starknet-react/core": "^2.8.1",
     "@t3-oss/env-nextjs": "^0.3.1",
     "@tanstack/react-query": "^4.29.7",
     "@trpc/client": "^10.26.0",

apps/web/src/app/(routes)/bridge/_components/TransferNftsWalletSummary.tsx

@@ -1,4 +1,7 @@
-import { useAccount as useStarknetAccount } from "@starknet-react/core";
+import {
+  useStarkProfile,
+  useAccount as useStarknetAccount,
+} from "@starknet-react/core";
 import { Typography } from "design-system";
 import { useMemo } from "react";
 import { useAccount as useEthereumAccount } from "wagmi";
@@ -14,6 +17,10 @@ export default function TransferNftsWalletSummary() {
   const { address: ethereumAddress } = useEthereumAccount();
   const { address: starknetAddress } = useStarknetAccount();
 
+  const { data: starkProfile } = useStarkProfile({
+    address: starknetAddress,
+  });
+
   // TODO @YohanTz: Hook wrapper around wagmi and starknet-react
   const shortEthereumAddress = useMemo(
     () =>
@@ -33,7 +40,7 @@ export default function TransferNftsWalletSummary() {
 
   const shortAddressByChain: Record<Chain, string | undefined> = {
     Ethereum: shortEthereumAddress,
-    Starknet: shortStarknetAddress,
+    Starknet: starkProfile?.name ?? shortStarknetAddress,
   };
 
   return (

apps/web/src/app/_components/ConnectStarkNetButton.tsx

@@ -1,9 +1,10 @@
-import { useAccount, useStarkName } from "@starknet-react/core";
+import { useAccount, useStarkProfile } from "@starknet-react/core";
 import { Typography } from "design-system";
 import Image from "next/image";
 import { useMemo } from "react";
 
 import { useIsSSR } from "~/app/_hooks/useIsSSR";
+import { getStarknetPFPIfExists } from "~/utils/profile";
 
 import {
   CHAIN_LOGOS_BY_NAME,
@@ -17,7 +18,9 @@ export default function ConnectStarknetButton() {
   const { address, connector, isConnected } = useAccount();
   const { toggleConnectStarknetWalletModal } = useConnectModals();
 
-  const { data: starkName } = useStarkName({ address });
+  const { data: starkProfile } = useStarkProfile({
+    address,
+  });
 
   const shortAddress = useMemo(
     () => (address ? `${address.slice(0, 6)}...${address.slice(-4)}` : ""),
@@ -35,7 +38,9 @@ export default function ConnectStarknetButton() {
         onClick={toggleConnectStarknetWalletModal}
       >
         <Typography variant="button_text_xs">
-          {isConnected ? starkName ?? shortAddress : "Connect Starknet Wallet"}
+          {isConnected
+            ? starkProfile?.name ?? shortAddress
+            : "Connect Starknet Wallet"}
         </Typography>
         <div className="flex">
           <Image
@@ -45,11 +50,13 @@ export default function ConnectStarknetButton() {
             width={28}
           />
           {connector !== undefined && (
-            <Image
+            //eslint-disable-next-line @next/next/no-img-element
+            <img
               src={
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                WALLET_LOGOS_BY_ID[connector.id] ??
-                DEFAULT_STARKNET_CONNECTOR_LOGO
+                getStarknetPFPIfExists(starkProfile?.profilePicture) ??
+                WALLET_LOGOS_BY_ID[connector.id]?.src ??
+                DEFAULT_STARKNET_CONNECTOR_LOGO.src
               }
               // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/unbound-method
               alt={`${connector.name} logo`}

apps/web/src/app/_components/StarknetConnectorList.tsx

@@ -5,6 +5,7 @@ import {
   useBalance,
   useConnect,
   useDisconnect,
+  useStarkProfile,
 } from "@starknet-react/core";
 import clsx from "clsx";
 import { Typography } from "design-system";
@@ -13,6 +14,8 @@ import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 import { useCopyToClipboard } from "usehooks-ts";
 
+import { getStarknetPFPIfExists } from "~/utils/profile";
+
 import {
   CHAIN_WALLET_ILLUSTRATION_BY_NAME,
   DOWNLOAD_LINK_BY_CONNECTOR_ID,
@@ -41,6 +44,10 @@ export default function StarknetConnectorList({
     string | undefined
   >(undefined);
 
+  const { data: starkProfile } = useStarkProfile({
+    address,
+  });
+
   useEffect(() => {
     if (showCopiedMessage) {
       const timer = setTimeout(() => {
@@ -103,16 +110,22 @@ export default function StarknetConnectorList({
           )}
         >
           {activeConnector?.id !== undefined && (
-            <Image
+            //eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={
+                getStarknetPFPIfExists(starkProfile?.profilePicture) ??
+                WALLET_LOGOS_BY_ID[activeConnector?.id]?.src ??
+                ""
+              }
               alt="connector"
+              className="rounded-full"
               height={28}
-              src={WALLET_LOGOS_BY_ID[activeConnector?.id] ?? ""}
               width={28}
             />
           )}
           <div className="relative mx-auto">
             <Typography className="mx-auto" variant="button_text_s">
-              {shortAddress}
+              {starkProfile?.name ?? shortAddress}
             </Typography>
             <AnimatePresence>
               {showCopiedMessage && (

apps/web/src/utils/profile.ts

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