Web3 Modal - Node RPC Integration
Web3Modal SDK asimplifies connecting Web3 dapps to wallets, offering a user-friendly interface for executing actions like signing transactions and interacting with smart contracts on the blockchain.
You can use Node RPC as chain provider, by using Wagmi’s createConfig and setting Node RPCs in transports array.
config.ts
import { createWeb3Modal } from '@web3modal/wagmi/react'
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
import { WagmiProvider, http } from 'wagmi'
import { base, mainnet, optimism } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
// https://cloud.walletconnect.com
const projectId = 'YOUR_PROJECT_ID'
const chains = [mainnet, base, optimism] as const
const config = defaultWagmiConfig({
chains,
projectId,
metadata: {
name: 'Web3Modal',
description: 'Web3Modal Example',
url: 'https://dapp.tenderly.co', // origin must match your domain & subdomain
icons: ['https://tenderly.co/favicons/favicon.ico']
},
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}`),
},
})
createWeb3Modal({
wagmiConfig: config,
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
enableOnramp: true // Optional - false as default
})
export function Web3ModalProvider({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
)
}