Para with React + Vite

A guide to quickly integrate the Para Modal into your Vite-powered React application.

This guide will walk you through integrating Para SDK into your Vite-powered React application, providing seamless user authentication and wallet management.

Prerequisites

Before starting, you’ll need a Para API key which you can obtain from the Para Developer Portal. You can learn to create your account and get your API key from the Developer Portal.

Setup Developer Portal

Installation

Install the Para React SDK, React Query, and required polyfills for Vite:

npm

npm install @getpara/react-sdk@alpha @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi viem @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --save-exact && npm install vite-plugin-node-polyfills --save-dev

Then add the polyfill plugin to your vite.config.js:

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [react(), nodePolyfills()],
});

Configure Providers

Create a providers component and wrap your application with it:

The import "@getpara/react-sdk/styles.css" is required for the Para modal to display correctly. Without this import, the modal will not be visible.

providers.jsx

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

const queryClient = new QueryClient();

export function Providers({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: import.meta.env.VITE_PARA_API_KEY || "",
        }}
        config={{
          appName: "YOUR_APP_NAME" // Replace with your app name
        }}
      >
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}

You can learn more about the ParaProvider and its definition in the .

The ParaProvider utilizes libraries like Wagmi, Graz, and Solana Wallet Adapter, to power wallet connections. Meaning you can use any of the hooks provided by these libraries when within the ParaProvider context. You can learn more about using external wallets in the .

Create a Connect Button

Now create a component that uses Para hooks to manage wallet connection:

ConnectButton.jsx

import { useModal, useAccount, useWallet } from "@getpara/react-sdk";

export function ConnectButton() {
  const { openModal } = useModal();
  const { data: wallet } = useWallet();
  const { isConnected } = useAccount();

  return (
    <button onClick={() => openModal()}>
      {isConnected
        ? `Connected: ${wallet?.address?.slice(0, 6)}...${wallet?.address?.slice(-4)}`
        : "Connect Wallet"}
    </button>
  );
}

Learn more about the hooks used in this example:

• - Control the Para modal programmatically
• - Access the current wallet data
• - Get account connection status and details

Testing? Use BETA testing credentials for fast development. Check out the to learn about test emails and phone numbers.

Example

Vite + React Example

Next Steps

Success you’ve set up Para with Vite! Now you can expand your application with wallet connections, account management, and more.

Use React Hooks

Sign Messages & Transactions

Customize Your Setup