How to get started with AppKit

The New Internet needs more apps. Yet, many builders find themselves hindered by complex tools and fragmented solutions, slowing the creation of innovative apps. This is where AppKit comes in—a comprehensive stack that empowers developers of all levels to create apps with unparalleled ease and efficiency. Whether you’re crafting a simple DApp or a complex ecosystem, AppKit’s rich, layered feature set ensures you have everything you need in one place.

In this tutorial, we’ll guide you step-by-step through integrating AppKit into a Next.js application. From onboarding to payments, messaging, and beyond, you’ll discover how AppKit simplifies the development process while enhancing the user experience. By the end of this guide, you’ll be equipped with the knowledge and tools to build cutting-edge web3 applications that are both powerful and user-friendly.

Getting Started

Let's begin by bootstrapping a default Next.js project.

Note: AppKit is compatible with React, Next.js, Vue, JavaScript, React Native, Flutter, Android, iOS, or Unity.

2. Get a Project ID

Go to cloud.walletconnect.com. If you don’t have an account yet, create one (~30 seconds), and create a new project. Copy the Project ID.

Create an .env file to store the Project ID (skip if you already have an .env file):

3. Import Libraries and Configure AppKit Features

Open app/page.tsx and clear everything between <main> and </main> to remove the boilerplate.

Create a new file for your Wagmi configuration in a new folder: config/index.tsx.

import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
import { cookieStorage, createStorage } from 'wagmi';
import { mainnet, arbitrum, sepolia } from 'wagmi/chains';

// Get projectId from <https://cloud.walletconnect.com>
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;

if (!projectId) throw new Error('Project ID is not defined');

const metadata = {
  name: 'AppKit example',
  description: 'AppKit Example',
  url: '',
  icons: ['https://avatars.githubusercontent.com/u/37784886']
};

// Create wagmiConfig
const chains = [mainnet, arbitrum, sepolia] as const;
export const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  auth: {
    email: true,
    socials: ["google", "x", "github", "discord", "apple"],
    showWallets: true,
    walletFeatures: true
  },
  ssr: true,
  storage: createStorage({
    storage: cookieStorage
  }),
});

Choose the chains you want to use in your app. The code above selects Ethereum mainnet, arbitrum, and sepolia testnet. For a full list of chains, check here.

4. Create Context and Wrap Providers

Create a context provider to wrap your application and initialize Web3Modal. Create a file called context/index.tsx and add the following configuration.

"use client";

import React, { ReactNode } from "react";
import { config, projectId } from "@/config";
import { createWeb3Modal } from "@web3modal/wagmi/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { State, WagmiProvider } from "wagmi";

const queryClient = new QueryClient();

if (!projectId) throw new Error("Project ID is not defined");

createWeb3Modal({
  wagmiConfig: config,
  projectId,
  enableAnalytics: true,
  enableOnramp: true,
  themeMode: "light"
});

export default function Web3ModalProvider({ children, initialState }: { children: ReactNode; initialState?: State }) {
  return (
    <WagmiProvider config={config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

import "./globals.css";
import type { Metadata } from "next";
import { headers } from "next/headers";
import { Inter } from "next/font/google";
import { cookieToInitialState } from "wagmi";
import { config } from "@/config";
import Web3ModalProvider from "@/context";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "AppKit Example App",
  description: "AppKit by WalletConnect"
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const initialState = cookieToInitialState(config, headers().get("cookie"));
  return (
    <html lang="en">
      <body>
        <Web3ModalProvider initialState={initialState}>{children}</Web3ModalProvider>
      </body>
    </html>
  );
}

5. Ready to Start!

Now you’re ready to start using the modal!

To open Web3Modal, you can use the web component or build your own button with Web3Modal hooks. Let’s use the <w3m-button> component here.

In app/page.tsx, create a header section with your component.

"use client";

import { useAccount } from "wagmi";

export default function Home() {
  const { isConnected } = useAccount();

  return (
    <main className="min-h-screen px-8 py-0 pb-12 flex-1 flex flex-col items-center bg-white">
      <header className="w-full py-4 flex justify-between items-center">
        <div className="flex items-center">
          <div className="hidden sm:inline text-xl font-bold">WalletConnect AppKit example app</div>
        </div>
        <div className="flex items-center">
          <w3m-button />
        </div>
      </header>
    </main>
  );
}

Conclusion

Congratulations! You’ve successfully integrated AppKit into your Next.js application. By following this tutorial, you’ve unlocked the ability to create seamless, UX-first applications for the new internet. With AppKit, you now have a fully functional “magic button” that provides support for over 500 wallets, out-of-the-box web components for connection, account, and network switch buttons, and full responsiveness and mobile-friendliness.

Additionally, AppKit offers automatic recognition of users’ wallet extensions, email logins, social logins, and Smart Accounts with email or social logins. You’ll also benefit from transaction history, on-ramp services via Coinbase Pay, and the ability to perform swaps within the modal.

Next Steps:

Now that you have a solid foundation, consider exploring additional functionalities. Dive deeper into customizing your user interface, adding new chains, or integrating advanced features. The flexibility of AppKit means you’re only limited by your creativity.

The future of the new internet is in your hands—keep building, experimenting, and innovating. The possibilities are endless, and your next groundbreaking app could be just around the corner.

Getting Started

1. Install AppKit

2. Get a Project ID

3. Import Libraries and Configure AppKit Features

4. Create Context and Wrap Providers

5. Ready to Start!

Conclusion

Next Steps:

Resources

Build what's next.
Build with WalletConnect.

Subscribe to our newsletter

Getting Started

1. Install AppKit

2. Get a Project ID

3. Import Libraries and Configure AppKit Features

4. Create Context and Wrap Providers

5. Ready to Start!

Conclusion

Next Steps:

Resources

Build what's next.Build with WalletConnect.

Subscribe to our newsletter

Build what's next.
Build with WalletConnect.