SWIG Account Abstraction

SWIG provides account abstraction on Solana, enabling seamless embedded wallet experiences. This guide walks you through integrating SWIG with Para for embedded wallet creation.

Prerequisites

Before starting this integration:

Set up a Para account on their developer portal
Generate an API Key
Enable Solana as a supported network
Basic understanding of React, TypeScript, and Solana

Installation

Install the required dependencies for SWIG integration:

yarn add @getpara/react-sdk @tanstack/react-query @getpara/solana-web3.js-v1-integration @solana/web3.js @swig-wallet/classic @swig-wallet/coder

Install Vite polyfills for development:

yarn add vite-plugin-node-polyfills -D

Setup

Vite Configuration

Update your vite.config.ts for Solana compatibility:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import path from "path";

export default defineConfig({
  plugins: [react(), nodePolyfills()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Environment Variables

Create a .env.local file in your project root:

VITE_PARA_API_KEY=your_para_api_key

Para Provider Setup

Create providers.tsx in your src directory:

import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { OAuthMethod, ParaProvider } from "@getpara/react-sdk";
import "@getpara/react-sdk/styles.css";

const queryClient = new QueryClient();

interface ProvidersProps {
  children: React.ReactNode;
}

export function Providers({ children }: ProvidersProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: import.meta.env.VITE_PARA_API_KEY || "",
        }}
        config={{ appName: "SWIG Para Example" }}
        paraModalConfig={{
          logo: "https://onswig.com/raccoon-logo.svg",
          oAuthMethods: [OAuthMethod.GOOGLE, OAuthMethod.TWITTER, OAuthMethod.DISCORD],
        }}
      >
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}

Authentication

Create a login button component with Para modal integration:

import React from "react";
import { useModal, useAccount, useLogout } from "@getpara/react-sdk";

export const LoginButton: React.FC = () => {
  const { openModal } = useModal();
  const { isConnected } = useAccount();
  const { logoutAsync } = useLogout();

  const handleClick = () => {
    if (isConnected) {
      logoutAsync();
    } else {
      openModal();
    }
  };

  return (
    <>
      <button
        onClick={handleClick}
        className={`w-full px-4 py-2 rounded-md ${
          isConnected
            ? "bg-gray-200 text-gray-700 hover:bg-gray-300"
            : "bg-blue-600 text-white hover:bg-blue-700"
        }`}
      >
        {isConnected ? "Sign out" : "Sign in with Para"}
      </button>

    </>
  );
};

SWIG Account Creation

Create a SWIG account using Para’s Solana Web3.js integration:

import React, { useState, useEffect } from "react";
import { Connection, PublicKey, Transaction, LAMPORTS_PER_SOL } from "@solana/web3.js";
import { useAccount, useWallet, useClient } from "@getpara/react-sdk";
import { ParaSolanaWeb3Signer } from "@getpara/solana-web3.js-v1-integration";
import { Actions, Swig, findSwigPda, createEd25519AuthorityInfo } from "@swig-wallet/classic";

export const SwigAccountCreation: React.FC = () => {
  const { isConnected } = useAccount();
  const { data: wallet } = useWallet();
  const [swigAddress, setSwigAddress] = useState<string | null>(null);
  const [solBalance, setSolBalance] = useState<number | null>(null);
  const [isCreatingSwig, setIsCreatingSwig] = useState(false);

  const para = useClient();
  const connection = new Connection("https://api.devnet.solana.com");

  const createSwigAccount = async () => {
    if (!wallet?.address || !para) return;
    setIsCreatingSwig(true);

    try {
      const id = new Uint8Array(32);
      crypto.getRandomValues(id);

      const paraPubkey = new PublicKey(wallet.address);
      const [swigPdaAddress] = findSwigPda(id);

      const signer = new ParaSolanaWeb3Signer(para, connection, wallet.id);

      const rootAuthorityInfo = createEd25519AuthorityInfo(paraPubkey);

      const rootActions = Actions.set().all().get();

      const createSwigInstruction = Swig.create({
        authorityInfo: rootAuthorityInfo,
        id,
        payer: paraPubkey,
        actions: rootActions,
      });

      const transaction = new Transaction();
      transaction.add(createSwigInstruction);
      transaction.feePayer = paraPubkey;

      const { blockhash } = await connection.getLatestBlockhash();
      transaction.recentBlockhash = blockhash;

      const signedTransaction = await signer.signTransaction(transaction);

      const signature = await connection.sendRawTransaction(signedTransaction.serialize());

      await connection.confirmTransaction({
        signature,
        blockhash,
        lastValidBlockHeight: (await connection.getLatestBlockhash()).lastValidBlockHeight,
      });

      setSwigAddress(swigPdaAddress.toBase58());
      setIsCreatingSwig(false);

      console.log("Swig account created successfully!");
      console.log("Swig address:", swigPdaAddress.toBase58());
      console.log("Transaction signature:", signature);
    } catch (error) {
      console.error("Error in transaction signing:", error);
      setIsCreatingSwig(false);
    }
  };

  useEffect(() => {
    const fetchBalance = async () => {
      if (wallet?.address) {
        try {
          const balance = await connection.getBalance(new PublicKey(wallet.address));
          setSolBalance(balance / LAMPORTS_PER_SOL);
        } catch (e) {
          setSolBalance(null);
        }
      }
    };
    fetchBalance();
  }, [wallet?.address]);

  if (!isConnected || !wallet) {
    return <div>Please connect your wallet first</div>;
  }

  return (
    <div className="space-y-4">
      <div className="text-center">
        <p className="text-green-700 font-medium">You are signed in!</p>
        <p className="text-sm text-gray-700">
          Wallet address: <span className="font-mono break-all">{wallet.address}</span>
        </p>
        {solBalance !== null && (
          <p className="text-sm text-gray-700">
            Balance: <span className="font-mono">{solBalance} SOL</span>
          </p>
        )}
      </div>

      {swigAddress && (
        <div className="text-center p-4 bg-green-50 rounded-md">
          <p className="text-green-800 font-medium">Swig Account Created!</p>
          <p className="text-sm text-green-700 break-all">
            Address: {swigAddress}
          </p>
        </div>
      )}

      {!swigAddress && (
        <button
          onClick={createSwigAccount}
          disabled={isCreatingSwig}
          className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-blue-400"
        >
          {isCreatingSwig ? "Creating Swig..." : "Create Swig Account"}
        </button>
      )}
    </div>
  );
};

Complete Application

Here’s the complete App component that brings everything together:

import React from "react";
import { Providers } from "./providers";
import { LoginButton } from "./LoginButton";
import { SwigAccountCreation } from "./SwigAccountCreation";

export default function App() {
  return (
    <Providers>
      <div className="min-h-screen flex justify-center p-4">
        <div className="max-w-md w-full space-y-6 p-8">
          <div className="text-center">
            <h2 className="text-3xl font-extrabold text-gray-900">
              SWIG + Para Integration
            </h2>
            <p className="mt-2 text-sm text-gray-600">
              Using Para's Solana Web3.js integration for SWIG account creation
            </p>
          </div>
          
          <SwigAccountCreation />
          <LoginButton />
        </div>
      </div>
    </Providers>
  );
}

Key Implementation Details

SWIG Account Creation Process

The createSwigAccount function performs these critical steps:

Generate Random ID: Creates a unique 32-byte identifier for the SWIG account
Create Para Signer: Initializes ParaSolanaWeb3Signer with Para client and wallet
Set Authority: Establishes the Para-generated wallet as root authority
Configure Actions: Grants full permissions using Actions.set().all().get()
Build Transaction: Creates and configures the Solana transaction
Sign & Send: Uses Para’s signer to sign and broadcast the transaction

Important Notes

Devnet SOL Required: You need devnet SOL in your Para-generated wallet before creating a SWIG account
Root Authority: The Para-generated wallet becomes the root authority for the SWIG account
Error Handling: The implementation includes proper error handling and loading states
Balance Display: Shows wallet SOL balance and SWIG address after creation

Testing Your Integration

Start your development server:

yarn dev

Open your browser to the displayed URL
Click “Sign in with Para” to authenticate
Send devnet SOL to your wallet address
Click “Create Swig Account” to create your SWIG account

Best Practices

Never commit API keys to version control
Use environment variables for sensitive configuration
Test thoroughly on Solana devnet before mainnet
Implement proper error handling throughout the flow
Store SWIG account information securely

Resources

Next Steps

Now that you have SWIG working with Para, you can:

Implement additional SWIG functionality (transfers, token management)
Customize the Para modal appearance and OAuth providers
Add more complex transaction flows
Implement additional security features like multi-signature support
Integrate with other Solana protocols and applications

​Prerequisites

​Installation

​Setup

​Vite Configuration

​Environment Variables

​Para Provider Setup

​Authentication

​SWIG Account Creation

​Complete Application

​Key Implementation Details

​SWIG Account Creation Process

​Important Notes

​Testing Your Integration

​Best Practices

​Resources

​Next Steps