Skip to main content

​
Reown AppKit

Reown AppKit is a versatile wallet connector for React, enabling seamless wallet connection and transaction signing.

Sophon Account + Reown AppKit example repository

Reown AppKit Example

​
Installation

npm install @sophon-labs/account-eip6963 wagmi viem @reown/appkit @tanstack/react-query

​
Live demo

​
Sample configuration

"use client";

import React, { ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createAppKit } from "@reown/appkit/react";
import { sophonTestnet } from "@reown/appkit/networks";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { State, WagmiProvider } from "wagmi";

import "@sophon-labs/account-eip6963/testnet";

// Get your project ID from https://cloud.reown.com
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;

const queryClient = new QueryClient();

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

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

const wagmiAdapter = new WagmiAdapter({
  networks: [sophonTestnet],
  projectId,
});

createAppKit({
  enableWalletConnect: false,
  enableEIP6963: true,
  adapters: [wagmiAdapter],
  networks: [sophonTestnet],
  metadata: metadata,
  projectId,
  features: {
    analytics: true,
    connectMethodsOrder: ["wallet", "social", "email"],
  },
});

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