> ## 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.

# Wagmi Connector Integration

> Use Para as a Wagmi connector to build custom wallet connection interfaces

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>;
};

Build custom wallet connection interfaces using Para as a <Link label="Wagmi" href="https://wagmi.sh" /> connector. This guide shows how to integrate Para alongside other wallet options in your own UI.

<Note>
  Para's `ParaModal` is built with Wagmi under the hood. We recommend using ParaModal directly for a complete authentication experience. Use this guide only if you need a custom wallet selection UI while still including Para for social login.
</Note>

## Prerequisites

Before building a custom Wagmi connector, ensure you have Para configured in your application.

<Card title="Setup Web3 Libraries" description="Configure Para with Wagmi for basic web3 operations" href="/v3/react/guides/web3-operations/evm/setup-libraries" horizontal />

## Installation

Install the Para Wagmi integration:

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

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

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

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

## Basic Setup

Create a Wagmi config with Para as a connector option:

```typescript wagmi.config.ts theme={null}
import { paraConnector } from "@getpara/wagmi-v2-integration";
import { createConfig, http } from "wagmi";
import { sepolia } from "wagmi/chains";
import Para from "@getpara/web-sdk";

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

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

// Configure Wagmi
export const config = createConfig({
  chains: [sepolia],
  connectors: [connector], // Add other connectors as needed
  transports: {
    [sepolia.id]: http("https://ethereum-sepolia-rpc.publicnode.com")
  }
});
```

## Provider Setup

Wrap your app with the necessary providers:

```tsx app.tsx theme={null}
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./wagmi.config";

const queryClient = new QueryClient();

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

<Info>
  You can learn more about the `WagmiProvider` and its definition in the <Link href="https://wagmi.sh/react/api/WagmiProvider" label="WagmiProvider Docs" />.
</Info>

## Using the Connector

Connect with Para using Wagmi hooks:

```tsx connect-button.tsx theme={null}
import { useConnect } from "wagmi";

function ConnectWithPara() {
  const { connect, connectors } = useConnect();

  // Find Para connector
  const paraConnector = connectors.find(c => c.id === "para");

  return (
    <button onClick={() => connect({ connector: paraConnector })}>
      Connect with Para
    </button>
  );
}
```

## Configuration Options

The Para connector supports these options:

```typescript theme={null}
const connector = paraConnector({
  para,                    // Your Para instance (required)
  chains,                  // Supported chains array (required)
  appName: "Your App",     // Display name (required)
  nameOverride: "Para",    // Connector name override
  idOverride: "para",      // Connector ID override
});
```

## Next Steps

<CardGroup cols={2}>
  <Card title="External Wallets Integration" description="Learn how to integrate Para with MetaMask and other wallets" href="/v3/react/guides/external-wallets/evm" icon="wallet" />

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