Provider customization

Widgets are designed to utilize different providers behind the scenes.
Each of those providers can be disabled and replaced with your custom providers.

List of providers that are currently used by the widget:

Example: Overriding Wagmi Provider

For Wagmi configuration docs refer to the official Wagmi site.


// Disable Wagmi Provider

<RecurringSwapWidget disableWagmiProvider />

// Create your own Wagmi Config
import { configureChains, createConfig } from 'wagmi'
import { mainnet, polygon } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'
import { getDefaultWallets } from '@rainbow-me/rainbowkit'

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet, polygon],
  [
    jsonRpcProvider({
      rpc: chain => {
        if (chain.id === 1) {
          return {
            http: `https://eth-mainnet.g.alchemy.com/v2/`
          }
        } else if (chain.id === 137) {
          return {
            http: `https://polygon-mainnet.g.alchemy.com/v2/`
          }
        }
      }
    }),
    publicProvider()
  ]
)

const { connectors } = getDefaultWallets({
  chains,
  appName: 'appName',
  projectId: "walletConnectProjectId"
})

const wagmiConfig = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
  connectors
})

// Add a custom provider to your App

ReactDOM.render(
  <WagmiProvider config={wagmiConfig}>
    <App />
  </WagmiProvider>,
  document.getElementById('root')
);

Example: Overriding Rainbowkit Provider

For Rainbowkit configuration docs refer the official Rainbowkit site.


// Disable Rainbowkit Provider

<RecurringSwapWidget disableRainbowkitProvider />

// Add a custom provider to your App
import { configureChains } from 'wagmi'
import { mainnet, polygon } from 'wagmi/chains'

const { chains } = configureChains(
  [mainnet, polygon],
  [
    jsonRpcProvider({
      rpc: chain => {
        if (chain.id === 1) {
          return {
            http: `https://eth-mainnet.g.alchemy.com/v2/`
          }
        } else if (chain.id === 137) {
          return {
            http: `https://polygon-mainnet.g.alchemy.com/v2/`
          }
        }
      }
    }),
    publicProvider()
  ]
)

ReactDOM.render(
  <RainbowKitProvider appInfo={{ appName: 'appName' }} chains={chains}>
    <App />
  </RainbowKitProvider>,
  document.getElementById('root')
);

Example: QueryClient provider

For QueryClient configuration docs refer the official ReactQuery site.


// Disable QueryClient Provider

<RecurringSwapWidget disableQueryClientProvider />

// Add a custom provider to your App

import { QueryClient, QueryClientProvider } from '@react-query/query-client';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      // Additional query options...
    },
    mutations: {
      // Additional mutation options...
    },
  },
});

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Example: Theme Provider

While it is possible to disable the theme provider, it is not recommended to do so. For any theme customizations, please refer to our theme customization documentation.


// Disable Theme Provider

<RecurringSwapWidget disableMuiProvider />

// Add a custom provider to your App
import { Theme } from '@brinkninja/components'

ReactDOM.render(
  <MuiThemeProvider theme={Theme.getTheme('light')}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root')
);

or

ReactDOM.render(
  <MuiThemeProvider theme={YourCustomTheme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root')
);