core: add option to override useContract provider

packages/core/src/hooks/useContract.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Abi, Contract } from "starknet";
+import { Abi, Contract, ProviderInterface } from "starknet";
 
 import { useStarknet } from "~/context/starknet";
 
@@ -9,6 +9,8 @@ export interface UseContractArgs {
   abi?: Abi;
   /** The contract address. */
   address?: string;
+  /** The provider, by default it will be the current one. */
+  provider?: ProviderInterface | null
 }
 
 /** Value returned from `useContract`. */
@@ -40,15 +42,17 @@ export interface UseContractResult {
 export function useContract({
   abi,
   address,
+  provider: providedProvider
 }: UseContractArgs): UseContractResult {
-  const { provider } = useStarknet();
-
+  const { provider:currentProvider } = useStarknet();
+  
   const contract = useMemo(() => {
+    const provider = providedProvider ? providedProvider : currentProvider;
     if (abi && address && provider) {
       return new Contract(abi, address, provider);
     }
     return undefined;
-  }, [abi, address, provider]);
+  }, [abi, address, providedProvider, currentProvider]);
 
   return { contract };
 }

website/content/hooks/useContract.mdx

@@ -9,7 +9,9 @@ Get a contract.
 ## Usage
 
 ```ts
+"use client"
 import { useContract } from "@starknet-react/core";
+
 const testAddress = "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
 const abi = [
     {
@@ -48,10 +50,11 @@ const abi = [
     },
 ];
 export default function Component() {
-    const { contract } = useContract({ abi, address: testAddress })
-
+    const { contract } = useContract({ abi: abi, address: testAddress })
     return (
-        <div>{contract?.address}</div>
+        <div>
+            {contract?.address}
+        </div>
     )
 }
 ```
@@ -65,6 +68,10 @@ export default function Component() {
  * __address__`: string`
     - The contract address.
 
+ * __provider__`?: ProviderInterface | null`
+    - Override the provider used by the contract.
+    - `ProviderInterface` is from starknet.js.
+
 ## Returns
 
  * __contract?__`: Contract`