Wagmi Configuration
SlashAuth allows developers to customize their app and instantiate their connectors. If no options are passed in, the default client is used for connecting to wallets.
Developers can pass in a Wagmi client to the SlashAuthProvider component. This allows developers to use Wagmi's react hooks throughout their applications.
// file:index.tsx
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { SlashAuthProvider } from '@slashauth/slashauth-react';
import { configureChains, defaultChains, createClient, chain } from 'wagmi';
import { publicProvider } from '@wagmi/core/providers/public';
import { InjectedConnector } from '@wagmi/core';
import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask';
import { CoinbaseWalletConnector } from '@wagmi/core/connectors/coinbaseWallet';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
// Create wagmi client
const { chains, provider } = configureChains(
defaultChains,
[publicProvider()],
{ pollingInterval: 30_000 }
);
const wagmiClient = createClient({
autoConnect: true,
provider: provider,
connectors: [
new MetaMaskConnector({ chains }),
new WalletConnectConnector({
chains,
options: {
qrcode: true,
},
}),
new CoinbaseWalletConnector({
chains,
options: {
appName: 'test',
},
}),
new InjectedConnector({
chains,
options: {
name: 'Injected',
shimDisconnect: true,
},
}),
],
}) as ReturnType<typeof createClient>;
root.render(
<SlashAuthProvider clientID={{/* Your client id here */} providers={{
wagmi: {
wagmiClient,
},
}}>
<App />
</SlashAuthProvider>
);
SlashAuth uses Wagmi under the hood and makes it super simple for projects to migrate from Wagmi to using SlashAuth. This allows developers to continue to use Wagmi's excellent React hooks in a secure and authenticated way.
The only change that is required it to replace the
WagmiConfig
component with that SlashAuthProvider
component. You can even pass in your client to the providers (this is optional).// file:index.tsx
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { SlashAuthProvider } from '@slashauth/slashauth-react';
import { configureChains, defaultChains, createClient, chain } from 'wagmi';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
const { chains, provider } = configureChains(
defaultChains,
[publicProvider()],
{ pollingInterval: 30_000 }
);
const wagmiClient = createClient({
autoConnect: true,
provider: provider,
connectors: [
new MetaMaskConnector({ chains }),
new WalletConnectConnector({
chains,
options: {
qrcode: true,
},
}),
new CoinbaseWalletConnector({
chains,
options: {
appName: 'test',
},
}),
new InjectedConnector({
chains,
options: {
name: 'Injected',
shimDisconnect: true,
},
}),
],
}) as ReturnType<typeof createClient>;
root.render(
<SlashAuthProvider clientID={{/* Your client id here */} providers={{
wagmi: {
wagmiClient,
},
}}>
<App />
</SlashAuthProvider>
);
Last modified 7mo ago