Step by step with React or Next.js

1. Install @compilot/react-sdk.

   yarn

   yarn add @compilot/react-sdk

   npm

   npm install @compilot/react-sdk

   pnpm

   pnpm add @compilot/react-sdk

2. If you are going to use Wagmi, install @compilot/web-sdk-wallet-wagmi.

   yarn

   yarn add @compilot/web-sdk-wallet-wagmi 

   npm

   npm install @compilot/web-sdk-wallet-wagmi 

   pnpm

   pnpm add @compilot/web-sdk-wallet-wagmi 

3. Create compilot-config.ts and define the challenge function.

   export const generateChallenge = async (params: any) => {
       const res = await fetch("yourApiUrl/yourApiEndpoint", {
           method: "POST",
           headers: {
               "Content-Type": "application/json",
           },
           body: JSON.stringify(params),
       });
   
       return res.json();
   };

4. Create the configuration object. In Web3 mode you need a wallet adapter to interact with the customer's wallet. You can use the provided wallet adapter for Wagmi, or create a custom wallet adapter.

   Wagmi

   import { createWeb3AuthAdapter, createConfig } from "@compilot/react-sdk";
   import { createWagmiWalletAdapter } from "@compilot/web-sdk-wallet-wagmi";
   import { generateChallenge } from "./compilot-config";
   
   const walletAdapter = createWagmiWalletAdapter(wagmiConfig);
   const authAdapter = createWeb3AuthAdapter({ wallet: walletAdapter, generateChallenge });
   const config = createConfig({ authAdapter });

   wagmiConfig is provided by your wallet adapter tool.

   Custom

   import { createAuthAdapter, createConfig, Web3Wallet } from "@compilot/web-sdk"; // you may also use react-sdk here
   const customWalletConfig: Web3Wallet = {
   /**
   * The namespace of the wallet.
   * When using "eip155" (Ethereum), additional wallet methods must be implemented.
   */
   namespace: "cardano",
   /**
   * Fetch the user address of the wallet
   */
   getAddress: async () => {
    const { userAddress } = await getWallet();
    return userAddress;
   },
   /**
   * Ask the user to sign a text message
   */
   sign: async ({ message }) => {
    const { wallet } = await getWallet();
    // some wallets must pre-process the message before signing
    const signedMessage = preProcess(message);
    const { signature, publicKey } = await customSignMessage(
      signedMessage,
      wallet,
    );
    return {
      message,
      signature,
      signerPublicKey: publicKey,
      signedMessage: signedMessage,
     };
   },
   /**
   * Check if the wallet is connected
   */
   isConnected: async () => {
      const wallet = await getWallet();
      return Boolean(wallet);
    },
   };
   const authAdapter = createWeb3AuthAdapter({ // createAuthAdapter -> createWeb3AuthAdapter
      wallet: customWalletConfig,
      generateChallenge,
     });
   const config = createConfig({ authAdapter });

5. Wrap your app in the CompilotProvider component to get access to the ComPilot React SDK.

   import { CompilotProvider } from "@compilot/react-sdk";
   import { generateChallenge } from "./compilot-config";
   const App = ({ children }) => {
    return <CompilotProvider config={config}>{children}</CompilotProvider>;
   };
   

6. Use the hooks provided by the React SDK to interact with the ComPilot Widget.

   import { useOpenWidget } from "@compilot/react-sdk";
   
   const MyWidgetButton = () => {
     const { openWidget } = useOpenWidget();
   
     return (
       <button
         disabled={openWidget.isLoading}
         onClick={openWidget}
       >
         Open Widget
       </button>
     );
   };

   The full list of hooks is in the React SDK documentation.

Example

• Web3 mode using Next.js