[SDK] Fix caching issue with headless UI when custom resolvers are used

Author: kien-ngo

packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx

@@ -119,7 +119,18 @@ export function ChainIcon({
 }: ChainIconProps) {
   const { chain } = useChainContext();
   const iconQuery = useQuery({
-    queryKey: ["_internal_chain_icon_", chain.id] as const,
+    queryKey: [
+      "_internal_chain_icon_",
+      chain.id,
+      {
+        resolver:
+          typeof iconResolver === "string"
+            ? iconResolver
+            : typeof iconResolver === "function"
+              ? iconResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof iconResolver === "string") {
         return iconResolver;

packages/thirdweb/src/react/web/ui/prebuilt/Chain/name.tsx

@@ -155,7 +155,18 @@ export function ChainName({
 }: ChainNameProps) {
   const { chain } = useChainContext();
   const nameQuery = useQuery({
-    queryKey: ["_internal_chain_name_", chain.id] as const,
+    queryKey: [
+      "_internal_chain_name_",
+      chain.id,
+      {
+        resolver:
+          typeof nameResolver === "string"
+            ? nameResolver
+            : typeof nameResolver === "function"
+              ? nameResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof nameResolver === "string") {
         return nameResolver;

packages/thirdweb/src/react/web/ui/prebuilt/Token/icon.tsx

@@ -115,7 +115,19 @@ export function TokenIcon({
 }: TokenIconProps) {
   const { address, client, chain } = useTokenContext();
   const iconQuery = useQuery({
-    queryKey: ["_internal_token_icon_", chain.id, address] as const,
+    queryKey: [
+      "_internal_token_icon_",
+      chain.id,
+      address,
+      {
+        resolver:
+          typeof iconResolver === "string"
+            ? iconResolver
+            : typeof iconResolver === "function"
+              ? iconResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof iconResolver === "string") {
         return iconResolver;

packages/thirdweb/src/react/web/ui/prebuilt/Token/name.tsx

@@ -157,7 +157,19 @@ export function TokenName({
 }: TokenNameProps) {
   const { address, client, chain } = useTokenContext();
   const nameQuery = useQuery({
-    queryKey: ["_internal_token_name_", chain.id, address] as const,
+    queryKey: [
+      "_internal_token_name_",
+      chain.id,
+      address,
+      {
+        resolver:
+          typeof nameResolver === "string"
+            ? nameResolver
+            : typeof nameResolver === "function"
+              ? nameResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof nameResolver === "string") {
         return nameResolver;

packages/thirdweb/src/react/web/ui/prebuilt/Token/symbol.tsx

@@ -154,7 +154,19 @@ export function TokenSymbol({
 }: TokenSymbolProps) {
   const { address, client, chain } = useTokenContext();
   const symbolQuery = useQuery({
-    queryKey: ["_internal_token_symbol_", chain.id, address] as const,
+    queryKey: [
+      "_internal_token_symbol_",
+      chain.id,
+      address,
+      {
+        resolver:
+          typeof symbolResolver === "string"
+            ? symbolResolver
+            : typeof symbolResolver === "function"
+              ? symbolResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof symbolResolver === "string") {
         return symbolResolver;