fix: auth connector not showing in wagmi (#2290)

apps/laboratory/src/components/Wagmi/WagmiGetCallsStatusTest.tsx

@@ -5,14 +5,16 @@ import { getCallsStatus } from '@wagmi/core/experimental'
 import { useCallback, useState, useEffect } from 'react'
 import { useChakraToast } from '../Toast'
 import { EIP_5792_RPC_METHODS } from '../../utils/EIP5792Utils'
-import { wagmiConfig } from '../../pages/library/wagmi'
+import { CONFIGS } from '../../utils/WagmiConstants'
 import { bigIntReplacer } from '../../utils/CommonUtils'
+import { useRouter } from 'next/router'
 
 export function WagmiGetCallsStatusTest() {
   const [ethereumProvider, setEthereumProvider] =
     useState<Awaited<ReturnType<(typeof EthereumProvider)['init']>>>()
   const [isLoading, setLoading] = useState(false)
   const [batchCallId, setBatchCallId] = useState('')
+  const router = useRouter()
 
   const { status, address } = useAccount()
   const connection = useConnections()
@@ -23,7 +25,10 @@ export function WagmiGetCallsStatusTest() {
   const onGetCallsStatus = useCallback(async () => {
     setLoading(true)
     try {
-      const batchCallsStatus = await getCallsStatus(wagmiConfig, { id: batchCallId })
+      const configType = ['email', 'all', 'wallet'].some(type => router.asPath.includes(type))
+        ? 'email'
+        : 'default'
+      const batchCallsStatus = await getCallsStatus(CONFIGS[configType], { id: batchCallId })
       toast({
         title: 'Success',
         description: JSON.stringify(batchCallsStatus, bigIntReplacer),

apps/laboratory/src/pages/library/wagmi-all.tsx

@@ -1,26 +1,18 @@
 import { createWeb3Modal } from '@web3modal/wagmi/react'
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { WagmiProvider } from 'wagmi'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
-import { WagmiConstantsUtil } from '../../utils/WagmiConstants'
+import { CONFIGS } from '../../utils/WagmiConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { SiweData } from '../../components/Siwe/SiweData'
 import { siweConfig } from '../../utils/SiweUtils'
 
 const queryClient = new QueryClient()
 
-export const wagmiConfig = defaultWagmiConfig({
-  chains: WagmiConstantsUtil.chains,
-  projectId: ConstantsUtil.ProjectId,
-  metadata: ConstantsUtil.Metadata,
-  enableEmail: true,
-  ssr: true
-})
-
+const wagmiConfig = CONFIGS.email
 const modal = createWeb3Modal({
   wagmiConfig,
   projectId: ConstantsUtil.ProjectId,

apps/laboratory/src/pages/library/wagmi-email.tsx

@@ -1,28 +1,17 @@
 import { createWeb3Modal } from '@web3modal/wagmi/react'
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { WagmiProvider } from 'wagmi'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
-import { WagmiConstantsUtil } from '../../utils/WagmiConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
+import { CONFIGS } from '../../utils/WagmiConstants'
 
 const queryClient = new QueryClient()
 
-export const wagmiConfig = defaultWagmiConfig({
-  chains: WagmiConstantsUtil.chains,
-  projectId: ConstantsUtil.ProjectId,
-  metadata: ConstantsUtil.Metadata,
-  enableEmail: true,
-  auth: {
-    socials: ['google', 'x', 'discord', 'apple', 'github']
-  },
-  ssr: true
-})
-
+const wagmiConfig = CONFIGS.email
 const modal = createWeb3Modal({
   wagmiConfig,
   projectId: ConstantsUtil.ProjectId,

apps/laboratory/src/pages/library/wagmi-siwe.tsx

@@ -1,23 +1,17 @@
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
 import { createWeb3Modal } from '@web3modal/wagmi/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
-import { WagmiConstantsUtil } from '../../utils/WagmiConstants'
+import { CONFIGS } from '../../utils/WagmiConstants'
 import { SiweData } from '../../components/Siwe/SiweData'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { siweConfig } from '../../utils/SiweUtils'
 
 const queryClient = new QueryClient()
 
-export const wagmiConfig = defaultWagmiConfig({
-  chains: WagmiConstantsUtil.chains,
-  projectId: ConstantsUtil.ProjectId,
-  metadata: ConstantsUtil.Metadata,
-  ssr: true
-})
+const wagmiConfig = CONFIGS.default
 const modal = createWeb3Modal({
   wagmiConfig,
   projectId: ConstantsUtil.ProjectId,

apps/laboratory/src/pages/library/wagmi-wallet.tsx

@@ -1,27 +1,17 @@
 import { createWeb3Modal } from '@web3modal/wagmi/react'
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { WagmiProvider } from 'wagmi'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
-import { WagmiConstantsUtil } from '../../utils/WagmiConstants'
+import { CONFIGS } from '../../utils/WagmiConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
 
 const queryClient = new QueryClient()
 
-export const wagmiConfig = defaultWagmiConfig({
-  chains: WagmiConstantsUtil.chains,
-  projectId: ConstantsUtil.ProjectId,
-  metadata: ConstantsUtil.Metadata,
-  enableEmail: true,
-  ssr: true,
-  auth: {
-    socials: ['google', 'x', 'discord', 'apple', 'github']
-  }
-})
+const wagmiConfig = CONFIGS.email
 
 const modal = createWeb3Modal({
   wagmiConfig,

apps/laboratory/src/pages/library/wagmi.tsx

@@ -1,22 +1,16 @@
 import { createWeb3Modal } from '@web3modal/wagmi/react'
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
-import { WagmiConstantsUtil } from '../../utils/WagmiConstants'
+import { CONFIGS } from '../../utils/WagmiConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
 
 const queryClient = new QueryClient()
 
-export const wagmiConfig = defaultWagmiConfig({
-  chains: WagmiConstantsUtil.chains,
-  projectId: ConstantsUtil.ProjectId,
-  metadata: ConstantsUtil.Metadata,
-  ssr: true
-})
+const wagmiConfig = CONFIGS.default
 
 const modal = createWeb3Modal({
   wagmiConfig,

apps/laboratory/src/utils/WagmiConstants.ts

@@ -1,3 +1,4 @@
+import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
 import {
   arbitrum,
   aurora,
@@ -15,6 +16,7 @@ import {
   optimismSepolia,
   type Chain
 } from 'wagmi/chains'
+import { ConstantsUtil } from './ConstantsUtil'
 
 export const WagmiConstantsUtil = {
   chains: [
@@ -34,3 +36,22 @@ export const WagmiConstantsUtil = {
     optimismSepolia
   ] as [Chain, ...Chain[]]
 }
+
+export const CONFIGS = {
+  default: defaultWagmiConfig({
+    chains: WagmiConstantsUtil.chains,
+    projectId: ConstantsUtil.ProjectId,
+    metadata: ConstantsUtil.Metadata,
+    ssr: true
+  }),
+  email: defaultWagmiConfig({
+    chains: WagmiConstantsUtil.chains,
+    projectId: ConstantsUtil.ProjectId,
+    metadata: ConstantsUtil.Metadata,
+    enableEmail: true,
+    auth: {
+      socials: ['google', 'x', 'discord', 'apple', 'github']
+    },
+    ssr: true
+  })
+}