> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SWIG Account Abstraction

> Build embedded wallets using SWIG AA provider with Para's infrastructure on Solana

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:

```bash theme={null}
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:

```bash theme={null}
yarn add vite-plugin-node-polyfills -D
```

## Setup

### Vite Configuration

Update your `vite.config.ts` for Solana compatibility:

```typescript theme={null}
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:

```env theme={null}
VITE_PARA_API_KEY=your_para_api_key
```

### Para Provider Setup

Create `providers.tsx` in your `src` directory:

```typescript theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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:

1. **Generate Random ID**: Creates a unique 32-byte identifier for the SWIG account
2. **Create Para Signer**: Initializes `ParaSolanaWeb3Signer` with Para client and wallet
3. **Set Authority**: Establishes the Para-generated wallet as root authority
4. **Configure Actions**: Grants full permissions using `Actions.set().all().get()`
5. **Build Transaction**: Creates and configures the Solana transaction
6. **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

1. Start your development server:

```bash theme={null}
yarn dev
```

2. Open your browser to the displayed URL
3. Click "Sign in with Para" to authenticate
4. Send devnet SOL to your wallet address
5. 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

<CardGroup>
  <Card title="SWIG SDK Documentation" description="Complete SWIG SDK reference and guides" href="https://build.onswig.com/tutorials/embeded_wallet_para" />

  <Card title="Solana Integration" description="Para's Solana Web3.js integration guide" href="/v3/react/guides/external-wallets/solana" />

  <Card title="Example Source Code" description="Complete example implementation on GitHub" href="https://github.com/anagrambuild/swig-sdk-dapp-examples/tree/main/apps/para-modal-example" />
</CardGroup>

## 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