feat!: add watch into parameters of useContractQuery (#60)

Closes #61 

Changes:
- Add `watch` into the parameters of useContractQuery.
- Remove useWatchContractQuery.

Author: 1cedrus

README.md

@@ -191,7 +191,6 @@ const { connectedAccount, signer } = ... // from subconnect or talisman-connect
 - `useContract`: Create & manage `Contract` instance given its unique id from the registered contract deployments 
 - `useContractTx`: Provides functionality to sign and send transactions to a smart contract, and tracks the progress of the transaction.
 - `useContractQuery`: Help making a contract query
-- `useWatchContractQuery`: Similar to `useContractQuery` with ability to watch for changes
 - `useDeployer`: Create & manage `ContractDeployer` instance given its unique id from the registered contract deployments
 - `useDeployerTx`: Similar to `useContractTx`, this hook provides functionality to sign and send transactions to deploy a smart contract, and tracks the progress of the transaction.
 - `useWatchContractEvent`: Help watch for a specific contract event and perform a specific action

e2e/zombienet/src/hooks/useContractQuery.test.ts

@@ -2,7 +2,7 @@ import { beforeAll, describe, expect, it } from 'vitest';
 import { ALICE, BOB, CHARLIE, deployPsp22Contract, psp22Metadata, wrapper } from '../utils';
 import { numberToHex } from 'dedot/utils';
 import { renderHook, waitFor } from '@testing-library/react';
-import { useContractQuery } from 'typink';
+import { useContractQuery, useContractTx, useRawContract } from 'typink';
 import { Contract } from 'dedot/contracts';
 import { Psp22ContractApi } from 'contracts/psp22';
 
@@ -15,15 +15,18 @@ describe('useContractQuery', () => {
     contract = new Contract<Psp22ContractApi>(client, psp22Metadata, contractAddress, { defaultCaller: ALICE });
   });
 
-  it('should load total supply', async () => {
-    const { result } = renderHook(() => useContractQuery({ contract, fn: 'psp22TotalSupply' }), {
+  it('should work probably', async () => {
+    const { result: totalSupply } = renderHook(() => useContractQuery({ contract, fn: 'psp22TotalSupply' }), {
       wrapper,
     });
 
-    expect(result.current.data).toBeUndefined();
+    expect(totalSupply.current.data).toBeUndefined();
+    expect(totalSupply.current.isLoading).toEqual(true);
+    expect(totalSupply.current.isRefreshing).toEqual(false);
 
     await waitFor(() => {
-      expect(result.current.data).toBe(BigInt(1e20));
+      expect(totalSupply.current.data).toEqual(BigInt(1e20));
+      expect(totalSupply.current.isLoading).toEqual(false);
     });
   });
 
@@ -39,6 +42,62 @@ describe('useContractQuery', () => {
     });
   });
 
+  it('should automatically call refresh on new block when watch is enabled', async () => {
+    const { result: rawContract } = renderHook(() => useRawContract<Psp22ContractApi>(psp22Metadata, contractAddress), {
+      wrapper,
+    });
+
+    await waitFor(() => {
+      expect(rawContract.current.contract).toBeDefined();
+      expect(rawContract.current.contract?.client.options.signer).toBeDefined();
+    });
+
+    const contract = rawContract.current.contract;
+
+    const { result: balanceOf } = renderHook(
+      () => useContractQuery({ contract, fn: 'psp22BalanceOf', args: [ALICE], watch: true }),
+      {
+        wrapper,
+      },
+    );
+
+    await waitFor(() => {
+      expect(balanceOf.current.data).toBeDefined();
+    });
+
+    const beforeTranfer = balanceOf.current.data!;
+    console.log('Before transfer:', beforeTranfer);
+
+    const { result: transfer } = renderHook(
+      () => useContractTx(contract, 'psp22Transfer'), // prettier-end-here
+      {
+        wrapper,
+      },
+    );
+
+    await new Promise<void>((resolve) => {
+      transfer.current.signAndSend({
+        args: [BOB, BigInt(1e12), '0x'],
+        callback: ({ status }) => {
+          if (status.type === 'Finalized') {
+            resolve();
+          }
+        },
+      });
+    });
+    console.log('Transfer completed!');
+
+    await waitFor(
+      () => {
+        expect(balanceOf.current.data).toBeDefined();
+        expect(balanceOf.current.data).toEqual(beforeTranfer - BigInt(1e12));
+      },
+      { timeout: 12000 },
+    );
+
+    console.log('After transfer:', balanceOf.current.data);
+  });
+
   it('should fail dry-run', async () => {
     const { result } = renderHook(
       () =>
@@ -61,4 +120,17 @@ describe('useContractQuery', () => {
       expect(result.current.data?.err).toEqual({ type: 'InsufficientBalance' });
     });
   });
+
+  it('should define error when errors occured', async () => {
+    const { result: balanceOf } = renderHook(
+      () => useContractQuery({ contract, args: ['0x__FAKE'], fn: 'psp22BalanceOf' }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(balanceOf.current.error).toBeDefined();
+    });
+
+    console.log('Error:', balanceOf.current.error);
+  });
 });

examples/demo-subconnect/src/components/GreeterBoard.tsx

@@ -5,17 +5,18 @@ import PendingText from '@/components/shared/PendingText.tsx';
 import { shortenAddress } from '@/utils/string.ts';
 import { ContractId } from 'contracts/deployments';
 import { GreeterContractApi } from 'contracts/types/greeter';
-import { useContract, useContractTx, useWatchContractEvent, useWatchContractQuery } from 'typink';
+import { useContract, useContractQuery, useContractTx, useWatchContractEvent } from 'typink';
 import { txToaster } from '@/utils/txToaster.tsx';
 
 export default function GreetBoard() {
   const { contract } = useContract<GreeterContractApi>(ContractId.GREETER);
   const [message, setMessage] = useState('');
   const setMessageTx = useContractTx(contract, 'setMessage');
 
-  const { data: greet, isLoading } = useWatchContractQuery({
+  const { data: greet, isLoading } = useContractQuery({
     contract,
     fn: 'greet',
+    watch: true,
   });
 
   const handleUpdateGreeting = async () => {

examples/demo/src/components/GreeterBoard.tsx

@@ -5,17 +5,18 @@ import PendingText from '@/components/shared/PendingText.tsx';
 import { shortenAddress } from '@/utils/string.ts';
 import { ContractId } from 'contracts/deployments';
 import { GreeterContractApi } from 'contracts/types/greeter';
-import { useContract, useContractTx, useWatchContractEvent, useWatchContractQuery } from 'typink';
+import { useContract, useContractQuery, useContractTx, useWatchContractEvent } from 'typink';
 import { txToaster } from '@/utils/txToaster.tsx';
 
 export default function GreetBoard() {
   const { contract } = useContract<GreeterContractApi>(ContractId.GREETER);
   const [message, setMessage] = useState('');
   const setMessageTx = useContractTx(contract, 'setMessage');
 
-  const { data: greet, isLoading } = useWatchContractQuery({
+  const { data: greet, isLoading } = useContractQuery({
     contract,
     fn: 'greet',
+    watch: true,
   });
 
   const handleUpdateGreeting = async () => {

packages/typink/src/hooks/__tests__/useContractQuery.test.ts

@@ -1,8 +1,9 @@
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { useContractQuery } from '../useContractQuery.js';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Contract } from 'dedot/contracts';
 import { waitForNextUpdate } from './test-utils.js';
+import { useTypink } from '../useTypink.js';
 
 // Mock the external dependencies
 vi.mock('react-use', () => ({
@@ -14,15 +15,32 @@ vi.mock('./internal/index.js', () => ({
   useRefresher: vi.fn(() => ({ refresh: vi.fn(), counter: 0 })),
 }));
 
+vi.mock('../useTypink', () => ({
+  useTypink: vi.fn(),
+}));
+
 describe('useContractQuery', () => {
   let contract: Contract<any>;
 
+  // Mock the client
+  const mockClient = {
+    query: {
+      system: {
+        number: vi.fn().mockResolvedValue(0),
+      },
+    },
+  };
+
   beforeEach(() => {
     contract = {
       query: {
+        message: vi.fn().mockResolvedValue({ data: 'initial result' }),
         testFunction: vi.fn(),
       },
+      client: mockClient,
     } as any;
+
+    vi.mocked(useTypink).mockReturnValue({ client: mockClient } as any);
   });
 
   afterEach(() => {
@@ -117,9 +135,14 @@ describe('useContractQuery', () => {
     expect(contract.query.testFunction).toHaveBeenCalledTimes(3);
   });
 
-  it('should handle errors from the contract query', async () => {
-    const testError = new Error('Test error');
-    contract.query.testFunction.mockRejectedValue(testError);
+  it('should update refresh state when refresh function is called', async () => {
+    contract.query.testFunction.mockImplementation(() => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ data: 'test result' });
+        }, 100);
+      });
+    });
 
     const { result } = renderHook(() =>
       useContractQuery({
@@ -129,14 +152,39 @@ describe('useContractQuery', () => {
       }),
     );
 
+    expect(result.current.isRefreshing).toBe(false);
+
     await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 0));
+      result.current.refresh();
     });
 
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.error).toBe(testError);
-    expect(result.current.data).toBeUndefined();
-  });
+    expect(result.current.isRefreshing).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isRefreshing).toBe(false);
+      expect(result.current.data).toBe('test result');
+    });
+  }),
+    it('should handle errors from the contract query', async () => {
+      const testError = new Error('Test error');
+      contract.query.testFunction.mockRejectedValue(testError);
+
+      const { result } = renderHook(() =>
+        useContractQuery({
+          contract,
+          // @ts-ignore
+          fn: 'testFunction',
+        }),
+      );
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBe(testError);
+      expect(result.current.data).toBeUndefined();
+    });
 
   it('should reset error state on successful query after an error', async () => {
     const testError = new Error('Test error');
@@ -182,4 +230,40 @@ describe('useContractQuery', () => {
     expect(result.current.error).toBeUndefined();
     expect(result.current.data).toBeUndefined();
   });
+
+  it('should refresh when client.query.system.number changes when watch is enabled', async () => {
+    // Simulate a block number change
+    mockClient.query.system.number.mockImplementation((callback) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          callback(2);
+          setTimeout(() => {
+            callback(3);
+          }, 50);
+        }, 100);
+
+        resolve(() => {});
+      });
+    });
+
+    const { result } = renderHook(() =>
+      useContractQuery({
+        contract,
+        // @ts-ignore
+        fn: 'message',
+        watch: true,
+      }),
+    );
+
+    await waitForNextUpdate();
+
+    expect(result.current.data).toEqual('initial result');
+
+    contract.query.message.mockResolvedValue({ data: 'updated result' });
+
+    await waitFor(() => {
+      expect(contract.query.message).toHaveBeenCalledTimes(3);
+      expect(result.current.data).toEqual('updated result');
+    });
+  });
 });