refactor: remove connector warnings (#3558)

* refactor: connector warnings

* fix: catch reconnect

* chore: next bundle analyzer

* chore: changeset

* test: up

.changeset/empty-gifts-cover.md

@@ -0,0 +1,6 @@
+---
+"@wagmi/connectors": patch
+"@wagmi/core": patch
+---
+
+Fixed connector warnings.

packages/connectors/src/coinbaseWallet.ts

@@ -1,6 +1,6 @@
 import {
   type CoinbaseWalletProvider,
-  CoinbaseWalletSDK,
+  type CoinbaseWalletSDK,
 } from '@coinbase/wallet-sdk'
 import {
   ChainNotConfiguredError,
@@ -110,10 +110,12 @@ export function coinbaseWallet(parameters: CoinbaseWalletParameters) {
     },
     async getChainId() {
       const provider = await this.getProvider()
-      return normalizeChainId(provider.chainId)
+      const chainId = await provider.request<number>({ method: 'eth_chainId' })
+      return normalizeChainId(chainId)
     },
     async getProvider() {
       if (!walletProvider) {
+        const { CoinbaseWalletSDK } = await import('@coinbase/wallet-sdk')
         sdk = new CoinbaseWalletSDK({ reloadOnDisconnect, ...parameters })
 
         // Mock implementations to retrieve private `walletExtension` method from the Coinbase Wallet SDK.

packages/connectors/src/metaMask.ts

@@ -1,8 +1,8 @@
 import {
   EventType,
-  MetaMaskSDK,
+  type MetaMaskSDK,
   type MetaMaskSDKOptions,
-  SDKProvider,
+  type SDKProvider,
 } from '@metamask/sdk'
 import {
   ChainNotConfiguredError,
@@ -174,6 +174,7 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
     async getProvider() {
       if (!walletProvider) {
         if (!sdk || !sdk?.isInitialized()) {
+          const { MetaMaskSDK } = await import('@metamask/sdk')
           sdk = new MetaMaskSDK({
             enableDebug: false,
             dappMetadata: { name: 'wagmi' },

packages/connectors/src/safe.ts

@@ -1,5 +1,5 @@
-import { SafeAppProvider } from '@safe-global/safe-apps-provider'
-import { type Opts, default as SafeAppsSDK } from '@safe-global/safe-apps-sdk'
+import { type SafeAppProvider } from '@safe-global/safe-apps-provider'
+import { type Opts } from '@safe-global/safe-apps-sdk'
 import {
   ProviderNotFoundError,
   createConnector,
@@ -31,14 +31,6 @@ export function safe(parameters: SafeParameters = {}) {
   type StorageItem = { 'safe.disconnected': true }
 
   let provider_: Provider | undefined
-  let SDK: typeof SafeAppsSDK.default
-  if (
-    typeof SafeAppsSDK !== 'function' &&
-    typeof SafeAppsSDK.default === 'function'
-  )
-    SDK = SafeAppsSDK.default
-  else SDK = SafeAppsSDK as unknown as typeof SafeAppsSDK.default
-  const sdk = new SDK(parameters)
 
   return createConnector<Provider, Properties, StorageItem>((config) => ({
     id: 'safe',
@@ -82,8 +74,23 @@ export function safe(parameters: SafeParameters = {}) {
       if (!isIframe) return
 
       if (!provider_) {
+        const { default: SafeAppsSDK } = await import(
+          '@safe-global/safe-apps-sdk'
+        )
+        let SDK: typeof SafeAppsSDK.default
+        if (
+          typeof SafeAppsSDK !== 'function' &&
+          typeof SafeAppsSDK.default === 'function'
+        )
+          SDK = SafeAppsSDK.default
+        else SDK = SafeAppsSDK as unknown as typeof SafeAppsSDK.default
+        const sdk = new SDK(parameters)
+
         const safe = await sdk.safe.getInfo()
         if (!safe) throw new Error('Could not load Safe information')
+        const { SafeAppProvider } = await import(
+          '@safe-global/safe-apps-provider'
+        )
         provider_ = new SafeAppProvider(safe, sdk)
       }
       return provider_

packages/connectors/src/walletConnect.ts

@@ -4,8 +4,12 @@ import {
   createConnector,
   normalizeChainId,
 } from '@wagmi/core'
-import type { Evaluate, ExactPartial, Omit } from '@wagmi/core/internal'
-import { EthereumProvider } from '@walletconnect/ethereum-provider'
+import {
+  type Evaluate,
+  type ExactPartial,
+  type Omit,
+} from '@wagmi/core/internal'
+import { type EthereumProvider } from '@walletconnect/ethereum-provider'
 import {
   type Address,
   type ProviderConnectInfo,
@@ -197,6 +201,9 @@ export function walletConnect(parameters: WalletConnectParameters) {
       async function initProvider() {
         const optionalChains = config.chains.map((x) => x.id) as [number]
         if (!optionalChains.length) return
+        const { EthereumProvider } = await import(
+          '@walletconnect/ethereum-provider'
+        )
         return await EthereumProvider.init({
           ...parameters,
           disableProviderPing: true,

packages/connectors/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
   "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.test.ts"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test-d.ts"],
   "compilerOptions": {
     "sourceMap": true
   }

packages/core/src/actions/reconnect.ts

@@ -43,7 +43,10 @@ export async function reconnect(
   } else connectors.push(...config.connectors)
 
   // Try recently-used connectors first
-  const recentConnectorId = await config.storage?.getItem('recentConnectorId')
+  let recentConnectorId
+  try {
+    recentConnectorId = await config.storage?.getItem('recentConnectorId')
+  } catch {}
   const scores: Record<string, number> = {}
   for (const [, connection] of config.state.connections) {
     scores[connection.connector.id] = 1

packages/react/src/hooks/useBlockTransactionCount.test.ts

@@ -1,4 +1,4 @@
-import { chain, testClient } from '@wagmi/test'
+import { chain } from '@wagmi/test'
 import { renderHook, waitFor } from '@wagmi/test/react'
 import { expect, test } from 'vitest'
 
@@ -47,8 +47,6 @@ test('default', async () => {
 })
 
 test('parameters: chainId', async () => {
-  await testClient.mainnet2.mine({ blocks: 1 })
-
   const { result } = renderHook(() =>
     useBlockTransactionCount({ chainId: chain.mainnet2.id }),
   )

playgrounds/next/next.config.mjs

@@ -1,3 +1,9 @@
+import bundleAnalyzer from '@next/bundle-analyzer'
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+})
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
@@ -11,4 +17,4 @@ const nextConfig = {
   },
 }
 
-export default nextConfig
+export default withBundleAnalyzer(nextConfig)

playgrounds/next/package.json

@@ -3,15 +3,16 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
+    "@next/bundle-analyzer": "^14.1.0",
     "@tanstack/react-query": "5.0.5",
+    "next": "13.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "next": "13.5.3",
     "viem": "2.0.0",
     "wagmi": "workspace:*"
   },