@campnetwork/utils

Utility library that bridges third-party wallet providers (Para, Privy, Thirdweb) into the Camp Origin SDK. It wraps each provider's wallet into an OriginProvider object that the SDK's CampModal or Auth.setProvider() can consume.

Installation

npm install @campnetwork/utils

You also need the Origin SDK and your chosen wallet provider:

npm install @campnetwork/origin

For Para:

npm install @getpara/react-sdk @getpara/wagmi-v2-connector

Para Integration

There are two ways to use Para with the Origin SDK. Both require creating a Para provider via getProvider from this library.

getProvider API

getProvider(
  para: Para,
  externalProviders?: OriginProvider[],
  exclusive?: boolean,
  environment?: "DEVELOPMENT" | "PRODUCTION"
): OriginProvider

| Parameter | Description | | --- | --- | | para | Your Para instance | | externalProviders | Injected browser wallet providers (see External Wallets below). Pass undefined if Para is the only wallet. | | exclusive | When true, hides other wallet options in CampModal so only the Para wallet is shown | | environment | "DEVELOPMENT" (testnet, default) or "PRODUCTION" (mainnet). Should match your CampProvider environment. |

Approach A: CampModal with defaultProvider (Recommended)

This is the simplest approach. Pass the Para provider to CampModal via defaultProvider and the SDK handles authentication automatically.

import { CampProvider, CampModal, useAuth, useAuthState } from "@campnetwork/origin/react";
import Para from "@getpara/react-sdk";
import { getProvider } from "@campnetwork/utils/para";

// Para's Environment enum: BETA (testnet) or PROD (mainnet)
// Note: Environment.DEVELOPMENT is an alias for BETA, Environment.PRODUCTION is an alias for PROD
const para = new Para("BETA", "YOUR_PARA_API_KEY");

function App() {
  return (
    <CampProvider clientId="YOUR_CAMP_CLIENT_ID" environment="DEVELOPMENT">
      <CampParaWallet>
        <MyComponent />
      </CampParaWallet>
    </CampProvider>
  );
}

function CampParaWallet({ children }: { children: React.ReactNode }) {
  const paraProvider = getProvider(para, undefined, true, "DEVELOPMENT");

  return (
    <>
      {/* CampModal uses the provider to sign the SIWE message automatically */}
      <CampModal defaultProvider={paraProvider} />
      {children}
    </>
  );
}

function MyComponent() {
  // useAuth() returns the Auth instance directly — not { auth }
  const auth = useAuth();
  const { authenticated } = useAuthState();

  // auth.origin is null until the user authenticates
  if (authenticated && auth.origin) {
    // Now you can use origin methods
    const tokenId = await auth.origin.mintFile(file);
  }
}

Approach B: Manual setProvider() + connect()

For custom auth flows where you don't want the CampModal UI.

import { CampProvider, useAuth, useAuthState } from "@campnetwork/origin/react";
import Para, { ParaModal } from "@getpara/react-sdk";
import { getProvider } from "@campnetwork/utils/para";

const para = new Para("BETA", "YOUR_PARA_API_KEY");

function App() {
  return (
    <CampProvider clientId="YOUR_CAMP_CLIENT_ID" environment="DEVELOPMENT">
      <MyComponent />
    </CampProvider>
  );
}

function MyComponent() {
  const auth = useAuth();
  const { authenticated } = useAuthState();
  const [isParaOpen, setIsParaOpen] = useState(false);

  const handleLogin = async () => {
    // 1. Open Para modal to get the user's wallet
    setIsParaOpen(true);
  };

  const handleParaClose = async () => {
    setIsParaOpen(false);

    // 2. After Para auth, create the provider and set it on the Auth instance
    const paraProvider = getProvider(para, undefined, true, "DEVELOPMENT");
    auth.setProvider(paraProvider);

    // 3. Now connect — this signs the SIWE message using the Para wallet
    const result = await auth.connect();
    // result: { success: boolean, message: string }
  };

  return (
    <>
      <button onClick={handleLogin}>Login with Para</button>
      <ParaModal
        para={para}
        isOpen={isParaOpen}
        onClose={handleParaClose}
        oAuthMethods={["GOOGLE", "TWITTER"]}
      />
    </>
  );
}

External Wallets (externalProviders)

Para allows users to log in with an external browser wallet (e.g. MetaMask) instead of a Para-managed wallet. When this happens, para.findWallet() returns a wallet with isExternal: true. In that case, getProvider needs the actual browser wallet's EIP-1193 provider to sign transactions — the externalProviders array provides these.

The Origin SDK discovers injected browser wallets via EIP-6963 and exposes them through the useProviders() hook. Pass these as externalProviders so that getProvider can match the external wallet by address and use the native provider.

import { useProviders, CampModal } from "@campnetwork/origin/react";
import { getProvider } from "@campnetwork/utils/para";

function CampParaWallet({ children }: { children: React.ReactNode }) {
  // useProviders() returns injected wallets discovered via EIP-6963
  // (e.g. MetaMask, Coinbase Wallet, Rabby, etc.)
  const providers = useProviders();

  // Pass them so that if the user logged into Para with an external wallet,
  // the matching browser provider is used instead of Para's EIP-1193 wrapper
  const paraProvider = getProvider(para, providers, true, "DEVELOPMENT");

  return (
    <>
      <CampModal defaultProvider={paraProvider} />
      {children}
    </>
  );
}

If your app only uses Para-managed wallets (email/social login), you can pass undefined and skip this.

Privy Integration

import { getProvider } from "@campnetwork/utils/privy";

// Inside your component, after Privy authentication:
const { wallets } = useWallets(); // from @privy-io/react-auth
const wallet = wallets[0];

const privyProvider = await getProvider(wallet, true);

// Use with CampModal:
<CampModal defaultProvider={privyProvider} />

// Or manually:
auth.setProvider(privyProvider);
await auth.connect();

Thirdweb Integration

import { getProvider } from "@campnetwork/utils/thirdweb";

// After Thirdweb connection:
const thirdwebProvider = getProvider(
  client,    // ThirdwebClient
  wallet,    // Wallet
  account,   // Account
  true,      // exclusive
  "DEVELOPMENT" // environment
);

// Use with CampModal:
<CampModal defaultProvider={thirdwebProvider} />

// Or manually:
auth.setProvider(thirdwebProvider);
await auth.connect();

Environment

Both getProvider functions for Para and Thirdweb accept an environment parameter:

| Value | Chain | Chain ID | | --------------- | ---------------- | --------------- | | "DEVELOPMENT" | Basecamp testnet | 123420001114 | | "PRODUCTION" | Camp Network | 484 |

This should match the environment prop on your CampProvider.

Note: Para's Environment enum uses different names: BETA (or DEVELOPMENT) for testnet, PROD (or PRODUCTION) for mainnet. The environment parameter on getProvider refers to the Camp environment, not Para's.

Common Issues

auth.origin is null

origin is only available after successful authentication. Before calling auth.connect(), the user needs a wallet provider set. If you're not using CampModal with defaultProvider, you must call auth.setProvider() first.

const { authenticated } = useAuthState();

// Always check before using origin
if (authenticated && auth.origin) {
  const tokenId = await auth.origin.mintFile(file);
}