disable invalid requests. use own viem

Author: pixelis0x

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import {
   ChakraProvider,
   createSystem,
@@ -7,6 +7,7 @@ import {
   EnvironmentProvider,
 } from "@chakra-ui/react";
 import { Address } from "viem";
+import { WagmiContext } from "wagmi";
 import posthog from "posthog-js";
 import root from "react-shadow/emotion";
 import { CacheProvider } from "@emotion/react";
@@ -47,6 +48,16 @@ const Widget = ({
     null
   );
 
+  const context = useContext(WagmiContext);
+
+  useEffect(() => {
+    if (!context) {
+      console.error(
+        "Wagmi context is not available. Ensure you are using the EVMProvider."
+      );
+    }
+  }, [context]);
+
   useEffect(() => {
     if (!shadow?.shadowRoot || cache) return;
     const emotionCache = createCache({

widget/index.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@ensofinance/shortcuts-widget",
-  "version": "1.0.25",
+  "version": "1.0.28",
   "type": "module",
   "homepage": "https://www.enso.build/",
   "repository": {
@@ -32,13 +32,13 @@
     "react-shadow": "^20.6.0",
     "react-window": "^1.8.11",
     "url": "^0.11.4",
+    "viem": "^2.22.1",
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.62.10",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "viem": "2.x",
     "wagmi": "^2.14.16"
   },
   "peerDependenciesMeta": {
@@ -61,7 +61,6 @@
     "prettier": "^3.4.2",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
-    "viem": "2.x",
     "vite": "^6.0.5",
     "vite-plugin-dts": "^4.4.0",
     "vite-plugin-lib-inject-css": "^2.2.1",

widget/package.json

@@ -11,7 +11,7 @@ import {
   useWriteContract,
   UseWriteContractReturnType,
 } from "wagmi";
-import { Address, BaseError } from "viem";
+import { Address, BaseError, isAddress } from "viem";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { RouteData } from "@ensofinance/sdk";
 import {
@@ -71,6 +71,12 @@ export const useErc20Balance = (
     abi: erc20Abi,
     functionName: "balanceOf",
     args: [address],
+    query: {
+      enabled:
+        isAddress(address) &&
+        isAddress(tokenAddress) &&
+        !compareCaseInsensitive(tokenAddress, ETH_ADDRESS),
+    },
   });
 };
 
@@ -90,6 +96,9 @@ export const useTokenBalance = (
   const { data: balance, queryKey: balanceQueryKey } = useBalance({
     address,
     chainId,
+    query: {
+      enabled: compareCaseInsensitive(token, ETH_ADDRESS),
+    },
   });
 
   useEffect(() => {
@@ -115,6 +124,12 @@ export const useAllowance = (token: Address, spender: Address) => {
     abi: erc20Abi,
     functionName: "allowance",
     args: [address, spender],
+    query: {
+      enabled:
+        isAddress(address) &&
+        isAddress(token) &&
+        !compareCaseInsensitive(token, ETH_ADDRESS),
+    },
   });
 
   useEffect(() => {
@@ -125,7 +140,7 @@ export const useAllowance = (token: Address, spender: Address) => {
 };
 
 export const useApprove = (token: Address, target: Address, amount: string) => {
-  const tokenData = useTokenFromList(token);
+  const [tokenData] = useTokenFromList(token);
   const chainId = usePriorityChainId();
 
   return {

widget/src/util/wallet.tsx

@@ -26,7 +26,6 @@ export default defineConfig(({ mode }) => ({
         "react",
         "react-dom",
         "wagmi",
-        "viem",
         "@tanstack/react-query",
         "react/jsx-runtime",
         "react/jsx-dev-runtime",