[TOOL-3096] React SDK: Fix NFT components not including contract address in queryKey (#5966)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on improving the handling of NFT metadata in the `thirdweb` library by adding `contractAddress` to various query keys, which resolves issues with metadata caching when multiple contracts share the same token ID.

### Detailed summary
- Added `contractAddress` to the query keys in `getQueryKey` functions for `NFTName`, `NFTMedia`, and `NFTDescription`.
- Updated related queries to include `contractAddress`.
- Fixed metadata display issues when rendering multiple contracts with the same token ID.
- Enhanced tests in `name.test.tsx` and `media.test.tsx` to validate the new `contractAddress` parameter.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

.changeset/rude-cats-clean.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix NFT components not displaying correct metadata if multiple contracts with same token id is rendered because of incorrect caching

packages/thirdweb/src/react/web/ui/prebuilt/NFT/description.tsx

@@ -95,6 +95,7 @@ export function NFTDescription({
     queryKey: [
       "_internal_nft_description_",
       contract.chain.id,
+      contract.address,
       tokenId.toString(),
       {
         resolver:

packages/thirdweb/src/react/web/ui/prebuilt/NFT/media.test.tsx

@@ -7,6 +7,8 @@ import {
 import { getFunctionId } from "../../../../../utils/function-id.js";
 import { fetchNftMedia, getQueryKey } from "./media.js";
 
+const testContractAddress = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
+
 describe.runIf(process.env.TW_SECRET_KEY)("NFTMedia", () => {
   it("fetchNftMedia should work with ERC721", async () => {
     const desc = await fetchNftMedia({
@@ -77,9 +79,16 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFTMedia", () => {
   });
 
   it("getQueryKey should work without mediaResolver", () => {
-    expect(getQueryKey({ chainId: 1, tokenId: 1n })).toStrictEqual([
+    expect(
+      getQueryKey({
+        chainId: 1,
+        tokenId: 1n,
+        contractAddress: testContractAddress,
+      }),
+    ).toStrictEqual([
       "_internal_nft_media_",
       1,
+      testContractAddress,
       "1",
       {
         resolver: undefined,
@@ -90,6 +99,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFTMedia", () => {
   it("getQueryKey should work with mediaResolver being an object", () => {
     expect(
       getQueryKey({
+        contractAddress: testContractAddress,
         chainId: 1,
         tokenId: 1n,
         mediaResolver: {
@@ -100,6 +110,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFTMedia", () => {
     ).toStrictEqual([
       "_internal_nft_media_",
       1,
+      testContractAddress,
       "1",
       {
         resolver: {
@@ -119,12 +130,14 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFTMedia", () => {
     expect(
       getQueryKey({
         chainId: 1,
+        contractAddress: testContractAddress,
         tokenId: 1n,
         mediaResolver: fn,
       }),
     ).toStrictEqual([
       "_internal_nft_media_",
       1,
+      testContractAddress,
       "1",
       {
         resolver: fnId,

packages/thirdweb/src/react/web/ui/prebuilt/NFT/media.tsx

@@ -133,6 +133,7 @@ export function NFTMedia({
   const { contract, tokenId } = useNFTContext();
   const mediaQuery = useQuery({
     queryKey: getQueryKey({
+      contractAddress: contract.address,
       chainId: contract.chain.id,
       tokenId,
       mediaResolver,
@@ -164,17 +165,19 @@ export function NFTMedia({
  * @internal
  */
 export function getQueryKey(props: {
+  contractAddress: string;
   chainId: number;
   tokenId: bigint;
   mediaResolver?:
     | NFTMediaInfo
     | (() => NFTMediaInfo)
     | (() => Promise<NFTMediaInfo>);
 }) {
-  const { chainId, tokenId, mediaResolver } = props;
+  const { chainId, tokenId, mediaResolver, contractAddress } = props;
   return [
     "_internal_nft_media_",
     chainId,
+    contractAddress,
     tokenId.toString(),
     {
       resolver:

packages/thirdweb/src/react/web/ui/prebuilt/NFT/name.test.tsx

@@ -7,6 +7,8 @@ import {
 import { getFunctionId } from "../../../../../utils/function-id.js";
 import { fetchNftName, getQueryKey } from "./name.js";
 
+const testContractAddress = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
+
 describe.runIf(process.env.TW_SECRET_KEY)("NFTName", () => {
   it("fetchNftName should work with ERC721", async () => {
     const desc = await fetchNftName({
@@ -61,26 +63,55 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFTName", () => {
   });
 
   it("getQueryKey should work without nameResolver", () => {
-    expect(getQueryKey({ chainId: 1, tokenId: 1n })).toStrictEqual([
+    expect(
+      getQueryKey({
+        chainId: 1,
+        tokenId: 1n,
+        contractAddress: testContractAddress,
+      }),
+    ).toStrictEqual([
       "_internal_nft_name_",
       1,
+      testContractAddress,
       "1",
       { resolver: undefined },
     ]);
   });
 
   it("getQueryKey should work with nameResolver being a string", () => {
     expect(
-      getQueryKey({ chainId: 1, tokenId: 1n, nameResolver: "test" }),
-    ).toStrictEqual(["_internal_nft_name_", 1, "1", { resolver: "test" }]);
+      getQueryKey({
+        chainId: 1,
+        tokenId: 1n,
+        nameResolver: "test",
+        contractAddress: testContractAddress,
+      }),
+    ).toStrictEqual([
+      "_internal_nft_name_",
+      1,
+      testContractAddress,
+      "1",
+      { resolver: "test" },
+    ]);
   });
 
   it("getQueryKey should work with nameResolver being a () => string", () => {
     const fn = () => "test";
     const fnId = getFunctionId(fn);
     expect(
-      getQueryKey({ chainId: 1, tokenId: 1n, nameResolver: fn }),
-    ).toStrictEqual(["_internal_nft_name_", 1, "1", { resolver: fnId }]);
+      getQueryKey({
+        chainId: 1,
+        tokenId: 1n,
+        nameResolver: fn,
+        contractAddress: testContractAddress,
+      }),
+    ).toStrictEqual([
+      "_internal_nft_name_",
+      1,
+      testContractAddress,
+      "1",
+      { resolver: fnId },
+    ]);
   });
 
   it("getQueryKey should work with nameResolver being a async () => string", () => {
@@ -91,7 +122,14 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFTName", () => {
         chainId: 1,
         tokenId: 1n,
         nameResolver: fn,
+        contractAddress: testContractAddress,
       }),
-    ).toStrictEqual(["_internal_nft_name_", 1, "1", { resolver: fnId }]);
+    ).toStrictEqual([
+      "_internal_nft_name_",
+      1,
+      testContractAddress,
+      "1",
+      { resolver: fnId },
+    ]);
   });
 });

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

@@ -95,6 +95,7 @@ export function NFTName({
 
   const nameQuery = useQuery({
     queryKey: getQueryKey({
+      contractAddress: contract.address,
       chainId: contract.chain.id,
       tokenId,
       nameResolver,
@@ -118,14 +119,16 @@ export function NFTName({
  * @internal
  */
 export function getQueryKey(props: {
+  contractAddress: string;
   chainId: number;
   tokenId: bigint;
   nameResolver?: string | (() => string) | (() => Promise<string>);
 }) {
-  const { chainId, tokenId, nameResolver } = props;
+  const { chainId, tokenId, nameResolver, contractAddress } = props;
   return [
     "_internal_nft_name_",
     chainId,
+    contractAddress,
     tokenId.toString(),
     {
       resolver: