[lib] Stop using Ethers.js client from Wagmi

Summary:
In Wagmi 1.0 they switch from Ethers.js to their in-house alternative Viem.

Our `ENSCache` code is built on Ethers.js. I'll consider migrating that to Viem, but for now the easiest thing is to decouple it.

Depends on D9432

Test Plan:
1. Confirm that ENS resolution still works on mobile and web by opening up the inbox when I have recently chatted with an ENS user, and confirm that they ENS name is displayed
2. In combination with other diffs in the stack, I tested the following on both my local environment, and in a staging environment for my keyserver on comm.domains:
  - Mobile sign in with Rainbow wallet using Rainbow login
  - Mobile sign in with Rainbow wallet using WalletConnect login
  - Web sign in with Rainbow wallet using Rainbow login
  - Web sign in with Rainbow wallet using WalletConnect login
  - Web sign in with Metamask wallet

Reviewers: rohan, atul, ginsu

Reviewed By: atul

Subscribers: tomek, wyilio

Differential Revision: https://phab.comm.dev/D9433

landing/siwe.react.js

@@ -20,7 +20,7 @@ import {
   createSIWEMessage,
 } from 'lib/utils/siwe-utils.js';
 import {
-  WagmiENSCacheProvider,
+  AlchemyENSCacheProvider,
   wagmiClient,
   wagmiChains,
 } from 'lib/utils/wagmi-utils.js';
@@ -161,15 +161,15 @@ function SIWEWrapper(): React.Node {
   }, []);
   return (
     <WagmiConfig client={wagmiClient}>
-      <WagmiENSCacheProvider>
+      <AlchemyENSCacheProvider>
         <RainbowKitProvider
           theme={theme}
           modalSize="compact"
           chains={wagmiChains}
         >
           <SIWE />
         </RainbowKitProvider>
-      </WagmiENSCacheProvider>
+      </AlchemyENSCacheProvider>
     </WagmiConfig>
   );
 }

lib/utils/wagmi-utils.js

@@ -8,8 +8,9 @@ import {
   walletConnectWallet,
   // eslint-disable-next-line import/extensions
 } from '@rainbow-me/rainbowkit/wallets';
+import { ethers } from 'ethers';
 import * as React from 'react';
-import { configureChains, createClient, useProvider } from 'wagmi';
+import { configureChains, createClient } from 'wagmi';
 // eslint-disable-next-line import/extensions
 import { mainnet } from 'wagmi/chains';
 // eslint-disable-next-line import/extensions
@@ -65,15 +66,21 @@ const connectors = connectorsForWallets([
 const wagmiClient: mixed = createWagmiClient({ connectors, provider });
 const wagmiChains: mixed = chains;
 
+const ethersAlchemyProvider = new ethers.providers.AlchemyProvider(
+  'mainnet',
+  process.env.COMM_ALCHEMY_KEY,
+);
+
 type Props = {
   +children: React.Node,
 };
-function WagmiENSCacheProvider(props: Props): React.Node {
+function AlchemyENSCacheProvider(props: Props): React.Node {
   const { children } = props;
-  const wagmiProvider = useProvider();
   return (
-    <ENSCacheProvider provider={wagmiProvider}>{children}</ENSCacheProvider>
+    <ENSCacheProvider provider={ethersAlchemyProvider}>
+      {children}
+    </ENSCacheProvider>
   );
 }
 
-export { wagmiClient, wagmiChains, WagmiENSCacheProvider };
+export { wagmiClient, wagmiChains, AlchemyENSCacheProvider };

web/app.react.js

@@ -30,7 +30,7 @@ import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { registerConfig } from 'lib/utils/config.js';
 import { infoFromURL } from 'lib/utils/url-utils.js';
-import { WagmiENSCacheProvider, wagmiClient } from 'lib/utils/wagmi-utils.js';
+import { AlchemyENSCacheProvider, wagmiClient } from 'lib/utils/wagmi-utils.js';
 
 import QrCodeLogin from './account/qr-code-login.react.js';
 import WebEditThreadAvatarProvider from './avatars/web-edit-thread-avatar-provider.react.js';
@@ -191,7 +191,7 @@ class App extends React.PureComponent<Props> {
           <TooltipProvider>
             <MenuProvider>
               <WagmiConfig client={wagmiClient}>
-                <WagmiENSCacheProvider>
+                <AlchemyENSCacheProvider>
                   <MessageSearchStateProvider>
                     <FocusHandler />
                     <VisibilityHandler />
@@ -202,7 +202,7 @@ class App extends React.PureComponent<Props> {
                     <InviteLinksRefresher />
                     {content}
                   </MessageSearchStateProvider>
-                </WagmiENSCacheProvider>
+                </AlchemyENSCacheProvider>
               </WagmiConfig>
             </MenuProvider>
           </TooltipProvider>