@eulerxyz/multi-chain-provider

Euler Multichain Provider

Multichain Wagmi wrapper React Provider for using multichain functionality on Euler Dapps

Getting started

npx install-peerdeps @eulerxyz/multi-chain-provider

Required QuickNode enviroment variables need to be set in your base project they are set up as follows:

_{chainId}_QUICK_NODE_RPC // For serverside NextJS
NEXT_PUBLIC_{chainId}_QUICK_NODE_RPC // For clientside NextJS
REACT_APP_{chainId}_QUICK_NODE_RPC // For ReactJS

To integrate the provider you must wrap your App with the following provider

import { createMultiChainClient, MultiChain } from "@eulerxyz/multi-chain-provider"
import { WagmiConfig } from "wagmi"

const client = createMultiChainClient()

const App = ({ children }) => {
  return (
      <WagmiConfig client={client}>
          <MultiChain.Provider>
              {children}
          </MultiChain.Provider>
      </WagmiConfig>
  )
}

export default App

If you are using a 3rd party wallet connector that integrates with Wagmi such as Rainbow Kit use the following hoc

import "@rainbow-me/rainbowkit/styles.css";
import type { AppProps } from "next/app"
import { withMultiChain, chains } from "@eulerxyz/multi-chain-provider";
import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit"

const { connectors } = getDefaultWallets({
    appName: "My RainbowKit App",
    chains
});

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <RainbowKitProvider chains={chains}>
            <Component {...pageProps} />
        </RainbowKitProvider>
    )
}
export default withMultiChain<AppProps>(MyApp, { connectors })

if you would like to ada custom chains RPC providers aare requires to set up as its set up by default for Euler compatible chains.

If Eth Mainnet is not include in you custom chains you must also include a chan from the list as a default chain.

import "@rainbow-me/rainbowkit/styles.css";
import type { AppProps } from "next/app"
import { withMultiChain, chains } from "@eulerxyz/multi-chain-provider";
import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit"
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
    [mainnet, polygon, optimism, arbitrum],
    [
        alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
        publicProvider()
    ]
);

const { connectors } = getDefaultWallets({
    appName: 'My RainbowKit App',
    chains
});


function MyApp({ Component, pageProps }: AppProps) {
    return (
        <RainbowKitProvider chains={chains}>
            <Component {...pageProps} />
        </RainbowKitProvider>
    )
}
export default withMultiChain<AppProps>(MyApp, { connectors, provider, chains });

Exported hooks

There are a number of hooks that have been integrated with the useMultiChain hooks documentation for them can be found here Wagmi Docs. The following hooks have been integrated.

// Account
useAccount (extra props isSpyBlockNumber & spyBlockNumber & isSpyMode for spy details)
useBalance
useConnect
useNetwork
useSigner
useSwitchNetwork (extra prop setChain to set multi-chain chain)

/// Network status
useBlockNumber

/// Providers
useProvider
useWebSocketProvider

/// Utils
useChainId