fix useReadContract type hinting

Author: dirtycajunrice

packages/thirdweb/src/contract/types.ts

@@ -0,0 +1,8 @@
+import type { Abi, AbiFunction } from "abitype";
+import type { ThirdwebContract } from "./contract.js";
+
+export type AbiOfLength<TLength> = { length: TLength };
+
+export type AsyncGetAbiFunctionFromContract<TAbi extends Abi> = (
+  contract: ThirdwebContract<TAbi>,
+) => Promise<AbiFunction>;

packages/thirdweb/src/extensions/types.ts

@@ -0,0 +1,6 @@
+import type { Abi } from "abitype";
+import type { BaseTransactionOptions } from "../transaction/types.js";
+
+export type Extension<TAbi extends Abi, TParams extends object, TResult> = (
+  options: BaseTransactionOptions<TParams, TAbi>,
+) => Promise<TResult>;

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

@@ -4,7 +4,8 @@ import {
   useQuery,
 } from "@tanstack/react-query";
 import type { Abi, AbiFunction, ExtractAbiFunctionNames } from "abitype";
-import type { ThirdwebContract } from "../../../../contract/contract.js";
+import type { AbiOfLength, AsyncGetAbiFunctionFromContract } from "../../../../contract/types.js";
+import type { Extension } from "../../../../extensions/types.js";
 import {
   type ReadContractOptions,
   type ReadContractResult,
@@ -17,17 +18,13 @@ import type {
 import type { PreparedMethod } from "../../../../utils/abi/prepare-method.js";
 import { getFunctionId } from "../../../../utils/function-id.js";
 import { stringify } from "../../../../utils/json.js";
-
-type PickedQueryOptions = {
-  enabled?: boolean;
-  refetchInterval?: number;
-  retry?: number;
-};
+import type { WithPickedOnceQueryOptions } from "../types.js";
 
 /**
  * A hook to read state from a contract that automatically updates when the contract changes.
  *
- * You can use raw read calls or read [extensions](https://portal.thirdweb.com/react/v5/extensions) to read from a contract.
+ * You can use raw read calls or read [extensions](https://portal.thirdweb.com/react/v5/extensions) to read from a
+ * contract.
  *
  * @param options - The options for reading from a contract
  * @returns a UseQueryResult object.
@@ -52,20 +49,19 @@ type PickedQueryOptions = {
  * @contract
  */
 export function useReadContract<
-  const abi extends Abi,
-  const method extends abi extends { length: 0 }
+  const TAbi extends Abi,
+  const TMethod extends TAbi extends AbiOfLength<0>
     ? AbiFunction | string
-    : ExtractAbiFunctionNames<abi>,
+    : ExtractAbiFunctionNames<TAbi>,
 >(
-  options: ReadContractOptions<abi, method> & {
-    queryOptions?: PickedQueryOptions;
-  },
+  options: WithPickedOnceQueryOptions<ReadContractOptions<TAbi, TMethod>>,
 ): UseQueryResult<
-  ReadContractResult<PreparedMethod<ParseMethod<abi, method>>[2]>
+  ReadContractResult<PreparedMethod<ParseMethod<TAbi, TMethod>>[2]>
 >;
 /**
  * A hook to read state from a contract that automatically updates when the contract changes.
- * You can use raw read calls or read [extensions](https://portal.thirdweb.com/react/v5/extensions) to read from a contract.
+ * You can use raw read calls or read [extensions](https://portal.thirdweb.com/react/v5/extensions) to read from a
+ * contract.
  *
  * @param extension - An extension to call.
  * @param options - The read extension params.
@@ -82,37 +78,29 @@ export function useReadContract<
  * ```
  */
 export function useReadContract<
-  const abi extends Abi,
-  const params extends object,
-  result,
+  const TAbi extends Abi,
+  const TParams extends object,
+  TResult,
 >(
-  extension: (options: BaseTransactionOptions<params, abi>) => Promise<result>,
-  options: BaseTransactionOptions<params, abi> & {
-    queryOptions?: PickedQueryOptions;
-  },
-): UseQueryResult<result>;
+  extension: Extension<TAbi, TParams, TResult>,
+  options: WithPickedOnceQueryOptions<BaseTransactionOptions<TParams, TAbi>>,
+): UseQueryResult<TResult>;
 
 export function useReadContract<
-  const abi extends Abi,
-  const method extends abi extends {
-    length: 0;
-  }
+  const TAbi extends Abi,
+  const TMethod extends TAbi extends AbiOfLength<0>
     ?
         | AbiFunction
         | `function ${string}`
-        | ((contract: ThirdwebContract<abi>) => Promise<AbiFunction>)
-    : ExtractAbiFunctionNames<abi>,
-  const params extends object,
-  result,
+        | AsyncGetAbiFunctionFromContract<TAbi>
+    : ExtractAbiFunctionNames<TAbi>,
+  const TParams extends object,
+  TResult,
 >(
   extensionOrOptions:
-    | ((options: BaseTransactionOptions<params, abi>) => Promise<result>)
-    | (ReadContractOptions<abi, method> & {
-        queryOptions?: PickedQueryOptions;
-      }),
-  options?: BaseTransactionOptions<params, abi> & {
-    queryOptions?: PickedQueryOptions;
-  },
+    | Extension<TAbi, TParams, TResult>
+    | WithPickedOnceQueryOptions<ReadContractOptions<TAbi, TMethod>>,
+  options?: WithPickedOnceQueryOptions<BaseTransactionOptions<TParams, TAbi>>,
 ) {
   // extension case
   if (typeof extensionOrOptions === "function") {
@@ -131,13 +119,10 @@ export function useReadContract<
         getFunctionId(extensionOrOptions),
         stringify(params),
       ] as const,
-      // @ts-expect-error - TODO: clean up the type issues here
-      queryFn: () => extensionOrOptions({ ...params, contract }),
+      queryFn: () => extensionOrOptions({ ...params as TParams, contract }),
       ...queryOptions,
     });
 
-    // TODO - FIX LATER
-    // biome-ignore lint/correctness/useHookAtTopLevel: <explanation>
     return useQuery(query);
   }
   // raw tx case
@@ -156,8 +141,6 @@ export function useReadContract<
       ...queryOptions,
     });
 
-    // TODO - FIX LATER
-    // biome-ignore lint/correctness/useHookAtTopLevel: <explanation>
     return useQuery(query);
   }
 

packages/thirdweb/src/react/core/hooks/types.ts

@@ -0,0 +1,13 @@
+import type { Prettify } from "../../../utils/type-utils.js";
+
+type BasePickedQueryOptions<T = {}> = T & {
+  enabled?: boolean;
+};
+
+type PickedOnceQueryOptions = Prettify<
+  BasePickedQueryOptions & { refetchInterval?: number; retry?: number }
+>;
+
+export type WithPickedOnceQueryOptions<T> = T & {
+  queryOptions?: PickedOnceQueryOptions;
+};