refactor: add connector entrypoints (#52)

* refactor: add connector entrypoints

* chore: add changeset

.changeset/fifty-toes-drive.md

@@ -0,0 +1,16 @@
+---
+'wagmi-private': minor
+'wagmi': minor
+'wagmi-testing': minor
+---
+
+Moves connectors to their own entrypoints to reduce bundle size.
+
+```ts
+// old - WalletLinkConnector unused, but still in final bundle
+import { InjectedConnector, WalletConnectConnector } from 'wagmi'
+
+// new - WalletLinkConnector not in final bundle
+import { InjectedConnector } from 'wagmi/connectors/injected'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
+```

README.md

@@ -81,7 +81,7 @@ Feel free to join the [discussions on GitHub](https://github.com/tmm/wagmi/discu
 
 - awkweb.eth
 - [GitHub Sponsors](https://github.com/sponsors/tmm)
-- [Sign the guestbook](https://github.com/tmm/wagmi/discussions/2)
+- Sign the [guestbook](https://github.com/tmm/wagmi/discussions/2)
 
 ## Thanks
 

docs/pages/_app.tsx

@@ -2,14 +2,6 @@ import type { AppProps } from 'next/app'
 import { ThemeProvider } from 'degen'
 import { providers } from 'ethers'
 import Head from 'next/head'
-import {
-  InjectedConnector,
-  Provider,
-  WalletConnectConnector,
-  WalletLinkConnector,
-  chain,
-  defaultChains,
-} from 'wagmi'
 
 import 'nextra-theme-docs/style.css'
 import '../styles/globals.css'
@@ -19,16 +11,27 @@ import '../styles/globals.css'
 import 'degen/styles'
 /* eslint-enable import/no-unresolved */
 
+// Imports
+import { Connector, Provider, chain, defaultChains } from 'wagmi'
+import { InjectedConnector } from 'wagmi/connectors/injected'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
+import { WalletLinkConnector } from 'wagmi/connectors/walletLink'
+
+// Get environment variables
 const alchemy = process.env.NEXT_PUBLIC_ALCHEMY_ID as string
 const etherscan = process.env.NEXT_PUBLIC_ETHERSCAN_API_KEY as string
 const infuraId = process.env.NEXT_PUBLIC_INFURA_ID as string
+
+// Pick chains
 const chains = defaultChains
+const defaultChain = chain.mainnet
 
-type Config = { chainId?: number }
-const connectors = ({ chainId }: Config) => {
+// Set up connectors
+type ConnectorsConfig = { chainId?: number }
+const connectors = ({ chainId }: ConnectorsConfig) => {
   const rpcUrl =
     chains.find((x) => x.id === chainId)?.rpcUrls?.[0] ??
-    chain.mainnet.rpcUrls[0]
+    defaultChain.rpcUrls[0]
   return [
     new InjectedConnector({ chains }),
     new WalletConnectConnector({
@@ -46,25 +49,30 @@ const connectors = ({ chainId }: Config) => {
   ]
 }
 
+// Set up providers
+type ProviderConfig = { chainId?: number; connector?: Connector }
 const isChainSupported = (chainId?: number) =>
   chains.some((x) => x.id === chainId)
-const provider = ({ chainId }: Config) =>
+
+const provider = ({ chainId }: ProviderConfig) =>
   providers.getDefaultProvider(
-    isChainSupported(chainId) ? chainId : chain.mainnet.id,
-    { alchemy, etherscan, infuraId },
-  )
-const webSocketProvider = ({ chainId }: Config) =>
-  new providers.InfuraWebSocketProvider(
-    isChainSupported(chainId) ? chainId : chain.mainnet.id,
-    infuraId,
+    isChainSupported(chainId) ? chainId : defaultChain.id,
+    {
+      alchemy,
+      etherscan,
+      infuraId,
+    },
   )
+const webSocketProvider = ({ chainId }: ProviderConfig) =>
+  isChainSupported(chainId)
+    ? new providers.InfuraWebSocketProvider(chainId, infuraId)
+    : undefined
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <Provider
         autoConnect
-        connectorStorageKey="wagmi.wallet"
         connectors={connectors}
         provider={provider}
         webSocketProvider={webSocketProvider}

docs/pages/docs/connectors.mdx

@@ -13,13 +13,13 @@ The following built-in connectors are part of wagmi's core and support most wall
 The **InjectedConnector** supports wallets that _inject_ an Ethereum provider into the browser or window. The [MetaMask](https://metamask.io) browser extension is the most popular example of this.
 
 ```tsx
-import { InjectedConnector } from 'wagmi'
+import { InjectedConnector } from 'wagmi/connectors/injected'
 ```
 
 #### Usage
 
 ```tsx
-import { InjectedConnector } from 'wagmi'
+import { InjectedConnector } from 'wagmi/connectors/injected'
 
 const connector = new InjectedConnector()
 ```
@@ -31,7 +31,8 @@ const connector = new InjectedConnector()
 Chains supported by app. Defaults to `defaultChains`.
 
 ```tsx highlight='4'
-import { InjectedConnector, defaultChains, defaultL2Chains } from 'wagmi'
+import { defaultChains, defaultL2Chains } from 'wagmi'
+import { InjectedConnector } from 'wagmi/connectors/injected'
 
 const connector = new InjectedConnector({
   chains: [...defaultChains, ...defaultL2Chains],
@@ -43,13 +44,13 @@ const connector = new InjectedConnector({
 The **WalletConnectConnector** wraps the [WalletConnect](https://walletconnect.com) Ethereum provider and supports its configuration options. This is a great option for adding support for many wallets to your app.
 
 ```tsx
-import { WalletConnectConnector } from 'wagmi'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 ```
 
 #### Usage
 
 ```tsx
-import { WalletConnectConnector } from 'wagmi'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 
 const connector = new WalletConnectConnector({
   options: {
@@ -65,7 +66,8 @@ const connector = new WalletConnectConnector({
 Chains supported by app. Defaults to `defaultChains`.
 
 ```tsx highlight='4'
-import { WalletConnectConnector, defaultChains, defaultL2Chains } from 'wagmi'
+import { defaultChains, defaultL2Chains } from 'wagmi'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 
 const connector = new WalletConnectConnector({
   chains: [...defaultChains, ...defaultL2Chains],
@@ -77,7 +79,7 @@ const connector = new WalletConnectConnector({
 Options to pass to the WalletConnect [Ethereum Provider](https://docs.walletconnect.com/quick-start/dapps/ethereum-provider).
 
 ```tsx highlight='4-6'
-import { WalletConnectConnector } from 'wagmi'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 
 const connector = new WalletConnectConnector({
   options: {
@@ -91,13 +93,13 @@ const connector = new WalletConnectConnector({
 The **WalletLinkConnector** wraps the [WalletLink](https://docs.cloud.coinbase.com/walletlink/docs) provider and supports connecting with Coinbase Wallet.
 
 ```tsx
-import { WalletLinkConnector } from 'wagmi'
+import { WalletLinkConnector } from 'wagmi/connectors/walletLink'
 ```
 
 #### Usage
 
 ```tsx
-import { WalletLinkConnector } from 'wagmi'
+import { WalletLinkConnector } from 'wagmi/connectors/walletLink'
 
 const connector = new WalletLinkConnector({
   options: {
@@ -114,7 +116,8 @@ const connector = new WalletLinkConnector({
 Chains supported by app. Defaults to `defaultChains`.
 
 ```tsx highlight='4'
-import { WalletLinkConnector, defaultChains, defaultL2Chains } from 'wagmi'
+import { defaultChains, defaultL2Chains } from 'wagmi'
+import { WalletLinkConnector } from 'wagmi/connectors/walletLink'
 
 const connector = new WalletLinkConnector({
   chains: [...defaultChains, ...defaultL2Chains],
@@ -126,7 +129,7 @@ const connector = new WalletLinkConnector({
 Options to pass to the WalletConnect [Ethereum Provider](https://docs.walletconnect.com/quick-start/dapps/ethereum-provider).
 
 ```tsx highlight='4-7'
-import { WalletLinkConnector } from 'wagmi'
+import { WalletLinkConnector } from 'wagmi/connectors/walletLink'
 
 const connector = new WalletLinkConnector({
   options: {

docs/pages/docs/provider.mdx

@@ -55,12 +55,9 @@ const App = () => (
 Connectors used for linking accounts. Defaults to `[new InjectedConnector()]`.
 
 ```tsx highlight='8-17,20'
-import {
-  InjectedConnector,
-  Provider,
-  WalletConnectConnector,
-  defaultChains,
-} from 'wagmi'
+import { Provider, defaultChains } from 'wagmi'
+import { InjectedConnector } from 'wagmi/connectors/injected'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 
 const connectors = [
   new InjectedConnector({ chains: defaultChains }),

docs/pages/guides/connect-wallet.mdx

@@ -13,14 +13,10 @@ The example below uses [`useConnect`](/docs/hooks/useConnect) and [`useAccount`]
 First, we want to set up our [`Provider`](/docs/provider) with the Injected (MetaMask), WalletConnect, and WalletLink (Coinbase Wallet) connectors:
 
 ```tsx
-import {
-  InjectedConnector,
-  Provider,
-  WalletConnectConnector,
-  WalletLinkConnector,
-  chain,
-  defaultChains,
-} from 'wagmi'
+import { Provider, chain, defaultChains } from 'wagmi'
+import { InjectedConnector } from 'wagmi/connectors/injected'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
+import { WalletLinkConnector } from 'wagmi/connectors/walletLink'
 
 import { Example } from './components'
 

docs/pages/index.mdx

@@ -24,4 +24,9 @@ Feel free to join the [discussions on GitHub](https://github.com/tmm/wagmi/discu
 
 - awkweb.eth
 - [GitHub Sponsors](https://github.com/sponsors/tmm)
-- [Sign the guestbook](https://github.com/tmm/wagmi/discussions/2)
+- Sign the [guestbook](https://github.com/tmm/wagmi/discussions/2)
+
+## Thanks
+
+- [ricmoo.eth](https://twitter.com/ricmoo) for creating and continued work on [ethers.js](https://github.com/ethers-io/ethers.js)
+- [Mirror](https://mirror.xyz) for creating space to do good work

examples/next/.env.example

@@ -1 +1,3 @@
+NEXT_PUBLIC_ALCHEMY_ID=
+NEXT_PUBLIC_ETHERSCAN_API_KEY=
 NEXT_PUBLIC_INFURA_ID=