Connect Wallet

This guide will walk you through integrating wallet connection into your application using ConnectKit. ConnectKit provides an easy-to-use interface for connecting Ethereum wallets into web applications. We will configure it specifically for the Lens Testnet.

Installation

Install ConnectKit, its required dependencies, and the Lens Network SDK with package manager of choice:

npm install connectkit wagmi [email protected] @tanstack/react-query @lens-network/sdk@canary

API Keys

ConnectKit uses WalletConnect's SDK, which requires a projectId. You can create one for free at WalletConnect Cloud.

Implementation

Setting Up Web3Provider

Create a new file Web3Provider.tsx and define the required configuration.

Web3Provider.tsx"use client";
import { WagmiProvider, createConfig, http } from "wagmi";import { chains } from "@lens-network/sdk/viem";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";import { ConnectKitProvider, getDefaultConfig } from "connectkit";
const config = createConfig(  getDefaultConfig({    chains: [chains.testnet],    transports: {       [chains.testnet.id]: http(`https://rpc.testnet.lens.dev`),    },    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,    appName: "Lens Testnet App",    appDescription: "A sample app integrating Lens Testnet wallet connection.",    appUrl: "https://yourapp.com",    appIcon: "https://yourapp.com/icon.png",  }));
const queryClient = new QueryClient();
export const Web3Provider = ({ children }) => {  return (    <WagmiProvider config={config}>      <QueryClientProvider client={queryClient}>        <ConnectKitProvider>{children}</ConnectKitProvider>      </QueryClientProvider>    </WagmiProvider>  );};

Wrapping Your App with Web3Provider

Modify App.tsx to use the newly created Web3Provider:

App.tsximport { Web3Provider } from "./Web3Provider";import { ConnectKitButton } from "connectkit";
const App = () => {  return (    <Web3Provider>      <ConnectKitButton />    </Web3Provider>  );};
export default App;

Accessing Connected Wallet Information

To interact with the connected wallet, use the useAccount hook from wagmi:

import { useAccount } from "wagmi";
const WalletInfo = () => {  const { address, isConnecting, isDisconnected } = useAccount();
  if (isConnecting) return <div>Connecting...</div>;  if (isDisconnected) return <div>Disconnected</div>;  return <div>Connected Wallet: {address}</div>;};
export default WalletInfo;

Additional Build Tooling Setup

Some build tools require additional setup to work with ConnectKit.

Next.js

ConnectKit uses WalletConnect's SDK to help with connecting wallets. WalletConnect 2.0 pulls in Node.js dependencies that Next.js does not support by default.

You can mitigate this by adding the following to your next.config.js file:

next.config.jsmodule.exports = {  webpack: (config) => {    config.resolve.fallback = { fs: false, net: false, tls: false };    return config;  },};

Next.js App Router

If using Next.js App Router, or any framework that supports React Server Components, you will need to include the "use client" directive at the beginning of your Web3Provider file.

Web3Provider.tsx"use client"
...
export const Web3Provider = ({ children }) => {  return (    ...  );};

Resources

By following these steps, you have successfully integrated ConnectKit with the Lens Testnet to enable wallet connections in your application.