refactor: decouple EVM connectors from app env — accept metadata via factory params

Author: fernandomg

src/sdk/react/evm/connectors/connectkit.tsx

@@ -2,9 +2,8 @@ import { ConnectKitProvider, getDefaultConfig, useModal } from 'connectkit'
 import type { FC, ReactNode } from 'react'
 import type { Chain, Transport } from 'viem'
 import { createConfig } from 'wagmi'
-import { env } from '@/src/env'
 
-import type { EvmConnectorConfig } from '../types'
+import type { ConnectorAppMetadata, EvmConnectorConfig } from '../types'
 
 const WalletProvider: FC<{ children: ReactNode }> = ({ children }) => (
   <ConnectKitProvider
@@ -22,20 +21,22 @@ function useConnectModal() {
   return { open: () => setOpen(true) }
 }
 
-/** ConnectKit-backed EVM connector. */
-export const connectkitConnector: EvmConnectorConfig = {
-  createConfig(chains: Chain[], transports: Record<number, Transport>) {
-    const connectkitParams = getDefaultConfig({
-      chains: chains as [Chain, ...Chain[]],
-      transports,
-      walletConnectProjectId: env.PUBLIC_WALLETCONNECT_PROJECT_ID,
-      appName: env.PUBLIC_APP_NAME,
-      appDescription: env.PUBLIC_APP_DESCRIPTION,
-      appUrl: env.PUBLIC_APP_URL,
-      appIcon: env.PUBLIC_APP_LOGO,
-    })
-    return createConfig(connectkitParams)
-  },
-  WalletProvider,
-  useConnectModal,
+/** Creates a ConnectKit-backed EVM connector from app metadata. */
+export function createConnectkitConnector(metadata: ConnectorAppMetadata): EvmConnectorConfig {
+  return {
+    createConfig(chains: Chain[], transports: Record<number, Transport>) {
+      const connectkitParams = getDefaultConfig({
+        chains: chains as [Chain, ...Chain[]],
+        transports,
+        walletConnectProjectId: metadata.walletConnectProjectId,
+        appName: metadata.appName,
+        appDescription: metadata.appDescription,
+        appUrl: metadata.appUrl,
+        appIcon: metadata.appIcon,
+      })
+      return createConfig(connectkitParams)
+    },
+    WalletProvider,
+    useConnectModal,
+  }
 }

src/sdk/react/evm/connectors/connectors.test.ts

@@ -2,53 +2,57 @@ import { http } from 'viem'
 import { mainnet } from 'viem/chains'
 import { describe, expect, it } from 'vitest'
 
-import { connectkitConnector } from './connectkit'
-import { rainbowkitConnector } from './rainbowkit'
-import { reownConnector } from './reown'
+import type { ConnectorAppMetadata } from '../types'
+import { createConnectkitConnector } from './connectkit'
+import { createRainbowkitConnector } from './rainbowkit'
+import { createReownConnector } from './reown'
 
-describe('connectkitConnector', () => {
-  it('createConfig returns a wagmi Config containing the supplied chain', () => {
-    const config = connectkitConnector.createConfig([mainnet], { [mainnet.id]: http() })
-    expect(config.chains).toContain(mainnet)
-  })
-
-  it('WalletProvider is a function', () => {
-    expect(typeof connectkitConnector.WalletProvider).toBe('function')
-  })
+const testMetadata: ConnectorAppMetadata = {
+  appName: 'Test App',
+  walletConnectProjectId: 'test-project-id',
+}
 
-  it('useConnectModal is a function', () => {
-    expect(typeof connectkitConnector.useConnectModal).toBe('function')
+describe('createConnectkitConnector', () => {
+  it('returns an EvmConnectorConfig with createConfig, WalletProvider, useConnectModal', () => {
+    const connector = createConnectkitConnector(testMetadata)
+    expect(typeof connector.createConfig).toBe('function')
+    expect(typeof connector.WalletProvider).toBe('function')
+    expect(typeof connector.useConnectModal).toBe('function')
   })
-})
 
-describe('rainbowkitConnector', () => {
   it('createConfig returns a wagmi Config containing the supplied chain', () => {
-    const config = rainbowkitConnector.createConfig([mainnet], { [mainnet.id]: http() })
+    const connector = createConnectkitConnector(testMetadata)
+    const config = connector.createConfig([mainnet], { [mainnet.id]: http() })
     expect(config.chains).toContain(mainnet)
   })
+})
 
-  it('WalletProvider is a function', () => {
-    expect(typeof rainbowkitConnector.WalletProvider).toBe('function')
+describe('createRainbowkitConnector', () => {
+  it('returns an EvmConnectorConfig with createConfig, WalletProvider, useConnectModal', () => {
+    const connector = createRainbowkitConnector(testMetadata)
+    expect(typeof connector.createConfig).toBe('function')
+    expect(typeof connector.WalletProvider).toBe('function')
+    expect(typeof connector.useConnectModal).toBe('function')
   })
 
-  it('useConnectModal is a function', () => {
-    expect(typeof rainbowkitConnector.useConnectModal).toBe('function')
+  it('createConfig returns a wagmi Config containing the supplied chain', () => {
+    const connector = createRainbowkitConnector(testMetadata)
+    const config = connector.createConfig([mainnet], { [mainnet.id]: http() })
+    expect(config.chains).toContain(mainnet)
   })
 })
 
-describe('reownConnector', () => {
-  it('createConfig returns a wagmi Config containing the supplied chain id', () => {
-    const config = reownConnector.createConfig([mainnet], { [mainnet.id]: http() })
-    // Reown's WagmiAdapter wraps chains with extra fields (chainNamespace, caipNetworkId, assets),
-    // so reference equality fails — assert by chain id instead.
-    expect(config.chains).toContainEqual(expect.objectContaining({ id: mainnet.id }))
+describe('createReownConnector', () => {
+  it('returns an EvmConnectorConfig with createConfig, WalletProvider, useConnectModal', () => {
+    const connector = createReownConnector(testMetadata)
+    expect(typeof connector.createConfig).toBe('function')
+    expect(typeof connector.WalletProvider).toBe('function')
+    expect(typeof connector.useConnectModal).toBe('function')
   })
 
-  it('WalletProvider is a function', () => {
-    expect(typeof reownConnector.WalletProvider).toBe('function')
-  })
-
-  it('useConnectModal is a function', () => {
-    expect(typeof reownConnector.useConnectModal).toBe('function')
+  it('createConfig returns a wagmi Config containing the supplied chain id', () => {
+    const connector = createReownConnector(testMetadata)
+    const config = connector.createConfig([mainnet], { [mainnet.id]: http() })
+    expect(config.chains).toContainEqual(expect.objectContaining({ id: mainnet.id }))
   })
 })

src/sdk/react/evm/connectors/index.ts

@@ -1,3 +1,3 @@
-export { connectkitConnector } from './connectkit'
-export { rainbowkitConnector } from './rainbowkit'
-export { reownConnector } from './reown'
+export { createConnectkitConnector } from './connectkit'
+export { createRainbowkitConnector } from './rainbowkit'
+export { createReownConnector } from './reown'

src/sdk/react/evm/connectors/rainbowkit.tsx

@@ -4,12 +4,11 @@ import {
   useAccountModal as useRainbowAccountModal,
   useConnectModal as useRainbowConnectModal,
 } from '@rainbow-me/rainbowkit'
-import { env } from '@/src/env'
 import '@rainbow-me/rainbowkit/styles.css'
 import type { FC, ReactNode } from 'react'
 import type { Chain, Transport } from 'viem'
 
-import type { EvmConnectorConfig } from '../types'
+import type { ConnectorAppMetadata, EvmConnectorConfig } from '../types'
 
 const WalletProvider: FC<{ children: ReactNode }> = ({ children }) => (
   <RainbowKitProvider>{children}</RainbowKitProvider>
@@ -24,19 +23,21 @@ function useConnectModal() {
   }
 }
 
-/** RainbowKit-backed EVM connector. */
-export const rainbowkitConnector: EvmConnectorConfig = {
-  createConfig(chains: Chain[], transports: Record<number, Transport>) {
-    return getDefaultConfig({
-      chains: chains as [Chain, ...Chain[]],
-      transports,
-      projectId: env.PUBLIC_WALLETCONNECT_PROJECT_ID,
-      appName: env.PUBLIC_APP_NAME,
-      appDescription: env.PUBLIC_APP_DESCRIPTION,
-      appUrl: env.PUBLIC_APP_URL,
-      appIcon: env.PUBLIC_APP_LOGO,
-    })
-  },
-  WalletProvider,
-  useConnectModal,
+/** Creates a RainbowKit-backed EVM connector from app metadata. */
+export function createRainbowkitConnector(metadata: ConnectorAppMetadata): EvmConnectorConfig {
+  return {
+    createConfig(chains: Chain[], transports: Record<number, Transport>) {
+      return getDefaultConfig({
+        chains: chains as [Chain, ...Chain[]],
+        transports,
+        projectId: metadata.walletConnectProjectId,
+        appName: metadata.appName,
+        appDescription: metadata.appDescription,
+        appUrl: metadata.appUrl,
+        appIcon: metadata.appIcon,
+      })
+    },
+    WalletProvider,
+    useConnectModal,
+  }
 }

src/sdk/react/evm/connectors/reown.tsx

@@ -2,9 +2,8 @@ import { createAppKit, useAppKit } from '@reown/appkit/react'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 import type { FC, PropsWithChildren } from 'react'
 import type { Chain, Transport } from 'viem'
-import { env } from '@/src/env'
 
-import type { EvmConnectorConfig } from '../types'
+import type { ConnectorAppMetadata, EvmConnectorConfig } from '../types'
 
 const WalletProvider: FC<PropsWithChildren> = ({ children }) => <>{children}</>
 
@@ -13,36 +12,34 @@ function useConnectModal() {
   return { open }
 }
 
-/** Reown/AppKit-backed EVM connector. */
-export const reownConnector: EvmConnectorConfig = {
-  createConfig(chains: Chain[], transports: Record<number, Transport>) {
-    const projectId = env.PUBLIC_WALLETCONNECT_PROJECT_ID
-
-    const metadata = {
-      name: env.PUBLIC_APP_NAME,
-      description: env.PUBLIC_APP_DESCRIPTION ?? '',
-      url: env.PUBLIC_APP_URL ?? '',
-      icons: [env.PUBLIC_APP_LOGO ?? ''],
-    }
-
-    const wagmiAdapter = new WagmiAdapter({
-      networks: chains as unknown as Chain[],
-      transports,
-      projectId,
-    })
-
-    createAppKit({
-      adapters: [wagmiAdapter],
-      networks: chains as unknown as [Chain, ...Chain[]],
-      metadata,
-      projectId,
-      features: {
-        analytics: true,
-      },
-    })
-
-    return wagmiAdapter.wagmiConfig
-  },
-  WalletProvider,
-  useConnectModal,
+/** Creates a Reown/AppKit-backed EVM connector from app metadata. */
+export function createReownConnector(metadata: ConnectorAppMetadata): EvmConnectorConfig {
+  return {
+    createConfig(chains: Chain[], transports: Record<number, Transport>) {
+      const wagmiAdapter = new WagmiAdapter({
+        networks: chains as unknown as Chain[],
+        transports,
+        projectId: metadata.walletConnectProjectId,
+      })
+
+      createAppKit({
+        adapters: [wagmiAdapter],
+        networks: chains as unknown as [Chain, ...Chain[]],
+        metadata: {
+          name: metadata.appName,
+          description: metadata.appDescription ?? '',
+          url: metadata.appUrl ?? '',
+          icons: [metadata.appIcon ?? ''],
+        },
+        projectId: metadata.walletConnectProjectId,
+        features: {
+          analytics: true,
+        },
+      })
+
+      return wagmiAdapter.wagmiConfig
+    },
+    WalletProvider,
+    useConnectModal,
+  }
 }

src/sdk/react/evm/index.ts

@@ -1,6 +1,10 @@
-export { connectkitConnector, rainbowkitConnector, reownConnector } from './connectors'
+export {
+  createConnectkitConnector,
+  createRainbowkitConnector,
+  createReownConnector,
+} from './connectors'
 export type { UseEvmReadOnlyOptions } from './read-only'
 export { useEvmReadOnly } from './read-only'
-export type { EvmConnectorConfig } from './types'
+export type { ConnectorAppMetadata, EvmConnectorConfig } from './types'
 export type { EvmWalletBundleConfig } from './wallet-bundle'
 export { createEvmWalletBundle } from './wallet-bundle'

src/sdk/react/evm/types.ts

@@ -2,6 +2,15 @@ import type { FC, ReactNode } from 'react'
 
 import type { EvmCoreConnectorConfig } from '../../core/evm/types'
 
+/** App metadata passed to connector factories. Decouples SDK from app env config. */
+export interface ConnectorAppMetadata {
+  appName: string
+  appDescription?: string
+  appUrl?: string
+  appIcon?: string
+  walletConnectProjectId: string
+}
+
 /** React-layer EVM connector config — extends core with UI components. */
 export interface EvmConnectorConfig extends EvmCoreConnectorConfig {
   WalletProvider: FC<{ children: ReactNode }>

src/wallet/connectors/wagmi.config.ts

@@ -2,13 +2,21 @@
  * Shared wagmi Config and connector — the single place to choose which EVM connector to use.
  * Both the SDK adapter (in __root.tsx) and generated contract hooks reference this file.
  *
- * To switch connectors, change the import below:
- *   import { connectkitConnector as connector } from '@/src/sdk/react/evm'
- *   import { rainbowkitConnector as connector } from '@/src/sdk/react/evm'
- *   import { reownConnector as connector } from '@/src/sdk/react/evm'
+ * To switch connectors, change the factory call below:
+ *   createConnectkitConnector(metadata)
+ *   createRainbowkitConnector(metadata)
+ *   createReownConnector(metadata)
  */
 import { chains, transports } from '@/src/core/types'
-import { connectkitConnector as connector } from '@/src/sdk/react/evm'
+import { env } from '@/src/env'
+import { createConnectkitConnector } from '@/src/sdk/react/evm'
+
+export const connector = createConnectkitConnector({
+  appName: env.PUBLIC_APP_NAME,
+  appDescription: env.PUBLIC_APP_DESCRIPTION,
+  appUrl: env.PUBLIC_APP_URL,
+  appIcon: env.PUBLIC_APP_LOGO,
+  walletConnectProjectId: env.PUBLIC_WALLETCONNECT_PROJECT_ID,
+})
 
-export { connector }
 export const config = connector.createConfig([...chains], transports)