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

# Integrating Para with Porto

> Upgrade Para EOA wallets to Porto Smart Accounts using EIP-7702 for session keys, transaction batching, and gas sponsorship

Integrate Para's embedded wallets with Porto to combine Para's authentication and key management with Porto's smart account features. The `usePortoSmartAccount` hook handles the entire upgrade flow — wrapping the Para signer, registering admin keys, and submitting the upgrade to Porto's relay — so you can focus on your application logic.

## What You Get

| Feature                  | Para EOA        | Porto Smart Account      |
| ------------------------ | --------------- | ------------------------ |
| Address                  | Single address  | Same address (preserved) |
| Signing Keys             | 1 (MPC-secured) | Multiple authorized keys |
| Session Keys             | Not supported   | Supported                |
| Batched Transactions     | Not supported   | Supported                |
| Gas Sponsorship          | Not supported   | Supported                |
| Programmable Permissions | Not supported   | Supported                |

## Integration Pattern

**Para handles:**

* Authentication (social login, email, SMS)
* Key custody (MPC security)
* Cross-app identity
* Raw message signing

**Porto handles:**

* Smart account operations (EIP-7702)
* Transaction batching
* Gas sponsorship
* Session key management

## Prerequisites

* Para API key from the [Para Developer Portal](https://developer.getpara.com/)
* Basic React and Next.js knowledge
* Node.js 18+

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @getpara/react-sdk viem @tanstack/react-query
  ```

  ```bash yarn theme={null}
  yarn add @getpara/react-sdk viem @tanstack/react-query
  ```

  ```bash pnpm theme={null}
  pnpm add @getpara/react-sdk viem @tanstack/react-query
  ```
</CodeGroup>

## Setup Para Provider

Configure the Para provider:

```tsx filename="app/providers.tsx" theme={null}
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ParaProvider } from "@getpara/react-sdk";

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY!,
          env: "BETA",
        }}
        config={{ appName: "My App" }}>
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}
```

## Gas Sponsorship

On **testnets**, Porto's relay sponsors gas by default — no configuration needed.

For **mainnet**, you must set up a [Porto merchant account](https://porto.sh/sdk/guides/sponsoring)
to cover gas fees for your users:

1. Run `pnpx porto onboard --admin-key` to create a merchant account
2. Deploy a server-side merchant route using `porto/server`
3. Pass your endpoint URL as `merchantUrl` in the hook config

## Usage

Use the `usePortoSmartAccount` hook to create and manage a Porto smart account. The hook handles Para signer creation, admin key registration, EOA upgrade, and Porto relay configuration internally.

```tsx filename="components/PortoDemo.tsx" theme={null}
"use client";

import { usePortoSmartAccount } from "@getpara/react-sdk";
import { useMutation } from "@tanstack/react-query";
import { parseEther } from "viem";
import { baseSepolia } from "viem/chains";

export function PortoDemo() {
  const { smartAccount, isLoading, error } = usePortoSmartAccount({
    chain: baseSepolia,
    // merchantUrl: '/porto/merchant', // required for mainnet
  });

  const {
    mutate: sendTransaction,
    isPending: isSending,
    error: sendError,
  } = useMutation({
    mutationFn: async () => {
      if (!smartAccount) throw new Error("Smart account not ready");
      return smartAccount.sendTransaction({
        to: "0xRecipient",
        value: parseEther("0.01"),
      });
    },
    onSuccess: (receipt) => {
      console.log("Transaction hash:", receipt.transactionHash);
    },
  });

  const {
    mutate: sendBatch,
    isPending: isBatching,
    error: batchError,
  } = useMutation({
    mutationFn: async () => {
      if (!smartAccount) throw new Error("Smart account not ready");
      return smartAccount.sendBatchTransaction([
        { to: "0xRecipientA", value: parseEther("0.01") },
        { to: "0xRecipientB", data: "0xencodedCallData" },
      ]);
    },
    onSuccess: (receipt) => {
      console.log("Batch tx hash:", receipt.transactionHash);
    },
  });

  if (isLoading) return <p>Setting up smart account...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!smartAccount) return null;

  return (
    <div>
      <h2>Porto Smart Account</h2>
      <p>Address: {smartAccount.smartAccountAddress}</p>
      <p>Mode: {smartAccount.mode}</p>

      <button onClick={() => sendTransaction()} disabled={isSending}>
        {isSending ? "Sending..." : "Send Transaction"}
      </button>
      {sendError && <p style={{ color: "red" }}>{sendError.message}</p>}

      <button onClick={() => sendBatch()} disabled={isBatching}>
        {isBatching ? "Batching..." : "Send Batch"}
      </button>
      {batchError && <p style={{ color: "red" }}>{batchError.message}</p>}
    </div>
  );
}
```

### Accessing the Porto Client Directly

For advanced use cases like session key management, access the underlying Porto client:

```tsx theme={null}
const { smartAccount } = usePortoSmartAccount({ chain: baseSepolia });

if (smartAccount) {
  const { portoAccount, portoClient } = smartAccount.client;
  // Use Porto's RelayActions directly for advanced operations
}
```

## How It Works

The `usePortoSmartAccount` hook performs these steps internally:

1. **Resolves the Para wallet** — finds the user's EVM wallet address
2. **Creates a viem account** — wraps the Para signer for raw ECDSA signing
3. **Connects to Porto's relay** — creates a client pointed at `https://rpc.porto.sh`
4. **Registers an admin key** — creates a secp256k1 admin key from the Para signer
5. **Upgrades the EOA** — submits a 7702 delegation via `prepareUpgradeAccount` + `upgradeAccount`
6. **Returns a unified SmartAccount** — with `sendTransaction`, `sendBatchTransaction`, and access to the underlying Porto client

## Next Steps

<CardGroup cols={2}>
  <Card title="Porto Documentation" icon="book" href="https://porto.sh/sdk">
    Explore Porto's smart account features and SDK documentation
  </Card>

  <Card title="Account Abstraction Guide" icon="layer-group" href="/v2/react/guides/web3-operations/evm/account-abstraction">
    See all supported AA providers and the unified SmartAccount interface
  </Card>

  <Card title="Example Repository" icon="github" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-react-nextjs/aa-porto-7702">
    View the complete working example
  </Card>

  <Card title="Para React SDK" icon="react" href="/v2/react/quickstart">
    Learn more about Para's React SDK features and configuration
  </Card>
</CardGroup>

## Related Walkthroughs

<CardGroup cols={3}>
  <Card title="Rhinestone Integration" icon="gem" href="/v2/walkthroughs/Rhinestone">
    Advanced · 40 min · Cross-chain smart accounts with gas abstraction
  </Card>

  <Card title="Thirdweb Integration" icon="cubes" href="/v2/walkthroughs/Thirdweb">
    Advanced · 40 min · Smart accounts and gas sponsorship
  </Card>

  <Card title="EIP-712 Typed Data Signing" icon="file-signature" href="/v2/walkthroughs/eip712-typed-data-signing">
    Intermediate · 20 min · Structured data signing
  </Card>
</CardGroup>