Use web3modal

app/src/components/ui/ConnectWallet.tsx

@@ -2,25 +2,22 @@
 
 import {
   useAccount,
-  useConnect,
-  useDisconnect,
   useEnsName,
 } from 'wagmi'
-import { injected } from 'wagmi/connectors'
 import Button from './Button';
 import { shortenAddress } from '@/lib/utils';
+import { useWeb3Modal } from '@web3modal/wagmi/react';
 
 export default function ConnectWallet() {
   const { address, isConnected } = useAccount()
   const { data: ensName } = useEnsName({ address })
-  const { connect } = useConnect();
-  const { disconnect } = useDisconnect()
+  const signInModal = useWeb3Modal();
 
   if (isConnected) {
     return (
       <Button
         onClick={() => {
-          disconnect();
+          signInModal.open({ view: "Account" })
         }}
       >
         {ensName ? ensName : shortenAddress(address as string)}
@@ -32,7 +29,7 @@ export default function ConnectWallet() {
     <div>
       <Button
         onClick={() => {
-          connect({ connector: injected() })
+          signInModal.open()
         }}
       >
         {"Connect Wallet"}

app/src/lib/wagmiConfig.ts

@@ -1,13 +1,30 @@
-import { http, createConfig } from 'wagmi'
+import { http } from 'wagmi'
 import { sepolia } from 'wagmi/chains'
-import { injected } from 'wagmi/connectors'
+import { createWeb3Modal } from '@web3modal/wagmi/react'
+import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
 
-export const wagmiConfig = createConfig({
-  chains: [sepolia],
-  connectors: [
-    injected(),
+const metadata = {
+  name: 'Governance Params Example | Axiom',
+  description: 'Governance Params Example using Axiom',
+  url: '', // origin must match your domain & subdomain
+  icons: [''],
+}
+
+export const wagmiConfig = defaultWagmiConfig({
+  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string,
+  metadata,
+  chains: [
+    sepolia,
   ],
   transports: {
-    [sepolia.id]: http(process.env.NEXT_PUBLIC_ALCHEMY_URI_SEPOLIA),
+    [sepolia.id]: http(process.env.NEXT_PUBLIC_ALCHEMY_URI_SEPOLIA as string),
   },
-})
+  // Continuously throws "localStorage is not defined" errors
+  enableCoinbase: false,
+});
+
+createWeb3Modal({
+  wagmiConfig,
+  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string,
+  themeMode: 'dark',
+});