> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Reown AppKit Integration

> Integrate Para as the wallet provider in Reown AppKit

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

Use Para as the exclusive wallet provider in <Link label="Reown AppKit" href="https://reown.com/appkit" /> (formerly WalletConnect Web3Modal). This integration provides a polished wallet connection UI with Para handling all authentication.

<Note>
  This guide uses Para as the only wallet option in AppKit. For a simpler integration with multiple wallets, see the external wallets guide.
</Note>

## Prerequisites

Before integrating with Reown AppKit, ensure you have a Para account and project ID from Reown.

<CardGroup cols={2}>
  <Card title="Get Para API Key" description="Create your Para account and get your API key" href="https://developer.getpara.com" icon="key" />

  <Card title="Get Reown Project ID" description="Create a project in the Reown dashboard" href="https://cloud.reown.com" icon="id-card" />
</CardGroup>

## Installation

Install Para's Wagmi integration and Reown AppKit:

<CodeGroup>
  ```bash npm theme={null}
  npm install @getpara/wagmi-v2-integration @reown/appkit @reown/appkit-adapter-wagmi wagmi@^2 viem @tanstack/react-query --save-exact
  ```

  ```bash yarn theme={null}
  yarn add @getpara/wagmi-v2-integration @reown/appkit @reown/appkit-adapter-wagmi wagmi@^2 viem @tanstack/react-query --exact
  ```

  ```bash pnpm theme={null}
  pnpm add @getpara/wagmi-v2-integration @reown/appkit @reown/appkit-adapter-wagmi wagmi@^2 viem @tanstack/react-query --save-exact
  ```

  ```bash bun theme={null}
  bun add @getpara/wagmi-v2-integration @reown/appkit @reown/appkit-adapter-wagmi wagmi@^2 viem @tanstack/react-query --exact
  ```
</CodeGroup>

## Configuration

Create the AppKit configuration with Para as the sole connector:

```typescript appkit.config.ts theme={null}
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 };
```

## Provider Setup

Wrap your app with the necessary providers:

```tsx app.tsx theme={null}
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>
  );
}
```

## Using AppKit

Open the connection modal using AppKit hooks:

```tsx connect-button.tsx theme={null}
import { useAppKit } from "@reown/appkit/react";

function ConnectButton() {
  const { open } = useAppKit();

  return (
    <button onClick={() => open()}>
      Connect Wallet
    </button>
  );
}
```

## Configuration Options

Key configuration options for the Para + AppKit integration:

```typescript theme={null}
const connector = paraConnector({
  para,                              // Your Para instance
  chains,                            // Supported chains
  appName: "Your App Name",          // Display name
  queryClient,                       // TanStack Query client
  oAuthMethods: ["GOOGLE", "TWITTER"], // Social login options
  disableEmailLogin: false,          // Enable email auth
  disablePhoneLogin: false,          // Enable phone auth
});
```

## Next Steps

<CardGroup cols={2}>
  <Card title="External Wallets Guide" description="Learn about integrating Para with other wallet providers" href="/v3/react/guides/external-wallets/evm" icon="wallet" />

  <Card title="Sign Transactions" description="Use connected wallets to sign transactions" href="/v3/react/guides/web3-operations/evm/execute-transactions" icon="signature" />
</CardGroup>