disable refetch interval; add invalidate cache on user transactions

spaceward/package.json

@@ -73,17 +73,18 @@
 		"@tanstack/react-query": "^4.36.1",
 		"@tharsis/proto": "^0.1.20",
 		"@uidotdev/usehooks": "^2.4.1",
+		"@wagmi/core": "2.10.4",
 		"@walletconnect/auth-client": "^2.1.2",
 		"@walletconnect/core": "^2.11.0",
 		"@walletconnect/types": "^2.11.0",
 		"@walletconnect/utils": "^2.11.0",
 		"@walletconnect/web3wallet": "^1.10.0",
 		"@wardenprotocol/wardenjs": "file:../wardenjs",
+		"@web3-onboard/common": "2.4.2",
 		"@web3-onboard/core": "^2.23.0",
 		"@web3-onboard/injected-wallets": "^2.11.2",
 		"@web3-onboard/react": "^2.10.0",
 		"@web3-onboard/transaction-preview": "^2.1.2",
-		"@web3-onboard/wagmi": "^2.0.1",
 		"@web3-onboard/walletconnect": "^2.6.1",
 		"buffer": "^6.0.3",
 		"chain-registry": "^1.29.1",
@@ -95,6 +96,8 @@
 		"dayjs": "^1.11.10",
 		"emoji-hash-gen": "^1.0.3",
 		"esbuild-plugin-polyfill-node": "^0.3.0",
+		"eventemitter3": "5.0.1",
+		"joi": "^17.13.3",
 		"js-sha256": "^0.10.1",
 		"jsqr": "^1.4.0",
 		"libp2p": "^1.0.8",

spaceward/src/App.tsx

@@ -56,15 +56,15 @@ import { hashQueryKey } from "./utils/queryKeyHash.ts";
 import { DashboardPage } from "./pages/Dashboard.tsx";
 import { Web3OnboardProvider, init, useWagmiConfig } from "@web3-onboard/react";
 import injectedModule from "@web3-onboard/injected-wallets";
-import wagmi, { createConfig } from "@web3-onboard/wagmi";
+import wagmi, { createConfig } from "./utils/web3-onboard/wagmi";
 import walletConnect from "@web3-onboard/walletconnect";
 import { WagmiProvider } from "wagmi";
 import { defineChain, http } from "viem";
 
 const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
-			refetchInterval: 2000,
+			staleTime: 15_000,
 			queryKeyHashFn: hashQueryKey,
 		},
 	},
@@ -156,7 +156,14 @@ const chain = defineChain({
 
 const defaultConfig = createConfig({
 	chains: [chain],
-	transports: [http()],
+	transports: {
+		[chain.id]: http(undefined, {
+			batch: {
+				batchSize: 1000,
+				wait: 16
+			},
+		})
+	},
 })
 
 function InjectWagmi({ children }: { children: React.ReactNode }) {

spaceward/src/features/actions/Action.tsx

@@ -14,12 +14,14 @@ import { ActionModel } from "@/hooks/query/types";
 import { fromBytes, isAddressEqual, toBytes } from "viem";
 import { ActionStatus } from "@/hooks/query/act";
 import { fromBech32 } from "@cosmjs/encoding";
+import { QueryKey, useQueryClient } from "@tanstack/react-query";
 
-export function Action({ action }: { action: ActionModel }) {
+export function Action({ action, queryKey }: { action: ActionModel, queryKey: QueryKey }) {
 	const [{ wallet }] = useConnectWallet();
 	const address = wallet?.accounts[0].address;
 	const { writeContractAsync } = useWriteContract();
 	const client = usePublicClient();
+	const queryClient = useQueryClient();
 	const [{ chains, connectedChain }, setChain] = useSetChain();
 
 	async function voteFor(voteType: ActionVoteType) {
@@ -36,6 +38,8 @@ export function Action({ action }: { action: ActionModel }) {
 			}),
 			client,
 		);
+
+		queryClient.invalidateQueries({ queryKey });
 	}
 
 	if (!action.msg) {

spaceward/src/features/actions/Actions.tsx

@@ -123,6 +123,7 @@ export function Actions() {
 													<div className="space-y-4">
 														<Action
 															action={action}
+															queryKey={q.queryKey}
 														/>
 													</div>
 												</AccordionContent>

spaceward/src/features/actions/ApproveSidebar.tsx

@@ -11,13 +11,14 @@ import { useConnectWallet, useSetChain } from "@web3-onboard/react";
 import { PRECOMPILE_ACT_ADDRESS } from "@/contracts/constants";
 import { ActionStatus, useActionsByAddress } from "@/hooks/query/act";
 import { isAddressEqual } from "viem";
+import { useQueryClient } from "@tanstack/react-query";
 
 export default function ApproveSidebar() {
 	const [open, setOpen] = useState(false);
 	const [{ wallet }] = useConnectWallet();
 	const address = wallet?.accounts[0].address;
 
-	const { data } = useActionsByAddress({
+	const { data, queryKey } = useActionsByAddress({
 		request: {
 			address,
 			status: ActionStatus.Pending
@@ -26,6 +27,7 @@ export default function ApproveSidebar() {
 
 	const { writeContractAsync } = useWriteContract();
 	const client = usePublicClient();
+	const queryClient = useQueryClient();
 	const [{ chains, connectedChain }, setChain] = useSetChain();
 
 	async function voteFor(actionId: bigint, voteType: ActionVoteType) {
@@ -42,6 +44,8 @@ export default function ApproveSidebar() {
 			}),
 			client,
 		);
+
+		queryClient.invalidateQueries({ queryKey });
 	}
 
 	const actions = data?.actions.filter(

spaceward/src/features/actions/StatusSidebar.tsx

@@ -1,8 +1,12 @@
 import "./animate.css";
 import clsx from "clsx";
 import { useContext, useEffect, useRef, useState } from "react";
+import { sendTransaction as _sendTransaction } from "viem/actions";
+import { getAction, parseEventLogs } from "viem/utils";
+import { useConfig, usePublicClient, useWalletClient } from "wagmi";
+import { readContractQueryOptions } from "wagmi/query"
 import { walletContext } from "@cosmos-kit/react-lite";
-import { Action, ActionStatus } from "@wardenprotocol/wardenjs/codegen/warden/act/v1beta1/action";
+import { ActionStatus } from "@wardenprotocol/wardenjs/codegen/warden/act/v1beta1/action";
 import { useToast } from "@/components/ui/use-toast";
 
 import {
@@ -17,13 +21,12 @@ import { QueuedAction, QueuedActionStatus, useActionsState } from "./hooks";
 import { getActionHandler, GetStatus, handleCosmos, handleEth, handleEthRaw } from "./util";
 import { TEMP_KEY, useKeySettingsState } from "../keys/state";
 import Assets from "../keys/assets";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { QueryKey, useQuery, useQueryClient } from "@tanstack/react-query";
 import { capitalize } from "../modals/util";
 import { queryCosmosClients } from "../assets/queries";
-import { sendTransaction as _sendTransaction } from "viem/actions";
-import { getAction, parseEventLogs } from "viem/utils";
-import { usePublicClient, useWalletClient } from "wagmi";
 import actPrecompileAbi from "@/contracts/actPrecompileAbi";
+import { env } from "@/env";
+import { PRECOMPILE_ACT_ADDRESS } from "@/contracts/constants";
 
 interface ItemProps extends QueuedAction {
 	single?: boolean;
@@ -54,15 +57,15 @@ function ActionItem({ single, ...item }: ItemProps) {
 	const cosmosClients = useQuery(queryCosmosClients(walletManager)).data;
 	const clientsRef = useRef(cosmosClients);
 	clientsRef.current = cosmosClients;
-
 	const { data: ks, setData: setKeySettings } = useKeySettingsState();
 	const { toast } = useToast()
+	const config = useConfig();
 	const { w } = useWeb3Wallet("wss://relay.walletconnect.org");
 	const { setData } = useActionsState();
 
 	const type = typeof item.keyThemeIndex !== "undefined" ?
-		"key" : (["walletConnectRequestId", "walletConnectTopic"] as const).every(key => typeof item[key] !== "undefined") ?
-			"wc" : typeof item.snapRequestId ?
+		"key" : item.wc ?
+			"wc" : item.snap ?
 				"snap" : undefined
 
 	const ready = Boolean(walletClient && publicClient);
@@ -208,12 +211,23 @@ function ActionItem({ single, ...item }: ItemProps) {
 						}
 
 						const client = await getClient();
-						let action: Action | undefined;
+
+						const queryOptions = readContractQueryOptions(config, {
+							chainId: env.evmChainId,
+							address: PRECOMPILE_ACT_ADDRESS,
+							abi: actPrecompileAbi,
+							functionName: "actionById",
+							args: [item.actionId],
+						});
+
+						let action: Awaited<ReturnType<typeof queryOptions.queryFn>>["action"] | undefined;
 
 						try {
-							const res = await client.warden.act.v1beta1.actionById({
-								id: item.actionId,
-							});
+
+							const res = await queryClient.fetchQuery(
+								// @ts-expect-error fixme update @tanstack/react-query version to > 5
+								queryOptions
+							);
 
 							action = res.action;
 						} catch (e) {
@@ -277,9 +291,12 @@ function ActionItem({ single, ...item }: ItemProps) {
 
 				case QueuedActionStatus.ActionReady: {
 					let getStatus: GetStatus | undefined;
+					let queryKeys: QueryKey[] = [];
 
 					try {
-						getStatus = getActionHandler(item).getStatus;
+						const res = getActionHandler(item);
+						getStatus = res.getStatus;
+						queryKeys = res.queryKeys;
 					} catch (e) {
 						console.error(e);
 
@@ -322,6 +339,10 @@ function ActionItem({ single, ...item }: ItemProps) {
 						} else if (status.pending) {
 							setTimeout(checkResult, 1000);
 						} else if (status.done) {
+							for (const queryKey of queryKeys) {
+								queryClient.invalidateQueries({ queryKey });
+							}
+
 							if (!status.next) {
 								toast({
 									title: "Success",