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:

npm install @getpara/core-sdk @getpara/evm-wallet-connectors @getpara/solana-wallet-connectors @getpara/cosmos-wallet-connectors @getpara/graz @getpara/react-sdk @tanstack/react-query wagmi @solana/web3.js @solana/wallet-adapter-base @solana/wallet-adapter-react @cosmjs/stargate @cosmjs/proto-signing
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:

For a code implementation, check out our GitHub repository:

Next Steps

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