Skip to main content

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.
1
Configure Web3Provider
2

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>
  );
};
3
Wrap your App with Web3Provider
4
Next, wrap your App with Web3Provider:
5

const App = () => {
  return (
    <Web3Provider>
        <ConnectKitButton />
    </Web3Provider>
  );
};