[TOOL-4208] Dashboard: Transfer tab improvements/fixes (#6784)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `TokenIdPage` components by adding `accountAddress` as a prop and updating several related functionalities to improve user experience and state management.

### Detailed summary
- Added `accountAddress` prop to `TokenIdPageClient` and `TokenIdPage`.
- Updated `Page` component to fetch `accountAddress` using `getAuthTokenWalletAddress`.
- Modified `TransferTab` to use `sendTxAndConfirm` for transaction handling.
- Updated ownership check in `useNFTDrawerTabs` to compare against `accountAddress`.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/TokenIdPage.client.tsx

@@ -10,6 +10,7 @@ export function TokenIdPageClient(props: {
   contract: ThirdwebContract;
   tokenId: string;
   isLoggedIn: boolean;
+  accountAddress: string | undefined;
 }) {
   const { contract } = props;
   const metadataQuery = useContractPageMetadata(props.contract);
@@ -34,6 +35,7 @@ export function TokenIdPageClient(props: {
       isErc721={supportedERCs.isERC721}
       tokenId={props.tokenId}
       isLoggedIn={props.isLoggedIn}
+      accountAddress={props.accountAddress}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/transfer-tab.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
@@ -45,7 +46,11 @@ const TransferTab: React.FC<TransferTabProps> = ({
     { contract },
   );
 
-  const { mutate, isPending } = useSendAndConfirmTransaction();
+  const sendTxAndConfirm = useSendAndConfirmTransaction();
+
+  if (checking1155) {
+    return <GenericLoadingPage />;
+  }
 
   return (
     <div className="flex w-full flex-col gap-2">
@@ -71,7 +76,7 @@ const TransferTab: React.FC<TransferTabProps> = ({
                 tokenId: BigInt(tokenId),
                 from: account?.address ?? "",
               });
-          mutate(transaction, {
+          sendTxAndConfirm.mutate(transaction, {
             onSuccess: () => {
               trackEvent({
                 category: "nft",
@@ -128,11 +133,14 @@ const TransferTab: React.FC<TransferTabProps> = ({
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}
-            isPending={isPending || checking1155}
+            isPending={sendTxAndConfirm.isPending}
             type="submit"
             className="self-end"
             disabled={
-              !form.formState.isDirty || checking1155 || isPending || !account
+              !form.formState.isDirty ||
+              checking1155 ||
+              sendTxAndConfirm.isPending ||
+              !account
             }
           >
             Transfer

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound, redirect } from "next/navigation";
 import { localhost } from "thirdweb/chains";
 import { getRawAccount } from "../../../../../../account/settings/getAccount";
+import { getAuthTokenWalletAddress } from "../../../../../../api/lib/getAuthToken";
 import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
 import { TokenIdPageClient } from "./TokenIdPage.client";
@@ -24,7 +25,10 @@ export default async function Page(props: {
     redirect(`/${params.chain_id}/${params.contractAddress}/nfts`);
   }
 
-  const account = await getRawAccount();
+  const [accountAddress, account] = await Promise.all([
+    getAuthTokenWalletAddress(),
+    getRawAccount(),
+  ]);
 
   const { contract } = info;
   if (contract.chain.id === localhost.id) {
@@ -33,6 +37,7 @@ export default async function Page(props: {
         contract={contract}
         tokenId={params.tokenId}
         isLoggedIn={!!account}
+        accountAddress={accountAddress || undefined}
       />
     );
   }
@@ -49,6 +54,7 @@ export default async function Page(props: {
       isErc721={supportedERCs.isERC721}
       tokenId={params.tokenId}
       isLoggedIn={!!account}
+      accountAddress={accountAddress || undefined}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx

@@ -52,6 +52,7 @@ interface TokenIdPageProps {
   contract: ThirdwebContract;
   isErc721: boolean;
   isLoggedIn: boolean;
+  accountAddress: string | undefined;
 }
 
 // TODO: verify the entire nft object with zod schema and display an error message
@@ -61,6 +62,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
   tokenId,
   isErc721,
   isLoggedIn,
+  accountAddress,
 }) => {
   const [tab, setTab] = useState("Details");
   const router = useDashboardRouter();
@@ -71,6 +73,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     contract,
     tokenId,
     isLoggedIn,
+    accountAddress,
   });
 
   const client = useThirdwebClient();

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/useNftDrawerTabs.tsx

@@ -5,13 +5,14 @@ import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
-import { useActiveAccount, useReadContract } from "thirdweb/react";
+import { useReadContract } from "thirdweb/react";
 import type { NFTDrawerTab } from "./types";
 
 type UseNFTDrawerTabsParams = {
   contract: ThirdwebContract;
   tokenId: string;
   isLoggedIn: boolean;
+  accountAddress: string | undefined;
 };
 
 const TransferTab = dynamic(() => import("./components/transfer-tab"));
@@ -32,10 +33,10 @@ export function useNFTDrawerTabs({
   contract,
   tokenId,
   isLoggedIn,
+  accountAddress,
 }: UseNFTDrawerTabsParams): NFTDrawerTab[] {
   const functionSelectorQuery = useContractFunctionSelectors(contract);
   const functionSelectors = functionSelectorQuery.data || [];
-  const address = useActiveAccount()?.address;
 
   const isERC721Query = useReadContract(ERC721Ext.isERC721, { contract });
 
@@ -45,13 +46,6 @@ export function useNFTDrawerTabs({
     : isERC721Query.data || false;
   const isERC1155 = isERC721Query.isPending ? false : !isERC721;
 
-  const balanceOfQuery = useReadContract(ERC1155Ext.balanceOf, {
-    contract,
-    owner: address || "",
-    tokenId: BigInt(tokenId || 0),
-    queryOptions: { enabled: isERC1155 },
-  });
-
   const { data: nft } = useReadContract(
     isERC721 ? ERC721Ext.getNFT : ERC1155Ext.getNFT,
     {
@@ -111,10 +105,10 @@ export function useNFTDrawerTabs({
 
     const isOwner = (() => {
       if (isERC1155) {
-        return balanceOfQuery?.data ? balanceOfQuery.data > 0n : false;
+        return true;
       }
       if (isERC721) {
-        return nft?.owner === address;
+        return nft?.owner === accountAddress;
       }
       return false;
     })();
@@ -241,10 +235,9 @@ export function useNFTDrawerTabs({
     return tabs;
   }, [
     isERC1155,
-    balanceOfQuery?.data,
     isERC721,
     nft,
-    address,
+    accountAddress,
     tokenId,
     isMinterRole,
     contract,