Improve dx of using by removing the need for readAndParse

examples/next-interface/components/tokenAmountRow.tsx

@@ -13,11 +13,11 @@ import invariant from "tiny-invariant";
 import TokenAmountDisplay from "./tokenAmountDisplay";
 import TokenInfo from "./tokenInfo";
 
-export default function TokenAmountRow({
+export default function TokenAmountRow<TERC20 extends ERC20>({
   erc20,
   erc20AmountQuery,
 }: {
-  erc20: ERC20;
+  erc20: TERC20;
   erc20AmountQuery: UseQueryResult<ERC20Amount<ERC20>>;
 }) {
   const transferMutation = useTransfer(

examples/next-interface/hooks/useBalance.ts

@@ -1,18 +1,32 @@
 import { useQuery } from "@tanstack/react-query";
-import { type ERC20, erc20BalanceOf } from "reverse-mirage";
-import { useQueryGenerator } from "reverse-mirage-react";
-import type { Address } from "wagmi";
+import { type ERC20, erc20BalanceOf, getQueryKey } from "reverse-mirage";
+import { type Address, usePublicClient } from "wagmi";
 import type { HookArg } from "./internal/types";
 import { userRefectchInterval } from "./internal/utils";
+import { useChainID } from "./useChain";
 
 export const useBalance = <TERC20 extends ERC20>(
   erc20: HookArg<TERC20>,
   address: HookArg<Address>,
 ) => {
-  const balanceOfQuery = useQueryGenerator(erc20BalanceOf);
+  const publicClient = usePublicClient();
+  const chainID = useChainID();
 
   return useQuery({
-    ...balanceOfQuery({ erc20, address }),
+    queryKey: getQueryKey(
+      erc20BalanceOf,
+      { erc20: erc20!, address: address! },
+      chainID,
+    ),
+    enabled: [erc20, address].some((a) => a === undefined) ? false : true,
+    queryFn: () =>
+      erc20BalanceOf({
+        args: { erc20: erc20!, address: address! },
+      }).read(publicClient),
+    select: (data) =>
+      erc20BalanceOf({
+        args: { erc20: erc20!, address: address! },
+      }).parse(data),
     staleTime: Infinity,
     refetchInterval: userRefectchInterval,
   });

examples/next-interface/hooks/useTransfer.ts

@@ -1,26 +1,27 @@
 import { type BeetStage, type TxToast, toaster } from "@/components/beet";
-import type { ERC20 } from "@/lib/types";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useMemo } from "react";
 import {
+  type BaseERC20,
   type ERC20Amount,
   erc20BalanceOf,
   erc20Transfer,
+  getQueryKey,
 } from "reverse-mirage";
-import { useQueryGenerator } from "reverse-mirage-react";
 import { getAddress } from "viem";
 import { type Address, useWalletClient } from "wagmi";
 import type { HookArg } from "./internal/types";
 import { useFastClient } from "./internal/useFastClient";
+import { useChainID } from "./useChain";
 
-export const useTransfer = (
-  amount: HookArg<ERC20Amount<ERC20>>,
+export const useTransfer = <TERC20 extends BaseERC20>(
+  amount: HookArg<ERC20Amount<TERC20>>,
   to: HookArg<Address>,
 ) => {
   const queryClient = useQueryClient();
-  const balanceOfQuery = useQueryGenerator(erc20BalanceOf);
   const client = useFastClient();
   const walletClient = useWalletClient();
+  const chainID = useChainID();
 
   const title = "Transfer";
 
@@ -30,7 +31,7 @@ export const useTransfer = (
       to,
       toast,
     }: {
-      amount: ERC20Amount<ERC20>;
+      amount: ERC20Amount<TERC20>;
       to: Address;
     } & {
       toast: TxToast;
@@ -62,10 +63,14 @@ export const useTransfer = (
 
       await Promise.all([
         queryClient.invalidateQueries({
-          queryKey: balanceOfQuery({
-            erc20: input.amount.token,
-            address: getAddress(data.from),
-          }).queryKey,
+          queryKey: getQueryKey(
+            erc20BalanceOf,
+            {
+              erc20: input.amount.token,
+              address: getAddress(data.from),
+            },
+            chainID,
+          ),
         }),
       ]);
     },

examples/next-interface/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "^1.0.1",
-    "@tanstack/react-query": "^4.35.0",
+    "@tanstack/react-query": "^4.35.3",
     "clsx": "^2.0.0",
     "next": "13.4.19",
     "react": "18.2.0",
@@ -24,18 +24,18 @@
     "tiny-invariant": "^1.3.1",
     "ts-extras": "^0.11.0",
     "unstated-next": "^1.1.0",
-    "viem": "^1.10.9",
-    "wagmi": "^1.4.1"
+    "viem": "^1.10.14",
+    "wagmi": "^1.4.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.1.2",
-    "@tanstack/react-query-devtools": "^4.35.0",
-    "@types/node": "^20.6.0",
-    "@types/react": "^18.2.21",
+    "@biomejs/biome": "^1.2.2",
+    "@tanstack/react-query-devtools": "^4.35.3",
+    "@types/node": "^20.6.2",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "autoprefixer": "^10.4.15",
     "csstype": "^3.1.2",
-    "postcss": "^8.4.29",
+    "postcss": "^8.4.30",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2"
   },

examples/next-interface/pages/index.tsx

@@ -9,11 +9,9 @@ import { useAccount } from "wagmi";
 
 export default function Home() {
   const setupMutation = useSetup();
-  console.log(3);
 
   useEffect(() => {
     setupMutation.mutate();
-    console.log(2);
   }, []);
 
   const { isConnected, address } = useAccount();

package.json

@@ -4,7 +4,9 @@
   "description": "",
   "private": true,
   "type": "module",
-  "workspaces": ["packages/*"],
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
     "install:packages": "pnpm --filter './packages/**' install",
     "preinstall": "npx -y only-allow pnpm",
@@ -29,11 +31,11 @@
     "pnpm": ">=8"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.1.2",
+    "@biomejs/biome": "^1.2.2",
     "@changesets/cli": "^2.26.2",
     "@wagmi/cli": "^1.5.0",
     "husky": "^8.0.3",
     "typescript": "^5.2.2",
-    "vitepress": "1.0.0-rc.10"
+    "vitepress": "1.0.0-rc.14"
   }
 }

packages/core/package.json

@@ -26,7 +26,12 @@
     "test:ci": "CI=true vitest --coverage",
     "test:cov": "vitest --coverage"
   },
-  "keywords": ["eth", "ethereum", "dapps", "web3"],
+  "keywords": [
+    "eth",
+    "ethereum",
+    "dapps",
+    "web3"
+  ],
   "author": "Kyle Scott",
   "license": "MIT",
   "repository": "kyscott18/reverse-mirage",
@@ -44,15 +49,15 @@
     "viem": ">=1"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.1.2",
+    "@biomejs/biome": "^1.2.2",
     "@uniswap/sdk-core": "^4.0.7",
     "@viem/anvil": "^0.0.6",
     "@vitest/coverage-v8": "^0.34.4",
-    "bun": "^1.0.0",
+    "bun": "^1.0.2",
     "mitata": "^0.1.6",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
-    "viem": "^1.10.9",
+    "viem": "^1.10.14",
     "vitest": "^0.34.4"
   },
   "packageManager": "[email protected]"

packages/core/src/erc1155/reads.test.ts

@@ -6,7 +6,6 @@ import ERC1155Bytecode from "../../../../contracts/out/ERC1155.sol/ERC1155.json"
 import { ALICE, BOB } from "../_test/constants.js";
 import { publicClient, testClient, walletClient } from "../_test/utils.js";
 import { erc1155ABI } from "../generated.js";
-import { readAndParse } from "../readUtils.js";
 import {
   erc1155BalanceOf,
   erc1155IsApprovedForAll,
@@ -68,33 +67,37 @@ beforeEach(async () => {
 
 describe("erc1155 reads", async () => {
   test("isApprovedForAll", async () => {
-    const isApprovedForAll = await readAndParse(
+    const isApprovedForAll = await erc1155IsApprovedForAll({
       publicClient,
-      erc1155IsApprovedForAll({ erc1155, owner: ALICE, spender: BOB }),
-    );
+      args: {
+        erc1155,
+        owner: ALICE,
+        spender: BOB,
+      },
+    });
 
     expect(isApprovedForAll).toBe(true);
   });
 
   test("uri", async () => {
-    const uri = await readAndParse(publicClient, erc1155URI({ erc1155 }));
+    const uri = await erc1155URI({ publicClient, args: { erc1155 } });
 
     expect(uri).toBe("https://mitch.com");
   });
 
   test("balanceOf", async () => {
-    const balance = await readAndParse(
+    const balance = await erc1155BalanceOf({
       publicClient,
-      erc1155BalanceOf({ erc1155, owner: ALICE }),
-    );
+      args: { erc1155, address: ALICE },
+    });
 
     expect(balance.amount).toBe(10n);
     expect(balance.token).toBe(erc1155);
   });
 
   test("getERC1155", async () => {
-    expect(
-      await readAndParse(publicClient, getERC1155({ erc1155 })),
-    ).toStrictEqual(erc1155);
+    expect(await getERC1155({ publicClient, args: { erc1155 } })).toStrictEqual(
+      erc1155,
+    );
   });
 });