Add customizable options to allow users to connect via other providers in the WalletKit Link modal. This is great for users who have existing wallets and don’t wish to use email or social logins.
WalletKitLinkProvider accepts an externalConnectors prop that can be used to inject buttons with customizable behavior.
const externalConnectors = [
{
id: 'metaMask',
name: 'MetaMask',
logo: ({className}: { className: string }) => <MetaMaskLogo className={className}/>,
onClick: async () => {
await window.ethereum.request({
method: "eth_requestAccounts",
});
},
}
]
export function App() {
return (
<WalletKitLinkProvider link={..} externalConnectors={externalConnectors}>
...
</WalletKitLinkProvider>;
)
}
WalletKitLinkProvider accepts an externalConnectors prop that can be used to inject buttons with customizable behavior.
const externalConnectors = [
{
id: 'metaMask',
name: 'MetaMask',
logo: ({className}: { className: string }) => <MetaMaskLogo className={className}/>,
onClick: async () => {
await window.ethereum.request({
method: "eth_requestAccounts",
});
},
}
]
export function App() {
return (
<WalletKitLinkProvider link={..} externalConnectors={externalConnectors}>
...
</WalletKitLinkProvider>;
)
}
wagmi comes with an existing set of connectors that can be easily added to the WalletKit Link modal.
Add connectors to wagmi
Add all the connectors you wish to support to your wagmi config.
export const wagmiConfig = createConfig({
chains: [..],
transports: {..},
connectors: [
coinbaseWallet({
appName: 'My Wagmi App',
}),
walletConnect({
projectId: '<My Wallet Connect ID>',
}),
walletKitLink({
projectId: '<My WalletKit Project ID>',
}),
]
});
Configure WalletKitLinkWagmiProvider
WalletKitWagmiProvider accepts an externalConnectorIds prop that can be used to filter and order which connectors should be displayed in the WalletKit Link modal.
For example, to support MetaMask, Coinbase, and Wallet Connect (in that order), use the following:
export function App() {
return (
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<WalletKitLinkWagmiProvider
externalConnectorIds={[
"io.metamask",
"coinbaseWalletSDK",
"walletConnect",
]}
>
...
</WalletKitLinkWagmiProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
