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.
Wagmi
Developers can pass in a Wagmi client to the SlashAuthProvider component. This allows developers to use Wagmi's react hooks throughout their applications.
There are more configuration options in the Wagmi docs.
// 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>
);
Migrating from Wagmi
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 1mo ago