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
• Basic React and Next.js knowledge
• Node.js 18+

Installation

npm

npm install @getpara/react-sdk viem @tanstack/react-query

Setup Para Provider

Configure the Para provider:

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

"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:

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

Related Walkthroughs