Para

Overview

Para is an MPC wallet infrastructure that provides secure, non-custodial embedded wallets. This guide shows you how to integrate Para with Rhinestone smart accounts.

Para uses a different signature format (0/1 v-byte) than standard EVM wallets (27/28 v-byte). You must use wrapParaAccount to wrap Para signers before passing them to Rhinestone.

Prerequisites

A Para account and API key from Para Dashboard
Rhinestone API key

Install Dependencies

Install the required dependencies:

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

pnpm add @getpara/react-sdk @getpara/viem @rhinestone/sdk viem @tanstack/react-query

bun install @getpara/react-sdk @getpara/viem @rhinestone/sdk viem @tanstack/react-query

Set Up Para Provider

Create a context provider that wraps your application with Para and React Query. This setup enables Para’s authentication modal, wallet management, and proper React state handling.

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ParaProvider } from "@getpara/react-sdk";
import "@getpara/react-sdk/styles.css";
import React, { type ReactNode } from "react";

// Set up queryClient
const queryClient = new QueryClient();

function ContextProvider({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY as string,
          env: "BETA" as any,
        }}
        config={{
          appName: "Your App Name",
        }}
        paraModalConfig={{
          disableEmailLogin: false,
          disablePhoneLogin: true,
          authLayout: ["AUTH:FULL"],
          oAuthMethods: [],
          onRampTestMode: true, // Set to false in production
          theme: {
            foregroundColor: "#2D3648",
            backgroundColor: "#FFFFFF",
            accentColor: "#0066CC",
            darkForegroundColor: "#E8EBF2",
            darkBackgroundColor: "#1A1F2B",
            darkAccentColor: "#4D9FFF",
            mode: "light",
            borderRadius: "lg",
            font: "Inter",
          },
          recoverySecretStepEnabled: true,
          twoFactorAuthEnabled: false,
        }}
      >
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}

export default ContextProvider;

Then wrap your application with this provider:

// app/layout.tsx (Next.js App Router)
import ContextProvider from './context-provider'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ContextProvider>
          {children}
        </ContextProvider>
      </body>
    </html>
  )
}

Initialize Rhinestone with Para

The key is to wrap the Para viem account with wrapParaAccount before passing it to Rhinestone:

import { useEffect } from "react"
import { useWallet } from "@getpara/react-sdk"
import { useViemAccount } from "@getpara/react-sdk/evm/hooks"
import { RhinestoneSDK } from "@rhinestone/sdk"
import { wrapParaAccount } from "@rhinestone/sdk/utils"
import type { Account } from "viem"

export function useRhinestoneAccount() {
  const { data: wallet } = useWallet()
  const { viemAccount } = useViemAccount()

  useEffect(() => {
    async function init() {
      if (!viemAccount || !wallet?.id) return

      const rhinestone = new RhinestoneSDK({
        apiKey: "proxy",
        endpointUrl: `${window.location.origin}/api/orchestrator`,
      })

      // Wrap Para account for signature compatibility
      const wrappedAccount = wrapParaAccount(viemAccount, wallet.id)

      // Create Rhinestone account
      const rhinestoneAccount = await rhinestone.createAccount({
        owners: {
          type: "ecdsa",
          accounts: [wrappedAccount as Account],
        },
      })

      console.log("Smart Account:", rhinestoneAccount.getAddress())
    }

    init()
  }, [viemAccount, wallet?.id])
}

Use a backend proxy for your Rhinestone API key in production.

Send Transactions

Once initialized, use the Rhinestone account for cross-chain transactions:

import { encodeFunctionData, parseUnits, erc20Abi } from 'viem'
import { baseSepolia, arbitrumSepolia } from 'viem/chains'

const usdc = '0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d' // USDC on Arbitrum Sepolia

const prepared = await rhinestoneAccount.prepareTransaction({
  sourceChains: [baseSepolia],
  targetChain: arbitrumSepolia,
  calls: [{
    to: usdc,
    data: encodeFunctionData({
      abi: erc20Abi,
      functionName: "transfer",
      args: ["0xrecipient", parseUnits("10", 6)],
    }),
  }],
  tokenRequests: [{
    address: usdc,
    amount: parseUnits("10", 6),
  }],
  sponsored: true,
})
const signed = await rhinestoneAccount.signTransaction(prepared)
const transaction = await rhinestoneAccount.submitTransaction(signed)

const result = await rhinestoneAccount.waitForExecution(transaction)

Complete Example

See the full working example with Para + Rhinestone:

Next Steps

Create an Account - Learn more about Rhinestone accounts
Security Best Practices - Set up backend proxy for API keys
Multi-Chain Intents - Execute cross-chain transactions

Tutorials

Smart account setup

Gas & fee sponsorship

Smart Sessions

More features

Configuration

Module development

SDK Reference

Overview

Prerequisites

Send Transactions

Complete Example

Next Steps

​Overview

​Prerequisites

​Send Transactions

​Complete Example

​Next Steps

Overview

Prerequisites

Send Transactions

Complete Example

Next Steps