Add useHookAtTopLevel rule in biome and fix lint errors (#4213)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to address linting issues related to the use of hooks at the top level in various components.

### Detailed summary
- Added `correctness` rule in `biome.json` for `useHookAtTopLevel`
- Added error handling and comments for `useQuery` in `useReadContract` functions
- Refactored `RNImage.tsx` to use `useMemo` for image handling
- Improved error handling in `ViewNFTs.tsx` for `fetchNFTs` function

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

<!-- end pr-codex -->

.changeset/neat-vans-refuse.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix "conditionally rendereed hooks error" in various components in `thirdweb/react` and `thirdweb/react-native`

biome.json

@@ -6,7 +6,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "correctness": {
+        "useHookAtTopLevel": "error"
+      }
     }
   },
   "formatter": {

packages/thirdweb/src/react/core/hooks/contract/useReadContract.ts

@@ -139,6 +139,8 @@ export function useReadContract<
       ...queryOptions,
     });
 
+    // TODO - FIX LATER
+    // biome-ignore lint/correctness/useHookAtTopLevel: <explanation>
     return useQuery(query);
   }
   // raw tx case
@@ -157,6 +159,8 @@ export function useReadContract<
       ...queryOptions,
     });
 
+    // TODO - FIX LATER
+    // biome-ignore lint/correctness/useHookAtTopLevel: <explanation>
     return useQuery(query);
   }
 

packages/thirdweb/src/react/native/ui/components/RNImage.tsx

@@ -33,10 +33,19 @@ function getImage(data: string): {
 
 export const RNImage = (props: ImageInfo) => {
   const { data, size, color, placeholder } = props;
-  if (!data) {
+
+  const imageResult = useMemo(() => {
+    if (!data) {
+      return undefined;
+    }
+    return getImage(data);
+  }, [data]);
+
+  if (!imageResult) {
     return null;
   }
-  const { image, type } = useMemo(() => getImage(data), [data]);
+
+  const { image, type } = imageResult;
   switch (type) {
     case "url":
     case "image":

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewNFTs.tsx

@@ -108,10 +108,6 @@ export function ViewNFTsContent(props: {
   const activeAccount = useActiveAccount();
   const activeChain = useActiveWalletChain();
 
-  if (!activeChain?.id || !activeAccount?.address) {
-    return null;
-  }
-
   const nftList = useMemo(() => {
     const nfts = [];
     if (!props.supportedNFTs) return [];
@@ -131,11 +127,25 @@ export function ViewNFTsContent(props: {
   const results = useQueries({
     queries: nftList.map((nft) => ({
       queryKey: ["readContract", nft.chain.id, nft.address],
-      queryFn: () =>
-        fetchNFTs(props.client, nft.chain, nft.address, activeAccount?.address),
+      queryFn: () => {
+        if (!activeAccount) {
+          throw new Error("No active account");
+        }
+        return fetchNFTs(
+          props.client,
+          nft.chain,
+          nft.address,
+          activeAccount.address,
+        );
+      },
+      enabled: !!activeAccount,
     })),
   });
 
+  if (!activeChain?.id || !activeAccount?.address) {
+    return null;
+  }
+
   return (
     <>
       <Container