@eulerxyz/multi-chain-provider
v1.2.1
Published
Multichain Wagmi wrapper React Provider for using multichain functionality on Euler Dapps
Downloads
28
Keywords
Readme
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