From d48f4ae5f57acbbdda04ee7af55de60b56f70f28 Mon Sep 17 00:00:00 2001 From: grmkris Date: Mon, 16 Jun 2025 12:52:38 +0200 Subject: [PATCH] Refactor ComPilot providers to separate KYC and Signature Gating workflows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Created separate challenge functions for KYC and Signature Gating in compilot-config.ts - Added KYCComPilotProvider and SignatureGatingComPilotProvider components - Updated _app.tsx to use both providers with proper nesting - Modified challenge API endpoint to handle workflowType parameter - This ensures correct workflow IDs are used consistently throughout the system 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../web3-NextJS/src/compilot-config.ts | 16 ++++- .../web3-NextJS/src/pages/_app.tsx | 33 ++++------ .../web3-NextJS/src/pages/api/challenge.ts | 24 +++++-- .../src/providers/ComPilotProviders.tsx | 65 +++++++++++++++++++ 4 files changed, 111 insertions(+), 27 deletions(-) create mode 100644 code-examples/signature-gating/web3-NextJS/src/providers/ComPilotProviders.tsx diff --git a/code-examples/signature-gating/web3-NextJS/src/compilot-config.ts b/code-examples/signature-gating/web3-NextJS/src/compilot-config.ts index 513e1808..fc9a2ce7 100644 --- a/code-examples/signature-gating/web3-NextJS/src/compilot-config.ts +++ b/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(); }; \ No newline at end of file diff --git a/code-examples/signature-gating/web3-NextJS/src/pages/_app.tsx b/code-examples/signature-gating/web3-NextJS/src/pages/_app.tsx index 8e30adfb..88275daa 100644 --- a/code-examples/signature-gating/web3-NextJS/src/pages/_app.tsx +++ b/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) { - - - + + + + + diff --git a/code-examples/signature-gating/web3-NextJS/src/pages/api/challenge.ts b/code-examples/signature-gating/web3-NextJS/src/pages/api/challenge.ts index 366ff400..0ad92be2 100644 --- a/code-examples/signature-gating/web3-NextJS/src/pages/api/challenge.ts +++ b/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); diff --git a/code-examples/signature-gating/web3-NextJS/src/providers/ComPilotProviders.tsx b/code-examples/signature-gating/web3-NextJS/src/providers/ComPilotProviders.tsx new file mode 100644 index 00000000..6e56a63c --- /dev/null +++ b/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 ( + + {children} + + ); +} + +/** + * 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 ( + + {children} + + ); +} \ No newline at end of file