React
- Introduction to the SDK
- Configuration
- Upgrade Guides
- SDK/User Loading States
- Providers and Connectors
- UI Components
- Hooks
- Events
- Handlers
- Objects
- Utilities
- Examples
Utilities
getOrMapViemChain
Summary
This utility gets the Viem chain object for a given chain id, it is imported from @dynamic-labs/ethereum-core
.
Annotation
export declare const getOrMapViemChain: (network: EvmNetwork) => Chain;
Example
A common usage is when you declare your own custom EVM networks for Dynamic, and you want to get the Viem chain objects for each so that you can pass them to your Wagmi config:
import { DynamicContextProvider, mergeNetworks } from "@dynamic-labs/sdk-react-core";
import { getOrMapViemChain } from "@dynamic-labs/ethereum-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { createConfig, WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { http, createClient } from "viem";
import { mainnet } from "viem/chains";
import Main from "./Main";
const customEvmNetworks = [
{
blockExplorerUrls: ["https://explorer-holesky.morphl2.io/"],
chainId: 2810,
name: "Morph",
rpcUrls: ["https://rpc-quicknode-holesky.morphl2.io"],
iconUrls: ["https://avatars.githubusercontent.com/u/132543920?v=4"],
nativeCurrency: {
name: "Ethereum",
symbol: "ETH",
decimals: 18,
},
networkId: 2810,
},
];
const config = createConfig({
chains: [mainnet, ...customEvmNetworks.map(getOrMapViemChain)],
multiInjectedProviderDiscovery: false,
client({ chain }) {
return createClient({
chain,
transport: http(),
});
},
});
const queryClient = new QueryClient();
export default function App() {
return (
<DynamicContextProvider
settings={{
environmentId: "2762a57b-faa4-41ce-9f16-abff9300e2c9",
walletConnectors: [EthereumWalletConnectors],
overrides: {
evmNetworks: (networks) => mergeNetworks(customEvmNetworks, networks),
}
}}
>
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<DynamicWagmiConnector>
<Main />
</DynamicWagmiConnector>
</QueryClientProvider>
</WagmiProvider>
</DynamicContextProvider>
);
}
Was this page helpful?
On this page