This guide will walk you through the process of integrating multiple blockchain wallets into your Para Modal and Para-enabled application. By combining EVM, Solana, and Cosmos wallet support, you can provide users with a seamless multi-chain experience.

​
Prerequisites

Before integrating wallet connections, ensure you have an existing Para project with the Para Modal set up. If you haven’t set up Para yet, follow one of our Framework Setup guides like this React + Vite guide.

​
Setting up Multichain Support

To support multiple blockchain ecosystems, you’ll need to install and configure providers for each chain type you want to support. This setup allows users to connect wallets from different ecosystems and interact with various blockchain networks.

1

Install dependencies

Install the required packages for all supported chains:

2

Import components

Import the necessary components and wallet connectors for each chain:

// Chain-specific providers
import { ParaEvmProvider, metaMaskWallet, coinbaseWallet } from "@getpara/evm-wallet-connectors";
import { ParaSolanaProvider, phantomWallet, backpackWallet } from "@getpara/solana-wallet-connectors";
import { ParaCosmosProvider, keplrWallet, leapWallet } from "@getpara/cosmos-wallet-connectors";

// Chain configurations
import { mainnet, polygon } from "wagmi/chains";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { clusterApiUrl } from "@solana/web3.js";
import { cosmoshub, osmosis } from "@getpara/graz/chains";

// Support packages
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
3

Configure chain-specific settings

Set up the configuration for each blockchain network:

// EVM Configuration
const evmConfig = {
  projectId: "your_wallet_connect_project_id",
  appName: "Your App Name",
  chains: [mainnet, polygon],
  wallets: [metaMaskWallet, coinbaseWallet],
};

// Solana Configuration
const solanaNetwork = WalletAdapterNetwork.Mainnet;
const solanaConfig = {
  endpoint: clusterApiUrl(solanaNetwork),
  wallets: [phantomWallet, backpackWallet],
  chain: solanaNetwork,
  appIdentity: {
    name: "Your App Name",
    uri: `${location.protocol}//${location.host}`,
  },
};

// Cosmos Configuration
const cosmosConfig = {
  chains: [
    {
      ...cosmoshub,
      rpc: "https://rpc.cosmos.directory/cosmoshub",
      rest: "https://rest.cosmos.directory/cosmoshub",
    },
    {
      ...osmosis,
      rpc: "https://rpc.cosmos.directory/osmosis",
      rest: "https://rest.cosmos.directory/osmosis",
    },
  ],
  wallets: [keplrWallet, leapWallet],
  selectedChainId: cosmoshub.chainId,
  multiChain: true,
};
4

Create the multichain provider

Combine all providers to create a unified multichain experience:

MultichainProvider.tsx
import { createContext, useContext, useState } from "react";
import { ParaModal } from "@getpara/modal";

const MultichainContext = createContext({
  openModal: () => {},
  closeModal: () => {},
  isOpen: false,
});

export const useMultichainModal = () => useContext(MultichainContext);

export const MultichainProvider = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <MultichainContext.Provider value={{ openModal, closeModal, isOpen }}>
      <ParaCosmosProvider {...cosmosConfig}>
        <ParaEvmProvider config={evmConfig}>
          <ParaSolanaProvider {...solanaConfig}>
            <ParaModal
              isOpen={isOpen}
              onClose={closeModal}
              externalWallets={[
                // EVM wallets
                "METAMASK",
                "COINBASE",
                // Solana wallets
                "PHANTOM",
                "BACKPACK",
                // Cosmos wallets
                "KEPLR",
                "LEAP",
              ]}
              authLayout={["AUTH_FULL", "EXTERNAL_FULL"]}
              para={para}
            />
            {children}
          </ParaSolanaProvider>
        </ParaEvmProvider>
      </ParaCosmosProvider>
    </MultichainContext.Provider>
  );
};

Due to graz implementation requirements, the ParaCosmosProvider must be the outermost provider component. It will handle the QueryClientProvider internally, so you don’t need to add it separately when using Cosmos support.

5

Handle SSR considerations

For Next.js or other SSR frameworks, implement proper client-side initialization:

// Using the 'use client' directive (Next.js 13+)
"use client";

// Or using dynamic imports
import dynamic from "next/dynamic";

const MultichainProvider = dynamic(() => import("./MultichainProvider"), { ssr: false });

​
Usage Example

Here’s how to use the multichain provider in your application:

function App() {
  const { openModal } = useMultichainModal();

  return (
    <div>
      <button onClick={openModal}>Connect Wallet</button>
      {/* Rest of your application */}
    </div>
  );
}

// Wrap your app with the provider
function Root() {
  return (
    <MultichainProvider>
      <App />
    </MultichainProvider>
  );
}

​
Examples

Check out our live demo of the Para Modal to configure all wallets:

Modal Designer

View a live demo of the Para External Wallets Modal in action.

For a code implementation, check out our GitHub repository:

GitHub Repository

View the code implementation of the Para Modal with multichain support.

​
Next Steps

Now that you have integrated multichain wallet support, explore chain-specific features and integrations:

EVM Integrations

Learn how to integrate with Ethers.js and other EVM tools.

Solana Integrations

Explore Solana-specific features and tools.

Cosmos Integrations

Discover Cosmos SDK integrations and features.

Cosmos WalletsGo Live Checklist