Refactor ComPilot providers to separate KYC and Signature Gating workflows

code-examples/signature-gating/web3-NextJS/src/compilot-config.ts

@@ -1,9 +1,19 @@
-export const generateChallenge = async (params: any) => {
-  console.log("🔵 generateChallenge called with:", params);
+export const generateChallengeKYC = async (params: any) => {
+  console.log("🔵 generateChallengeKYC called with:", params);
   const res = await fetch("/api/challenge", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(params),
+    body: JSON.stringify({ ...params, workflowType: "kyc" }),
+  });
+  return res.json();
+};
+
+export const generateChallengeSignatureGating = async (params: any) => {
+  console.log("🔵 generateChallengeSignatureGating called with:", params);
+  const res = await fetch("/api/challenge", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ ...params, workflowType: "signatureGating" }),
   });
   return res.json();
 };

code-examples/signature-gating/web3-NextJS/src/pages/_app.tsx

@@ -19,25 +19,12 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { config } from "../wagmi";
-import { createWagmiWalletAdapter } from "@compilot/web-sdk-wallet-wagmi";
-import { ComPilotProvider, createWeb3AuthAdapter, createConfig } from "@compilot/react-sdk";
-import { generateChallenge } from "../compilot-config";
+import { KYCComPilotProvider, SignatureGatingComPilotProvider } from "../providers/ComPilotProviders";
 
 /**
- * Wallet and Auth Configuration
- * Sets up ComPilot authentication with Wagmi wallet adapter
+ * Query Client Configuration
+ * Initializes React Query for data management
  */
-const walletAdapter = createWagmiWalletAdapter(config);
-const authAdapter = createWeb3AuthAdapter({
-  generateChallenge,
-  wallet: walletAdapter,
-});
-
-/**
- * ComPilot and Query Configuration
- * Initializes providers with required configuration
- */
-const compilotConfig = createConfig({ authAdapter });
 const client = new QueryClient();
 
 /**
@@ -46,7 +33,11 @@ const client = new QueryClient();
  * 1. WagmiProvider (outermost)
  * 2. QueryClientProvider
  * 3. RainbowKitProvider
- * 4. ComPilotProvider (innermost)
+ * 4. KYCComPilotProvider (for KYC functionality)
+ * 5. SignatureGatingComPilotProvider (for signature gating)
+ * 
+ * Note: Both ComPilot providers are used to handle different workflow IDs
+ * for KYC and signature gating functionality separately
  * 
  * @param {AppProps} props - Next.js app props
  */
@@ -55,9 +46,11 @@ function MyApp({ Component, pageProps }: AppProps) {
     <WagmiProvider config={config}>
       <QueryClientProvider client={client}>
         <RainbowKitProvider>
-          <ComPilotProvider config={compilotConfig}>
-            <Component {...pageProps} />
-          </ComPilotProvider>
+          <KYCComPilotProvider>
+            <SignatureGatingComPilotProvider>
+              <Component {...pageProps} />
+            </SignatureGatingComPilotProvider>
+          </KYCComPilotProvider>
         </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>

code-examples/signature-gating/web3-NextJS/src/pages/api/challenge.ts

@@ -13,6 +13,7 @@
  * @requires process.env.API_KEY - ComPilot API key for authentication
  * @requires process.env.WEBHOOK_SECRET - Secret for webhook verification - optional if webhook is not used
  * @requires process.env.WORKFLOW_KYC_ID - KYC workflow identifier
+ * @requires process.env.WORKFLOW_GATING_ID - Signature gating workflow identifier
  */
 
 import type { NextApiRequest, NextApiResponse } from "next";
@@ -35,7 +36,7 @@ const apiClient = createSdk({
  * @param res - Used to send API response
  * 
  * Endpoint: POST /api/challenge
- * Request Body: { address: string, ... } + additional workflow parameters
+ * Request Body: { address: string, workflowType: 'kyc' | 'signatureGating', ... } + additional workflow parameters
  * Response: { message: string, sessionId: string } | { error: string }
  */
 export default async function handler(
@@ -49,14 +50,29 @@ export default async function handler(
   }
 
   try {
+    /**
+     * Extract workflow type and remove it from body
+     * Determines which workflow ID to use based on type
+     */
+    const { workflowType, ...restBody } = req.body;
+
+    /**
+     * Select appropriate workflow ID based on type
+     * - 'kyc': Uses KYC workflow for identity verification
+     * - 'signatureGating': Uses signature gating workflow for transaction authorization
+     */
+    const workflowId = workflowType === 'signatureGating' 
+      ? process.env.WORKFLOW_GATING_ID
+      : process.env.WORKFLOW_KYC_ID;
+
     /**
      * Challenge Creation
      * Uses SDK to create a challenge for wallet verification
-     * Includes workflow ID for KYC process
+     * Includes appropriate workflow ID based on type
      */
     const sessionRes = await apiClient.createWeb3Challenge({
-      workflowId: process.env.WORKFLOW_KYC_ID,
-      ...req.body,
+      workflowId,
+      ...restBody,
     });
     res.status(200).json(sessionRes);
 

code-examples/signature-gating/web3-NextJS/src/providers/ComPilotProviders.tsx

@@ -0,0 +1,65 @@
+/**
+ * @file ComPilotProviders.tsx
+ * @description Separate ComPilot providers for KYC and Signature Gating workflows
+ * 
+ * This file provides context providers that wrap different parts of the application
+ * with appropriate ComPilot configurations:
+ * - KYCComPilotProvider: For KYC-related functionality
+ * - SignatureGatingComPilotProvider: For signature gating functionality
+ */
+
+import { ReactNode } from "react";
+import { ComPilotProvider, createWeb3AuthAdapter, createConfig } from "@compilot/react-sdk";
+import { createWagmiWalletAdapter } from "@compilot/web-sdk-wallet-wagmi";
+import { useConfig } from "wagmi";
+import { generateChallengeKYC, generateChallengeSignatureGating } from "../compilot-config";
+
+interface ProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * KYCComPilotProvider
+ * Provides ComPilot context configured for KYC workflows
+ * Uses the KYC-specific challenge generation function
+ */
+export function KYCComPilotProvider({ children }: ProviderProps) {
+  const wagmiConfig = useConfig();
+
+  const walletAdapter = createWagmiWalletAdapter(wagmiConfig);
+  const authAdapter = createWeb3AuthAdapter({
+    generateChallenge: generateChallengeKYC,
+    wallet: walletAdapter,
+  });
+
+  const compilotConfig = createConfig({ authAdapter });
+
+  return (
+    <ComPilotProvider config={compilotConfig}>
+      {children}
+    </ComPilotProvider>
+  );
+}
+
+/**
+ * SignatureGatingComPilotProvider
+ * Provides ComPilot context configured for Signature Gating workflows
+ * Uses the signature gating-specific challenge generation function
+ */
+export function SignatureGatingComPilotProvider({ children }: ProviderProps) {
+  const wagmiConfig = useConfig();
+
+  const walletAdapter = createWagmiWalletAdapter(wagmiConfig);
+  const authAdapter = createWeb3AuthAdapter({
+    generateChallenge: generateChallengeSignatureGating,
+    wallet: walletAdapter,
+  });
+
+  const compilotConfig = createConfig({ authAdapter });
+
+  return (
+    <ComPilotProvider config={compilotConfig}>
+      {children}
+    </ComPilotProvider>
+  );
+}