diff --git a/.changeset/fifty-toes-drive.md b/.changeset/fifty-toes-drive.md new file mode 100644 index 0000000000..4954913c73 --- /dev/null +++ b/.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' +``` diff --git a/README.md b/README.md index 71dfd0bcc6..11dbf26ca1 100644 --- a/README.md +++ b/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 diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx index 6ee55f2d76..39df7a4c49 100644 --- a/docs/pages/_app.tsx +++ b/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 ( <> ( 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 }), diff --git a/docs/pages/guides/connect-wallet.mdx b/docs/pages/guides/connect-wallet.mdx index 77216c9463..1a6bdf43b6 100644 --- a/docs/pages/guides/connect-wallet.mdx +++ b/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' diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 0f612db796..2ca9b3c28b 100644 --- a/docs/pages/index.mdx +++ b/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 diff --git a/examples/next/.env.example b/examples/next/.env.example index 78fd59315e..f7b0f606e9 100644 --- a/examples/next/.env.example +++ b/examples/next/.env.example @@ -1 +1,3 @@ +NEXT_PUBLIC_ALCHEMY_ID= +NEXT_PUBLIC_ETHERSCAN_API_KEY= NEXT_PUBLIC_INFURA_ID= diff --git a/examples/next/src/components/Account.tsx b/examples/next/src/components/Account.tsx deleted file mode 100644 index c470cbd25c..0000000000 --- a/examples/next/src/components/Account.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react' -import { useAccount } from 'wagmi' - -export const Account = () => { - const [{ data: accountData }, disconnect] = useAccount({ - fetchEns: true, - }) - - if (!accountData) return
No account connected
- - return ( - <> -
- -
- -
- {accountData?.ens?.name ?? accountData?.address} - {accountData?.ens ? ` (${accountData?.address})` : null} -
- - {accountData?.ens?.avatar && ( - - )} - - ) -} diff --git a/examples/next/src/components/Connect.tsx b/examples/next/src/components/Connect.tsx deleted file mode 100644 index e6e345aa12..0000000000 --- a/examples/next/src/components/Connect.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react' -import { useConnect } from 'wagmi' - -export const Connect = () => { - const [ - { - data: { connector, connectors }, - error, - loading, - }, - connect, - ] = useConnect() - - return ( -
-
- {connectors.map((x) => ( - - ))} -
-
{error && (error?.message ?? 'Failed to connect')}
-
- ) -} diff --git a/examples/next/src/components/NetworkSwitcher.tsx b/examples/next/src/components/NetworkSwitcher.tsx deleted file mode 100644 index 6c3c14bce8..0000000000 --- a/examples/next/src/components/NetworkSwitcher.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react' -import { useNetwork } from 'wagmi' - -export const NetworkSwitcher = () => { - const [{ data: networkData, error: switchNetworkError }, switchNetwork] = - useNetwork() - - return ( - <> -
- Connected to {networkData.chain?.name ?? networkData.chain?.id}{' '} - {networkData.chain?.unsupported && '(unsupported)'} -
- - {switchNetwork && - networkData.chains.map((x) => - x.id === networkData.chain?.id ? null : ( - - ), - )} - - {switchNetworkError && switchNetworkError?.message} - - ) -} diff --git a/examples/next/src/components/SignMessage.tsx b/examples/next/src/components/SignMessage.tsx deleted file mode 100644 index 8839fb0623..0000000000 --- a/examples/next/src/components/SignMessage.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react' -import { verifyMessage } from 'ethers/lib/utils' -import { useSignMessage } from 'wagmi' - -export const SignMessage = () => { - const previousMessage = React.useRef() - const [message, setMessage] = React.useState('') - const [{ data, error, loading }, signMessage] = useSignMessage() - - const recoveredAddress = React.useMemo(() => { - if (!data || !previousMessage.current) return undefined - return verifyMessage(previousMessage.current, data) - }, [data, previousMessage]) - - return ( -
{ - event.preventDefault() - previousMessage.current = message - signMessage({ message }) - }} - > -
- -
- setMessage(event.target.value)} - /> - - - {data && ( -
-
Signature: {data}
-
Recovered Address: {recoveredAddress}
-
- )} - {error &&
Error signing message
} -
- ) -} diff --git a/examples/next/src/components/Transaction.tsx b/examples/next/src/components/Transaction.tsx deleted file mode 100644 index ba6d0f7f65..0000000000 --- a/examples/next/src/components/Transaction.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import * as React from 'react' -import { BigNumber } from 'ethers/lib/ethers' -import { useNetwork, useTransaction, useWaitForTransaction } from 'wagmi' - -export const Transaction = () => { - const [{ data: networkData }] = useNetwork() - const [state, setState] = React.useState<{ - addressOrName: string - amount: string - }>({ - addressOrName: '', - amount: '', - }) - const [transactionResult, sendTransaction] = useTransaction({ - request: { - to: state.addressOrName, - value: state.amount - ? BigNumber.from(`${parseFloat(state.amount) * 10 ** 18}`) - : undefined, - }, - }) - const [waitResult] = useWaitForTransaction({ - wait: transactionResult.data?.wait, - }) - - const blockExplorer = networkData.chain?.blockExplorers?.[0] - const hash = transactionResult.data?.hash - - return ( -
{ - event.preventDefault() - sendTransaction() - }} - > -
- -
- - setState((x) => ({ ...x, addressOrName: event.target.value })) - } - /> - -
- -
- - setState((x) => ({ ...x, amount: event.target.value })) - } - /> - - - - {waitResult.loading - ? 'Processing…' - : waitResult.error - ? waitResult.error - : waitResult.data?.status === 1 - ? `Confirmed ${waitResult.data.status}` - : null} - {transactionResult.error &&
{transactionResult.error.message}
} - {blockExplorer && hash && ( - - View on {blockExplorer.name} - - )} -
- ) -} diff --git a/examples/next/src/components/index.ts b/examples/next/src/components/index.ts deleted file mode 100644 index a0429e5488..0000000000 --- a/examples/next/src/components/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { Account } from './Account' -export { Connect } from './Connect' -export { NetworkSwitcher } from './NetworkSwitcher' -export { Transaction } from './Transaction' -export { SignMessage } from './SignMessage' diff --git a/examples/next/src/pages/_app.tsx b/examples/next/src/pages/_app.tsx index 21139f2df6..b58b68c031 100644 --- a/examples/next/src/pages/_app.tsx +++ b/examples/next/src/pages/_app.tsx @@ -2,26 +2,28 @@ import * as React from 'react' import type { AppProps } from 'next/app' import { providers } from 'ethers' import NextHead from 'next/head' -import { - InjectedConnector, - Provider, - WalletConnectConnector, - WalletLinkConnector, - chain, - defaultChains, - defaultL2Chains, - developmentChains, -} from 'wagmi' -const infuraId = process.env.NEXT_PUBLIC_INFURA_ID +// 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' -const chains = [...defaultChains, ...defaultL2Chains, ...developmentChains] +// 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 -type Config = { chainId?: number } -const connectors = ({ chainId }: Config) => { +// Pick chains +const chains = defaultChains +const defaultChain = chain.mainnet + +// 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({ @@ -40,16 +42,30 @@ const connectors = ({ chainId }: Config) => { }), ] } -const provider = ({ chainId }: Config) => - new providers.InfuraProvider(chainId, infuraId) -const webSocketProvider = ({ chainId }: Config) => - new providers.InfuraWebSocketProvider(chainId, infuraId) + +// Set up providers +type ProviderConfig = { chainId?: number; connector?: Connector } +const isChainSupported = (chainId?: number) => + chains.some((x) => x.id === chainId) + +const provider = ({ chainId }: ProviderConfig) => + providers.getDefaultProvider( + 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 ( { - const [{ data: accountData }] = useAccount() - - if (accountData?.address) - return ( -
- - - - -
- ) - - return ( -
- -
- ) + return
wagmi
} export default Page diff --git a/examples/vite-react/.env.example b/examples/vite-react/.env.example index a4aaf4779f..d2a0da9761 100644 --- a/examples/vite-react/.env.example +++ b/examples/vite-react/.env.example @@ -1 +1,3 @@ +VITE_ALCHEMY_ID= +VITE_ETHERSCAN_API_KEY= VITE_INFURA_ID= diff --git a/examples/vite-react/src/main.tsx b/examples/vite-react/src/main.tsx index 468e03d0b6..1a472c8ad6 100644 --- a/examples/vite-react/src/main.tsx +++ b/examples/vite-react/src/main.tsx @@ -2,28 +2,29 @@ import * as React from 'react' import * as ReactDOM from 'react-dom' import { providers } from 'ethers' -import { - InjectedConnector, - Provider, - WalletConnectConnector, - WalletLinkConnector, - chain, - defaultChains, - defaultL2Chains, - developmentChains, -} from 'wagmi' +// 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' import { App } from './App' +// Get environment variables +const alchemy = import.meta.env.VITE_ALCHEMY_ID as string +const etherscan = import.meta.env.VITE_ETHERSCAN_API_KEY as string const infuraId = import.meta.env.VITE_INFURA_ID as string -const chains = [...defaultChains, ...defaultL2Chains, ...developmentChains] +// 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({ @@ -42,16 +43,31 @@ const connectors = ({ chainId }: Config) => { }), ] } -const provider = ({ chainId }: Config) => - new providers.InfuraProvider(chainId, infuraId) -const webSocketProvider = ({ chainId }: Config) => - new providers.InfuraWebSocketProvider(chainId, infuraId) + +// Set up providers +type ProviderConfig = { chainId?: number; connector?: Connector } +const isChainSupported = (chainId?: number) => + chains.some((x) => x.id === chainId) + +// Set up providers +const provider = ({ chainId }: ProviderConfig) => + providers.getDefaultProvider( + isChainSupported(chainId) ? chainId : defaultChain.id, + { + alchemy, + etherscan, + infuraId, + }, + ) +const webSocketProvider = ({ chainId }: ConnectorsConfig) => + isChainSupported(chainId) + ? new providers.InfuraWebSocketProvider(chainId, infuraId) + : undefined ReactDOM.render( { [ "Connector", "InjectedConnector", - "WalletConnectConnector", - "WalletLinkConnector", "erc1155ABI", "erc20ABI", "erc721ABI", diff --git a/packages/private/src/index.ts b/packages/private/src/index.ts index 1865c550fd..80e5538893 100644 --- a/packages/private/src/index.ts +++ b/packages/private/src/index.ts @@ -1,9 +1,4 @@ -export { - Connector, - InjectedConnector, - WalletConnectConnector, - WalletLinkConnector, -} from './connectors' +export { Connector, InjectedConnector } from './connectors' export type { ConnectorEvents, Data } from './connectors' export { diff --git a/packages/react/connectors/injected/package.json b/packages/react/connectors/injected/package.json new file mode 100644 index 0000000000..f1f1c55592 --- /dev/null +++ b/packages/react/connectors/injected/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/wagmi-connectors-injected.cjs.js", + "module": "dist/wagmi-connectors-injected.esm.js" +} diff --git a/packages/react/connectors/walletConnect/package.json b/packages/react/connectors/walletConnect/package.json new file mode 100644 index 0000000000..0c4f708643 --- /dev/null +++ b/packages/react/connectors/walletConnect/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/wagmi-connectors-walletConnect.cjs.js", + "module": "dist/wagmi-connectors-walletConnect.esm.js" +} diff --git a/packages/react/connectors/walletLink/package.json b/packages/react/connectors/walletLink/package.json new file mode 100644 index 0000000000..1f623336a9 --- /dev/null +++ b/packages/react/connectors/walletLink/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/wagmi-connectors-walletLink.cjs.js", + "module": "dist/wagmi-connectors-walletLink.esm.js" +} diff --git a/packages/react/package.json b/packages/react/package.json index a2f401d8b0..a8f17504a1 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -14,14 +14,30 @@ ".": { "module": "./dist/wagmi.esm.js", "default": "./dist/wagmi.cjs.js" + }, + "./connectors/injected": { + "main": "./connectors/injected/dist/wagmi-connectors-injected.cjs.js", + "module": "./connectors/injected/dist/wagmi-connectors-injected.esm.js" + }, + "./connectors/walletConnect": { + "main": "./connectors/walletConnect/dist/wagmi-connectors-walletConnect.cjs.js", + "module": "./connectors/walletConnect/dist/wagmi-connectors-walletConnect.esm.js" + }, + "./connectors/walletLink": { + "main": "./connectors/walletLink/dist/wagmi-connectors-walletLink.cjs.js", + "module": "./connectors/walletLink/dist/wagmi-connectors-walletLink.esm.js" } }, "files": [ - "/dist" + "/dist", + "/connectors" ], "preconstruct": { "entrypoints": [ - "index.ts" + "index.ts", + "connectors/injected.ts", + "connectors/walletConnect.ts", + "connectors/walletLink.ts" ] }, "peerDependencies": { diff --git a/packages/react/src/connectors/injected.ts b/packages/react/src/connectors/injected.ts new file mode 100644 index 0000000000..dca70acb04 --- /dev/null +++ b/packages/react/src/connectors/injected.ts @@ -0,0 +1 @@ +export { InjectedConnector } from 'wagmi-private' diff --git a/packages/react/src/connectors/walletConnect.ts b/packages/react/src/connectors/walletConnect.ts new file mode 100644 index 0000000000..9c9e327c70 --- /dev/null +++ b/packages/react/src/connectors/walletConnect.ts @@ -0,0 +1 @@ +export { WalletConnectConnector } from 'wagmi-private/connectors/walletConnect' diff --git a/packages/react/src/connectors/walletLink.ts b/packages/react/src/connectors/walletLink.ts new file mode 100644 index 0000000000..c33161b1ab --- /dev/null +++ b/packages/react/src/connectors/walletLink.ts @@ -0,0 +1 @@ +export { WalletLinkConnector } from 'wagmi-private/connectors/walletLink' diff --git a/packages/react/src/context.ts b/packages/react/src/context.ts index a6d8f78e85..fed916b6b0 100644 --- a/packages/react/src/context.ts +++ b/packages/react/src/context.ts @@ -63,7 +63,7 @@ export type Props = { | ((config: { chainId?: number connector?: Connector - }) => WebSocketProvider) + }) => WebSocketProvider | undefined) } export const Provider = ({ diff --git a/packages/react/src/index.test.ts b/packages/react/src/index.test.ts index acb39f028c..bbe098ebef 100644 --- a/packages/react/src/index.test.ts +++ b/packages/react/src/index.test.ts @@ -26,8 +26,6 @@ it('should expose correct exports', () => { "useWebSocketProvider", "Connector", "InjectedConnector", - "WalletConnectConnector", - "WalletLinkConnector", "chain", "defaultChains", "defaultL2Chains", diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 718f79c64e..4b9edd2932 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -26,8 +26,6 @@ export { export { Connector, InjectedConnector, - WalletConnectConnector, - WalletLinkConnector, chain, defaultChains, defaultL2Chains,