This project demonstrates the integration of MetaMask SDK with Web3Auth SDK in a Next.js application. It provides a seamless wallet connection experience for both desktop and mobile users.

• Dual SDK integration - Seamlessly combine MetaMask and Web3Auth SDKs.
• Web3Auth Social login - Sign in with email/password or social providers.
• MetaMask Wallet connection - Connect to MetaMask wallet with enhanced features.
• Ethereum interactions - Send transactions, interact with contracts, and more.
• Mobile-friendly - Optimized for both desktop and mobile devices.
• Next.js integration - Built with Next.js 15 and App Router.
• React 19 - Latest React version with TypeScript support.
• Tailwind CSS - Beautiful UI components with Tailwind CSS.
• Wagmi - Ethereum interaction library.

├── app/
│   ├── providers.tsx      # Main providers configuration
│   └── layout.tsx         # Root layout with providers
│   └── page.tsx           # Main page with wallet connection
├── components/
│   ├── Navbar.tsx         # Navigation component with wallet connection
│   └── Hero.tsx           # Hero section with wallet status
├── next.config.ts         # Next.js configuration
└── package.json           # Project dependencies

1. Clone the repository

2. Install dependencies

   pnpm install

3. Create a .env.local file with your environment variables:

   NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=your_web3auth_client_id

4. Start the development server

   pnpm dev

• NEXT_PUBLIC_WEB3AUTH_CLIENT_ID - Your Web3Auth client ID.

"use client";

import { useWeb3AuthConnect } from "@web3auth/modal/react";

export const Navbar = () => {
  const { connect } = useWeb3AuthConnect();

  return (
    <nav>
      <button onClick={() => connect()}>Connect or Sign in</button>;
    </nav>
  );
};

Use the useAccount hook from Wagmi:

"use client";

import { useAccount } from "wagmi";

export const Hero = () => {
  const { address, isConnected } = useAccount();

  return (
    <div>
      {isConnected ? <p>Connected: {address}</p> : <p>Not connected</p>}
    </div>
  );
};

Use the useSendTransaction hook from Wagmi:

"use client";

import { useSendTransaction } from "wagmi";
import { parseEther } from "viem";

export const SendTransaction = () => {
  const { sendTransaction } = useSendTransaction();

  return (
    <button
      onClick={() =>
        sendTransaction({
          to: "0xd2135CfB216b74109775236E36d4b433F1DF507B",
          value: parseEther("0.001"),
        })
      }
    >
      Send transaction
    </button>
  );
};

• @web3auth/modal: Web3Auth SDK
• @metamask/sdk: MetaMask SDK
• wagmi: Ethereum interaction library
• @tanstack/react-query: Data fetching and state management
• next: React framework
• react: React library
• react-dom: React DOM

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

This project is licensed under the MIT License.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.