core: fix enable/disable query (#456)

## Context The query hooks have an `enabled` flag that should be forwarded to `react-query`. This was not the case for some hooks. ## Changes in this Pull Request This PR forwards the `enabled` flag to `react-query` for all hooks. ## Test Plan We updated the `read-contract` demo to have an option to enable/disable the query.
apibara · Jun 26, 2024 · 8adf923 · 8adf923
2 parents dccd4c7 + fcd6ffe
commit 8adf923
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 16 deletions.
diff --git a/.changeset/real-ducks-dress.md b/.changeset/real-ducks-dress.md
@@ -0,0 +1,5 @@
+---
+"@starknet-react/core": patch
+---
+
+Fix disabling queries
diff --git a/packages/core/src/hooks/useBalance.test.ts b/packages/core/src/hooks/useBalance.test.ts
@@ -10,21 +10,21 @@ describe("useBalance", () => {
       const { result } = renderHook(() => useBalance({}));
 
       await waitFor(() => {
-        expect(result.current.status).toEqual("error");
+        expect(result.current.status).toEqual("pending");
       });
 
       expect(result.current).toMatchInlineSnapshot(`
         {
           "data": undefined,
-          "error": [Error: address is required],
+          "error": null,
           "fetchStatus": "idle",
-          "isError": true,
+          "isError": false,
           "isFetching": false,
           "isLoading": false,
-          "isPending": false,
+          "isPending": true,
           "isSuccess": false,
           "refetch": [Function],
-          "status": "error",
+          "status": "pending",
         }
       `);
     });
@@ -34,7 +34,7 @@ describe("useBalance", () => {
     // Some issue with the RPC provider.
     it.skip("returns the balance", async () => {
       const { result } = renderHook(() =>
-        useBalance({ address: accounts.goerli[0].address }),
+        useBalance({ address: accounts.goerli[0].address })
       );
 
       await waitFor(() => {

diff --git a/packages/core/src/hooks/useBalance.ts b/packages/core/src/hooks/useBalance.ts
@@ -81,6 +81,7 @@ export function useBalance({
   });
 
   return useQuery({
+    enabled,
     queryKey: queryKey_,
     queryFn: queryFn({ chain, contract, token, address, blockIdentifier }),
     refetchInterval,

diff --git a/packages/core/src/hooks/useContractRead.ts b/packages/core/src/hooks/useContractRead.ts
@@ -90,6 +90,7 @@ export function useContractRead({
   });
 
   return useQuery({
+    enabled,
     queryKey: queryKey_,
     queryFn: queryFn({
       contract,

diff --git a/packages/core/src/hooks/useEstimateFees.ts b/packages/core/src/hooks/useEstimateFees.ts
@@ -62,6 +62,7 @@ export function useEstimateFees({
   });
 
   return useQuery({
+    enabled,
     queryKey: queryKey_,
     queryFn: queryFn({
       account,

diff --git a/packages/core/src/hooks/useStarkName.ts b/packages/core/src/hooks/useStarkName.ts
@@ -76,7 +76,7 @@ export function useStarkName({
 
   const enabled = useMemo(
     () => Boolean(enabled_ && address),
-    [enabled_, address]
+    [enabled_, address],
   );
 
   return useQuery({
@@ -132,7 +132,7 @@ function queryFn({
       const hexDomain = await executeWithFallback(
         p,
         calldata,
-        fallbackCalldata
+        fallbackCalldata,
       );
       const decimalDomain = hexDomain.result
         .map((element) => BigInt(element))
@@ -151,7 +151,7 @@ function queryFn({
 const executeWithFallback = async (
   provider: ProviderInterface,
   initialCall: Call,
-  fallbackCall: Call
+  fallbackCall: Call,
 ) => {
   try {
     // Attempt the initial call with the hint parameter

diff --git a/packages/core/src/hooks/useStarkProfile.ts b/packages/core/src/hooks/useStarkProfile.ts
@@ -123,7 +123,7 @@ export function useStarkProfile({
 
   const enabled = useMemo(
     () => Boolean(enabled_ && address),
-    [enabled_, address]
+    [enabled_, address],
   );
 
   return useQuery({
@@ -180,13 +180,13 @@ function queryFn({
       address,
       naming,
       identity,
-      contracts
+      contracts,
     );
     const data = await executeMulticallWithFallback(
       multicallContract,
       "aggregate",
       initialCalldata,
-      fallbackCalldata
+      fallbackCalldata,
     );
 
     if (Array.isArray(data)) {
@@ -207,7 +207,7 @@ function queryFn({
           ? data[8]
               .slice(1)
               .map((val: BigInt) =>
-                shortString.decodeShortString(val.toString())
+                shortString.decodeShortString(val.toString()),
               )
               .join("")
           : undefined;
@@ -339,7 +339,7 @@ const executeMulticallWithFallback = async (
   contract: ContractInterface,
   functionName: string,
   initialCalldata: RawArgsArray,
-  fallbackCalldata: RawArgsArray
+  fallbackCalldata: RawArgsArray,
 ) => {
   try {
     // Attempt the initial call with the new hint parameter
@@ -358,7 +358,7 @@ const getStarkProfileCalldata = (
   address: string,
   namingContract: string,
   identityContract: string,
-  contracts: Record<string, string>
+  contracts: Record<string, string>,
 ): {
   initialCalldata: RawArgsArray;
   fallbackCalldata: RawArgsArray;
@@ -446,7 +446,7 @@ const getStarkProfileCalldata = (
       execution: staticExecution(),
       to: hardcoded(identityContract),
       selector: hardcoded(
-        hash.getSelectorFromName("get_extended_verifier_data")
+        hash.getSelectorFromName("get_extended_verifier_data"),
       ),
       calldata: [
         reference(1, 0),

diff --git a/website/components/demos/contract-read.tsx b/website/components/demos/contract-read.tsx
@@ -16,9 +16,12 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "../ui/checkbox";
 
 function ContractRead() {
   const [blockIdentifier, setBlockIdentifier] = useState("latest");
+  const [enabled, setEnabled] = useState(false);
+
   const { chain } = useNetwork();
 
   const { data, refetch, fetchStatus, status } = useContractRead({
@@ -40,6 +43,7 @@ function ContractRead() {
     address: chain.nativeCurrency.address,
     args: [],
     watch: true,
+    enabled,
     blockIdentifier:
       blockIdentifier === "latest" ? BlockTag.latest : BlockTag.pending,
   });
@@ -70,6 +74,19 @@ function ContractRead() {
             </SelectContent>
           </Select>
         </div>
+        <div className="space-y-1 flex items-center space-x-2">
+          <Checkbox
+            id="enableQuery"
+            checked={enabled}
+            onCheckedChange={(c) => setEnabled(c === true)}
+          />
+          <Label
+            htmlFor="enableQuery"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            Enable Query
+          </Label>
+        </div>
         <div className="space-y-1">
           <Label>Fetch status</Label>
           <p>{fetchStatus}</p>