Connect Kit - Node RPC
ConnectKit is a React.js component library for connecting a wallet to your dapp, and you can use Node RPC for blockchain connection.
Configure Web3Provider
Web3Provider.tsx
import {createConfig, http, WagmiProvider} from "wagmi";
import {base, mainnet, optimism} from "wagmi/chains";
import {ConnectKitProvider, getDefaultConfig} from "connectkit";
const config = createConfig(
getDefaultConfig({
// Your dApps chains
chains: [mainnet],
transports: {
// RPC URL for each chain
[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}`)
},
// Required API Keys
walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
// Required App Info
appName: "Your App Name",
// Optional App Info
appDescription: "Your App Description",
appUrl: "https://dapp.tenderly.co", // your app's url
appIcon: "https://tenderly.co/favicons/favicon.ico", // your app's icon, no bigger than 1024x1024px (max. 1MB)
}),
);
export const Web3Provider = ({ children }) => {
return (
<WagmiProvider config={config}>
<ConnectKitProvider>{children}</ConnectKitProvider>
</WagmiProvider>
);
};
Wrap your App with Web3Provider
Next, wrap your App
with Web3Provider
:
App.tsx
import { Web3Provider } from "./Web3Provider";
import { ConnectKitButton } from "connectkit";
const App = () => {
return (
<Web3Provider>
<ConnectKitButton />
</Web3Provider>
);
};