🤔 Got questions? Schedule an office hours session.
Node RPC
Dapp UI Libraries
Wagmi

Wagmi - Node RPC Integration

Wagmi is a React Hooks library that streamlines Ethereum integration in React applications, offering easy installation, chain configuration, and various hooks for wallet, contract, and transaction interactions.

Libraries such as Dynamic, ConnectKit, RainbowKit, and Web3 Modal are built on top of Wagmi.

Configure Wagmi

Create networks configuration with transports containing Node RPC RPC.

wagmi-config.ts
import { createConfig, http } from 'wagmi';
import { base, mainnet, optimism } from 'wagmi/chains';
import { injected, metaMask, safe, walletConnect } from 'wagmi/connectors';
 
const projectId = '<WALLETCONNECT_PROJECT_ID>'
 
export const config = createConfig({
  chains: [mainnet, base],
  connectors: [
    injected(),
    walletConnect({ projectId }),
    metaMask(),
    safe(),
  ],
  transports: {
    [mainnet.id]: http(`https://mainnet.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET}`),
    [base.id]: http(`https://base.gateway.tenderly.co/${process.env.NEXT_TENDERLY_NODE_ACCESS_KEY_BASE}`),
    [optimism.id]: http(`https://optimism.gateway.tenderly.co/${process.env.NEXT_TENDERLY_NODE_ACCESS_KEY_OPTIMISM}`),
  },
})

Wrap your app in WagmiProvider

App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';
import { Home } from "./Home";
import { config } from './wagmi-config';
 
const queryClient = new QueryClient();
 
export function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <Home />
      </QueryClientProvider>
    </WagmiProvider>
  )
}