Reown AppKit Integration

import { createAppKit } from "@reown/appkit/react";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { paraConnector } from "@getpara/wagmi-v2-integration";
import { mainnet, polygon, arbitrum } from "@reown/appkit/networks";
import Para from "@getpara/web-sdk";
import { QueryClient } from "@tanstack/react-query";

// Initialize clients
const para = new Para("YOUR_PARA_API_KEY");
const queryClient = new QueryClient();

// Configure chains
const chains = [mainnet, polygon, arbitrum] as const;

// Create Para connector
const connector = paraConnector({
  para,
  chains: [...chains],
  appName: "Your App Name"
});

// Setup Wagmi adapter
const wagmiAdapter = new WagmiAdapter({
  networks: [...chains],
  projectId: "YOUR_REOWN_PROJECT_ID",
  connectors: [connector]
});

// Create AppKit instance
export const appKit = createAppKit({
  adapters: [wagmiAdapter],
  networks: [...chains],
  projectId: "YOUR_REOWN_PROJECT_ID",
  metadata: {
    name: "Your App Name",
    description: "Your app description",
    url: "https://yourapp.com",
    icons: ["https://yourapp.com/icon.png"]
  },
  features: {
    analytics: true,
    email: false,      // Para handles auth
    socials: false,    // Para handles socials
  },
  allWallets: "HIDE"   // Only show Para
});

export { wagmiAdapter };

import { WagmiProvider } from "wagmi";
import { QueryClientProvider } from "@tanstack/react-query";
import { wagmiAdapter } from "./appkit.config";

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        {/* Your app */}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

import { useAppKit } from "@reown/appkit/react";

function ConnectButton() {
  const { open } = useAppKit();
  
  return (
    <button onClick={() => open()}>
      Connect Wallet
    </button>
  );
}