Merge pull request #849 from blockscout/update-wagmi

update wagmi and fix proxi contract write

global.d.ts

-import type { ExternalProvider } from 'types/client/wallets';
+import type { WindowProvider } from 'wagmi';
 
 type CPreferences = {
   zone: string;
@@ -8,9 +8,7 @@ type CPreferences = {
 
 declare global {
   export interface Window {
-    ethereum?: {
-      providers?: Array<ExternalProvider>;
-    };
+    ethereum?: WindowProvider;
     coinzilla_display: Array<CPreferences>;
     ga?: {
       getAll: () => Array<{ get: (prop: string) => string }>;

lib/csp/policies/walletConnect.ts

@@ -10,8 +10,7 @@ export function walletConnect(): CspDev.DirectiveDescriptor {
   return {
     'connect-src': [
       '*.walletconnect.com',
-      'wss://*.bridge.walletconnect.org',
-      'wss://www.walletlink.org',
+      'wss://relay.walletconnect.com',
     ],
     'img-src': [
       '*.walletconnect.com',

lib/web3/useProvider.tsx

 import React from 'react';
+import type { WindowProvider } from 'wagmi';
 
-import type { ExternalProvider } from 'types/client/wallets';
+import 'wagmi/window';
 
 import appConfig from 'configs/app/config';
 
 export default function useProvider() {
-  const [ provider, setProvider ] = React.useState<ExternalProvider>();
+  const [ provider, setProvider ] = React.useState<WindowProvider>();
 
   React.useEffect(() => {
     if (!('ethereum' in window)) {

next.config.js

@@ -28,6 +28,7 @@ const moduleExports = withTM({
         use: [ '@svgr/webpack' ],
       },
     );
+    config.resolve.fallback = { fs: false, net: false, tls: false };
 
     return config;
   },

package.json

@@ -43,14 +43,13 @@
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
-    "@web3modal/ethereum": "^2.0.0-rc.2",
-    "@web3modal/react": "^2.0.0-rc.2",
+    "@web3modal/ethereum": "^2.4.1",
+    "@web3modal/react": "^2.4.1",
     "bignumber.js": "^9.1.0",
     "chakra-react-select": "^4.4.3",
     "d3": "^7.6.1",
     "dayjs": "^1.11.5",
     "dom-to-image": "^2.6.0",
-    "ethers": "^5.7.2",
     "framer-motion": "^6.5.1",
     "graphiql": "^2.2.0",
     "graphql": "^16.6.0",
@@ -78,7 +77,8 @@
     "react-scroll": "^1.8.7",
     "swagger-ui-react": "^4.15.5",
     "use-font-face-observer": "^1.2.1",
-    "wagmi": "^0.10.6"
+    "viem": "^0.3.39",
+    "wagmi": "^1.0.9"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.32.3",
@@ -100,6 +100,7 @@
     "@types/swagger-ui-react": "^4.11.0",
     "@types/ws": "^8.5.3",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "css-loader": "^6.7.3",
     "dotenv-cli": "^6.0.0",
     "eslint": "^8.32.0",

playwright/TestApp.tsx

 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { providers } from 'ethers';
+import { w3mProvider } from '@web3modal/ethereum';
 import React from 'react';
-import { createClient, WagmiConfig } from 'wagmi';
+import { configureChains, createConfig, WagmiConfig } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
-import { MockConnector } from 'wagmi/connectors/mock';
 
 import { AppContextProvider } from 'lib/appContext';
 import type { Props as PageProps } from 'lib/next/getServerSideProps';
@@ -28,25 +27,17 @@ const defaultAppContext = {
 };
 
 // >>> Web3 stuff
-const provider = new providers.JsonRpcProvider(
-  'http://localhost:8545',
-  {
-    name: 'POA',
-    chainId: 99,
-  },
+const { publicClient } = configureChains(
+  [ mainnet ],
+  [
+    w3mProvider({ projectId: '' }),
+  ],
 );
 
-const connector = new MockConnector({
-  chains: [ mainnet ],
-  options: {
-    signer: provider.getSigner(),
-  },
-});
-
-const wagmiClient = createClient({
-  autoConnect: true,
-  connectors: [ connector ],
-  provider,
+const wagmiConfig = createConfig({
+  autoConnect: false,
+  connectors: [ ],
+  publicClient,
 });
 // <<<<
 
@@ -65,7 +56,7 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
       <QueryClientProvider client={ queryClient }>
         <SocketProvider url={ withSocket ? `ws://localhost:${ PORT }` : undefined }>
           <AppContextProvider { ...appContext }>
-            <WagmiConfig client={ wagmiClient }>
+            <WagmiConfig config={ wagmiConfig }>
               { children }
             </WagmiConfig>
           </AppContextProvider>

types/client/wallets.ts

-import type { providers } from 'ethers';
-
 export type WalletType = 'metamask' | 'coinbase';
 
 export interface WalletInfo {
   name: string;
   icon: React.ElementType;
 }
-
-export interface ExternalProvider extends providers.ExternalProvider {
-  isCoinbaseWallet?: boolean;
-  // have to patch ethers here, since params could be not only an array
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  request?: (request: { method: string; params?: any }) => Promise<any>;
-}

types/utils.ts

-export type ArrayElement<ArrayType extends Array<unknown>> =
-    ArrayType extends Array<(infer ElementType)> ? ElementType : never;
+export type ArrayElement<ArrType> = ArrType extends ReadonlyArray<infer ElementType>
+  ? ElementType
+  : never;
 
 export type ExcludeNull<T> = T extends null ? never : T;
 

ui/address/AddressDetails.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
+import type { WindowProvider } from 'wagmi';
 
 import type { Address } from 'types/api/address';
 
@@ -74,7 +75,7 @@ test('token', async({ mount, page }) => {
   await page.evaluate(() => {
     window.ethereum = {
       providers: [ { isMetaMask: true } ],
-    };
+    }as WindowProvider;
   });
 
   const component = await mount(

ui/address/contract/ContractMethodCallable.tsx

@@ -7,7 +7,6 @@ import { useForm } from 'react-hook-form';
 import type { MethodFormFields, ContractMethodCallResult } from './types';
 import type { SmartContractMethodInput, SmartContractMethod } from 'types/api/contract';
 
-import appConfig from 'configs/app/config';
 import arrowIcon from 'icons/arrows/down-right.svg';
 
 import ContractMethodField from './ContractMethodField';
@@ -25,7 +24,7 @@ interface Props<T extends SmartContractMethod> {
   isWrite?: boolean;
 }
 
-const getFieldName = (name: string, index: number): string => name || String(index);
+const getFieldName = (name: string | undefined, index: number): string => name || String(index);
 
 const sortFields = (data: Array<SmartContractMethodInput>) => ([ a ]: [string, string], [ b ]: [string, string]): 1 | -1 | 0 => {
   const fieldNames = data.map(({ name }, index) => getFieldName(name, index));
@@ -67,14 +66,14 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
   const [ result, setResult ] = React.useState<ContractMethodCallResult<T>>();
   const [ isLoading, setLoading ] = React.useState(false);
 
-  const inputs = React.useMemo(() => {
+  const inputs: Array<SmartContractMethodInput> = React.useMemo(() => {
     return [
       ...('inputs' in data ? data.inputs : []),
-      ...(data.stateMutability === 'payable' ? [ {
+      ...('stateMutability' in data && data.stateMutability === 'payable' ? [ {
         name: 'value',
-        type: appConfig.network.currency.symbol,
-        internalType: appConfig.network.currency.symbol,
-      } as SmartContractMethodInput ] : []),
+        type: 'uint256' as const,
+        internalType: 'uint256' as const,
+      } ] : []),
     ];
   }, [ data ]);
 

ui/address/contract/ContractWrite.tsx

 import React from 'react';
-import { useAccount, useSigner, useNetwork, useSwitchNetwork } from 'wagmi';
+import { useAccount, useWalletClient, useNetwork, useSwitchNetwork } from 'wagmi';
 
 import type { SmartContractWriteMethod } from 'types/api/contract';
 
@@ -24,7 +24,7 @@ interface Props {
 }
 
 const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
-  const { data: signer } = useSigner();
+  const { data: walletClient } = useWalletClient();
   const { isConnected } = useAccount();
   const { chain } = useNetwork();
   const { switchNetworkAsync } = useSwitchNetwork();
@@ -39,17 +39,17 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
     },
   });
 
-  const { contract, proxy, custom } = useContractContext();
-  const _contract = (() => {
+  const { contractInfo, customInfo, proxyInfo } = useContractContext();
+  const abi = (() => {
     if (isProxy) {
-      return proxy;
+      return proxyInfo?.abi;
     }
 
     if (isCustomAbi) {
-      return custom;
+      return customInfo?.abi;
     }
 
-    return contract;
+    return contractInfo?.abi;
   })();
 
   const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string | Array<unknown>>) => {
@@ -61,30 +61,37 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
       await switchNetworkAsync?.(Number(config.network.id));
     }
 
-    if (!_contract) {
+    if (!abi) {
       throw new Error('Something went wrong. Try again later.');
     }
 
-    if (item.type === 'receive') {
-      const value = args[0] ? getNativeCoinValue(args[0]) : '0';
-      const result = await signer?.sendTransaction({
-        to: addressHash,
+    if (item.type === 'receive' || item.type === 'fallback') {
+      const value = getNativeCoinValue(args[0]);
+      const hash = await walletClient?.sendTransaction({
+        to: addressHash as `0x${ string }` | undefined,
         value,
       });
-      return { hash: result?.hash as string };
+      return { hash };
     }
 
-    const _args = item.stateMutability === 'payable' ? args.slice(0, -1) : args;
-    const value = item.stateMutability === 'payable' ? getNativeCoinValue(args[args.length - 1]) : undefined;
-    const methodName = item.type === 'fallback' ? 'fallback' : item.name;
+    const _args = 'stateMutability' in item && item.stateMutability === 'payable' ? args.slice(0, -1) : args;
+    const value = 'stateMutability' in item && item.stateMutability === 'payable' ? getNativeCoinValue(args[args.length - 1]) : undefined;
+    const methodName = item.name;
 
-    const result = await _contract[methodName](..._args, {
-      gasLimit: 100_000,
-      value,
+    if (!methodName) {
+      throw new Error('Method name is not defined');
+    }
+
+    const hash = await walletClient?.writeContract({
+      args: _args,
+      abi: abi,
+      functionName: methodName,
+      address: addressHash as `0x${ string }`,
+      value: value as undefined,
     });
 
-    return { hash: result.hash as string };
-  }, [ _contract, addressHash, chain, isConnected, signer, switchNetworkAsync ]);
+    return { hash };
+  }, [ isConnected, chain, abi, walletClient, addressHash, switchNetworkAsync ]);
 
   const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
     return (

ui/address/contract/ContractWriteResultDumb.pw.tsx

@@ -12,7 +12,7 @@ test('loading', async({ mount }) => {
       error: null,
     },
     result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
     },
     onSettle: () => {},
   };
@@ -33,7 +33,7 @@ test('success', async({ mount }) => {
       error: null,
     },
     result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
     },
     onSettle: () => {},
   };
@@ -57,7 +57,7 @@ test('error +@mobile', async({ mount }) => {
       } as Error,
     },
     result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
     },
     onSettle: () => {},
   };

ui/address/contract/context.tsx

 import { useQueryClient } from '@tanstack/react-query';
-import type { Contract } from 'ethers';
 import React from 'react';
-import { useContract, useProvider, useSigner } from 'wagmi';
 
 import type { Address } from 'types/api/address';
+import type { SmartContract } from 'types/api/contract';
 
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 
@@ -13,20 +12,18 @@ type ProviderProps = {
 }
 
 type TContractContext = {
-  contract: Contract | null;
-  proxy: Contract | null;
-  custom: Contract | null;
+  contractInfo: SmartContract | undefined;
+  proxyInfo: SmartContract | undefined;
+  customInfo: SmartContract | undefined;
 };
 
 const ContractContext = React.createContext<TContractContext>({
-  contract: null,
-  proxy: null,
-  custom: null,
+  proxyInfo: undefined,
+  contractInfo: undefined,
+  customInfo: undefined,
 });
 
 export function ContractContextProvider({ addressHash, children }: ProviderProps) {
-  const provider = useProvider();
-  const { data: signer } = useSigner();
   const queryClient = useQueryClient();
 
   const { data: contractInfo } = useApiQuery('contract', {
@@ -58,27 +55,11 @@ export function ContractContextProvider({ addressHash, children }: ProviderProps
     },
   });
 
-  const contract = useContract({
-    address: addressHash,
-    abi: contractInfo?.abi ?? undefined,
-    signerOrProvider: signer ?? provider,
-  });
-  const proxy = useContract({
-    address: addressInfo?.implementation_address ?? undefined,
-    abi: proxyInfo?.abi ?? undefined,
-    signerOrProvider: signer ?? provider,
-  });
-  const custom = useContract({
-    address: addressHash,
-    abi: customInfo ?? undefined,
-    signerOrProvider: signer ?? provider,
-  });
-
   const value = React.useMemo(() => ({
-    contract,
-    proxy,
-    custom,
-  }), [ contract, proxy, custom ]);
+    proxyInfo,
+    contractInfo,
+    customInfo,
+  } as TContractContext), [ proxyInfo, contractInfo, customInfo ]);
 
   return (
     <ContractContext.Provider value={ value }>

ui/address/contract/types.ts

@@ -6,7 +6,7 @@ export type MethodFormFields = Record<string, string>;
 
 export type ContractMethodReadResult = SmartContractQueryMethodRead | ResourceError;
 
-export type ContractMethodWriteResult = Error | { hash: string } | undefined;
+export type ContractMethodWriteResult = Error | { hash: `0x${ string }` | undefined } | undefined;
 
 export type ContractMethodCallResult<T extends SmartContractMethod> =
     T extends { method_id: string } ? ContractMethodReadResult : ContractMethodWriteResult;

ui/address/contract/utils.ts

-import BigNumber from 'bignumber.js';
-
 import config from 'configs/app/config';
 
 export const getNativeCoinValue = (value: string | Array<unknown>) => {
   const _value = Array.isArray(value) ? value[0] : value;
 
   if (typeof _value !== 'string') {
-    return '0';
+    return BigInt(0);
   }
 
-  return BigNumber(_value).times(10 ** config.network.currency.decimals).toString();
+  return BigInt(Number(_value) * 10 ** config.network.currency.decimals);
 };
 
 export const addZeroesAllowed = (valueType: string) => {

ui/shared/NetworkAddToWallet.tsx

@@ -30,7 +30,9 @@ const NetworkAddToWallet = ({ className }: Props) => {
           rpcUrls: [ appConfig.network.rpcUrl ],
           blockExplorerUrls: [ appConfig.baseUrl ],
         } ],
-      };
+      // in wagmi types for wallet_addEthereumChain method is not provided
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any;
       await provider?.request?.(config);
       toast({
         position: 'top-right',

ui/shared/Web3ModalProvider.tsx

 import { useColorModeValue, useToken } from '@chakra-ui/react';
-import {
-  EthereumClient,
-  modalConnectors,
-  walletConnectProvider,
-} from '@web3modal/ethereum';
+import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum';
 import { Web3Modal } from '@web3modal/react';
 import React from 'react';
 import type { Chain } from 'wagmi';
-import { configureChains, createClient, WagmiConfig } from 'wagmi';
+import { configureChains, createConfig, WagmiConfig } from 'wagmi';
 
 import appConfig from 'configs/app/config';
 
-const { wagmiClient, ethereumClient } = (() => {
+const getConfig = () => {
   try {
+    if (!appConfig.walletConnect.projectId) {
+      throw new Error('WalletConnect Project ID is not set');
+    }
+
     const currentChain: Chain = {
       id: Number(appConfig.network.id),
       name: appConfig.network.name || '',
@@ -23,6 +23,9 @@ const { wagmiClient, ethereumClient } = (() => {
         symbol: appConfig.network.currency.symbol || '',
       },
       rpcUrls: {
+        'public': {
+          http: [ appConfig.network.rpcUrl || '' ],
+        },
         'default': {
           http: [ appConfig.network.rpcUrl || '' ],
         },
@@ -37,21 +40,23 @@ const { wagmiClient, ethereumClient } = (() => {
 
     const chains = [ currentChain ];
 
-    const { provider } = configureChains(chains, [
-      walletConnectProvider({ projectId: appConfig.walletConnect.projectId || '' }),
+    const { publicClient } = configureChains(chains, [
+      w3mProvider({ projectId: appConfig.walletConnect.projectId || '' }),
     ]);
-    const wagmiClient = createClient({
+    const wagmiConfig = createConfig({
       autoConnect: true,
-      connectors: modalConnectors({ appName: 'web3Modal', chains }),
-      provider,
+      connectors: w3mConnectors({ projectId: appConfig.walletConnect.projectId, chains, version: 2 }),
+      publicClient,
     });
-    const ethereumClient = new EthereumClient(wagmiClient, chains);
+    const ethereumClient = new EthereumClient(wagmiConfig, chains);
 
-    return { wagmiClient, ethereumClient };
+    return { wagmiConfig, ethereumClient };
   } catch (error) {
-    return { wagmiClient: undefined, ethereumClient: undefined };
+    return { wagmiConfig: undefined, ethereumClient: undefined };
   }
-})();
+};
+
+const { wagmiConfig, ethereumClient } = getConfig();
 
 interface Props {
   children: React.ReactNode;
@@ -62,21 +67,24 @@ const Web3ModalProvider = ({ children, fallback }: Props) => {
   const modalZIndex = useToken<string>('zIndices', 'modal');
   const web3ModalTheme = useColorModeValue('light', 'dark');
 
-  if (!wagmiClient || !ethereumClient) {
+  if (!wagmiConfig || !ethereumClient || !appConfig.walletConnect.projectId) {
     return typeof fallback === 'function' ? fallback() : (fallback || null);
   }
 
   return (
-    <WagmiConfig client={ wagmiClient }>
-      { children }
+    <>
+      <WagmiConfig config={ wagmiConfig }>
+        { children }
+      </WagmiConfig>
       <Web3Modal
         projectId={ appConfig.walletConnect.projectId }
         ethereumClient={ ethereumClient }
-        themeZIndex={ Number(modalZIndex) }
         themeMode={ web3ModalTheme }
-        themeBackground="themeColor"
+        themeVariables={{
+          '--w3m-z-index': modalZIndex,
+        }}
       />
-    </WagmiConfig>
+    </>
   );
 };
 

ui/shared/address/AddressAddToWallet.tsx

@@ -26,7 +26,7 @@ const AddressAddToWallet = ({ className, token, isLoading }: Props) => {
           type: 'ERC20', // Initially only supports ERC20, but eventually more!
           options: {
             address: token.address,
-            symbol: token.symbol,
+            symbol: token.symbol || '',
             decimals: Number(token.decimals) || 18,
             // TODO: add token image when we have it in API
             // image: ''

ui/snippets/footer/Footer.pw.tsx

 import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
+import type { WindowProvider } from 'wagmi';
 
 import { FOOTER_LINKS } from 'mocks/config/footerLinks';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
@@ -64,7 +65,7 @@ base.describe('without custom links', () => {
     await page.evaluate(() => {
       window.ethereum = {
         providers: [ { isMetaMask: true } ],
-      };
+      } as WindowProvider;
     });
 
     await mount(