Add @tanstack/eslint-plugin-query and update @typescript-eslint/eslint-plugin

.eslintrc.json

@@ -3,6 +3,7 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "next/core-web-vitals",
+    "plugin:@tanstack/query/recommended",
     "prettier"
   ],
   "rules": {

.prettierrc.json

@@ -1,7 +1,7 @@
 {
-  "arrowParens:": "always",
+  "arrowParens": "always",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "printWidth": 80,
   "proseWrap": "always",
   "semi": true,

package.json

@@ -59,14 +59,16 @@
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.4.4",
     "@playwright/test": "^1.57.0",
+    "@tanstack/eslint-plugin-query": "^5.101.1",
     "@types/jest": "^30.0.0",
     "@types/json-schema": "^7.0.15",
     "@types/lodash": "^4.17.20",
     "@types/node": "^24.1.0",
     "@types/papaparse": "^5.3.15",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.30.1",
+    "@typescript-eslint/eslint-plugin": "^8.62.0",
+    "@typescript-eslint/parser": "^8.62.0",
     "eslint": "^9.32.0",
     "eslint-config-next": "15.4.4",
     "eslint-config-prettier": "^10.1.8",

src/app/(sidebar)/transactions-explorer/page.tsx

@@ -53,7 +53,11 @@ export default function Explorer() {
     return map;
   });
 
-  const txsQuery = useGetRpcTxs({
+  const {
+    refetch: refetchTxs,
+    isError,
+    error,
+  } = useGetRpcTxs({
     rpcUrl: network.rpcUrl,
     headers: getNetworkHeaders(network, "rpc"),
     startLedger,
@@ -104,10 +108,10 @@ export default function Explorer() {
       }
 
       try {
-        await txsQuery.refetch();
+        const txsResult = await refetchTxs();
 
-        if (txsQuery.data?.transactions && !txsQuery.error) {
-          for (const txinfo of txsQuery.data.transactions) {
+        if (txsResult.data?.transactions && !txsResult.error) {
+          for (const txinfo of txsResult.data.transactions) {
             const normalizedTx = await normalizeTransaction(txinfo);
 
             if (normalizedTx) {
@@ -126,8 +130,8 @@ export default function Explorer() {
             .splice(-500);
           localStorage.setItem(localStorageKey, jsonStringify(txs)!);
 
-          if (txsQuery.data.latestLedger) {
-            setStartLedger(txsQuery.data.latestLedger);
+          if (txsResult.data.latestLedger) {
+            setStartLedger(txsResult.data.latestLedger);
           }
         }
       } catch (e) {
@@ -144,16 +148,16 @@ export default function Explorer() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     network?.rpcUrl,
-    txsQuery,
+    refetchTxs,
     iter,
     nextFetchAt,
     transactions,
     localStorageKey,
   ]);
 
-  const errorElement = txsQuery.isError ? (
+  const errorElement = isError ? (
     <Alert variant="error" placement="inline">
-      {txsQuery.error.message}
+      {error?.message}
     </Alert>
   ) : null;
 

src/app/(sidebar)/xdr/view/page.tsx

@@ -53,11 +53,10 @@ export default function ViewXdr() {
     isFetching: isLatestTxnFetching,
     isLoading: isLatestTxnLoading,
     refetch: fetchLatestTxn,
-  } = useLatestTxn(
-    network.rpcUrl,
-    getNetworkHeaders(network, "rpc"),
-    ["xdr", "latestTxn"],
-  );
+  } = useLatestTxn(network.rpcUrl, getNetworkHeaders(network, "rpc"), [
+    "xdr",
+    "latestTxn",
+  ]);
 
   const queryClient = useQueryClient();
 
@@ -208,7 +207,12 @@ export default function ViewXdr() {
                     if (latestTxn) {
                       // Reset query to clear old data
                       queryClient.resetQueries({
-                        queryKey: ["xdr", "latestTxn", network.rpcUrl],
+                        queryKey: [
+                          "xdr",
+                          "latestTxn",
+                          network.rpcUrl,
+                          getNetworkHeaders(network, "rpc"),
+                        ],
                         exact: true,
                       });
                       updateXdrBlob("");

src/helpers/errorUtils.ts

@@ -1,3 +1,25 @@
+/**
+ * Extracts a human-readable message from an unknown error value.
+ *
+ * Handles `Error` instances, raw strings, and arbitrary objects (falling back
+ * to `JSON.stringify`, then `String`).
+ */
+export const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  if (typeof error === "string") {
+    return error;
+  }
+
+  try {
+    return JSON.stringify(error);
+  } catch {
+    return String(error);
+  }
+};
+
 export const isExternalError = (error: Error) => {
   const stack = error.stack || "";
 

src/query/external/useSEContractStorage.ts

@@ -21,7 +21,12 @@ export const useSEContractStorage = ({
   totalEntriesCount: number | undefined;
 }) => {
   const query = useQuery<ContractStorageResponseItem[] | null>({
-    queryKey: ["useSEContractStorage", networkId, contractId],
+    queryKey: [
+      "useSEContractStorage",
+      networkId,
+      contractId,
+      totalEntriesCount,
+    ],
     queryFn: async () => {
       // No entries
       if (!totalEntriesCount) {

src/query/useAccountInfo.ts

@@ -1,3 +1,4 @@
+import { getErrorMessage } from "@/helpers/errorUtils";
 import { NetworkHeaders } from "@/types/types";
 import { useQuery } from "@tanstack/react-query";
 
@@ -11,7 +12,7 @@ export const useAccountInfo = ({
   headers: NetworkHeaders;
 }) => {
   const query = useQuery({
-    queryKey: ["accountInfo", publicKey],
+    queryKey: ["accountInfo", publicKey, horizonUrl, headers],
     queryFn: async () => {
       try {
         const response = await fetch(`${horizonUrl}/accounts/${publicKey}`, {
@@ -31,8 +32,8 @@ export const useAccountInfo = ({
           isFunded: true,
           details: responseJson,
         };
-      } catch (e: any) {
-        throw `Something went wrong. ${e}`;
+      } catch (error) {
+        throw new Error(`Something went wrong. ${getErrorMessage(error)}`);
       }
     },
     enabled: false,

src/query/useAccountSequenceNumber.ts

@@ -16,7 +16,12 @@ export const useAccountSequenceNumber = ({
   enabled?: boolean;
 }) => {
   const query = useQuery({
-    queryKey: ["accountSequenceNumber", { publicKey, uniqueId }],
+    queryKey: [
+      "accountSequenceNumber",
+      { publicKey, uniqueId },
+      horizonUrl,
+      headers,
+    ],
     queryFn: async () => {
       let sourceAccount = publicKey;
 

src/query/useAddTrustline.ts

@@ -24,7 +24,15 @@ export const useAddTrustline = ({
   headers: NetworkHeaders;
 }) => {
   const query = useQuery({
-    queryKey: ["addTrustline", publicKey],
+    queryKey: [
+      "addTrustline",
+      publicKey,
+      asset.assetCode,
+      asset.assetIssuer,
+      network.horizonUrl,
+      network.passphrase,
+      headers,
+    ],
     queryFn: async () => {
       if (!asset.assetCode || !asset.assetIssuer) {
         throw new Error("Asset code and issuer are required");

src/query/useBuildRpcTransaction.ts

@@ -30,7 +30,16 @@ export const useBuildRpcTransaction = ({
   timeoutInSeconds?: number;
 }) => {
   const query = useQuery({
-    queryKey: ["buildRpcTransaction", publicKey, operation],
+    queryKey: [
+      "buildRpcTransaction",
+      publicKey,
+      rpcUrl,
+      operation,
+      networkPassphrase,
+      timeoutInSeconds,
+      headers,
+      rpcUrl,
+    ],
     queryFn: async () => {
       if (!publicKey) {
         throw "Public key is required.";

src/query/useBuildVerification.ts

@@ -13,7 +13,7 @@ export const useBuildVerification = ({
 }) => {
   const queries = useQueries({
     queries: contractIds.map((contractId) => ({
-      queryKey: ["buildVerification", contractId, rpcUrl],
+      queryKey: ["buildVerification", contractId, rpcUrl, headers],
       queryFn: () =>
         getBuildVerification({
           contractId,

src/query/useCheckTxSignatures.ts

@@ -14,7 +14,7 @@ export const useCheckTxSignatures = ({
   headers: NetworkHeaders;
 }) => {
   const query = useQuery({
-    queryKey: ["tx", "signatures"],
+    queryKey: ["tx", "signatures", xdr, networkPassphrase, networkUrl, headers],
     queryFn: async () => {
       try {
         return await fetchTxSignatures({

src/query/useEndpoint.ts

@@ -12,7 +12,7 @@ export const useEndpoint = ({
   headers: NetworkHeaders;
 }) => {
   const query = useQuery({
-    queryKey: ["endpoint", "response", postData],
+    queryKey: ["endpoint", "response", postData, requestUrl, headers],
     queryFn: async () => {
       const endpointResponse = await fetch(sanitizeUrl(requestUrl), {
         headers,

src/query/useFetchRpcTxDetails.ts

@@ -11,7 +11,7 @@ export const useFetchRpcTxDetails = ({
   txHash: string;
 }) => {
   const query = useQuery({
-    queryKey: ["useFetchRpcTxDetails", rpcUrl, txHash],
+    queryKey: ["useFetchRpcTxDetails", rpcUrl, txHash, headers],
     queryFn: async () => {
       try {
         const response = await fetch(rpcUrl, {

src/query/useFriendBot.ts

@@ -20,7 +20,14 @@ export const useFriendBot = ({
       : "https://friendbot.stellar.org";
 
   const query = useQuery({
-    queryKey: ["friendBot", publicKey, key],
+    queryKey: [
+      "friendBot",
+      publicKey,
+      key,
+      network,
+      knownFriendbotURL,
+      headers,
+    ],
     queryFn: async () => {
       if (!network.horizonUrl) {
         throw new Error(`Please use a network that supports Horizon`);

src/query/useGetContractDataFromRpcById.ts

@@ -24,7 +24,14 @@ export const useGetContractDataFromRpcById = ({
     | null
     | undefined
   >({
-    queryKey: ["useGetContractDataFromRpcById", contractId, rpcUrl],
+    queryKey: [
+      "useGetContractDataFromRpcById",
+      contractId,
+      rpcUrl,
+      execWasmType,
+      execStellarAssetType,
+      headers,
+    ],
     queryFn: async () => {
       if (!contractId || !rpcUrl) {
         return null;

src/query/useGetRpcTxDetails.ts

@@ -13,7 +13,7 @@ export const useGetRpcTxDetails = ({
   tx: string;
 }) => {
   const query = useQuery({
-    queryKey: ["useGetRpcTxDetails", rpcUrl, tx],
+    queryKey: ["useGetRpcTxDetails", rpcUrl, tx, headers],
     queryFn: async () => {
       const rpcServer = new StellarRpc.Server(rpcUrl, {
         headers,

src/query/useGetRpcTxs.ts

@@ -1,3 +1,4 @@
+import { getErrorMessage } from "@/helpers/errorUtils";
 import { NetworkHeaders } from "@/types/types";
 import { rpc as StellarRpc } from "@stellar/stellar-sdk";
 
@@ -13,7 +14,7 @@ export const useGetRpcTxs = ({
   startLedger: number;
 }) => {
   const query = useQuery({
-    queryKey: ["useGetRpcTxs", rpcUrl, startLedger],
+    queryKey: ["useGetRpcTxs", rpcUrl, startLedger, headers],
     queryFn: async () => {
       const rpcServer = new StellarRpc.Server(rpcUrl, {
         headers,
@@ -33,15 +34,19 @@ export const useGetRpcTxs = ({
           params.startLedger = latestLedger.sequence;
         }
       } catch (error) {
-        throw `there was an error with fetching latest ledger. e: ${error}`;
+        throw new Error(
+          `there was an error with fetching latest ledger. e: ${getErrorMessage(error)}`,
+        );
       }
 
       try {
         const response = await rpcServer.getTransactions(params);
 
         return response;
       } catch (error) {
-        throw `there was an error with fetching transactions. e: ${error}`;
+        throw new Error(
+          `there was an error with fetching transactions. e: ${getErrorMessage(error)}`,
+        );
       }
     },
     enabled: false,

src/query/useHorizonHealthCheckUntilReady.ts

@@ -10,7 +10,7 @@ export const useHorizonHealthCheckUntilReady = (
   headers: AnyObject,
 ) => {
   const query = useQuery({
-    queryKey: ["useHorizonHealthCheckUntilReady", horizonUrl],
+    queryKey: ["useHorizonHealthCheckUntilReady", horizonUrl, headers],
     queryFn: async () => {
       if (!horizonUrl) {
         return null;

src/query/useLatestLedger.ts

@@ -11,7 +11,7 @@ export const useLatestLedger = ({
   headers: NetworkHeaders;
 }) => {
   const query = useQuery({
-    queryKey: ["latestLedger"],
+    queryKey: ["latestLedger", rpcUrl, headers],
     queryFn: async () => {
       const rpcServer = new StellarRpc.Server(rpcUrl, {
         headers,

src/query/useLatestTxn.ts

@@ -8,7 +8,7 @@ export const useLatestTxn = (
   queryKey: string[] = ["latestTxn"],
 ) => {
   const query = useQuery({
-    queryKey: [...queryKey, rpcUrl],
+    queryKey: [...queryKey, rpcUrl, headers],
     queryFn: async () => {
       try {
         const rpcServer = new StellarRpc.Server(rpcUrl, {

src/query/useRpcHealthCheckUntilReady.ts

@@ -10,7 +10,7 @@ export const useRpcHealthCheckUntilReady = (
   headers: AnyObject,
 ) => {
   const query = useQuery({
-    queryKey: ["useRpcHealthCheckUntilReady", rpcUrl],
+    queryKey: ["useRpcHealthCheckUntilReady", rpcUrl, headers],
     queryFn: async () => {
       if (!rpcUrl) {
         return null;

src/query/useWasmBinaryFromRpc.ts

@@ -18,7 +18,7 @@ export const useWasmBinaryFromRpc = ({
   headers?: NetworkHeaders;
 }) => {
   const query = useQuery<Buffer | null>({
-    queryKey: ["useWasmBinaryFromRpc", wasmHash, rpcUrl],
+    queryKey: ["useWasmBinaryFromRpc", wasmHash, rpcUrl, headers],
     queryFn: async () => {
       if (!wasmHash || !rpcUrl) {
         return null;