Web3 Modal - Tenderly Node 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 Tenderly Node 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>
)
}