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 and React Query:

npm install @getpara/react-sdk@alpha @tanstack/react-query @getpara/graz@alpha @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js

​
Setting Up Polyfills with Vite

Vite requires polyfills for Node.js modules that Para SDK uses. Install the polyfill plugin:

npm install vite-plugin-node-polyfills --save-dev

Update 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()],
});

​
Setup Postinstall Script

Add the Para setup script to your package.json:

package.json
{
  "scripts": {
    "postinstall": "npx setup-para"
  }
}

​
Create a Providers Component

Create a providers component that will wrap your application:

src/providers.jsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Environment, 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 || "",
          env: Environment.BETA,
        }}
        config={{
          appName: "Your App Name"
        }}
      >
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}

Para offers two hosted environments: Environment.BETA (alias Environment.DEVELOPMENT) for testing, and Environment.PROD (alias Environment.PRODUCTION) for live use. Select the environment that matches your current development phase.

​
Wrap Your App with Providers

Update your main app file:

src/App.jsx
import { Providers } from './providers';

function App() {
  return (
    <Providers>
      {/* Your app content */}
    </Providers>
  );
}

export default App;

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

​
Create a Connect Wallet Component

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

src/components/ConnectButton.jsx
import { useModal, useAccount } from "@getpara/react-sdk";

export function ConnectButton() {
  const { openConnectModal, openWalletModal } = useModal();
  const account = useAccount();
  
  return (
    <div>
      {account.isConnected && account.embedded.wallets?.length ? (
        <div>
          <p>Connected: {account.embedded.wallets[0].address}</p>
          <button onClick={openWalletModal}>
            Manage Wallet
          </button>
        </div>
      ) : (
        <button onClick={openConnectModal}>
          Connect Wallet
        </button>
      )}
    </div>
  );
}

You can learn more about the useModal and useAccount hooks in the .

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

Build with React Hooks

Sign Messages & Transactions

Customize Your Setup