Solana Wallets

This guide will walk you through the process of integrating Solana Wallets into your Para Modal and Para-enabled application, allowing you to onboard new users and connect with existing users who may already have external wallets like Phantom, Backpack and more.

​

Prerequisites

​

Setting up Solana Wallets

Setup is simple - just wrap your app in a provider and pass the appropriate props and configuration options to the provider. Once configured, the Para modal and wallet options will automatically appear in the modal when opened.

Para provides seamless integration with popular Solana wallets including Phantom, Glow, and Backpack.

import { ParaSolanaProvider, backpackWallet, glowWallet, phantomWallet } from "@getpara/solana-wallet-connectors";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { clusterApiUrl } from "@solana/web3.js";

const solanaNetwork = WalletAdapterNetwork.Devnet;
const endpoint = clusterApiUrl(solanaNetwork);

export const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaSolanaProvider
        endpoint={endpoint}
        wallets={[glowWallet, phantomWallet, backpackWallet]}
        chain={solanaNetwork}
        appIdentity={{
          name: "your_app_name",
          uri: `${location.protocol}//${location.host}`,
        }}>
        {/* Your app content and existing ParaModal */}
      </ParaSolanaProvider>
    </QueryClientProvider>
  );
};

​

Advanced Provider Pattern

Setting up a dedicated provider component that encapsulates all the necessary providers and modal state management is considered a best practice. This pattern makes it easier to manage the modal state globally and handle session management throughout your application.

​

Creating a Custom Provider

A custom provider component can be created to encapsulate the ParaSolanaProvider and ParaModal, allowing for easier management of the modal state and wallet connections. An example implementation is shown below:

import { createContext, useContext, useState } from "react";
import { ParaSolanaProvider, phantomWallet, backpackWallet } from "@getpara/solana-wallet-connectors";
import { ParaModal } from "@getpara/react-sdk";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { clusterApiUrl } from "@solana/web3.js";

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

export const useSolanaModal = () => useContext(SolanaContext);

export const SolanaProvider = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const queryClient = new QueryClient();

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

  const solanaNetwork = WalletAdapterNetwork.Devnet;
  const endpoint = clusterApiUrl(solanaNetwork);

  return (
    <SolanaContext.Provider value={{ openModal, closeModal, isOpen }}>
      <QueryClientProvider client={queryClient}>
        <ParaSolanaProvider
          endpoint={endpoint}
          wallets={[phantomWallet, backpackWallet]}
          chain={solanaNetwork}
          appIdentity={{
            name: "your_app_name",
            uri: `${location.protocol}//${location.host}`,
          }}>
          <ParaModal
            isOpen={isOpen}
            onClose={closeModal}
          />
          {children}
        </ParaSolanaProvider>
      </QueryClientProvider>
    </SolanaContext.Provider>
  );
};

​

Server-Side Rendering Considerations

When using Next.js or other SSR frameworks, proper client-side initialization is crucial since web3 functionality relies on browser APIs. There are two main approaches:

1. Using the 'use client' directive in Next.js 13+:

   • Add the directive at the component level where browser APIs are needed. If using a custom provider, add the directive to the top of the provider file.
   • Ensures the Web3Provider component and its dependencies only run on the client side

2. Using dynamic imports:

   • In Next.js, use the dynamic function to import the provider component with { ssr: false }.
   • Lazily loads the provider component
   • Automatically handles client-side only code
   • Provides fallback options during loading

​

Configuring the Para Modal

After setting up your providers you need to configure the ParaModal component to display the external wallets and authentication options to your users. You need to pass in the externalWallets and authLayout configuration options to the ParaModal component to control which of the wallets show in the modal that were specified in the provider configuration.

<ParaModal
 externalWallets={["PHANTOM", "BACKPACK",...]}
 authLayout={["AUTH_FULL","EXTERNAL_FULL"]}
 theme={{
   mode: "light",
   foregroundColor: "#000000",
   backgroundColor: "#FFFFFF",
   accentColor: "#007AFF"
 }}
 logo={yourLogoUrl}
 appName="Your App Name"
  para={para}
/>

​

Examples

For an example of what the Para External Wallets Modal might look like in your application, check out our live demo:

For an example code implementation using Solana Wallets, check out our GitHub repository:

​

Next Steps

Now that you have integrated Solana wallets into your Para Modal, you can explore more advanced features like signing using the Para SDK with popular libraries like CosmJS.