Custom connectors
Custom connectors, such as social logins, WalletConnect QR, Coinbasewallet, etc., can be integrated into your Modal. A simple example of how to incorporate them for Wagmi or Ethers library.
- Wagmi
- Ethers
If you already have Wagmi integrated into your application or would like more control over Wagmi's configuration, you can integrate Web3Modal on top of it.
import { createWeb3Modal } from '@web3modal/wagmi/react'
import { http, createConfig, WagmiProvider } from 'wagmi'
import { sepolia } from 'wagmi/chains'
import { walletConnect } from 'wagmi/connectors'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
const projectId = 'YOUR_PROJECT_ID'
const metadata = {
//...
}
// create the connectors (delete the ones you don't need)
const connectors: CreateConnectorFn[] = []
connectors.push(walletConnect({ projectId, metadata, showQrModal: false })); // showQrModal must be false
connectors.push(injected({ shimDisconnect: true }));
connectors.push(coinbaseWallet({
appName: metadata.name,
appLogoUrl: metadata.icons[0],
}));
connectors.push(authConnector({
options: { projectId },
socials: ['google', 'x', 'github', 'discord', 'apple'], // add Social logins
showWallets: true,
email: true,
walletFeatures: false,
}));
const config = createConfig({
chains: [sepolia],
transports: {
[sepolia.id]: http()
},
connectors
})
createWeb3Modal({
wagmiConfig: config,
projectId,
})
export function ContextProvider({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
)
}
Check our React Wagmi demo in Github
import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'
const projectId = 'YOUR_PROJECT_ID'
// Set chains
const mainnet = {
chainId: 1,
name: 'Ethereum',
currency: 'ETH',
explorerUrl: 'https://etherscan.io',
rpcUrl: 'https://cloudflare-eth.com'
}
// Create a metadata object
const metadata = {
//...
}
// Create Ethers config
const ethersConfig = defaultConfig({
/*Required*/
metadata,
/*Optional*/
enableEIP6963: true, // true by default
enableInjected: true, // true by default
enableCoinbase: true, // true by default
rpcUrl: '...', // used for the Coinbase SDK
defaultChainId: 1, // used for the Coinbase SDK
auth: {
email: true,
socials: ['google', 'x', 'github', 'discord', 'apple'], // add social logins
showWallets: true,
walletFeatures: false
}
})
// Create a Web3Modal instance
createWeb3Modal({
ethersConfig,
chains: [mainnet],
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
})
// Now, you can render connect button
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<w3m-button />
</React.StrictMode>
);
Check our React ethers demo in Github
Was this helpful?