✨ Get Access Github

Solana Quickstart

Introduction

Integrating Solana with the Capsule SDK is straightforward and similar to our other blockchain integrations. If you haven't set up a basic web project with Capsule yet, please refer to our Web Modal & SDK Setup first.

This tutorial builds upon that foundation, showing you how to configure your web application for Solana and utilize the @solana/web3.js signers. You'll see how easily you can use your existing Solana web3 package with Capsule integration.

Setup

Installation

Before proceeding with the Solana integration, make sure you've followed the Web Modal & SDK Setup for the basic Capsule SDK installation and setup.

In addition to the Capsule-specific installations, you'll need to install the following dependencies for Solana integration:

npm install @usecapsule/solana-web3.js-v1-integration @solana/web3.js

Configuring Capsule for Solana Support

If you've already set up Capsule using our Getting Started tutorial, adding Solana support is simple. Just add the Solana configuration to the Capsule options when creating your Capsule instance:

App.tsx
import React, { useState } from "react";
import Capsule, { Environment, CapsuleModal, WalletType } from "@usecapsule/react-sdk";

// Initialize Capsule with Solana support
const capsule = new Capsule(Environment.BETA, process.env.CAPSULE_API_KEY, {
  supportedWalletTypes: [WalletType.SOLANA],
});

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Capsule Modal</button>
      <CapsuleModal isOpen={isOpen} capsule={capsule} onClose={() => setIsOpen(false)} />
    </div>
  );
};

export default App;

Signing Solana Transactions

There are two approaches to signing Solana transactions with Capsule: in a web environment and in a server environment. Both methods allow you to leverage the power of Solana's web3.js library while benefiting from Capsule's security features.

Web Environment

In the web environment, you'll continue to use the Solana web3.js library to interact with the Solana blockchain. You'll create a Solana RPC connection and then use the CapsuleSolanaWeb3Signer to create, sign, and send transactions. Here's how it works:

SolanaTransaction.tsx
import React from "react";
import { CapsuleSolanaWeb3Signer } from "@usecapsule/solana-web3.js-v1-integration";
import * as solana from "@solana/web3.js";

const SOLANA_DEVNET_RPC_ENDPOINT = "https://api.devnet.solana.com";
const SOLANA_RECIPIENT_PUBLIC_KEY = "4TUYF5Q6sCkBCjamQrTkNYJyxhyaCPiPnq9oVg6qXbTp";

const SolanaTransaction = ({ capsule }) => {
  const signTransaction = async () => {
    // Create a Solana connection
    const connection = new solana.Connection(SOLANA_DEVNET_RPC_ENDPOINT, "confirmed");

    // Initialize the Capsule Solana signer
    const solanaSigner = new CapsuleSolanaWeb3Signer(capsule, connection);

    // Create a new Solana transaction
    const tx = new solana.Transaction().add(
      solana.SystemProgram.transfer({
        fromPubkey: solanaSigner.sender,
        toPubkey: new solana.PublicKey(SOLANA_RECIPIENT_PUBLIC_KEY),
        lamports: 0.03003 * solana.LAMPORTS_PER_SOL, // Convert SOL to lamports
      })
    );
    tx.feePayer = solanaSigner.sender;

    try {
      // Sign and send the transaction using the Capsule Solana signer
      const signature = await solanaSigner.sendTransaction(tx, {
        skipPreflight: false,
        preflightCommitment: "confirmed",
      });
      console.log(`Solana transaction signature: ${signature}`);
    } catch (error) {
      console.error("Error signing Solana transaction:", error);
    }
  };

  return <button onClick={signTransaction}>Sign Solana Transaction</button>;
};

export default SolanaTransaction;

Server Environment

For server-side signing, you can import an active Capsule session to sign transactions on the server. This approach allows for more complex transaction logic or higher security requirements. Here's how to set it up:

First, export the session from your frontend:

frontend.tsx
// In your frontend component
const exportSession = async () => {
  const serializedSession = await capsule.exportSession();
  // Send serializedSession to your backend securely
};

Then, on your backend, you'll set up a similar environment to the frontend. The main difference is that you'll need to create a new Capsule instance and import the exported session:

backend.ts
import { CapsuleSolanaWeb3Signer } from "@usecapsule/solana-web3.js-v1-integration";
import Capsule, { Environment } from "@usecapsule/server-sdk";
import * as solana from "@solana/web3.js";

const SOLANA_DEVNET_RPC_ENDPOINT = "https://api.devnet.solana.com";
const SOLANA_RECIPIENT_PUBLIC_KEY = "4TUYF5Q6sCkBCjamQrTkNYJyxhyaCPiPnq9oVg6qXbTp";

const signSolanaTransaction = async (serializedSession: string) => {
  // Create a new Capsule instance on the backend
  const capsule = new Capsule(Environment.DEVELOPMENT, process.env.CAPSULE_API_KEY);

  // Import the exported session
  await capsule.importSession(serializedSession);

  // Set up Solana connection and signer, just like in the frontend
  const connection = new solana.Connection(SOLANA_DEVNET_RPC_ENDPOINT, "confirmed");
  const solanaSigner = new CapsuleSolanaWeb3Signer(capsule, connection);

  // Create and sign a transaction, similar to the frontend example
  const tx = new solana.Transaction().add(
    solana.SystemProgram.transfer({
      fromPubkey: solanaSigner.sender,
      toPubkey: new solana.PublicKey(SOLANA_RECIPIENT_PUBLIC_KEY),
      lamports: 0.03003 * solana.LAMPORTS_PER_SOL,
    })
  );
  tx.feePayer = solanaSigner.sender;

  try {
    const signature = await solanaSigner.sendTransaction(tx, {
      skipPreflight: false,
      preflightCommitment: "confirmed",
    });
    console.log(`Solana transaction signature: ${signature}`);
    return signature;
  } catch (error) {
    console.error("Error signing Solana transaction:", error);
    throw error;
  }
};

Conclusion

By following this tutorial, you should now have a fully configured web application that works seamlessly with Solana using the Capsule SDK. To further enhance your integration, we recommend checking out our Customize Capsule guide to learn about required customizations for the Capsule modal.

For advanced usage and additional features, please refer to the rest of our SDK documentation and the Solana web3.js library documentation. If you need any additional support, don't hesitate to reach out to our team.

We're excited to see what you build with Capsule and Solana! Happy coding!

PreviousCosmos QuickstartNextSigning Transactions

Last updated